Minimal CSS-only blurry image placeholders, https://leanrada.com/notes/css-only-lqip/.

Pretty clever!
The author represents Low Quality Image Placeholders (LQIP) by integers (20 bits long) then use CSS Math operators to do bitwise operations and extract some values to generate this blurry effect (based on 6 circles, 1 solid background image, and blend everything together with a blur filter). I love it. 100% CSS, no JS required. Of course, there is a first step consisting at generating this integer.

#lqip#css

lightningcss, https://github.com/parcel-bundler/lightningcss.

> An extremely fast CSS parser, transformer, and minifier written in Rust. Use it with Parcel, as a standalone library or CLI, or via a plugin with any other tool.

I've tried it on my site (https://mnt.io) with the CLI binary: the minifier is indeed compressing more than postcss. Pretty impressive. It's also faster, as expected.

#css#RustLang

Minimal CSS-only blurry image placeholders, https://leanrada.com/notes/css-only-lqip/.

Pretty clever!
The author represents Low Quality Image Placeholders (LQIP) by integers (20 bits long) then use CSS Math operators to do bitwise operations and extract some values to generate this blurry effect (based on 6 circles, 1 solid background image, and blend everything together with a blur filter). I love it. 100% CSS, no JS required. Of course, there is a first step consisting at generating this integer.

#lqip#css

It's no small thing, CSS can now do carousels natively, with no javascript.

"scroll buttons, scroll markers, scroll driven animation, scroll-state() queries, :has(), grid, anchor and so much more.

Even more impressive is the accessibility story.

Carousel best practices are handled by the browser, thanks to the engineering and accessibility teams working together. It'd be very difficult to make a more accessible carousel than this."

#CSS #frontend#UIUX

https://developer.chrome.com/blog/carousels-with-css

It's no small thing, CSS can now do carousels natively, with no javascript.

"scroll buttons, scroll markers, scroll driven animation, scroll-state() queries, :has(), grid, anchor and so much more.

Even more impressive is the accessibility story.

Carousel best practices are handled by the browser, thanks to the engineering and accessibility teams working together. It'd be very difficult to make a more accessible carousel than this."

#CSS #frontend#UIUX

https://developer.chrome.com/blog/carousels-with-css

lightningcss, https://github.com/parcel-bundler/lightningcss.

> An extremely fast CSS parser, transformer, and minifier written in Rust. Use it with Parcel, as a standalone library or CLI, or via a plugin with any other tool.

I've tried it on my site (https://mnt.io) with the CLI binary: the minifier is indeed compressing more than postcss. Pretty impressive. It's also faster, as expected.

#css#RustLang