This week has few but exciting news. Astro is going strong, as well as Remix. StyleX is open-sourced, a thought from D. Abramov on Clean Code and a few interesting CSS articles.
Meta open-sourced StyleX. It is used for WhatsApp, Facebook, and Instagram. StyleX is designed for Frames like React, Preact, Solid, lit-html or Angular. It can easily apply different styles for the Component (active, hover, etc) and adjust things programmatically. My doubt is how easy it is to maintain the code and how to apply global re-usable styling. Although I’m not a CSS-in-JS person, it is definitely worth exploring and jotting down.
“StyleX combines the strengths and avoids the weaknesses of both inline styles and static CSS. Defining and using styles requires only local knowledge within a component, and avoids specificity issues while retaining features like Media Queries. StyleX builds optimized styles using collision-free atomic CSS which is superior to what could be authored and maintained by hand.”
Highlights:
Astro Dev toolbar
Internationalisation (i18n) routing
Incremental Content Caching (Experimental)
New View Transition APIs
Redesigned logging
Redesigned documentation
https://astro.build/blog/astro-4/
This is a fantastic post by Dan Abramov on Clean Code, Abstractions and what to do with that.
https://overreacted.io/goodbye-clean-code/
The Remix is going strong! Changelog: https://github.com/remix-run/remix/blob/main/CHANGELOG.md
“ We released 1 minor and 1 patch version of Remix since the last newsletter, both primarily focused on improving stability and paving the way for new features.
Stabilised useBlocker hook
Added new unstable_flushSync API
Squashed over 20 bugs in Remix, React Router, and the unstable Vite Compiler.”
“Also worth mentioning is that an open-source package, Remix Development Tools, provides a user-friendly interface consisting of three tabs: Active Page, Terminal, Settings, Errors and Routes, and a side tab called Timeline.”
https://www.npmjs.com/package/remix-development-tools
https://graphite.dev/blog/why-we-use-aws-instead-of-vercel
https://github.com/williamtroup/Syntax.js
https://css-irl.info/radial-gradients-and-css-trigonometric-functions/
I guess the time has come to move away from RGB() 🙂
This short post explains and visually shows the benefits of using oklch(). Also, it gave me answers on wide-gamut P3 colours.
https://www.stefanjudis.com/today-i-learned/oklch-perceived-lightness/
https://tsev.dev/posts/2023-11-10-should-avif-be-the-dominant-image-format/
Get inspired and check this codepen example.
https://codepen.io/jh3y/pen/JjxPKXz