TGViewer
Channel Public Channel
JavaScript

JavaScript

@javascript

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
Subscribers
31.1K
Photos
1.2K
Videos
10
Links
894

Showing posts older than #3206 · Back to latest

Older Posts 20 shown
Post #3205 2.42K
👀 Anime.js 4.4: The Flexible JavaScript Animation Engine

At ten years old, the ‘animate anything from JavaScript’ library continues to get even better with a new scrambleText effect and auto-grid layout mode for stagger grids. The docs for Anime are truly top-tier and packed with examples.

Julian Garnier
  • ❤ 5
  • 👍 2
  • 🔥 1
  • 🤩 1
Post #3203 2.42K
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 ** 2;
const negate = (x) => -x;

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

const memoize = (fn) => {
const cache = new Map();
return (x) => {
if (!cache.has(x)) cache.set(x, fn(x));
return cache.get(x);
};
};

const memoTransform1 = memoize(transform1);

console.log(transform1(3));
console.log(transform2(3));
console.log(memoTransform1(3) === transform1(3));
  • ❤ 1
  • 👍 1
Post #3202 2.37K
👀 Remix 3 Enters Beta — It's No Longer a React Framework

Remix has quite the back story. Created by the duo behind React Router in 2020 and seen as an alternative to Next.js, Remix was acquired by Shopify in 2022 and its core ideas folded into React Router v7 in 2024. Now, a new direction: a full-stack, web standards-first framework with its own UI component model and… no React.

Michael Jackson (Remix)
  • ❤ 8
  • 👍 3
  • 🔥 3
Post #3200 2.15K
CHALLENGE


class DatabaseError extends Error {
constructor(message, code) {
super(message);
this.name = "DatabaseError";
this.code = code;
}
}

class ConnectionError extends DatabaseError {
constructor(host) {
super(`Failed to connect to ${host}`, 503);
this.name = "ConnectionError";
this.host = host;
}
}

const err = new ConnectionError("db.server.io");

console.log([
err instanceof ConnectionError,
err instanceof DatabaseError,
err instanceof Error,
err.name,
err.code,
err.message,
].join(" | "));
  • 🔥 3
  • 👍 1
Post #3197 2.33K
CHALLENGE

const items = [
{ name: "banana", price: 1.5, qty: 10 },
{ name: "apple", price: 1.5, qty: 5 },
{ name: "cherry", price: 3.0, qty: 8 },
{ name: "date", price: 2.0, qty: 8 },
];

const sorted = [...items].sort((a, b) => {
if (a.price !== b.price) return a.price - b.price;
if (a.qty !== b.qty) return b.qty - a.qty;
return a.name.localeCompare(b.name);
});

console.log(sorted.map(i => `${i.name}:${i.qty}`).join(", "));
  • 🔥 5
  • ❤ 3
  • 👍 1
Post #3196 2.41K
🤟 Node.js 26.0 (Current) Released

It's here! Complete with the Temporal API enabled by default, V8 14.6 (say hello to map ‘upsert’ methods like Map.prototype.getOrInsert() and iterator sequencing with Iterator.concat()), plus Undici 8. v26 is the ‘Current’ cutting-edge release until October when it gets promoted to LTS.

Rafael Gonzaga
  • ❤ 4
  • 🔥 3
  • 👍 2
  • 🤩 1
Post #3194 2.14K
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(2);
if (i === 1) return Number.isFinite(v) + " | " + Number.isNaN(v);
if (i === 2) return Number.isFinite(v) + " | " + Number.MAX_SAFE_INTEGER;
if (i === 3) return Object.is(v, -0) + " | " + (v === 0);
if (i === 4) return v.toFixed(2) + " | " + v.toPrecision(4);
});

results.forEach(r => console.log(r));
  • ❤ 4
  • 🔥 2
  • 🤔 2
Post #3193 2.33K
  • ❤ 5
  • 🔥 2
  • 👍 1
Post #3192 2.31K
CHALLENGE

const ops = {
add: (a, b) => a + b,
subtract: (a, b) => a - b,
multiply: (a, b) => a * b,
divide: (a, b) => b !== 0 ? a / b : NaN,
};

const pipeline = (...fns) => (value) => fns.reduce((acc, fn) => fn(acc), value);

const double = (x) => ops.multiply(x, 2);
const addTen = (x) => ops.add(x, 10);
const halve = (x) => ops.divide(x, 2);
const subtractThree = (x) => ops.subtract(x, 3);

const transform = pipeline(double, addTen, halve, subtractThree);

const results = [5, 0, -4].map(transform);
console.log(results);
  • ❤ 6
  • 👍 2
  • 🔥 1
Post #3191 2.31K
  • ❤ 4
  • 👍 2
Post #3190 2.46K
CHALLENGE


const inventory = new Map([
["sword", { quantity: 3, weight: 15 }],
["shield", { quantity: 1, weight: 25 }],
["potion", { quantity: 10, weight: 2 }],
]);

inventory.set("bow", { quantity: 2, weight: 8 });
inventory.delete("shield");

const totalWeight = [...inventory.entries()].reduce((acc, [item, { quantity, weight }]) => {
return acc + quantity * weight;
}, 0);

const heaviestItem = [...inventory.entries()].reduce((max, [item, data]) =>
data.weight > max.weight ? { name: item, ...data } : max,
{ name: "", weight: 0 }
);

console.log(inventory.size, totalWeight, heaviestItem.name);
  • ❤ 4
  • 👍 2
Post #3189 2.2K
  • ❤ 2
  • 🔥 1
Post #3188 2.42K
CHALLENGE

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

async function pipeline(...fns) {
return async (input) => {
let result = input;
for (const fn of fns) {
result = await fn(result);
}
return result;
};
}

const double = async (x) => delay(10, x * 2);
const addTen = async (x) => delay(10, x + 10);
const square = async (x) => delay(10, x ** 2);

(async () => {
const process = await pipeline(double, addTen, square);
const output = await process(3);
console.log(output);
})();
  • ❤ 2
  • 🔥 2
  • 👍 1
Post #3187 2.26K
  • ❤ 5
  • 👍 1
Post #3186 2.17K
CHALLENGE


class Vehicle {
#speed = 0;

constructor(brand) {
this.brand = brand;
}

accelerate(amount) {
this.#speed += amount;
return this;
}

getSpeed() {
return this.#speed;
}

toString() {
return `${this.brand} @ ${this.#speed}km/h`;
}
}

class Car extends Vehicle {
#gear = 1;

constructor(brand, model) {
super(brand);
this.model = model;
}

shiftUp() {
this.#gear++;
return this;
}

toString() {
return `${super.toString()} [Gear ${this.#gear}]`;
}
}

const car = new Car("Toyota", "Supra");
car.accelerate(60).accelerate(40).shiftUp().shiftUp();

console.log(car.toString());
console.log(car instanceof Car);
console.log(car instanceof Vehicle);
console.log(Object.getPrototypeOf(Car) === Vehicle);
  • ❤ 5
  • 👍 1
Older posts →
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →