Sponsored by Bryntum 👮‍♀️
World Class Web Components

❓ CHALLENGE

const obj1 = {
  name: "Alice",
  age: 25
};

const obj2 = {
  age: 30,
  city: "Wonderland"
};

with (obj1) {
  with (obj2) {
    name = "Bob";
    console.log(name, age);
  }
}

Sponsored by Bryntum 👮‍♀️
World Class Web Components

🔥 Billionaire Pavel Durov arrested... The truth about Telegram

Fireship

Sponsored by Bryntum 👮‍♀️
World Class Web Components

✌️ Regexes Got Good: The History (and Future) of Regular Expressions in JavaScript

Regular expression support was always a little underwhelming in JS, but things have improved. Steven takes us on a tour to refresh our knowledge, as well as show off his ‘regex’ library that boosts JS regexes to a true A++ rating. Steven was co-author of O’Reilly’s Regular Expressions Cookbook and High Performance JavaScript so knows his stuff.

Steven Levithan

Sponsored by Bryntum 👮‍♀️
World Class Web Components

❓ CHALLENGE

const weakMap = new WeakMap();
const arr = [1, 2, 3].map(n => ({ n }));

arr.forEach(obj => weakMap.set(obj, obj.n * 2));

arr.pop(); // Remove the last element

const result = arr.reduce((acc, obj) => acc + weakMap.get(obj), 0);

console.log(result);

Sponsored by Bryntum 👮‍♀️
World Class Web Components

🌲 LogTape: Simple Logging Library with Zero Dependencies

I’m digging this new style of library that promises support across all the main runtimes (Node, Deno, Bun) as well as edge functions and browser devtools.

Hong Minhee

Sponsored by Bryntum 👮‍♀️
World Class Web Components

❓ CHALLENGE

function* infiniteGenerator() {
  let i = 0;
  while (true) {
    yield i++;
  }
}

const weakMap = new WeakMap();
const gen = infiniteGenerator();

weakMap.set(gen, gen.next().value);

const result = weakMap.get(gen) + gen.next().value;

console.log(result);

Sponsored by Bryntum 👮‍♀️
World Class Web Components

👸 Milkdown: Plugin-Driven WYSIWYG Markdown Editor Framework

A lightweight WYSIWYG Markdown editor based around a plugin system that enables a significant level of customization. It’s neat to see the docs are rendered by the editor itself. GitHub repo.

Mirone

Sponsored by Bryntum 👮‍♀️
World Class Web Components

❓ CHALLENGE

const weakMap = new WeakMap();
let obj = { name: 'initial' };

function changeName(obj) {
  weakMap.set(obj, obj.name);
  obj.name = 'changed';
}

changeName(obj);

console.log(weakMap.get(obj));

Sponsored by Bryntum 👮‍♀️
World Class Web Components

❓ CHALLENGE

const weakMap = new WeakMap();
const arr = [1, 2, 3, 4];
const objs = arr.map(n => ({ n }));

objs.forEach((obj, index) => weakMap.set(obj, arr.slice(0, index + 1)));

const result = objs.map(obj => weakMap.get(obj).reduce((acc, num) => acc + num, 0));

console.log(result);

Sponsored by Bryntum 👮‍♀️
World Class Web Components

❓ CHALLENGE

const weakMap = new WeakMap();
const arr = [{}, {}, {}];

arr.forEach((obj, index) => weakMap.set(obj, index));

arr.splice(1, 1); // Remove the second element

const result = arr.map(obj => weakMap.get(obj));

console.log(result);

Sponsored by Bryntum 👮‍♀️
World Class Web Components

🌲 How to Create an NPM Package in 2024

Sounds simple, but there are a lot of steps involved if you want to follow best practices, introduce useful tools, and get things just right. Matt Pocock walks through the process here, and there’s a 14-minute screencast too, if you’d prefer to watch along.

Matt Pocock

Sponsored by Bryntum 👮‍♀️
World Class Web Components

✌️ JS Dates are About to Be Fixed

Handling dates and times is famously a painful area for programmers and JavaScript hasn’t done a lot to make it easier. Libraries like Moment.js help a lot, but Iago looks at how the Temporal proposal and its features will begin to help a lot more over time.

Iago Lastra

Sponsored by Bryntum 👮‍♀️
World Class Web Components

❓ CHALLENGE

const obj = {
  outer: 1,
  inner: {
    outer: 10,
    inner: 20
  }
};

let result = 0;

with (obj) {
  result += outer;
  with (inner) {
    result += outer + inner;
  }
}

console.log(result);

❓ CHALLENGE

const numbers = [0,0,0];

let i = 0;
const result = numbers.reduce((acc, _) => {
  return ++acc;
}, i);

console.log(i, result);