JavaScript

21 June 2026 08:33

CHALLENGE

function* range(start, end) {
  while (start < end) {
    yield start++;
  }
}

function* labeled(prefix, gen) {
  for (const val of gen) {
    yield `${prefix}:${val}`;
  }
}

function* pipeline() {
  yield* labeled("A", range(1, 4));
  yield* labeled("B", range(10, 12));
}

const results = [...pipeline()];
console.log(results.length, results[0], results[results.length - 1]);

JavaScript

19 June 2026 15:00

🤔 Tabulator 6.5 (above) – Create interactive tables from any HTML table, JS array or JSON data.

JavaScript

19 June 2026 08:33

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

JavaScript

17 June 2026 08:31

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

JavaScript

15 June 2026 08:31

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

JavaScript

13 June 2026 09:34

😱

JavaScript

12 June 2026 15:18

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

JavaScript

11 June 2026 15:17

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

JavaScript

10 June 2026 15:16

👀 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

JavaScript

09 June 2026 08:30

CHALLENGE

const memoize = (fn) => {
  const cache = new Map();
  return (...args) => {
    const key = JSON.stringify(args);
    if (cache.has(key)) {
      return cache.get(key);
    }
    const result = fn(...args);
    cache.set(key, result);
    return result;
  };
};

let callCount = 0;

const expensiveMultiply = memoize((a, b) => {
  callCount++;
  return a * b;
});

console.log(expensiveMultiply(4, 5));
console.log(expensiveMultiply(4, 5));
console.log(expensiveMultiply(3, 7));
console.log(expensiveMultiply(4, 5));
console.log(`calls: ${callCount}`);

JavaScript

08 June 2026 08:32

CHALLENGE

class Pipeline {
  #value;
  #log = [];

  constructor(value) {
    this.#value = value;
  }

  map(fn) {
    this.#value = fn(this.#value);
    this.#log.push(`map:${this.#value}`);
    return this;
  }

  filter(fn) {
    if (Array.isArray(this.#value)) {
      this.#value = this.#value.filter(fn);
      this.#log.push(`filter:${this.#value}`);
    }
    return this;
  }

  reduce(fn, init) {
    this.#value = this.#value.reduce(fn, init);
    this.#log.push(`reduce:${this.#value}`);
    return this;
  }

  result() {
    console.log(this.#log.join(' | '));
    return this.#value;
  }
}

const output = new Pipeline([1, 2, 3, 4, 5, 6])
  .filter(x => x % 2 === 0)
  .map(arr => arr.map(x => x ** 2))
  .reduce((acc, x) => acc + x, 0)
  .result();

console.log(output);

JavaScript

07 June 2026 08:30

CHALLENGE

const transactions = [
  { type: "credit", amount: 200, category: "salary" },
  { type: "debit",  amount: 50,  category: "food" },
  { type: "debit",  amount: 30,  category: "food" },
  { type: "credit", amount: 100, category: "bonus" },
  { type: "debit",  amount: 70,  category: "transport" },
];

const summary = transactions.reduce((acc, { type, amount, category }) => {
  acc.balance += type === "credit" ? amount : -amount;
  acc.byCategory[category] = (acc.byCategory[category] ?? 0) + amount;
  acc.count[type] = (acc.count[type] ?? 0) + 1;
  return acc;
}, { balance: 0, byCategory: {}, count: {} });

console.log(summary.balance);
console.log(JSON.stringify(summary.byCategory));
console.log(JSON.stringify(summary.count));

JavaScript

05 June 2026 15:05

Programming language legend 😉 Anders Hejlsberg was on The Pragmatic Engineer talking about his background, work on TypeScript, JavaScript's strengths and weaknesses, and how he uses AI.

JavaScript

04 June 2026 15:04

📊 Plotly 3.6: The Declarative Graphing Library

A long-standing library, also widely used in the Python and R ecosystems, that offers over 50 visualization types, from basic charts and graphs to maps, plots, and heatmaps.

Plotly, Inc.

JavaScript

03 June 2026 15:03

👀 Hocuspocus 4: Add Real-Time Collaboration to Any App

A plug-and-play real-time collaboration backend based on Yjs so you can quickly and safely wire up multi-user collaborative experiences into a JavaScript app. It runs on Node, Bun, Deno, or Cloudflare Workers. GitHub repo.

Tiptap

JavaScript

20 June 2026 08:34

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 transform1 = compose(negate, square, addTen, double);
const transform2 = pipe(negate, square, addTen, double);

console.log(transform1(3));
console.log(transform2(3));

JavaScript

19 June 2026 15:00

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

JavaScript

18 June 2026 08:31

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

JavaScript

16 June 2026 08:30

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

JavaScript

14 June 2026 08:31

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

JavaScript

13 June 2026 08:32

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

JavaScript

12 June 2026 08:32

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

JavaScript

11 June 2026 08:31

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

JavaScript

10 June 2026 08:33

CHALLENGE

class Registry {
  static #instances = new Map();
  static #count = 0;
  static defaultTTL;
  static maxSize;

  static {
    Registry.defaultTTL = 3600;
    Registry.maxSize = 100;
    Registry.#instances.set("__init__", { ts: 0 });
    Registry.#count = Registry.#instances.size;
  }

  static register(key) {
    if (Registry.#count >= Registry.maxSize) return false;
    Registry.#instances.set(key, { ts: Registry.defaultTTL });
    Registry.#count++;
    return true;
  }

  static info() {
    return `count=${Registry.#count}, ttl=${Registry.defaultTTL}, max=${Registry.maxSize}`;
  }
}

Registry.register("service-a");
Registry.register("service-b");
console.log(Registry.info());

JavaScript

08 June 2026 19:12

🌪 GitHub Copilot SDK Now Generally Available

Available for several platforms, including Node, this SDK lets you wield the agentic engine behind Copilot in your own apps (coupled with your own custom-built tools) and it uses an existing Copilot subscription. The getting started tutorial provides a good intro and the cookbook includes some sample apps.

GitHub

JavaScript

07 June 2026 14:00

😮 replacements.fyi: Find Replacements for npm Packages

Type in a package name and get suggestions of lighter alternatives or Node APIs and code snippets that do the same task. For example: is-number leads to a one-liner, axios turns into fetch, and chalk recommends util.styleText. A neat idea it’d be cool to see grow further.

e18e

JavaScript

06 June 2026 08:30

CHALLENGE

const person = {
  name: "Marcus",
  greet: function () {
    const inner = () => `Hello, I am ${this.name}`;
    return inner();
  },
  greetArrow: () => {
    return `Hello, I am ${this.name}`;
  },
};

const detached = person.greet;

console.log(person.greet());
console.log(person.greetArrow());
console.log(detached?.());

JavaScript

05 June 2026 08:30

CHALLENGE

function Animal(name) {
  this.name = name;
}

Animal.prototype.speak = function () {
  return `${this.name} makes a sound.`;
};

function Dog(name, breed) {
  Animal.call(this, name);
  this.breed = breed;
}

Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

Dog.prototype.speak = function () {
  return `${this.name} barks!`;
};

const dog = new Dog("Rex", "Labrador");

console.log(dog.speak());
console.log(dog instanceof Dog);
console.log(dog instanceof Animal);
console.log(Object.getPrototypeOf(dog) === Animal.prototype);

JavaScript

04 June 2026 08:33

CHALLENGE

"use strict";

function createCounter() {
  let count = 0;

  return {
    increment() { count++; },
    get value() { return count; },
    toString() { return `Counter: ${count}`; }
  };
}

const counter = createCounter();
counter.increment();
counter.increment();
counter.increment();

try {
  counter.value = 99;
} catch (e) {
  console.log(`${e.constructor.name}: ${counter}`);
}

JavaScript

03 June 2026 08:30

CHALLENGE

const config = {
  timeout: 0,
  retries: null,
  host: "",
  port: undefined,
  debug: false,
};

const timeout = config.timeout ?? 3000;
const retries = config.retries ?? 5;
const host = config.host ?? "localhost";
const port = config.port ?? 8080;
const debug = config.debug ?? true;

console.log(timeout, retries, host, port, debug);