Helvetica® Now Variable
CSS Container Queries: Chrome DevTools Support
Support for Container Queries has landed in Chrome DevTools (Chrome 93). Let’s take a look at what this feature brings us today …
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 …
Execute ES Modules on the CLI
Jonathan Neal shared this little snippet on Twitter: Execute JavaScript modules like: bash ./command.js 1. Add the funky header.2. Optional: Omit the extension to not write `.js`.3. Optional: `chmod +x command` to not write `bash `.https://t.co/rhlPg2XPRJ pic.twitter.com/nbAvTFtt0w — Jonathan Neal (@jon_neal) July 25, 2021 Here’s the code: “:” //#;exec /usr/bin/env node –input-type=module – “$@” < …
Image Cut-Out Effects using CSS or SVG
RenderingNG — Ready for the next generation of web content
In the post on TablesNG, we looked at some of the features this under-the-hood rewrite for tables in Chromium provides us. But that’s only the tip of the iceberg, as the Chromium team have also been working on a whole new rendering engine architecture, named RenderingNG. In 2021, we will largely complete the process of …
Continue reading “RenderingNG — Ready for the next generation of web content”
Prevent unwanted Layout Shifts caused by Scrollbars with the scrollbar-gutter CSS property
