Link List

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.

Matter.js is 2D rigid body JavaScript physics engine for the web

Beau­ti­ful­ly designed com­po­nents that you can copy and paste into your apps. Acces­si­ble. Cus­tomiz­able. Open Source.

A replace­ment for set­Inter­val() and set­Time­out() which works in unfo­cused win­dows. — chrisgut­tand­in/­work­er-timers: A replace­ment for set­Inter­val() and set­Time­out() which works in unfo­cused win­dows.

With :has() land­ing in Chromi­um 105. Let’s take a look at some of the awe­some oppor­tu­ni­ties it brings to our CSS!

A web com­po­nent for a bet­ter select tag. Con­tribute to siit-dev/­bet­ter-select devel­op­ment by cre­at­ing an account on GitHub.

Sim­ple CSS scroll­bar edi­tor.

A mod­ern, light weight con­tent slid­er . Con­tribute to p‑m-p/s­lid­er devel­op­ment by cre­at­ing an account on GitHub.

Nitro is an open source Type­Script frame­work to build ultra-fast web servers. The open engine pow­er­ing Nuxt and open to every­one.

Cre­ate mouse trails using his min­i­mal WebGL frame­work OGL. Water effect.

Audit URLs using Light­house and test per­for­mance with Light­house CI

A col­lec­tion of bad prac­tices in HTML, copied from real web­sites.

Explore the time­line of mile­stones in the his­to­ry of web design from 1990 to the present day.

CSS is under­go­ing a ​“qui­et renais­sance,” incor­po­rat­ing many sig­nif­i­cant fea­tures that pre­vi­ous­ly required exter­nal tools into the native parts of the lan­guage.

This course is designed for those new to web per­for­mance, a vital aspect of the user expe­ri­ence. It cov­ers key web per­for­mance con­cepts and tech­niques for improv­ing per­for­mance.

Last week, Jere­my Kei­th wrote about what he calls HTML Web Com­po­nents. Some peo­ple treat Web Com­po­nents like JS library com­po­nents, where every­thing is ren­dered with JavaScript.

Sys­tem font stack CSS orga­nized by type­face clas­si­fi­ca­tion for every mod­ern OS. The fastest fonts avail­able. No down­load­ing, no lay­out shifts, no flash­es — just instant ren­ders.

A col­lec­tion of bad prac­tices in HTML, copied from real web­sites.

Gen­er­ate fake avatars to fill your sam­ple appli­ca­tion.

Adding noise tex­ture with only code to SVG.