SPONSORED BY Blacksmith 👩‍🚒
Run GitHub Actions 2x faster at half the cost.

✌️ I am not... I repeat, I am not... a "frontend developer", just because I like to write JS.

I'm also not a "backend developer" b/c I like to write communication-oriented code, to manage and transmit data and juggle asynchony and other non-UI stuff.
I'm a middle-end dev. Forever. I build libraries, tools, etc. My product is what another dev uses to build their product.

Kyle Simpson

SPONSORED BY Blacksmith 👩‍🚒
Run GitHub Actions 2x faster at half the cost.

CHALLENGE ❓

const array = [1, 2, 3, 4];
const result = array.reduceRight((acc, val) => acc - val);

console.log(result);

SPONSORED BY Blacksmith 👩‍🚒
Run GitHub Actions 2x faster at half the cost.

✌️ JavaScript weekly #698

SPONSORED BY Blacksmith 👩‍🚒
Run GitHub Actions 2x faster at half the cost.

CHALLENGE ❓

function test() {
  console.log(arguments.length);
}

test(1, 2, 3);
test.call(null, 1, 2, 3);

SPONSORED BY Blacksmith 👩‍🚒
Run GitHub Actions 2x faster at half the cost.

🌲 Graceful Shutdown in NodeJS

In this article, I will show you how to do a graceful shutdown in a NodeJS application, but first, let's describe what "graceful shutdown" means and why we need to do that in our application and what are the benefits.

nairihar

SPONSORED BY Blacksmith 👩‍🚒
Run GitHub Actions 2x faster at half the cost.

CHALLENGE ❓

const obj = { a: 1, b: 2 };
const descriptor = Object.getOwnPropertyDescriptor(obj, 'a');

descriptor.value = 3;
Object.defineProperty(obj, 'a', descriptor);

console.log(obj.a);

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

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);

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

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]);

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

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());

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

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);