#71: How VanillaJS and the Lean Web Can Improve Sites w/ Chris Ferdinandi

Michael Fienen

4 years ago

One risk front end developers run in their day to day work is getting buried by the growing piles of frameworks and tools surrounding us and begging for attention. As JavaScript has grown as a viable language for not just site interactivity, but also our build processes and maintenance tools, it’s easy to forget that sometimes simpler is better. This week we’re joined by VanillaJS advocate Chris Ferdinandi from GoMakeThings.com to discuss why vanilla is frequently better, and how simplified development strategies can lead to improved developer experience.

Followup Resources

Transcript

The following is a machine-generated transcript of this episode. It will contain errors until it has been reviewed and edited, and we apologize for the difficulty that may cause for screen readers. Do you want to help us speed up our transcribing process? Consider sponsoring an episode.

This is episode number 71, we’re gonna be talking about how the process of vanilla Js and the lean Web can improve your sites. We brought in the special guest for that and good evening or morning, everybody. I am your host, Michael Fienen.

I’m your other other host, Aaron Hill. How’re you doing, Michael?

You never say your last name. And now people know now that

I didn’t I said my first name twice, but I said my second name in a different language.

Okay, A zoo long. As long as we’re being consistent about

other other first name

your other other name. Folks, If you are enjoying the podcast, be sure to stop by our sponsors. The this episode is brought to you by the live at Manning Conference Siri’s. They have a conference coming up, actually, depending on how the math of this works. This episode is airing on the 14th and therefore tomorrow is Rust Conference. You can go get a free ticket.

It is from noon to five. You can learn all about rust. Just drop by drunkenux.com slash rust confidence are you s t c o n f. Get a free ticket and learn about a new programming language. You can see

it more and more about rest just in my programming circles, just in general, to more, more better all the time. And, uh,

we talked about on last episode your lex in the background heard it. And now that’s all plugged in. And now Mark Zuckerberg is sending you rest. Information. Internet. God

e. That’s the e. I don’t have a good response to that. That’s brilliant. Well,

here, let let me do it for you. Because that exact problem is why you can find us on all the social media places. If you run by Twitter or facebook slash drunkenux or instagram slash drunkenuxpodcast, everyone a chat with us or talk to us about a problem you’re having or get our opinion on a website. Feel free to drop by our discord.

You could go by drunkenux.com slash discord that will get you an invite and drop you right into our little channel. Aaron, what? You got to drink tonight? I’ve got,

uh, from a few months ago, I got some Balboni Caribbean cask. The 14 year They love it. Yeah, it’s getting low getting down there.

That’s that’s about one night of drinking for me. So wait E try to pace it, man. I would say that that doesn’t reflect well on me. Does I

got I got a bottle of bourbon upstairs? Actually, the Bourbons gone. I got a bottle of tequila upstairs. That’s for the the drinking, drinking

man. I almost broke out my good tequila tonight. and I just I was testing out. Ah, new Segway. It’s a fake. That’s a Chinese knockoff. Segue. Uh, What do you

mean, like a speech? Communication Segway s E g u e. Or do you mean like the mobile device that

the personal transport device? Um, my dad only has one leg, and so he uses one of those now for getting around his school and and getting around his property and stuff. But it’s starting to get a little dodgy in terms of battery life and stuff. So we found him a new one that’s gotten like 19 inch off road tires on it. But it’s just this Chinese knockoff. And it also knocked me off earlier.

Um, it Well, it threw me off and also try to run over my leg. And so I’m like, You know what? I need something a little lighter. The seed Maybe don’t give that

to your dad. That only has one leg. Oh, no,

he’s used to it. It’s OK, OK, he’s falling off his other one many times,

like in the first place. He’s used

to driving those things. I just got it in the symbol didn’t wanted to make sure everything was working right, and it ended badly for me. But I wanted I wanted light. So I’m actually doing something I don’t normally do. Which is Glenlivet 12. Um, it za vory light, slightly fruity. Highland. I’m not Highland. A space side.

Uh, it’s got some heavy grassy notes to it, and it’s a little more like refreshing, as far as like, scotch flavors Go works really well with a bunch of ice in it, which sounded really good this evening. So that’s where I have gone. If let’s see, I promised you a guest. And so I went out and found one. What did you get? Well, actually, I I say I went out and found I am never the person who goes out finds Click

out. Let’s go get the best really quick.

No, I’m not gonna click out. The guest is in the window next to you. Uh, folks, uh, I didn’t find him. He actually came to us and said, Hey, you you want to talk about lean web? And I said, That sounds super cool. Please Welcome to the show. Chris Ferdinand e. He is the author of the Vanilla Js Pocket Guide Siri’s and also the e book. The lean Web.

He’s the creator of the Vanilla Js Academy training program and also host of the Vanilla Js Podcast. Folks welcome folks, Aaron, Let’s give

a round of applause for Christmas money

E. Maybe I’ll add some sound effects in there, and the sound even better will seem like we’re in a studio. Get a laugh track, Chris. Man, Thanks for coming on this evening. I’m really excited about this topic because it’s something I know. Aaron and I. We’ve mentioned the phrasing vanilla Js more than once, though I don’t know that we’ve ever done a great job explaining it. We did back in Episode 27.

Talk about Is jQuery? Still important, Should you still care about it? And I think that’s probably where we really talk to Maura about this idea. Probably more than any other time. But, um, I’m excited. Thio help people understand why simple is better. Simple is good. Especially in this world where complicated is

too easy. Yeah. No, I’m excited to be here. I’m excited to talk about it. Um ah, yeah. I’m actually hearing you run for all the stuff I do and hearing how many times you said Vanilla Chet’s It’s called Casio. I am very on Brand,

apparently. So let’s let’s start right there. Right. What is when people say vanilla Js? I haven’t heard of that plug in before. What’s your answer to that?

Yeah, I get the whole, uh Oh. Is that another? Uh, another framework. I have to learn

quite a bit, too,

which is fair. And I actually think it, um, as a phrase, it it started off as a joke. There’s this vanilla dash Js dot com website that, um, positions it like it is a framework, and it’s like, really dry sarcasm. And so a lot of people google it, find that and get really, really confused. So, um, if you’re not familiar with the term vanilla Js is a phrase used to describe coding with native built into your browser JavaScript methods and AP eyes instead of frameworks, libraries, um, etcetera.

It’s not another plug in its just using the javascript that comes with the platform. Yeah, and, uh, I have because I know a lot of people actually really hate the term because they’re like, That’s not a thing.

It’s just Java script. Um, but if you’ve ever tried to like Google, um, solutions and you want to exclude all the other stuff, you’re either doing like this really crazy kind of Boolean search thing where you’re excluding all the things or, you know, like I’ve found, even if you type like this is back in the day, like without J query, you’d get a whole bunch of, like, how to do X with jQuery kind of solutions because, you know, so vanilla jazz is like a nice filter to say, like, I don’t want all that other stuff

affirmative affirmatively excluding.

Yeah, and it’s like it’s admit, definitely confusing for beginners. But so are a lot of other Web terms. Like if you don’t know CSS stands for cascading style sheet, that’s confusing to, and then you learn it and you move on. So I’ve been on kind of let’s educate people, um, mission

going to stack overflow and finding, trying to find a Java script solution that doesn’t use jQuery. You know, it’s like every example uses jQuery, and so if I mean great, if that’s what you want. But

Chris, what is the reason? Give me like a small handful of reasons why, why we should prefer vanilla JavaScript, JavaScript without any core or anything fancy basic JavaScript over using frameworks or anything else?

Absolutely a couple of reasons. First of all, um, performance is for me. Hands down. The biggest reason the like the platform close to the metal JavaScript is always going to be orders of magnitude faster than any library or any framework. Even the ones that tout performance as a feature are still never going to come close to what out of the box JavaScript will give you in terms of getting functional content in front of your users that they can start interacting with.

If you run any sort of platform that makes more money when more people stay on your page, that’s an important metric. That’s something you should care about. Um, it’s even Maura cutely, um, important when you start thinking about lower bandwidth users, mobile users, especially people who are on lower and devices. Um ah, lot of folks who build for the Web work on nicer machines and have often but not always better Internet connections.

And that is not necessarily the people who are using the things we make, um, and for them way mawr than someone who’s on the latest iPhone, Um, or latest MacBook or whatever the performance penalty you get from loading all this extra Java script, Um, and then the layers of abstraction it throws on top. Just make the biggest difference in the world. Use

the magic word there. Layers of abstraction, right? Because even when you think about something like, let’s say, J query, jQuery has to be written in normal Java script. And so all of those clever functions and methods and stuff that they’ve given you access to under the covers still have to reference all the normal Java script. It’s nice they, you know, take 20 lines of code.

Reduce it toe one for you, which is nice for you. But it is an abstraction layer at that point. So it is just running middleman and therefore is slower than had you written it yourself.

Yeah, and there’s two. There’s two pieces to it, so the first is the you know, like it’s ah, it’s a helper function that probably ties into another helper function that ties into another helper function that eventually gets down to the raw kind of code that the browser actually runs. There’s also the up front costs. So J query min ified Angie’s. It is about 30 kilobytes.

Um, same goes for the more popular libraries view. React. They’re about the same size, too, And just as an artifact of how browsers download and parse and render JavaScript, um, those even the 30 kilobytes doesn’t really sound like a lot, but it can add quite a bit of Leighton. See to the actual startup time of your app or your Web page

because it still has to be. Even if it’s only 30 kilobytes, it’s still a round trip to a server somewhere. Be that a cdn or your host or whatever.

Yeah, and then on top of that, you know, you get 30 kilobytes of HTML. The browser gets it, it parses it. You get 30 kilobytes of CSS. It still has toe do a little bit of parsing with it, but then it can start painting it pretty quickly. But JavaScript is a really special kind of creature in the browser world, so it delays. Um, it blocks rendering, um, it also blocks downloading of other files because it often changes what’s on a page.

And browsers don’t wanna download stuff that’s just gonna get removed so they will literally stop all the things download the file run through it wants to see what’s in it and kind of compile all the pieces before they then run through it again and actually executed. And that doesn’t necessarily sound like a lot. But once you kind of put all the pieces together, especially if you’re on a not, you know, high power device.

Um, you can start to see delays of multiple seconds. Mhm. And yeah, it’s just it kind of sucks as a user when things, um, hang time out, don’t work, take forever, um, in a pandemic like we are right now, this problem becomes even more acute because bandwidth demands are much higher than they were a few months ago.

E can’t imagine why.

You know is everybody has moved remote. It’s like uneven mawr kind of pronounced issue. Um,

Crystal, Yeah, a talk here a while back. And we’ll put a link to the video in our show. Notes on the lean web. You quoted Zach Leatherman on this in a way that really I thought to exemplify this well, he tweeted that which has better first meaningful paint time a raw 8.5 megabyte html file with the full text of every single tweet, every single one of my 27,506 tweets or a client rendered react site with exactly one tweet on it.

And he says, It’s the 8.5 Meg file is about 200 milliseconds faster than react site with one tweet.

Yeah, so I did some. I did some math on this. So reactors, 30 kilobytes. Let’s say to render that one tweet, you wrote an additional 30 kilobytes of JavaScript, which seems kind of absurd. But let’s say you’re, you know, 60 kilobytes in, um, that raw HTML file is 140 times bigger and 200 milliseconds fast. It is just nuts. It’s absolutely crazy.

But, you know, we don’t think about where those performance bottlenecks are. Usually we think about how do I make what I have Faster not. Why is it slow to begin with Yeah,

or even, like, you know, especially older developers like you and I older quotes, um, you know, both

have more hair than May, so

I wanna hear it. We both were using the Web back when bandwidth was a bottleneck, but now it’s It’s really like the The Page Road is the bottleneck, and that’s I mean, you can add CPU speed. You can add memory and other stuff. But you know, there’s always gonna be that rendering because it’s all like high level client side stuff, even if you like, beamed it directly into your computer with, like, special photon rays or something instantly, they’re still going to be that final paint cycle.

Um, performance is only one piece of this, I think one of the other, the other kind of things here we could like do a whole show on just JavaScript performance and all the ways it screws it up. But one of the things I’ve really, I think one of the more compelling arguments. It’s really weird, Like getting people to care about users is hard because, um, there’s kind of this, this argument that happens.

People get really hung up on the like, the developer experience. So, um, Alex Russell is a developer on the Google chrome team who talks quite a bit about performance and back in 2018 he wrote this article called The Developer Bait and Switch, where he talked about this strawman argument he has with people all the time around frameworks.

And to quote Alex, it goes, uh, it goes, these tools let us move faster and because we can it a rate faster after we live better experiences. And so there’s kind of this, um, you know, this false equivalency of like, Well, you know, yeah, the performance. But we can crank out all these new features, so that’s better for the user. And we can use Mawr Java script that

begs a really big question

like like yeah, and like the argument is just wrong. Like, it’s not like I used to be a little softer on this, but it’s just an objectively wrong argument for a whole bunch of reasons. Um, I think you can. For me, it’s two things. It’s I think the idea that frameworks equals better developer experience is, um, do be Is it best? It’s probably true for some developers and also very much not for others.

Um, not all developers or Js developers. There’s a lot of people who contribute meaningful things to a project who don’t know JavaScript. Nor should they be expected to on Beacon. Unpack that if you want. The other piece is I think you can clearly point to situations where just because you’re using these tools, um, doesn’t mean that the end result, even if it’s easier for you, doesn’t mean the end result is actually better.

For the user developer expediency isn’t the only thing that leads to like faster creation of stuff the users want more isn’t always better, Like there’s a whole bunch of us reasons why that argument just literally doesn’t make sense. Um, so we could go on a bunch of directions, tell me which way you want to go with this Java scripts

kind of in a unique position, right? Because it’s it’s not PHP or ruby or Java Like these other languages, they all have libraries. They all have frameworks to help things along. But being that they are server side related and they are, you know, built on top of server architecture, er there is a baseline consistency that they don’t have to fight with.

That Java script has had to up until very recently, with with the browser market edge. Adopting Web kit was actually huge for that because we’re really Onley developing for three browsers now instead of four. And it caught Microsoft up by light years in terms of what they could support and talk about. Because, like when I think about jQuery, Um, like, that’s That’s the classic JavaScript framework that so many people have been exposed to.

jQuery was solving a very real problem. 12 years ago, jQuery was created because of the inconsistencies in what were we then, like That was s four or something back that far? Yes, three. Trying

trying to select an object by a class was like

a huge huge browsers return things in different ways. They didn’t support all the methods or all the returns like it was. It was super inconsistent.

I I remember wearing J query and also mood tools on prototype. It was yeah, around the same time that I was running CSS and I remember that, uh, J query made complicated things like animations and other interactions easy. Like it was just like, Oh, I just one mind of thing with some parentheses and a CSS selector and boom, I have like a fly out menu or whatever.

And we talked about this on Episode 27. That was one of the sort of based arguments was, You know, jQuery isn’t bad. It’s just starting. Outlived its usefulness in a lot of ways, and people still like it because they learned it 56 10 years ago. And so they’re used to that. They’ve they’re doing Java script by proxy, which, as we’ll get into a little bit more, you know, learning that way kind of undermines skills to an extent, in my opinion, anyway.

But that’s when we talk about this and we say this. It’s not that like, Oh my God, all libraries, right? They aren’t My God, if you do date of is you can’t survive without D three or Chart J s like I’m not writing that stuff from scratch. I’m That’s not in my wheelhouse. I’ve tried

its’s. There are certain things I’m happy to use tools for, and I think just as a quick aside, um, I constantly hear this like quippy little like Oh, if you’re not using a library, you’re writing your own from scratch, and it’s poorly documented like but like no, Like I’m still standing on the shoulders of Giants. I’m not hand coating every single line of code and everything I create.

I just like I’m being more selective about the tools I use and Onley reaching for the tools when they actually help. Like I think we have is a problem this industry of, like just use, react or just use view. It’s like the old like nobody got fired for hiring IBM kind of thing. Applied toe Web development like, you know, getting in trouble for using react even if it’s the completely wrong tool for the job. It has a

place you love it,

right? Yeah, and it has its place. It’s just not for everything. Um J query. I love J Query in large part, not just because it was such an awesome tool back in the day. But so much of the modern Web development experience exists because jQuery, carved or paved the cow paths. They said, Here’s a better way that we could do things and eventually the browsers caught up, not always in his eloquent away.

Like I really wish query, selector and query selector all had a shorter syntax. Um, It’s kind of a lot to right, but things like toddling classes and selecting elements and filtering through a raise and jQuery showed us a much nicer way to do all those things.

That’s an incredibly good metaphor to the cow path thing because not only that, with the browsers, but also like any X e x e s six Ah, lot of the updates that came in the S six happened explicitly because of the problems that jQuery was solving prior to that. And so they said, we need to solve these problems in the language, and so they not only got a lot of that stuff worked in, they changed the entire release model of JavaScript from that point.

So now we get those annual updates with, you know, now fewer and farther between in terms of of the changes. But that’s why this conversation now centers around. You don’t need jQuery for all this anymore because they solved the problems. And like I say, the browsers have come together much better in terms of their support again. Because that baseline, I think, was normalized really well over the last five years. Give or take

Well, there’s one thing you mentioned that I think, um, has to kind of implications. You you talked a little bit about, you know, with the back end. Um, you know, your ruby PHP like frameworks and libraries air very normal there, Andi Just commonplace. And I think I think for me the the big the big difference between like, why is that OK? And PHP? And why is it a problem in Java script?

You touched on one piece of that, which is, um, kind of the control in the front end. Like, not all browsers behave the same way. And you know some of the problems there are not just not all browsers behave the same way. But, like in a back end environment, you control the server. How much You know how much bandwidth it has? Um, how big it is, what the i o support there is. And in the browser, you have no control.

You have no control over the bandwidth of your users. The devices they’re using, the computing power the browser like it’s just all out of your control on DSO. For that reason, it’s a much riskier environment to code in than the back end. Um, but the other piece of it is, um you could use 100 libraries in PHP, and it has no real impact on the front end performance for your user, assuming you use them correctly.

And, yeah, but every extra bite of code you use in a client side app is a cost. You pass on to your user for your own convenience, and so it becomes a very different kind of thing. It’s an extra bite that they have to download that consumes data against their their data plan. Um, an extra bite. The browser has to download in, parse and run and do something with, um And so in that way, it’s a very different thing on guy.

I think the analogy to the back end is really appropriate, because from me, it feels like this obsession with frameworks and libraries doesn’t start with Jay Query. I think in the J Query era people were very cognizant. I shouldn’t say era because it’s still around today. But in Jail quarries heyday, people were very cognizant of how much JavaScript they used in general, how much code they kind of sent down the wire because It was a much more bandwidth constrained time than today.

Um, and there’s data to back this up. Remember seeing recently kind of, ah report done by Tim Catholic on the true cost of frameworks. And he didn’t analysis and found that sites that use J query sent way less JavaScript overall than sites that used other libraries and frameworks. And, you know, there’s natural performance implications as a result of that.

Um, for me, the kind of the rise of frameworks really coincided with the rise of the full stack developer, um and no, no disrespect to full stack developers because, you know, they do awesome things. But, um, I have personally found that a lot of full stack developers had a back end background first and moved into the front end because that’s where a lot of kind of the business demand happened.

Or, you know, businesses would say like, Oh, hey, we want to do all this stuff in the front end now, you know, code, you go write it. And you know we don’t wanna hire more developers.

Man Army. That is the majority of folks, I think really underestimate how maney one man armies there are one person. Armies there are out there,

and so naturally is these folks move over into the front end. You bring a lot of these. Well, this is how we do it with a key or in Ruby. So let’s, you know, let’s you know, let’s replicate that in the front end and it’s not. It’s a reasonable thing, but it had a lot of kind of trickle down effects that I think have been bad for the front end on. Don’t fault anybody here.

Idiomatic cross contamination is something that I see a lot. Ideo ruby on rails almost exclusively now. And I can usually spot people who come from other language expertise like Java or PHP or heavy JavaScript like front end reacting all that because of the kinds of stylings and approaches that they bring in to Ruby like Ruby is different. Um, it’s heavily duck typed and everything.

And so people who are used to static type backgrounds approach problems with a different kind of attitude, I think, and it’s perfectly valid for the ones that they come from. But in Ruby, you automatically you to approach it differently

to say Yeah, Jeremy Walker and a couple of episodes back when we’re talking about exorcism, use that word idioms. And it’s like that I have now, like baked that in any discussion I have about programming languages like That’s That’s the word is always missing when we have these conversations. Chris, you used a quote. There’s an article over at your site ago. Make things dot com. Why do people choose frameworks over vanilla Js?

And I love this particular quote. A contractor wouldn’t use a wrecking ball, toe hammer and a nail if she were hanging a painting. She would use a hammer, but if she were installing a new roof, she’d probably use a nail gun. And that’s the kind of thinking that I think comes into play in all of this sort of discussion, too, because you think about okay, yeah, that back in developer kind of coming into the front end, they think, Well, jQuery does all the things I need it to do, So I’m just going to use that because that’s the library that that accomplishes all the things.

And so they’re bringing in that wrecking ball, not realizing that, yeah, they only need three things out of it with, you know, CSS. We were talking vanilla Js a lot here, but CSS falls into this a lot, too, because the same way how much ghost code is out there in terms of classes that we created. And then we stopped using that mark up in our sights. But nobody thought to go back and say, Are we still using these particular classes for all this stuff?

And I don’t even want to know. I’m I I am genuinely afraid in our code base at work, like how much CSS is in there that is never called. It’s a hard thing to audit after the fact as well, because you have to run it, you know, run any task against a ton of pages to make sure you’re getting coverage. But it’s the same type of problem, though at that point in terms of like the bites down the wire, you know, all of that is stuff you’re making people download for no reason, and jQuery and libraries like that.

That’s that big risk that they carry. Sending all of this all this tool. You got this giant wrecking ball here it comes. But man, you didn’t need all that It you only needed a fraction of it. And people aren’t good at dissecting that little bit of work. It’s also faster The to your point. Chris, that discussion about speed, right? It’s fast to just throw J query on a site.

It takes a little extra time to write those four or five functions you may need to use. But you’re you’re robbing Peter to pay Paul in that equation.

Yeah, I think you know one of the other pieces, Thio. I found a lot of folks like, if you were If you’re used to a library or a tool, that’s where you started off. You don’t necessarily realize how much the native out of the box web just kind of gives you for free. And I very much am a fan of learning with whatever tool gets you from I know nothing to Oh, shit.

I made something that actually works like as quickly as possible because I think learning momentum and like seeing that excitement of idea to execution is really important, you know? So if if jQuery or view or whatever makes you feel like you can do really cool stuff, having not known how to do anything before, like by all means.

But, you know, if you do do that, you sometimes, um you know, you don’t necessarily realize like, Oh, there’s actually a native method that does that to That’s just a simple to write, you know, for example, like, people talk about JSX all the time and react, you know, making it really easy toe create kind of html from strings and variables, but, um, modern Js template liberals give you a very similar syntax.

Um, with the same level of these, you know, I kind of went off on a little bit of attention here, but, you know, Thio kind of circle back a little bit. Um, there’s that whole. Like, if it’s good enough for Facebook, it’s good enough for me thing that happens with react. Um, and I think the react was built to solve a very specific problem that Facebook had with their very specific garbage. You I’m sorry, not garbage.

Why no offense to any Facebook developers there? Listening with their very specific

was garbage. It was layers upon layers upon layers.

If you really want to be like, Oh my God, that is horrific markup. No disrespect to any Twitter developers who listened to the show, but right click on the favorite button. Tweet on bond. See how Maney nested layers of gives take you to this not actually a button button in the U I. Um And so if you have that many layers of HTML, a framework that uses a virtual dumb probably does actually give you some performance benefits, because the amount of dipping that has toe happen to get that many layers deep is pretty big.

Um, but for most you eyes that are built, I call them, maybe more sensibly, irrationally. Maybe you still want state based to you. I, for example, like you probably don’t want to use vanilla Js for that. You don’t wanna, like just code your own state based to you. I think I did that once. It’s totally insane. Don’t do it, Um, but like if you’re going to do that, pre act is a really nice alternative.

That’s only three kilobytes. And even after the initial render, it is still orders of magnitude faster than react for most user interfaces like, if you’re not crazy, levels of nested dibs, deep reactions to user interactions are somewhere between three and 10 times faster and pre act than they are and react, and the overall file sizes smaller and it uses the same modern A p I and I could go on. You know

what the you mentioned there about, like the speed to which people can get engaged in stuff that gets in the concept like the Doherty threshold. Where was it? The 400 milliseconds, I think, is the measure of the dirty threshold, which is just the speed with which Ah, user interaction doesn’t feel delayed or broken up, like the time between clicking something and seeing something happened to the user.

If it’s below the Doherty threshold, it feels instantaneous, even if it isn’t in those situations. Technically, technically, fast enough. Yes,

that’s a very good point. Um, similar Thio. It’s not exactly we were talking about, but something you just said kind of made this click in my head. Um, the other. You know, we talked about a little a little while ago. The kind of this idea of tools letting people move faster on. Do you know these frameworks and libraries air really helpful for, um, kind of the developer experience.

That is true for some developers, but these tools also have a really negative gate keeping experience for a lot of other folks. I found the developers with a bit more experience. Often times feel like react does a lot for them and developers who don’t often feel like react This really complicated beast that makes no sense and is really difficult to learn.

And if you’re building an app entirely and react and you’re also using, like CSS and J s, So now you have to write your CSS and JavaScript to, um it means people with, like, deep expertise and CSS, but not javascript can’t contribute accessibility experts who don’t know how to write JavaScript can’t contribute the way they used Thio before. And there’s like a really tangible example of this with, um, wordpress eso back in 2018.

Their accessibility consultant are sorry. Their accessibility lead re in right field, resigned from her position, Um, and documented wind this really detailed article? Yes. So it sounds like you guys already know this story, but for those of you who haven’t, um, haven’t heard it at the time, WordPress was rewriting their their content editor, um, with with reactive Project Gutenberg and because neither Rian or anyone on her team had react experiencing because they couldn’t find volunteers in the community, they could no longer go in and make accessibility fixes themselves.

And this is like an entire rewrite of the u I. So this is not just nudges and tweaks anymore. This is, Hey, whole new you. I we need to fix any accessibility issues, and

it’s hard to even make the suggestions, let alone do the actual fixes when you’re kind of blocked out at that level.

Yep. And so as someone who is, um, not I’m inaccessibility enthusiast, but I am by no means an expert. And so being told, you need to do this to fix the accessibility and then being able to actually implemented correctly and not screw up other things is sometimes way harder than it seems like it might be on the surface. And if you are a engineering team that is also trying to crank out all these like features related to a new product, accessibility fixes air.

Now just kind of another thing in your cue that you’re gonna push aside because it works for me quote unquote. I’m not saying you should do this, but realistically, that’s what’s gonna happen and, you know, re in and her team used be able to just go in and fix these things. Now they can’t. Um, So she ended up resigning. Gutenberg goes live, And in May of 2019 and accessibility audit of the now live Gutenberg editor was conducted.

The report ended up being 329 pages long with a 34 page executive summary documenting 91 accessibility related bugs. Um, that

wasn’t Rachel Cherry involved in that.

Yes, she waas uh, she did a really detailed analysis of all the issues in the report breaking them down. Uh, real time is, she read the report on Twitter, which is really awesome.

If anybody wants Thio here from the horse’s mouth on that, go back and listen. Episode 37 She was on the show, and I was just looking for that. Is that I’m like that. Rachel, I’m gonna find out what number was.

I did not realize she was on the show. Okay? Yeah. So if

you have it on the show,

heard that episode Go back and listen to it Because she Rachel is amazing. Um and yeah, but so I think this is a really clear example of it’s good for some developers. Not good for others, because the a lot of the accessibility folks were developers, just not javascript developers. Um, and it very clearly resulted in a worse experience for at least segment of users. Can you this ambiguity

it there. So you said it is good. Some developers another

sorry in this context, I mean, frameworks like the idea that these tools create a better developer experience and automatically and therefore also create a better user experience.

I want to talk a little bit here to kind of round out the episode about how all of this like this, this thinking about writing based Java script writing to the what we you know, the rial Java script. Whether you you know, e s six. Uh, a script. 2015 whatever you call it. Um, but has it bleeds into images and CSS and you know CMS s I know.

Chris, you’ve got this This whole kind of convention that you advocate for called the lean Web folks may have heard of, like, ideas like lean UX, for instance, as like a procedure for approaching user experience. But lean Web is sort of this less is mawr kind of concept as, like how little can you do to get the best value out of it? What? How do you describe lean web when you sit down and talk with folks?

Yeah. And so full disclosure here. I did not invent the term Thomas folks did. Um, he used it a couple times on Twitter, and I just felt like it really kind of resonated with the way I think about building things for the web. So I co opted it and always make sure that I give him credit because he coined the term. Um, But for me, um, the lean web means, um uh, it’s it’s a maybe more e feel like at this point in Web development as a profession, we’re very focused on developer experience. Um, and tooling Can you define

what you mean by developer experience?

Yeah, So I see this term used often, and the way I think about it is, um, uh, focusing on making it as comfortable and convenient and efficient as possible for the developer to write code. Um, the the kind of the unspoken piece there is over the user experience. Like if you had to choose one over the other. I feel like we, as an injury have put more of a priority on how efficient developers are to the expense of the user.

And I think the lean web represents a shift to the other direction. Um, which is not necessarily to say, make it inconvenient for the developer. Because I actually think in many ways, um, or simple, back to basics experience could be better for developers to, But it really puts more of a focus on the user on performance on picking the right tool for the job on it’s almost like development minimalism.

Eso, uh, which is the first time I’ve ever used this phrase. So I’m going to kind of think out loud on this one a little bit here, But, um, uh, you know the idea of using just what you need to achieve what you’re trying to dio when nothing more Um S o you know, that manifests in a couple of ways. That means doing things like embracing the stuff the platform gives you out of the box as much as possible.

Um uh, but not necessarily like breaking your back trying toe like so we talked about animations a little bit. I think that’s a perfect example of our visualizations, rather because you could do a lot of really cool animations with CSS these days. But, um, visualizations if you’re doing visualizations unless you are a real glutton for punishment or you just wanna learn writing your own like raw data visualization code is maybe not the best use of time.

You know, at that that case, I absolutely would recommend, you know, reach for a library unless, like, you have a real passion for Do you really want to dig into it like I’ve done things like that before and then end up using my own tools over and over again because I like them.

But, um, you know, if you’re not crazy like me, um, it’s okay to reach for third party tools when we do reach for third party tools, I would love if, as an industry, we started being a little bit more mindful and deliberate about the tools we chose keeping them or small and modular grabbing the spoon instead of the multipurpose tool, Um, or just the scissors or, you know, to use our earlier analogy.

Ah, hammer, not a wrecking ball. Um, you know, if you’re doing data visualization, um, something like Chart V s chart Js Rather is going to be a little bit smaller than D three is in some situations, Not all. If you need state based you, I, um, something like pre act or spelt are going to result in a smaller footprint than react or view or angular.

Are not that those tools or bad? Um, but they have a very narrow use case compared to kind of some of the other things. They include a bunch of stuff that you might not need, most notably the virtual Dom. In most cases, um, and I think the other piece here is bearing in mind that the web is for everyone.

This is maybe more of, like, a mindset thing, but it applies to both the way we build, remembering that not everybody has the Not everyone who’s gonna be participating has the same skill set that you dio or the same level our expertise and so things that feel easy to you might not be easy to other people who are going to be meaningful contributors on a project.

And from a user perspective, not everybody has the the same equipment, the same bandwidth, the same ability to kind of download all this code that you want to ship for the thing you built on Bond. If you think about that, um, you know, if you kind of keep that as a focus, it really changes the way you build things for the Web.

You really notice it when you run an NPM install on a new project and it says for this site that’s gonna be a make and a half when the user downloads it, we’re going to give you about a gig and a half of JavaScript source files and dependencies that you may never actually need. But because we ran into that at work with one of my co workers, he was he kept running into errors on his development environment, and we’re we couldn’t figure out why.

And it come to find out he was running NPM install on a project that was too big for the hard drive he’d ran out of space. It’s like a very invisible tax, so to speak. But it is one that I do feel like that’s when when you get in this stuff like that and as far as like developer experience goes, yeah, let me get the bare minimum Thio to get this stuff going. Why am I downloading stuff for even on a fast machine?

I’ve got gigabit fiber. I am lucky. I I love my world right now. And when I have to take 15 minutes to download a project to get started on something,

God help you efficient out of date dependency, right? Yeah, I’ve got

22 comments on what you were just saying, Chris. One of them is I strongly advocate to anyone I pair with especially juniors. That it’s our prerogative are not. Our prerogative are the one that’s product but mandatory pejorative majority, not pejorative it, czar duty, especially the right word imperative. Thank you. It’s are imperative that as developers, we should inconvenience ourselves if it means adding more convenience for the user every time.

Because there will always be ideally, multitudes of users using what we make. And it’s on Lee us. In a short like in the now that’s being inconvenienced so that’s always the right tradeoff. Um, the other one is regarding developer experience. I think it’s funny you mention that like, I definitely understand we’re coming from, but I’m actually giving a talk this weekend about Cody Wax, and I’m still working out the details on it.

But the idea is the the way that we write code that Onley developers will oversee. The user will never see any of this stuff. It’s just the abstraction that we’re writing is so often like buried under a mountain of cognitive load, that it makes it very difficult to write and maintain, and it makes it far more complicated than it needs to be. It could be something as simple as like, you know, not naming a variable with a meaningful name.

It could be using excessive indirection. Um, framework sometimes add to that, and sometimes they subtract from it, and it really depends on, I guess, on how the framework approaches things. Um, but I think that sometimes developer experience gets shorthanded with Oh, look, I can do a lot of stuff that writing a single line of code, but you have to know where to put every single brace period prince and letter in the right order and sequence.

And God forbid you use a prince instead of a brace for something. Or forget to use dot, dot, dot or whatever else, Bond. And I think that

yeah, and I don’t mean to take away from the developer experience like it’s important. No, it’s just not know, you know, you hit on it already. It shouldn’t be

at the expense of the user. Certainly. You know,

I’ve heard a lot about how how great all these tools are that we have in our at our disposal, whether that’s your your Jenkins or Travis C. I. Type tools and the stuff that you know gulp lets you do and Web pack and parcel and all these bundlers and and module loaders. And the one thing I can think of is every time I run in PM build, I cringe because there’s so many failure points in anything I do anymore.

And so anytime I think about, like developer experience and simplifying tool chains, you know that as much as the user product is important, it’s like there’s a lot we can do to make our own lives so much simpler if we don’t have all the dependencies. If we try to, you know, a trance pile er is important. A trance pile, er is, you know, especially in terms of supporting i e 11. Still, a lot of people still need to go back a little ways.

So all of this talk about things that, like Jake, weary solved. You know, that’s what a trance pilot help solve. It keeps us kind of true toe to that without us having to do the work. But that process of making sure my stuff works so that I could make stuff work for other people is really important to let me give a metaphor really fast to kind of wrap things up here and see how this land we’ll go. Plus

one meta five. Turn it up. Gonna

do that? I have only one left in me. So

all right. Three.

When I think about lean Web, when I think about ideas of less is more in programming and coding and Web development and simplifying user journeys and user experience, I think of all of this a lot like salt. Salt is one of the most important. I was about to say inventions that Z Way invented Al Gore invented salt in 17 38. Uh, salt as a utility for food as a tool we use to enhance food and make food better is so important.

The other day I pulled, I got one of those microwave potato deals. It’s absurd because potatoes air easy, but it was on sale. It was like the day before it expired. So I thought, Sure, I’ll grab it for a buck and a half. Well, it’s like, Yeah, no, it’s like a chopped up like new potatoes or whatever. The little yellow potatoes, roasted potatoes Stick it in the microwave for four minutes and you’ve got a tray of potatoes.

Yeah, and they were so salty they were inevitable. I I don’t think that’s why they were on clearance, because I’m hoping nobody tasted them before I got um, But salt is the metaphor for this that I think brings it all home you can so easily as a developer add too much salt to the things you’re building and just put too much in there that, you know, when you think about your on boarding processes or your user experience, you know the way that stuff gets interpreted by the people who aren’t you is really important.

And you have to think about the taste that leaves and not just for them, but for yourself, because you’re setting yourself up for what? Whether it’s technical debt, you know, things. You have to go back and take care of like that stuff. They taste great now, but your palate me get refined later and you realize, Oh yeah, what was I doing? So think about it that that’s my my lesson for this evening

to get analogy.

Would agree with that. Yeah, So you do need some salt or but just you can’t you need

some? Yeah, you gotta put a little bit in there. That’s fine. It’s It’s all about the refinement. And, you know, Salt Bae. Is that still salt base? Probably not a thing, right? I’m good at the memes, but I get a little behind. That’s

that’s the guy with the salt. I thought it was very dusty. E

way watch. We watch cooking shows at home, and it’s like every every chef every time they need a little more salt. It’s just like the thing. Every developer to

little more salts.

Chris. Man, thank you so much for jumping on tonight with us. I’m e don’t worry about it, man. Don’t think about it too hard. I’ve tried to wrangle Aaron as much as I could. I know He has absolutely derailed half this conversation. I hope everybody learned a ton. Um, if you didn’t, it’s errands. Fault. But Christmas will. Kelly. Dude, you brought it up. Kept playing May thistles Getting so weird.

Chris, I’m gonna give it to you to save us. Take the microphone, take a couple minutes here. Tell everywhere they can find you what you got going on or anything else you want to share.

Thank you guys so much. I really had a great time chatting with you both. Um, you know, not so much, Aaron, but what could you dio eso? Um yeah. So for anybody who kind of enjoyed this, Andi wants to dig into it a little bit more. Uh, go make things dot com Every weekday, I write a short little email with code snippets, tools, techniques, interesting stuff from around the web. You can find that at go make things dot com.

And if you had to gomakethings.com/drunkenux. I have put together a huge list of links and additional information from all the stuff we talked about in today’s show. So if you wanna, like, really dive in, that’s probably the best place to go. You can also find my contact info and you want to email me and tell me what an idiot I am. That’s there too. So, uh, what’s the drunken

Michael? Let’s see. Drunken ux dot com slash go make things and make a point to something on Christmas site.

Um, I’ll make it point to his vanilla Js academy. How does that sound? Yeah, like that. That seems like a turnabout is fair play. Um, that’s fancy, folks. Also make sure you sign up for his podcasts. The Vanilla Js podcast. You can find it on Google. You can find it on apple Spotify, I think pretty much everywhere. Probably every fine podcast host near Ugo, right? Yeah, that’s that is the way we do this.

So, um, the thing that is awesome about his podcast and he’s not saying it, but I will. Every episode is like under 10 minutes long. Generally, um, which makes it the absolute perfect. You wake up in the morning, you got a new episode of it hit, play, drink your coffee. You don’t have to put up with it for a Knauer like some shows that go way beyond what? They didn’t know that z even possible.

Dude, this is it’s editing laziness. I don’t know how you the hour long episode with a guest is

my nightmare. We used to be longer. Yeah, Poor Michael.

Oh, you can if you wanna trade instead of trading links with us on your l’s, you should trade social media contacts with us on Twitter and facebook/drunkenux or Insta Giggles dot com slash drunkenuxpodcast and come talk with us on drunkenux.com/discord.

And you could also go to drunkenux.com/gomakethings, which is going to then 30 and redirect back to drunkenux.com Right, Where’s that’s? That’s pointing to the vanilla Js economy.

Now we’re just Yeah, you’re just trying to break shit. See, that’s why we can’t trust you on the show anymore. I fired twice. Remember

what you gotta give me Billy Martin. Though Way browser gives up, let’s let’s find out. We’ll do drunk into extra com slash Go make things, which a point to go make things like com slash junkanoo ax and vice versa,

folks, I don’t want to give a shout out as we were recording this, uh, if you just to give a testament to how close we’re paying attention to things somebody actually hopped on our discord while we were recording this episode. So I’m gonna give a shout toe. Angelo, uh, thanks for stopping in and chatting with us while we were chatting with Chris.

Uh, but you can join Angelo, and everybody else said drunkenux.com/discord Because at the end of the day, we practice one thing that we preach and that one thing is the most important thing. Whether you’re writing all the code, none of the code, some of the code using libraries as long as you are keeping your personas close. But your users closer. I’m a happy man. Yeah, yeah, yeah. Okay.