JavaScript

↗️ TanStack Charts: A New Chart Grammar Option In the past few weeks, TanStack has been rapidly iterating on a new, framework-neutral way to declaratively specify a large number of chart-related visualizations in JavaScript. Output renders to SVG or canvas and can be styled as you wish. Here's a comparison against other established options. TanStack

CHALLENGE

const str = "2024-01-15";
const result = str.replace(/(\d+)-(\d+)-(\d+)/, "$3/$2/$1");
const s2 = "abc".padStart(6, "12");
const s3 = [..."hello"].reverse().join("");
console.log(result, s2, s3);

👀 Next.js 16.3 Released The newly expanded Next.js team (now including Dan Abramov and 𝕏 Pete Hunt!) has dropped the latest version of the popular React framework, complete with faster builds, optional TypeScript 7 type checking, faster SSR, Instant Navigations, AI improvements, and more. The Next.js Team

CHALLENGE

function 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 calls = 0;
const add = memoize((a, b) => { calls++; return a + b; });

const r1 = add(1, 2);
const r2 = add(2, 1);
const r3 = add(1, 2);
console.log(r1, r2, r3, calls);

CHALLENGE

const Loggable = {
  log() { return `[${this.constructor.name}] ${this.toString()}`; }
};

class Base {
  toString() { return 'Base instance'; }
}

Object.setPrototypeOf(Base.prototype, Loggable);

class Derived extends Base {
  toString() { return 'Derived instance'; }
}

const b = new Base();
const d = new Derived();

console.log(b.log(), d.log(), Object.getPrototypeOf(Derived.prototype) === Base.prototype);

CHALLENGE

class Config {
  constructor(options = {}) {
    this.retries = options.retries ?? 3;
    this.timeout = options.timeout ?? 1000;
  }
}
const cfg1 = new Config({ retries: 0, timeout: null });
const cfg2 = new Config({ retries: undefined, timeout: false });
cfg1.retries ??= 99;
cfg2.timeout ??= 99;
console.log(cfg1.retries, cfg1.timeout, cfg2.retries, cfg2.timeout);

CHALLENGE

let arr = [];
for (let i = 0; i < 3; i++) {
  if (i === 1) {
    let i = 10;
    arr.push(i);
    continue;
  }
  arr.push(i);
}
console.log(arr.join('-'));

CHALLENGE

const a = [] + {};
const b = {} + [];
const c = 1 + '1' - 1;
const d = '5' + 3 - 2;
const e = true + true;
console.log(a, b, c, d, e);

CHALLENGE

const order = [];
const log = (s) => order.push(s);

log('start');

Promise.resolve().then(() => {
  log('p1');
  return Promise.resolve();
}).then(() => log('p1-2'));

async function foo() {
  log('foo-start');
  await null;
  log('foo-end');
}

foo();

Promise.resolve().then(() => log('p2'));

log('end');

setTimeout(() => console.log(order.join(' ')), 0);

CHALLENGE

function tag(strings, ...values) {
  return strings.raw.join('|') + '=' + values.reduce((sum, v) => sum + v, 0);
}
const x = 5;
const y = 10;
console.log(tag`Sum\n${x}and${y}end`);

CHALLENGE

const config = { retries: 0, timeout: null, name: '' };
const a = config.retries || 5;
const b = config.timeout ?? 10;
const c = config.name || 'default';
const d = config.missing?.value ?? 'fallback';
let calls = 0;
const sideEffect = () => { calls++; return true; };
const e = config.retries && sideEffect();
console.log(a, b, c, d, e, calls);