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
โœŒ๏ธ 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
๐Ÿ‘€ AdonisJS v7 Released: 'Batteries-Included' Node.js Framework

A popular webapp framework that includes auth, ORM, queues, testing, etc. in a cohesive fashion. With v7 comes an all new web site, modernizations, OpenTelemetry integration, new starter kits to rapidly build new apps, barrel file generation, and end-to-end type safety.

Harminder Virk
Please open Telegram to view this post
VIEW IN TELEGRAM
๐Ÿ‘8๐Ÿ”ฅ4โค1
CHALLENGE



let x = 'global';

function testScope() {
console.log(x);

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

console.log(x);
console.log(y);
}

testScope();
๐Ÿ”ฅ6๐Ÿ‘2โค1
๐Ÿ˜ฎ numpy-ts: A NumPy Implementation for TypeScript

NumPy is a fundamental piece of the Python scientific computing ecosystem and well-entrenched in many use cases. JavaScript has some options in this regard (e.g. TensorFlow.js), but numpy-ts is an attempt to replace the NumPy experience as closely as possible (currently at 94% API coverage). Thereโ€™s an online playground if you want to give it a quick spin.

Nicolas Dupont
Please open Telegram to view this post
VIEW IN TELEGRAM
โค12๐Ÿ”ฅ5๐Ÿ‘3
๐ŸคŸ Node.js EventLoop Lag + Kafka Consumer Lag: One Root Cause

The 3-Second Production Mystery That Took Me 20 Days to Solve

This is a story about how we found a 3s EventLoop lag (p99) in one of our microservices while exploring the Kafka consumer lagโ€ฆ and how I tracked it down and fixed.

Itโ€™s Feb 6. I notice an increase in Kafka lag in our Grafana chart...

nairihar
Please open Telegram to view this post
VIEW IN TELEGRAM
โค5๐Ÿ‘5๐Ÿ”ฅ4