Friday Issue Nr. 111 | 17/05/2024

There has been an interesting trend lately. There have been updates for JS frames and build tools, but CSS is certainly the winner lately. With so many updates, it seems like all major browsers are trying to implement the latest features as quickly as possible. Layouts and general setup for Websites or web apps have become much simpler tasks.

JavaScript News

Astro 4.8

Astro Actions, Request rewriting, Performance improvements, Ability to define multiple routes with the same entrypoint.

https://astro.build/blog/astro-480/

Figma’s Journey from Skew to Typescript

https://www.figma.com/blog/figmas-journey-to-typescript-compiling-away-our-custom-programming-language/

The Vue Ecosystem in 2024

https://frontendmasters.com/blog/the-vue-ecosystem-in-2024/

At some point, JavaScript got good

This is a kind of nice, nostalgic post with examples from the past. JavaScript has improved dramatically in the last years. It has better support for working with DOM, and in general, there is no need for jQuery anymore.

https://jonbeebe.net/2024/05/javascript-got-good/

By the way, here is jQuery to JavaScript converter:

https://www.lightgalleryjs.com/jquery-to-js-converter/

What can you build with React Three Fiber?

https://docs.pmnd.rs/react-three-fiber/getting-started/introduction

Here is an example with a 3D text distortion effect using React Three Fiber

https://tympanus.net/codrops/2024/05/08/exploring-a-3d-text-distortion-effect-with-react-three-fiber/

Learning SolidJS

https://www.stashpad.com/blog/react-developer-guide-to-solid-js

CSS News

State of HTML 2023

https://2023.stateofhtml.com/en-US

Popover API

As crazy as it sounds, Popover API has been available in all browsers (the main ones, anyway) since April. If you missed it, Una Kravets provides a great explanation and examples below.

https://web.dev/blog/popover-api

Light-Dark

The same as per Popover API, now the Light Dark mode is available for all main browsers.

https://web.dev/articles/light-dark

Here is an interesting overview from Chris Coyier: https://frontendmasters.com/blog/dark-and-light/

CSS custom property

This is a fantastic example of how and why to create custom properties in CSS.

Also, this example of using has() with hover and focus is pretty sleek: .text-container:has(:hover, :focus) .text {...}

https://www.smashingmagazine.com/2024/05/times-need-custom-property-instead-css-variable/

CSS boilerplate

This is a very interesting approach to making slim CSS with globals, variables, and flow. CUBE CSS itself is a very nice approach. One should bookmark and consider using it before using any CSS framework.

https://harrycresswell.com/writing/reducing-css/

Mixed News

FontShare

Nice font collection.

https://www.fontshare.com/

Wordpress 2024

Oh, this is painful to read. I still remember times when WP was fun to run. Set up Ubuntu, upload WP files, run config, and the blog is there. However, around 2015, I realised that I was spending more time managing Ubuntu, Firewalls, and constant bots who tried to find my configs than actually blogging.

https://dbushell.com/2024/05/07/modern-wordpress-themes-yikes/

When your work disappears

https://lynnandtonic.com/thoughts/entries/when-your-work-disappears/

Comment on Mastodon