Telegram Web Link
⛽️ npmgraph: A Tool to Visualize npm Module Dependencies

Give this Web-based tool one or more npm package names (or even your package.json file) and you can see a visualization of the dependency graphs for those packages, including where they intersect. Packages can be colored by various criteria (such as number of maintainers) and you can download SVGs of the graphs.

Kieffer, Brigante, et al.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍84🔥2🤣1
CHALLENGE

const user = {
name: 'Alice',
age: 30
};

const handler = {
get(target, prop) {
if (prop in target) {
return target[prop];
}
return `Property '${prop}' doesn't exist`;
},
set(target, prop, value) {
if (prop === 'age' && typeof value !== 'number') {
console.log(`Error: ${value} is not a valid age`);
return false;
}
target[prop] = value;
return true;
}
};

const userProxy = new Proxy(user, handler);
userProxy.age = '31';
userProxy.job = 'Developer';

console.log(userProxy.job);
2🔥1
🕹️ Odyc.js: A JS Library for Pixel Games/Stories

Has a bit of a 8-bit Game Boy Color vibe to it. You can create games, and try some examples, in this online playground.

Charles Cailleteau
Please open Telegram to view this post
VIEW IN TELEGRAM
6🤔5👍1🔥1🤩1
CHALLENGE

function process(data) {
try {
if (!data) {
throw new TypeError('No data provided');
}

if (Array.isArray(data)) {
return data.map(item => item * 2);
}

if (typeof data === 'object') {
return Object.keys(data);
}

return data.toString();
} catch (error) {
if (error instanceof TypeError) {
return 'Type error occurred';
}
return 'Unknown error';
}
}

console.log(process(null));
👍84🔥3
CHALLENGE

function Animal(name) {
this.name = name;
}

Animal.prototype.speak = function() {
return `${this.name} makes a noise.`;
};

function Dog(name) {
Animal.call(this, name);
}

Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

Dog.prototype.speak = function() {
return `${this.name} barks.`;
};

const animal = new Animal('Rover');
const dog = new Dog('Rex');

console.log(dog instanceof Animal, dog.speak(), animal.speak(), Dog.prototype.isPrototypeOf(dog));
6👍1
CHALLENGE

function highlight(strings, ...values) {
return strings.reduce((result, str, i) => {
const value = values[i] ? `<span>${values[i]}</span>` : '';
return result + str + value;
}, '');
}

const language = 'JavaScript';
const years = 10;

const result = highlight`I have been coding in ${language} for ${years} years`;
console.log(result);
9👍6
CHALLENGE

function createCounter() {
let count = 0;

return {
increment() {
count++;
return count;
},
decrement() {
count--;
return count;
},
getValue() {
return count;
}
};
}

const counter1 = createCounter();
const counter2 = createCounter();

counter1.increment();
counter1.increment();
counter2.increment();
counter1.decrement();

console.log(counter1.getValue() + counter2.getValue());
5👍5🤣3🔥1
What is the output?
Anonymous Quiz
18%
1
24%
undefined
15%
NaN
42%
2
👍9🤔1
📖 Exploring JavaScript (ES2025 Edition)

Dr. Axel is back with his latest book covering all things relating to modern JavaScript at the language level (think built-in data types, modularity, how objects, classes and promises work, etc.). As with all of Axel's books, it’s available to buy but also to read online in HTML form for free. He’s also produced a set of flashcards to help you learn language features in both HTML and Anki forms.

Dr. Axel Rauschmayer
🔥43👍2
CHALLENGE

class ShoppingCart {
constructor() {
if (ShoppingCart.instance) {
return ShoppingCart.instance;
}

this.items = [];
ShoppingCart.instance = this;
}

addItem(item) {
this.items.push(item);
}

getItems() {
return [...this.items];
}
}

const cart1 = new ShoppingCart();
const cart2 = new ShoppingCart();

cart1.addItem('Book');
cart2.addItem('Laptop');

console.log(cart1.getItems());
😉 Compiling JavaScript Ahead-of-Time

The creator of the Porffor JavaScript compiler talks about the various ways to make JavaScript faster to execute, before digging into Porffor’s approach.

Oliver Medhurst
Please open Telegram to view this post
VIEW IN TELEGRAM
5👍3🔥1
CHALLENGE

const templateFn = (strings, ...values) => {
return strings.reduce((result, str, i) => {
const value = values[i] !== undefined ?
(typeof values[i] === 'number' ? values[i] * 2 : values[i]) : '';
return result + str + value;
}, '');
};

const num = 5;
const str = 'world';

const result = templateFn`Hello ${str}, ${num} times ${'!'}`;
console.log(result);
👍52
🤔 <syntax-highlight>: A Custom Element for Syntax Highlighting

A custom element that uses the CSS Custom Highlight API (supported by most modern browsers) for syntax highlighting so you don’t need to retreat to the age-old method of wrapping every token in spans.

André Ruffert
Please open Telegram to view this post
VIEW IN TELEGRAM
👍53🔥1
2025/07/10 04:45:47
Back to Top
HTML Embed Code: