Everything in web dev is Amazing!

Welcome to syntaxes, the podcast with the tastiest web development treats out there. Rid. Today, we've got a positivity bomb for you. We're gonna talk about how everything in web development is amazing.

Rid. It's very easy to be a a Debbie Downer or, sort of be down on on how lots of things are still hard. Rid. But in this episode, we're just gonna kinda go through the last 5, 10 years of web development and talk about how much better everything has become.

Rid we are sponsored by 3 awesome companies. First 1 is FreshBooks Cloud Accounting. Second 1 is Century, error exception and performance tracking, and third one is Linode.

They do Linux cloud hosting and a whole lot more. We'll talk about all of them partway through the episode.

So, Scott, how are you doing today? Feeling positive?

Yeah. I am feeling positive. Yesterday, I got on the roof with the ladder, and I took the leaf pull. Actually, we had so many leaves on our stinking roof that I had to use the snow shovel to get them off because the leaf blower is just like I have a a pretty, a Bad a leaf blower. Yeah. You got a beefy leaf blower. It is. Yeah. It it kicks. And that thing was just like, I can't do it. There's too many leaves and pods on here.

So I I I felt very I got all the gutters cleaned out.

It was felt very good to do all that stuff.

Rid so I'm feeling good. How about you? How are you feeling? Very fall. Yeah. Yeah. We've been working on our house as well.

We got these Couple years ago, we got these gutter covers installed.

Oh, yeah. Yeah. Like the, like you can buy these ones at the home improvement store that, like, go over and they fall off, and They get keys stuck in them, but we got, like, these just like it's, like, sheets of metal with holes in it installed by, like, a gutter guy.

And it's awesome because We never have to. Our we have, like, a super sketchy roof that's, like, really high. Mhmm. And I can't I I can't go up there because it's I would fall off for sure. So we got those installed. Never have to worry about that type of thing. I I was on the roof of my office. So this is very different. It is a one story. I I was telling Courtney. I was like, besides the fact that I could just jump off this thing, I'm like, there's, like, 3 trees that I could, like, Jackie Chan it over to if I needed to, you know, and, like, do a little swing off the thing. Yeah. I'm I'm kind of a monkey man over here, so it's, like, totally valid that I could have done that, if I got stuck. It's fun being up there and clean that up. I need to get some some gutter cleaner or some gutter somethings over here because we have so many leaves at this house. Holy cow. You have, like, a forest in your backyard. You literally have, like, 9 mature trees. Yeah. Rid It's outrageous. It's on a tiny little lot. Nine mature trees. It's just like, yeah, it is totally enveloped in leaves here. Full time job. Full time job. Right? Well, let's get into it.

I I love this note that you say, like, we complain a lot as devs. There is a huge portion of the community that is just complaints. This stinks. This is hard. This is CSS is hard to make things centered even though it's not. Like, all sorts of little things where people are just Complaining all the time, but we are here to to give you a little bit of a positivity bomb and just talk about how much better things truly are today than they were even 5, 10 years ago. It has been an outrageous improvement across the board in every tech. I think This episode could have been, like, 4 episodes if we really wanted to fill it out because there's so many good things. Our lives have improved Dramatically if you've been coding for any amount of time. And if you haven't, you're going to get to listen to 2 dudes who've been doing this for a long time, and we can say like, rid. Yeah. Things are a lot better looking back at it, and and we are really excited about the current state of things and where it's been, and maybe you'll gain appreciation a little bit more for the tools that you of at your disposal now. So we've broken it up into several sections, JavaScript, CSS, HTML tooling, services, browser and development and hosting. We can talk about each of these. Let's Kicking off with JavaScript, which has seen a tremendous amount of improvements in a 1,000 different ways. Yeah. I think the first one we got here is just TypeScript in general. So,

adding rid. Types to the language. Although, like, we haven't technically added types of language, but, the TypeScript has been around for, I think about 10 10 years or so, I was Which sounds outrageous to say that. Yeah. I was looking to buy the domain learn typescript.com.

And I was like, rid Who's the who who bought this? You know? And I, like, looked it up. It's Microsoft. Microsoft registered this thing in let me pull up the date here. They registered it in 2012. So almost 10 years ago, they registered the domain learn typescript.com, which is amazing that rid. TypeScript has been around for even longer than that, but it's it's awesome because it makes your code less error prone. It's it's very it's way easier rid to dev when you're using TypeScript because of the auto completion that you get, and the type checking and all that stuff. And it's just rid. Some of the biggest pains of JavaScript was that you would have to wait till you hit the browser to realize something was wrong, and then you sort of gotta Back trace that and to figure out, oh, I spelled this thing wrong or that's not actually a property. And having that right in your editor yelling at you before As you type the thing,

huge improvement. Yeah. I I'm looking at Wikipedia here. TypeScript made its 1st public appearance in October of 2012.

So those of you who've been grinding on a project for a couple months and wondering why it's not getting any traction or whatever, I think it's a good lesson. You just, rid. Projects over time, you know, can gain gain footholds as they grow and improve. So that's, like, pretty amazing. 2012 October. Wow.

Man, they registered this domain on September 28, 2012. So just a couple days before they announced it. Hey. If only I had been Keeping my ear to the ground, I could have grabbed it. Mhmm. Mhmm. Mhmm.

Yeah. I agree. I mean, TypeScript has been such an improvement in my daily life. I just did a big refactor, And I cannot imagine having done that without TypeScript. It would make things so much easier. Another one is, like, little language improvements in the how we write JavaScript, for instance, Optional chaining. How many before we had optional chaining, you had to use Lodash has to check nested deeply nested properties to see if they exist. Otherwise, if one thing at any point in the chain did not exist, it was going to cause your code to crash. Now we have optional chaining, which will just return null instead of of crashing your code or causing an error because of a missing object property at some point. Sometimes you just wanna say if Deeply nested thing exists, then I can do this thing without having to, check each step along the way or use an external function like has. Rid. So optional training, it it's made my life so much better. I can't imagine coding without it today.

Next one is, async await in promises. Flow control in JavaScript rid Have been so tricky, and we used to have to use this Library called async dot j s, and they had a whole bunch of methods where you could For bluebird. Hot potato data. Or, yeah, you could use bluebird and rid. Just having nice, clean, first party support for writing flow control and promises in JavaScript has been a game changer for complex stuff. It's been a game changer. Yeah. And at first, I don't even know, like,

promises kinda missed me a little bit at first because I I I was working a lot in callbacks, and they felt kinda fine to me. And I felt like promises just feel like Another way of writing a callback. You know, it felt like the same thing, but once we got, a single wait for some reason Yeah. That made me really enjoy the flow a lot more, and then that's when I went all in on it. Rid. Oh, array methods.

Yeah. Or array methods.

Those didn't used to exist. A lot of tools for immutability in general And JavaScript have kind of come recently where you're no longer modifying an array or collection of things. You're creating a new array of collection things based on one. And that concept, I think, has really it's for me, it's made me a better developer in a lot of ways because there are less mysterious bugs, but I also Just feel like I have a little bit more control over everything. And honestly, between filter map reduce, I feel like I can accomplish So many things. I was doing some, like, really complex operations the other day, on our back end, and I just felt like I had full control over the data. Whatever I wanted this data to do, I could do it with any of those array methods. So shout out to array methods. 10 years ago, rid. JavaScript was nested for loops. Yeah. You'd have for I equals 0, I plus plus, and then you'd it's not uncommon to have j, k,

rid. And and even more inside of that, you'd have them nested 3 levels deep, and, you'd be modifying the data. You're looping over. And if you needed the original data, then you had to make Copy of that before you did it and

You didn't make it copy of it was no fun.

No. Yeah. You're right. That was use spread. Was really tricky as well. Yeah. There was no spread. Yeah.

The the DOM interaction has gotten much better.

I don't know. This one might be might be lost on a lot of new devs, rid. But, we the reason we have jQuery is that working with the DOM was incredibly difficult. And Yeah.

Rid jQuery did not go away because React and all these frameworks came here. JQuery went away because vanilla JavaScript rid Basically implemented everything that jQuery does. And it is much simpler just to use the built in rid values then jQuery in almost every single use case. So query selector all, being able to traverse, go up a level, parent Child selectors, things like that,

is very, very doable in in vanilla JavaScript. Yeah. All of the DOM traversal features. I think rid. When yeah. I'm thinking like 2011 when jQuery would have been at it's like peak usage and you're thinking like, Wow. It would be really neat if you could just do all this stuff in the browser and not have to use jQuery. Here we are. Yeah. Like, nobody cares.

It is awesome. I mean, people care. People use it, but we're not just, like, sitting there being like, wow. This is incredible.

So sometimes I think it is worthwhile to Take a step back and smell the roses here. I think all that stuff is amazing. Another one, arrow functions have made things a lot easier to not set up A new scope, did not you just have, like, these inline callbacks that can be really, really simple. You won't have to do a whole this equals that that we used to have to do or that var that equals this where you're setting this to be a variable so that you can keep track of what scope you're in. None of that stuff you really have to worry about anymore because you can use arrow functions to control the block scope when you wanted to.

And honestly, the syntax is nice and easy. It feels good.

Combined usage with destructuring and array map or, array methods

Feels very good in use. Big fan. I think, in general, e s 6 was a huge, huge breath of fresh air for JavaScript. We got Breads and Rusts and template strings and let Do whole concept on that. Yeah. ES modules, all of that stuff. The it was rid. Very, very tricky before that. And specifically, when, 6 to 5 rolled out Yeah. It was rid. That those you 6 to 5 turned into babble, and what that did allowed us to do is to write, modern JavaScript and compile it back to e s five. And that Almost everything in e s six was, you could bring it back. So that was big, big, big. Is the hand center of, rid. JavaScript. Totally. Totally. Absolutely.

It's funny because, like, Babble sort of gets this, like, rid. These days where it's just like, oh my gosh. There's so many things, and it's not working. And often, that's what will pop up in your error messages, babble, whatever.

Don't forget where you came from because Bob will made all of this all of this doable.

It's very funny. Yes. You you have a known here looping. We kind of touched on this, but We covered that. Yeah. It was really weird to use a lot of 4 loops in the past. Now we have 4 of neat things for each. Being able to pause a for loop with the for of or for in because you can that's one thing about map Filter reduces. You can't await inside of them.

So if you need to do anything asynchronous in a loop, You can, you can use the 4 of or 4 in loops, which is awesome.

We have a, async for each function. Do You have one of those in your code base as the utility function? Async for each. No. What does that do? I have an async. It's well, it's just allows you to do an async for each. For each of these things, asynchronously do something. Oh, but what do you need a utility function for that? So that I don't have to have a 4 loop in my code and it just reads nicer? Async for each?

Oh, it just takes a callback and does that For each one? Yeah. Yeah. Basically. Oh, okay. It it flows nice and easy. I don't know. It's it's probably unnecessary, but I like it. Next we have here is Prettier in general. Before we had Prettier, you would spend a lot of time Formatting your code to be indented properly and to re indent and to follow code guide. We had this huge code guidelines of like rid. What do you do when it's more than 20, 20 characters long? Do you put them each on their own? Do you indent? How many spaces do you indent? And all of that is just like you know what? Think about that. You just code the most gnarliest code ever, hit save, and the thing is formatted perfectly. It's something we used to teach in the boot camp. You know, like, make sure you rid You spend a lot of time, like, making sure your code is readable and indentured properly because, clean code is a part of being a good developer. And Now it's just, like, doesn't matter anymore. You literally just save the thing. I know some people don't like Prettier, but in general,

It's amazing. I I'm totally on board. I don't I don't do any projects without it anymore. But when it first came out, I was I was bored of this skeptical train. But not because I thought that, like, formatting wasn't useful, but because I just thought, what is this doing that my ES lens setup Already isn't doing, which honestly wasn't very much. There was, like, a huge overlap between my ES lens setup and Prettier, which was actually really nice because it was easy to transfer over. But once I I just drop Prettier in there and it it makes all these decisions for you, I'm no longer having to think about any of the formatting stuff. It is way better. And honestly, I do prefer Prettier's formatting over anything else I'm using. Even though I do use it with ESLint, I I do, very much love what Prettier has done for my code base overall and just code in general. I cannot live if For some reason, it's it's like having, like, an error. Sometimes you move into a new new environment, you save it's not doing it. Drives me bananas, and then I have to stop what I'm doing to figure it out. Yeah. Rid. Feels weird to to not have it. I I think the the big thing for me was just being okay with Prettier is very read. Opinionated. There's not a lot of settings. So if you don't like something,

tough noogies because it just it just You just kinda have to, like, give it up and and be okay with the formatting that they do. And once I just got used to the formatting that Prettier used versus what I was used to, it was okay. Yeah. I like I like most of their options. I use the single quote. I use

tabs. I use semicolons as equal to false. So, Yeah. I do a little bit of overrides, but nothing nothing crazy there. Alright. Let's get into real quick one of our sponsors, one of our freshest sponsors, and that is Fresh FreshBooks. Wes FreshBooks.

Told me you've been using FreshBooks for a third of your life.

So, do you wanna talk about FreshBooks? Rid. Yeah. I I went into my FreshBooks. I was doing some end of year accounting, just, wrapping some stuff up. And I, rid. Wanted to see my most recent invoices, so I clicked it. And I accidentally clicked it twice, and it showed me my oldest invoices.

And I had sent my oldest invoice rid. Out in 2009, which is a long, long time ago.

Rid. It is over a third of my life, which is amazing.

And for it's been with me ever since. It's been great. I I can go back and see, rid. How much money I've made over the years and and who I've billed and, what clients still owe me money from 2000 rid And, 15, things like that. And it's the best way to manage your books, your expenses, your time tracking, turning your, rid. Maybe you have an expense that you incurred. You registered a domain name, and you you log that, and you could turn that into an invoice for a client right away. Rid does all of that stuff for you. You can import all of your transactions right from your bank account. Check it out, freshbooks.comforward/syntax.

Make sure you use Syntax in the how did you hear about us section? Thank you FreshBooks for sponsoring.

Sick. Cool. Alright. Let's get into the next section here, which is CSS, which has also gotten, I would say an extreme amount of updates. It like, this is this is, like, not small update territory. There are so many things in CSS As we were writing these notes, I was thinking, maybe I could just do a whole episode about CSS. What's better today than it was before? But, one of my favorite ones, and I'm gonna go off the board here, One of my favorite ones is variables. When they first announced variables, I said, I don't know about that syntax, because it's a little bit more verbose than the dashes. Yeah. The dashes and the bar function.

It's a little bit more verbose than, let's say, a dollar sign, which is what, Sass was using or just straight up text, which is what Stylus was using. So it was easy for me to say, I don't know if these things are as good as Sass. But The killer feature of CSS variables is the fact that they are active and live and reactive in your entire site. If you change the CSS variable, everything within that Scope that uses that variable will be updated, making things like theming exceedingly easy.

So rid. CSS variables. Shout out to CSS variables. Easily my goat feature for new CSS stuff. Maybe even more so than flexbox because we had grid frameworks I could do all that stuff before.

And granted, Grid allows you to do that without. But, man, CSS variables really, really have changed how I I develop websites. Rid. Let's pick the next one, which is layouts are are much easier.

So I'm gonna say Flexbox And Grid were game changers for doing things that were not possible with those like, for most of your layouts, yeah, you could use a you could use a framework. But, rid. For doing responsive layouts, things that wrap, things that grew to their content, complex layouts where, things were beside each other. You had to do that with floats previously.

So much easier. Flexbox and Grid are game changers. Rid. A little bit tricky, to learn initially, but anything like layout is a very, very complicated thing. And rid. I challenge you to find a layout engine in literally anything else that is as good as,

what we have in the browser. I'm very, very happy with Flexing grid. Yeah. And the cool part is that, like, Flexbox came out, and everyone is like it's like Steve Jobs giving a presentation. Here's Flex Fox and was like, yes. I want Flexbox. It's the best. And then you think that's it. And then there's, wait, one more thing. We also have Grid. And Grid is like, you know, it was came a little bit later. It wasn't out at the same time. Flexbox popped and everybody was like, this is the best best best best best. And then Grid comes out, rid. It's like, how lucky are we that we have Flexbox and Grid now? Oh, my word. Yeah. Those are those are some of the best game changers for me too. I mean, Just being able to use that stuff in day to day dev flow and not having to worry about libraries has really changed changed my significantly as a developer.

Another one would be these VH units or VHVW, viewport height and viewport width units. Small little feature there, but I use those kind of a ton. Oftentimes, you really need to work within the view port, so it's it's nice to be able to use those units and have, rid. Here's some Safari stuff and whatever with those. But, hey, gotta love my my v h and v w units. Super handy. And, I don't use them all the time, but v min and v max as well will give you

the min or max of the width or the height. Big fan of those. Very simple one, overflow scroll on mobile. So when the iPhone first came out, for, I think, for the first couple rid. IPhones, you are not able to have a scrolling div. And in general, The web had to sort of be rearchitected for touch devices and small screens in general.

And rid. There was very, very simple things, like I wanted to put a bar of icons along the bottom of my app and let you scroll the content. And if you wanted to do that, if you wanted to scroll anything other than the body of your thing, you had to use these huge JavaScript hacks, rid that were in I don't know if I should call them hacks. They're huge JavaScript libraries that would emulate scrolling on the device for you. And now, you can slap a flexbox in a grid, overflow scroll on the thing, and everything just works out really, really nicely on mobile. So It's been a a game changer. These things were so so difficult back in the day, and now it's a simple one line of CSS.

Yeah.

It is awesome to say the least.

Another one would be even color formats. You remember back in the day color safe hex values? There was only, like, A handful of hex value. I wanna I wish I knew how many there were off the top of my head here, but there were only we had hex and we had named CSS colors, But you could not use every single hex value. It wasn't like the hex board has been totally open for you. You had to use I believe they were called color safe Hex values.

The safe color codes for hexadecimal.

These 216, There was only 216 different colors you could use. People always wondered why the web looks so bad for so long. 216 rid. Teen colors. Wow. And there was, like, 5 fonts as well. Yeah. Five 5 fonts and 2. You could use Georgia or Ariel. You couldn't even use Helvetica.

Oh, man. Verdana Justified Verdana was my jam, like, 15 years ago. I did everything in Georgia. I could not tell you why. I just Georgia was my fun. I don't know why. But yeah. So we can now use HSLA and transparency and gradients and all these different color modes, and soon we're gonna have color functions.

Yes.

Big yes for me.

Position sticky is the last thing.

Sticky headers, especially when the iPhone first came out, rid. The iPhone had these, like, sticky headers where as you scroll through your contacts, it would, like, put the letter of the contact up top, and everyone's like, oh, man. We need that in, rid. We need that in the browser. And even on, like, the syntax.fm, go to syntax.fm and and scroll the page. You can scroll the list of you can scroll the whole page, And then the player sticks. And then you can scroll a list of the current podcasts. And you can also scroll the show notes. Rid. That would be a very tricky layout to do even 5 years ago.

Let's talk about HTML now. Rid. TML has seen a ton of change, specifically if you go all the way back to HTML 5, which let's face it, I think, When would wouldn't that have been? I don't know when HTML 5 dropped sometime around 2011, some somewhere in that world. I can, like, pinpoint based on the jobs I was working on. But I remember before HTML 5, you you only had a handful of elements to work with. I mean, granted there were more than a handful, but rid. We didn't have as the semantic meaning necessarily that we had because you could use a div and a paragraph tag. And all of our friends, the h one through 6 were there and, Anchor tags and stuff, but we didn't have main. We didn't have section. We didn't have a side. We didn't have, rid Oh, we did article. We didn't have nav. There are so many elements that we use today to to denote what this thing is that in the past Would have just straight up in a div. And I personally it's so weird to think about how many just every how much everything was just straight up divs, paragraph tags, spans and links right now. We have so much more meaning in our HTML and so many more elements. It's just been a tremendous improvement.

The one the things that have honestly made my life the most improved in HTML is the addition of, like, multimedia tags.

I've done a lot of video and audio on the web throughout my entire career. You know, one of my first pre web dev job roles was I I worked as a projectionist For the University of Michigan.

And while I was there, I developed this like a co presentation multimedia program for Flash where we would record a rid. Green capture of their device, and we would record a video feed, and we would display them side by side in sync. And the whole thing was a flash app that I wrote.

Rid difficult to do. Not only did you have to use Flash, but you had to use Flash. And even then you had to do all these Video format, it was unbelievably challenging. And now I think just how easy that would be today to keep 2 videos in sync with JavaScript and you have 2 video tags. It's like, man, How lucky are we? We have video tags, audio tags. We have a drawable canvas. I I don't even use canvas, and I'm still, like, thankful that it's here. Rid. I am just looking up the book,

HTML 5 by Remy Sharp and Bruce Lawson, and I very vividly remember rid. Sitting in a coffee shop and just reading this entire book and being so excited about all the stuff that was in there. And They're obviously the stuff that you talked about is video and audio and webcam access and, web workers. And rid. This this book is 11 years old now, and I think it'd be kinda cool to to have maybe have Remi on the podcast and talk to him. Like, hey. Like, rid. You wrote this book 11 years ago, which this stuff still seems new. Geolocation, web workers, web sockets. I remember, writing some stuff in WebSockets and seeing it appear on the page in real time and socket I o. Gear Guillermo Rausch wrote Socket IO. And Yeah. That was, like, that was a huge time, in in web development for new stuff coming on the rid. On the scene, it it still seems like like local storage and and HTML 5 video and webcam access. This stuff Still seems new to me, doesn't it

seem new ish to you? Seems new to me. Yeah. Abs it all seems very new. I remember every single time a a A book apart book would drop. It was like a a shift in how you are going to code websites from that point forward. You know, the HTML 5 book, the Responsive web development bug, the CSS 3 book. I mean, there's just been so many tremendous shifts, in education from From those aspects alone. But, yeah, HTML has seen a huge amount of change. We have all these elements. We have all these new features. We have multimedia stuff. And now the the new things that are coming are web web components. Right? I don't know how much web components you've done, Wes, but I did a a course on it recently. So I really got to dive into the world of web components. And one thing that I really enjoy about web components is just their the true nature that you can bring it from project to project with you without having to rid. Have a library. The fact that I have a video player now that's all a 100% web component based, and I'm not going to have to rewrite my video player if I'm moving from any other thing to any other thing ever again, which I'm not going to do anyways. But it doesn't it doesn't matter. I found web components, While their implementation can be a little bit clunky, it is really neat that you can do all that stuff in browser without a library anymore. So, very, very neat.

Another thing that's very, very neat is Sentry and how they allow you to see all of your errors and exceptions and also Track the performance of the users on your website so that way you can see if your website is performing up to snuff or not. Now I love Sentry. I've been using it for rid. Long time myself, and, one thing that I always appreciate about Century is it makes it so easy to see how big of an impact this is having. When you go to your Your your page with your issues, it'll have all of the issues that have occurred.

And sometimes issues are things that need to be taken care of, and sometimes they're not. Right. Sometimes it's a one off thing that happened to 1 person and one specific use case, and maybe it's because of the browser extension or something. Right? Who knows? But other times, You just push an update and all of a sudden there's a 100 occurrences of the same thing, and you could see it happening right there with those little bars that just shoot straight up in their Little flame chart that's that's there, and it is so helpful to be able to come in here and see that, click on it, see how many people it's affecting, rid. Seeing if it's any specific browser, seeing if it's tied to specific user accounts, you can push a GitHub issue directly from there, And then you can make sure this thing is fixed. You could mark it as fixed, have it tied to a release, and then be super happy when it never pops up ever again. So if you want all of that more, have the century at century.io.

Use the coupon code tasty treat, all lower case, all one word, and you'll get 2 months for free.

Definitely one of my favorite services on the planet and absolutely love them. So thank you so much for Century for sponsoring.

Okay. Let's get into some tooling things. A lot of changes in tooling, considering the tooling that we had maybe 10, 15 years ago consisted largely of An FTP application that you drag your stuff into and then a text editor.

Mine, of course, was text Nate.

That's what I used before, Sublime.

And I used Sublime, and then I used Atom very briefly, but not really, and then the Versus Code. I pretty much went rid. Text mate, Sublime, Versus Code. And and here we are at Versus Code. Yeah. Yeah. The man, the editor

rid Has and we I think one of our very first shows, like, 3 years ago, was when I made the switch over to Versus Code, and we were just gushing rid About how amazing it is. And since then, that was probably 3 years ago, it's gotten, like, even better and even better. Even better. Yeah. Exponentially better. And, like, It's it's so good. Like, it used to be just a thing that you type into. And I remember people will be like, why don't you just use notepad? Or why don't you use, what's the one that everyone used to use? It was like Notepad plus plus. That was a that was a big one at the point. And now, like, We have get integrated and, auto completion, and the thing is smart about your JavaScript and yeah. Oh, man. It's rid This stuff used to be much more difficult, so it's really good. Other other tooling things, the, latest crop of of tooling is rid. Really, really good. You have ES build, Vite, Snowpack, Parcel.

All of these things are I'm not even gonna include, like, The last generation, which was I I don't know. Like, we've had, like, so many iterations. Like, we had Grunt. Grunt and Gulp. It were like Which was like I remember people would have 400 line grunt configs, and then we had gulp. And I had, I don't know, 100 a 100 line gulp rid. Config and Of course. And then when you had gulp, you'd have, like, browserify configs in there, and then you move to babble. And then, rid man, I moved I've moved my course platform from build tool to build tool probably 4 or 5 times now. And every single time, rid. The amount of code that I have to write and the amount of complexity that I have just gets cut in half. And I'm at a point now where it's just a rid. Couple lines in my the biggest part of my build tool now is specifying which files,

the entry points should be at. Yeah. I love that about it. And then every new tool that pops up seems to, like, really get it. Like, the Svelte SvelteKit config is is tiny. You're just basically picking your output format. Like, do you want this to be a static site or or a node site or whatever. But then even like Astro. Astro is like, oh, do you need markdown? You don't have to do anything for this. You can just use markdown files. Oh, do you need SaaS? You don't have to do anything for it. We have it already. And it's like, that's what I want. That's what I've always wanted, and that's one of the reasons why I love Meteor is because If Meteor, I wanted to do Sass, all I had to do is Meteor add Sass and not touch a config file, and it just worked. Yeah. And it's like, rid. Why are people so obsessed with having 200 line config files when there are tools that can do it for you at that time? And that's one of the reasons why I was always Surprised that more people didn't use Meteor for things like that.

Me, I I you know, I've only my my platform's only been on Meteor and then now, rid. Snowpack and feed. So, you know, I haven't changed my tooling that much, but I I've seen the evolution. I've definitely used a lot of these things. They they've gotten a lot better. Another thing is, like, image compression.

Back in the day, we used to have, like, drag and drop. Well, 1, we had to use HTML's or we had to use image rid. A lot of times for icons. Now we have SVG icons, so we don't have to do that anymore. I mean, we got image fonts in there temporarily, but those were kind of a Not a great idea considering they were often way too huge.

But we also got things like built in image compression in into our Tools and things like Gatsby and Next. Js have made it part of their flow entirely of working in a word. It's going to compress and serve up the right image for you. There's also now tools like Cloudinary that allow you to have images on the fly that be, encoded whenever you need them to be whatever format you could possibly need them. But Before even at some point when you wanted to have multiple images of things, you were creating a web version of it. You were creating a a desktop version of it, like 2 x one for retina displays. You're creating multiple images by hand of the same thing, and it often involved you dragging and dropping them into some sort of application that would Kick out a compressed or a minified version of that image. And then eventually, we got that built into build tools, and now it's just built in the platforms, and we hardly have to think about it. Rid. Yeah. It used to be where you'd have to, like every time you added a new Sprite, you'd have to, like, run a script or a Photoshop thing. What is that? Sprite Cow? Rid Yes. We had Sprite Cow. I remember I used to drag and drop my images in to Smush It to compress them before I updated. And rid It's so much easier, especially now that we're building our applications being, like, I don't know. This is my entry point of index. Js. And literally any asset that goes through this

rid is automatically handled. And I don't have to think about like, I I've I remember I had WordPress websites where I would have images that were never used anywhere, but They would never you could never drop them because it was impossible to find out what was used and what wasn't used. It's funny. So Sprite Cow still exists wet, Wes, and Is made by an agency,

like a design agency in the UK called The Team.

And I clicked on their thing. They're Still active. There's blog posts from 2021, so it's a I wonder what kind of traffic they get in 2021 from people coming to Sprite Cow.

I I honestly I really am interested because that's one of those services I haven't thought about in so long, but it it looks fine and it works still. So, like, Are people still using Sprite Cow and or how much traffic is this still generating for them? I'd be very interested in that information.

I bet they're still using it because, Like, as much as we talk about these, like, cutting edge everything, I bet for every single page React application built in Next. Js, rid. Being rewritten to Svelte, there is somebody with a 11 year old tech stack that you just can't change The way that works because it's it's too large. Time to update the Sprite. That's just like, I still see it. Like, on Apple's website the other day, I was on rid. A store for Apple on, like, some other country, not Canada or anything like that, and they had a title that was in a PNG, and it was pixelated on my monitor. Rid. You know, like, you still pretty often see like, first of all, text should not be an image for the last 10 years.

And, also, rid. Why it should be if you're doing images or icons like that, why is it not, like, high def? Like, we've had these iPhones that are high DPI for, I don't know. Probably 8 years now.

And some of these websites are still come still sending pixelated, images to you. Yeah.

It's rough. It's rough.

It's rough. Hot module reloading is a huge game changer. So we used to have to rid. Go to your terminal, quit your application, and start it again. Or you used to have to we used to have no build process at all, rid. And you'd have to manually refresh the page, which is a huge pain in the butt when you're trying to debug things like a drop down or, Specifically, you're 6 levels into a a form where you hit next, next, next.

And hot module reloading has cut that feedback cycle down rid From sometimes minutes to seconds, you just hit save, and you can see the result on the page. So that was that's a big one for development. Yeah. Yeah. Those games, and I remember when we even got fast reload.

That was a big, big change for us. So being able to have an even an auto reload, not even hit the reload key at all. Now we have HMR. It's like, wow. Wow. Wow. Wow. Those were each of those were kind of seismic shifts, and then now, you wrap them all together, and it's even

way, way better. What was the the, like, the desktop app that everybody used for SaaS? Auto reload? There was an oh, you mean the the app where the the

Developer of the app was kind of a jerk.

Who's that guy? There's like a I don't know. There was like an app that people used for a long time that, like, did all that stuff, Like, the developer was always kind of, like, rude to people on Twitter and and kind of like a

He was, like, just aggressive aggressive aggressive. There was, like, a paid one and a free one. I'm not sure code some anyways.

Code. Yeah. Code code kit. And then there was, like, a free one. I don't know. Free pro. Developers a jerk. So I don't don't don't quote me on that. I don't know the guy.

CodeKit and and preprocess were huge, and I I I'd be curious Many people are still using that these days as well. It looks like it's still being developed.

Pretty heavily. Interesting. Pretty heavily used. The reviews are Johnny Ive, Phil looks like some fake reviews on the website.

That's kinda interesting.

I know. But those things Are still kicking around. Next up would be services that make things easy, and we've had a ton of services come. So we have Image resizing like we mentioned with Cloudinary, things like that, services like that, video hosting and transcoding services like Mux and Cloudinary both do that. Rid. Accepting credit cards, Stripe Stripe.

Back in the day, if you wanted to accept credit cards, it was pretty much PayPal or bust. Now you have even things like Stripe. I use Braintree, which, is fine, but it's not Stripe. Stripe is just super easy. The Braintree APIs will make your kind of head explode, but, it's it's certainly not as difficult as it needs to or as it has been in the past. We have one more. We have a tweet here from Brad

Ledford.

We We asked on Twitter, like, what are things that are so much better these days? And that didn't stop people from using it as a chance to complain about some things in web development. But, rid. From Brad says entrepreneur friendly licensing cloud databases, authentication, etcetera.

That's a really good point is that, rid. Previously, if you wanted to use a service, you would have to have phone calls and quotes, rid. And you'd be enterprise contracts and all that stuff. And now, literally, if you want enterprise level tech, rid. You can sign up and be dev ing on it in, like, 6 minutes.

And it's amazing because that allows entrepreneurs to just use this rid. Enterprise level tech, you can go ahead and start businesses based on the sort you're standing on the shoulders of giants. Very true. Very, very true.

Yeah. So let's actually take a quick break to talk about our last sponsor today, which is Linode, which is the, perfect place to host a modern or rid a nonmodern website. Wes, do you want to talk a little bit about Linode?

Yeah. Actually, we have a section rid. Coming up, it just says hosting is is much easier. So before, Linode was around. What did you have to do? You literally had to go buy servers and rack them either in your own office, which you had access to the Internet backbone, or you would put them in a data center.

And if you wanted to be able to scale up your application, you would have to go and buy more servers and hook them up and load balance I mean, you'd have to run that all yourself. Now there's companies like Linode where you can simply just pause your application, drag a slider, rid. And, you'll be running on larger infrastructure in no time. You can you can sign up for multiple, rid. Boxes if you want, and you can load balance them. They provide all the products you need to just they handle all of that for you. And it's it's literally just rid a software dashboard these days versus having to run your own servers and put hard drives in them and rid. Do backups and and all that stuff. So if you are looking for a host for your application or for pretty much they have all kinds of rid. Different services you should check out. Check out Linode. They're gonna give you a $100 in free credit. Go to linode.comforward/syntax, And that's gonna get you a $100 in free credit. Thank you, Linode, for sponsoring. Okay.

Let's get into the last sections where we have rid. Browser and development.

Developer tools now have gotten incredible whether or not it's the grid tools that are both in all of them, rid. Now but you have just so many additional tools in the browser to debug anything. You can check it to see make sure everything's running at rid. FPS. You can check to make sure, all of your network requests are coming in. You could check to make sure your HTML, your developer tools that are React Developer tools or self developer tools, any of that stuff just works so well now in the browser.

It it's it's just very good. I Those of you who don't know, these tools that used to not be built into the browser used to have to install a an application called Firebug, which eventually was a browser extension, and that thing sucked.

No. No.

I I don't know no hate against Firebug. It was as good as it got at the time, and at the time, it was Totally revolutionary. But if you compare it to what we have today, Firebug was was not great to use to me. I I don't I don't need to talk trash about Firebug because I think it's fantastic. But, rid. It is it is like crazy for me to think about to go from Firebug to what we have today and just how Much endlessly better that was. I just remember when we're having to do I e six testing and things like that, you'd have to fire up the I e six computer that had no development tools rid. Whatsoever and just have a bookmarklet for Yeah. For Firebug. Just figure out why why isn't this thing working? I don't know. I guess I'm just gonna try things. Okay?

Just gonna figure it out until it works. Hi. I'm just looking right now at a tweet from Ben Vinegar, who's a dev over at, rid. Century, one of our sponsors, and he's showing a part of Century, which shows you your, largest contentful paint. Rid. And they have this thing that will track, if you have like, if your, paints on your page are getting slow. And it's it's amazing that you can get down to the, like, things that you would probably never know that your users are having a slow UI response.

Rid. And he has this tweet that says, it's mind blowing that 12, 13 years ago, you had to debug JavaScript with alert. Variable x is Oh, yeah.

X. And now you have this level of visibility. And it's true. It's it's unreal, the tools we have, and the insights we have into figuring out what is going wrong with our applications And peering into

when that went wrong. Yeah. Endlessly better there. Cross browser, cross device testing is Way not as big of a deal anymore. We can make little jokes about Safari all we want, but at the end of the day, absolutely was nothing as bad as trying to load up The site in 3 different browsers and getting 3 massively different results with the same code, which was a thing Are you so long 1 and the other one would break? It was a constant dance, and it was, like, definitely something that would be maybe considered the worst part of your job. And you you had to become a developer Knew what all the pitfalls on all these different platforms were ahead of time so that you wouldn't have to run into them. I still remember the very first time I hit this error as a young buck when I was in high school. I had made, like, a website, and, it and I thought it looked good, And it looked good to me. I was using Dreamweaver, so I was using all those fancy Dreamweaver tools. And then, a friend of my brother's who is, like, older who had some experience building websites, And he was just like, you might wanna take a look at that thing in Internet Explorer. And I was just like, why? Why would I oh, no.

Like, I had no idea that that was even a thing. Oh, it's such a blow. It was such a blow to my ego. I remember thinking, like, oh, crap. This looks terrible, and this is probably how Most people were seeing the site, and I had no idea. And we were actually getting some some traffic on the site, so it was a little distressing to say the least. Rid. I was just looking at my I have a whole drawer full of old phones and Android and older iPhones and things like that, and rid. I used to have those things fired up all the time, and and we would often have these, like, device walls that agencies.

I had a device lab in my office. Yeah. Rid. It's and, like, I was just thinking about I was like, I haven't fired up any of these in probably over a year.

And, like, the I was just, rid Like, sitting there reflecting on, like, how consistent these browsers have become versus where we have started. And We used to have, it's like live reload where you'd pull up the website on, like, 15 different devices. You'd make a change, and rid. You could see it on every single website. They would all reload at the same time, and that is just not that much of a issue anymore. Like, very rarely do I rid. Fire up another browser to check things or or look into my century or something like that and say, oh, man. This thing is Not working on this 1 browser. Things are getting really, really good. Totally. So good. Yeah. Hosting has gotten a ton better.

SSL certificates used to have to plan your week around it, buying an SSL certificate, and you had to take out a second mortgage on your house to do so.

Rid no. They used to be very expensive and a tremendous pain in the butt, and now we don't really have that issue anymore. Everybody's just handing out search willy nilly for free now that we have Let's Encrypt ripped everywhere, and all the services handle it for you. It's so it honestly, I could not have picked a better future for SSL certificates for me because I just really always hated dealing with that stuff, and now we don't have to. So that's great.

Continuous integration and continuous deployment is basically baked into every platform that exists now. If you wanted to if you wanna host a site somewhere, and it's like, just click up you just push to your repo to deploy, The the platforms all do it for you, whether it's Netlify or render or Vercel. They're just they're just that good, and it's so It's so easy to to get complacent with that, but that blew my mind even, like, 2 years ago. So it's still blowing my mind today. Yeah. Scaling up, we just talked about. This is one of our ad reads, but scaling up, whether that's with, containers, whether that is,

with virtual machines where you can Simply just give yourself more RAM or, more disk space as you need it, whether that's with containers or serverless Functions that scale up immediately. These, again, these are things that were not very, very easy to do. Even just 5 years ago, these were not as easy as they are now.

Rid. Also, rollback, instant cutover, things like that where you deploy your application to another server. You simply just cut the domain name over. If you need if something screws up, rid. You can roll that thing back. Those sometimes deploying was a whole day thing and you just be sweating bullets. I sure hope something doesn't goof up because I can't bring it back to where it was before. Yeah. Let me just

Brady, even before that, just dragging a folder in the FTP And then be like, oh, I guess I just brought the site down by dragging that folder over. Let me just try it again. You know, I mean, just the the amount of shift there that's gotten differences is crazy good too. Just In general, with with the usage of Git, that's a whole thing that took place too. If it if it feels like Git and GitHub have been here forever, let me tell you that was very much not the case. I still remember as if Chris Coyier did that whole, like, thing. It was like, let's learn Git together, and that to me was, like, mind blowing at the time because I felt like I was rid. Too dumb to use Git. Everybody was starting to talk about why it's cool, and it definitely definitely has been a big shift in terms of Everybody just using Git and GitHub and it being a big thing when before, you know, it was really very different in regards to having your code existing somewhere in a repository.

Also, containers, I don't wanna have to think about scaling really ever that much. I just don't want you personally as developer being able to click plus 1 to add a new horizontal or vertical scaling has just been very nice for people like me who rid. Really, truly, you know, just throw a little bit more resources at it, pay another $15 a month on it, and there you go. Now it's faster. I'm very curious now when I started using Git,

myself.

I'm just going back to Can you find out when your GitHub account was formed? Yeah. You can go to your github.comforward/yourname, and then there is a contributions graph, and it will show your first Contribution on the side, mine goes down to 2010. I'm assuming that's the first

mine goes down to 2011.

My first rid. Contribution on GitHub was March 14, 2011, which actually tracks. Do you wanna know why? Because I got my 1st web dev job March of 2011.

Man, that's That's so close to mine. So I have 1 commit in January 2010 and then nothing for the entire year. Rid. So I I did something on 9 60 grid system, and then I did nothing for the entire year. And I was doing development then. I just was not using Git. I did. Rid. Likewise. Yeah. Around March of 2011, everything picked

up. That's awesome. See, I had I had no real action in 2011 beyond just creating the account.

My first real contribution, was a a a public repository where I was making rid. Audio components for Angular. So, like, I was making, like, a slider that changed a a sine wave pitch In Angular. So that's fun. I forgot all about that. Wow. Some of my first commits were on this thing called Chromio,

which is, rid we we made skins for Chrome Dev Tools. Oh, cool. Because there used to be a CSS file where you could add CSS to your Chrome Dev Tools. Rid Man, that's 11 years old. I still own that domain name, chrome.io.

Yeah. That's a Hey, Google.

You love chrome.io? I've been paying for that thing for 10 years. It's about time I get a payday on that Google. Can you Let's get that going. Here here's a good one, Wes. My my second,

contribution here is From March of 2012, level up tutorial, SaaS tutorials.

Hey. Wow. So that's the genesis of level up touch right there. March 2012. I got my concussion in February of 2012.

Started to level up in in March. So there we go. I was already on the SaaS train in March of 2012.

Rid

March it's amazing how similar we are. I'm just looking at my March 2020 12, and I have HTML5 Face detection Mhmm. Which is what really got me into speaking because I did this really cool tutorial on doing face detection.

It's that's amazing that our Histories are almost like bang on Yeah. It is. In in what we've done. That's cool. Yeah. I'm into it. I was contributing to the pods framework on WordPress.

Man, it's kinda fun to look back and and, like, see this thing. We were talking before the show started of, like, we're starting to be, like, old guys Yeah.

Because we've been, like, Literally doing the same thing for, like, 12 years now, at least, like, professionally.

Yeah. I know. I just started to be an old guy. It's weird.

So that is, everything is amazing in web development.

We are very happy. Considering I don't rid. Me and you are not very negative people, but we are considering doing a similar show of things that are very rid. Tricky still. Yeah. I don't know. What do you think about that? I'm in. That'll be fun. Yeah. Alright. Yeah. Things we can do. Light hearted one. I don't like being a complainy guy, but It's it's also nice to talk about things we wish were easier in web development. Sometimes you gotta be a complainy guy. It's fine. Okay. We all get those days.

Rid. Let's move into some sick pics. You got a sick pic for me today? Oh, do I have a sick pic? I've been talking to you about this a little bit, And I I if you follow me on Instagram, you may have seen me post some clips from this thing or or photos of it. I got A smart gym thing. Those of you who've listened to our fitness episodes know I'm pretty so cool. Pretty, like, regimen in about about working out. I I usually lift 4 days a week. I do some cardio. I do a lot of dance. I I I you know, I'm pretty serious about my fitness without being, like, serious serious about it. Right? And we were we moved into a new house recently, and we've been talking about our our gym space because we had this extra garage at our old house that we turned into a gym. It was ready. Fantastic for a gym because the tall ceilings and stuff. This house doesn't have anything like that, so we just put our squat rack in the basement. And that squat rack in the basement just feels like It's not good. It feels like it doesn't fit. It's too too small of a space for what it is. It takes up too much room. It doesn't work with anything. So we're just like, well, what should we do about the gym? And we ideally, in some sort of future, we'll finish off one of the rooms to be more of a gym instead of, like, a guest bedroom because that I mean, we use it every day.

So, Chris from Scotch. Io has been posting about this Tonal, t o n a l.com, And it's a system that uses magnets unlike some of these other ones, like, there's one that's like the mirror where you just do cardio in front of the mirror, and there's another one I think that's like Barbells and weights, but you gotta get it on your back somehow with a squat rack. It seems very scary. This thing is is kind of like a workout machine Where you have handles and you have a barbell and you have these arms that can be configured in every direction, but it turns the weight on and off via magnets.

And it honestly is the closest to feeling like any Jetson's age age technology that I've ever used in my entire life. It makes me feel like I'm living in the future when I use it.

So, like, if you're doing a bench press, there's a physical button on the barbell. You push the button, and that turns the weight on. It's like you can turn the weight on or off. You get stuck underneath this thing. You just turn the weight off. You don't have to have a spot or anything. But because it's all digital and it's all being done by magnets, It can do some really profound things that you cannot do with barbells and weights. Like, it can simulate chains where the weight gets heavier rid further, into the lift you are. So at the the furthest point in the lift, the weight is at its heaviest. And as you're decreasing it, the weight lowers. Or the opposite Where the weight's getting heavier as you're bringing it down. Like, just so many cool things like that. Or if there's, like, a burnout mode where if you're, like, pushing it hard and you Can't do that wrap. It will, like, decrease the weight ever so slightly so you can finish it. It is so stinking smart.

I never have to pick up a a piece of, plate weight plate to put it on a barbell ever again. It it Amazing. Suits my needs So supremely, every single time I step up, I don't even think about the weight values that I'm lifting. I don't think am I lifting x amount of pounds because it's always too Too hard in the best kind of way where it's, like, just pushing your limits, but it's never too hard to finish the workout. So, I can safely say that this thing is incredible.

The biggest downside to it by a long shot is the price point.