The Vite-powered, Jest-compatible testing framework introduces visual regression testing, makes its โBrowser Modeโ stable (for running tests in a browser directly), adds Playwright Traces support, and more. Still unsure? You can compare it with other test runners here.
VoidZero and Contributors
Please open Telegram to view this post
    VIEW IN TELEGRAM
  โค3๐2๐ฅ1
  CHALLENGE
  async function fetchData() {
  return Promise.resolve('data');
}
async function processData() {
  const result = await fetchData();
  console.log('Processing:', result);
  return result.toUpperCase();
}
const promise = processData();
console.log('Promise:', promise);
promise.then(value => {
  console.log('Final:', value);
});What is the output?
  Anonymous Quiz
    27%
    Processing: data Promise: Promise { <pending> } Final: DATA
      
    41%
    Promise: Promise { <pending> } Processing: data Final: DATA
      
    25%
    Promise: Promise { <pending> } Final: DATA Processing: data
      
    6%
    Processing: data Final: DATA Promise: Promise { <pending> }
      
    ๐5โค2๐ฅ1
  CHALLENGE
class DataProcessor {
  constructor(transform) {
    this.transform = transform;
  }
  
  process(data) {
    return this.transform(data);
  }
}
const multiply = x => x * 2;
const addTen = x => x + 10;
const toString = x => `Result: ${x}`;
const compose = (...fns) => x => fns.reduceRight((acc, fn) => fn(acc), x);
const processor = new DataProcessor(compose(toString, addTen, multiply));
console.log(processor.process(5));โค2๐ฅ2
  โค4๐2๐ฅ1
  Itโs been more than four years since we linked to Sindre's handy resource, but it continues to get updates and tweaks (and, if you want, you can contribute a submission too โ though the bar is quite high).
Sindre Sorhus
Please open Telegram to view this post
    VIEW IN TELEGRAM
  โค5๐ฅ3๐2
  CHALLENGE
  const target = { name: 'Sarah', age: 25 };
const handler = {
  get(obj, prop) {
    if (prop in obj) {
      return obj[prop].toString().toUpperCase();
    }
    return `Property ${prop} not found`;
  },
  set(obj, prop, value) {
    obj[prop] = value * 2;
    return true;
  }
};
const proxy = new Proxy(target, handler);
proxy.salary = 50000;
console.log(proxy.name);
console.log(proxy.age);
console.log(proxy.salary);
console.log(proxy.city);What is the output?
  Anonymous Quiz
    47%
    SARAH 25 100000 Property city not found
      
    40%
    SARAH 25 50000 Property city not found
      
    11%
    Sarah 25 50000 undefined
      
    2%
    Sarah age salary city
      
    ๐ฅ3โค1๐1
  CHALLENGE
  function highlight(strings, ...values) {
  return strings.reduce((result, string, i) => {
    const value = values[i] ? `<mark>${values[i]}</mark>` : '';
    return result + string + value;
  }, '');
}
const name = 'Sarah';
const skill = 'React';
const template = highlight`Hello ${name}, you're great at ${skill}!`;
console.log(template);CHALLENGE
  const str = 'JavaScript';
const result1 = str.slice(-6, -2);
const result2 = str.substring(-6, -2);
const result3 = str.substr(-6, 4);
const combined = [result1, result2, result3];
const final = combined.map(s => s || 'empty').join(' | ');
console.log(final);
What is the output?
  Anonymous Quiz
    25%
    Scri | JavaScript | Scri
      
    36%
    Script | empty | Script
      
    31%
    Scri | empty | Scri
      
    8%
    Scri |  | Scri
      
    ๐ค6โค3๐1๐ฅ1
  Please open Telegram to view this post
    VIEW IN TELEGRAM
  โค4๐คฃ3๐2๐ฅ1
  First there was the "use strict" directive to opt in to strict mode in JavaScript, but now youโll encounter use client, use server, React's new use no memo, and more, and they're not standard JS features at all. Tanner thinks this proliferation of directives comes at a cost, with an increased risk of framework and tooling lock-in.
Tanner Linsley (TanStack)
Please open Telegram to view this post
    VIEW IN TELEGRAM
  CHALLENGE
const user = {
  name: 'Sarah',
  age: 28,
  city: 'Boston'
};
const keys = Object.keys(user);
const values = Object.values(user);
const entries = Object.entries(user);
const result = entries.map(([key, value]) => {
  return typeof value === 'string' ? key.toUpperCase() : value * 2;
});
console.log(result);โค6๐1๐ฅ1
  What is the output?
  Anonymous Quiz
    33%
    ['SARAH', 28, 'BOSTON']
      
    43%
    ['NAME', 56, 'CITY']
      
    18%
    [undefined, 56, undefined]
      
    6%
    ['NAME', 'CITY', 56]
      
    โค3
  Itโs not often we see a library with such a funny demo on the homepage (it involves cats and laser pointers!) Navcat is a pathfinding library, aimed at games and simulations, for enabling objects to route through 3D space. There are numerous other interesting demos too. GitHub repo.
Isaac Mason
Please open Telegram to view this post
    VIEW IN TELEGRAM
  โค5๐1๐ฅ1
  CHALLENGE
const numbers = [1, 2, 3, 4, 5];
const result = numbers
.filter(n => n % 2 === 0)
.map(n => n * 2)
.reduce((acc, n) => acc + n, 0);
const original = numbers.slice();
original.reverse();
const flattened = [[1, 2], [3], [4, 5]].flat();
const found = flattened.find(n => n > 3);
console.log(result);
console.log(original.length);
console.log(found);
โค1
  ๐5โค2๐ฅ1
  Please open Telegram to view this post
    VIEW IN TELEGRAM
  โค2๐2๐ฅ1