Link List

This GitHub repo describes Beast­ies, a fast, light­weight library for inlin­ing crit­i­cal CSS and lazy-load­ing the rest. It’s ide­al for prerendered/​SSR SPAs.

localspace is a JavaScript library uni­fy­ing Indexed­DB, local­Stor­age, and oth­er stor­age APIs into a con­sis­tent inter­face. It offers mod­ern, local­For­age-com­pat­i­ble stor­age with async/​await and Type­Script.

300 exam­ples for Motion (for­mer­ly Framer Motion). Full source code for React, JS, and Vue ani­ma­tions.

Hid­den and not-so-hid­den tools that will make your life eas­i­er.

Audio com­po­nent library

Fonts are one of the most vis­i­ble, most pow­er­ful parts of the web. And yet: almost every­one gets them wrong.

Fore­sightJS is a light­weight JavaScript library that pre­dicts user intent based on mouse move­ments and key­board nav­i­ga­tion, enabling opti­mal prefetch­ing tim­ing and improved per­for­mance.

Native CSS tran­si­tions have qui­et­ly killed the strongest argu­ment for client-side rout­ing. Yet peo­ple keep build­ing ter­ri­ble apps instead of per­for­mant web­sites.

Sim­ple cross-brows­er cook­ie-con­sent plu­g­in writ­ten in vanil­la js

It seems iron­ic that I’m even typ­ing this, but the very thing I’ve delib­er­ate­ly moved away from over the years — putting my face to my brand — has now become absolute­ly essen­tial. If Cre­ative Boom, or any inde­pen­dent pub­li­ca­tion, is going to sur­vive the next 12 months, we need to act fast. And I’m not being dra­mat­ic. AI is fun­da­men­tal­ly chang­ing how peo­ple access infor­ma­tion…

A web com­po­nent to add line num­bers next to var­i­ous HTML ele­ments — zach­leat/­line-num­bers

Test­ing ver­ti­cal met­rics typog­ra­phy across browsers.

Build blaz­ing-fast, reac­tive UIs in pure TypeScript/​JavaScript – no vir­tu­al DOM. Aberdeen offers a refresh­ing­ly sim­ple approach to reac­tive UIs.

A self-hostable per­son­al cloud inspired by server­less plat­forms and CGI-BIN. Small­web maps sub­do­mains to sub­fold­ers in your small­web direc­to­ry.

The can­vas ele­ment: part of an alpha­bet­i­cal run through every HTML ele­ment.

Cura­tor is a free for­ev­er social media aggre­ga­tor that helps you col­lect and dis­play con­tent. Set up your feed in under 5 min­utes.

Col­or is com­pli­cat­ed, but you can eas­i­ly learn the dif­fer­ence between a col­or mod­el, space, and gamut, and why they exist in the first place.

Cus­tom ele­ments (web com­po­nents) for mak­ing audio and video play­er con­trols that look great in your web­site or app. — mux­inc/­me­dia-chrome

Cre­ate a share­able pre­view link of your web­site that works out of the box with­out chang­ing your Hosts file. You can cre­ate a site with team mem­bers with­out hav­ing to merge the changes lat­er.

A fun CSS-only exper­i­men­ta­tion to cre­ate a jump­ing dot between radio inputs

How to add smooth tran­si­tions to lazy-loaded images with­out exter­nal libraries.

The search ele­ment rep­re­sents a doc­u­ment or appli­ca­tion con­tain­ing a set of form con­trols or oth­er con­tent relat­ed to per­form­ing a search or fil­ter­ing oper­a­tion. This could be a search of the web­site or appli­ca­tion, search­ing or fil­ter­ing search results on the cur­rent web page, or a glob­al or Inter­net-wide search func­tion.

Cre­ate har­mo­nious col­or pat­terns with Oklchro­ma, a pow­er­ful OKLCH-based col­or scale gen­er­a­tor for design­ers and devel­op­ers.

Fix CORS in DDEV devel­op­ment by adjust­ing vite.config.js.

Vig­i­lant is a tool for aggre­gat­ing appli­ca­tion logs. Use the SDK to send logs and view them in a dash­board.

Use the View Tran­si­tions API to cre­ate smooth ani­ma­tions between DOM states with min­i­mal CSS and JavaScript, replac­ing heavy ani­ma­tion libraries.

Gen­er­ate and cus­tomize CSS eas­ing func­tions with ease and mag­i­cal pre­ci­sion using Eas­ing Wiz­ard 🧙

One web page using every HTML ele­ment.

Back­ing up your data is crit­i­cal for effec­tive­ly any self-host­ed appli­ca­tion. Let’s explore how you can make it hap­pen for Plau­si­ble Ana­lyt­ics.