JavaScript
31.6K subscribers
1.17K photos
10 videos
33 files
843 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

const prefix = 'user';
const id = 42;
const role = 'admin';

const capitalize = str => str.charAt(0).toUpperCase() + str.slice(1);

const profile = {
[`${prefix}_${id}`]: 'Marcus',
[Symbol.iterator]: null,
[`get${capitalize(role)}`]: () => 'full-access',
[`${prefix}Count`]: 3,
};

const dynamicKey = `${prefix}_${id}`;

console.log(
profile[dynamicKey],
profile[`get${capitalize(role)}`](),
profile[`${prefix}Count`] * id,
Object.keys(profile).length
);
โค2
๐ŸŒ• Installing Every Firefox Extension

One personโ€™s entertaining and heroic tale of wielding JavaScript to explore the Firefox extension ecosystem. And what oddities there are within! I enjoyed this a lot, itโ€™s like Alice in Wonderland for developers. More spelunking like this please.

Jack Cab
Please open Telegram to view this post
VIEW IN TELEGRAM
โค4๐Ÿ”ฅ4๐Ÿ‘3๐Ÿคฃ2๐Ÿค”1๐Ÿคฉ1
CHALLENGE

const values = [0.1 + 0.2, NaN, Infinity, -0, 42.6789];

const results = values.map((v, i) => {
if (i === 0) return Number.isInteger(v) + " " + v.toFixed(1);
if (i === 1) return Number.isFinite(v) + " " + Number.isNaN(v);
if (i === 2) return Number.isFinite(v) + " " + isFinite(v);
if (i === 3) return Object.is(v, -0) + " " + (v === 0);
if (i === 4) return v.toPrecision(4) + " " + Math.trunc(v);
});

results.forEach(r => console.log(r));
โค1๐Ÿ‘1๐Ÿ”ฅ1
๐Ÿค” Boneyard: Auto-Generated Skeleton Screens for Your UI

Snapshots your real UI and captures a flat list of skeleton โ€˜bonesโ€™ which are positioned, sized rectangles that mirror the page exactly. Supports React, Preact, React Native, Vue, Svelte, and Angular.

0xGF
Please open Telegram to view this post
VIEW IN TELEGRAM
โค4๐Ÿ‘4๐Ÿค”1
CHALLENGE

class Animal {
#sound;

constructor(name, sound) {
this.name = name;
this.#sound = sound;
}

speak() {
return `${this.name} says ${this.#sound}`;
}

static create(name, sound) {
return new this(name, sound);
}
}

class Dog extends Animal {
#tricks = [];

constructor(name) {
super(name, "woof");
}

learn(trick) {
this.#tricks.push(trick);
return this;
}

perform() {
return `${this.name} performs: ${this.#tricks.join(", ")}`;
}
}

const rex = Dog.create("Rex", "bark");
rex.learn("sit").learn("shake").learn("roll over");

console.log(rex.speak());
console.log(rex.perform());
console.log(rex instanceof Animal);
console.log(rex instanceof Dog);
๐Ÿ‘€ Windows 95 as an Electron App

A full Windows 95 experience as an app on macOS, Linux, and Windows, built upon the v86 JavaScript + WASM emulator. v5.0 is a big release as you can mount a folder from your machine into it as a Z: drive, mount ISOs as CD-ROMs, thereโ€™s a shared clipboard, and Internet access has been improved. Iโ€™m so trying to get Microsoft Encartaโ€™s Mindmaze running on thisโ€ฆ

Felix Rieseberg
Please open Telegram to view this post
VIEW IN TELEGRAM
โค8๐Ÿ”ฅ4
CHALLENGE

const user = {
profile: {
name: "Marcus",
score: 0,
nickname: null,
bio: undefined,
},
};

user.profile.nickname ??= "Anonymous";
user.profile.bio ??= "No bio provided";
user.profile.score ??= 100;
user.profile.rank ??= "Beginner";

const { name, score, nickname, bio, rank } = user.profile;
console.log(`${name} | ${score} | ${nickname} | ${bio} | ${rank}`);
โค3๐Ÿ”ฅ2
๐Ÿ˜ฎ HyperFrames: Write HTML and JavaScript to Create Videos

An open-source framework for creating and rendering videos with HTML and JavaScript. Essentially a simpler non-React alternative to Remotion. It includes a variety of built-in blocks/components for common video effects and elements, and can also composite existing video and audio clips. GitHub repo.

HeyGen
Please open Telegram to view this post
VIEW IN TELEGRAM
โค6๐Ÿ”ฅ2
CHALLENGE

const counter = (function () {
let count = 0;
const history = [];

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

counter.increment(5).increment(3).decrement(2);

console.log(counter.getCount(), counter.getHistory().join(" -> "));
โค4๐Ÿ‘1
โค5๐Ÿ‘2
๐Ÿ˜‰ Evan You's State of Vue 2026 Talk

A month ago, Evan You (of Vue.js and VoidZero fame) gave his annual address. Less Vue-focused than usual (though Vapor Mode is โ€œalmost readyโ€), the talk focuses on Vite-ecosystem updates covering Vite 8, Vite+, and Void.

Evan You / Vue.js Amsterdam
Please open Telegram to view this post
VIEW IN TELEGRAM
โค5๐Ÿ‘3๐Ÿ”ฅ2
CHALLENGE


const partial = (fn, ...presetArgs) => {
return function partiallyApplied(...laterArgs) {
return fn(...presetArgs, ...laterArgs);
};
};

const calculateTax = (taxRate, discount, price) => {
const discounted = price - (price * discount) / 100;
return parseFloat((discounted + (discounted * taxRate) / 100).toFixed(2));
};

const withVAT = partial(calculateTax, 20);
const withVATandDiscount = partial(withVAT, 15);

console.log(withVAT(0, 100));
console.log(withVATandDiscount(200));
console.log(partial(calculateTax, 10, 5)(50));
๐Ÿ‘2๐Ÿ”ฅ1
โค3
๐ŸŒŸ Bun v1.3.13: Smarter Testing, Streaming Installs, and Less Memory

The Bun runtime has had a great run of releases, including last weekโ€™s v1.3.12 with built-in browser automation. Now, bun test gets numerous enhancements with --isolate, --parallel, --shard and --changed options for test env isolation, parallelization, and to run only test files affected by recent changes. The runtime now uses 5% less memory, bun install gets faster, and more.

Jarred Sumner
Please open Telegram to view this post
VIEW IN TELEGRAM
๐Ÿ”ฅ3โค2๐Ÿ‘2
CHALLENGE

const values = [0.1 + 0.2, NaN, Infinity, -0, 42.6789];

const results = values.map((v, i) => {
if (i === 0) return v.toFixed(2);
if (i === 1) return Number.isFinite(v) + " " + Number.isNaN(v);
if (i === 2) return Number.isFinite(v) + " " + isFinite(v);
if (i === 3) return Object.is(v, 0) + " " + Object.is(v, -0);
if (i === 4) return v.toPrecision(4);
});

console.log(results.join(" | "));
โค3๐Ÿ‘2๐Ÿ”ฅ2