A type-safe, framework agnostic (React, Vue, Angular, Solid and Lit are all supported out of the box), headless and isomorphic way to create and work with forms, with this v1.0 release over two years in the making. If you already use things like Formik or React Hook Form and are wondering how it differs, hereβs a comparison table.
Tanner Linsley
Please open Telegram to view this post
VIEW IN TELEGRAM
β€3π₯3π2
CHALLENGE
function* counter() {
let count = 1;
while (true) {
const reset = yield count;
count = reset ? 1 : count + 1;
}
}
const gen = counter();
console.log(gen.next().value);
console.log(gen.next().value);
console.log(gen.next(true).value);
console.log(gen.next().value);
π8π₯4β€1
What is the output?
Anonymous Quiz
34%
1, 2, 1, 2
25%
1, undefined, 1, 2
27%
1, 2, true, 3
14%
1, 2, 3, 4
π₯4β€3π1
Each year, the HTTP Archive puts together the Web Almanac, a report on the βstate of the Webβ. The JavaScript section has just gone live and goes into depth on how much JS weβre using (or failing to use!), the popularity of TypeScript, loading methods, Web Worker use, and, yes, jQuery still leads the way!
HTTP Archive
Please open Telegram to view this post
VIEW IN TELEGRAM
π5β€4π€2π₯1
CHALLENGE
const user = {
profile: {
name: "Alice",
settings: null
},
getPreferences() {
return this.profile.settings?.theme || "default";
}
};
const admin = {
profile: {
name: "Admin"
},
getPreferences() {
return this.profile.settings?.theme || "default";
}
};
console.log(user.getPreferences());
console.log(admin.getPreferences());
console.log(user.profile.extra?.id?.toString());
π7β€5
What is the output?
Anonymous Quiz
28%
default TypeError: Cannot read properties of undefined undefined
48%
default default undefined
12%
TypeError: Cannot read properties of null default undefined
12%
default default null
π€5β€1π1
Please open Telegram to view this post
VIEW IN TELEGRAM
π9β€7π₯1
CHALLENGE
function Animal(name) {
this.name = name;
}
Animal.prototype.speak = function() {
return `${this.name} makes a noise`;
};
function Dog(name) {
Animal.call(this, name);
}
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;
Dog.prototype.speak = function() {
return `${this.name} barks`;
};
const animal = new Animal('Animal');
const dog = new Dog('Rex');
console.log(dog instanceof Animal);
π₯5π1
What is the output?
Anonymous Quiz
19%
ReferenceError: Animal is not defined
18%
false
24%
TypeError: Animal.call is not a function
39%
true
π6β€2π₯2
CHALLENGE
const company = {
name: 'TechCorp',
departments: {
engineering: {
head: { name: 'Alice', contact: null },
staff: 50
},
marketing: null
}
};
const engineeringContact = company.departments.engineering.head.contact;
const marketingHead = company.departments.marketing?.head?.name;
const financeStaff = company?.departments?.finance?.staff ?? 'Not available';
console.log(`${engineeringContact} - ${marketingHead} - ${financeStaff}`);
π10π€©2β€1
What is the output?
Anonymous Quiz
25%
null - undefined - undefined
46%
null - undefined - Not available
21%
TypeError: Cannot read property 'contact' of null
8%
TypeError: Cannot read properties of null (reading 'head')
π₯7π4β€3
CHALLENGE
const userMap = new WeakMap();
const user1 = { name: 'Alice' };
const user2 = { name: 'Bob' };
userMap.set(user1, { visits: 10 });
userMap.set(user2, { visits: 5 });
// Later in the code...
const entries = [];
for (const obj of [user1, null, user2]) {
if (obj !== null && userMap.has(obj)) {
entries.push(userMap.get(obj).visits);
}
}
console.log(entries.reduce((sum, visits) => sum + visits, 0));
β€4π₯3π2
What is the output?
Anonymous Quiz
21%
Error: Cannot use 'null' as a key in WeakMap
13%
10
44%
15
21%
[10, 5]
π3β€2π₯2
PGlite packages a WASM build of Postgres into a TypeScript library that can be run directly from Node.js (or Bun, Deno, and even the browser) and itβs only a few megabytes in size.
ElectricSQL / Neon
Please open Telegram to view this post
VIEW IN TELEGRAM
π5β€2π₯2
CHALLENGE
function outer() {
let x = 10;
function inner() {
console.log(x);
if(true) {
let x = 20;
console.log(x);
}
console.log(x);
}
inner();
}
outer();
π7β€1
What is the output?
Anonymous Quiz
15%
undefined, 20, 10
16%
10, 20, undefined
55%
10, 20, 10
14%
10, 20, 20
π11β€3π₯1
A tool that runs pnpm inside your browser, βinstallsβ a package, then analyzes its dependencies. This can be useful for analyzing packages you already use, but also for simplifying your own projects, as 11tyβs Zach Leatherman did here.
Anthony Fu
Please open Telegram to view this post
VIEW IN TELEGRAM
β€10π6π₯1
CHALLENGE
const ws = new WeakSet();
const obj1 = { id: 1 };
const obj2 = { id: 2 };
ws.add(obj1);
ws.add(obj2);
ws.delete(obj1);
const obj3 = { id: 2 };
console.log([
ws.has(obj2),
ws.has(obj1),
ws.has(obj3),
ws.has({ id: 2 })
]);
π8π₯2