A rather geeky/technical weblog, est. 2001, by Bramus
Over at web.dev, Katie Hempenius learns us how to identify and fix layout shifts using the Layout Instability API and the DevTools. What I take away from this is that you can easily spot them using DevTools: In the Rendering Panel you can enable an option to highlight areas of Layout Shift: To enable Layout …
Adam Wathan from Tailwind: One of the hardest constraints we’ve had to deal with as we’ve improved Tailwind CSS over the years is the generated file size in development. With enough customizations to your config file, the generated CSS can reach 10mb or more, and there’s only so much CSS that build tools and even …
Continue reading “Just-In-Time: The Next Generation of Tailwind CSS”
background-clip Demo: Text with Animated Emoji
Fun demo by Elad Shechter: See the Pen Background-clip: text with Animated Emoji by Elad Shechter (@elad2412) on CodePen. Behind it are two techniques: The 👻 emoji is set as the background-image of the text. To do so one must wrap it inside an SVG, and successively inject the SVG using a Data URL. To …
Continue reading “CSS background-clip Demo: Text with Animated Emoji”
From the Next.js folks comes SWR, a React Hooks library for data fetching built on Suspense: The name “SWR” is derived from stale-while-revalidate, a cache invalidation strategy popularized by HTTP RFC 5861. SWR first returns the data from cache (stale), then sends the fetch request (revalidate), and finally comes with the up-to-date data again. It …
Continue reading “SWR — React Hooks library for data fetching”
Building further upon my posts digging into Scroll-Linked Animations, Gary Simon created this video recreating a basic Scroll-Linked Animation that animates an image as you scroll down the page. Good video if you’re looking for a quick intro. Two minor remarks though: Instead of speeding up the time-range it’s better to tweak the scroll-offsets. Even …
Continue reading “Scroll Linked Animations With NO JAVASCRIPT!?”
<tab-container> Custom Element — An Accessible Tab Container Element with Keyboard Support
Built by GitHub is <tab-container>, a Custom Element that defines an accessible tab container element with keyboard support and that also follows the ARIA best practices guide on tabs. Upon importing the package it will register the Custom Element, so you can use it immediately: <tab-container> <div role="tablist"> <button type="button" role="tab" aria-selected="true">Tab one</button> <button type="button" …
The past few months Rodrigo Pombo has been working on Code Hike, a new way to write code walkthroughs for blogs or docs. Recently he shared this preview of the step scroller (“scrollycoding”) component. Looks great! Scrollycoding Demo →
This website is hosted across a network of solar powered servers and is sent to you from wherever there is the most sunshine. My inner geek rejoices! Solar Protocol → Via Jeremy
Recently Banksy put up a new work on the walls of a defunct prison in England. The work depicts a prisoner escaping, dangling off the wall using a long strand of paper emerging from a typewriter, instead of the usual bedsheets. Taking footage and audio from Bob Ross’ The Joy of Painting they also released …
Maxime Heckel, while revamping the theme on his blog: I stumbled upon this pattern of composing CSS partial values for my HSLA colors, assign them to variables. Thanks to this, I was able to build my fairly complex theme and a full color palette that made sense for my websites by only using CSS. No …
Continue reading “The Power of Composition with CSS Custom Properties”