JavaScript
32K subscribers
1.03K photos
10 videos
33 files
714 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

const nums = [1, 2, 3, 4, 5];
const result = nums
.filter(n => n > 2)
.map(n => n * 2)
.reduce((acc, n) => {
acc.push(n + 1);
return acc;
}, [])
.slice(1);

console.log(result);
console.log(nums);
🀩 Fetch Streams are Great, But Not for Measuring Upload/Download Progress

Fetch upload streams seem well-suited for tracking the progress of uploads, but as Jake notes β€œjust because stuff is taken from the stream doesn’t mean it’s yet been sent over the network”. He also touches on an issue relating to measuring download progress using response streams.

Jake Archibald
Please open Telegram to view this post
VIEW IN TELEGRAM
πŸ€”6πŸ”₯3πŸ‘2
CHALLENGE

const cache = new Map();

function createHandler(id) {
const data = { id, value: new Array(1000).fill(id) };
cache.set(id, data);

return function(action) {
if (action === 'get') return data;
if (action === 'clear') cache.delete(id);
};
}

const handler1 = createHandler('user-1');
const handler2 = createHandler('user-2');

handler1('clear');
console.log(cache.size);
console.log(handler1('get').id);
❀3πŸ‘1πŸ”₯1
⛽️ Massive Supply Chain Attack Hijacks ctrl/tinycolor With 2 Million Downloads and Other 40 NPM Packages

A sophisticated and widespread supply chain attack has struck the NPM ecosystem, compromising the popular @ctrl/tinycolor package, which is downloaded over 2 million times per week.

Guru Baran
Please open Telegram to view this post
VIEW IN TELEGRAM
❀4πŸ”₯3πŸ‘1
CHALLENGE

const sym1 = Symbol('test');
const sym2 = Symbol('test');
const obj = {
[sym1]: 'value1',
[sym2]: 'value2',
regular: 'value3'
};

const sym3 = Symbol.for('global');
const sym4 = Symbol.for('global');

console.log(sym1 === sym2);
console.log(sym3 === sym4);
console.log(Object.keys(obj).length);
console.log(Object.getOwnPropertySymbols(obj).length);
❀3πŸ‘1πŸ”₯1
πŸ₯³ IINA is a popular, open-source media player for macOS and it has just added a JavaScript-based plugin system to let users extend its functionality.
Please open Telegram to view this post
VIEW IN TELEGRAM
❀2πŸ‘2πŸ”₯1
CHALLENGE

const pattern = /(?<=\d)(?=(?:\d{3})+(?!\d))/g;
const str = '1234567890';
const result = str.replace(pattern, ',');
console.log(result);

const regex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$/;
const tests = ['Password1', 'password', 'PASSWORD1', 'Pass1'];
tests.forEach(test => {
console.log(`${test}: ${regex.test(test)}`);
});

const capture = /([a-z]+)(\d+)/g;
const text = 'item123 product456';
const matches = [...text.matchAll(capture)];
console.log(matches[1][1]);
⛽️ npm-check-updates 18.2: Update package.json Dependencies to Latest Versions

That is, as opposed to the specified versions. Includes a handy -i interactive mode so you can look at potential upgrades and then opt in to them one by one. v18.2 adds a β€˜cooldown’ feature to help protect against supply chain attacks by requiring package versions to be published at least the given number of days before considering them for upgrade.

Raine Revere
Please open Telegram to view this post
VIEW IN TELEGRAM
❀4πŸ‘2πŸ”₯1
CHALLENGE

let cache = new Map();
let obj = { name: 'Emma', age: 28 };

function memoize(fn) {
return function(...args) {
const key = JSON.stringify(args);
if (cache.has(key)) {
console.log('Cache hit');
return cache.get(key);
}
const result = fn.apply(this, args);
cache.set(key, result);
return result;
};
}

const process = memoize((data) => {
console.log('Processing:', data.name);
return data.age * 2;
});

process(obj);
process(obj);
obj.age = 30;
process(obj);
console.log('Cache size:', cache.size);
❀3
CHALLENGE

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

try {
throw new CustomError('Something went wrong', 500);
} catch (error) {
console.log(error instanceof Error);
console.log(error instanceof CustomError);
console.log(error.name);
console.log(typeof error.code);
}
❀4
CHALLENGE

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

function processData(data) {
try {
if (!data) throw new ValidationError('Data required', 'MISSING_DATA');
return data.toUpperCase();
} catch (error) {
if (error instanceof ValidationError) {
console.log(`${error.name}: ${error.message} (${error.code})`);
} else {
console.log(`Unexpected error: ${error.message}`);
}
}
}

processData(null);
processData(42);
❀3
Please open Telegram to view this post
VIEW IN TELEGRAM
🀣38πŸ‘2πŸ”₯2
CHALLENGE

class StateMachine {
constructor() {
this.state = 'idle';
this.transitions = {
idle: { start: 'running', reset: 'idle' },
running: { pause: 'paused', stop: 'stopped' },
paused: { resume: 'running', stop: 'stopped' },
stopped: { reset: 'idle' }
};
}

transition(action) {
const nextState = this.transitions[this.state]?.[action];
if (nextState) {
this.state = nextState;
return true;
}
return false;
}
}

const sm = new StateMachine();
console.log(sm.transition('start'));
console.log(sm.state);
console.log(sm.transition('reset'));
console.log(sm.state);
❀4πŸ‘1