One of the yearโs big moves in JS tooling, as told by Evan himself. The company he founded to build Vite, Vitest, Rolldown, Oxc, etc. is joining Cloudflare. Heโs candid about why (monetization is hard). Good news: all projects stay MIT-licensed, and Evan and co remain in charge.
Evan You
Please open Telegram to view this post
VIEW IN TELEGRAM
๐ฅ3โค1๐1
CHALLENGE
const handler = {
get(target, prop, receiver) {
if (prop in target) {
return Reflect.get(target, prop, receiver) * 2;
}
return `missing:${prop}`;
},
set(target, prop, value) {
if (typeof value !== "number") {
throw new TypeError("Only numbers allowed");
}
Reflect.set(target, prop, value + 10);
return true;
},
has(target, prop) {
return prop.startsWith("x") ? false : prop in target;
},
};
const store = new Proxy({ xray: 5, zoom: 8 }, handler);
store.nova = 3;
console.log(store.xray);
console.log(store.nova);
console.log(store.ghost);
console.log("zoom" in store);
console.log("xray" in store);โค3๐1๐ฅ1
What is the output?
Anonymous Quiz
12%
5 13 missing:ghost true false
33%
10 13 missing:ghost false true
27%
10 26 missing:ghost true true
28%
10 26 missing:ghost true false
โค2๐ค1
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
What is the output?
Anonymous Quiz
14%
true
31%
Balance: 175 | Txns: +50, +25, -30 false
33%
Balance: 145 | Txns: +50, +25, -30
22%
Balance: 145 | Txns: +50, +25, -30 false
๐ฅ5
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
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
What is the output?
Anonymous Quiz
16%
true false false true true
49%
true true false true true
24%
true true true false true
10%
true true false false true
โค5๐ฅ3
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);