JavaScript

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

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));

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(", "));

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);

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

😱

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);

🤔 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).

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"));

😮 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)

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);

👀 VoidZero is Joining Cloudflare 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