Friday Issue Nr.101

CSS utility and Tailwind’s bullshit. Apple and PWA. The React compiler is nearly there, as well as Qwik intro to the next level, HTML vs React, specificity battle game, and Colour Spaces - also a good read about colours.

JavaScript News

React Labs and React Compiler

It looks like React is coming back with flying colours. It becomes pretty powerful with compiler and use client/use server directive. Also, it is a bit confusing, but React Compiler is what used to be React Forget. In any case, the research project is now already powering Instagram in prod. That also means all those memory hooks (useMemo, useCallback) and fine-tuning improvements could go away.

https://react.dev/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024

HTMZ

Another micro-framework. If I get it right, the framework leverages the browser’s native power to parse the iframe’s HTML, then takes this result and applies it to the DOM via an unload handler.

https://leanrada.com/htmz/

Qwik

There is a post from the Qwik team on what will be introduced in the next version.

Here is a preview.

<div q:container="paused" q:render="static-ssr" q:version="dev" 

     q:base="/build/" q:locale q:manifest-hash="dev">

  <main>

   Count: 123!

   <button on:click="...">+1</button>

  </main>

  <script type="qwik/state">[...]</script>

  <script type="qwik/vnode">!{{HDB1}}</script>

</div>

https://www.builder.io/blog/qwik-2-coming-soon

HTMX vs React: A Complete Comparison

https://semaphoreci.com/blog/htmx-react

Immutable array updates with Array.prototype.with

const ages = [10, 15, 20, 25];

const newAges = ages.with(1, 16);

console.log(newAges); // [10, 16, 20, 25]

console.log(ages); // [10, 15, 20, 25] (unchanged)

https://web.dev/blog/array-with

CSS News

CSS utility first

Oh, I waited for this kind of post! I was really thinking if I’m mad or world around me is mad. At first I thought I don’t get Tailwind but hey, I get CSS. Why do we need those utilities?

https://heydonworks.com/article/what-is-utility-first-css/

Specificity battle

Excellent training game from Lea Verou

https://css.land/specificity/

How to create a glowing hover effect

https://frontendmasters.com/blog/glowing-hover-effect/

A Gooey Marquee

Fascinating CSS only effect where letters are blurred at the start and end of the animation.

https://codepen.io/amit_sheen/pen/wvORNYm

Mixed News

Color Spaces

Amazing interactive article about colours, colour trigonometry and how those colours are arranged.

https://ericportis.com/posts/2024/okay-color-spaces/

Apple and PWA

Apple never liked PWA and implemented features very slowly. Also it use to be very cumbersome to add PWA in iOS. In any case, this is a sad story as I find PWA very powerful and useful.

https://open-web-advocacy.org/blog/its-official-apple-kills-web-apps-in-the-eu/

SVG Flags

Handy collection of SVG Flags

https://nucleoapp.com/svg-flag-icons