JavaScript
33K subscribers
1.14K photos
10 videos
33 files
814 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
❀6πŸ”₯2
CHALLENGE

const user = {
name: 'Sarah',
profile: {
settings: {
theme: 'dark'
}
}
};

const config = {
name: 'John',
profile: null
};

console.log(user.profile?.settings?.theme);
console.log(config.profile?.settings?.theme);
console.log(user.profile?.preferences?.language);
console.log(config.profile?.settings?.theme ?? 'light');
πŸ‘5πŸ”₯3❀1
CHALLENGE

function testScope() {
var x = 'outer';
let y = 'outer';

if (true) {
var x = 'inner';
let y = 'inner';
console.log(x, y);
}

console.log(x, y);
}

testScope();
πŸ‘5❀4πŸ”₯2🀣2
✌️ Oxfmt Beta: A Fast, Rust-Powered JavaScript Code Formatter

A 100% Prettier-compatible JavaScript code formatter (and sister project of Oxlint) that boasts being 30x faster than Prettier and 3x faster than Biome. Since the alpha, it now supports embedded language formatting (JSX, YAML, HTML, etc), Tailwind CSS class sorting, import sorting, and more.

Boshen, Dunqing, and Sugiura (VoidZero)
Please open Telegram to view this post
VIEW IN TELEGRAM
πŸ‘6❀1πŸ”₯1
CHALLENGE


class Vehicle {
constructor(type) {
this.type = type;
}
describe() {
return `I am a ${this.type}`;
}
}

class Car extends Vehicle {
constructor(brand) {
super("car");
this.brand = brand;
}
describe() {
return `${super.describe()} made by ${this.brand}`;
}
}

const myCar = new Car("Toyota");

console.log(myCar.describe());
console.log(myCar instanceof Car);
console.log(myCar instanceof Vehicle);
console.log(Object.getPrototypeOf(Car) === Vehicle);
πŸ‘5πŸ”₯5❀1
πŸ‘€ The Fastest Frontend Tooling for Humans and AI

Christoph (of Jest fame) covers his preferred tools for getting your JavaScript tool stack running as fast as possible. It’s also intended for LLMs to process via this Markdown version.

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


const compose = (...fns) => (x) => fns.reduceRight((acc, fn) => fn(acc), x);
const pipe = (...fns) => (x) => fns.reduce((acc, fn) => fn(acc), x);

const double = (x) => x * 2;
const addTen = (x) => x + 10;
const square = (x) => x * x;
const negate = (x) => -x;

const transform1 = compose(negate, square, addTen, double);
const transform2 = pipe(double, addTen, square, negate);

const input = 3;

console.log(transform1(input));
console.log(transform2(input));
console.log(transform1(input) === transform2(input));
πŸ‘6❀3πŸ”₯1
❀4πŸ‘2
πŸ˜ƒ OpenSeadragon 6.0: A Web Viewer for High Resolution Images

A big step forward for a project that’s almost 15 years old, and one of few stable, trusty options for rendering ultra-high resolution images for users to zoom into and pan around. Version 6 introduces a new async and cache-managed pipeline, making it far more efficient at scale.

OpenSeadragon Contributors
Please open Telegram to view this post
VIEW IN TELEGRAM
πŸ”₯5❀4πŸ‘3🀩1
CHALLENGE


class Session {
#id;
constructor(id) {
this.#id = id;
}
getId() { return this.#id; }
}

const activeSessions = new WeakSet();

const s1 = new Session("user_42");
const s2 = new Session("user_99");
let s3 = new Session("user_07");

activeSessions.add(s1);
activeSessions.add(s2);
activeSessions.add(s3);

console.log(activeSessions.has(s1)); // line A
console.log(activeSessions.has(s3)); // line B

s3 = null;

console.log(activeSessions.has(s3)); // line C

activeSessions.delete(s2);
console.log(activeSessions.has(s2)); // line D
console.log(activeSessions.size); // line E
❀7πŸ‘2πŸ”₯1
⚑️ Beautiful Mermaid 1.0

Render Mermaid diagram markup to SVG or ASCII/Unicode outputs (above) from JavaScript.
Please open Telegram to view this post
VIEW IN TELEGRAM
πŸ”₯9❀7πŸ‘2
CHALLENGE



const inventory = {
apples: 5,
bananas: 0,
cherries: 12,
dates: undefined,
elderberries: null,
};

const summary = Object.entries(inventory)
.filter(([_, value]) => value)
.reduce((acc, [key, value]) => {
acc[key] = value * 2;
return acc;
}, {});

console.log(Object.keys(summary).length);
console.log(Object.values(summary).every(v => v > 10));
console.log(Object.keys(inventory).length === Object.keys(summary).length);
πŸ”₯3❀1πŸ‘1
❀5πŸ‘1🀩1
🫢 Play with a complete Windows 3.11 environment in your browser. A lot of fun! There's a recreation of 90s search engine Altavista (above), a version of mIRC that connects to an actual IRC server, and a variety of classic games.
Please open Telegram to view this post
VIEW IN TELEGRAM
πŸ‘9πŸ”₯6❀2
CHALLENGE


const user = {
profile: {
getName: () => "Marcus",
getAge: () => 30,
},
settings: null,
};

const name = user.profile?.getName?.();
const age = user.profile?.getAge?.();
const theme = user.settings?.getTheme?.() ?? "dark";
const lang = user.address?.getLocale?.() ?? "en-US";

console.log(`${name} | ${age} | ${theme} | ${lang}`);
❀6πŸ‘3