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
28%
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
48%
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
37%
Script | empty | Script
30%
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
34%
['SARAH', 28, 'BOSTON']
43%
['NAME', 56, 'CITY']
17%
[undefined, 56, undefined]
7%
['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);
๐5โค2๐ฅ1