JavaScript

🤩 Flint: Chart Specs that Compile to Vega-Lite, ECharts, or Chart.js A Microsoft project that compiles a simple, declarative JSON-based spec of a data visualization into a form that Vega-Lite, ECharts or Chart.js can render. It's pitched at agentic use, but is a simple intermediate format humans could benefit from too. Microsoft Research

😃 Framework Benchmarks: Compare Frontend Frameworks An experienced developer built and benchmarked the same app across numerous frameworks (e.g. Angular, Solid, React, Alpine.js…). Here are the results, covering bundle size, build time, UX metrics, and more. Alicia Sykes

CHALLENGE

function* pipeline(...fns) {
  let value = yield;
  for (const fn of fns) {
    value = yield fn(value);
  }
  return value;
}

const double  = x => x * 2;
const addTen  = x => x + 10;
const square  = x => x * x;

const gen = pipeline(double, addTen, square);

gen.next();           // prime the generator
const r1 = gen.next(3);
const r2 = gen.next(r1.value);
const r3 = gen.next(r2.value);

console.log(r1.value, r2.value, r3.value);

CHALLENGE

function highlight(strings, ...values) {
  return strings.reduce((result, str, i) => {
    const value = values[i - 1];
    const transformed =
      typeof value === "number"
        ? `[${value * 2}]`
        : `(${String(value).toUpperCase()})`;
    return result + transformed + str;
  });
}

const product = "widget";
const qty = 4;
const price = 12.5;

const output = highlight`Order: ${product} x${qty} @ $${price}`;
console.log(output);

CHALLENGE

const p1 = new Promise((resolve) => {
  console.log("A");
  resolve("B");
});

const p2 = p1.then((val) => {
  console.log(val);
  return "C";
});

p2.then((val) => {
  console.log(val);
});

console.log("D");

CHALLENGE

const tag = (strings, ...values) => {
  return strings.reduce((result, str, i) => {
    const value = values[i - 1];
    const transformed =
      typeof value === "number" ? value * 2 : value?.toUpperCase();
    return result + transformed + str;
  });
};

const name = "carlos";
const score = 42;
const bonus = null;

const output = tag`Player: ${name}, Score: ${score}, Bonus: ${bonus}`;
console.log(output);

CHALLENGE

const user = {
  profile: {
    name: "Marcus",
    address: {
      city: "Berlin",
      zip: "10115"
    }
  },
  getSubscription: () => ({
    plan: "pro",
    features: ["analytics", "exports"]
  })
};

const city       = user?.profile?.address?.city;
const country    = user?.profile?.address?.country?.toUpperCase();
const firstFeature = user?.getSubscription?.()?.features?.[0];
const adminRole  = user?.roles?.[0]?.name ?? "guest";

console.log(city, country, firstFeature, adminRole);

CHALLENGE

function createUser(
  name,
  role = "viewer",
  permissions = { read: true, write: false },
  level = permissions.write ? 2 : 1
) {
  return { name, role, permissions, level };
}

const user1 = createUser("Carlos");
const user2 = createUser("Diana", "editor", { read: true, write: true });
const user3 = createUser("Eve", "admin", undefined, 5);

console.log(user1.role, user1.level);
console.log(user2.role, user2.level);
console.log(user3.role, user3.level);

CHALLENGE

const flags = {
  READ:    0b0001,
  WRITE:   0b0010,
  EXECUTE: 0b0100,
  DELETE:  0b1000,
};

const userPermissions = flags.READ | flags.WRITE | flags.EXECUTE;
const adminPermissions = userPermissions | flags.DELETE;

const canDelete = (adminPermissions & flags.DELETE) !== 0;
const readOnly  = userPermissions & ~flags.WRITE;

const toggled = userPermissions ^ flags.EXECUTE;
const shifted = (flags.DELETE << 2) | (flags.READ >> 0);

console.log(canDelete, readOnly, toggled, shifted);

CHALLENGE

const obj = {
  name: "Quantum",
  regular: function () {
    return this.name;
  },
  arrow: () => {
    return this?.name;
  },
  nested: function () {
    const inner = () => this.name;
    return inner();
  },
};

console.log(obj.regular());
console.log(obj.arrow());
console.log(obj.nested());