A rather geeky/technical weblog, est. 2001, by Bramus
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”
transition.css
transition.css is a handy stylesheet by Adam Argyle, full of transitions you can apply on your page. Simply import the stylesheet and set a transition-style attribute on the elements you wish to animate for the effect to kick in: <link rel="stylesheet" href="https://unpkg.com/transition-style" /> <div transition-style="in:wipe:up">👍</div> Not explicitly mentioned on the demo page (but is in …
Continue reading “Drop-in CSS transitions with transition.css“
<feColorMatrix> with SVG Color Matrix Mixer
Easily generate nice looking Color Matrix Filters for your images For use with the <feColorMatrix /> SVG filter. SVG Color Matrix Mixer →
Great work by Linmiao Xu: SSH tunnels are encrypted TCP connections between SSH clients and servers that allows traffic entering one side of the tunnel to transparently exit through the other. This page explains use cases and examples of SSH tunnels while visually presenting the traffic flows. Also comes with the commands … handy! A …
@property and its Animating Powers
Over at CSS-Tricks Jhey Tompkins has written a solid piece on the amazing @property and the possibilities it opens: We can give the browser the information is needs to transition and animate those properties! Covered in the post, amongst many other interesting demos, are Jhey’s own Pure CSS Stopwatch and my own animated gradient border …
Continue reading “Exploring @property and its Animating Powers”