This ~420pg ebook is a collection of all 4 remaining "unbooks" of the 2nd edition of "You Don't Know JS Yet" book series.
Kyle Simpson
Please open Telegram to view this post
    VIEW IN TELEGRAM
  1π10β€4π₯4π€1
  CHALLENGE
const a = 9007199254740991n;
const b = 2n;
function performCalculation() {
const c = a + 1n;
const d = c / b;
const e = d * 2n - 1n;
const result = Number(e) === Number(a);
console.log(result);
}
performCalculation();
π7
  What is the output?
  Anonymous Quiz
    31%
    true
      
    24%
    false
      
    20%
    9007199254740991
      
    26%
    TypeError: Cannot convert a BigInt value to a number
      
    π11π€6β€4
  CHALLENGE
const obj = {
[Symbol('a')]: 'hidden',
a: 'visible',
[Symbol.for('b')]: 'registered',
b: 123
};
const symbol1 = Symbol.for('b');
const symbol2 = Symbol.for('b');
console.log(obj.a + ', ' +
obj[Symbol('a')] + ', ' +
obj[symbol1] + ', ' +
(symbol1 === symbol2));
β€2π₯2π1
  What is the output?
  Anonymous Quiz
    38%
    visible, hidden, registered, true
      
    37%
    visible, undefined, registered, true
      
    14%
    visible, undefined, registered, false
      
    10%
    visible, hidden, undefined, true
      
    π7β€5π₯4
  A popular Processing-inspired creative coding library that makes it easy to create interactive, visual experiences (examples). v2.0 improves its font support, adds more ways to draw and manipulate text, adds a way to write shaders in JavaScript, and much more. p5.js 2.0: You Are Here has more details on the release and where the project is headed next.
p5.js Team
Please open Telegram to view this post
    VIEW IN TELEGRAM
  π7π₯2β€1
  CHALLENGE
function* counter() {
  let i = 0;
  while (true) {
    const direction = yield i;
    if (direction === 'up') i += 2;
    else if (direction === 'down') i -= 1;
    else i += 1;
  }
}
const count = counter();
console.log(count.next().value);
console.log(count.next('up').value);
console.log(count.next('down').value);
console.log(count.next().value);π2π₯1
  π4β€3π₯3
  A split-flap display is a electro-mechanical display commonly associated with live timetable displays and it makes for a neat effect on the Web too. Jhey breaks down how to replicate it, or you can hit up this live demo.
Jhey Tompkins
Please open Telegram to view this post
    VIEW IN TELEGRAM
  π7π₯3β€1π€1
  CHALLENGE
function* genSequence() {
  const result = yield 'first';
  console.log(result);
  yield* [1, 2];
  return 'done';
}
const gen = genSequence();
let next = gen.next('ignored');
console.log(next.value);
next = gen.next('second');
next = gen.next();
console.log(next.value);
next = gen.next();
console.log(next);π3β€2π₯1
  A surprisingly featureful control for letting users pick fonts from a range of system fonts, Google fonts, and custom fonts of your choice. You can play with a code demo here or go to the GitHub repo.
Zygomatic
Please open Telegram to view this post
    VIEW IN TELEGRAM
  β€3π2π₯1
  CHALLENGE
function Animal(name) {
  this.name = name;
}
Animal.prototype.getName = function() {
  return this.name;
};
function Dog(name, breed) {
  Animal.call(this, name);
  this.breed = breed;
}
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;
Dog.prototype.getName = function() {
  return `Dog called ${Animal.prototype.getName.call(this)}`;
};
const myDog = new Dog('Rex', 'German Shepherd');
console.log(myDog.getName());π₯5β€1π1
  π₯4β€1π1
  Koa first appeared over a decade ago as a βnext-generationβ Web framework that shared some of the lineage (and team) of Express.js, but leaning on more modern JavaScript features and ideas of the time. While Express has been making a comeback recently, Koa has progressed too and offers a compelling alternative. v3.0 release notes.
Koa contributors
Please open Telegram to view this post
    VIEW IN TELEGRAM
  β€7π€©2π1π₯1
  CHALLENGE
const obj = {
  value: 42,
  getValue() {
    return this.value;
  },
  getValueArrow: () => this.value,
  nested: {
    value: 100,
    getValue() {
      return this.value;
    }
  }
};
const extractedMethod = obj.getValue;
const boundMethod = obj.getValue.bind(obj);
console.log(obj.getValue() + ',' + obj.getValueArrow() + ',' + 
            obj.nested.getValue() + ',' + extractedMethod() + ',' + 
            boundMethod());β€2
  What is the output?
  Anonymous Quiz
    33%
    42,42,100,42,42
      
    28%
    42,undefined,100,42,42
      
    16%
    undefined,undefined,100,undefined,42
      
    23%
    42,undefined,100,undefined,42
      
    π3β€2π₯2
  I've been dabbling with a little C# recently and enjoyed this TypeScript is Like C# guide oriented largely around showing TypeScript/JavaScript vs C# examples of doing the same things.
Please open Telegram to view this post
    VIEW IN TELEGRAM
  π5β€3π₯3
  CHALLENGE
const target = { a: 1, b: 2 };
const handler = {
  get(obj, prop) {
    return prop === 'sum' ? obj.a + obj.b : Reflect.get(obj, prop);
  },
  set(obj, prop, value) {
    if (prop === 'a' && value < 0) {
      return false;
    }
    return Reflect.set(obj, prop, value);
  }
};
const proxy = new Proxy(target, handler);
proxy.a = -5;
proxy.b = 10;
console.log(`${proxy.a}, ${proxy.b}, ${proxy.sum}`);π4π₯1
  What is the output?
  Anonymous Quiz
    31%
    -5, 10, 5
      
    34%
    undefined, 10, NaN
      
    20%
    -5, 10, NaN
      
    15%
    1, 10, 11
      
    π8β€2π₯1π€1π€©1
  Last year the popular GSAP (a.k.a. GreenSock) animation library was acquired by Webflow and as of this new version the entire GSAP toolkit is freely available (including formerly paid addons like MorphSVG and SplitText) even for commercial use. If you're unfamiliar with GSAP and want to see some of what it can do, they have a showcase, lots of code demos, and amazing docs.
Cassie Evans and Jack Doyle
Please open Telegram to view this post
    VIEW IN TELEGRAM
  π₯7β€2π2
  