Link List

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.

Ser­vices like S3 and R2 can be invalu­able when self-host­ing Plau­si­ble Ana­lyt­ics. Let’s walk through what it looks like to use them for auto­mat­ed back­ups a sim­ple cron job.

Down­load and self-host 1500 open-source fonts in neat­ly bun­dled NPM pack­ages. Access a com­pre­hen­sive library of web type­faces for free.

Free, open-source load­ing ani­ma­tions. Avail­able as copy/​paste HTML or drop-in web com­po­nents. Com­pat­i­ble with every mod­ern frame­work.

HTTP Secu­ri­ty Head­ers are essen­tial to any web­site. Learn about the HSTS head­er, Con­tent Secu­ri­ty Pol­i­cy head­er CSP, XSS pro­tec­tion, cache con­trol, strict trans­port secu­ri­ty, set-cook­ie head­er, and many more http head­ers in this com­pre­hen­sive guide with exam­ples and take your web­site secu­ri­ty head­er game to the next lev­el with Dark­re­lay.

This devel­op­er built their resume web­site using HTML, CSS, and Eleven­ty.

HTML Forms have pow­er­ful val­i­da­tion mech­a­nisms, but they are heav­i­ly under­used. In fact, not many peo­ple even know much about them. Is this because of some flaw in their design? Let’s explore.

Com­mand line tool for ​“Can I Use …” and MDN Brows­er Com­pat Data.

Unsec­tion is a web­site that offers inspi­ra­tion for var­i­ous web­site sec­tions. It is a good resource for find­ing the best web­site sec­tion for your web­site.

An exper­i­ment in javascript-free syn­tax high­light­ing, made pos­si­ble by open­type con­tex­tu­al alter­nates and COLR table

Tips for Keep­ing All Fron­tend Appli­ca­tions Secure

You should know that in-app brows­er can and do lit­er­al­ly inject JavaScript into the web­sites you vis­it with them with track­ing scripts from the app you’re inside of. And that’s just one thing that sucks about them.

A deep dive into the per­for­mance impli­ca­tions of using Google Fonts (good and bad) and whether self-host­ing is bet­ter.

An open source pay­ments switch writ­ten in Rust to make pay­ments fast, reli­able and afford­able — Pay­ments 101 for a Devel­op­er · juspay/​hyperswitch Wiki

Use gen­er­a­tive art for your place­hold­er images

A dash­board for quick assess­ment of HTML stan­dards across browsers.

The Popover API pro­vides devel­op­ers with a stan­dard, con­sis­tent, flex­i­ble mech­a­nism for dis­play­ing popover con­tent on top of oth­er page con­tent. Popover con­tent can be con­trolled either declar­a­tive­ly using HTML attrib­ut­es, or via JavaScript.

Michelle explains what build­ing a humane web means to her and how notions of per­fec­tion­ism can stand in the way of devel­op­ers build­ing it.