Categories
Podcasts

Chris Ferdinandi

Chris Ferdinandi shares his evolution from HR to Vanilla JS, lessons learned teaching, the importance of testing things yourself, and the power of role modeling.

Show Notes: https://catchingup.dev/podcasts/chris-ferdinandi/

Catching Up With Web Performance
Catching Up With Web Performance
Chris Ferdinandi
Loading
/

Links

Video

Transcript

Tanner
You know what I should do, you know what’d be great? Alright, here it is. Hello, hello, hello, and welcome to Catching Up With Web Performance, a podcast about stories of people in web performance. Today my special guest is Mr. Vanilla JavaScript himself, Chris Ferdinandi. Chris, how’s it going?
Chris
Tanner, I’m doing great today, thanks. How are you? Thanks for having me.
Tanner
I’m trying to catch up on all things JavaScript. Was that a decent intro? Did I get my best Chris on?
Chris
I don’t think I’ve ever heard a finer intro to a podcast ever. That was fantastic.
Tanner
I would ask you, like, we’ll go all the way back to, “Hey, how did it start for you?” But yeah, you know the gist of this show. I want to know your stories. Specifically, we’re looking at web performance stories. And you, I mean, you’re so chock full of material and interesting, like, man, where where do we even begin? Chris, I’m gonna launch right into this. How did you get into the Web and web performance?
Chris
Yeah, it was a long road. So many, many years ago I was born. No, so I… I suppose I could go back farther than this, but I have a degree in anthropology. I graduated, when I was about to graduate I was like, “Aw man, I love learning about this stuff, I don’t want to do it professionally.” And I kind of fell into a job in human resources. And I had a lot of strong opinions about how HR was working or wasn’t working, and so I started blogging about it. And like so many at the time, it was a WordPress blog. And I wanted to have a lot more control over the look and feel of it, so I started kind of hacking my way through HTML and CSS and WordPress-flavored PHP. Eventually I started to like it so much, I had so much fun with it, that I’m like, “This is way more fun than HR, like I kinda wanna do this professionally.” So I…
Chris
There was a few different things that all kind of came together around the same time that I think really pushed me into being super passionate about web performance. One of them was I started following Dave Rupert on the Internet—not in like a stalker-ish way, I realize that sounded weird, the phrasing was odd.
Tanner
Hi Dave! If you listen to the show.
Chris
So I started subscribing to Dave’s blog, and he wrote some article about how he ditched jQuery for vanilla JavaScript, or browser native JavaScript, and shaved multiple seconds off the load time on his WordPress site.
Tanner
We’re gonna have to find this post.
Chris
Yeah, if you can. I’ve looked for it and my google-fu sucks, so I can never find it.
Tanner
Challenge accepted.
Chris
But so that was right around the time that I was learning JavaScript through jQuery, which was kind of the way at the time. And I was failing all these job interviews and feeling like I did not know what the hell I was doing, so I’m like, “Alright, I’m gonna convert all my jQuery stuff to vanilla JavaScript to see if I can understand how things are working under the hood.” And this was literally right at the time that Dave was talking about how it was better for performance.
Tanner
And out of curiosity around what year is this?
Chris
This would have been, oh, you’re making me do math. So this would’ve been around like 2013-ish, maybe? 2012? This was a while ago. I might have to like pull up my LinkedIn profile to figure out when I switched professions.
Tanner
I actually have your LinkedIn over here I’m looking at.
Chris
Yeah, so look at whenever I got my first job, it was like 2 years before that.
Tanner
There’s EMC where you were a HR Generalist, employee training and development. And somewhere in here, it seems like it’s at EMC, switched from training and development to web designer in 2011.
Chris
Yeah, so I officially… Constant Contact was 2014, so it would have been like 2012–2013, around there. And so I, you know, so I’m doing that and I’m like, I’m literally seeing myself how when I went through and ripped out any of the plugins that were using jQuery and rewrote some of my own stuff using just vanilla JavaScript, like seeing these performance gains.
Chris
And then I went to An Event Apart Boston, and I saw Jake Archibald talk about breaking the thousand millisecond threshold, I think is what the title of his talk was. This was a long time ago now. And he just had all these, like he called them “Jake’s Tips”, and there were all these little things you could do to improve the rendering performance of your site.
Tanner
Do you remember what some of those tips were, out of curiosity?
Chris
The only one I remember was him talking about requestAnimationFrame() and how it was better for performance than setTimeout() because it tied specifically into the browser’s refresh rate rather than just guessing like we usually do with setTimeout() kinda things.
Tanner
16 milliseconds, I’m gonna do this.
Chris
Right, yeah. And like certain monitors go faster or slower than that, so he was talking about how RAF was better and yadda, yadda, yadda. That was literally the only one I remember. But I remember being like, “Oh, web performance is a thing.” It never occurred to me that this is a thing you should pay attention to. And he was talking about different benchmarks and things like that. And so that was kind of the start of it for me.
Chris
And then I started just kind of picking at threads a little bit more and finding more people who were talking about this. I am completely drawing a blank on his name right now because I’m old and my memory is garbage but he used to be on the Chrome team and then he went to the Edge team and he talks about performance all the time.
Tanner
Alex Russell?
Chris
Yes! Thank you. Yay, yeah, so Alex Russell.
Tanner
Alex, we’re gonna get you on next.
Chris
Right? So I started following his work.
Tanner
What is this, we’ve gotta get Dave, we’ve gotta get Jake, we’ve gotta get Alex…
Chris
Right? I suddenly became aware of things like, you know, like P90 and the various kind of performance targets that you’re gonna want to look at. Around the same time, I was also seeing other talks where people were talking about how, you know, outside of America people don’t walk around with iPhones all the time. Like in some areas the Web is actually much faster but in other areas way, way slower. And they’re using borrowed devices that are like 5 to 10 years old and they’re super slow and your sites run like garbage on them. And so it kind of created this whole new thing for me and I became really obsessed with web performance. And almost all of the work I do now around vanilla JavaScript is kind of informed through that lens of how so much of what we do as an industry right now, and like modern development best practices, are really bad for performance, and I’m trying to push back against a lot of that. So that’s kind of been my guiding force.
Tanner
Pretty sure in your first Vanilla JavaScript Podcast episode, you said something about JavaScript destroying the Web.
Chris
Yeah, that’s potentially accurate. I’ve referred to it… It’s really weird, right? Like my goal as a JavaScript educator is to get people to use less of it.
Tanner
Yeah.
Chris
I have at various times referred to it as “the carbon dioxide of the Internet”. I think I once called it “the worst thing that ever happened to the Web”. I’ve like, I bash JavaScript all the time. I love it, I teach it, I think it’s an important part of the frontend stack, and I also think it’s grossly overused and actively harmful.
Tanner
This is a really random reference, but I used to be big into advertising. Previously, I thought I was gonna start a podcast about the history of advertising, now I do web performance instead. But if you ever want to look him up, there’s a guy named Howard Gossage. They call him “the Socrates of San Francisco”. And he was one of the leading ad men of the sixties and would just tell people, “You don’t need advertising. There’s way too much advertising.” And I feel like you are the Howard Gossage. Like living in it, this is literally how I make my, my livelihood depends on this thing, but you don’t need it that much, like tone it down.
Chris
Yep, yep, exactly.
Tanner
And maybe it’s… It feels almost like you’re a huge advocate then perhaps of responsible use of the thing. Like, “Hey guys, this is necessary. I want to teach you how to use this well, to use it wisely.”
Chris
Yeah, I actually had, um… I do a fair number of podcast guest appearances, and a few appearances ago I got in like a really heated argument with one of the co-hosts about this because he interpreted me saying, “Use JavaScript, just be more selective about when you use it,” as like some sort of personal affront. I don’t know.
Tanner
Oh boy.
Chris
He got really upset at the idea. Like, why should I care? I’m just gonna, you know, I could either, what did he say? He said, “I could hammer a nail with my forehead too but I’m not gonna do that.” And I’m like, that’s a really bad analogy. Like, there’s a big difference between using a sledgehammer and your own forehead. Like, you could use an appropriately sized hammer, or even a rock would be better, right?
Tanner
There are some better things along the spectrum.
Chris
Right? Yeah.
Tanner
I see where you’re coming from, but yeah.
Chris
And this is kind of the thing, right? When I talk about this, there’s kind of this misnomer that when I say “vanilla JavaScript” I mean you’re writing every single line of code and every single thing you build from scratch yourself and you’re not standing on the shoulders of those who came before you. And it is very much not that. I just really want people to be more selective about the tools they use and why. We kind of have this tendency as an industry to always go for the Swiss Army knife, the thing that does all the things. And a lot of times all we really need is the knife, right? Or the toothpick. Like we don’t need the screwdriver, corkscrew, fork, kitchen set, scissors, like… yeah.
Tanner
Oh boy, I’ve got, alright… There are so many places. So let me back up, I’m gonna make sure that I’ve got the story so far, and then we can start picking pieces of Chris’s life to dive deeper. First off, I’m fascinated with this anthropology bit. Like wait, what? Yeah, I was just doing some anthropology, I got into HR, started writing blog posts, and then I wanted it to look better so I became a coder. That, I forget if I’ve mentioned this in another episode, but I had some coworkers that I’ve met, just I love finding out these stories, where I had somebody who used to be in the Miami Opera and then became a software engineer, then somebody else who was actually a masseuse. And their story actually strikes me most similar to yours, because they were trying, if I recall correctly, they were trying to document all of the muscles in the human body in an Excel spreadsheet, and something about, like, got into writing macros, and it just exploded from there. And so a little project about, yeah, human anatomy. Whoo! I love hearing these crazy stories of how just the profession flips. Am I right, by the way, you have a master’s in human resources?
Chris
Yes. Yeah, yeah, unfortunately.
Tanner
Unfortunately. But so your master’s got you into WordPress, and you started blogging, and then learning jQuery…
Chris
So here’s the thing, Tanner, I’m like Winnie the Pooh, right? There are people in life who just kind of go wherever life takes them and then there are planners. So like, my dad is a planner. He’s like, “I’m here. I want to get there. What’s the straightest line to get there?” And I’m like, “Eh, I don’t know, over here seems kind of inter—ooh, look a bee! Let me go follow—ooh, a pot of honey! That sounds…” So I um, yeah, I had five majors in college.
Tanner
Five!
Chris
Maybe six, if you count undecided, which was how I started, or undeclared. But like, education was in there, I think business at one point. I almost failed out of college for that semester. That was a bad call. Yeah, there was a few different things. Anthropology was the one that I was like, “Oh, this is interesting enough that I will stick with it.” And the underlying thread here is that I have ADHD, and I knew this but it was never addressed when I was a kid and I forgot. And so I am like 99% sure that all of this, like, I won’t actually do the work if it’s not interesting to me stuff stems from the ADHD, so that’s kind of another thread here.
Chris
But yeah, so anthropology was super interesting. I really enjoyed learning about the how and why of different cultures, evolutionary anthropology and kind of the whole where people come from thing. And I was able to sell a story about how that is related to HR when interviewing for HR jobs. I forget what that story is now, I just remember crafting this really nice narrative around it.
Tanner
Right, there was a story.
Chris
Right, there was a story. I don’t remember what it was.
Tanner
I think what’s really interesting is you threw in education there, and here you are, it’s almost come full circle…
Chris
It has, yeah.
Tanner
Where what you’re doing now is education. I got interested in this thing for coding and now I educate with coding.
Chris
So the thing with HR is I got into it because it was always described as like, you know, you’re really, you’re helping people kind of reach their full potential and do their best work. And what I found in reality—and again, not all HR organizations at every company are like this, I’m painting in some very broad strokes here—but in general, HR often functions as a CYA extension for the business, where you’re doing a lot of babysitting of adults who should know better, and you’re making a lot of decisions that are to the benefit of the business and the detriment of the people there because shareholder value. And that started to really get to me after a while.
Chris
But a lot of these, like, I was a really big fan of the Results-Only Work Environment and the fact that like, or the idea that we shouldn’t have mandatory hours, or you need to work in this place in these hours. This is way before everybody went remote with COVID and everything. So I used to just talk about this stuff a lot. And yeah, I started started dabbling in code, found it way more fun.
Chris
But there was actually a pivotal moment that changed my entire career. I eventually became known as the HR guy who knows a little bit of code. I didn’t know a lot of code, just a little bit of code, but it was enough that people were like, “Oh wow, this guy really knows tech.” Right? Like, I can put together like a static HTML file. Calm down.
Tanner
Which is witchcraft to most people.
Chris
Right? But so I was working in the training and development organization at EMC at the time. And we were, I had this boss who came from like a non-, he came from like an academic background, not like business, and he was really into coming up with weird and innovative ways to do things. And we were kind of toying with this idea that like, what if instead of putting people in a room for 8 hours and talking to them, people could watch like YouTube-style videos when they needed them and get on with their life? Which I know does not seem very revolutionary now.
Tanner
That’s a novel idea!
Chris
But in 2010, in a business context, was like groundbreaking. Right?
Tanner
Right.
Chris
So we’re toying with this idea and we go to the IT department and we want to put together a proof of concept. And they’re like, “Oh yeah, we can do that. It’ll take us a year, it’ll cost $100,000, and it probably won’t do all the things you’re asking for.” And we’re like, well that’s way too long for a little proof of concept. So we went to an agency, and they’re like, “Yeah, we can do that in six weeks, no problem. It’ll only cost you $500,000.” And we’re like, we’re not paying $500,000 for a proof of concept. So my boss goes, “Hey, you know code. Can you build it?” And I’m like, I looked him right in the eyes, and I go, “Absolutely not.” There’s no, this is just way beyond my capability. I can not do this. And he’s like, “Well, can you learn?” And that was the moment.
Chris
So I went away for two weeks, I just dove deep into the bowels of StackOverflow, and I figured out how to hack WordPress into this half-passable, like you can log in and access some stuff, kind of app thing. It’s literally the worst code I’ve ever written in my life, but it was semi-functional. It was enough that we were able to proof of concept this thing and I was hooked. That was the moment I was like, “I am done with HR. This is the path for me. I do not want to do HR anymore. I’m done.” And then I spent the next year or two just planning my exit. So that was it. That was the moment.
Tanner
That is an insane, because that really does, that wasn’t just like Winnie the Pooh casually going around and finding something, like you found your calling. Like that was…
Chris
But like not on purpose. If my boss hadn’t said to me like, “Can you learn?” I would have, like if he had just been like, “Oh okay, we’ll figure something else out.” I would’ve just continued along in HR for who knows how long, you know. Instead, he’s like, “Well, try.”
Tanner
Okay, okay. So then education, videos, your interest in people, like there are so many roots here, and I’m just kind of watching them, everything, the tree of Vanilla JavaScript Land growing from here.
Chris
Yeah.
Tanner
Let’s get to that then. You start, now it’s your career, you’re doing the Web. At what point was the, you said Dave Rupert’s article and Jake and An Event Apart Boston is around 2012–2013. So this is in short order, within the first two or three years of you, this is my life’s calling.
Chris
Yeah.
Tanner
Yeah, I think what’s so surprising for me is that you, performance was there from almost day one. Or at least very quickly. Like how does this happen, where you start paying attention to seconds?
Chris
Well, I started paying attention to the right people early on. It was very much like a timing thing.
Tanner
Because too, this would also be shortly after, I think 2010 was when we got responsive web design?
Chris
So yeah, Ethan Marcotte was like right in the middle of talking about all that.
Tanner
Right, we’re in the middle of the mobile revolution.
Chris
Yeah, so I met him at some like local WordPress meetup and I had no idea who he was or what responsive web design was. So it was just like this really cool right place, right time kind of situation.
Chris
And that was the other thing too, everything was shifting to mobile, so performance was suddenly a lot more important.
Tanner
Right, this is the topic.
Chris
jQuery was very mature and the browser was finally catching up. So being able to go, “Oh, if you do this thing in jQuery, do that thing without it,” was a lot easier than it would have been just like three or four years ago. It was just like the perfect time.
Tanner
Right.
Chris
The responsive web design thing was fun because I remember when I was interviewing, I was originally looking at internal jobs, and there was some department and I was like, “So how do you guys handle mobile and smartphones?” And the hiring manager was like, “Oh yeah, that’s a fad and that’s almost over. We’re gonna be over this in like a year.” This was in 2012…
Tanner
And here we are.
Chris
Right?
Tanner
This has not stopped.
Chris
Like, here we are 11 years later and it’s not just not the fad, it’s like it’s mobile first. Like mobile is the Internet at this point. So yeah, that was, I was like, “Oh, you know, I don’t think it’s gonna work out for me.” But yeah, it was just a very much a coalescion of… Coe…? You know, the word I’m trying to say.
Tanner
That sounds right. “Coalescion.”
Chris
It was the coming together of a bunch of different things all at once that really worked out well. And I don’t know if I would have, you know, if it would have been like a few years earlier or later, I don’t know that I would have necessarily had that kind of innate sense of how important performance was otherwise. Yeah, because this was also like the 3G if you’re lucky kind of era of mobile browsing, you know? Where things would load really, like you used to have the M-dot versions of websites that were really stripped down just for mobile because otherwise they wouldn’t load.
Tanner
Right. I was gonna ask you that too, because you mentioned there’s Jake giving his presentation, the one second barrier, Dave talking about how he shaved seconds off of the site. Do you recall how you were measuring that? Or like what were we measuring these seconds with?
Chris
Yeah, I want to say it was Dave put me on to web page… hold on, what is it?
Tanner
WebPageTest?
Chris
WebPageTest.Org, really early on.
Tanner
Make the web fast!
Chris
Right. That was like, I’m trying to remember, I wrote about this a long, long time ago. Let’s see when I can find my first reference to it on my site here. So it looks like 2014 was maybe when I first talked about it and I was probably using it for a little bit before that. But that was game changing for me. Being able to like, so for people who haven’t used it, it’s super cool. It’s free. You pop your URL into the address bar, you check a few boxes to tell it what you want it to do. So just a quick, quick aside, always check off “Include Repeat View” so you can see initial load versus cached load and how they’re different. And then it will spit out this really awesome loading waterfall. And what I think is most important is these like 100 millisecond screenshots of what your site looks like as it loads. And you can test different conditions like 3G mobile, super fast cable internet in the United States. You can test like I’m in New York but my site is being accessed by someone in Sydney, like what does that look like? And being able to see that recording of how it plays out over time is really, really informative.
Tanner
Game changer.
Chris
Yeah, huge.
Tanner
It’s one of those, I kind of wish I could remember the first time I saw WebPageTest and the first time I saw one of those charts, because yeah, you’re totally right. As soon as you see it, “Oh, that’s how long it takes to load?”
Chris
Right, like that’s how I learned that my custom web fonts were a huge issue. Because I think I was just getting these, it looked fast to me, but for certain people it would show up as like, you’ve got the frame and then just like no text for many seconds, or text and then it disappears for many seconds in that weird gap from when the font is loaded but not parsed and all that. So yeah, a lot of little kind of things. It’s been a long journey and it never really ends, right?
Tanner
Never. I’m glad we’re talking about WebPageTest, because like now we’ve got tools, techniques, practices. I’m really interested in, as you’re, “Great, we’re in it now,” you know, I’ve been called, I’ve been inspired, and I’m doing web development as my career and frontend development… I’m looking at your LinkedIn again, like Mashery? There’s like eight years in here.
Chris
Yeah, longest I’ve ever done anything.
Tanner
Compared to even Go Make Things?
Chris
Oh no, I guess not. I guess Go Make Things has been longer now. It’s the longest I’ve ever worked in a full time employed job. Let’s say that.
Tanner
The longest I’ve had a W-2.
Chris
Yeah, there you go. You had a question, sorry Tanner.
Tanner
No, no, no. That’s why I have the papers and I just scribble things everywhere. I really, I’m glad you can’t see this room. So I’m curious about how you developed. Like, what were the things that you did to practice and learn? Are you like, “Okay, every day now when I work on my website I’m gonna run it through WebPageTest and look at the waterfall”? Or like, what was, you know what I mean? Kinda what were your practices? How did you develop and grow as a developer?
Chris
Yeah. So I don’t think it was like a, just a slow kind of, like a steady line kind of thing. It was almost like a series of plateaus, right? Where you learn a new thing and then you start using it everywhere, and then it becomes the status quo for a while, and then you hear something new and then you level up. So like learning about minification and gzip was one of those things, and like, “Oh, we can we can dramatically reduce the size of our files.” Learning about a now obsolete technique, concatenation, and kind of the whole before the world of HTTP/2, if you had more than two files that needed to be downloaded, they would cause this huge backup of things to be downloaded, and it was really slow because of all these handshakes that happen, whereas now you can download like tons of files simultaneously. That wasn’t always the case. So there used to be this recommendation that if you have a blocking type of file, like CSS or JavaScript, combine it all into one file so that while that big thing is downloading that other thread is free to pull additional files, like images and stuff. So you learn that, you start doing that, which then got me into the world of builders and bundlers and how you can shake out code that you’re not using to make your thing smaller.
Chris
So every little thing kind of led to this next thing. And while I was learning it, I would be trying things, throwing my page up in WebPageTest to see what the output was, iterate, try again, and then I would run experiments to see like, okay, this technique was recommended. Like I remember when critical CSS was a technique, where like the CSS that affects the stuff just above the fold, which is kind of a soft measure at this point, you know, inline that and then load the rest asynchronously in this different file. So I did that for a while. One other weird thing I would do is I would try to get a really good Google Lighthouse score and then I’d test the actual loading in WebPageTest and discover that sometimes higher Lighthouse scores were slower to load in real world contexts.
Tanner
That’s interesting.
Chris
That opened up this whole other kind of like…
Tanner
How do you reconcile that in your mind? The one tool tells you one thing and the other one tells you something else.
Chris
Well and it’s probably, oh no, it wasn’t Lighthouse. I’m sorry, it was PageSpeed Insights, I think was what Google called it at the time.
Tanner
Well, effectively using, what time did they switch to running Lighthouse behind the scenes? Because PageSpeed Insights didn’t always do that, and eventually they flipped. We need a fact checker out here.
Chris
At the time, I remember eventually realizing that Google’s thing was measuring indicators of performance but not doing actual like, “Let’s run this through some devices and see what happens.” So they’re looking for, “We generally find this makes pages faster. We generally find that makes pages faster. Are you doing these things?” And sometimes those things in specific implementations would actually be worse depending on… Like I was running a, at the time, still a WordPress site on really cheap shared hosting, and so certain things that were better for performance were actually slower on the server and caused issues.
Chris
So anyways, it was a lot of like trial and error and testing and experimentation before I found the things that worked for me. And now these days I’ve got just this insanely fast site and I use the same basic template and like CSS files for everything, and I don’t really do a lot of measuring anymore because I’ve got it pretty dialed in. But I do still break out PageSpeed Insights when I want to show other people how terrible the things they’re building are. Not in like a shamey way, but in like a “Hey, now let’s talk about how we can fix it,” you know?
Tanner
Yeah. It’s almost a come to Jesus moment. Just let me show you, this is, here it is.
Chris
I know this runs fast on your device. You have an M2 MacBook and a 100 gigabits a second of Internet.
Tanner
Switching to an M1, by the way, like I knew the MacBook was already fast, I couldn’t believe that it could get that much faster.
Chris
Yeah, for sure.
Tanner
Just bananas. So now the gap is even, just astronomically huge. It’s insane.
Chris
Yeah, it’s pretty bonkers. So yeah, so that’s kind of it now. And so now I’ve got this thing I do with pretty much all my sites. And like, yeah, it’s weird. Like I run literally 20 something sites off a single $5 a month DigitalOcean droplet and they all load in under a second on cable and in under 3 seconds on mobile. And they’re really fast even in Australia, even though I’m not using a CDN and my server is in New York. And it’s just really, like it’s amazing what you can do with the modern Web if you know how to. We can talk about some of that stuff if you want or we can stay high level.
Tanner
Oh buddy. Oh man, it’s always funny trying to do the balancing act. Like how deep are we going to go on this topic versus keep jumping around and hearing other things? We’ll see if we have time for it. I do want to hit more around some, like I want to work our way, I feel like we’re halfway there. I want to work our way all the way up to the present, and then we can really get into the meat of some things.
Chris
Alright.
Tanner
This timeline, by the way, is fascinating and perfect. Eventually, I may edit this out, but on the side I did, last year I did “An Incomplete History of Web Performance” and like pre-Web, I went all the way back to the ENIAC. I was like, “Here’s what performance was when the computers were first created,” and then worked my way all the way up to 2000. And I had stop there because I was like, “God, this is so much stuff.” And so now I’m hoping to do the next one of 2000 to present day. And that’s where I’m finding a lot of these talks super helpful is like, “Oh wait, yeah, that is what happened. And that was the sequence, ohhh…” Yeah, so the last 20 years are going to be really interesting to try and snap together.
Tanner
Okay, I’m gonna go back through these notes because… Okay, I have to say this first. You talking about doing your experiments and testing things, I feel like that’s almost inhuman, or like it’s so unnatural and uncommon. How often do you run across other people? Like I have so many coworkers, I work with a lot of people, and most people are, either feel strapped for time or whatever, and they don’t do that extra work. They don’t put in that, really—you sound so diligent. And I just wonder, do you feel that way? Do you feel like you’re…?
Chris
It was role modeled for me. Dave Rupert was constantly writing articles where I heard about this thing, I did some tests, here’s what I found. This other guy said something, he found something different. You know, I don’t know why, but just putting more… And so I was like, “Oh, this is what serious web developers do.” I want to be, I want, this is like I was still learning, so I’m like, “I want to be…”
Tanner
This is what serious web developers do.
Chris
I want to be, I didn’t have the impressive beard that Dave had. I do now, but I didn’t, I was just baby web developer, you know? So I wanted to be more like Uncle Dave. And so I started, um… He calls himself that, I don’t, I was not, but so I…
Tanner
So everybody knows.
Chris
Yeah, so I, again not creepy internet stalking Dave Robert. He’s a great guy. But so, it’s one of those things, I’m over denying it now so it’s gonna… Yeah, but so that’s just, that was the behavior that was modeled for me among the people I was following. I now realize that was part of kind of their like job, I guess, maybe for lack of a better word, right? You know, people like Paul Irish and just all those, you know, all those guys, Alex Russell, etc. Like they’re DevRel folks, like that’s kind of their job, you know what I mean? Not that Paul Irish is a DevRel person, but like the work that they were doing kind of necessitated them doing this stuff, it was part of their… And I didn’t know that at the time, I just assumed this was a thing all serious web developers did. And as someone without a computer science degree, who didn’t realize that most of us don’t have one and we’re all just kind of like fumbling our way through, I was like, “Oh man, I really need to like, I need to prove myself here.”
Tanner
It’s just funny, like I dunno, it feels so obvious, but that has clicked for me like a lightning bolt in my brain. “This is what serious web developers do.” Like the power and influence of role models and the people that we follow and surround ourselves with, or even just mentally surround ourselves, like your circles. It’s just such a tremendous factor in how you behave and what you end up doing and the practices you develop.
Chris
Well, this is like accessibility stuff is like this too, right? I’ve learned this lesson over and over again because it always bites me. But like you can read an article that says this is how something should work, but that’s not always the reality with screen readers and browser implementations. And so you test stuff and you’re like, “Well, the spec says this should happen, but this happens instead.” I don’t know why, but I need to figure it out. Yeah, so I try to do as much of that as I can. I’m not always great about it. I don’t want to seem like I’m super diligent here.
Chris
But yeah, if you’re ever unsure, like this is one of those things I try to drill in with my students too. Like I’ll get questions like, “What happens if?” And it’s like, well, I can put together a demo and show you, and I’m happy to do so, but I think it’s a really good life skill to get in the habit of, “I have a question, let me try it and see what happens and then I can try to figure out why.” And that’s where I can come in, I can help you understand why if you’re not sure. But yeah, testing what happens is just a really important developer skill, I think. Right up there with being good at Googling, you know?
Tanner
Yeah, yeah. Oh man. This is another one that I may edit out, but like where are we on prompting then? Like alright guys, new skill, you gotta be good at Googling and you gotta be good at prompting. Get those LLMs in order.
Chris
I think filtering out all the garbage that you get back from both is probably the equally important skill there.
Tanner
Yeah, the underlying, overarching, the skill. Alright, I’m gonna do it anyways, we’ll see how long this one, but… How do you, because I feel like performance is probably susceptible to this, I mean you talk about critical CSS and things… Performance is so susceptible to practices going in and out of fashion, and that filter skill, that’s just crucial. It’s critical. And number one, try it yourself. Try it. Please, try it. Have a tool that you can experiment with like WebPageTest. But this filter, do you have any other ways that you’ve found yourself, or if you look inside, how do you develop that filter?
Chris
Oh, yeah. Yeah, so a big part of, I have often found myself as like not part of a team, just kind of like the one person doing the thing in a group. So like when I was at Mashery, I was embedded with a bunch of customer success folks who were mostly either backend developers or more like salesy kind of folks, and so I was the one frontend guy. So I have a big social media network, I guess, and I have certain folks that I’m like really cued in to. And so I, for better or worse, I have like a handful of folks that I look to as the, um… “tastemaker” isn’t the right word, but the folks, like the… “canary in the coal mine” has the wrong connotation. Maybe like the “bellwether”, like the folks who kind of signal to me what’s coming down the line. It’s not here yet, but here are kind of the shifts that are happening. There’s a handful of folks who are generally a lot more on the cutting edge than I am and I follow them and try to be a fast follower, but not like a first one through the gate, you know?
Tanner
Yeah, it’s coming back around to role models. That like, people, it’s so, we’re so… Anthropology? This just rooted in trust, like, I don’t even know how else to go beyond that other than find a good group of people.
Chris
It’s literally my favorite thing about this industry, though. So like, when you work in HR, everything that you do is, there are conferences and stuff, but all of the real, the meat of what you do is a trade secret because your people are your competitive advantage. And so you don’t want to share how you structure compensation at your business, or how you like, you know, like these things you do, these internal programs you have that help people do their work better. And then when I started learning web development and I was seeing, like, individuals and corporations being like, “I spent three months building this really difficult thing, here you go, use it for free!” I’m like, “Oh my god! That’s amazing.” And here’s exactly how I did it and here’s how it works. Like that, I know that our industry just has a ton of issues around kind of the idea of meritocracy and, you know, the exclusion of various traditionally excluded groups, and they’re all real problems. But I will also say that more than any other industry, the ability to not have a degree, not have any sort of like skills or credentials, and just show up and be able to learn from people who willingly give away what they’re learning for free is absolutely amazing and not something I see in a lot of other industries. I feel like science is probably the one other industry where this happens a lot.
Chris
But yeah, it was just really, like again, the idea of role models, like there are just so many cool people doing so many cool things just for the hell of it. To like, you know, a rising tide lifts all boats. It’s really, really cool. I love it. So that’s why I’m still here a decade later and not doing something else.
Tanner
Well then, let’s work our way up then. I think we’ve, you mentioned Mashery, let’s just say we’ve come up to the present. How did this education stuff? Because we had that moment, you had this single, this catalytic moment, where I’m gonna, maybe you didn’t think at the time, but I’m gonna make videos. There was 2010, the prototype, and then all the sudden somewhere, now you’ve got videos out the wazoo, you have articles, courses, you have 20 websites.
Chris
Yeah, it’s a lot. So really it started with blogging. It was just a habit that carried over from HR, where I was like, “Oh, well I’m learning code now, so let me start a coding blog and I’ll just share everything I’m learning as I learn it in real time.” And after a few years of doing that, I’d always kind of had this eye for wanting to eventually run my own business and be able to have more flexibility and freedom, not have to work for someone else and all that. And so I started freelancing, so I was coding for other people. And I had a situation where I had brought in, I had been asked to bring in a designer to help put together some designs for the client I was working on, and the designer ended up taking the client, like the whole, it was like a weird… Like the old, the main contact I had at the client was still there, but her boss had left and some new person came in, and so there was this whole changing of the guard, and it was like, it left a really bad taste in my mouth. And I’m like, “You know what? I don’t wanna do this anymore. I wanna go like, I think I wanna do products, so I can just make the thing, sell the thing and be done.” And so I started with ebooks. Actually, I resisted video for a very long time because editing sucks and I don’t wanna do it, right?
Tanner
Yes.
Chris
So I started publishing ebooks. They, the first few I did, so I wrote one on web performance and it was a flop. I wrote one on career stuff…
Tanner
Was that your first? What was your first book?
Chris
I think the very first one was, you know, it was “Wicked Fast Websites”. It was a WordPress performance…
Tanner
Wicked Fast Websites.
Chris
It was a WordPress performance book and it flopped. And then I wrote one on career stuff, because I used to do that in my previous HR days, and that also flopped. And then I was working with a career coach, and the first day I met him he’s like, “Oh, I know you, you’re the vanilla JS guy!” And I was like, “Yes, and I want to teach people about web performance.” And we kept having all these conversations about this sort of thing, right, and I tried a bunch of different stuff. And then I was looking at my analytics one day, and I realized 8 of the 10 most popular articles on my site were “How to do jQuery thing without jQuery”. You know, like insert jQuery thing, whatever it happens to be.
Tanner
YouMightNotNeedJquery.Com.
Chris
I was like, “Ohhh…” When he called me the vanilla JS guy, and I had never met him before, that should have been a sign to me.
Tanner
This was not your brand at the time.
Chris
No, no.
Tanner
He just said this. This guy gave you your name.
Chris
Yeah, I did not have that anywhere on my website, I had all this web performance stuff on my website. He just called me that, and I was like, “Oh my god.” I like, it took me literally though, Tanner, like a year and a half to get there. I had this lightbulb moment. I’m like, “Oh man, I’m an idiot, I missed that.”
Tanner
Who is, wait, do you remember. Who is this guy? Who can we thank?
Chris
Yeah, Jonathan Stark.
Tanner
Jonathan Stark.
Chris
So JonathanStark.Com, he’s awesome. He talks about like pricing a lot and how to, like, sell stuff in a way that people actually buy it, which is great. But so I put together a, I called it “Ditching jQuery”, and it sold moderately well. So I had really, like, my goal for myself was to sell more than zero, which was like, or no, I think it was like I wanted to sell, I wanted to make like $1,000 or something.
Tanner
Moderately is far and away better than flopping.
Chris
Just a little bit of, you know, just a little bit of money, right? Like a small vacation or something. So I think I think I made like $1,500 on it.
Tanner
That’s fantastic.
Chris
It was good, but I, it didn’t really sell like a lot, you know, and so I did this weird thing. I don’t know why I did it. I was reading some article on like pricing psychology, I think, but I took it and I broke it into six smaller parts, and I priced them so that if you bought them individually, it was all the same content, if you bought them individually it would be more than the old thing cost, but if you bought them all together you’d get them at a 30% discount or the same price as what I had been selling the thing before for. So it was the same content, same price, bundled differently. And within like a month I had sold $3,000 worth of it. And I was like, “Oh, this is the format.” Small, focused…
Tanner
Same thing, Ditching jQuery?
Chris
Literally same exact content.
Tanner
You took the exact same thing, broke it up.
Chris
Yep, broke it up, different pricing. And I expected people to just buy one-offs here and the 30% was really just like a just in case, and that was far and away the thing everybody bought. I was like, “It’s the same thing at the same price!” So that became my model. I started churning out all these ebooks at, you know, I think it was like $39 was the price at the time.
Tanner
Is this what turned into Vanilla JS Pocket Guides or is that a totally separate thing?
Chris
Yeah, so this was the pocket guides. And then I had a bunch of people who were like, “Can you make video versions?” And I was like, “No, video sucks.”
Tanner
Really?
Chris
And then I had enough people ask that I was like, “Fine, I’ll make a video version but I’m gonna charge a lot more for it.”
Tanner
Stop. Stop, go back. Video sucks. Take me back.
Chris
Not that it sucks to like…
Tanner
Take me back to old Chris. What was your rationale for video sucks?
Chris
No, no, no. So here’s the thing. Video is great for learning. I’m not trying to take away from that. It’s more like a here’s the problem with video for me, right? If I have a typo, or something changes, or there’s a bug that I need to fix, with an ebook I just go change the line of text, re-bundle my Markdown files, done. With a video, I gotta rerecord the whole damn video, you know, or try to cut this one little vocal bit in. And I was having a really tough time doing the script and record and code kind of thing, like it was just really not working for me. So I’m like, “No, this sucks. I’m not doing it.” And people were like, “Please.” And I was like, “Fine, but I’m gonna charge way more for it.” And I did, I charged like double the amount. And people were like, “Yes, here’s our money.” And I’m like, “Alright, fine, I’ll keep doing videos if you’re just gonna hand me money for it.”
Tanner
And this is still the same kind of content, like vanilla JavaScript?
Chris
Literally, I was taking, I’m taking the ebook versions and recording video versions of them. And you can either buy just the ebook, just the video, or for $5 more you can get both. Right? And so yeah, that did really well.
Chris
And then I had a bunch of people who were like, “Hey, so these are awesome and I’m learning, like, I know what all these methods do now, and if I see code, I understand what’s happening. But if I sit down and go to build my own thing from scratch, I’m like a deer in headlights. I don’t know where to start.” So I ended up taking, I made a, so this is where the Vanilla JS Academy, which is my workshop thing, came from. So I took a bunch of projects, broke them into small parts, grabbed all of my existing tutorials, and just put them around them, right? So it’s like a couple lessons, project, a couple lessons, project. Because I eventually figured out the place where most people get stuck is they try to do something too big too soon and then they have nowhere to turn to ask when they can’t figure out what’s going on. So I’m like, look, the ideal first project is comically small and simple. You just wanna get that momentum going.
Tanner
Hello world.
Chris
So I would take what would normally be like a big project and I’d break it into five smaller parts that each build on each other. So like you click a checkbox, the password becomes visible, you check it again, it’s hidden. And then the next day we’re gonna take it and we’re gonna make it work with two password fields, like a current and new kind of situation. And then we’re gonna change the script so that it works if you have multiple forms on the page, where you’ve got two checkboxes, each only controls their own group of fields. Like how do we do that? And then we’re gonna make it into a library. Like, you know, we just keep growing. Rather than, “Oh, I’m gonna build an app,” which is like most people are just like I’m just gonna jump right into this big thing.
Tanner
Right.
Chris
So that started this whole other kind of snowball effect.
Tanner
This is a perfect segue. I’m fascinated by the education, I’ll call it the education problem, like somebody learning all of this stuff. And you’ve noticed some of the biggest gaps is somebody just trying to start, or they take too big of a thing on at a time, let’s break it up. I’m curious, two things. One, how does performance weave its way through your courses and how do you see that? How are you educating performance? And second is what are some of the biggest surprises or difficulties you find with learning and teaching performance?
Chris
Yeah, actually they’re very related. So just given the nature of what I do, performance is kind of this, just like accessibility, it’s this thread through the whole thing. So it’s not like, “Now we’re gonna learn about,” because every decision you make when you’re building a thing impacts performance. There are the big things but then there’s a whole bunch of little decisions that also impact it.
Chris
And I think the biggest surprise for me, that I’ve stopped being surprised by but then it still every now and then gets me, is the tendency of beginner folks… Like, so I guess I’m surprised by how acutely aware of performance a lot of my beginner students are. Like pleasantly surprised.
Tanner
Really?
Chris
I had people mention it when I was learning and if they hadn’t, I’m not sure it would’ve been something on my radar. But I have a lot of students who, and maybe there’s a selection bias, but they come to me already kind of primed for, like, they ask a lot of performance questions.
Tanner
Like what kind of questions do they ask?
Chris
Well, so here’s the thing, related to that. There’s this tendency at that stage in learning to overfixate on stuff that makes no difference at all, and not process some of the, or not be as aware of some of the more mundane things that have a much bigger impact. So for example, I get a lot of people who get anxious about how the querySelector() method compares to getElementByID(), which is orders of magnitude faster. But querySelector() can still do like a hundred thousand operations a millisecond, so it’s not like it’s slow, it’s just slower. And unless you’re doing that many operations a second, and even then, like you’ve got bigger issues if that’s what you’re doing, right? But you know, so things like that. Or like if I assign this variable here versus there, like, is it going to, you know, what’s the best looping method for performance? Should I use for-each or for-of? Yeah, all the time. It’s like just pick whatever one’s more readable. It really, like in the context of what you’re doing it does not, it does not matter. Whereas, you know, bigger stuff like writing the same chunk of code three times and just changing one variable in each one, or attaching an event listener to a hundred different elements individually rather than using event delegation, those are going to have a much bigger real world impact.
Chris
And so a lot of what I do is helping people kind of either build those habits in the first place or unlearn the bad ones, and try to convince people to stop fixating on some of these smaller, like, either premature optimization or like hyper optimization, where you’re, you know, like the general performance between…
Tanner
Do we have a list of these? I would love to make a list of these.
Chris
Yeah, it’s like the general, the performance differences between most modern JavaScript methods are pretty insignificant. The bigger issue is often with how you implement those things as a bigger part of a whole. And that’s the thing that I try to get people to focus on as part of the courses and workshops. But it’s hard because there’s usually a handful of folks who are very performance-minded, which is awesome, who tend to ask a lot of the same kinds of questions over and over again until we get to the end, and then things kind of start to click at that point. But it’s a lot of like learning by repetition, you know?
Tanner
Yeah. Do those, I’ll call them “performance zealots”, do they ask different questions? Like they’re the same kind of questions but are they, or are they just constant, they hit you up more often?
Chris
No, so they won’t repeat the same question, but they will all be questions of the same variety of, “Is method A or method B faster?” And it’s like, one, there’s a way you could find out. I’d love to teach you. Two… Well, because that’s the other thing too, like a lot of folks don’t know how to test performance. Even beyond like WebPageTest, like with JavaScript, you can run, like you run the thing a few thousand times and measure how long it takes from start to finish and then do it with the other thing and then compare. You know, and that can be really informative as well. So we will often, I have like a, especially in the workshop, I have every other week, we have like a live office hours, and so I’ll pull it up and I’ll run a test and we’ll learn how to do that. But it’s usually a couple of folks who ask very much like the querySelector() versus getElementByID() question. That one comes up literally every session. There’s always one person who asks it.
Chris
And I am, just to be clear, I am thrilled that people are this interested in performance without my prompting. It’s excellent that, and again, I talk about performance so much, I assume I attract more people who are biased towards that sort of thing in the general industry. But it is great. It’s just really funny how often people get hung up on these little specific things instead of like bigger, bigger things.
Tanner
Yeah, it makes me want to draw parallels with other industries, where it’s so funny, the things that you’d say, “Oh, this should be common sense,” and common sense tends to be rather uncommon. That like the things that we normal, average people, like the first time I’m exposed to the industry, or the discipline, I’m gonna think one way, and actually all you need is just a couple small tweaks. And now actually, yeah. Oh man.
Tanner
Okay, I have kept you for a full hour, Chris. I swear to God, I wish we could just go, we could keep going, but we gotta call it somewhere. So here now, Chris, how can people follow you? Where can people go find the Vanilla JavaScript Guy?
Chris
Yeah. The best place to go is GoMakeThings.Com/CatchingUpWithWebPerformance, where I have put together a page, Tanner…
Tanner
I don’t believe it.
Chris
With links to additional articles, podcast appearances, some of my free books and courses and things, all related to stuff that we have talked about in this episode today.
Tanner
I’m going here right now.
Chris
Somewhere buried in the trove of articles there, you will find some information on how I build my websites and some of the things that I do. Just the spoiler: the biggest impact thing I do is inline literally everything into a single HTML file. But there’s a bunch of other cool tips and tricks there too.
Tanner
Look at this page, this is delightful. Everybody, go find this page now, it’s in the show notes. Or just type it out yourself. Fantastic.
Chris
Yeah, I lost my train of thought. I’m so sorry.
Tanner
We got so excited about the promo page.
Chris
So that’s where you find me. Sorry, man. So that’s where you find me. I didn’t have enough coffee today, too, is part of the problem. So that’s where you find me on the Internet. I’m also on Mastodon and Bluesky and kind of on Twitter but I don’t link to it anymore. But you can find me in all those places if you want to yell at me. And yeah, I hope to chat with you on the interweb.
Tanner
Same. Alright, thanks so much, Chris. It has been excellent. Hope we do this again sometime.
Chris
Tanner, it’s been a pleasure. Thanks for having me.
Tanner
Yeah. See ya!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.