Friday Issue Nr. 79 | 15/9/2023

Quite a long list of posts this week. I hope I won't overload your reading time 🙂 Mysterious [].every(), NodeJS supports ENV files, Puck and Plock, Math lib, SmolCSS and WordPress for hundred years.

JavaScript News

Mysterious [].every()

Consider these two lines:

[].every(() => true); // true

[].every(() => false); // true

If you know the answer, then skip the article below.

https://humanwhocodes.com/blog/2023/09/javascript-wtf-why-does-every-re

NodeJS supports ENV files

The DotEnv module got up to version 16 and only now has NodeJS (v20.6.0) figured out that support for .env files is needed. ;)

https://philna.sh/blog/2023/09/05/nodejs-supports-dotenv/

How to Create a Dual-Mode Cross-Runtime JavaScript Package

“This article will guide you through publishing dual-mode, cross-runtime JavaScript packages. Learn to create libraries compatible with both ESM and CommonJS, as well as different runtimes like Node.js, Deno, and browsers.”

https://hexagon.56k.guru/posts/dual-mode-cross-runtime-packages/

The next two articles I mostly choose because of the name 🙂

Puck - Self-hosted drag-and-drop library

https://github.com/measuredco/puck

Demo: https://puck-editor-demo.vercel.app/edit

Plock - Masonry layouts for React

React Plock is a tree-shakeable ultra small npm package (less than 1kB gzipped) that allows you to create amazing masonry layouts with an amazing developer experience. With React Plock, you can easily create responsive and customizable layouts that adapt to different screen sizes and devices.

https://github.com/askides/react-plock

Math library for JS and NodeJS

https://mathjs.org/

CSS News

SmolCSS

It is a fantastic collection of small CSS snippets for Responsive Grid, Flexbox, Sidebar, padding, and more. I'm already using Responsive Flex, and it does the work!

https://smolcss.dev/

Lazy Loading

This is not the first article I’ve read about the bad impact of lazy loading on images.

https://cloudfour.com/thinks/stop-lazy-loading-product-and-hero-images/

The Dark Side of View Transition

https://ericportis.com/posts/2023/view-transitions-break-incremental-rendering/

Pros and cons of using Shadow DOM and style encapsulation

https://www.matuzo.at/blog/2023/pros-and-cons-of-shadow-dom/

Improving responsive data table UX with CSS

Quite a nice collection of easy-to-implement tricks like sticky headers, show/hide columns, accordions, etc.

https://blog.logrocket.com/improving-responsive-data-table-ux-css/

Layout technique with one selector (nearly)

This is a very comprehensive post but quite interesting, too.

https://blog.logrocket.com/css-lobotomized-owl-selector-modern-guide/

Mixed News

Translation

Video translation into different languages, including lip movements and keeping your voice! Incredible.

As per some comments: "It's crazy accurate I speak French English and German, it's absolutely insane, great accent in german too !

Although the french version is an international/quebec french, but it worns so well !!”

https://x.com/mrjonfinger/status/1701075571630047525

Your website for a hundred years

For 38K, you can secure your digital assets with WordPress. A bit pricy, no?

https://wordpress.com/blog/2023/08/25/introducing-the-100-year-plan/