Chris Coyier talks with John, Ward, Dan, and Craig about the modern web. What technology should we be paying attention to? What tech has Chris used that was worth getting into? Flexbox or CSS Grid? Is there anything better than HTML coming? And what tools should developers be aware of?
Recording date: 2021-02-11
John Papa @John_Papa
Ward Bell @WardBell
Dan Wahlin @DanWahlin
Craig Shoemaker @craigshoemaker
Chris Coyier @ChrisCoyier
Podcast editing on this episode done by Chris Enns of Lemon Productions.
Craig Shoemaker 0:04
Welcome to Web Rush, the weekly talk show that brings you Stories of Real World development from industry experts. And developers like you and me. Each week, Ward Bell, Dan Wahlin, Craig Shoemaker, and John Papa, find out what it takes to write, deploy and maintain apps that stand up to the demands of the real world. And now, here are your hosts.
John Papa 0:30
Welcome back to web rush. This is Episode 122. And today, we're all talking about the modern web and kind of how we think about what's coming down the pipeline. We've got a special guest on today. But before we get to our guests, we have a full house. All four co hosts are on with me today. I've got the amazing Craig Ward and Dan on with me how you fellas doing? Doing great.
Craig Shoemaker 0:54
Awesome. I left my cape in the other room though, for for my amazing status, though.
Ward Bell 1:00
My life is a living hell, and I'm sure you all want to hear about it.
John Papa 1:09
Well, you know what, there's lots of ways you can go there. I'm thinking we'll avoid night of living dead with Ward today and just move right on to the topic.
Ward Bell 1:21
Yeah,
why not?
John Papa 1:24
So let's jump right into it. Cuz I'm super excited today to talk about the topic of the modern web with our guest, Chris coiler. How you doing, Chris?
Chris Coyier 1:33
Hey, thanks for having me. Really, to this is gonna be awesome. I listened to the show. And it's a it's just an honor to be on. So yeah, yeah, the modern web by guests. I guess that's where we could go with this.
John Papa 1:45
Well, you know, you know, the modern web is always a fun thing to talk about. Because no matter when you say that, it sounds modern, and updated.
Chris Coyier 1:54
or green. It's fun to go into, like the tech book section. You know, like Paul's books, there's some, you know, look at some books from the 90s and stuff like modern ASP or whatever. And you're like, ooh,
Ward Bell 2:05
I don't think Yeah, the modern web is. So yesterday, I'm going to the postmodern web. I hope that's what we talk about.
Dan Wahlin 2:12
Yeah modern's already out of date Ward
John Papa 2:17
for those of you out there who aren't familiar with Chris, first, shame on you. Chris is extremely well known out there he is somebody I've actually we just met this year, I think, this year, What year is it? I don't know, we met recently. I'm still in COVID years, personally. But before that I knew about you, Chris, from CSS tricks and code pen, and you're a co host of shop talk, another podcast, which happens to use the same, use the same editor or both of our shows web rashie. shoptalk. So kudos to our editor out there. Right sound. Yeah,
Chris Coyier 2:49
I feel like if you listen to both, you'll you'll just have those familiar vibes.
John Papa 2:53
And he does a good job out there, Chris. And if you're out there looking at podcasting, by the way, always drop Chris a liner, you can reach out to one of us in our Twitter handles to connect with them. So we appreciate all the hard work he does. But the big key today is all about the modern web. And the reason I wanted to talk about this is everybody who listens to our show knows that one of our themes is okay, so we're talking about technology, and what's coming or what's here, or what do people really use out there. But it's hard to know, with the 10 million things that fly at us on social media and in the news and from folks on podcasts, search ourselves of what topics should we pay attention to? And probably more importantly, which ones can we put aside for a little while. So we don't get hammered with a deluge of all the technologies out there. And I find it interesting to talk to other folks who kind of talk about these topics such as yourself. And I'm curious if you come on here and tell us what is it that you feel is something we should be paying attention to? And maybe more importantly, what kind of lessons do you have for our listeners and our audience for how you think about this kind of stuff?
Chris Coyier 4:02
Mm hmm. It's such a huge one, though, isn't it? I like what you said about like, what is you know, it's one thing to like, look at what's like, sort of kind of coming down the road, or like, that's worth being excited about. And then, like, balance that with what do people actually do? Like when you actually spin up a new site, or actually reach for some technology, like, those things are very different. You know, like, I think it's exciting to be like, look at web assembly. Look how cool that is a mixed code run really fast. Wow, I'm kind of excited about that. But if I sit down and do some real work, I'm not gonna be like, how can I make web assembly do this? Like, it's just not even gonna cross my mind. You know, like, it's not like a tool I use for day to day work yet. So those two things are really like, at odds. I mean, it's just it's fun to watch it. I'm almost like a voyer of webassembly but it's not like a something I actually read. For Is that what you meant that you feel that way too?
John Papa 5:03
Yeah, actually, that that's exactly what I meant. I think webassembly is a good place to start, because I know Dan and Ward specifically have some opinions on this topic. So why don't we share on air? Dan, kind of where we've been going with this?
Dan Wahlin 5:15
Yeah. Well, I think Ward and I both have been intrigued, as Kristen was mentioned. And I think there's a lot of opportunities there. But I'm with Chris, when it comes down to, you know, a lot of the work I've done a lot of work, or does a lot more time in here, too. But is, you know, like a line of business app. Does my end user care? Not in the slightest? So I think it really comes for me boils down to Yes, that's a very modern thing. Like super modern, maybe ready, maybe not depending on who you talk to. And I don't think from the end user perspective, you know, my mom, I promise you, she's not going to go to your webpage and be like, Wow, did you use web assembly for that? Like, that's amazing. It's so much faster now. But at the same time, I think, you know, having worked with a lot of teams over the years is you get to the point where maintenance is better. And productivity is better than that might be a modern thing I might gravitate to, but I'm not there yet. Or a ward where you add on that?
Ward Bell 6:19
It doesn't it? Well, it doesn't address the problem I have. So you know, I'm just a curious lurker. I guess that's what you're saying to Chris, is that there's no you know, you're not running into any situations, when you say, geez, webassembly, that's the answer to life, I can't, you just don't have the problem. But I can imagine other people have the problem. So good for them.
Chris Coyier 6:44
I dance it though, like I have the problem a little bit, because I think of it as just like fast computing, I might have that wrong. But I think the big core thing of webassembly is like, I can now run. I don't know my c++ stuff on the web, but it runs super fast, right? So that's great. So I could write, you know, for example, I run code pen code pen has all kinds of like micro service II kind of things because it's you write code, and then we process it for you. And then we show you the results. Well, I care about how fast that happens. So if all of a sudden I can use web assembly now to make that way faster, of course, I'm intrigued. But that problem doesn't have a problem. Sometimes my everyday problem is just like, I need to like make a new component and refactor this UI over here, and just kind of more, more day to day ish kind of work. So I'm kind of I'm in between,
Ward Bell 7:36
I had two thoughts about what you just said there first. Yes, it's about making things faster, although that doesn't seem to be the appeal that I'm finding most out there. So I'll get to that in a second. But also,
John Papa 7:48
you mean, what people are seeing,
Ward Bell 7:50
you know, the reason that people are going Gaga, you know, that I'm running into or going Gaga, or it is so is because they don't have to write going Gaga Gaga. Sorry. So that they don't have to write in JavaScript, which they loes on site on principle or something like that. And so the the appeal is that I could write in my favorite language or in my favorite environment, and still get to the Web. It gets the people's browsers. And that seems to be the motivation behind blazer, because then no other respect, do I see it as actually? You know, it's it. It doesn't actually, as far as I can tell, from my looking at, it doesn't actually make constructing an application easier. It just does. So in an environment, that's
Chris Coyier 8:37
but it doesn't
do like UI does it?
Ward Bell 8:39
Oh, well,
what would blazer, I don't know how much you know about it. But then, and we're gonna have a show about something I hope, you know, they, they, they do their best to, to create a UI surface that you can an abstraction that you can talk to, and try and insulate you. So they do their very, very best to keep you from thinking about JavaScript and HTML. And that is tremendously comforting to a community. And so that's the that's the attraction. That's one principle, the attraction. But I don't think that's why they made web assembly necessarily, I thought they made it as you say, for performance. But now I gotta ask you, given that you have to cross the divide between because there's, you can't, it doesn't have access to HTML and all that. I mean, to the one of the sandbox or whatever the right terminology is doesn't, you know, you have to cross a boundary. What good is it? I mean, can you really get performance out of that? When you factor in the fact that you're gonna have to shuffle things across that boundary? I'm not convinced.
Chris Coyier 9:42
Well, what's the is the boundary like in the network?
Ward Bell 9:45
No. You know, I mean, you have to, I wish I had the right terminal,
John Papa 9:50
like between the web assembly area and the DOM browser to determine
Dan Wahlin 9:55
your exact JavaScript run.
Ward Bell 9:57
Right? Exactly. You have to you have to throw things back in A fourth across that. And it's like, Hey, I got to learn anything I gain it. I mean, Do I have anything that's so compute bound that I could actually value to gain value? Or am I gonna lose? Probably? at all?
Chris Coyier 10:11
I would only use it when it's like massive computation. Exactly. It's something that took five seconds now takes point one seconds. Well, that was the bottleneck. It's not the transfer? Well, I think we're getting more and more used to having to the value of throwing stuff to something else, and then getting it back. I mean, web developers, you know, what, what is proven? Now I mean, I'm sure web assembly is like, quote, unquote, proven or whatever, but whether developers are actually doing in droves, his stuff like Cloud Functions, I have to throw it over the wall and have some processing happen and get it back. So to me, I'm already throwing it over the wall, I just over the wall is now empty, is not webassembly or something, right?
Ward Bell 10:50
So I want to ask you about that. Because usually, when I'm throwing it over that wall is because it has to be performed, the work has to be performed on the server, not because it's faster on the server, but because it's something that has to be done on the server. So you're saying you have workloads that you would throw over the wall, just because it could execute more quickly? I don't have those workloads and anything I do. I'm curious if you do?
Chris Coyier 11:13
Yeah, kinda that, that, especially if we're talking where I, you know, future of writing code in the browser, which is of high interest to me, you know, we're used to using your local computer to write code and like run VS code and hit save and let Webpack run and yeah, yeah. And you do that, because your local computer is so powerful. But like, that means, you know, but what if the web could be as just as fast? You know, like, obviously, that's interesting to me like, like running VS code in the browser, but having it performed even faster than your own computer can at rebuilding your whole website. And honestly, this is very niche, because this is like, developers building tools for other developers. So
John Papa 11:59
they weren't, you know, I was building an application the other day, and I pulled in this really cool UI component, but it brought along a lot of dependencies with it. How do you deal with that?
Ward Bell 12:08
I don't like that. JOHN. It reminds me that the AG Grid, which is a an advanced data, editable data table that we use in a lot of our enterprise apps, because it addresses the complex scenarios we encounter. AG Grid doesn't have any dependencies at all.
John Papa 12:29
Zero dependencies. Well, tell me why is that good? Like, what is the value of having zero dependencies?
Ward Bell 12:34
Well, it's, it's wonderful not having to wonder if while I'm pulling that in, I'm also pulling jQuery and or lodash. Or who knows what, in part, because that's extra stuff coming over the wire. It's extra files, that I don't know what they're all about. It means when my clients security team has to evaluate this, they're evaluating AG Grid, and not everything else that might be slipping in under the covers or something that we have to worry about there.
John Papa 12:58
Now, it's great to see this day and age, you can have a zero dependency library that does something like complex data grid functionality. So all of you out there, do check out AG Grid at their website at ag-grid.com.
Let me try to frame this if I can, because this is just one example the topics we can talk on today. It sounds like what I hear you both saying is that a new technology comes down that is talked about a lot and it gets a lot of fame. webassembly. In this case, people are excited about it. There's a place that it's it's almost good for you or you're giving advice to say there's a place for people to segment that and say where can this helped me in my current? Job? Yeah, architecture, it takes a while to find it. Right. And if you can't find it, maybe put it aside. But maybe if you can find it, use it in that spot, but not as a replacement for everything. Like you're not going to go replace CSS tricks tomorrow with web assembly and throw out all your JavaScript in HTML and
Chris Coyier 13:56
write no book. It doesn't feel like that's the niche for it. I guess. Like, it's not really gunning for you with CSS tricks.
Craig Shoemaker 14:03
I'll do it with code path. So
John Papa 14:05
Ah, gotcha.
Chris Coyier 14:08
But yeah, it's it's I don't I don't know enough about it. So I feel like we've talked a lot about something where I'm just like, like I said, a boiler I barely get it. But but it definitely occupies that. You know, that weird spot.
John Papa 14:20
But I think that's indicative of kind of the conversation today, right is you We can't go a day in our industry without something commands like, what is this in the social media world? Now? It's clubhouse, right? Everyone's like, have you gotten a clubhouse invitation to come on now? Like, and most of me is like, Oh, my gosh, yet another social media platform. And then there's little tenths of me. It's like FOMO. You know, why am I not on here? But most of me is going No, just No. But it's hard to do that kind of thing with technology coming at you. Because you don't know what's going to be the next thing you need.
Chris Coyier 14:54
Or I mean, maybe that's the number one conversation in tech, at least you know that I get asked at conferences like that. You go through and then and podcast questions and all that is just an extreme sense of the technology moves too fast. And I don't know what to pay attention to and what not to pay attention to. And the answers they get from that are never satisfying, is you could you could hear John, Papa tell you, Oh, don't worry about it doesn't matter that much don't don't sweat it. You know, I don't know if that's what you'd say I'm just an example. I might say, sometime, because I kind of want, you know, I kind of want you to bring your blood pressure down, like Ain't that big of a deal. Just use building websites, if you're good at doing your job. Why are you so worked up about this? But that's not a very satisfying answer. Because it can be your job to make decisions, you could be paid to make technology choices. And if you don't even know what the landscape is, your chances of you making good choices are low, or maybe there was a choice that you could have made, you just you just didn't because it's just totally off your radar or, or whatever. And then it's like that you feel like a dinosaur, then you feel like oh, my God, the world just just passed me by. And this was my thing. I don't know that I kind of get it. And I don't even have an answer for that, you know.
Craig Shoemaker 16:13
So it'd be interesting to find out from you based off your experience, particularly with with code pen, and also CSS tricks is what's something that's relatively new, that's considered maybe modern web ish, that you have used and you found like, Okay, this really made a big difference in what I was doing, it was worth it for you to get Yeah,
Chris Coyier 16:32
I mean, react, whatever, like, but that's not that's a specific technology, really,
I mean,
component based UI eyes. in JavaScript. It's a big deal. That's been a big deal for a bunch of years now. But like, that's like, it feels like technology that's, like shaken out, that there's a lot of people figuring out how to build front ends, and then that stuff came along. And we're like, oh, that's how you build front ends. You build them with componentry. And you stitch them together. And so you know, React did a great job of that. But there's all kinds of libraries that do basically an equally good job with different dx and different problems they solve. And I was like, that's big, that's still feels like modern web to me, even though whatever that ship is kind of sailed. It's like, that's just how we do it. Yeah, modern
John Papa 17:19
web doesn't mean has to be came out Friday, you know, it can mean right, that it's okay to have a Java framework that you use, or web framework, let's be more broad. Yeah, that's been around for five to 10 years even. But I really want to get back to something you mentioned which technology decision makers? I almost feel like, if I was giving somebody advice now on how to choose stuff, and if that's part of their job, that is a skill in itself, which I find very difficult to hone. When I'm talking with folks, especially conferences, we get all these questions about, should I use react or Angular stealth? Or God knows what? Well, instead of giving that answer to somebody, teaching them how to make that decision, for their scenario, would be what seems to be valuable. And I bet most of our audience out there is at least had to face that at least once on their own. If they were asked, what should you choose? And then do you fall down the path of pick what I know best and force everyone else down the road? Or do I do I really do an unbiased balanced? One answer,
Chris Coyier 18:21
you would think maybe the right answer is just in a research. Okay, well, I don't know any of these five technologies, I'm gonna build the same thing five times and then evaluate the nuances between those five things. That's not gonna happen. Nobody, nobody's gonna do that. It's too much. So you might look at all the five, you might like, look at the docs a little bit, you might be like, Ah, that one has the nicest homepage. So I guess I'll just pick that one. Or you could just be like, I generally hear that word more in conversation. So I'm just gonna pick that one.
John Papa 18:52
That's how people pick stuff. Wait, blues, my favorite color. So react is the way to go. So if you're telling Maybe,
Chris Coyier 18:58
yeah, I mean, that's it. There's probably reality to that. But you know, it might be okay. It might be like, well, then I tried it. And then I found these rough edges. And then I realized that this other technology speaks directly to those rough edges. So I'm going to switch I know there's cost to switching. But sometimes that kind of knowledge, it has to be hard won. He can't, he can't like skip that part. You have to do the part where you screw up or make their own choice or something. And then you can come to the right choice. And it's like, I can't meet with you in the hallway of a conference and like, help you skip that hard part.
Dan Wahlin 19:35
Speaking of that, Chris, so right choice, wrong choice, flex grid, or Flexbox. grid.
Ward Bell 19:43
That's where I was going with it.
Dan Wahlin 19:46
I love these flex grid, you're like, let's see.
Ward Bell 19:49
Table tag, table tag. Can we just use table and just be done with it? I mean, that's where I'm living.
Chris Coyier 19:54
It is a fascinating thing. So we're talking about CSS layout and Flexbox and CSS Grid, which are different kinds of CSS layout, that is a way to phrase that question is like, which one should I learn? or which one should I use? The answer to that is so nuanced that it's also hard to do. Like, I haven't seen a conference talk just on that, but it deserves one. And it's probably three hours long, because it's complicated.
Ward Bell 20:23
The answer is doesn't have to be, could I just pay? It has to be really, I can't just pick one and say, that's what I'm using. I don't even want to know about the others. No, no, darn it,
Chris Coyier 20:32
you can, you kind of can, because you'll be able to do a lot of stuff in one or the other. But then when you pick when you pick the one that doesn't quite fit, it means you're kind of like shoehorning something in that doesn't, that you if you just had a little more knowledge you could have like had a better time doing I push you on this?
Ward Bell 20:52
Because I'm wondering, you know, sometimes saying in order, I know it's not the perfect fit for x. But if I have to go learn why in order to get that other thing, I'm really better off in sort of doing it in a clumsy way than x then having to pay the cost of learning all of why are you are you saying that? No, no, no word when it comes to Flexbox versus see it whatever the other one was the assessor? I I really need to know them both? Or are you saying you know what? I'm living within the constraints of one of these is good enough?
Chris Coyier 21:27
Well, that's fair. If you're trying to tell me I'm a human being and I have limited hours in the day. And and it's unrealistic to ask me to learn everything under the sun just to proceed with building a website. I can't argue that, you know, then then learning either one of those things is probably fine. If you absolutely have to press me all the way then grid, I think grid is a little more generally useful than Flexbox. is. But there's people that try to answer it with really like quippy quick things. Like for example, CSS Grid, you can do this cool thing where you can set the rows and the columns like a table like you joked about CSS, a mental model of CSS Grid. A table is not the worst thing. It's very different than an HTML table. But it's comparable in that it has rows and columns. Whereas Flexbox you don't know. It can wrap meaning it feels like it will have rows, but it really it doesn't. I can't say in plexus, I can't say be on row two. It's like not doesn't quite quite work like that. So it's so the quip would be Flexbox is one dimensional and grid is two dimensional. Okay, that feels Okay, quippy wise. But it's like it's not the real story, in a way it's like, okay, but I find in my day to day usage that most of my CSS Grid usage is one dimensional, because I use it to set up columns columns are just a one dimensional thing and rock and roll. So I'd say literally 90% of my usage of CSS Grid is just to set up some columns. Imagine like, anything, you go to the web brush homepage, and see that you know that there's the album marked on the left of like a big play button. And then the rest of the content, the header and all that stuff. Well, that play button is a column, and the column is 72 pixels wide, and then there's a gap of about 15 pixels. And then there's the rest of the stuff for me to express that in CSS Grid is really easy. say this is a two column grid. The first column is 75 pixels. The second column is all the rest of that, and there's a gap of 15 pixels, I can express that really, really simply could you express that in Flexbox? Two? Totally, you can, but I would argue maybe not not quite as cleanly. Even though it's a one dimensional, so that little quip of Oh, it's only Flexbox is for one dimensional stuff. Yeah. Anyway, sorry, that was a little tirade. No,
John Papa 23:49
no, no, I wanna, I want to get back to a topic you you mentioned earlier about Cloud Functions, too. So this comes up a lot. And I hear a lot of things in full disclosure, I work for Microsoft, and I like Azure Functions. But I've used lambda when my previous job we use at risk lambda quite a bit. It's actually there at that job. And lambda first became a thing. And I hear all the time from folks that functions and serverless is the way to go for everything. And then I hear other groups going, I just don't see a lot of need for functions. I think there's a lot of confusion. I'm like, Is this one of those things like web assembly in your mind where if you find a place use it, or do people have to jump in and wholehearted or how do you think about this?
Chris Coyier 24:35
Well, I think the the what has driven the conversation there a little bit is the is the kind of growth of jamstack or whatever is the idea that that static hosting is kind of a nice way to build sites, which is probably was this all of this stuff plays together, right? We talked about JavaScript frameworks and component built sites and all that. Those just play nice instead. posting those like work nicely there, as do static site generators, of course, which have their own chunk of popularity. So there's all these types of sites that work nicely on static hosting. And then you have static hosting, saying, if you choose me, I'm going to give you some juicy dx developer experience, I'm going to give you connector repo every time you push the master arm and deploy for you. Sites like nullify came along and said we're gonna do as your static sites does this now, which I think is still in beta, right, john, but it's still it's like people are that has evolved as like, that's my expectation. Now, finally, web hosting that works, how I work as a developer, thank God. But not only that, I do a PR against the the repo, I get a I get a like a immutable as nullify calls it but I know that's just a technology term, but like a URL to that PR that can look at what my WordPress site does not have a preview URL of prs. That's like not a thing, oh, my God, the DX there is amazing. I can just go review prs and click a link and see that code ready to go on the site. And if it's cool, then I merge it to me. That's amazing. And all you're telling me, every single file on this hosting is CDN backed. It's all around the world. What? And I don't even have to think about SSL because you're hosting it for me. So it's automatically SSL. And that's just free. What, look at that laundry list of crap that you get for a static site that's like, awesome that I just never even have to think about just Jo developer, and I just do it. Okay, so static sites, yeah, I'm in. What's the caveat for a static site, I don't have a server, I can't hit a database, I got I need a database. And so functions, Cloud Functions, like as your functions come in and say, hit us. Not only are we we can do this for you, but you don't just like static hosting offer, think about the server I don't, there's all this like, dx stuff I got for free Cloud Functions. Also, this is evolving, but have pretty good dx, you know, they're pretty easy to deploy, they're pretty easy to use. And then you look at the pricing page, and it's like, how much is this going to cost me? And they're like, we're thinking like four cents? What do you think? And you're like, I think I can afford four cents. That's cool. So it's like, all the dominoes just fell over for that. And it feels like, yeah, that seems like the way to go. You know, I don't have to manage the server cost four cents, it's CDN back to get the whole thing it's like, just seems like a good idea. And then it kind of hit you know, so if you're the kind of person that looks at that, and says, I don't care, you're probably the kind of person that's like, knows your way around servers Anyway, you already have a server that's well maintained, and, you know, doesn't require this like team of DevOps people to run, or does, and you have the money for that, because you're so successful Anyway, you know, it's like, you're already doing pretty well. So you might look at it and be like, ah, the new kid stuff, I don't need that. But the new kids, they're like, I don't have what you have, or have a million dollars to run this team.
John Papa 28:01
Yeah. So if you got a big back end, and you're a large company, you know, like a Walmart or, you know, something like big, right? You've got an entity using your words, a million dollars to run this team. If you have a back end written and whatever technology, Java dotnet, whatever, on the back end node. And you've got the people building all that for that already. Would you see a place for serverless technologies still in that model to either replace, or augment? or enhance? Or how would you guide folks to look at that? Yeah, kind
Chris Coyier 28:35
of pricing is a big deal. You know, if you're like, I have to, this was a story at code pen. It was like, okay, we're gonna process your sass for you. It's one of the many languages we support, you write your sass, CSS, we process it, and we run it. Should we do it in a web worker or something? I don't know, maybe. But sass running in the browser is like a couple of megabytes like massive screw, we're gonna run it in the cloud somewhere. In the early days of code pen, we went to AWS and spun up an EC two server and installed sass on it, which was Ruby at the time. So that server needs to run Ruby. And then and then did it and that cost us money. And it cost us like, well, we have to make sure that the you know, the operating system on it is up to date that Ruby is up to date on it. And what are people going to write in here, they're probably going to try to break out a Ruby and get our server credentials. So they can do Bitcoin mining. There's all kinds of security implications of it, too. So we have to like sanitize your Ruby, we have to set up fancy permissions on that server so that even if you do break out of it, it for example, can't execute other code or make network requests and stuff. There's security implications of it that would be easy to forget or get wrong. So then along comes a serverless function and says, Why don't you run Ruby here? This is on a little tiny little box that has no power. It can do nothing. It has no it has all that crap turned off. So I'm going to run it there just because the I don't then have to Keep this instance up and run security patches on it and think about the security and all that stuff. So I've gotten a lot of benefit immediately from that. And again, it's like four cents or something, you know, like we hit microservices pretty hard. And they, you know, our bill is always low on a function.
John Papa 30:17
So you're saying it's less of it? If I hear you correct me if I'm wrong, you're saying it's less about that? Yes, your enterprise backend server and service functions can serve the same purpose by using your API or turning SAS, for example. But it's the infrastructure and the cost and the security implications you also have to think about, yeah,
Chris Coyier 30:35
I mean, at the time, we're like, we are running a traditional old server and we're moving to serverless. Not because it's hot, but because the advantages are there.
John Papa 30:44
And wait, you're not using a technology because it's hot. We're all supposed to do just drop everything the next time.
Chris Coyier 30:52
But it was, you know, it saved us money and increased our security. There's all this stuff. And we didn't have to go all in which I think you were alluding to, it doesn't mean that we have to rewrite our stack, it means we have to rewrite this one little thing. Now that story is as complicated over time, because not complicated, but you can, it can get confusing. Like if you write 30 of those, the temptation when you're starting is to make 30 repos. And to get those all, you know, now you've got this, like, complicated ass.
John Papa 31:24
How do you design it? Yeah,
Chris Coyier 31:26
well, how do you share stuff? What if they all need off? You know, now you have a, you have a SAS one, but actually, you have like eight SAS ones, because you want to run all the different versions. And that requires just different functions. And you might have 100 of them in the end, and you want to share stuff between them. What do you do then are you like publishing little NPM things for them to use? And all that and that story for us, it hasn't even totally shaken out yet. I mean it for us and has looked more like moving back to a mono repo so that when you're sharing stuff, you're just sharing it across the file system, maybe it's right next door. But that's not as simple as that, you know, there's all these newfangled tack to, to help you with that, like learn on yarn workspaces and all that stuff. Because he, you know, and then the deployment of that is tricky, too. You have to teach whatever you're using to deploy to know about your weird mono repo structure and not be deploying too much or too little, or what, you know, these are weird problems, you
Ward Bell 32:23
know, are you building a web application need to deliver it soon and don't have the people to do it? Maybe you're not sure your company has the skillset or experience to do it. And maybe we can help. I'm your host word Bell, and my day job is building applications for companies like yours. I don't do it alone. I'm president of idea blade, a consultancy that specializes in enterprise web application development. We're particularly strong in Angular RX JS NGR. x Redux, on the front end, and dotnet, Microsoft technologies on the server, were a small tight knit group of people handpicked by me, for their expertise, experience integrity, and team spirit. Maybe we can help you with architectural guidance and hands on development. And if there's something we don't know, and in our field, really, there's too much to know, we can draw on our personal connections in the Microsoft rd, MVP, and Google GDP networks, as well as our international circle of really great developers, people we know and trust personally, if you've got a project that's keeping you up at night, shoot us an email at info at idea blade calm. That's info add idea. blade.com. And now back to the show.
Dan Wahlin 33:34
Well, along those lines. We just had a discussion, you'll have to help me out guys. I think it was within the last month about you know, with the modern web, there's been some things that come along with it that don't feel modern. And that would be for instance, some of the bundling options and how we bundle what's your take on where things are going there. Do you have any preferences these days? I mean, I know WebEx like the go to and I still use it a lot myself. But kind of what's your vision of where do you think that it doesn't feel monitored? It
John Papa 34:05
feels caveman ish to be real blunt with how we have to deal with it. And I apologize over caveman audience out there for Dan. negative behavior tourism. All the Geico caveman are now no longer listen.
Dan Wahlin 34:20
Yeah, hi. I'm so bad. We should probably edit that out.
Ward Bell 34:24
When we Chris, you said you said bundling. He said that as if it was past tense. Are you saying bundling is is now so I think
Chris Coyier 34:32
so. I've been bundling.
Ward Bell 34:34
Okay, I thought maybe Hey, I don't know
John Papa 34:36
what word really likes. This is the days of 400 script tags in a single HTML file. Right?
Ward Bell 34:42
No job control language man. JCL. That was
Chris Coyier 34:47
a bunch talk about that though. That's interesting. Isn't it like that? We were ingrained that is part of our DNA to look at that and and thumbs down. That that was bad, and it was bad and kind of it but the question is, is it still bad Which is tricky because when HTTP two was the was the thing for a minute, everybody got excited because they were like, oh, that doesn't matter anymore. That's wild. I can go back to that in that in, not only do I then not have to bundle, but you get the secondary advantage, meaning that if I break cash on any of them, it doesn't break the bundles cache, it breaks its cache in everybody was like, that's the greatest thing ever for web development. I can't wait for this to happen. And then we got word from on high. I don't know who delivered this news to us. But somebody delivered the news to us that too bad, you still have to bundle that the performance of that isn't quite there yet.
John Papa 35:36
We just too bad. That's the key isn't it was a new thing. HB two, we were talking about that when I worked at Disney years ago, like, wow, we could take advantage of this. And at the time, we're using grunt to manage our build process, like many people, and I started looking at it. But then somewhere along the line, it never seemed to really materialized in a pervasive enough way to really grasp it to do what we wanted. And at some point, as you said, some mysterious hook cloaked figure must have come down from high and said, this is not going to be the solution you're looking for.
Unknown Speaker 36:08
How does that happen? Right.
Chris Coyier 36:12
I was Paul Irish, I think.
John Papa 36:15
And what if you missed the I don't know. I
Chris Coyier 36:16
mean, I don't know. It was weird. But you know, is this like everything else? It's all intertwined with other things that were happening at the time, because it was the bundlers are saying, Okay, I'll do this for you. And there's gonna be some perf benefit, but it's not the only reason people reach for bundlers, for example, Webpack would do all that work for you. But it also said, I'll be the thing that does hot module reloading to I'll be that like, weird middleman step that was like, I'll refresh the page too. And that's, like, more like what people wanted? Like, I don't, I would use Webpack just for that. Because that makes such good. dx, you know?
John Papa 36:52
And then it got combined. Like, why like you think about that somewhere along the way, those two concepts got merged into a thing, right.
Chris Coyier 37:00
And so this is all build up to what's happening now, which is a lot of people are rethinking that a lot of people are saying, wait, wait, wait, it's maybe time to untangle those things. And I don't know that that hasn't shaken out yet. But that will be a story in 2013. Now, we're starting to be on an already this story. And it's going to start happening. Now. Web pack is all over the place. And I don't see it losing its seat on the crown for a long time. I mean, code pen is all bundled up in Webpack. And I have no desire to start rewriting that tomorrow, in some other thing, you know, but for newer stuff, Greenfield or so I think people are going to be reaching elsewhere because they can get just as good dx out of other tools that are starting to lean a little bit away from bundling all the all the all the time. In I think the big names are starting to emerge from this, you know, you got Jason Miller from preact, saying I made this thing called w Mr. Google that if you haven't seen it, w m is like an opinionated little collection of stuff that that does what you expect to do. You can do all your imports. But it doesn't like bundle in development. So it starts up a little server for you. It does the hot module reloading. But you don't even have to npm install, it just looks at your dependencies and figures out where you didn't you don't even have to type npm install it just like quote unquote, just works, right. Another big player, and that is snowpack. snowpack dot dev is kind of rethinking this too, and is saying you don't, you don't really have to bundle I think these tools are are saying like in production will still bundle for you. But in Dev, we won't even bother. We're going to lean into that. Let it let the dependency tree just shake out. And it can be kind of fast, because one of the costs you pay when you bundle is I hit Command S or Ctrl S and the entire bundler runs in it, weaves its way through the tree of crap and find stuff and tree shakes and does whatever it's gonna do, makes a new JavaScript file and then hot module reloads. If you don't if you could just skip all that when you hit Command S nice, that's totally faster. And then maybe on the way out, I'll bundle for you because the performance Gods say you still have to do that. Because it's a little too sloppy.
Ward Bell 39:13
It's also a lot easier.
Chris Coyier 39:15
The debugging is so much easier when you're not having right i think toasts dot dev is another one that's in this fight is is a player in the snare Veit. I don't know
John Papa 39:24
Evan used to pronounce that one vite vj,
Chris Coyier 39:27
I'm rocking it for now, but I'd be happy to be wrong on it. But look at that, that's four names right there that are like kind of rethinking this, and those are they're kind of big names, too. They're not tiny little tiny little nothings, you know, and just see that much going on. Now what, what is the same about all of them, the thing that all of them lean into is that ESM stuff is the fact that we have now native imports and exports and they're all being like, Okay, well, let's just use those them and just let them do what they do. I think that's a big story of 2021. I mean, it's it's been a long, it's been a long road. It's not like the first year we've had those, but now it's like now they're starting to be everywhere. Now node people are starting to say, that's all we're all. That's all we're interested into. We're gonna be writing our node modules that way. And now if node is that way, and the browser is that way, Mm hmm. That's pretty cool. And nobody cares about iE 11. anymore. That's like dropping off the map. That was one of the last holdouts that story is changing things. So 2021, that's, that's probably the biggest story in JavaScript is a full blown industry leaning into ESM.
Ward Bell 40:38
So So Chris, one of the things I've been wondering about is, is like HTML doesn't seem to have changed forever. We're kind of stuck with the tags we've got. And we live with them. And, you know, we accept them as part of the landscape. But every once in a while, I wonder, could there be something better coming down the pike? And Dino, if anything?
Chris Coyier 40:55
Oh, it's fascinating question. It really does seem like, wow, does JavaScript move fast? Even the native language, CSS moves, slower, but it still moves, and HTML just doesn't move at all? And maybe there's reasons for that maybe that HTML is such a fundamental language. I mean, think of the very first web request that browsers get is the HTML. So you like please, please be careful with that. You know, I don't mind that it moves a little slower. But we get stuff sometimes. You know, html5 was such a big thing when, you know, everybody was excited about, but we didn't get a lot. You know, that time we got like, some input element changes, which were all pretty positive, but it wasn't like a major sea change in HTML. But we got
Ward Bell 41:37
semantic tags, remember semantic tags and UI? We're all gonna be semantic. And yeah, I don't think at all.
Unknown Speaker 41:44
Well, work on it. Work on it. Should
Ward Bell 41:46
I work on it?
Chris Coyier 41:47
Yeah. Cuz you get roles for it. And roles have, you know, accessibility as a part of the story. And it should be. You know, I think of details summary feels pretty, pretty fancy and new, you know, you have free little disclosure elements that I don't hate that, you know, but every time people dip their toes in it, they get burned. You know, Google had this toast element, and people just were furious about it, like move too fast. And that there was like, a whole drama thing around that. Then there's, you know, what HTML could really use is like a modal element. So we kind of have one I think dialogue, I think it's called, but I'll have accessibility people are like, No, you have screwed the pooch on this. Nobody should be using the dialogue element, you're like, damn it, that would have been a good one to get in. But okay. One of the problems with dialogues is that you need focus trapping within them for good accessibility. Now there's this HTML element called inert, but nobody's shifted, because it's just it's, it's tricky. It means anything with the nerd on it, you can focus inside and that's a that's a powerful tool to have it be great in HTML, but we don't really have it yet. tricky. I was just reading literally today, my co host, Dave, Rupert sent me this on the MS. Edge explainers. blog. There's like, somebody at Microsoft here. There's a whole list. Melanie Richards, I recognize and Greg Whitworth, who's ex Microsoft and stuff. There's a new element that Microsoft is talking about called pop up, which is a little bit like, what if you clicked on something on a website, and it would open up a little thing like kind of a context menu, imagine right clicking on something, you get a context menu on the web, it's usually comes from the browser itself, not the webpage. Or like the title element in HTML, you hover over it, and a little yellow box comes up and says, this is an explanation of that. But that just comes up, this would be more like click it and then get more contextual information, maybe a menu maybe a little chunk of HTML that explains something like a tool tip kind of thing. Wouldn't that be nice if we had that in HTML, and there was native primitive things that would allow you to build that kind of thing? So you know, people are trying to evolve HTML, I think it's gonna happen slowly. It's It's nice when, when it does happen, you know, again, my co host, Dave, he's been working on, you know, web components. We haven't even mentioned that. I don't want to derail us on that territory. But that's interesting stuff. Sometimes HTML work can start there. I think that's a smart way. And he's been working on tabs a lot. People constantly have been like, HTML needs, tabs. tabs is like a thing, that it's crazy that millions maybe of developers have rewritten over and over and over and over and over. And guess what, they always get it wrong. Because there's accessibility assumptions about how tabs can work and yada yada like Shouldn't the browser's just give it to us? Yes, they should is the answer. Will we get them in? 2021? Probably not. But it can be part of the story and 2021, figuring it out documented writing these explainers talking to browser vendors, you know, I don't know that world. But I, you know, I don't know if we agree on this, but I would assume HTML needs to evolve. It would be nice to see it do more.
Craig Shoemaker 44:52
Yeah, it seems like it's a very slowly changing pace. So yeah, it'd be awesome to see more As it happens, what do you see Developer Tools going? Like? Have you any new dx experiences that are coming down the pike? That would be worthwhile?
Chris Coyier 45:10
That's kind of a good question. Yeah, I don't I'm not super prepared. But you know, I've been working in next JS a little bit, and I have found it so fast. You know, it's so cool. It comes with, it comes with its own, you know, opinions about how things should should happen. And one of the, I don't know if this is their thing, or an open source thing, or what, but if you have a problem, you wrote some incorrect JavaScript, you have an undefined variable or something. And you hit save and hot module reloading happens, what you see in the browser, super duper nice. They like blurs the background, and this red thing comes up. And it shows you a little stack trace of what happened and what line and what character The problem was. But it clearly had a designer who thought about it. And like, it's so nice. And I think, then, two minutes later, I'm working on my Ruby on Rails application, and I got a, I hit refresh on the page, and five pages of logs come through, and I gotta scroll up and just find somewhere in this godforsaken log crap that spit out in my terminal, what has gone wrong. And it makes me think, like, how different those two experiences are, you know, you can hate on JavaScript if you want, but look at the dx of that error I just threw. That was nice. That was helpful. What else was I gonna think, you know, in HTML to that, have you seen navigator dot share the API. And since it's an you so you, let's say you have a android phone or an iPhone, there's a native sharing, like you're on Twitter or something and you're like, share this and some native thing comes up, that's like, share it, where do you want to share it to an SMS? Do you want to add it to your notion pages, you know, it's like nice, like, integrated. navigator, chair, all it does in JavaScript is just trigger that. You pass it a URL and a description, and seven, it just opens that. So now you don't have to have a stupid share on Twitter button, that's 2.8 megabytes of JavaScript on your page, you just call navigator dot share, opens that. That's great, right. But it shipped in JavaScript, because JavaScript moves ever. But maybe that should have been and this is a Jeremy Keith thing, button type equal share. And in HTML, it would trigger the same thing. Like, wouldn't that be nice, you know, anyway,
John Papa 47:22
you bring up an interesting point. I mean, for you. So for years now, JavaScript moves fast, like we have these yearly changes, right? It didn't A long time ago, and you get those memes on the Internet of tell me how old you are by telling me something about technology. Like, whatever happened to Ekman script, for example, all these other versions out there, it's like the last 13 colonies, right? It's funny how JavaScript now evolves fast, but HTML never picked up on that wagon. html still is at that low, slow, you know, decade upon type death. March of we're not changing. And it is interesting, and I hadn't thought about this, too. You mentioned it. It's like, why is HTML moving at this slower pace? Is it just great the way it is? Or?
Chris Coyier 48:11
I can't possibly answer that.
John Papa 48:13
I'm gonna put you on the spot. But
Chris Coyier 48:14
yeah, I mean, it does feel like I mentioned earlier, it does feel like a maybe like, a little more dangerous to evolve hot and fast, because it's so so superduper foundational, and and wildly backwards compatible. You know,
Craig Shoemaker 48:27
it almost seems like we we learned from a very big mistake, which was x HTML. And I mean, I don't know how it plays into it. But it's just like you're saying, like, they're almost afraid to change things too fast? Because it was it was such a hard shift between those two. Mm hmm,
Chris Coyier 48:46
you're probably right. And it doesn't feel like incredibly limiting. If the conversation is like, Are we going to lose on the web to native platforms? Is apple going to win? Because it's so much better to have a native app on their thing that people don't use websites because they suck? That would be a sucky battle to lose? I think everybody's a little worried about losing that one. And it kind of feels like we're winning at the moment. It kind of feels like the web is Yeah, right. But it's gonna be a little battle forever, probably. And so but it doesn't seem like HTML is like maybe that that the ticket in the early days of that war, it didn't feel like that was the ticket to winning it, it felt more like JavaScript was like, let's get the geolocation API because people need that. Less. Make sure input type equals file works. Because native apps can do that and stuff. Let's make pw A's stuff a thing, because that's the real way to compete with it. It didn't seem like HTML was like part of that war. But maybe it'll start being a part of that war when the war becomes your shipping too much JavaScript, your pages super slow. And I could remove five megabytes of JavaScript by shipping navigator dot share in HTML And then now we're competitive with native platforms again, that's probably an oversimplification. But maybe that's, you know, if we can make it part of that war, maybe it will evolve.
John Papa 50:09
Hey, Chris, it's a we could talk to you for hours. I'm sure I'm sure listeners would love that too. But it is time for us to put an end to the show and get to the our final thoughts for everybody out there. And I'm sure everybody's got a great thought today for our audience. It's a brand new section of the new year. We're only into February right now. 2021. With Ward, I'll start with you. What is your final thought? For our listeners?
Ward Bell 50:33
got to remember to do something about Valentine's Day.
John Papa 50:38
By the time the good news is not too late for you, but it's too late for me.
Ward Bell 50:43
That's my message to you. It's too late for you. Sorry, you forgot about it. You're in big trouble now.
John Papa 50:49
Get a head start in 2022.
Unknown Speaker 50:54
Oh, my gosh.
John Papa 50:55
All right. Fair is what is your final thought for our listeners?
Chris Coyier 50:59
I'm gonna fast him all idea you got you extracted lots of good ideas for me that I'm feeling very smart right now.
John Papa 51:06
No worries. We'll move on. Craig, what's your final thought for our listeners for Christmas couple years ago, my
Craig Shoemaker 51:13
wife got a journal that I never wrote in. So I put it over on the side of my office here. And I told my kids every once in a while come in and just write something in there for me. And I like won't read it immediately. And it'll be like, one of my favorite things like, you know, this type of thing you want to rescue if the house is on fire type of thing. And it's just been cool. They've been coming into writing in it. And so it's a it's a neat thing.
John Papa 51:36
Cool. That's really sweet. Unless they write in it after they're mad at
Craig Shoemaker 51:41
you, you know, it's entirely possible. Yeah. I'll find out as I start reading through what i
Ward Bell 51:45
did it i put my pants today. That kind of stuff. That's timeless,
Unknown Speaker 51:51
timeless. Exactly. I was, um, Dan, how
John Papa 51:56
do you follow that up for your final thoughts?
Dan Wahlin 51:58
Uh, you know, I've been trying to focus a lot more on, I guess what I would call busy work versus impactful work? Because in my world of what I do, and I know, john, you'll sympathize a lot with this. There's a lot of things that come our way. And I think most of us have this in our everyday job. And so kind of finding that balance between Hey, is this really something long term planning that is useful? impact wise, or is this just looks good on paper, it looks good. When you send out that email, you know that I'm busy. Look at me, I'm busy. So try not to do
John Papa 52:34
that. That's great. And my final thought for everybody is to just take care of yourselves out there this year is, so far, it feels like a continuation of 2020. And we've we all joke on the internet about how 2020 was going and probably wasn't a great year for most people out there. So make sure you're taking care of yourself mentally, physically and take a break from stuff and hopefully you learn something from our podcast. definitely catch Chris on his podcasts and us on ours and you hear from us every week. Thanks for listening. See you next time.