Link List

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.

The email mar­ket­ing glos­sary you always want­ed. Look up those pesky, con­fus­ing acronyms and make your life eas­i­er with this handy guide.

A col­lec­tion of resources that intro­duces the APIs and high­lights com­mon prob­lems regard­ing HTML DOM manip­u­la­tion.

The OWASP Top 10 is the ref­er­ence stan­dard for the most crit­i­cal web appli­ca­tion secu­ri­ty risks. Adopt­ing the OWASP Top 10 is per­haps the most effec­tive first step towards chang­ing your soft­ware devel­op­ment cul­ture focused on pro­duc­ing secure code.

Web com­po­nents can dra­mat­i­cal­ly loosen the cou­pling of JavaScript frame­works. To prove it, we’re going to do some­thing kin­da crazy: build an app where every sin­gle com­po­nent is writ­ten in a dif­fer­ent JavaScript frame­work.

A small gist with Javascript to try to pre­vent iframe embed­ding of your con­tent.

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.

Web­site with the col­lec­tion of all the cheat sheets of the project.

A visu­al & inter­ac­tive SVG ref­er­ence. Quick­ly look up how to define SVG shapes, trans­forms, masks, pat­terns, gra­di­ents, text and more.

Gen­er­ate seam­less, unique, roy­al­ty-free pat­terns to use for free in any project. Export as SVG, JPEG, or PNG.