JavaScript

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

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

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

🌪 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

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

😮 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

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

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?.());

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.

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

📊 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.

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