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.


< Newer
Cloudflare’s Creative Corner with the Netlify team
Older >
Bulk Generating OG Images

Zach Leatherman IndieWeb Avatar for https://zachleat.com/is a builder for the web at IndieWeb Avatar for https://fontawesome.com/Font Awesome and the creator/maintainer of IndieWeb Avatar for https://www.11ty.devEleventy (11ty), an award-winning open source site generator. At one point he became entirely too fixated on web fonts. He has given 84 talks in nine different countries at events like Beyond Tellerrand, Smashing Conference, Jamstack Conf, CSSConf, and The White House. Formerly part of CloudCannon, Netlify, Filament Group, NEJS CONF, and NebraskaJS. Learn more about Zach »

1 Repost

Matt Biilmann

11 Likes

Chris BurnellMark NadalRyan AmeriNaomi See 🌸🌻🌞🦠fabian wohlgemuth | digital creative.Mike AparicioTanner DolbyMatt BiilmannNick Taylor (he/him)Joel FalconerTorsten Knabe
2 Comments
  1. Mike Aparicio

    What a dream team over there @Netlify!

  2. Zach Leatherman

    💯💯💯💯

Shamelessly plug your related post

These are webmentions via the IndieWeb and webmention.io.

Sharing on social media?

This is what will show up when you share this post on Social Media:

How did you do this? I automated my Open Graph images. (Peer behind the curtain at the test page)