Zach’s ugly mug (his face)

Zach Leatherman

Netlify’s Merry Band of 1 Million Developers

August 05, 2020

The launches at Netlify since I started 5 months ago have been fast and frequent. Here are a few of the major milestones I’ve been involved with during that time:

  1. A brand new netlify.com, with a new design and a new tech stack built on Eleventy and Vue. I built the tech stack for this project specifically and also worked on the new unified markup responsive Masthead and Footer and a bunch of new pages!
  2. An Eleventy wiki site for Netlify’s internal employee handbook, using Netlify CMS
  3. Speedlify, a side project originally built to measure performance and accessibility on our new Netlify sites.
  4. Additions to the Jamstack Conf site to support Jamstack Conf Virtual

1 Million Developers #

Our latest project launched just this week was a microsite to celebrate Netlify reaching 1 Million Developers. You can click through to look at Netlify’s major milestones and find your Netlify account number to see when you registered.

sarah_edo’s AvatarSarah Drasner already wrote an amazing blog post on CSS Tricks about the architecture of the front end.

I also wrote up a quick note earlier this week about bulk generating OG images that came out of this project.

A few more things I learned:

  • I worked on the backend for this site. When you click the log in to Netlify button, it uses OAuth to log in with your Netlify account. This was very easy to set up and anyone can make an application that authenticates with Netlify! I worked from this full demo example with excellent documentation and source code is available on Netlify Labs: OAuth Example created by davidwells’s AvatarDavid Wells.
  • The backend source code is private but it’s almost entirely the same as David’s example, but without the React parts. Having the backend code in a separate repo was useful as Sarah open sourced the front end repo later on. One more thing I wanted to mention about the backend was the scalability of Netlify functions. Really, I was impressed at what you could do in those things. The Netlify function reads a giant million-record JSON file every time someone logs in 😅 to find user numbers. Look—I know, y’all. It feels very wrong but it works flawlessly and is much lower friction than using a database.
  • This site and our netlify.com site are both using Vue components, so we were able to use the same hero Vue component in a homepage takeover! And the animations work too! We also use per-route JS bundles the GSAP library and the animation code were only added to one page, leaving the rest of our routes scripts unencumbered.
  • This was my first experience with Vuex, which didn’t get a ton of use here but I could definitely see the benefit! In related news, my colleague shortdiv’s AvatarDivya Tagtachian just released a Frontend Masters course: Vuex for Intermediate Vue.js Developers, check it out!

I hope y’all enjoyed the site! It was super fun to work on and I huge thank you to everyone at Netlify that made it possible: the entire marketing team including huguestennier’s AvatarHugues Tennier and Alejandro Alvarez (the artist behind the incredible illustrations!), Sarah Drasner for a huge portion of the dev work including the awesome and meticulous animation work, seldo’s AvatarLaurie Voss and futuregerald’s AvatarGerald O for invaluable consulting.

Zach’s ugly mug (his face)

Zach is a builder for the web with Netlify. He’s currently fixated on web fonts and static site generators. His public speaking résumé includes talks in eight different countries at events like Beyond Tellerrand, Smashing Conference, CSSConf, and The White House. He is an emeritus of Filament Group, NEJS CONF, and still helps out with NebraskaJS. Read more about Zach »

Previous
Cloudflare’s Creative Corner with the Netlify team
Next
Bulk Generating OG Images

1 Retweet

Matt Biilmann
11 Likes
Mark NadalRyan AmeriNaomi See 🌸🌻🌞🦠fabian wohlgemuth | digital creative.Mike AparicioTanner DolbyMatt BiilmannNick Taylor (he/him)Joel FalconerTorsten KnabeChris Burnell
2 Replies
  1. Zach Leatherman

    Zach Leatherman @zachleat #

    💯💯💯💯

  2. Mike Aparicio

    Mike Aparicio @peruvianidol #

    What a dream team over there @Netlify!

    Webmentions