<!DOCTYPE html><html lang="en" data-astro-cid-ouamjn2i> <head><meta name="astro-view-transitions-enabled" content="true"><meta name="astro-view-transitions-fallback" content="animate"><script type="module" src="/_astro/ClientRouter.astro_astro_type_script_index_0_lang.CMTcOisY.js"></script><meta charset="utf-8"><link rel="icon" type="image/svg+xml" href="/favicon.svg"><link rel="alternate" type="application/rss+xml" href="/feed.xml" title="RSS Feed"><meta name="fediverse:creator" content="@zero_gravitas@indieweb.social"><meta name="viewport" content="width=device-width"><meta name="description" content="A personal hypertext of Bryan Schuetz. | The Distress Signal"><meta name="keywords" content=""><meta name="twitter:card" content="summary"><meta name="twitter:site" content="@Z3r0_Gravitas"><meta name="twitter:title" content="The Distress Signal"><meta name="twitter:creator" content="@Z3r0_Gravitas"><meta name="twitter:description"><meta property="twitter:image" content="https://signal-og-images.vercel.app/api/param?title=The Distress Signal"><meta property="twitter:image:alt"><meta property="og:description"><meta property="og:url" content=""><meta property="og:image" content="https://signal-og-images.vercel.app/api/param?title=The Distress Signal"><title>The Distress Signal</title><link rel="stylesheet" href="/_astro/_slug_.CzJH36lA.css">
<style>a[data-astro-cid-2fr46wkl]:hover{cursor:pointer}
</style><style>[data-astro-transition-scope="astro-r235kq4c-1"] { view-transition-name: leade; }@layer astro { ::view-transition-old(leade) { 
	animation-duration: 180ms;
	animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
	animation-fill-mode: both;
	animation-name: astroFadeOut; }::view-transition-new(leade) { 
	animation-duration: 180ms;
	animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
	animation-fill-mode: both;
	animation-name: astroFadeIn; }[data-astro-transition=back]::view-transition-old(leade) { 
	animation-duration: 180ms;
	animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
	animation-fill-mode: both;
	animation-name: astroFadeOut; }[data-astro-transition=back]::view-transition-new(leade) { 
	animation-duration: 180ms;
	animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
	animation-fill-mode: both;
	animation-name: astroFadeIn; } }[data-astro-transition-fallback="old"] [data-astro-transition-scope="astro-r235kq4c-1"],
			[data-astro-transition-fallback="old"][data-astro-transition-scope="astro-r235kq4c-1"] { 
	animation-duration: 180ms;
	animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
	animation-fill-mode: both;
	animation-name: astroFadeOut; }[data-astro-transition-fallback="new"] [data-astro-transition-scope="astro-r235kq4c-1"],
			[data-astro-transition-fallback="new"][data-astro-transition-scope="astro-r235kq4c-1"] { 
	animation-duration: 180ms;
	animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
	animation-fill-mode: both;
	animation-name: astroFadeIn; }[data-astro-transition=back][data-astro-transition-fallback="old"] [data-astro-transition-scope="astro-r235kq4c-1"],
			[data-astro-transition=back][data-astro-transition-fallback="old"][data-astro-transition-scope="astro-r235kq4c-1"] { 
	animation-duration: 180ms;
	animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
	animation-fill-mode: both;
	animation-name: astroFadeOut; }[data-astro-transition=back][data-astro-transition-fallback="new"] [data-astro-transition-scope="astro-r235kq4c-1"],
			[data-astro-transition=back][data-astro-transition-fallback="new"][data-astro-transition-scope="astro-r235kq4c-1"] { 
	animation-duration: 180ms;
	animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
	animation-fill-mode: both;
	animation-name: astroFadeIn; }</style></head><body data-astro-cid-ouamjn2i> <header class="bg-white" data-astro-cid-3ef6ksr2 data-astro-transition-persist="astro-l7r54iwe-2"> <nav class="mx-auto flex max-w-7xl items-center justify-between p-6 lg:px-8" aria-label="Global" data-astro-cid-3ef6ksr2> <div class="flex lg:flex-1" data-astro-cid-3ef6ksr2> <a href="/" class="-m-1.5 p-1.5" data-astro-cid-3ef6ksr2> <span class="sr-only" data-astro-cid-3ef6ksr2>Your Boy</span> <img class=" h-16 w-16 rounded-md" src="/avatar.webp" alt="The Author" data-astro-cid-3ef6ksr2> <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" fill="#1E86EB" color="white" stroke="currentColor" stroke-width="2" stroke-linecap="round" class="relative -top-4 left-[50px]" stroke-linejoin="round"><path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"></path><path d="m9 12 2 2 4-4"></path></svg> </a> </div> <div class="z-[11] flex self-start lg:hidden" data-astro-cid-3ef6ksr2></div> <div class="hidden lg:flex lg:gap-x-12" data-astro-cid-3ef6ksr2> <a href="/blog" class="plain text-sm font-semibold leading-6 text-gray-900"><svg xmlns="http://www.w3.org/2000/svg" stroke-width="2" width="24" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" fill="none" viewBox="0 0 24 24" class="inline mr-1 relative -top-[2px]">  <path d="M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path> <path d="M18.375 2.625a2.121 2.121 0 1 1 3 3L12 15l-4 1 1-4Z"></path>  </svg>Blog</a><a href="/#music" class="plain text-sm font-semibold leading-6 text-gray-900"><svg xmlns="http://www.w3.org/2000/svg" stroke-width="2" width="24" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" fill="none" viewBox="0 0 24 24" class="inline mr-1 relative -top-[2px]">  <path d="M9 18V5l12-2v13"></path> <path d="m9 9 12-2"></path> <circle cx="6" cy="18" r="3"></circle> <circle cx="18" cy="16" r="3"></circle>  </svg>Music</a><a href="https://github.com/bryanschuetz" class="plain text-sm font-semibold leading-6 text-gray-900"><svg xmlns="http://www.w3.org/2000/svg" stroke-width="2" width="24" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" fill="none" viewBox="0 0 24 24" class="inline mr-1 relative -top-[2px]">  <path d="M6 3v12"></path> <path d="M18 9a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"></path> <path d="M6 21a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"></path> <path d="M15 6a9 9 0 0 0-9 9"></path> <path d="M18 15v6"></path> <path d="M21 18h-6"></path>  </svg>Projects</a><a href="/uses" class="plain text-sm font-semibold leading-6 text-gray-900"><svg xmlns="http://www.w3.org/2000/svg" stroke-width="2" width="24" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" fill="none" viewBox="0 0 24 24" class="inline mr-1 relative -top-[2px]">  <path d="M3 2v1c0 1 2 1 2 2S3 6 3 7s2 1 2 2-2 1-2 2 2 1 2 2"></path> <path d="M18 6h.01"></path> <path d="M6 18h.01"></path> <path d="M20.83 8.83a4 4 0 0 0-5.66-5.66l-12 12a4 4 0 1 0 5.66 5.66Z"></path> <path d="M18 11.66V22a4 4 0 0 0 4-4V6"></path>  </svg>Uses</a><a href="/bookshelf" class="plain text-sm font-semibold leading-6 text-gray-900"><svg xmlns="http://www.w3.org/2000/svg" stroke-width="2" width="24" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" fill="none" viewBox="0 0 24 24" class="inline mr-1 relative -top-[2px]">  <rect width="8" height="18" x="3" y="3" rx="1"></rect> <path d="M7 3v18"></path> <path d="M20.4 18.9c.2.5-.1 1.1-.6 1.3l-1.9.7c-.5.2-1.1-.1-1.3-.6L11.1 5.1c-.2-.5.1-1.1.6-1.3l1.9-.7c.5-.2 1.1.1 1.3.6Z"></path>  </svg>Bookshelf</a> </div> <div class="hidden lg:flex lg:flex-1 lg:justify-end" data-astro-cid-3ef6ksr2> <a href="/nishiki-tall-boy" aria-label="Nishiki Tall Boy" class="text-sm font-semibold leading-6 text-SignalTeal" data-astro-cid-3ef6ksr2><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#007e90" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-bike" data-astro-cid-3ef6ksr2> <circle cx="18.5" cy="17.5" r="3.5" data-astro-cid-3ef6ksr2></circle> <circle cx="5.5" cy="17.5" r="3.5" data-astro-cid-3ef6ksr2></circle> <circle cx="15" cy="5" r="1" data-astro-cid-3ef6ksr2></circle> <path d="M12 17.5V14l-3-3 4-3 2 3h2" data-astro-cid-3ef6ksr2></path> </svg> <span aria-hidden="true" data-astro-cid-3ef6ksr2></span></a> </div> </nav> <!-- Mobile menu, show/hide based on menu open state. --> <div class="menubar lg:hidden" role="dialog" aria-modal="true" aria-label="menu" data-astro-cid-3ef6ksr2> <button aria-label="Menu Toggle" id="menu-toggle" class="absolute right-5 top-[1rem] z-50" data-astro-cid-3ef6ksr2> <svg class="ham ham6" viewBox="0 0 100 100" width="80" id="menu-toggle-svg" onclick="this.classList.toggle('active')" data-astro-cid-3ef6ksr2> <path class="line top" d="m 30,33 h 40 c 13.100415,0 14.380204,31.80258 6.899646,33.421777 -24.612039,5.327373 9.016154,-52.337577 -12.75751,-30.563913 l -28.284272,28.284272" data-astro-cid-3ef6ksr2></path> <path class="line middle" d="m 70,50 c 0,0 -32.213436,0 -40,0 -7.786564,0 -6.428571,-4.640244 -6.428571,-8.571429 0,-5.895471 6.073743,-11.783399 12.286435,-5.570707 6.212692,6.212692 28.284272,28.284272 28.284272,28.284272" data-astro-cid-3ef6ksr2></path> <path class="line bottom" d="m 69.575405,67.073826 h -40 c -13.100415,0 -14.380204,-31.80258 -6.899646,-33.421777 24.612039,-5.327373 -9.016154,52.337577 12.75751,30.563913 l 28.284272,-28.284272" data-astro-cid-3ef6ksr2></path> </svg> </button> <script type="module">function t(){const e=document.getElementById("menu"),n=document.getElementById("menu-background");e?.classList.toggle("invisible"),n?.classList.toggle("invisible")}document.getElementById("menu-toggle")?.addEventListener("click",t);</script> <!-- Background backdrop, show/hide based on slide-over state. --> <div id="menu-background" class="bg-SignalPink invisible fixed inset-0 z-40 transition-all" data-astro-cid-3ef6ksr2></div> <div id="menu" class="invisible fixed inset-y-0 right-0 z-40 w-full overflow-y-auto bg-white px-6 py-6 transition-all sm:max-w-sm sm:ring-1 sm:ring-gray-900/10" data-astro-cid-3ef6ksr2> <div class="flex items-center justify-between [@media(min-width:640px)]:hidden" data-astro-cid-3ef6ksr2> <a href="/" class="-m-1.5 p-1.5" data-astro-cid-3ef6ksr2> <span class="sr-only" data-astro-cid-3ef6ksr2>Your Boy</span> <img class="h-16 w-16 rounded-md" src="/avatar.webp" alt="Your Boy" data-astro-cid-3ef6ksr2> <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" fill="#1E86EB" color="white" stroke="currentColor" stroke-width="2" stroke-linecap="round" class="relative -top-4 left-[50px]" stroke-linejoin="round"><path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"></path><path d="m9 12 2 2 4-4"></path></svg> </a> </div> <div class="[@media(min-width:640px)]:mt-8" data-astro-cid-3ef6ksr2> <a href="/blog" class="plain -mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50" id="Blog"><svg xmlns="http://www.w3.org/2000/svg" stroke-width="2" width="24" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" fill="none" viewBox="0 0 24 24" class="inline mr-1 relative -top-[2px]">  <path d="M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path> <path d="M18.375 2.625a2.121 2.121 0 1 1 3 3L12 15l-4 1 1-4Z"></path>  </svg>Blog</a> <script type="module">function e(){const t=document.getElementById("menu"),n=document.getElementById("menu-background"),c=document.getElementById("menu-toggle-svg");t?.classList.toggle("invisible"),n?.classList.toggle("invisible"),c?.classList.toggle("active")}document.getElementById("Blog")?.addEventListener("click",e);document.getElementById("Bookshelf")?.addEventListener("click",e);document.getElementById("Uses")?.addEventListener("click",e);document.getElementById("Music")?.addEventListener("click",e);document.getElementById("menu-nishiki")?.addEventListener("click",e);</script><a href="/#music" class="plain -mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50" id="Music"><svg xmlns="http://www.w3.org/2000/svg" stroke-width="2" width="24" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" fill="none" viewBox="0 0 24 24" class="inline mr-1 relative -top-[2px]">  <path d="M9 18V5l12-2v13"></path> <path d="m9 9 12-2"></path> <circle cx="6" cy="18" r="3"></circle> <circle cx="18" cy="16" r="3"></circle>  </svg>Music</a> <a href="https://github.com/bryanschuetz" class="plain -mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50" id="Projects"><svg xmlns="http://www.w3.org/2000/svg" stroke-width="2" width="24" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" fill="none" viewBox="0 0 24 24" class="inline mr-1 relative -top-[2px]">  <path d="M6 3v12"></path> <path d="M18 9a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"></path> <path d="M6 21a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"></path> <path d="M15 6a9 9 0 0 0-9 9"></path> <path d="M18 15v6"></path> <path d="M21 18h-6"></path>  </svg>Projects</a> <a href="/uses" class="plain -mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50" id="Uses"><svg xmlns="http://www.w3.org/2000/svg" stroke-width="2" width="24" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" fill="none" viewBox="0 0 24 24" class="inline mr-1 relative -top-[2px]">  <path d="M3 2v1c0 1 2 1 2 2S3 6 3 7s2 1 2 2-2 1-2 2 2 1 2 2"></path> <path d="M18 6h.01"></path> <path d="M6 18h.01"></path> <path d="M20.83 8.83a4 4 0 0 0-5.66-5.66l-12 12a4 4 0 1 0 5.66 5.66Z"></path> <path d="M18 11.66V22a4 4 0 0 0 4-4V6"></path>  </svg>Uses</a> <a href="/bookshelf" class="plain -mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50" id="Bookshelf"><svg xmlns="http://www.w3.org/2000/svg" stroke-width="2" width="24" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" fill="none" viewBox="0 0 24 24" class="inline mr-1 relative -top-[2px]">  <rect width="8" height="18" x="3" y="3" rx="1"></rect> <path d="M7 3v18"></path> <path d="M20.4 18.9c.2.5-.1 1.1-.6 1.3l-1.9.7c-.5.2-1.1-.1-1.3-.6L11.1 5.1c-.2-.5.1-1.1.6-1.3l1.9-.7c.5-.2 1.1.1 1.3.6Z"></path>  </svg>Bookshelf</a>  </div> <div class="mt-6 flow-root" data-astro-cid-3ef6ksr2> <div class="-my-6 divide-y divide-gray-500/10" data-astro-cid-3ef6ksr2> <div class="space-y-2 py-6" data-astro-cid-3ef6ksr2></div> <div class="py-6" data-astro-cid-3ef6ksr2> <a id="menu-nishiki" href="/nishiki-tall-boy" aria-label="Nishiki Tall Boy" class="plain -mx-3 block rounded-lg px-3 py-2.5 text-base font-semibold leading-7 text-SignalTeal hover:bg-gray-50" data-astro-cid-3ef6ksr2><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#007e90" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-bike" data-astro-cid-3ef6ksr2> <circle cx="18.5" cy="17.5" r="3.5" data-astro-cid-3ef6ksr2></circle> <circle cx="5.5" cy="17.5" r="3.5" data-astro-cid-3ef6ksr2></circle> <circle cx="15" cy="5" r="1" data-astro-cid-3ef6ksr2></circle> <path d="M12 17.5V14l-3-3 4-3 2 3h2" data-astro-cid-3ef6ksr2></path></svg></a> </div> </div> </div> </div> </div> </header>   <div class="bg-white py-14"> <div class="mx-auto max-w-7xl px-6 lg:px-8"> <div class="mx-auto max-w-2xl lg:mx-0"> <p class="text-2xl md:text-3xl font-semibold leading-7 text-SignalPurp">The</p> <h1 class="mt-2 text-6xl font-bold tracking-tight text-SignalBlack md:text-8xl" data-astro-transition-scope="astro-r235kq4c-1">Distress Signal</h1> <p class="mt-6 text-lg leading-8 text-SignalBlack">A personal hypertext of <a class="featured" href="https://indieweb.social/@zero_gravitas" rel="me">Bryan Schuetz</a> | <a class="featured" href="/feed.xml">RSS</a></p> </div> </div> </div> <div class="bg-white py-14" data-astro-cid-2fr46wkl> <div class="mx-auto max-w-7xl px-6 lg:px-8" data-astro-cid-2fr46wkl> <p class="text-2xl max-w-2xl mx-auto lg:max-w-none md:text-3xl font-semibold leading-7 text-SignalPurp text-right" data-astro-cid-2fr46wkl>Jibber Jabber</p> <div class="mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 border-t border-gray-200 pt-10 sm:pt-16 lg:mx-0 lg:max-w-none lg:grid-cols-3" data-astro-cid-2fr46wkl> <article class="flex max-w-xl flex-col items-start justify-start" data-astro-cid-2fr46wkl> <div class="relative" data-astro-cid-2fr46wkl> <h2 class="my-3 text-2xl font-semibold leading-6 text-gray-900 group-hover:text-gray-600" data-astro-cid-2fr46wkl><a class="plain" href="/term-in-progress" data-astro-cid-2fr46wkl>Countdown</a></h2> <div class="mt-5 text-gray-600 prose" data-astro-cid-2fr46wkl> <p>Mostly, I feel like time is flowing way to fast—I just want to slow things down. There is one context though—where things couldn&#39;t go fast enough. So I built a little Raycast extension to show me this particular countdown whenever I toggle the window open.</p>
 </div> </div> <div class="flex items-center gap-x-4 text-xs" data-astro-cid-2fr46wkl> <time datetime="" class="text-gray-500" data-astro-cid-2fr46wkl>1 day ago</time> <a href="/categories/tooling" class="plain relative font-medium text-SignalRed" data-astro-cid-2fr46wkl>tooling</a> </div> </article><article class="flex max-w-xl flex-col items-start justify-start" data-astro-cid-2fr46wkl> <div class="relative" data-astro-cid-2fr46wkl> <h2 class="my-3 text-2xl font-semibold leading-6 text-gray-900 group-hover:text-gray-600" data-astro-cid-2fr46wkl><a class="plain" href="/this-machine-kills-fascists" data-astro-cid-2fr46wkl>This Machine Kills Fascists</a></h2> <div class="mt-5 text-gray-600 prose" data-astro-cid-2fr46wkl> <p>Finally got around to re-building my BauerLite 0 with Dynacap EC switches. Unlike traditional mechanical switches EC switches activate by detecting changes in electrical charge, or capacitance, without physical metal contact points. A true &#39;oneness with cup rubreh&#39; is the result.</p>
 </div> </div> <div class="flex items-center gap-x-4 text-xs" data-astro-cid-2fr46wkl> <time datetime="" class="text-gray-500" data-astro-cid-2fr46wkl>19 days ago</time> <a href="/categories/keyboards" class="plain relative font-medium text-SignalRed" data-astro-cid-2fr46wkl>keyboards</a> </div> </article><article class="flex max-w-xl flex-col items-start justify-start" data-astro-cid-2fr46wkl> <div class="relative" data-astro-cid-2fr46wkl> <h2 class="my-3 text-2xl font-semibold leading-6 text-gray-900 group-hover:text-gray-600" data-astro-cid-2fr46wkl><a class="plain" href="/going-subtle-with-zed" data-astro-cid-2fr46wkl>Going Subtle With Zed Predictions
</a></h2> <div class="mt-5 text-gray-600 prose" data-astro-cid-2fr46wkl> <p>People love to hate on generative AI, especially when it shows up where it wasn&#39;t before. Something like 60% of global venture capital is invested in AI—yes, AI Enshitification is real. So there&#39;s a lot of smoke there, but there&#39;s some fire. People who use text editors for writing code are right in the middle of that fire. This is fine.</p>
 </div> </div> <div class="flex items-center gap-x-4 text-xs" data-astro-cid-2fr46wkl> <time datetime="" class="text-gray-500" data-astro-cid-2fr46wkl>9 months ago</time> <a href="/categories/web-development" class="plain relative font-medium text-SignalRed" data-astro-cid-2fr46wkl>web-development</a> </div> </article> </div> </div> </div>  <div class="bg-white py-14" id="music"> <div class="mx-auto max-w-7xl px-6 lg:px-8"> <p class="text-2xl max-w-2xl mx-auto lg:max-w-none md:text-3xl font-semibold leading-7 text-SignalPurp text-left">Tunes</p> <div class="mx-auto grid max-w-2xl border-t border-gray-200 pt-4 lg:mx-0 lg:max-w-none "> <p class="text-sm mb-16 prose">Inspired by <a href="https://coryd.dev/posts/2023/displaying-listening-data-from-apple-music-using-musickit/">Cory Dransfeldt</a>—I've been playing around with <a href="https://developer.apple.com/documentation/musickitjs">MusicKit JS</a> to pull down data about what/how I listen to Music. This will probably change a bit as I have more time with the API—but for now, I've got a grid of recent frequently played albums. </p> <ul role="list" class="grid grid-cols-2 gap-x-4 gap-y-8 sm:grid-cols-3 sm:gap-x-6 lg:grid-cols-4 xl:gap-x-8"> <li class="relative"> <div class="group aspect-h-10 aspect-w-10 block w-full overflow-hidden rounded-lg bg-gray-100 focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100"> <img src="https://v1.opengraph.11ty.dev/https%3A%2F%2Fmusic.apple.com%2Fus%2Falbum%2Fkings-mouth-music-and-songs%2F1470140029/small/webp" alt="" class="pointer-events-none object-cover group-hover:opacity-75" loading="eager" decoding="async"> <a href="https://music.apple.com/us/album/kings-mouth-music-and-songs/1470140029" type="button" class="plain absolute inset-0 focus:outline-none album"> <span class="sr-only">The King&#39;s Mouth</span> </a> </div> <p class="pointer-events-none mt-2 block truncate text-sm font-medium text-gray-900">The King&#39;s Mouth</p> <p class="pointer-events-none block text-sm font-medium text-gray-500">The Flaming Lips</p> </li><li class="relative"> <div class="group aspect-h-10 aspect-w-10 block w-full overflow-hidden rounded-lg bg-gray-100 focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100"> <img src="https://v1.opengraph.11ty.dev/https%3A%2F%2Fmusic.apple.com%2Fus%2Falbum%2Fmorning-phase%2F797897966/small/webp" alt="" class="pointer-events-none object-cover group-hover:opacity-75" loading="eager" decoding="async"> <a href="https://music.apple.com/us/album/morning-phase/797897966" type="button" class="plain absolute inset-0 focus:outline-none album"> <span class="sr-only">Morning Phase</span> </a> </div> <p class="pointer-events-none mt-2 block truncate text-sm font-medium text-gray-900">Morning Phase</p> <p class="pointer-events-none block text-sm font-medium text-gray-500">Beck</p> </li><li class="relative"> <div class="group aspect-h-10 aspect-w-10 block w-full overflow-hidden rounded-lg bg-gray-100 focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100"> <img src="https://v1.opengraph.11ty.dev/https%3A%2F%2Fmusic.apple.com%2Fus%2Falbum%2F1774265646/small/webp" alt="" class="pointer-events-none object-cover group-hover:opacity-75" loading="eager" decoding="async"> <a href="https://music.apple.com/us/album/1774265646" type="button" class="plain absolute inset-0 focus:outline-none album"> <span class="sr-only">Run The Jewels 2</span> </a> </div> <p class="pointer-events-none mt-2 block truncate text-sm font-medium text-gray-900">Run The Jewels 2</p> <p class="pointer-events-none block text-sm font-medium text-gray-500">Run the Jewels</p> </li><li class="relative"> <div class="group aspect-h-10 aspect-w-10 block w-full overflow-hidden rounded-lg bg-gray-100 focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100"> <img src="https://v1.opengraph.11ty.dev/https%3A%2F%2Fmusic.apple.com%2Fus%2Fplaylist%2Fnorah-jones-essentials%2Fpl.f465577a2c9446478a9d5ab4f7c873ee/small/webp" alt="" class="pointer-events-none object-cover group-hover:opacity-75" loading="eager" decoding="async"> <a href="https://music.apple.com/us/playlist/norah-jones-essentials/pl.f465577a2c9446478a9d5ab4f7c873ee" type="button" class="plain absolute inset-0 focus:outline-none album"> <span class="sr-only">Essentials</span> </a> </div> <p class="pointer-events-none mt-2 block truncate text-sm font-medium text-gray-900">Essentials</p> <p class="pointer-events-none block text-sm font-medium text-gray-500">Norah Jones</p> </li><li class="relative"> <div class="group aspect-h-10 aspect-w-10 block w-full overflow-hidden rounded-lg bg-gray-100 focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100"> <img src="https://v1.opengraph.11ty.dev/https%3A%2F%2Fmusic.apple.com%2Fus%2Falbum%2F307793704/small/webp" alt="" class="pointer-events-none object-cover group-hover:opacity-75" loading="eager" decoding="async"> <a href="https://music.apple.com/us/album/307793704" type="button" class="plain absolute inset-0 focus:outline-none album"> <span class="sr-only">Grateful Dead go to Nassau. 5/15,16/80 (Nassau Coliseum, Uniondaly, NW)</span> </a> </div> <p class="pointer-events-none mt-2 block truncate text-sm font-medium text-gray-900">Grateful Dead go to Nassau. 5/15,16/80 (Nassau Coliseum, Uniondaly, NW)</p> <p class="pointer-events-none block text-sm font-medium text-gray-500">Grateful Dead</p> </li><li class="relative"> <div class="group aspect-h-10 aspect-w-10 block w-full overflow-hidden rounded-lg bg-gray-100 focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100"> <img src="https://v1.opengraph.11ty.dev/https%3A%2F%2Fmusic.apple.com%2Fus%2Falbum%2F6800009/small/webp" alt="" class="pointer-events-none object-cover group-hover:opacity-75" loading="eager" decoding="async"> <a href="https://music.apple.com/us/album/6800009" type="button" class="plain absolute inset-0 focus:outline-none album"> <span class="sr-only">The Pizza Tapes</span> </a> </div> <p class="pointer-events-none mt-2 block truncate text-sm font-medium text-gray-900">The Pizza Tapes</p> <p class="pointer-events-none block text-sm font-medium text-gray-500">Jerry Garcia, David Grisman &amp; Tony Rice</p> </li><li class="relative"> <div class="group aspect-h-10 aspect-w-10 block w-full overflow-hidden rounded-lg bg-gray-100 focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100"> <img src="https://v1.opengraph.11ty.dev/https%3A%2F%2Fmusic.apple.com%2Fus%2Falbum%2F1065975350/small/webp" alt="" class="pointer-events-none object-cover group-hover:opacity-75" loading="eager" decoding="async"> <a href="https://music.apple.com/us/album/1065975350" type="button" class="plain absolute inset-0 focus:outline-none album"> <span class="sr-only">Obscured By Clouds</span> </a> </div> <p class="pointer-events-none mt-2 block truncate text-sm font-medium text-gray-900">Obscured By Clouds</p> <p class="pointer-events-none block text-sm font-medium text-gray-500">The Pink Floyd</p> </li><li class="relative"> <div class="group aspect-h-10 aspect-w-10 block w-full overflow-hidden rounded-lg bg-gray-100 focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100"> <img src="https://v1.opengraph.11ty.dev/https%3A%2F%2Fmusic.apple.com%2Fus%2Falbum%2Flover%2F1468058165/small/webp" alt="" class="pointer-events-none object-cover group-hover:opacity-75" loading="eager" decoding="async"> <a href="https://music.apple.com/us/album/lover/1468058165" type="button" class="plain absolute inset-0 focus:outline-none album"> <span class="sr-only">Cruel Summer</span> </a> </div> <p class="pointer-events-none mt-2 block truncate text-sm font-medium text-gray-900">Cruel Summer</p> <p class="pointer-events-none block text-sm font-medium text-gray-500">Taylor Swift</p> </li> </ul> </div> </div> </div>  <footer class="bg-white pt-16"> <!-- Some hacky shit to throw a speedlify score on there. @todo build this as an actual astro component --> <script src="/js/speedlify-score.js"></script> <div class="bg-white shadow sm:rounded-lg mr-auto ml-auto max-w-xl mb-10"> <div class="px-4 py-5 sm:p-6 text-center"> <h3 class="text-base font-semibold leading-6 text-gray-900">Built With Astro <svg xmlns="http://www.w3.org/2000/svg" stroke-width="2" width="24" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" fill="none" viewBox="0 0 24 24" class="inline mr-1 relative -top-[2px]">  <path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z"></path> <path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z"></path> <path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0"></path> <path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5"></path>  </svg></h3> <div class="mt-2 max-w-xl text-sm text-gray-500"> <p>mode:static <svg xmlns="http://www.w3.org/2000/svg" stroke-width="2" width="24" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" fill="none" viewBox="0 0 24 24" class="inline h-5 w-5 mr-1 relative -top-[2px]">  <path d="m11 17 2 2a1 1 0 1 0 3-3"></path> <path d="m14 14 2.5 2.5a1 1 0 1 0 3-3l-3.88-3.88a3 3 0 0 0-4.24 0l-.88.88a1 1 0 1 1-3-3l2.81-2.81a5.79 5.79 0 0 1 7.06-.87l.47.28a2 2 0 0 0 1.42.25L21 4"></path> <path d="m21 3 1 11h-2"></path> <path d="M3 3 2 14l6.5 6.5a1 1 0 1 0 3-3"></path> <path d="M3 4h8"></path>  </svg> Cloudflare <svg xmlns="http://www.w3.org/2000/svg" stroke-width="2" width="24" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" fill="none" viewBox="0 0 24 24" class="inline h-5 w-5 mr-1 relative -top-[2px]">  <path d="m11 17 2 2a1 1 0 1 0 3-3"></path> <path d="m14 14 2.5 2.5a1 1 0 1 0 3-3l-3.88-3.88a3 3 0 0 0-4.24 0l-.88.88a1 1 0 1 1-3-3l2.81-2.81a5.79 5.79 0 0 1 7.06-.87l.47.28a2 2 0 0 0 1.42.25L21 4"></path> <path d="m21 3 1 11h-2"></path> <path d="M3 3 2 14l6.5 6.5a1 1 0 1 0 3-3"></path> <path d="M3 4h8"></path>  </svg> Tailwind <svg xmlns="http://www.w3.org/2000/svg" stroke-width="2" width="24" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" fill="none" viewBox="0 0 24 24" class="inline h-5 w-5 mr-1 relative -top-[2px]">  <path d="m11 17 2 2a1 1 0 1 0 3-3"></path> <path d="m14 14 2.5 2.5a1 1 0 1 0 3-3l-3.88-3.88a3 3 0 0 0-4.24 0l-.88.88a1 1 0 1 1-3-3l2.81-2.81a5.79 5.79 0 0 1 7.06-.87l.47.28a2 2 0 0 0 1.42.25L21 4"></path> <path d="m21 3 1 11h-2"></path> <path d="M3 3 2 14l6.5 6.5a1 1 0 1 0 3-3"></path> <path d="M3 4h8"></path>  </svg> astro:content</p> </div> <div class="mt-3 text-sm leading-6 flex justify-center items-center mb-2"> <speedlify-score speedlify-url="https://snazzy-bombolone-aaba7c.netlify.app/" hash="e3ed73ac"></speedlify-score></div> <a href="https://hyperdrive-speedometer.netlify.app/" class="font-semibold plain">
Rank on Hyperdrive <span aria-hidden="true"> &rarr;</span> </a> </div> </div> <div class="mx-auto max-w-7xl px-6 py-12 md:flex md:items-center md:justify-between lg:px-8"> <div class="flex justify-center space-x-6 md:order-2"> <p class="text-center text-xs leading-5 text-SignalBlack">Made in the <span class="font-bold">Douglass Commonwealth</span>.</p> <svg fill="#282A36" viewBox="0 -8 72 72" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" class="w-10 h-10 relative -top-[14px]"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><title>dc-flag</title><polygon points="19.34 7.13 20.57 10.99 24.6 10.98 21.34 13.35 22.6 17.21 19.34 14.83 16.07 17.21 17.32 13.38 14.07 11.01 18.07 11.01 19.34 7.13"></polygon><polygon points="36 7.13 37.24 10.99 41.26 10.98 38 13.35 39.26 17.21 36 14.83 32.74 17.21 33.98 13.38 30.74 11.01 34.74 11.01 36 7.13"></polygon><polygon points="52.74 7.13 53.98 10.99 58.01 10.98 54.74 13.35 56.01 17.21 52.74 14.83 49.48 17.21 50.72 13.38 47.48 11.01 51.48 11.01 52.74 7.13"></polygon><rect x="8.22" y="21" width="55.56" height="11.2"></rect><rect x="8.22" y="37.67" width="55.56" height="11.2"></rect></g></svg> </div> <div class="mt-8 md:order-1 md:mt-0"> <p class="text-center text-xs leading-5 text-gray-500">&copy;  Post hoc, ergo propter hoc.</p> </div> </div> </footer> </body></html>