🍄‍🟫 November 2024

State of CSS, gradient blur, text fragments

State of CSS & HTML 2024: The results of the yearly CSS and HTML surveys are out! These are always great to learn about new APIs and tools that are picking up pace. Especially CSS has been on a run recently: ‘Let me make a prediction: we’ll look back at 2024 as the turning point between “CSS Classic” and “New CSS”.’ Agreed!
This neat gradient blur effect in a few lines of CSS, combining mask + backdrop-filter: Codepen
Center stuff in a single line of CSS? Now finally possible with align-content: center; 🎉
Text fragments allow you to link to a specific piece of text on a page and highlight it. It’s similar to #, except that this is a browser feature and does not require the website to implement anything. Try it!
Lefthook, the Git hooks manager we use in many projects, can also be used for general tasks outside of Git hooks. Might be handy to unify commands across different stacks and setups! It also supports local overrides.
Vue Dev Tools are getting a huge update (urgently needed tbh). Interestingly it’s in the form of a Vite plugin, not a browser extension, meaning they can be embedded directly on the page. Should be great for debugging across browsers and devices.
Promise.try: This new API offers an alternative to try/catch. Nothing you couldn’t do before but can help you write more compact or uniform code in some situations. Browser support is currently limited, but should be available everywhere soon.
System things: Did you know you can use system colors like Canvas and LinkText in CSS? Not incredibly fancy, but adapts automatically to the user’s system and preferences (like dark mode and contrast). I created a small page where you can see all of them. Related: This list of font stacks that work without downloading additional fonts.
If I got you excited about symbols last time, here is a great explainer: Exploring JavaScript symbols
Love this idea: Using static websites for tiny archives
macOS has a built-in internet speed test that you can run from the terminal: networkQuality, along with some other helpful tools.