Drop #161 (2022-12-20): Twelve Days of [Quick] Drops • Day 09

Why/Why/When of Scrollytelling; Svelte v1; Scrollama v3; Scrollytelling for Observable; + Tiny Games

Dec 20, 2022

On The Ninth Day Of Quick Drops 🎅🏽hrbrmstr🎅🏽 Gave To Me…

🎶 Tiny Games & Scrollytelling 🎶

(If this is your first Xmas Quick Drop, head back to Day 01 to find out what's going on.)

For the past couple of years, I've made a weaksauce resolution to learn one of the scrollytelling frameworks and re-start some long-form content.

This will not be repeated in 2023.

Said renewed motivation comes from Lucas Waldron's (@lucaswaldron@newsie.social) scrollytelling contribution to this recent ProPublica article . It hammered home that the more complex components need only be part of the whole story (I tend to get so focused on the datavis elements that I forget about the broader content I'm hoping to convey).

You have some — likely, many — stories that need/deserve telling, too, and are 100% able to combine your prose with some slight JS swagger to show them to the 🌎.

So, we start with some posts that help answer the "What", "Why", and "When" q's regarding scrollytelling (and some examples) then move into the "How" (the "Where" is 100% up to you!).

Why/Why/When of Scrollytelling (ST)

black flat screen tv turned on at the living room — Photo by Etienne Girardet on Unsplash

Jeff Cardello of Vev has a post on when to use ST and many examples of good ST
Russell Samora of The Pudding has one on ST best practices and some older links to frameworks
At Elementor, Orlee Gillis provides some guidance on turning your longform thoughts into ST stories
Refind does a 2022 "best of" retro on ST articles
And, Flourish provides many examples to work from

Svelte Turns 1

cupcake with candle — Photo by Isabella and Zsa Fischer on Unsplash

We covered Threlte in a recent drop:

hrbrmstr's Daily Drop

Drop #144 (2022-11-28): Next-Level JavaScript & CSS

I trust readers in the Colonies have successfully recovered from their annual attempt at tryptophan overdosing, and that the rest of you are gargling with some warm salt water, daily, to ensure you can still yell “GOOOOAAALLLL!!!” (or some profanity) at whatever glowing rectangles you're viewing ⚽️ on without rupturing your vocal cords…

6 months ago · boB Rudis

And, the framework it is built on just turned one! This makes for the best time to dig into both.

Scrollama v3

brown wooden rolling pin on white textile — Photo by Taylor Flowe on Unsplash

I mentioned Lucas Waldron/ProPublica in the intro and they used Scrollama for the vis part of that scrollytelling piece. It is a very accessible framework that supports vanilla JS.

Scrollytelling for Observable

silver tower viewer — Photo by Jp Valery on Unsplash

By now, it's no secret that I 💙 Observable, and Paul Buffa has a small notebook that shows how to get'er done over there.

FIN

Tiny games can be pretty cool, and LoveByte's Tiny Code Christmas presents 12 days of challenges focused on coding mini-games for TIC-80 and PICO-8 "fantasy consoles/computer". These can also be novel ways to tell stories.

Via PICO-8's site:

A fantasy console is like a regular console, but without the inconvenience of actual hardware. They have everything else that makes a console a console: machine specifications and display format, development tools, design culture, distribution platform, community and playership. It is similar to a retro game emulator, but for a machine that never existed.

☮