russellgoldenberg/scrollama: Scrollytelling with IntersectionObserver.

This looks like a handy JavaScript library for scroll-based events. But “scrollytelling?” No. Just …no.

russellgoldenberg/scrollama: Scrollytelling with IntersectionObserver.

Tagged with

Related links

Offloading JavaScript With Custom Properties: HeydonWorks

With classes, we can send CSS static values but with custom properties we can send dynamic ones, which is a major shift in the way we can style state. This is something that has been true for some time—and is extremely well supported—but sometimes it takes solving a small real-world problem to make you appreciate the value of it.

I think we still haven’t come to fully appreciate the superpower of custom properties: dynamic values that are shared between CSS and JavaScript.

Tagged with

htmx - high power tools for html

I really like the progressive enhancement approach that this little library uses—it’s basically the Hijax approach I was talking about back in the days of Bulletproof Ajax but all wrapped up into a neat package that you can use entirely via HTML attributes.

Tagged with

Van11y: Accessibility and Vanilla JavaScript - ES2015

Van11y (for Vanilla-Accessibility) is a collection of accessible scripts for rich interfaces elements, built using progressive enhancement and customisable.

Tagged with

An Introduction To Stimulus.js — Smashing Magazine

An intro to Stimulus, the lightweight JavaScript library from Basecamp that takes a progressive enhancement approach, as seen with HEY.

One aspect I really like about the approach Stimulus encourages, is I can focus on sending HTML down the wire to my users, which is then jazzed up a little with JavaScript.

I’ve always been a fan of using the first few milliseconds of a user’s attention getting what I have to share with them — in front of them. Then worrying setting up the interaction layer while the user can start processing what they’re seeing.

Furthermore, if the JavaScript were to fail for whatever reason, the user can still see the content and interact with it without JavaScript.

Tagged with

A Guide to Handling Browser Events by Sarah Chima - Front-End Developer

This is a great step-by-step explanation of event handling in JavaScript!

Tagged with

Related posts

event.target.closest

DOM scripting and event handling.

Saving forms

A defensive enhancement to avoid losing everything you just typed into a textarea.

Service workers in Samsung Internet browser

Samsung Internet browser doesn’t yet support asynchronous `waitUntil`, but that’s okay.

Sticky headers

A few things to remember if you’re going to using position:fixed.

Making the website for Research By The Sea

Having fun with view transitions and scroll-driven animations.