Link List

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.

Async await wrap­per for easy error han­dling with­out try-catch — scop­sy/await-to-js: Async await wrap­per for easy error han­dling with­out try-catch

Email clients have quirks that force you to use

A cheat sheet for learn­ing the basics of Lit, the JavaScript library for build­ing web com­po­nents.

Uptime Kuma is an easy-to-use self-host­ed mon­i­tor­ing tool.

What’s bet­ter than Uptime Robot? A pro­gram that does the same thing, with­out lim­i­ta­tions, you can host your­self, and is ful­ly Open Source. Name­ly, Uptime Kum…

A plea for us to get back to build­ing web­sites that can do nor­mal web­site things.

Nico­las Hoizey’s links page.

Open Web Com­po­nents pro­vides a set of defaults, rec­om­men­da­tions and tools to help facil­i­tate your Web Com­po­nent.

I’ve been using Plau­si­ble Ana­lyt­ics on this web­site for a few months now and I’m a fan for three key rea­sons. They’re open source They explic­it­ly detail how they track web traf­fic in …

Gen­er­ate lin­ear­ly scale font-size with clamp()

Ion­ic Frame­work is an open-source UI toolk­it to cre­ate your own mobile apps using web tech­nolo­gies with inte­gra­tions for pop­u­lar frame­works.

An in-depth look at the decod­ing attribute and how it affects web per­for­mance dif­fer­ent­ly when using sync, async or not at all

A for­ward-think­ing library of web com­po­nents.

Head­less UI for build­ing pow­er­ful tables & data­grids with TS/JS, React, Sol­id, Svelte and Vue

Unstyled, ful­ly acces­si­ble UI com­po­nents

An inter­ac­tive guide to under­stand­ing SVG paths and path com­mands.

JavaScript ani­ma­tion engine. Con­tribute to juliangarnier/​animé devel­op­ment by cre­at­ing an account on GitHub.

Cre­ate ful­ly respon­sive shape dividers for your next web project.

What if I will tell you how we could solve fit-to-width text with pure CSS with­out any hard­cod­ed para­me­ters? Curi­ous­ly, scroll-dri­ven ani­ma­tions will allow us to do just that! Join me as I con­tin­ue explor­ing the exper­i­men­tal imple­men­ta­tions of the lat­est specs.

A bunch of demos and tools to show off Scroll-dri­ven Ani­ma­tions

Fast 3kB alter­na­tive to React with the same mod­ern API.

This tool con­verts any TTF, OTF, WOFF, WOFF2 or SVG fonts to css @font-face for­mats with CSS and HTML sam­ple files.

A foun­da­tion­al overview of how to build col­or-adap­tive, respon­sive, and acces­si­ble mini and mega modals with the

?Van­JS (Vanil­la JavaScript): World’s small­est reac­tive UI frame­work

Learn how to build tooltips, menus, and more with the new popover API.

Spurred by last week’s ShopTalk I rolled out View Tran­si­tions here on my sta­t­ic Jekyll site. I hadn’t real­ized View Tran­si­tions for mul­ti-page apps (MPAs) and sta­t­ic sites are ready for test­ing behind a flag in Chrome 113 . View Tran­si­tions for MPAs are a fea­ture that’s high on my CSS wish­list, so I got to it. It took less than an hour to do, requires zero JavaScript, and two lines of CSS. I’m pleased with the results.