JavaScript

👀 How 1Password Used esbuild to Cut Browser Extension Build Times 1Password is a popular password management tool that relies upon a browser extension to fill out passwords on the Web. At over a minute for a single build, things were starting to drag for the devs. Could esbuild help? A fun story with plenty of technical details. Jarek Samic

CHALLENGE

function* generator() {
  yield 1;
  return 2;
}

const gen = generator();
console.log(gen.next().value);
console.log(gen.next().value);

CHALLENGE

function* generator() {
  yield 1;
  yield* (function*() { yield 2; yield 3; })();
  yield 4;
}

const gen = generator();
console.log(gen.next().value);
console.log(gen.next().value);
console.log(gen.next().value);
console.log(gen.next().value);

✌️ SOME UPDATES

CHALLENGE

function* generator() {
  yield 1;
  yield 2;
  yield 3;
}

const gen1 = generator();
const gen2 = generator();

console.log(gen1.next().value);
console.log(gen2.next().value);
console.log(gen1.next().value);
console.log(gen2.next().value);

✨ Creating Realistic Handwriting with p5.js Amy wanted to programatically bring her (cursive) handwriting into some diagrams she was making and figured out how to make it happen with p5.js. Here's how. AMY GOODCHILD

CHALLENGE

function* generator() {
  yield* [1, 2, 3];
  yield 4;
}

const gen = generator();
console.log([...gen]);

🤔 City in a Bottle: Raycasting in 256 Bytes Frank has a great reputation for putting together stunning visual demos with the tiniest amounts of JavaScript. This is no exception. He goes into a lot of detail about how it works; you’ll learn a few things and/or come away awe-struck. FRANK FORCE

CHALLENGE

const obj = {
  a: 1,
  b: function() {
    return () => {
      return this.a;
    };
  },
  c: function() {
    return function() {
      return this.a;
    };
  }
};

const arrowFunc = obj.b();
const regularFunc = obj.c();

console.log(arrowFunc());
console.log(regularFunc());

🧠 Brainchop 4.0 An in-browser 3D MRI rendering system. (Demo.)

CHALLENGE

console.log(1);

setTimeout(() => {
  console.log(2);
}, 100);

setTimeout(() => {
  console.log(3);
}, 0);

Promise.resolve().then(() => {
  console.log(4);
}).then(() => {
  console.log(5);
});

console.log(6);

✌️⚡️ IN BRIEF & SOME RELEASES

CHALLENGE

let proto = { a: 1 };
let obj = Object.create(proto);

Object.defineProperty(obj, 'a', {
  value: 2,
  writable: false,
  enumerable: true,
  configurable: false
});

console.log(obj.a);
proto.a = 3;
console.log(obj.a);