If you’ve ever wondered how the AVIF Image Format works, this detailed post has got you covered. Strap in tight, as we will start with some history and go deep into how modern codecs work, so this is not a quick read. Decoding AVIF: Deep dive with cats and imgproxy →
Category Archives: Elsewhere
Tint User-Interface Controls with CSS accent-color
CSS accent-color from the CSS UI specification is here to tint elements with one line of CSS, saving you from customization efforts by providing a way to bring your brand into elements. The CSS for the screenshot above is this: input { accent-color: hotpink; } 💡 You can also set this declaration onto form, as …
Continue reading “Tint User-Interface Controls with CSS accent-color”
Web Terminology: Site vs. Origin
With this tool you should be able to (better) grasp the difference between the term SameSite and SameOrigin The concepts of Origin and Site may be confusing, yet they are important because browsers make security decisions based on the fact whether two interacting contexts are in the same origin or in the same site. In …
Miniature Calendar by Tatsuya Tanaka
I love these diorama-style miniatures using everyday items by Tatsuya Tanaka. He’s been creating them ever since April 2011. Broccoli and parsley may sometimes look like a forest of trees, and tree leaves floating on the surface of water may sometimes look like little boats. Everyday occurrences seen from a miniature perspective can bring us …
Why WebKit supports AVIF but Safari does not
Jon Henshaw, writing for Coywolf: WebKit added support for the AVIF image format in April 2021, but it’s still unavailable in Safari. Its absence is because Apple chose an unconventional method for decoding images in its browser. Long story short: Safari does not decode images using WebKit — its underlying rendering engine — but delegates …
Continue reading “Why WebKit supports AVIF but Safari does not”
Helvetica® Now Variable
Helvetica® Now, available as a Variable Font Helvetica® Now Variable builds on the groundbreaking work of 2019’s Helvetica Now release—all of the clarity, simplicity and neutrality of classic Helvetica with everything 21st-century designers need (optical sizing, stylistic alternates, and extended character set). Don’t really understand why they ship the Regular and Italic variants separately. I’d’ve …
Dune Trailer
Coming late October; Pretty excited about it as it’s directed by Denis Villeneuve (Sicario, Blade Runner 2049, Arrival, …) and features Timothée Chalamet (Call Me by Your Name, Beautiful Boy, …). Although subtle at times, the Teal and Orange is very present in this one …
“For developers, Apple’s Safari is crap and outdated”
Perry Sun: Safari is very good web browser, delivering fast performance and solid privacy features. But at the same time, the lack of support for key web technologies and APIs has been both perplexing and annoying at the same time. The enormous popularity of iOS makes it all the more annoying that Apple continues to …
Continue reading ““For developers, Apple’s Safari is crap and outdated””
useUnmountSignal() — A React Hook to cancel promises when a component is unmounted
A React Hook that wraps around the almighty AbortController. It will automatically call abort() on the created AbortSignal instance when the component unmounts. import useUnmountSignal from 'use-unmount-signal'; function Example() { const unmountSignal = useUnmountSignal(); return ( <button onClick={() => fetch('https://ping.example.com', { signal: unmountSignal }) }> Ping </button> ); } Installation per NPM: npm i use-unmount-signal …
Prevent Layout Shifts between Web Fonts and Fallback Fonts with the size-adjust @font-face descriptor
You know something good’s landed when two out of the three great Web/CSS resources — here Smashing Magazine and web.dev (*) — write about the same topic: the size-adjust descriptor for @font-face. To improve font rendering, a great technique is font swapping. The problem however, is that sometimes when the web font loads, it shifts …