JavaScript
31.3K subscribers
1.2K photos
10 videos
33 files
871 links
A resourceful newsletter featuring the latest and most important news, articles, books and updates in the world of #javascript ๐Ÿš€ Don't miss our Quizzes!

Let's chat: @nairihar
Download Telegram
๐Ÿ˜ฎ Geometric.js: A Library for Doing Geometry

Created by someone who works on graphics for the NYT, this elegant library lets you work with polygons, bounding boxes, reflection, interpolation, rotation, and the like (examples). Does one polygon intersect with another? Thereโ€™s a function for that.

Harry Stevens (The New York Times)
Please open Telegram to view this post
VIEW IN TELEGRAM
โค3๐Ÿ”ฅ2
CHALLENGE

class BankAccount {
#balance;
#transactionLog = [];

constructor(initialBalance) {
this.#balance = initialBalance;
}

deposit(amount) {
this.#balance += amount;
this.#transactionLog.push(`+${amount}`);
return this;
}

withdraw(amount) {
if (amount > this.#balance) throw new Error("Insufficient funds");
this.#balance -= amount;
this.#transactionLog.push(`-${amount}`);
return this;
}

get summary() {
return `Balance: ${this.#balance} | Txns: ${this.#transactionLog.join(", ")}`;
}
}

const account = new BankAccount(100);
account.deposit(50).deposit(25).withdraw(30);
console.log(account.summary);
console.log(account.hasOwnProperty("#balance"));
๐Ÿ‘4โค3
๐Ÿค” Oxide Computer Company's Mitos ASCII Tool (above) converts images into ASCII text illustrations and animations, by way of a built-in livecoding environment (built upon the fantastic play.core).
Please open Telegram to view this post
VIEW IN TELEGRAM
โค9
CHALLENGE


class Vehicle {
#speed = 0;

constructor(type, maxSpeed) {
this.type = type;
this.maxSpeed = maxSpeed;
}

accelerate(amount) {
this.#speed = Math.min(this.#speed + amount, this.maxSpeed);
return this;
}

getStatus() {
return `${this.type} going ${this.#speed}/${this.maxSpeed} km/h`;
}
}

class ElectricVehicle extends Vehicle {
#battery;

constructor(type, maxSpeed, battery) {
super(type, maxSpeed);
this.#battery = battery;
}

accelerate(amount) {
this.#battery -= amount * 0.5;
return super.accelerate(amount);
}

getStatus() {
return `${super.getStatus()} | Battery: ${this.#battery}%`;
}
}

const ev = new ElectricVehicle("Tesla", 250, 100);
ev.accelerate(80).accelerate(200);
console.log(ev.getStatus());
console.log(ev instanceof Vehicle);
console.log(ev.constructor === ElectricVehicle);
โค8๐Ÿ‘2๐Ÿ”ฅ1๐Ÿคฉ1
๐Ÿ˜ฑ
Please open Telegram to view this post
VIEW IN TELEGRAM
๐Ÿค”8๐Ÿ‘4โค1
CHALLENGE


const compose = (...fns) => x => fns.reduceRight((acc, fn) => fn(acc), x);
const pipe = (...fns) => x => fns.reduce((acc, fn) => fn(acc), x);

const double = x => x * 2;
const addTen = x => x + 10;
const square = x => x ** 2;
const negate = x => -x;

const composed = compose(negate, square, addTen, double);
const piped = pipe(negate, square, addTen, double);

const val = 3;

console.log(composed(val)); // compose: right-to-left
console.log(piped(val)); // pipe: left-to-right
โค5๐Ÿ‘2๐Ÿ”ฅ1
โค9
CHALLENGE

const company = {
name: "TechCorp",
ceo: {
name: "Morgan",
address: {
city: "Berlin"
}
},
getRevenue: () => 5_000_000
};

const cfoCity = company?.cfo?.address?.city ?? "Unknown";
const ceoCity = company?.ceo?.address?.city ?? "Unknown";
const ceoCountry = company?.ceo?.address?.country ?? "N/A";
const revenue = company?.getRevenue?.() ?? 0;
const employees = company?.getEmployees?.() ?? "No data";

console.log(cfoCity, ceoCity, ceoCountry, revenue, employees);
โค7๐Ÿ”ฅ2
CHALLENGE

const data = [
{ name: "Zara", score: 88 },
{ name: "Liam", score: 95 },
{ name: "Maya", score: 88 },
{ name: "Omar", score: 72 },
{ name: "Nina", score: 95 },
];

const sorted = [...data].sort((a, b) =>
b.score !== a.score
? b.score - a.score
: a.name.localeCompare(b.name)
);

console.log(sorted.map(p => `${p.name}:${p.score}`).join(", "));
โค10๐Ÿค”1
CHALLENGE


class Session {
#id;
constructor(id) {
this.#id = id;
}
getId() {
return this.#id;
}
}

const activeSessions = new WeakSet();

const s1 = new Session("alpha");
const s2 = new Session("beta");
let s3 = new Session("gamma");

activeSessions.add(s1);
activeSessions.add(s2);
activeSessions.add(s3);

console.log(activeSessions.has(s1));
console.log(activeSessions.has(s3));

activeSessions.delete(s2);
console.log(activeSessions.has(s2));

try {
activeSessions.add("invalid");
} catch (e) {
console.log(e instanceof TypeError);
}

console.log(activeSessions.has(s1));
โค6๐Ÿ”ฅ6
CHALLENGE


const tag = (strings, ...values) => {
return strings.reduce((result, str, i) => {
const val = values[i - 1];
const transformed =
typeof val === "number" ? `[${val ** 2}]` : `{${val?.toUpperCase()}}`;
return result + transformed + str;
});
};

const name = "nova";
const level = 3;
const score = 97;

const output = tag`Player: ${name} | Level: ${level} | Score: ${score}`;
console.log(output);
CHALLENGE

const handler = {
get(target, prop, receiver) {
if (prop in target) {
return Reflect.get(target, prop, receiver) * 2;
}
return Reflect.get(target, prop, receiver);
},
set(target, prop, value, receiver) {
if (typeof value !== "number") return false;
return Reflect.set(target, prop, value * 3, receiver);
},
has(target, prop) {
return prop.startsWith("x") && Reflect.has(target, prop);
},
};

const obj = new Proxy({ x1: 10, y1: 20 }, handler);
obj.x2 = 15;
obj.y2 = 40;

console.log(obj.x1);
console.log(obj.x2);
console.log("x1" in obj);
console.log("y1" in obj);
console.log(obj.y2);
โค1๐Ÿ”ฅ1
๐Ÿฅถ Flow for TypeScript Users in 2026

Flow is Meta's mature typed dialect of JavaScript, and over the years its syntax has converged closely with TypeScript's. This post walks through where the two now differ: Flow's stricter defaults reject several crash-prone patterns TypeScript's strict mode accepts, and it adds features of its own, like exhaustive match expressions.

George Zahariev (Meta)
Please open Telegram to view this post
VIEW IN TELEGRAM
โค4๐Ÿ”ฅ2