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
๐Ÿ‘€ FluidCAD (above) is a new project bringing parametric CAD to the JavaScript world where you can write code to create/manipulate objects and see a live update of what you're making. It's built on top of OpenCascade.js, a JS/WASM port of the open source OpenCascade 3D geometry library.
Please open Telegram to view this post
VIEW IN TELEGRAM
โค10๐Ÿ‘5๐Ÿ”ฅ3
CHALLENGE

const curry = (fn) => {
const arity = fn.length;
return function curried(...args) {
if (args.length >= arity) {
return fn(...args);
}
return (...moreArgs) => curried(...args, ...moreArgs);
};
};

const volume = (l, w, h) => l * w * h;
const curriedVolume = curry(volume);

const withLength5 = curriedVolume(5);
const withLength5Width3 = withLength5(3);

console.log(typeof withLength5);
console.log(typeof withLength5Width3);
console.log(withLength5Width3(2));
console.log(curriedVolume(4)(6)(2));
๐Ÿ‘3๐Ÿ”ฅ3โค1
โค4๐Ÿ‘3๐Ÿ”ฅ2
CHALLENGE


function checkTDZ() {
console.log(typeof undeclaredVar);

try {
console.log(typeof letVar);
} catch (e) {
console.log(`Caught: ${e.constructor.name}`);
}

let letVar = "initialized";

const result = (() => {
let x = 10;
return function () {
let x = x + 5;
return x;
};
})();

try {
console.log(result());
} catch (e) {
console.log(`Caught: ${e.constructor.name}`);
}
}

checkTDZ();
โค1๐Ÿ‘1๐Ÿ”ฅ1
CHALLENGE


const str = " Hello, World! ";

const result = str
.trim()
.split(", ")
.map((word, i) => {
return i === 0
? word.toUpperCase()
: word.replace(/!$/, "").split("").reverse().join("") + "?";
})
.join(" | ");

const [first, ...rest] = result.split(" | ");
const final = `${first} | ${rest.join(" & ")}`;

console.log(final);
โค1๐Ÿ”ฅ1
๐Ÿ‘3โค2
CHALLENGE


const p1 = new Promise((resolve) => {
console.log("A");
resolve("B");
});

const p2 = p1.then((val) => {
console.log(val);
return "C";
});

p2.then((val) => {
console.log(val);
});

console.log("D");
๐Ÿ”ฅ1
โค2๐Ÿ‘2๐Ÿ”ฅ1
๐Ÿ˜ฎ Under the Hood of MDN's New Frontend

The hugely useful MDN has rebuilt its frontend stack from the ground up, ditching React for web components and a homegrown server component system. A great read on building a modern, content-heavy site without shipping unnecessary JavaScript on every page.

Leo McArdle (MDN)
Please open Telegram to view this post
VIEW IN TELEGRAM
โค9๐Ÿ”ฅ2๐Ÿ‘1
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