JavaScript
31.9K subscribers
1.01K photos
9 videos
33 files
693 links
A resourceful newsletter featuring the latest and most important news, articles, books and updates in the world of #javascript πŸš€ Don't miss our Quizzes!

Let's chat: @nairihar
Download Telegram
πŸ€” TanStack Form v1.0: Headless, Type-Safe Form State Management

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
πŸ”₯4❀3πŸ‘1
✌️ A Report on How the Web is Really Using JavaScript

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
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
39%
true
πŸ‘6❀2πŸ”₯2
Please open Telegram to view this post
VIEW IN TELEGRAM
πŸ€”6πŸ”₯3❀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
Please open Telegram to view this post
VIEW IN TELEGRAM
❀5πŸ”₯4🀣3πŸ‘1πŸ€”1
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
πŸ‘3❀2πŸ”₯2
πŸ‘ PGlite: Run Postgres in WebAssembly

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
πŸ‘11❀3πŸ”₯1
πŸ”Ž Node Modules Inspector

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