Link List

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

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.

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

Tuto­r­i­al on how to imple­ment user reg­is­tra­tion, login and CRUD func­tion­al­i­ty with Vue 3 and Pinia. Includes live demo and exam­ple back-end APIs built with Node.js and .NET.

Cre­at­ing a sin­gle NPM mod­ule that works in all envi­ron­ments.

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.

Sim­ple. Fast. Web Com­po­nents.

CLI that ana­lyzes web com­po­nents. Lat­est ver­sion: 2.0.0‑next.4, last pub­lished: a year ago. Start using web-com­po­nent-ana­lyz­er in your project by run­ning npm i web-component-analyzer. There are 26 oth­er projects in the npm reg­istry using web-com­po­nent-ana­lyz­er.

A com­piled-away, type-safe, read­able Reg­Exp alter­na­tive

More than once I’ve writ­ten some snazzy JavaScript code that I want to quick­ly turn into a sharable library, but the process of how to eas­i­ly do that has bogged me down enough to drop the idea entire­ly. Here’s a look at using vite to quick­ly pub­lish your code as a JavaScript Library.

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

The com­plete guide to devel­op­ing and deploy­ing fast, pro­duc­tion-ready Nuxt apps. Mas­ter­ingNuxt is the biggest and most in-depth, fun, and real­is­tic course ever made on Nuxt.js.

A col­lec­tion of Code­pens for 2022 select­ed by the GSAP team.

OWASP Top 10 mod­ule that adds a few secu­ri­ty improve­ments in form of a cus­tomiz­able serv­er mid­dle­wares to your Nuxt appli­ca­tion. All mid­dle­wares can be mod­i­fied or dis­abled if need­ed. They can also be con­fig­ured to work only on cer­tain routes. By default all mid­dle­wares are con­fig­ured to work glob­al­ly.

Adam Argyle has a post on using the View Tran­si­tion API, which is still a canary fea­ture now, to pow­er text tran­si­tion with CSS.

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.

The Spell­cast­er, a WebGL expe­ri­ence using Three.js

ArrowJS is an exper­i­men­tal tool for reac­tive pro­gram­ming inter­faces using native JavaScript. It’s not real­ly a frame­work, but not less pow­er­ful than a frame­work either. At its core — ArrowJS is an admis­sion that while we devel­op­ers were falling in love with UI frame­works — JavaScript itself got good, real­ly good.

Cre­ate book­marklets in your brows­er with a sim­ple copy and paste. This web app helped me quick­ly iter­ate on the book­marklet I made for sav­ing links on SuperGeek​ery​.com.