The making of Netlify's million devs animated website | Sarah Drasner

Netlify's microsite celebrating their millionth user is a brilliant experiment, so it's great to see them immediately posting a "making of" article on CSS Tricks. It's a beautifully rendered SVG illustration showing the service's history, popping in key milestones as you scroll. There are also some really nice-to-see features, such as the prominent animation toggle that is always visible, for those who may not enjoy the various movement effects.

Sarah covers all the various technologies that they used. I was surprised to see the entire site is a VueJS app comprised almost entirely of a single SVG element, with animations handled with GreenScok. Cool! Better yet, the article has a ton of advice on making SVGs as accessible as possible, including a video showing what it's like to browse with a screen reader. Really interesting to see their use of role="presentation" in particular.

I'm number 496,180 by the way. Quite surprised to be in the top 500,000!

Explore Other Notes

  • Netlify's microsite celebrating their millionth user is a brilliant experiment, so it's great to see them immediately posting a "making of" article on CSS Tricks. It's a beautifully rendered SVG […]
  • Murray Adcock.
Journal permalink

Made By Me, But Made Possible By:

CMS:

Build: Gatsby

Deployment: GitHub

Hosting: Netlify

Connect With Me:

Twitter Twitter

Instagram Instragram

500px 500px

GitHub GitHub

Keep Up To Date:

All Posts RSS feed.

Articles RSS feed.

Journal RSS feed.

Notes RSS feed.