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