Friday Issue Nr.116

React is postponing RC19, an overview of Safari 18 features, SvelteKit boilerplate and Speculation Rules API. In the HTML world, CSS is getting IF conditional, and a good post about Anchor positioning. Also, there is a Hitchhiker's Guide to the Galaxy game!

JavaScript News

React Drama

React is postponing a release that was already announced due to a difference in how queries are handled. Instead of parallel (as per R18), they run in a waterfall (R19), which makes everything very slow.

https://tkdodo.eu/blog/react-19-and-suspense-a-drama-in-3-acts

Video (7m) explains this perfectly:

https://www.youtube.com/watch?v=PZYXTFnP2po

Experimenting with React Server Components and Vite

https://danielnagy.me/posts/Post_usaivhdu3j5d

Safari 18 - What features are usable across browsers

Last week, there was a post about a massive list of Safari updates, and here is a nice summary of some of the features.

https://www.stefanjudis.com/blog/safari-18-what-web-features-are-usable-across-browsers/

Sveltekit-ultrafast

SvelteKit boilerplate with TailwindCSS, DaisyUI & TypeScript. Authentication (Supabase), payments (Stripe), and blog (Contentful) are ready-to-go

https://www.sveltekit-ultrafast.com/

Speculation Rules API

Imagine you have a website where you know that users mostly go to specific pages. For example, when visiting the X page, the user will most likely go to the Y page. Wouldn’t it be nice to preload those pages in advance, and once the user hits the button, the page is loaded instantly? Well, this is precisely about that!

https://www.debugbear.com/blog/speculation-rules

Documentation

https://developer.mozilla.org/en-US/docs/Web/API/Speculation_Rules_API

This is an experimental technology and is currently not available for Firefox and Safari.

HTMX 2.0

This release ends support for IE.

https://htmx.org/posts/2024-06-17-htmx-2-0-0-is-released/

HTML & CSS News

What are CSS Container Queries good for

https://www.smashingmagazine.com/2024/06/what-are-css-container-style-queries-good-for/

CSS is getting IF

It might take a couple of years to achieve this, but libraries will eventually have something like this available for use. Also, a side note: this is the first visible IF statement. However, CSS already has conditionals.

background-color: if(

	style(--variant: success), var(--color-success-60),

	style(--variant: warning), var(--color-warning-60),

	style(--variant: danger), var(--color-danger-60),

	style(--variant: primary), var(--color-primary)

);

https://github.com/w3c/csswg-drafts/issues/10064

Lea Verou wrote excellent article to explain above in more detail.

https://lea.verou.me/blog/2024/css-conditionals/

Geoff wrote post where he clarifies all cases and add nice examples.

https://geoffgraham.me/conditionals-on-custom-properties/

CSS Anchor Position API

With Anchor Position API you can easily create Tooltips, Submenus, settings dialogs and similar elements. Here is nice article about it:

https://stackblitz.com/edit/basic-flow-chart-using-css-anchor-position-vax87e?file=index.js

However, in Chrome 125 you can use this API to draw flow charts. Take a look:

https://coryrylan.com/blog/flow-charts-with-css-anchor-positioning

Here is a demo and JS is used only to enable drag’n’drop on the screen: https://stackblitz.com/edit/draggable-flow-chart-using-css-anchor-position?file=index.css

Mixed News

Living on the limited internet

Amazing post about once in a life experience living in Antarctica and trying to use a very limited internet for daily work.

https://brr.fyi/posts/engineering-for-slow-internet

The Hitchhiker's Guide to the Galaxy

BBC made a game and it is full screen reader friendly. But those who love adventures and Hitchhiker story might love to play it.

https://www.bbc.co.uk/programmes/articles/1g84m0sXpnNCv84GpN2PLZG/the-game-30th-anniversary-edition

Comment on Mastodon