JavaScript
32K subscribers
1.04K photos
10 videos
33 files
718 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
SPONSORED BY Blacksmith πŸ‘©β€πŸš’
Run GitHub Actions 2x faster at half the cost.

The newer CSS viewport units (svh, lvh, dvh) are one of my favourite features in modern CSS
πŸ”₯

β†’ The "smallest viewport height" (svh) will always fit the smallest amount of space (all content will always be visible)

β†’ The "largest viewport height" (lvh) will always take up the largest amount of space (potentially hiding some content underneath UI)

β†’ The "dynamic viewport height" (dvh) will resize to fit the currently available space (adapting as the browser UI gets visible or hidden)

Mads Brodt
Please open Telegram to view this post
VIEW IN TELEGRAM
πŸ”₯16❀7πŸ‘5
SPONSORED BY Blacksmith πŸ‘©β€πŸš’
Run GitHub Actions 2x faster at half the cost.

CHALLENGE ❓


const array = [1, 2, 3];
const result = array.map(function(n) {
return this ? n : 0;
}, false);

console.log(result);
Please open Telegram to view this post
VIEW IN TELEGRAM
πŸ‘6❀4πŸ”₯3
❀10πŸ€”6πŸ‘3πŸ”₯3🀩3
SPONSORED BY Blacksmith πŸ‘©β€πŸš’
Run GitHub Actions 2x faster at half the cost.

πŸ‘€ Ky: Tiny, Elegant Fetch-Based HTTP Client for Browsers

Makes the Fetch API tidier to use as shown here. If you want to tighten up your fetch calls, it's worth a look.

Sindre Sorhus
Please open Telegram to view this post
VIEW IN TELEGRAM
πŸ‘7❀4πŸ”₯2
SPONSORED BY Blacksmith πŸ‘©β€πŸš’
Run GitHub Actions 2x faster at half the cost.

CHALLENGE ❓


function* generator() {
yield* [1, 2];
yield* (function* () { yield 3; yield 4; })();
}

const gen = generator();

console.log([...gen]);
Please open Telegram to view this post
VIEW IN TELEGRAM
πŸ”₯7πŸ‘4❀2
πŸ‘8πŸ€”4🀣4❀3
SPONSORED BY Blacksmith πŸ‘©β€πŸš’
Run GitHub Actions 2x faster at half the cost.

πŸ˜‰ Don't Use JS for That: Moving Features to CSS and HTML by Kilian Valkhof

Packed with code and examples. Some techniques aren’t universally supported yet, but there’s a lot that the browser can offer that you don’t need to reimplement yourself, like color picking, modals, and animations.

Kilian Valkhof
Please open Telegram to view this post
VIEW IN TELEGRAM
πŸ‘7❀2πŸ”₯2
SPONSORED BY Blacksmith πŸ‘©β€πŸš’
Run GitHub Actions 2x faster at half the cost.

CHALLENGE ❓


const obj = {
a: 1,
b() {
return this.a + 1;
}
};

const { b } = obj;
console.log(b());
Please open Telegram to view this post
VIEW IN TELEGRAM
πŸ‘1
What is the output?
Anonymous Quiz
57%
2
12%
1
20%
undefined
11%
NaN
πŸ€”23πŸ‘9πŸ”₯5❀3
SPONSORED BY Blacksmith πŸ‘©β€πŸš’
Run GitHub Actions 2x faster at half the cost.

❓ So You Think You Know Box Shadows?

The author indulges his creative side with some fun experiments into what he calls β€œsome of the worst possible things” you can do with box shadows on a DIV element, coupled with JavaScript.

David Gerrells
Please open Telegram to view this post
VIEW IN TELEGRAM
πŸ”₯3❀2πŸ‘2
SPONSORED BY Blacksmith πŸ‘©β€πŸš’
Run GitHub Actions 2x faster at half the cost.

CHALLENGE ❓


const obj = { a: 1, b: 2 };
Object.defineProperty(obj, 'b', { value: 3, writable: false });

obj.b = 4;
console.log(obj.b);
Please open Telegram to view this post
VIEW IN TELEGRAM
πŸ‘5πŸ”₯2πŸ€”1
What is the output?
Anonymous Quiz
37%
3
42%
4
12%
2
9%
undefined
🀣14❀7πŸ‘6πŸ”₯2πŸ€”2
SPONSORED BY Blacksmith πŸ‘©β€πŸš’
Run GitHub Actions 2x faster at half the cost.

‼️ Astro 4.12: Say Hello to Server Islands

The flexible Astro framework for building modern content-based sites continues to go from strength to strength. v4.12 includes a new concept of server islands, a way to integrate static HTML and server-side generated components together.

Erika and Phillips (Astro)
Please open Telegram to view this post
VIEW IN TELEGRAM
πŸ‘4πŸ”₯3❀2
SPONSORED BY Lantern Cloud πŸ‘―β€β™€οΈ
Vector database on top of Postgres for AI

❓ CHALLENGE

const a = { value: 1 };
const b = Object.create(a);
b.value = 2;

console.log(b.value);
console.log(a.value);
Please open Telegram to view this post
VIEW IN TELEGRAM
πŸ‘3
What is the output?
Anonymous Quiz
55%
2, 1
23%
2, 2
16%
1, 2
6%
1, 1
πŸ€”13❀6🀣5πŸ‘4πŸ”₯3🀩1
This media is not supported in your browser
VIEW IN TELEGRAM
SPONSORED BY Lantern Cloud πŸ‘―β€β™€οΈ
Vector database on top of Postgres for AI

🌲 Node.js Adds Experimental Support for TypeScript

Wes Bos
Please open Telegram to view this post
VIEW IN TELEGRAM
πŸ‘6🀣4❀3πŸ”₯1
SPONSORED BY Lantern Cloud πŸ‘―β€β™€οΈ
Vector database on top of Postgres for AI

❓CHALLENGE
let count = 0;

const counter = (function() {
count = 0;
return function() {
count += 1;
return count;
};
})();

count = 10;
counter();
console.log(count);
Please open Telegram to view this post
VIEW IN TELEGRAM
🀩6πŸ‘3πŸ”₯2❀1πŸ€”1
What is the output?
Anonymous Quiz
13%
0
50%
11
29%
1
8%
NaN
πŸ‘9🀩6❀3
SPONSORED BY Lantern Cloud πŸ‘―β€β™€οΈ
Vector database on top of Postgres for AI

πŸ₯ΉπŸ˜‚πŸ˜†emoji-picker-element: A Lightweight Emoji Picker

An emoji picking control, packaged as a Web Component. You can also add custom emoji to it. GitHub repo.

Nolan Lawson
Please open Telegram to view this post
VIEW IN TELEGRAM
❀3πŸ”₯3πŸ‘2
SPONSORED BY Lantern Cloud πŸ‘―β€β™€οΈ
Vector database on top of Postgres for AI

❓CHALLENGE
const target = {
age: 30
};

const handler = {
get: function(obj, prop) {
return obj[prop]++;
}
};

const proxy = new Proxy(target, handler);

console.log(proxy.age);
console.log(target.age);
console.log(proxy.age);
Please open Telegram to view this post
VIEW IN TELEGRAM
πŸ‘8πŸ€”7πŸ”₯4❀3
πŸ€”8πŸ‘7❀5