Cloudflare's Creative Corner: Featuring special guests from the Netlify team

All right, and we are live Hello everyone. My name is Jess Rosenberg and welcome back to the creative corner We are joined here today By our friends from Netlify. So we have Zach Leatherman and Lauren Sell and I'm super excited to be Discussing the launch of their 1 millionth dev landing page, which I came across a couple weeks ago I think on my Twitter feed. I saw it. I was like, oh, this is really cool This is something that we do at Cloudflare and then I dug into it a little bit more and I realized just how cool it was considering all the Illustrations are animated with code with SVG. They read the whole CSS tricks article that Sarah had written and mind-blown emoji appeared um So I'd love to get chatting with you y'all about the project and how it came about Dylan is also here with me my co-host Um, and maybe we can start with some intros Dylan you want to kick it off? Sure thing. Um So my name is Dylan and I am the creative operations manager for the brand design team here at Cloudflare Oh, sorry, go ahead I'm Lauren Sell from uh from Netlify VP of Marcom. So, uh run a lot of the marketing team and then my History before Netlify I joined about a year ago But before that was really focused in open source and communities and ecosystems So that's something i'm i'm super interested in from a marketing perspective Hey, yeah, i'm Zach Leatherman, uh senior web developer at Netlify for on the marketing team um also the creator of the Levendy a static site generator, so I'll plug that real quick Welcome i'm Jess. I lead the creative and brand design team at Cloudflare And yeah, again, we're really excited to have you With us. Um, I guess we can kick it off with um, tell us a little bit more about the Netlify 1 millionth developer landing page how it came about You know, maybe what the strategy was how you got by all the logistical fun questions Yeah well, maybe I can also just start off briefly with um, what Netlify is which is um, It's a web development platform. It's about it launched about five years ago uh, and it's really integrating a lot of modern tools like Git and static site generators and lambda serverless functions and providing one workflow for developers to build and deploy sites so in the last five years we have Onboarded a million developers, which is you know, a really big milestone for a company. Um, And just in terms of where this started, I think it was about the march time frame this year Folks started realizing as we you know, we watch the signup numbers every month and we see where we're pacing um and realize that we were going to hit that 1 million mark, so um, a lot of folks were very Motivated to think of some big ideas around this so we we really kicked off that brainstorm I would say earlier this year and just thought about how we could how we could really thank our community um, help them feel involved in that celebration and then also, um, You know be able to make make some noise around it Cool So So I guess I can continue on about about what we we put together But it sounds like because of that it was a pretty easy concept to sell through like, you know, you didn't really have to Um convince anyone that this was a great idea to go and execute on it was pretty unanimous in the sense of getting by Yeah, I I would definitely say so. Um, the founders were involved pretty early and and definitely Keen to support the project. So The buy-in part was was pretty easy. Um After we had the kickoffs, you know, like everyone we have slack channels So we had a public slack channel for the project and people could come and and weigh in and see some of the progress um at the beginning we came up with the idea of Again, we're wanting to celebrate the developers. So really like the framing around. Thanks a million Versus that feeling like, you know, it's coming from a showing off place. It's more of an appreciation of the community And we wanted them to feel Involved because a lot of the developers in this community have helped make the recommendations that have spurred what features we've Added to the platform over time So being able to reflect on all these different milestones over the five years and understand, you know where when they got involved maybe when they got started with netlify or Some of the features they might have um, they might have influenced So the idea was you know this this core idea of being able to look up when you joined and kind of what number because there's always a you know an ongoing uh Idea in tech that you like to be early on to new technologies and you like to be able to talk about that So we had a feeling that would that would definitely be viral and then um the timeline concept for this microsite and this was one of sarah drazner's Um early visions she was like I imagine it like the candyland board where you know It's a little bit whimsical and you're traveling through this over time So that was kind of the the early concept that we played with to to put together the design Very cool. Yeah, I definitely see that like candyland aspect come through. It's funny Yeah Yeah Well During that initial, uh, you know brainstorming process looking through the milestones, you know, they all seem to link out to What appears to be that news and announcements blog post with some really nice illustrations Did that initially did this project initially stem from something simple and straightforward And then somebody said, you know what we can up level this and we can really take it to the next level or did you approach it from the standpoint of we we're going to develop this as A truly unique and visual and brand centric experience Definitely the latter um from the from the get-go, I mean Part of it is we're celebrating the community and we're celebrating the milestone but it's also an opportunity for our team to do something a little fun and creative and Have a little permission to stray from our you know, core brand design system and and think about this campaign. So um As sarah told the designer on our team who worked on this his name is alejandro alvarez and she told him to go wild And come up with some some really fun ideas that she could animate. She wanted a challenge. So, um We definitely leaned into that from the beginning That's awesome Would you be able to talk a little bit? um around the collaboration of you know, the front end dev meets the creative aspect of it meets execution, how did that Collaborate that collaboration look like? Um, and how did you all work together to make this a success? I think alejandro worked on the designs. He made a bunch of the different milestone vector illustrations and I believe he created those in figma and passed them off to to sarah who started the Development work, um put it all up on github. That's actually open source right now So anybody can go out and check it out Um, I don't know if we've said the url for the site yet, but it's million-devs .netlify.com And there's a little github link to the source code in the top right yeah If you don't mind sharing your screen, that'd be great Sure, let's do it cool All right, can you all see that the obligatory can you all see that Yeah All right, so yeah, this is the site million -devs.netlify.com And when you first bring it up it does this nice little animation and so we actually have scroll triggers On all of these different milestones. So when you scroll to them Uh, they all pop in and sort of animate as you scroll down on this on the site Which is really really really nice touch Nice Does it operate similarly on mobile as you're scrolling as well Yeah, we did do some nice mobile designs for that let me Bring up the mobile view here Just oops reload Yeah Yeah, so there's a really neat mobile view it keeps the path but sort of linearizes the linearizes the the milestones So hugh's tenure worked on this this mobile, uh aspect Another developer on the marketing team here Cool, um, so yeah, each one of these is just a was a separate vector illustration that alejandro put together and Uh, sarah made each one into a view component And so this is a view, uh app And each one of these milestones is a view component which gives us some really interesting opportunities for orchestrating how it We actually use green sock, uh to animate And orchestrate all the different animations for the milestones together too, so Yeah, there's really a lot of power you can get out of combining inline svg and view That I feel like this is a really good example of how to mix those two together And again, if anyone wants to check out the source code for it, they can they can go through here and see all the full source code for the For the client is available awesome Um Another piece that we sort of developed is, uh the milestone piece so You can actually log in with your netlify account and this is something I specifically worked on you can log in with your netlify account and You can just authorize it Uh with your netlify login and it redirects you right back to the site and it will show you what number you are uh in the top million And my number is actually really high Very cool Embarrass embarrassingly high number the 1 million. That's fine. Whatever. We don't need to talk about that. Um It's still Right, yes exactly. Um, this is my netlify corporate account. So we'll just put it to that my personal account number is much lower um, yes Um, and then you can click this button I'll actually scroll to your milestone and show you what the closest milestone was to when you joined Netlify Which is yeah kind of neat. How were you able to measure the amount of developers up to a million? Yeah, so we worked with our uh data science team uh to get an export of our uh customer database and We got the full million uh A full million data dump from from them and we sort of orchestrated this all through netlify functions. So Actually when you log in to the netlify oauth Application with the login with netlify button that I showed you just a little bit ago It actually checks your number against that giant data dump Instead of a netlify function. So it's actually scanning a a million record Uh json file every time someone logs in so it in some respects, uh is a testament to netlify functions scalability Uh, and that we we just have a giant json file that we're checking inside of that. So Yeah, it worked pretty good Held up well on on launch day, too Great. Did you measure did you measure traffic and and you know results to the page and launched as well? Yeah So a lot of our our goals around the campaign were definitely, you know, again thanking our users seeing engagement there um, but we were also excited for it to see if it would get picked up and spread across social media, so Within the first day I would say the first 16 hours. We had 30 000 people come to the microsite Um and thousands of them shared out their numbers On twitter a lot of them actually used the the widget here and were able to share out the the animated gifs but uh We also had a lot of people that just shared out their number on their own that didn't necessarily um use what what that could build so Uh, it was it was really fun to to see the engagement that way. That's awesome Did you uh do anything special for your your first developer or your millions Heaven Well, the millionth is a little bit of an easter egg. So if someone comes and uh And looks themselves up and are the millionth developer. We might have some fun surprises for them um, the first developers I think were probably part of the the company so Not quite as exciting, but it was really fun to see people, you know Like you would see 800 000 number But then someone would post they were a thousand something and everyone would get very excited that they were They were early on in the process. It's almost like bragging rights, right? Yeah, exactly And it was fun to see when people would share, you know Who brought them on or who told them about it or how they first got involved? So you started to see some of the the personal stories emerge around it as well That's cool, so one more I was just gonna ask are there any plans like to evolve this landing page or turn it into something else? Yeah well one thing so part of the whole campaign that we orchestrated, um on the third was You know, of course the microsite going out Um, you know, we planned some different social media communications We sent out an email that was in the same branding to all of our user base to tell them about it Um, we also did a did a home page takeover on netlify.com and brought in some of these uh illustrations just to to show off and then let people Um decide if they wanted to go into the the microsite as well Uh, and then at the same time we ended up launching our swag store Which is something that we had wanted to launch earlier this year, but because of covid and closed. Um, Closed facilities we just weren't able to get it up and running and operational so we knew it was going to be ready about this time and we decided that it would be Um, really cool to anchor it with the 1 million developers launch because then we could have swag that's specific to 1 million developers We could also do some giveaways So like the first few hundred people that came to the swag store got a free sticker pack and others, you know could get Limited edition swag and add-on stickers with it, which was really popular. Um We actually sold out in like The first day which is it was more than we expected, which was really fun and exciting So we're we're restocking some of that, but that was one kind of Evolution piece is that we also launched the swag store at the same time I don't think for this microsite we'll necessarily be evolving it over time. But who knows maybe if we hit uh, 5 million developers or even 2 million developers we may Revisit it then I Sorry, zach, we're gonna say something I just want wanted to mention one other thing that sarah had sort of added to the microsite and that was the ability to Sort of turn the animations off if you have a vestibular distorter And you don't want a lot of motion Uh, you can hit this little toggle at the top. I thought that was a really nice touch so Yeah Yeah She spent a lot of time working through accessibility as well and she put you mentioned the Css tricks article that you had read that she put together. So there's a lot of great, um Zach has a handy to share out here Uh a lot of great explanation in there as well And zach, I think it's worth telling how um, You put together the different videos for the tweets because that was a a process that we had to figure out Yeah, I wonder if we could move to a different question while I log into twitter Out of out of curiosity, uh, what was the size of the team that worked on something like this was it, you know Your full full design team dedicated to getting this launched or a small subset Yeah, that's a great question. Um, you know, a lot of people across the company were of course like Interested following giving ideas, but it was really um, it was a cross-team effort So some folks from the marketing team, um some folks from the developer experience team, which is what sarah leads um, but sarah was primary site builder animator, um a gentleman on our team named alejandro alvarez did the the illustrations and the design um, we also had folks involved of course from comms and um from just project management side, but I would say and then you know Zach played a huge role in in helping to build out the site and we had a little bit of contribution from um, one of our other front-end developers for marketing, but Overall, it was a pretty tight tight team. Um That worked on this project and was this something that you all were kind of working on on the side of your Standard quarterly projects or initiatives or were you able to kind of like dedicate, you know The full scrum team to this and this alone to make your date Yeah, that's a great question. So it was on the side for quite a while, you know, we had the idea in march It started to come together I would say around the april time frame that we started to dig into it more And it was still probably a little bit on the side But then the last week before the launch it was a pretty dedicated effort to to get this over the line But um, but I think it's you know a testament as you're both familiar with some of these modern. Um, Design and dev workflows that we were able to collaborate pretty seamlessly across the team So, you know some alex was working on it for a while Sarah picked up and was doing animations but also collaborating with alex pretty seamlessly and then Zach was able to come join the project and pick up around some of the the identity and other pieces. So, um It was a good team collaboration along the way Yeah, it sounds awesome Seems like you all were able to kind of hop in and out of this, you know pretty rapidly as needed between everybody Yeah, absolutely i'm ready to share the the twitter sharing feature now um So right when you log in it, uh associates your your developer number with the closest milestone And we sort of demoed that with how you can find your milestone with this button here and we'll jump to it But you can also tweet it out and this was sort of a big part of how how we shared things uh on the site and how We drove quite a bit of traffic to the site and all this is is um, it links to twitter.com slash intent with pre-populated tweet text And the tweet text includes just a link to a hard -coded existing tweet that we had already created for each milestone with video slash one Pre-uh Attached to the end of the url and that actually embeds the video directly right in the tweet So it was really pretty easy to put together um and As we watched the twitter traffic go sort of on the day of the launch It was really neat to see all these different animated videos Scrolling through the timeline. So yeah, I would say that was a really kind of extra touch that we put into it That really added quite a bit And did you said these were unique? Uh videos based on the specific milestone that you were most closely aligned to Right. So we had this twitter.com slash 1m devs account And it it contains all of the individual milestone videos so these are just Things that we have pre-populated before launch and then we just link to them in the tweet text That we send from the site And if you just append stuff or if you append video slash one to it, it'll directly embed the video of the tweet that you're referencing right into the Into the tweet that you're posting. So Yeah, it made it really easy to sort of integrate that And this is yeah, just an example of what the tweet would look like When you share it out Yeah, it's so cool That's cool, I bet it was like looking at a sea of green in your twitter feed probably Yeah Yeah, we have you know, of course the slack channel that has the twitter feed that mentions netlify. So that day it was Definitely a sea of green, which was pretty fun. The team was excited about it Very cool What were uh Some challenges that you faced throughout the pro the project. Um And How did you kind of like work through them? Yeah I was actually going to bring up the tweets is one of the challenges, but zach just said it was really easy So maybe I was wrong Well, it ended up to be it ended up to be easy, but we took a couple of different steps along the way Um, I would say that we did leave a bunch of work on the cutting room floor specifically uh, I think the original plan was When we were trying to get the end goal was trying to get animated videos and embedded in the tweets but uh along the way as a stopgap we Wanted to or I had developed some code that would just embed static images And I thought that that was sort of going to just be the end point and we ended up throwing a bunch of that work away because we figured out how to embed these these tweets without having to Use dynamically generated og images, which is the approach that we had thought of doing before. Um, I think the animated Feature really adds quite a bit to it. So i'm glad that we didn't we didn't rest on our laurels with the static images Because yeah, I had a fully working solution of just static images going but Yeah, we didn't stop there Yeah, I think the other challenge like With many projects the team's face along these lines is figuring out the right balance for scope because we we really wanted to have fun with it and the team was motivated and wanted to Put out a really cool project, but there was you know A certain amount of time that we could dedicate to this as an organization. So Making some of those those decisions. I think ultimately we came to a really good spot, but that's always a challenge for these projects Was there anything that you wanted to ship with this project that you had to kind of like let go of I actually think we got Somehow we pulled off Most everything that we wanted to to get in at the end that were like major pieces for us I don't know exactly if there's something you can think of I think we had a lot of discussions about whether or not we were gonna have to Cut things out of scope, but I think we kept almost everything That's great, yeah, yeah Cool, um, well, those are most of my questions. Um Dylan you got anything Uh, yeah, actually i'm kind of curious, uh, we talked a little bit about the tooling before and you mentioned that primarily you all were using Figma if that's correct between yourselves For that process. What was your your design and then development process look like? Did you operate just from a Design would put something together in figma and hand off to you or was it Really truly collaborative from a design and code standpoint with you know, the individuals hand off to you Handling code working at the same time right alongside the designers Yeah, I would say that we definitely did some uh later stage collaboration, uh for sure with the mobile view there was a lot of uh Sort of back and forth about how it should look um, I think the original designs were desktop specific so we had to sort of uh, yeah go back and forth with the designer and the development team and Coordinate on how best to architect that that mobile view was a was a pretty big challenge. I don't know if lauren you had something to add No, I was just going to mention. Um, sarah drasner again who did the animations? She did work pretty closely with uh, alex who did the original illustrations and they had some Some dialogue along the way and she was able to provide some feedback about how she could see the animations come to life um, but I Unfortunately, she's not here so she can't give us the full the full rundown of that but they definitely had some collaboration leading up to Um, we you know early on in the process Uh, and one thing too I really want to mention is um As i'm, you know loading this site again and again just to look at the beautiful animations Um how how streamlined and you know pretty well optimized it is Seeing some of this type of uh work done in the past, you know, it can very easily get cumbersome and bulky to load uh, could you talk a little bit about how you you know, um, What what processes and and measures you took to ensure that this was, you know, very polished and very optimized for the user I mean sarah is the world renowned uh animation expert Um, so she definitely hand-tuned a lot of these Uh, and she used greensock I think to great effect to sort of orchestrate a lot of these hand-tuned animations together I think greensock has a scroll trigger that we also use to To animate as you scroll down the page um, so I think sarah put a lot of Meticulous very meticulous very handcrafted animation work into this and I think it shows too It's a really good question because that is a discussion that we had early on Performance is very important to us. It's part of our brand and it's very important to zach specifically as well it's one of His passions that he cares about and we knew um going into a project like this we'd be making you know some small trade -offs for that, but we felt like Um, we felt like it was worth it and important and this is just you know It's meant to be fun and kind of a celebration for the community Uh, but at the same time like zach said there but a lot of work to to optimize it as much as possible And it is something that was very top of mind for us with building it out And I I think you mentioned lauren a little earlier that this page is um Slightly deviated from the standard netlify brand system Um, would you say this is kind of an extension of that? Uh and might be something that you want to integrate from a component standpoint into the brand system moving forward Or do you envision this completely as just kind of a standalone celebration? We had envisioned it completely as a standalone celebration Uh that said we have gotten a lot of positive feedback and and a lot of excitement around it. So we are looking at incorporating some of these um illustration components into the site in the future Kind of early explorations at this stage, but it's a possibility Oh, very exciting. Yeah I can definitely see why you got a lot of positive feedback We got to get this electric green on as many things as possible I think the color is called acid green, which is very appropriate I will say that um because the the microsite and our Netlify.com property both use view. It was really easy to sort of integrate the same view components across both and so yeah, this this component right here is almost exactly The same code as this component here on the hero component at the top And that was really easy to sort of integrate between the two So just in terms of code sharing there's some some nice synergy happening there I have to put a dollar in the jar for saying synergy, but i'll do it. That's fine Thanks for joining it was really fun meeting you both and hearing about the project Sounds good. Yeah. Thank you both. Yeah. Thanks for having us