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!
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
https://danielnagy.me/posts/Post_usaivhdu3j5d
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 boilerplate with TailwindCSS, DaisyUI & TypeScript. Authentication (Supabase), payments (Stripe), and blog (Contentful) are ready-to-go
https://www.sveltekit-ultrafast.com/
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.
This release ends support for IE.
https://htmx.org/posts/2024-06-17-htmx-2-0-0-is-released/
https://www.smashingmagazine.com/2024/06/what-are-css-container-style-queries-good-for/
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/
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
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
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