A rather geeky/technical weblog, est. 2001, by Bramus
Whenever I write a Twitter Thread I carefully lay out my planned tweets in advance in a text editor. After manually adjusting my sentences to have tweetable parts, I tweet them out one by one. Quite a cumbersome work, where ThreadStart can do the heavy lifting for me instead: Creating a Twitter thread without guidance …
Continue reading “Easily write Twitter threads with ThreadStart”
React Flow is a library for building node-based graphs. You can easily implement custom node types and it comes with components like a mini-map and graph controls. React Flow →
use
Good reminder by Georgi Nikoloff to have one (visually hidden) SVG that contains several layers, which you can then include further down in your code. SVG has a <defs> tag that lets us declare something like our graph footer just once and then simply reference it — using <use> — from anywhere on the page …
Continue reading “Too Many SVGs Clogging Up Your Markup? Try use“
In this post Sven Luijten uses DNSControl from within GitHub Actions to manage DNS: What if you could edit a JavaScript file with your desired DNS configuration, submit a pull request on GitHub, see a preview of the changes you are about to make, and when you merge it, have those changes be applied completely …
Continue reading “Manage your DNS from GitHub with DNSControl”
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" …