Link List

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.

Con­tent aware image resiz­ing, crop­ping, CDN, com­pres­sion, water­mark­ing and fil­ters. All web devel­op­ment best prac­tices, has­sle-free in one sim­ple and pow­er­ful API.

On writ­ing bet­ter doc­u­men­ta­tion.

Check and improve how search engines and social media web­sites see and dis­play your web­site.

I’m not a “[full-stack] devel­op­er”, regard­less of what my last job title says

A curat­ed col­lec­tion of Dev­Tools tips across major browsers.

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

The home­page of Babylon.js’ doc­u­men­ta­tion page. Start here and get to know the best 3D frame­work on the web.

Learn how to use CSS con­tain­er queries today.

Ani­cons is an exper­i­ment that com­bines two cut­ting-edge font tech­nolo­gies: vari­able fonts and col­or fonts.

Youtube embed code to min­i­mize data leak­age.

text-wrap: bal­ance ele­vates respon­sive design by auto-bal­anc­ing text lines. Learn its lim­i­ta­tions, brows­er sup­port, and meet its new sib­ling, text-wrap: pret­ty.

The Per­for­mance API is a set of stan­dards for mea­sur­ing and eval­u­at­ing per­for­mance met­rics with JavaScript. This arti­cle demon­strates how to use the Per­for­mance API to gen­er­ate per­for­mance met­rics direct­ly in the DOM to cre­ate your own report­ing.

Vel­vette is a library that allows you to spec­i­fy in a declar­a­tive way how your tran­si­tions should behave, in iso­la­tion or as a response to a nav­i­ga­tion, and then apply the dec­la­ra­tion to a par­tic­u­lar View­Tran­si­tion, Nav­i­ga­teEvent, or use it to han­dle cross-doc­u­ment (“MPA”) nav­i­ga­tions.

Acces­si­bil­i­ty arti­cle for devel­op­ers to bet­ter under­stand text-to-speech and screen read­ers.