JavaScript
32.1K subscribers
1.06K photos
10 videos
33 files
742 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
CHALLENGE

function createCounter() {
let count = 0;
return {
increment: () => ++count,
decrement: () => --count,
getValue: () => count
};
}

const counter1 = createCounter();
const counter2 = createCounter();
counter1.increment();
counter1.increment();
counter2.increment();
console.log(counter1.getValue(), counter2.getValue());
counter1.decrement();
console.log(counter1.getValue(), counter2.getValue());
โค5๐Ÿ‘3๐Ÿคฉ1
What is the output?
Anonymous Quiz
24%
1 1 0 0
32%
2 1 1 0
35%
2 1 1 1
9%
3 2 2 1
โค9๐Ÿ”ฅ3
CHALLENGE

const wm = new WeakMap();
const obj1 = { name: 'first' };
const obj2 = { name: 'second' };
const obj3 = obj1;

wm.set(obj1, 'value1');
wm.set(obj2, 'value2');
wm.set(obj3, 'value3');

console.log(wm.get(obj1));
console.log(wm.get(obj2));
console.log(wm.get(obj3));
console.log(wm.has(obj1));
console.log(wm.size);
โค3๐Ÿ‘2
CHALLENGE

class CustomError extends Error {
constructor(message) {
super(message);
this.name = 'CustomError';
}
}

try {
throw new CustomError('Something went wrong');
} catch (e) {
console.log(e instanceof Error);
console.log(e instanceof CustomError);
console.log(e.constructor.name);
console.log(e.name);
}
๐Ÿ‘1
CHALLENGE

class EventEmitter {
constructor() {
this.events = {};
}

on(event, callback) {
this.events[event] = this.events[event] || [];
this.events[event].push(callback);
return this;
}

emit(event, data) {
if (this.events[event]) {
this.events[event].forEach(cb => cb(data));
}
return this;
}
}

class Logger {
log(msg) { console.log(`[LOG]: ${msg}`); }
}

class DataProcessor {
constructor(emitter, logger) {
this.emitter = emitter;
this.logger = logger;
this.emitter.on('process', (data) => {
this.logger.log(data.toUpperCase());
});
}

process(data) {
this.emitter.emit('process', data);
}
}

const emitter = new EventEmitter();
const logger = new Logger();
const processor = new DataProcessor(emitter, logger);

processor.process('hello world');
emitter.emit('process', 'composition rocks');
1๐Ÿ‘4โค1
๐ŸคŸ Node.js Security Best Practices

Did you know the Node.js project maintains a page about security best practices organized around how to mitigate ten of the most significant vectors? Topics include networking weaknesses, timing attacks, supply chain attacks, and the monkey patching of intrinsics.

Node Documentation
Please open Telegram to view this post
VIEW IN TELEGRAM
โค3๐Ÿ‘1๐Ÿ”ฅ1
CHALLENGE

const obj = { count: 0 };
const arr = [obj, obj, obj];

function increment(item) {
item.count++;
return item;
}

const results = arr.map(increment);
console.log(obj.count);
console.log(results[0] === results[1]);
console.log(results.length);
console.log(arr[0].count);
3โค6
โค8๐Ÿ‘3๐Ÿค”3
๐Ÿ‘€ Umami 3.0: A Self-Hosted, Privacy-Focused Google Analytics Alternative

Think something like Plausible or Google Analytics, but built in Node and ready for you to host yourself. Hereโ€™s the full feature list. MIT licensed but also available as a paid hosted service.

Umami Software, Inc.
Please open Telegram to view this post
VIEW IN TELEGRAM
โค8๐Ÿ”ฅ1
๐Ÿ˜ฎ Render.js: A Raytracing Renderer with RenderMan Format Support

Created at Pixar in the 80s, the RenderMan Interface Specification was an early API for building 3D scenes. Anders has been building a Node-based, 90s-style renderer for the format โ€œas a stroll down amnesia laneโ€ in pure JavaScript.

Anders Brownworth
Please open Telegram to view this post
VIEW IN TELEGRAM
๐Ÿ‘2๐Ÿ”ฅ2โค1
CHALLENGE

const data = '{"name":"Sarah","age":25,"skills":["JavaScript","Python"]}'
const parsed = JSON.parse(data)
const stringified = JSON.stringify(parsed, null, 0)
const reparsed = JSON.parse(stringified)

try {
const invalid = '{name:"John","incomplete":}'
JSON.parse(invalid)
} catch (e) {
console.log(e.name)
}

console.log(typeof parsed.age)
console.log(reparsed.skills.length)
console.log(JSON.stringify({a: undefined, b: null, c: 0}))
๐Ÿ‡ฏ๐Ÿ‡ต Fancy writing JavaScript in Japanese (above)? Say ใ“ใ‚“ใซใกใฏ to KokoScript.
๐Ÿคฃ5โค4๐Ÿ‘2๐Ÿ”ฅ1
CHALLENGE

const user = { name: 'Sarah', age: 28 };
const greeting = 'Hello';
const template = `${greeting}, ${user.name}! You are ${user.age} years old.`;

function createMessage(strings, ...values) {
return strings.reduce((result, string, i) => {
return result + string + (values[i] ? `[${values[i]}]` : '');
}, '');
}

const tagged = createMessage`Welcome ${user.name}, age: ${user.age}!`;
console.log(template);
console.log(tagged);
โค3
๐Ÿคฉ The Inner Workings of JavaScript Source Maps

Ever wondered how devtools can magically turn mangled, minified JavaScript back into readable source while debugging? Zero magic; thatโ€™s a source map doing its job. But how do source maps actually work under the hood?

Manoj Vivek
Please open Telegram to view this post
VIEW IN TELEGRAM
โค2๐Ÿ‘2๐Ÿ”ฅ1