Link List

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.

Can Low-Qual­i­ty Image Place­hold­ers and LCP play nice­ly togeth­er? Web Per­for­mance.

If your site uses third-par­ty cook­ies it’s time to take action as we approach their dep­re­ca­tion. Chrome plans to dis­able third-par­ty cook­ies for 1% of users from Q1 2024 to facil­i­tate test­ing and then ramp up to 100% of users from Q3 2024. In this Cook­ie Count­down series, we’ll guide you through the time­line and imme­di­ate actions you can take to ensure your sites are pre­pared.

Used in demos as a way to fake a Safari-esque web brows­er win­dow. — zach­leat/brows­er-win­dow: Used in demos as a way to fake a Safari-esque web brows­er win­dow.

If we’re build­ing things that we want to work in five or ten or even 20 years, we need to avoid depen­den­cies and use the web with no lay­ers in between.

The open source Zapi­er alter­na­tive. Build work­flow automa­tion with­out spend­ing time and mon­ey.

Your friend­liest open-source automa­tion tool. Work­flow automa­tion tool / Enter­prise automa­tion tool / Busi­ness automa­tion tool / Zapi­er Alter­na­tive

Who will design the next gen­er­a­tion of read­able, writer­ly web lay­outs? Who will design them? Lay­outs for sites that are most­ly writ­ing. Designed by peo­ple who love writ­ing. Where text can be engag­ing even if it isn’t off­set by art or pho­tog­ra­phy. Where text is the point. With well-con­sid­ered flex­i­ble type­set­ting, mod­u­lar scal­ing, and read­able mea­sures across a full range…

Devel­op­ers and Open Source authors now have a mas­sive amount of ser­vices offer­ing free tiers, but it can be hard to find them all to make informed deci­sions.

A faster youtube embed. Con­tribute to paulirish/lite-youtube-embed devel­op­ment by cre­at­ing an account on GitHub.

Bun is sta­ble and ready for pro­duc­tion.

Tram-Lite is a lite javascript and HTML library that helps devel­op­ers build native web com­po­nents and makes build­ing sim­ple native web appli­ca­tions eas­i­er and more ele­gant.

A light­weight emo­ji pick­er web com­po­nent for the mod­ern web.

Enter an SVG path data (the string inside the d attribute) to visu­al­ize it and dis­cov­er all its dif­fer­ent com­mands.

Encode SVGs eas­i­ly to more eas­i­ly style them with CSS and JS.

Exten­sion for Visu­al Stu­dio Code — Dis­play import/​require pack­age size in the edi­tor

The era of cus­tom ele­ments SSR is upon us. Let’s take a look at how to spin up a sim­ple Node serv­er and use cus­tom ele­ments as tem­plates in three pop­u­lar for­mats, and what this means for the future of web com­po­nents.

Learn how to migrate a fron­tend app from Web­pack to Vite, includ­ing why you should do it, and how to install Vite and update plu­g­ins.

A curat­ed list of snip­pets to get Web Per­for­mance met­rics to use in the brows­er con­sole or as snip­pets on Chrome Dev­Tools.