A grab bag of performance lessons from a sprint that cut p75 'time-to-typeable' from 3.1s to 0.55s. Em dashes (the irony!) pushed V8 onto a slower regex path, a stray location.reload() caused half a million hidden reloads a day, and more.
Wang, Attard, and G (Anthropic)
Please open Telegram to view this post
VIEW IN TELEGRAM
❤3👍3
SolidJS's creator argues that HTMX, React, LiveView, and friends differ mostly in how they split the same three jobs (navigation, content, and instant UI feedback) between client and server. He then shows how Solid 2.0 aims to cover the whole spectrum.
Ryan Carniato
Please open Telegram to view this post
VIEW IN TELEGRAM
❤3👍3
CHALLENGE
const compose = (...fns) => fns.reduce((f, g) => (...args) => f(g(...args)));
const pipe = (...fns) => fns.reduce((f, g) => (...args) => g(f(...args)));
const add1 = x => x + 1;
const double = x => x * 2;
const square = x => x * x;
const composed = compose(square, double, add1);
const piped = pipe(square, double, add1);
console.log(composed(3), piped(3));
❤2👍2🔥1
Set a size or load-time budget for your code and this tool can fail CI (or flag a PR) if a change goes over it. You can also do one-off checks and see visualizations of where the bytes are. Framework-agnostic and doesn’t care which bundler or CI you use.
Andrey Sitnik
Please open Telegram to view this post
VIEW IN TELEGRAM
❤2
CHALLENGE
class Base {
static log = [];
static {
Base.log.push('base-block');
}
static value = (() => { Base.log.push('base-field'); return 1; })();
}
class Derived extends Base {
static {
Derived.log.push('derived-block');
}
static value2 = (() => { Derived.log.push('derived-field'); return 2; })();
}
console.log(Derived.log.join(','));❤1👍1
Please open Telegram to view this post
VIEW IN TELEGRAM
❤8
CHALLENGE
async function* gen() {
const x = yield 1;
const y = yield x + 1;
return x + y;
}
async function main() {
const it = gen();
const a = await it.next();
const b = await it.next(10);
const c = await it.next(20);
console.log(`${a.value} ${b.value} ${c.value} ${c.done}`);
}
main();👍2
What is the output?
Anonymous Quiz
25%
1 11 30 true
35%
1 11 31 true
33%
undefined 11 30 true
7%
1 10 30 true
CHALLENGE
const sym1 = Symbol('id');
const sym2 = Symbol('id');
const obj = {
[sym1]: 'first',
[sym2]: 'second',
regular: 'value'
};
const s = Symbol.for('shared');
const s2 = Symbol.for('shared');
console.log(
sym1 === sym2,
Object.keys(obj).length,
Reflect.ownKeys(obj).length,
s === s2,
sym1.toString()
);❤1
What is the output?
Anonymous Quiz
28%
false 1 3 false Symbol(id)
43%
true 1 3 true Symbol(id)
21%
false 1 3 true Symbol(id)
8%
false 3 3 true Symbol(id)
🔥3❤2👍1
CHALLENGE
function tag(strings, ...values) {
return strings.raw.join('|') + '::' + values.join(',');
}
const a = 5, b = 10;
console.log(tag`Sum:\n${a + b} End`);What is the output?
Anonymous Quiz
32%
Sum:\n| End::5,10
34%
Sum:\n End::15
26%
Sum:\n| End::15
8%
Sum: End::15
CHALLENGE
const a = -7 % 3;
const b = 7 % -3;
const c = 2 ** 3 ** 2;
const d = (2 ** 3) ** 2;
const e = 0.1 + 0.2;
console.log(a, b, c, d, e);
What is the output?
Anonymous Quiz
16%
-1 1 512 64 0.3
53%
-1 1 512 64 0.30000000000000004
25%
-1 1 64 512 0.30000000000000004
6%
1 -1 512 64 0.30000000000000004
CHALLENGE
async function main() {
const settled = await Promise.allSettled([
Promise.resolve(1),
Promise.reject('err'),
]);
const statuses = settled.map(s => s.status).join(',');
let anyResult;
try {
await Promise.any([Promise.reject('a'), Promise.reject('b')]);
} catch (err) {
anyResult = `${err.name}:${err.errors.join(',')}`;
}
console.log(statuses, anyResult);
}
main();CHALLENGE
const output = [];
output.push(typeof foo);
try {
output.push(typeof bar);
} catch (e) {
output.push(e.message);
}
var foo = () => 'foo';
let bar = () => 'bar';
console.log(output.join(' | '));