Link List

Apply­ing a shad­ow to a sticky page head­er when scrolling using the Inter­sec­tion Observ­er API.

Next Gen­er­a­tion Fron­tend Tool­ing

Make changes to your web­site while brows­ing it with an open-source web­site tem­plate so you can build native­ly editable web­sites and appli­ca­tions.

The View Tran­si­tion API allows page tran­si­tions with­in sin­gle-page apps, and will lat­er include mul­ti-page apps.

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.

When try­ing to view a doc­u­ment in a File­Mak­er con­tain­er, I had to set a cook­ie first, as described in this GitHub issue.

Pythagore­an the­o­rem to the res­cue from the GSAP forums.

Demo of the ​‘goo’ fil­ter as shown in this video: https://​twit​ter​.com/​s​n​o​r​k​l​T​V​/​s​t​a​t​u​s​/​1​6​3​8​2​5​7​1​2​4​1​2​6​9​12522

This is a work­ing draft of a check­list to define a ​“gold stan­dard” for web com­po­nents that aspire to be as pre­dictable, flex­i­ble, reli­able, and use­ful as the stan­dard HTML ele­ments.

GitHub Code­spaces enables you to start cod­ing faster when cou­pled with dev con­tain­ers. Learn how to auto­mate a por­tion of your devel­op­ment envi­ron­ment by adding a dev con­tain­er to an open source project using GitHub Code­spaces.

The starter is built on top of Vite 4.x and pre­pared for writ­ing libraries in Type­Script. It gen­er­ates a hybrid pack­age — both sup­port for Com­mon­JS and ESM mod­ules.

Why vite is awe­some Before, when we devel­oped npm pack­ages, it involved A LOT of man­u­al… Tagged with npm, vite, type­script, javascript.

When your non-nerdy friends ask you to build a quick web­site: A free plat­form for build­ing sim­ple, ful­ly respon­sive one-page sites for pret­ty much any­thing.

An expla­na­tion of tem­plate, slot, and shad­ow.

Cre­ate dia­grams and visu­al­iza­tions using text and code.

SVG pro­vides a way to define how an ele­ment moves along a motion path. Paul Scan­lon shares how to use it by ani­mat­ing race cars in an infi­nite loop.

This file in the about­feeds repo will trans­form your raw-look­ing RSS feed into a styled doc­u­ment when users click on your feed icon. It will now include instruc­tions help­ing the user under­stand how to use feed icons across the web.

Quick­ly cal­cu­late any CSS selec­tor speci­fici­ty score along with expla­na­tions. With full sup­port for com­plex CSS selec­tors.

Adri­an Rosel­li shares an exam­ple of a respon­sive, acces­si­ble table along with a dis­cus­sion of the code and the deci­sions behind the code.

✨ Trigger.dev is an open-source plat­form that allows devel­op­ers to cre­ate event-dri­ven back­ground tasks direct­ly in their code.

Deploy Sta­t­ic, Node­JS, Svelte, React, Vue, Next, Nuxt, Astro, PHP, Rust, and more types of appli­ca­tions has­sle-free with auto­mat­ic reverse proxy and free SSL cer­tifi­cates.

A side-effect when show­ing scroll­bars on the web is that the lay­out of the con­tent might change depend­ing on the type of scroll­bar. The scroll­bar-gut­ter CSS prop­er­ty aims to give us devel­op­ers more con­trol over that. Works in Chrome and Fire­fox. No sup­port in Safari yet.

Did you miss Dot All in 2022 in Brook­lyn? Now you can catch up on the ses­sions you missed. You can’t replace meet­ing the peo­ple, unfor­tu­nate­ly.

Intro­duc­tion to Web Com­po­nents. This is a paid course, but check out the ​“get­ting start­ed” doc­u­men­ta­tion. It’s a good doc­u­ment all on its own and will teach you a lot about web com­po­nents.

Pri­va­cy-focused drop-in replace­ment for Google Fonts.

This tool will help you mas­ter mul­ti-hued, mul­ti-stops col­or scales. What is that? ​“While a (lin­ear) vari­a­tion in light­ness is the most impor­tant qual­i­ty of a sequen­tial col­or scale, vary­ing the hue can bring fur­ther sig­nif­i­cant improve­ments. Hue vari­a­tion pro­vides a bet­ter col­or con­trast and thus makes the col­ors eas­i­er to dif­fer­en­ti­ate.” — Learn more here.

Pull con­tent from any­where and serve it fast with Astro’s next-gen island archi­tec­ture. Astro is the web frame­work that you’ll enjoy using.

Excitable mus­ings about front-end devel­op­ment from Cassie Evans.

GetScreen­shot is a pow­er­ful pro­gram­ma­ble web­site screen­shot API that allows you to do screen­shot cap­ture oper­a­tions at scale, and for less than oth­er mar­ket solu­tions. No Code and Low Code Friend­ly.

CSS data visu­al­iza­tion frame­work