JavaScript
31.3K subscribers
1.2K photos
10 videos
33 files
871 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
CHALLENGE

console.log('1: start');

setTimeout(() => console.log('2: setTimeout'), 0);

Promise.resolve()
.then(() => {
console.log('3: promise 1');
return Promise.resolve('chained');
})
.then((val) => console.log(`4: ${val}`));

queueMicrotask(() => console.log('5: microtask'));

new Promise((resolve) => {
console.log('6: executor');
resolve();
}).then(() => console.log('7: promise 2'));

console.log('8: end');
❀3πŸ”₯3πŸ‘1
CHALLENGE

class BankAccount {
#balance;
#transactionHistory = [];

constructor(initialBalance) {
this.#balance = initialBalance;
}

deposit(amount) {
this.#balance += amount;
this.#transactionHistory.push(`+${amount}`);
return this;
}

withdraw(amount) {
this.#balance -= amount;
this.#transactionHistory.push(`-${amount}`);
return this;
}

get summary() {
return `Balance: ${this.#balance} | Transactions: ${this.#transactionHistory.join(", ")}`;
}

static hasPrivateBalance(obj) {
return #balance in obj;
}
}

const account = new BankAccount(100);
account.deposit(50).deposit(25).withdraw(30);

console.log(account.summary);
console.log(BankAccount.hasPrivateBalance(account));
console.log(BankAccount.hasPrivateBalance({}));
❀6πŸ”₯4πŸ€”1
CHALLENGE


class EventEmitter {
#listeners = new Map();

on(event, listener) {
if (!this.#listeners.has(event)) {
this.#listeners.set(event, []);
}
this.#listeners.get(event).push(listener);
return this;
}

emit(event, ...args) {
const handlers = this.#listeners.get(event) ?? [];
handlers.forEach(fn => fn(...args));
return this;
}

once(event, listener) {
const wrapper = (...args) => {
listener(...args);
this.off(event, wrapper);
};
return this.on(event, wrapper);
}

off(event, listener) {
const updated = (this.#listeners.get(event) ?? []).filter(fn => fn !== listener);
this.#listeners.set(event, updated);
return this;
}
}

const emitter = new EventEmitter();
const log = [];

emitter.on("data", val => log.push(`on:${val}`));
emitter.once("data", val => log.push(`once:${val}`));
emitter.on("data", val => log.push(`on2:${val}`));

emitter.emit("data", "A");
emitter.emit("data", "B");

console.log(log.join(", "));
❀4πŸ‘3πŸ”₯3
🌲 Node.js 26.4 Adds Package Maps

A minor release whose headline feature is the (experimental) implementation of package maps (which let Node resolve packages from a static JSON file rather than walking node_modules). Matteo Collina’s node:vfs subsystem also begins to make an appearance.

Antoine du Hamel
Please open Telegram to view this post
VIEW IN TELEGRAM
❀4πŸ‘2πŸ”₯2
πŸ€– Eve: A Next.js-Style Framework for Building Agents

A new framework from Vercel that provides Next.js-esque structure for building AI-powered agents using TypeScript and Markdown. It's quite Vercel-flavored by default, but I found you can run it entirely independently of Vercel with a few settings tweaks and your own keys. Project homepage.

Vercel
Please open Telegram to view this post
VIEW IN TELEGRAM
πŸ‘7❀6πŸ”₯3
CHALLENGE

function makeCounter(start = 0, step = 1) {
let count = start;
const history = [];

return {
increment() {
count += step;
history.push(count);
return this;
},
decrement() {
count -= step;
history.push(count);
return this;
},
getHistory: () => history,
getCount: () => count,
};
}

const counter = makeCounter(10, 3);
counter.increment().increment().decrement();

console.log(counter.getCount());
console.log(counter.getHistory());
❀5πŸ‘3πŸ”₯2
πŸ’» Desktop Apps With deno desktop

Deno 2.9 (or the 'canary' build now) can turn JavaScript projects into self-contained apps on macOS, Windows, and Linux. Unlike Electron, you can opt to use the default OS WebView or a bundled Chromium backend, plus you get cross-compilation and automatic support for apps built on frameworks like Next.js and SvelteKit.

The Deno Project
Please open Telegram to view this post
VIEW IN TELEGRAM
❀7πŸ‘6πŸ”₯2
CHALLENGE

const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

async function processQueue(items) {
const results = [];

await items.reduce(async (prevPromise, item) => {
await prevPromise;
await delay(0);
results.push(item * 2);
}, Promise.resolve());

return results;
}

processQueue([1, 2, 3, 4])
.then((data) => console.log("Result:", data))
.catch((err) => console.log("Error:", err.message));

Promise.resolve()
.then(() => console.log("Microtask A"))
.then(() => console.log("Microtask B"));
❀5
πŸ˜‚
Please open Telegram to view this post
VIEW IN TELEGRAM
🀣35πŸ‘2πŸ”₯2❀1
CHALLENGE

function highlight(strings, ...values) {
return strings.reduce((result, str, i) => {
const value = values[i - 1];
const formatted =
typeof value === "number"
? `[${value.toFixed(2)}]`
: `<${String(value).toUpperCase()}>`;
return result + formatted + str;
});
}

const item = "sword";
const qty = 3;
const price = 9.5;

const output = highlight`You bought ${qty} ${item}s for $${price} each.`;
console.log(output);
❀6
πŸ˜ƒ A developer code-golfed a signal implementation to just 33 bytes (above). I had to stare at it for a solid minute before it clicked, but mercifully, a Redditor breaks down exactly what's going on.
Please open Telegram to view this post
VIEW IN TELEGRAM
❀3πŸ‘2
πŸ€– Read more
Please open Telegram to view this post
VIEW IN TELEGRAM
🀣10πŸ‘2πŸ”₯2
πŸ—“ FullCalendar 7.0: A Full Sized JavaScript Calendar

A Google Calendar-style experience for your own apps. Works with React, Vue and Angular (v7.0 adds Angular 22 support), but can be used with plain JavaScript. Here’s a demo where you can play with the themes and styling approaches. MIT licensed with commercial extensions.

FullCalendar LLC
Please open Telegram to view this post
VIEW IN TELEGRAM
❀6πŸ‘6