A rather geeky/technical weblog, est. 2001, by Bramus
outline-offset
In this demo Kevin Powell created some buttons that — so it seems — have animated borders. The trick however, is that it’s not the borders but the outline that’s being animated. See the Pen Animating outlines by Kevin (@kevinpowell) on CodePen.
Over at web.dev Thomas Steiner has published a series of posts on Mini Apps. Mini apps are small apps that require a super app to run. They are built with (“dialects” of) the web technologies HTML, CSS, and JavaScript. The runtime of a mini app is a WebView in the super app, not the underlying …
HTTP is fundamental to modern development, from frontend to backend to mobile. But like any widespread mature standard, it’s got some funky skeletons in the closet. Some of these skeletons are little-known but genuinely useful features, some of them are legacy oddities relied on by billions of connections daily, and some of them really shouldn’t …
Continue reading “HTTPWTF — Looking at some of the HTTP quirks”
Past weekend Lou Ottens — inventor of the Casette Tape while working at Philips Hasselt (Belgium) — passed away at the age of 95. Sharing this Greensock-powered SVG Animation by Chris Gannon seems very timely. See the Pen Cassette Tape Loader by Chris Gannon (@chrisgannon) on CodePen. Anyone got a pencil? 😅
blurhash-to-css
If you want to display Blurhash Placeholder Images on your site you need a JavaScript solution to do so. The blurhash-to-css package bypasses that, as it allows you to convert a Blurhash to a set of CSS properties that need to apply. import { blurhashToCss } from "blurhash-to-css"; const css = blurhashToCss( "eCF6B#-:0JInxr?@s;nmIoWUIko1%NocRk.8xbIUaxR*^+s;RiWAWU" ); { …
Continue reading “Display a BlurHash using only CSS thanks to blurhash-to-css“
Earlier this week SpaceX’s SN10 rocket took off, ascended to ±10km, and then after a free fall in the horizontal position turned vertical again to successfully land (only to explode a few minutes later). While you can rewatch the whole thing online I’m more fascinated by this composite photo by Jack Beyer, visualizing the trajectory: …
Date in JavaScript with Intl.DateTimeFormat
Phil Nash walks us through using Intl.DateTimeFormat to format a Date to a specific timezone and format. const shortcutFormatter = Intl.DateTimeFormat("en-AU", { timeZone: "Australia/Melbourne", timeStyle: "long", dateStyle: "short" }); shortcutFormatter.format(date); // => "22/2/21, 5:05:52 pm AEDT" How to display dates in your user’s time zone with the Intl API → Related: Think you know a …
Continue reading “Formatting a Date in JavaScript with Intl.DateTimeFormat“
Crazy work by Jamie Coulter: Build your own 3D CSS and HTML models, export them to CodePen and share with the community. Simply Draw, Extrude, Paint and export! VoCSSels — Easily create 3D CSS & HTML Voxel Models → ❤️ Be sure to give his work a heart on CodePen there.
Pete LePage walks us through the additions in Chrome 89. 🤩 I’m honored to have my WebHID Daft Punk Sound Board be featured in the “WebHID, WebNFC, and Web Serial section there. Let’s hope other browser vendors follow soon with top level await, as Chromium is the only browser to support it at the time …
It’s been a while since I’ve set up a server with Node, but turns out Fastify is preferred over Express nowadays. Fastify is a web framework highly focused on providing the best developer experience with the least overhead and a powerful plugin architecture. It is inspired by Hapi and Express and as far as we …
Continue reading “Fastify, Fast and low overhead web framework, for Node.js”