JavaScript
33K subscribers
1.14K photos
10 videos
33 files
814 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
πŸ‘€ For years, Mozilla, Apple, and the CSS Working Group have been working to bring "masonry" layouts (as above) natively to CSS. The concept is now called CSS Grid Lanes and here's how it works. You can already try it out in Safari Technology Preview 234.
Please open Telegram to view this post
VIEW IN TELEGRAM
❀5πŸ‘3πŸ”₯3
CHALLENGE

const data = [
{ type: 'income', amount: 1000, category: 'salary' },
{ type: 'expense', amount: 200, category: 'food' },
{ type: 'income', amount: 500, category: 'freelance' },
{ type: 'expense', amount: 150, category: 'transport' }
];

const result = data.reduce((acc, item) => {
const key = item.type;
acc[key] = (acc[key] || 0) + item.amount;
return acc;
}, {});

console.log(result.income - result.expense);
πŸ‘4❀3πŸ”₯1
What is the output?
Anonymous Quiz
24%
undefined
54%
1150
18%
1500
4%
350
πŸ”₯6❀5πŸ‘1
CHALLENGE

async function processData() {
const promise1 = Promise.resolve('first');
const promise2 = Promise.reject('error');
const promise3 = Promise.resolve('third');

try {
const result = await Promise.allSettled([promise1, promise2, promise3]);
console.log(result[0].status);
console.log(result[1].reason);
console.log(result[2].value);
} catch (error) {
console.log('caught:', error);
}
}

processData();
❀8πŸ”₯2
❀4πŸ‘3πŸ”₯3
CHALLENGE

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

const name = 'Sarah';
const score = 95;
const message = highlight`Hello ${name}, your score is ${score}!`;
console.log(message);
πŸ”₯4πŸ‘2
CHALLENGE

class Counter {
#value = 0;

get count() {
console.log('Getting count');
return this.#value;
}

set count(val) {
console.log('Setting count to', val);
this.#value = Math.max(0, val);
}
}

const counter = new Counter();
counter.count = -5;
console.log(counter.count);
πŸ‘4❀3πŸ”₯2
CHALLENGE

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

const add = (x) => (y) => x + y;
const multiply = (x) => (y) => x * y;
const subtract = (x) => (y) => y - x;

const transform = pipe(
add(5),
multiply(3),
subtract(2)
);

console.log(transform(4));
console.log(transform(0));
πŸ”₯6πŸ‘3❀2
What is the output?
Anonymous Quiz
19%
27 15
55%
25 13
23%
27 13
3%
25 15
πŸ”₯7❀5πŸ‘2
✌️ Web Dependencies are Broken; Can We Fix Them?

Lea, who has worked at the heart of Web Standards for years, delivers a compelling (and educational) call to action about a problem every JavaScript developer has encountered: why is managing dependencies and introducing them into code so unnecessarily messy and what could we do about it?

Lea Verou
Please open Telegram to view this post
VIEW IN TELEGRAM
❀7πŸ‘5
CHALLENGE

const user = { name: 'Sarah', age: 0 };
const config = { theme: '', debug: false };

const result1 = user.age || 25;
const result2 = user.name && user.name.toUpperCase();
const result3 = config.theme || 'light';
const result4 = config.debug && console.log('Debug mode') || 'disabled';

console.log(result1);
console.log(result2);
console.log(result3);
console.log(result4);
πŸ‘6❀4πŸ”₯3πŸ€”3
CHALLENGE

const obj = {
name: 'Calculator',
values: [1, 2, 3, 4, 5],

regular: function() {
return this.values.filter(function(x) {
return x > 2;
}).length;
},

arrow: function() {
return this.values.filter(x => x > 2).length;
},

broken: () => {
return this.values.filter(x => x > 2).length;
}
};

console.log(obj.regular());
console.log(obj.arrow());
try {
console.log(obj.broken());
} catch(e) {
console.log('Error');
}
πŸ‘6❀3πŸ”₯2
❀5πŸ‘4
✌️ Date is out, Temporal is in

Temporal is the Date system we always wanted in JavaScript. It's extremely close to being available so Mat Marquis thought it would be a good idea to explain exactly what is better about this new JavaScript date system.

Mat β€œWilto” Marquis
Please open Telegram to view this post
VIEW IN TELEGRAM
❀9πŸ”₯4πŸ‘3
CHALLENGE

const numbers = [1, 2, 3, 4, 5, 6];

const result = numbers
.map(x => x * 2)
.filter(x => x > 6)
.reduce((acc, x) => {
console.log(`Processing ${x}, acc: ${acc}`);
return acc + x;
}, 0);

console.log(`Final result: ${result}`);
πŸ‘7❀3
Please open Telegram to view this post
VIEW IN TELEGRAM
πŸ”₯10❀2πŸ‘1