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
34%
1 11 31 true
34%
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)
41%
true 1 3 true Symbol(id)
24%
false 1 3 true Symbol(id)
7%
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`);❤1👍1
What is the output?
Anonymous Quiz
32%
Sum:\n| End::5,10
35%
Sum:\n End::15
24%
Sum:\n| End::15
9%
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);
🔥1
What is the output?
Anonymous Quiz
15%
-1 1 512 64 0.3
51%
-1 1 512 64 0.30000000000000004
26%
-1 1 64 512 0.30000000000000004
8%
1 -1 512 64 0.30000000000000004
👍1
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(' | '));
🤔1
CHALLENGE
const arr = [1, [2, 3], [4, [5, 6]]];
const a = arr.flat();
const b = arr.flat(Infinity);
const c = arr.flatMap(x => Array.isArray(x) ? x : [x, x]);
console.log(a, b, c);
❤3