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.