Needledrop: A Turntable Interface for Music Playback

Leveraging the JavaScript YouTube Player API and with a good pinch of CSS on top, Thomas H. Park created this record player for you to play with.

Drop the needle and find your favorite track, more or less. It’s fuzzy and inexact, and emphasizes the continuous listening experience an album can be.

Clever usage of repeating-radial-gradient to create the grooves of the record.

Needledrop →
Needledrop (Blog Post) →

Digging Into CSS Logical Properties

Ahmad Shadeed digs into CSS Logical Properties

The basic idea of CSS logical properties is that we won’t use physical directions in CSS properties. Instead, we will use properties that depend on the direction of the HTML document. Those properties are called logical properties.

As I said before: Exciting stuff. This will have a huge impact on how we write CSS.

Digging Into CSS Logical Properties →

Authenticate with sudo using Touch ID

Turns out it’s possible to authenticate with sudo using Touch ID, as per this (old) tweet by Cabel:

Note that this will work against when SSH’ing into your machine, and then trying to run sudo:

If you set this up, do realize that anyone who can access your account using their finger (*) can now also do wrong things.

~

(*) It’s possible to add more than one fingerprint to Touch ID.

In addition to my 2 index fingers, my wife can also access my computer using Touch ID.

Digging into Mini Apps

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 operating system, which makes mini apps cross platform.

The series consists of 4 main sections:

  1. Welcome to the world of Mini Apps
  2. The developer experience of Mini Apps
  3. The wider Mini Apps ecosystem
  4. Learning from Mini Apps

Web.Dev — Mini Apps →

HTTPWTF — Looking at some of the HTTP quirks

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 exist at all. Let’s look behind the curtain.

Did know about that Expect: 100-continue header — and even found a bug in curl handling an intermediary HTTP 417 response — but most of the stuff — such as the HTTP Trailers — were new to me.

HTTPWTF →

Via Frederick

SVG Cassette Tape

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? 😅

Display a BlurHash using only CSS thanks to 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#-:[email protected];nmIoWUIko1%NocRk.8xbIUaxR*^+s;RiWAWU"
);
{
  "backgroundImage": "linear-gradient(90deg, rgb(139,153,96) 10%,rgb(153,160,118) 10% 20%,rgb(170,172,142) 20% 30%,rgb(177,180,151) 30% 40%,rgb(174,180,146) 40% 50%,rgb(162,172,130) 50% 60%,rgb(148,162,114) 60% 70%,rgb(136,150,104) 70% 80%,rgb(131,145,95) 80% 90%,rgb(130,144,91) 90% 100%),linear-gradient(90deg, rgb(109,129,65) 10%,rgb(117,131,80) 10% 20%,rgb(130,138,101) 20% 30%,rgb(142,148,113) 30% 40%,rgb(146,150,114) 40% 50%,rgb(136,144,103) 50% 60%,rgb(116,130,88) 60% 70%,rgb(102,119,75) 70% 80%,rgb(104,118,71) 80% 90%,rgb(112,123,72) 90% 100%),linear-gradient(90deg, rgb(110,122,70) 10%,rgb(114,122,85) 10% 20%,rgb(126,129,106) 20% 30%,rgb(143,140,122) 30% 40%,rgb(151,147,128) 40% 50%,rgb(144,142,122) 50% 60%,rgb(123,126,107) 60% 70%,rgb(106,111,90) 70% 80%,rgb(108,109,83) 80% 90%,rgb(118,117,83) 90% 100%),linear-gradient(90deg, rgb(134,133,102) 10%,rgb(141,138,120) 10% 20%,rgb(155,150,144) 20% 30%,rgb(172,164,161) 30% 40%,rgb(179,173,168) 40% 50%,rgb(173,168,162) 50% 60%,rgb(156,151,146) 60% 70%,rgb(137,132,127) 70% 80%,rgb(127,124,110) 80% 90%,rgb(128,124,101) 90% 100%),linear-gradient(90deg, rgb(116,124,95) 10%,rgb(125,129,112) 10% 20%,rgb(143,141,135) 20% 30%,rgb(160,156,153) 30% 40%,rgb(169,164,160) 40% 50%,rgb(165,161,155) 50% 60%,rgb(148,145,141) 60% 70%,rgb(124,125,118) 70% 80%,rgb(107,110,97) 80% 90%,rgb(99,106,82) 90% 100%),linear-gradient(90deg, rgb(95,105,51) 10%,rgb(99,105,66) 10% 20%,rgb(110,111,88) 20% 30%,rgb(125,122,107) 30% 40%,rgb(136,131,115) 40% 50%,rgb(134,129,111) 50% 60%,rgb(120,116,98) 60% 70%,rgb(97,97,77) 70% 80%,rgb(78,84,51) 80% 90%,rgb(70,78,30) 90% 100%),linear-gradient(90deg, rgb(109,106,21) 10%,rgb(109,104,44) 10% 20%,rgb(112,104,67) 20% 30%,rgb(122,109,83) 30% 40%,rgb(131,114,88) 40% 50%,rgb(130,112,83) 50% 60%,rgb(119,103,70) 60% 70%,rgb(104,91,51) 70% 80%,rgb(93,84,34) 80% 90%,rgb(92,84,24) 90% 100%)",
  "backgroundPosition": "0 0 ,0 16.666666666666664%,0 33.33333333333333%,0 50%,0 66.66666666666666%,0 83.33333333333334%,0 100%",
  "backgroundSize": "100% 14.285714285714286%",
  "backgroundRepeat": "no-repeat",
  "filter": "blur(24px)",
  "transform": "scale(1.2)"
}

Integrate this conversion on build/upload time and you’re good to go 🙂

Installation per NPM:

npm install blurhash-to-css

blurhash-to-css
blurhash-to-css Demo Page →

SpaceX’s SN10 “Belly Flop” Composite

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:

Cool! 🚀

Formatting a 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 →