Craig Buckler joins the panel to jabber about Chrome Dev-Tools and some things you may not know you can do with them to empower your own front-end development. Some of the basics you may already know like Incognito mode. Some others you may not know like black boxing libraries you don’t control or throttling connections to simulate poor connections. He also talks through searching through network requests to see how your domain’s specific requests perform.

Panel

Guest

Sponsors

Links

Picks

Contact Aimee:

Contact AJ:

Contact Charles:

Contact Dan:

Contact Steve:

Special Guest: Craig Buckler.

Sponsored By:

CHARLES MAX_WOOD: Hey everybody and welcome to another episode of JavaScript Jabber. This week on our panel, we have AJ O'Neill. 

AJ_O’NEAL: Yo, yo, yo, coming at you live from the gray skies, pleasant gray. 

CHARLES MAX_WOOD: We have Dan Shapir. 

DAN_SHAPPIR: Hi, coming to you from hot and sunny Tel Aviv. 

CHARLES MAX_WOOD: Amy Knight. 

AIMEE_KNIGHT: Hey, hey from Nashville. Feel like long time, no talk. It's been a while. 

CHARLES MAX_WOOD: I know. I was happy to see you. Steve Edwards. 

STEVE_EDWARDS: Yes, this is the funny guy, not the smart guy coming from Portland, Oregon.

CHARLES MAX_WOOD: I'm Charles Maxwood from DevChat.tv. This week we have a special guest and that is Craig Buckler. Craig, do you wanna say hello? 

CRAIG_BUCKLER: Hello from a very wet UK. 

CHARLES MAX_WOOD: Nice. 

 

This episode is sponsored by Sentry. Sentry is the thing that I put into all of my apps. First I figure out how to deploy them. I get them up on the web, then I run Sentry on them. And the reason why is because I need to know what's going on in my app all the time. Yeah, I'm kind of a control freak, what can I say? The other reason is, is that sometimes I miss stuff or I run things in development, you know, works on my machine, I've been there, right? And then it gets up in the cloud or up on a server and stuff happens and stuff breaks, right? I didn't configure it right, I'm an idiot, and I didn't put the AWS credential in, I didn't do that last week. Right? That wasn't me need that error reported back. Hey Chuck, I can't connect to AWS. The other thing is, is that this is something that my users often won't give me information on and that's, hey, it's too slow, it's not performing right. And I need to know it's slowing down because I don't want them going off to Twitter when they're supposed to be using my app. And so they need to tell me. It's not fast enough and Sentry does that, right? It puts Sentry in, it gives me all the performance data and I can go, hey, that takes three seconds to load, that's way too long. And I can go in and I can fix those issues and then I'm not losing users to Twitter. So if you have an app that's running slow, if you have an app that's having errors, or if you just have an app that you're getting started with and you wanna make sure that it's running properly all the time, then go check it out. They support all major languages and frameworks. They recently added support for Next.js, which is cool up at sentry.io slash sign up. That's easy to remember, right? If you use the promo code JSJabber, you can get three free months on their base team plan. 

 

CHARLES MAX_WOOD: Now you want to just remind everybody why you're world famous. 

CRAIG_BUCKLER: Am I? I don't know. 

CHARLES MAX_WOOD: You're from the UK. You must be. 

AJ_O’NEAL: Yes. 

CRAIG_BUCKLER: Okay. So I'm a freelance full stack UK web developer. Uh, I write a fair few articles for SitePoint. You've possibly seen them there. And you found one of my articles from another site, ironically. But, uh, yeah, that's probably what I'm best known for writing about web stuff and primarily vanilla JavaScript performance, progressive web apps, that kind of thing. 

CHARLES MAX_WOOD: Right. We got you for dev tools of all things. 

CRAIG_BUCKLER: Yes. Dev tools, something we should all use more of, I think. So it's an article I wrote about a month or two ago, about some 15 dev tool tips or secrets you may not have been aware of? 

DAN_SHAPPIR: And before you go into that, I have to interrupt. And I'm the guy that interrupts. But what I wanted to bring up is the importance of web dev tools. I mean, we kind of take them for granted. They're built essentially into each and every browser. I still remember the days when they weren't where if you were using Firefox, you had to install a firebug or stuff like that. And I think we underappreciate the importance that they've had on the evolution and success of the web. The fact that in every browser, you just have this built-in development environment that you can use to figure out why stuff isn't working the way that it's supposed to be working. It's an amazingly powerful capability. 

CRAIG_BUCKLER: Totally agree, Dan. I'm with you. I was there in the early days of the web when using IE, which was pretty much the only browser that worked at times. And you got an alert for every JavaScript error. And that was your debugging. And the one that sticks out in my mind was object, not an instance of an object at line zero. That was the error that you would get sometimes, depending on what you were doing. So now we've got development tools that actually are usable. 

CHARLES MAX_WOOD: Yep, absolutely. And I was just going to clarify when you say dev tools, it is the developer tools in the browser.

CRAIG_BUCKLER: Yes. I mean, I think they, they evolved from Firebug. That was the first one that really took it to an extreme, but so yeah, now, now they're all built into the browsers. 

CHARLES MAX_WOOD: Yeah. Well, and it's interesting too, because Brave is built, it's kind of a reworked Chrome, Edge is now a reworked Chrome. Everything's Chrome. Chrome DevTools is now what we're doing now. 

CRAIG_BUCKLER: Pretty much, but Firefox DevTools don't overlook those. They're very good. 

CHARLES MAX_WOOD: They are pretty darn good.

CRAIG_BUCKLER: Especially from a design point of view, I think the Chrome DevTools have caught up recently, but if you're doing anything with Flexbox or Grid and CSS, the Firefox DevTools are fantastic. 

STEVE_EDWARDS: Yeah, that was where I first came aware of them. I was doing a West Boss class. I think he had a couple of free ones on Flexbox and Grid, and he specifically used the Firefox. There's a dev version of the browser. It's got the blue icon, and you could really see some cool stuff with the Grid and Flexbox layouts. For those. 

DAN_SHAPPIR: Yeah, it's the nightly. 

CHARLES MAX_WOOD: My mom calls it Foxfire. 

DAN_SHAPPIR: It's the nightly version. It's kind of like Chrome's canary with the yellow icon. 

CRAIG_BUCKLER: Yeah. I just use the, sorry, I just use the standard edition that everyone else uses and it's still good. 

CHARLES MAX_WOOD: Yeah. Now I have to say that some of these tools I already knew about, like, I think everybody kind of gets incognito mode. I almost said it funny. But I think that's a tool that we all kind of reach for when we need kind of a fresh run at whatever we're doing, right? But can you give us one, some tip or tool out of DevTools that maybe people don't know about or don't know as well? 

CRAIG_BUCKLER: Oh, there's so many. This is the problem. But I would say the second one of my list was auto starting DevTools. So I think most of us, even if we're starting in incognito mode, we right click the icon or we launch it, we then run our app. We then open DevTools and navigate to the pane we want. But we can do that all in one step by changing the shortcut, just adding the one of many hundreds of flags that you can put on the shortcut in Chrome, certainly. So minus incognito starts in incognito mode. And you can also auto open DevTools for tabs, which automatically starts DevTools. And you can just place the URL at the end. So if you're always going to localhost 8000. You can just put that URL at the end of the shortcut, and it'll open that all the time. 

DAN_SHAPPIR: I wanted to mention, by the way, that I also obviously use Incognito mode a lot, but actually one thing that I did in Chrome that you can actually do in other browsers as well is I actually created a profile specifically for debugging. And the advantage there is that sometimes I do want to maintain sessions. For example, if I want to debug the process of what happens when you're already logged in. Also, incognito does change certain aspects of the browser's behavior. So if I want to more closely match what users might experience, then like I said, I sometimes I just use this dedicated profile that I created just for debugging purposes. 

CRAIG_BUCKLER: Yeah, there's a flag you can point to. I forget which one it is now, but you can just point it at a particular folder and it'll create all the bookmarks and all the caching and everything there. So it's very easy. It's very possible. You can delete it if you need to, and you can create any number of profiles you like. But yeah, you're right. Incognito mode does have a few drawbacks. You can't, for example, install a desktop icon from it. 

CHARLES MAX_WOOD: Wait, Dan, so you just create a profile, right? Just regular profile. 

DAN_SHAPPIR: Yeah, but that that's totally local. It's not associated. It's not synchronized with any other device. It's just, I just actually called it debugging just gave it a recognizable icon and I just open a new browser window with that profile whenever I want to debug and incognito is less appropriate for some reason. 

CHARLES MAX_WOOD: I wanted you to call it debug and shappearing. 

DAN_SHAPPIR: By the way, one important thing about both incognito and an alternative profile is that you don't load the regular extensions, browser extensions that you usually have into the debugging session. People forget that all the Chrome extensions, for example, actually run inside the same browser context as your own web page or your own code. So it's a lot of resources that might be loaded, JavaScript that might be executed. If you're profiling, for example, for performance, it can definitely get in the way. So that's another reason of using either Incognito or a specialized profile.

CRAIG_BUCKLER: Yeah, absolutely. I think as well, extensions like ad blockers, they can sometimes block things you don't realize. So running without one of those is definitely useful. And it's closer to what the majority of users are doing because very few people install extensions. I would have thought we all do. We all like to configure our browsers to the nth degree, but I suspect that most people.do not install extensions unless it's the Amazon control bar or whatever. 

CHARLES MAX_WOOD: I have so many extensions installed, but I think my browser can read my mind at this point. But yeah, one thing that I have found though, is that sometimes I get weird behavior with some of the things that I'm doing or that other people are doing that I've actually, I've turned on incognito mode and then I've actually systematically, cause you can turn, you can turn the extensions on for incognito mode. And so I've systematically turned them on for incognito mode and then loaded incognito mode just to see if that's what's causing my issue. That's always fun. 

CRAIG_BUCKLER: Yeah, that's, uh, that's going down the rabbit hole, isn't it? I think, uh, what Dan, one of the things Dan's been doing. So there's a user data D I R to directory, which just points to any directory and you'll have no extensions. You'll have everything's clean. Your cash isn't there. And, uh, so it's completely different profile and certainly you can do that in Chrome.

CHARLES MAX_WOOD: So what's this command palette? I don't know if I've actually used this. 

CRAIG_BUCKLER: Yeah, it appears. I would say probably about a year ago in Chrome, maybe before. But it's just like the command palette you see in VS Code and lots of other applications as well. It's Control or Command Shift P. And then you get a list of pretty much everything that you can do in the browser and in DevTools. And there's a few things in there you can't do in any other way like take screenshots of certain elements and that kind of thing. But, um, yeah, I mean, you can use it just to find files if you want to, but there's a list of all the, all the commands that are there, just start typing and it will give you the most relevant options. 

CHARLES MAX_WOOD: Oh, nice. 

AJ_O’NEAL: So it's like an Omni search for the developer tools or like the way the help menu works in Mac. 

CRAIG_BUCKLER: That's right. Yeah. And it's familiar. It'll be familiar to you if you've used any of those applications and as I said, things like VS code have got them and it's, it's I can't remember where they first appeared. Probably Mac, possibly, was it in Sublime Text? But I don't use it very often, I must admit. But just now and again, you forget where a particular option is, especially because DevTools is getting so huge. There are so many options and so many features that just being able to use a command palette because you've got a vague recollection about some feature can be really handy. 

AJ_O’NEAL: I wish every app had these. And in Mac, most of them do, but for example, Twitter, I wish Twitter had one of these, or Facebook. Ever go to, you know, find what are your privacy settings and it turns out it's under accessibility instead of privacy? 

CRAIG_BUCKLER: Yeah, well, that's the next step, isn't it? Putting it into websites. So every website will have its own command bar where you can get to whatever page or feature you like. 

DAN_SHAPPIR: What I really want is that instead of sophisticated UIs, we just have a search box that kind of works like Google, and you type in what you think your command might be, and it'll find your command for you and do it for you. 

CRAIG_BUCKLER: Do you think just the standard users would like that? Or is it just us? 

DAN_SHAPPIR: I don't know. People like Google, I think. It's an interface that works. It's through the test of time. But it's an interesting question. At the end of the day, I think about me. 

CRAIG_BUCKLER: Yeah. 

AJ_O’NEAL: But what was the alternative to Google? Because there was something it was some sort of directory service and it had everything categorized and you could click in to see, like I wanna look at news sites and then it would show you news sites. Was that Yahoo? 

CRAIG_BUCKLER: Yeah. Certainly the early days of Yahoo, definitely. 

AJ_O’NEAL: Okay, I thought there was something else, like maybe it came after Yahoo, but like something like a web directory, but it was like a competitor to Google at the time, if I remember correctly. Anyway, I think that having direct way to get to things is awesome. But I also agree that it's nice to be able to explore through a tree structure, assuming that the tree structure actually follows its structure and your privacy settings aren't under accessibility. 

CRAIG_BUCKLER: Absolutely. But I think this is just fairly safe to use. This command palette, it'll be familiar to you. You use it once or twice and then you know it's there. 

AJ_O’NEAL: Yeah, there's so much on this list. 

DAN_SHAPPIR: By the way, kind of related to what you just mentioned, because you also said that you can you know, you can also use it to find a particular file. You can do either on the Mac, either command or command P to get a particular file. What I found that a lot of people don't know is that you can actually get to a line and column inside the file, but just having like a colon, line and number, colon, column, colon the file name, or if you're in the current file, then it's just the numbers. And that's kind of useful because a lot of tools that find errors that say at runtime, report the line and column where they happen. So you can really easily get to the exact code, put in a break point or something, and try to figure out what happened. 

CRAIG_BUCKLER: Ah, I didn't know that myself. That sounds great. So can it actually get to the right column even if it's compressed code? 

DAN_SHAPPIR: Yeah, actually, actually, what I tend to do is I use it with like it says like a line one column 3574 and I get there, then I mark a bit of the text and I prettify. And it keeps me on that line. So I can actually get to the prettified version of the file and find the, the problem, they be able to understand the code as it were, and figure out what maybe is causing the problem. This has really helped me a lot of times. 

CRAIG_BUCKLER: Yeah. And I think prettifying is, is come on in the last few years as well. Cause I don't know if you remember the early days, but yes, you could a particular file, but it never kept it. But now you can set break point, you can set break points or do all sorts of other analysis on that file while it's prettified, which is really handy. 

DAN_SHAPPIR: Yeah, I totally agree. Especially given the sorry state, what's it called? When you're trying to use the original source code, source maps, the sorry state of source maps. 

CRAIG_BUCKLER: You've had problems, have you? 

DAN_SHAPPIR: Yeah, they never really, they almost work which is sometimes annoying, more annoying than just not working. If something doesn't work at all, then you just say, heck with it and do without. But they almost work. So you kind of hope for the best, and then they fail you in some annoying way. They don't recognize the variable or the breakpoint. You're trying to single step, and you're jumping all over the place. It can really be annoying. 

CRAIG_BUCKLER: Yeah, they're probably OK for smaller projects. I think once you start getting past that critical massive code, then they become a little bit problematic. 

AJ_O’NEAL: Now, my understanding on that, I think we had someone previously on the show that said the reason that source maps suck is because there's not actually a defined standard that is followed by the tools universally. There's different flavors of source maps. And so when you mix and match your tools, they things break down. Is that what it is is that we don't have a standard for it or is it too complex of a problem or? 

DAN_SHAPPIR: That's essentially what I also seem to recall. I'm trying to remember who it was I think it was somebody from Google, but we had a bunch of them over so I don't remember who it was my apologies but I think that that was the reason that was given that it was just some sort of initially created there's some sort of a labor of love by a few people at Mozilla and then you know nobody followed through with it and it is what it is more or less. That was, that's my recollection as well. 

CRAIG_BUCKLER: Still it's better than nothing. 

DAN_SHAPPIR: Oh, for sure. What's the next item on the list? Where were we? 

CHARLES MAX_WOOD: So the next item is JavaScript. 

CRAIG_BUCKLER: Yeah. And this is one that appears probably about two years ago. It's quite simplistic. So you can use a coverage panel in Chrome. And as you're navigating around your single page application, it will show the parts of the code that have and haven't been used in, in red, if it hasn't been used. So it works for CSS and for JavaScript. And I know there are tools out there like Purge CSS and obviously tree shaking in JavaScript. But this is a quick and dirty tool that you can use just to find whether this function is actually called at any point and remove it manually. But I will warn you now though, that it doesn't work with multi-page applications. So if you've got your WordPress site open and you're navigating around, it forgets between page views, which I'm surprised they haven't implemented yet. But I'm sure it's coming. 

DAN_SHAPPIR: Yeah, but in multi-page applications, I guess you can also just download for each page just the JavaScript that it needs because it's being reset anyway. Although it will get in the way of caching if you do it that way. You can never win. 

CRAIG_BUCKLER: No. 

DAN_SHAPPIR: Yeah. And let's see what was the one that you listed below that. Ah, locating DOM changing code. Yeah, I like that one. And surprisingly, I found that a lot of people using DevTools are indeed not familiar with.

CRAIG_BUCKLER: Yeah, and it's really difficult, actually. And this is something that you often see something change in your DOM. And you don't know how or why it's being triggered. And yes, you could obviously hunt through your JavaScript to see if you can find some matching selectors. But actually, if you just right click that element and do break on, you can choose whether you want to break on the subtree modifications or attribute modifications or a complete removal. And it'll break at that point when something happens. So there are times when it's just completely invaluable and there's just no other easy way of doing it. 

DAN_SHAPPIR: I totally agree. And if I might contribute a tip or two for the elements panel as well. So an easy one is that if you select an element in the elements panel and then go to the console panel, you can actually do $0 and see that selected element which can be useful because you can then apply stuff directly to that element. For example, you can do the get bounding client rect or something like that to get the shape instead of looking at the data in inside the elements panel or anything really that you want to do with it. It's a nice shortcut to get to a specific element. You can also even search for stuff in the elements panel, which is something that again, I find that a lot of people are not totally aware of that you can do. So if you happen to know that you're looking for a particular URL or something like that, or your fragment, you can actually use, you can use that to find stuff in the elements panel. 

CRAIG_BUCKLER: Definitely. And it's got, it's got a bit easier, I think, because the early versions, it wasn't like a control F or command F to find things. And now I think they've, they've backtracked on that a little bit and, um, and started using sensible shortcuts for it.

DAN_SHAPPIR: Yeah, it mostly works. I have run into some issues with it when the URL, when the HTML gets fairly complicated, but usually it works and it's a nice way to get around a complex document if you've created one, unfortunately. 

CRAIG_BUCKLER: I think we all do. But as well as $0, you can also use $1 and $2 and $3. And I think all the way up to $4 or $5, which is the previously selected elements that you to choose. 

DAN_SHAPPIR: Yeah, I remember that there was something like that. Thank you for reminding me. One more thing about the elements panel is that you can also look at the computed properties. When you go to the elements panel, you've got the styles of the showing the styles associated with the selected element. But you know, it's broken down according to the cascade. So you see the most specific one to the least specific one. But if you just want to see what are the properties that are actually applied to this particular element, just select computed, and then you get an alphabetically sorted list of all the CSS properties, their values, and where these values came from. 

CRAIG_BUCKLER: Yeah, and that's also in Firefox. And this is as well as that in Firefox, there's a little event icon on each node that has a handler attached to it. So that's really useful when you can just click it and it allows you to jump to the right place in the source or open the debugger. 

DAN_SHAPPIR: Cool. I didn't remember that. Thank you. So going back to your list again, I keep, I keep jumping between tabs because I've got your list in one tab and then actually the open dev tools in another, trying to play around with the stuff. I think the next one you've got is actually in the network tab. So, yeah, I practically live in the DevTools Network tab. I do a lot of my work there. I think like you, I'm very much into web performance. For me, it's really part of my day job. And very often I need to analyze the performance of particular websites or web applications. And the Network tab is one of the first tools that I reach for. So, what was your tip for it?

CRAIG_BUCKLER: This is the Throttle Network Speed, which is also available in other places, but the Network Tab, I totally agree. It's one of those that I think when you first use DevTools, you're obviously going to use the console, you use the Elements pane. But as you become more conscious of performance issues and problems and downloads, then the Network Tab is the way you spend a lot of your day. There's a Throttling option, which you can set your browser to limit the bandwidth down to sort of slow 3G or even custom bandwidth. So you can tell what it's like when someone's in an airport or on a hotel Wi-Fi. 

DAN_SHAPPIR: Yeah, I really pity people who you try to use the modern web on a slow 3G or equivalent network. It's terrible. Some sites just don't load. I will say two things about that. I totally agree with you. It's, it's immensely useful to be able to throttle the network like that and see the impact on your website because like too many of us just test our websites, the websites that we're building or working on in our office or on our own home, fast home network or no fast iPhone, whatever. And we don't take into account that a lot of people don't have this privilege. And we are just potentially losing these people as potential users. But an interesting thing there is that if you do throttle the network, DevTools actually puts this yellow warning sign next to the network tab title. So this way you don't forget that you actually throttled your connection and you don't understand why it's loading so slowly. 

CRAIG_BUCKLER: I don't think many developers will forget they've got a slow connection. It's painful. And you switch it off immediately. Once you've done your testing, you don't switch it on again. 

DAN_SHAPPIR: One thing that I have done as well is I've actually copied some of the configurations out of a web page test and added them as custom configurations to DevTools. So if I want to simulate 4G, which is not one of the options there, or a cable network or something like that. I just took the values that WebPagetest uses for these types of throttling and put them there. 

AJ_O’NEAL: What is this like not for the backwards people, but just the people that aren't blessed with fiber? 

DAN_SHAPPIR: Exactly. 

CRAIG_BUCKLER: I think that's all of us at some stage. We're not all permanently connected to a fast network. Well, probably during the pandemic we are, but you're out and about. I was out yesterday on a train. It was horrendous, the connection. It wasn't really the it wasn't the general speed. It was just because it was very patchy, it would appear one second and then disappear the next. And I think being able to just get an impression of how your app loads in times of spotty connection, then that's a really useful thing to have. And it's not perfect. And I think it's, as Dan just said, you can look at web page tests and actually get some real data from real devices around the world, which is very useful. But having those those facilities and dev tools definitely give us an impression of how your site works for the wider population. Well, I just have to say, 

AJ_O’NEAL: I was going to say, I just think it's funny because I mean, there are some people that are connected to fiber all the time and develop on fiber, but the difference between, I don't know, 30 megabit internet and gigabit internet, I don't see how that is not negligible unless you've got one of those homepages where it auto plays a video, you know. It's like once you get past a certain speed any faster is not you know, it's not faster. So it's it What was funny to me is just the idea that a 4g network speed would give you a different result than gigabit for the average type of thing that you would do with a web page because It's like the limit of fastness is if it's faster than you can blink. It's faster than you can blink you can't any faster doesn't matter. 

DAN_SHAPPIR: Yeah, the reality though, is that with the TCP based connections that many of us are still working, I mean, you know, HTTP three, not understanding. Very often it's about the latency much more than the bandwidth. So unless you're really bandwidth constrained, usually what will impact you most is, is the latency and also how spotty your connection might be. I mean, think about, you know, again, the good old days before the pandemic, when you, let's say you were walking out of a show and you were trying to open an app to get or a web page to call a cab or taxi. And everybody's doing it at the same time. And you really have terrible connection at that point in time. And you just can't open their app because it's so bad. 

CHARLES MAX_WOOD: I just want to point out that there's a problem with this picture that you've got here, Craig, and that is, is that it says fast 3G and slow 3G. If my phone says 3G, I don't know why I'm trying. 

CRAIG_BUCKLER: Well, there is that. I mean, I think these settings that are in Chrome are going back a few years now. So, but you've got to also take into account that, yeah, we're quite fortunate in the Western world about how good our connections are, but you go to some emerging markets and slow 3G is the maximum you're gonna get. So I think that as we, especially as we come out of the pandemic and as internet access becomes more widespread globally there will be markets that you might want to target, which don't have the fast fiber and even, even 4G, they've got a rudimentary net access, which we were using maybe five or six years ago. 

CHARLES MAX_WOOD: Yeah. I think that's the other thing that's key here too, is that which market you're targeting, right? So if I'm building an app that's going to be used internally in the office, and it's only going to be used there, I may not care about this. But if I'm building an app that's going to be used on people's phones out in the field and I don't know where blah, blah, blah, blah, right. They might wind up on the 2G network that's out in the boonies because they're going to be servicing some oil jack somewhere. And they've just never installed an antenna out there because nobody goes out there. 

DAN_SHAPPIR: Or there might be in the subway or being very rude inside of an elevator or something like that. And you know the connection might just might be intermittent because you know where they happen to be at that particular moment in time 

CRAIG_BUCKLER: Yeah, but also if you get your app working on 2g or 3g You're gonna be fairly confident that it's a work on a fast fiber network as well Yeah, so I think if you if you strive for performance from the start then only good can come of it 

CHARLES MAX_WOOD: Yep, 

AJ_O’NEAL: and I don't know what it's like in the UK, but America is 50 percent and maybe 30% rural out of 50% that's suburban. 

CRAIG_BUCKLER: I think the UK, I mean, if you look at the coverage that like mobile networks and some of the top hosts and ISP show, then it's something like 99% of the country is covered with good fiber and good mobile access. And it's nonsense. It's just clearly marketing spiel because there are pockets where there is very little access. There are people who are still struggling on, you know, 100 megabit connections to their house. And I live in a fairly rural area. I can't get a mobile signal or not a reliable one. So I can get outside. But as soon as I'm in my office, that's it goes. So I think everyone's got different experiences. And yes, if you're in the center of big city, you're generally going to be fine. But not many people live in the center of big cities.

 

Did you work your tail off to get that senior developer gig just to realize that senior dev doesn't actually mean dream job? I've been there too. My first senior developer job was at a place where all of our triumphs were the bosses and all of failures were ours. The second one was a great place to continue to learn and grow, only for it to go under due to poor management. And now I get job offers from great places to work all the time. Not only that, but the last job interview I actually sat in was a discussion about how much my podcast had helped the people interviewing me. If you're looking for a way to get into your dream job, then join our Dev Heroes Accelerator. Not only will we help you get the kind of exposure that makes you attractive to your dream employer, but you'll be able to ask them for top dollar as well. Check it out at devheroesaccelerator.com. 

 

DAN_SHAPPIR: But remind me AJ, weren't you the one who used to tell us that at a certain point in time all your neighbors start watching Netflix and there goes your network connection?

AJ_O’NEAL: That sounds quite possible. I was living in an apartment complex with shared internet two years ago, and I think we had that problem very, very badly. Then now we have individual lines to these condos and townhomes. But yeah, it just depends. If you're in an HOA, HOA is that have an internet agreement with the renters typically is really, really terrible because they're bringing in one internet connection so they can give you free internet. You can't purchase directly from Comcast or I don't even know if there's any other internet providers, but you can't purchase directly. And it ends up that you do have problems with the network getting congested from people that live in your neighborhood in that block. 

CRAIG_BUCKLER: And that's probably gonna get, yeah, we're gonna have a similar experience when we move to 5G as well 5G on the face of it is faster than your landline connection. But as soon as you get to an area where there's lots of people all using the same access hubs, then it will slow down. 

DAN_SHAPPIR: I do have 

STEVE_EDWARDS: a couple of any speed, isn't it? I mean, it's true of anything. Start getting a whole bunch of people. You only got so much capacity. 

CRAIG_BUCKLER: I guess so. I assume that both landlines, they're connected to some sort of massive hub. But I think with certainly with 5G is I understand it's very similar to in that respect. So if there's a lot of people in one concentrated area, then they're all using the same infrastructure. 

DAN_SHAPPIR: Yeah, and again, you might be fine most of the time, but then suddenly, just when you need it, for example, let's say you're traveling and you really need to get into your insurance website, but again, because you're traveling, you have something that's really equivalent to 2G more or less. If you can't load you're the insurance company's website because they insisted on putting some huge image there that of some smiling people that does you absolutely no good. You're not going to be a happy camper, but I do have a couple of additional tips associated with the network tab. And I'd be curious to see what you think of them. One thing that I really like to do in the network tab is enable two settings that are as I recall, disabled by default. One of them is to group resources according to iframes. If you're using a webpage that has multiple iframes on it, then you can really get into a mess understanding what's being downloaded by what. So being able to group resources into iframes can be really useful. And the other one is that you can actually have it color code resources, kind of the way that webpage test does. So that instead of having the standard blue and green colors, for the bars, you actually have colors according to the resource types. It will be orange for JavaScript and this bluish thing for the HTML and purple for the CSS, red for fonts, I think. You can tell how often I'm in this tab. And I find it really useful because in a quick view, I can really quickly tell which resources are being downloaded when and what their impact is on the way in which the app is loaded. And it also actually let me get rid of the type column, because I have the type in the color. I don't need an explicit name of the type of the resource. Have you tried? Any of you actually tried playing with these settings? 

CRAIG_BUCKLER: No, where are they? Where's the color coding? That sounds really good.

DAN_SHAPPIR: So you, and then the funny thing is that you actually don't, won't find it in the, in the settings for the network tab. You actually need to go into the dev tools setting. So it's that wheel at the top right. And you click that and then scroll down to the network part and you have color code resource types as one of the things that you can check. 

CRAIG_BUCKLER: Got it. Right. I've enabled that immediately. So that's going to be really useful because I tend to use the filters along the top. So you get all XHR, JS, CSS and use those quite a lot. But I think being able to color code them as well, really handy. Yeah. That's a, that's a great tip. I've not seen that before. 

STEVE_EDWARDS: So I got a tip that related to one you've already mentioned that I didn't see mentioning in your blog post that I found pretty useful recently in next to the coverage panel about finding unused JavaScript. There's one called rendering and so it allows you to, there's a whole bunch of different options. You can show your core web vitals. You can disable local fonts. You can emulate pages. So I was working just this last week on a, on an issue where I wanted to, we have a bunch of reports that are generated like D3 or ChartJS and we want to make them printable for the users to be able to just print them out. So we decided to use instead of exporting to something like, I don't remember what tool you're using to a PDF. We just figured we'll use PrintView and so it works out really well. And one of the really cool tools that I found was on that rendering tab, there's an emulate CSS media type option and it has print and screen. So if you go to that and choose print, what it does is show you what your page looks like in print mode when you go to print it from the browser. And what makes it really useful is the fact that you can still use like the elements tab to see your padding and margins and all the stuff you can normally see in a screen view, but it's for print view. So you can tweak your print view. Otherwise you always have to go to your file print option and see what it's gonna look like. Close it, make your changes, open it back up again. So on this gives you the option to see what it actually looks like in print view. And then if you look on that rendering tab, there's a lot of other options too, things you can emulate like the prefers reduced motion media option, prefers color scheme, some of those other things. But I found that really useful when I was working on that print. 

CRAIG_BUCKLER: Yeah. If you're ever doing anything with print style sheets, it's, it's absolutely the easiest way doing it. And I think Firefox actually has an icon on the elements panel that does the same thing, but it's a bit difficult to find, but yeah, I totally agree. It's when you're doing print style sheets, the only, the way we used to have to do it is you would change the active style sheet to the print style sheet in your code and then debug it in the browser that way. It was the only practical option. But now with this, you can set a lot of the operating system settings. So, you know, as you say, print, and also things like prefers color scheme for light and dark mode, and prefers to produce motion. You can do it all in the browser rather than having to set your OS settings and then suddenly realizing that none of your animations are working because you forgot to switch that off.

CHARLES MAX_WOOD: I was going to ask about the filter network requests. So is this just a simple, it doesn't change the behavior at all. It just shows you the network requests that match the kinds of requests that you're looking for, right? 

CRAIG_BUCKLER: That's yeah, that's correct. So if you wanted to find a file, you know, files that are larger than, you know, a hundred, a hundred K in size or whatever you can put in larger than colon. And then a size in bytes, or you could put a K on the end of it is kilobytes or an M capital M for megabytes. And the one I think that's probably the most useful, especially if you're debugging performance, is trying to identify third-party resources. So ones that are loaded from another domain, things like Facebook widgets and Google Analytics and that kind of thing. And you can enter minus domain colon and then your domain, and it will show you all those assets that come from elsewhere. And they're usually the most shocking from a performance perspective. Because you suddenly realized that one little script that Facebook gave you has loaded a megabyte of tracking code. 

CHARLES MAX_WOOD: Hang up Facebook. 

DAN_SHAPPIR: No, it's a real issue. I mean, what happens is often this is outside the control of the developers building the application. Somebody in marketing says, well, we're having this smart campaign with Facebook, so I'll put in the Facebook pixel. And they do. And like Craig said, it's pretty heavy. But, but you know, okay, it's for a good cause. I mean, I need to measure the success of the campaign. But then the campaign ends, and nobody ever removes it. And then they add, they do a campaign, let's say on on some other platform, and they add a different pixel. So you know, at the end of the day, you suddenly find yourself that your website is loading some 10 odd pixels that nobody's using anymore. And that accounts for like 60% of your applications overhead and load time. It's a real issue. 

CRAIG_BUCKLER: And they don't look as though they would do that. That's the problem. It's usually just a link to a pixel or a script tag or something like that. And, and for most developers perspective, they'll look at that, go, oh yeah, that's great. I'll put it into my code and forget about it. All of a sudden you realize that you're downloading half the web just to show your page.

AJ_O’NEAL: What about NPM? 

DAN_SHAPPIR: NPM all finished. 

STEVE_EDWARDS: Shots fired. 

CRAIG_BUCKLER: Ouch. 

CHARLES MAX_WOOD: I thought that happened when Facebook got mentioned. 

AJ_O’NEAL: No, that was only a couple megabytes. 

DAN_SHAPPIR: I see that you also have some tips and suggestions for the source panel about blackboxing scripts. 

CRAIG_BUCKLER: Yes. So, you know, we all use libraries and particular web components or whatever that we have no control over something like Google Analytics, for example, or a Facebook script, or React or whatever. 

CHARLES MAX_WOOD: And I was going to say React. 

CRAIG_BUCKLER: Yeah. Or React or JQuery or I don't know, anything, anything you're using that you have no direct control over or you can't really edit yourself, what you can do is ask the DevTools to ignore that source file. So if an error is raised or an exception occurs or something like that, then it's not going to trigger any debug points. And it also means that if you're following code, if you're stepping through code in your debugger, it won't go into those scripts as well. 

DAN_SHAPPIR: Yeah, I found that especially useful in projects that use a Lodash, for example. People use a Lodash iteration functions, and you definitely don't want to single step into the Lodash code. You'll get lost very easily. So by just black, black boxing, low dash itself, you single step into the iteration method and you find yourself immediately within your function that is invoked for every item in the collection. 

CRAIG_BUCKLER: Yeah. It's bad enough looking at your own code, isn't it? Rather than looking at other people's. 

DAN_SHAPPIR: For sure. I have to say that the next one that you've got, which is log points. I have to, to be honest they're nice, but they haven't made such a big difference to me. And after you describe them, I'll explain why. 

CRAIG_BUCKLER: Okay. So yeah, a log point and we always console.log and I don't believe it. 

STEVE_EDWARDS: I don't. 

CRAIG_BUCKLER: I don't believe you. I'm sorry. I just don't believe anybody who says they don't. 

STEVE_EDWARDS: I will use it temporarily, maybe just to see where I'm at, but I live with my break points in my debugger and all the things you can do with break points. 

CRAIG_BUCKLER: There's certain things that you can output things with console logging a breakpoint. You don't want to stop on every breakpoint necessarily. And I know what people say that, yeah, you should be using a debugger, but console.log is very useful. And of course there's all the other ones, console.info and warn and whatever. So log points are a way of doing console.log without doing console.log. And you click a line or open a script in the sources panel, right click any line number and choose add log point and you can enter your expression just like you would with console logging. That line will then, or that piece of text or message will appear whenever that line is executed. I think most of the DevTools, they persist that as well, certainly during the current session. It's a way of doing console logging without actually having to change your code.

DAN_SHAPPIR: So the reason that I mentioned that I like it, but I found it a bit underwhelming, let's say, when Google added this feature into Chrome, is that I was actually already doing this in a bit of a more verbose sort of a way. What I usually did was just create a conditional breakpoint and put a console log in it as the condition expression. And because console log returns undefined, which is falsy, it never breaks. So I basically got the exact same effect. 

CRAIG_BUCKLER: That's a nice way of looking at it. And as well, I don't use it very often because although I do add console.log to my code now and again, then I've built systems that rip it out. So it's a nice thing to have. I think if you've got something that, especially if you're testing a live site where you're not actually working on the code on localhost or wherever, then it's could be a nice feature for you to use. 

DAN_SHAPPIR: Another issue is, of course, that if you're using minified slash uglyfied files, it might not be able to identify the variable name that you put in the expression. Because you're saying the variable current user, but it's actually underscore x. And yeah.

CRAIG_BUCKLER: Yeah, you do have to look at how the minified code has been changed. So unfortunately, it won't work in that respect. But yeah, I think, I think log points, I don't use them enough because I'm still very used to using console logging. And, uh, and of course I use the debugger now and again as well, but, but it's one of those features that just for quick and dirty messaging without having to change a script can be really useful.

DAN_SHAPPIR: I think we don't have a lot of times, so I'll just actually skip to number 12 because the other ones are kind of more related to stuff we already spoke about. And that's the rerun Ajax request. 

CRAIG_BUCKLER: So yeah, if you just right click, I think any network request, you can turn it into another request of any other type. So there's fetch and there's node fetch and there's curl, PowerShell and all sorts of other requests which you can then rerun and it just copies the syntax, which is, I think it's very useful when you first start using an API and you're not sure what's going on, you can just rerun that, or you can even use your own API. If you've got some code that is running and you know it's working, then you can just copy as a fetch and paste it into your own code somewhere else. 

AJ_O’NEAL: And for Windows users, all Windows users have cURL on their computer. And if you get an error when you do the copy as cURL, just make sure it's curl.exe, because Windows has two curls. It has PowerShell curl, which is a function, stupidly named curl, because it does what curl can do, but doesn't follow any of the same semantics. And then there's the actual binary BSD curl, the same that's on Mac. There's also a number of things that are on Windows. Tar, lots of the BSD utils are on Windows these days. FYI. 

STEVE_EDWARDS: If I had any hair, I would say, boy, that really makes my hair curl. 

CRAIG_BUCKLER: And don't forget, there's also Windows subsystem for Linux. So you've got another terminal that you can paste into as well. 

AJ_O’NEAL: Oh, of course. 

DAN_SHAPPIR: And another item that I think we also have to mention, because again, I'm shocked by the fact that so few web developers are familiar with it. And it can be amazingly powerful, is that is enabling local over file overrides. 

STEVE_EDWARDS: Oh, I know I was just looking at that too. That's that's awesome. 

CRAIG_BUCKLER: So yeah, I think DevTools is becoming its own development environment. And if you were on a new system, and you go to an office for the first time, you start a new job, and all you've got is a browser, then you can be productive immediately by some local file overrides. So this is really just replacing a script or a CSS file or an HTML file or whatever you need. And you can say, rather than downloading this from the network, point at this particular file or directory, and it will get it from there. And so you can make your edits and save it and have it refresh and it loads that file instead of from the network, which is astounding. 

DAN_SHAPPIR: Yeah, it's amazing. 

STEVE_EDWARDS: I had to pick a while ago because I know Chris Coyer from Shop Talk and CodePen and CSS Tricks had a video, a CSS Tricks video screencast episode on this thing. I'll see if I can dig it up again, but it was really neat to see it, how you can do it in there. 

DAN_SHAPPIR: I actually used this technique once a couple of times when doing workshops. So instead of having people prepare some sort of development environment and install stuff from, let's say from, from GitHub or stuff like that, I just created some sample URLs and had them open the file and open the JavaScript file, then enable local overrides and start making their own changes in the initial file that I provided them with. And that way they could actually implement stuff without having like they had this built in, like you said, development environment right on their laptop, regardless of what any other software that they happen to have. 

CRAIG_BUCKLER: Exactly. I think it's actually a really good way of learning now because back in the day, we always used to use view source and try and make some changes and copy it locally. But this, you can change anything. I mean, most sites are quite difficult to get into the code. But if you just want to add a JavaScript function or a bit of CSS then this makes it very straightforward and you refresh and it's all there. All your changes are there. 

AJ_O’NEAL: So this would be like the modern day bookmark lit without having to have an extension. You could just copy some code into the site. 

CRAIG_BUCKLER: I guess so, but it's, it's sort of more powerful than that. And then you've got a development environment, which is, it's not a full idea yet, but they're clearly heading down that direction. 

DAN_SHAPPIR: Yeah. It's got auto completion and everything. So, so yeah, you can just, once you enable that, you can just select any of the files that were downloaded from the network, start editing them, save your changes, reload the site, and your changes are suddenly integrated into that site. And it could be any website. It could be, I don't know, cnn.com or whatever. So you can effectively make changes in the way that cnn.com is loaded and see how your changes actually impact that site. It's quite astounding. The only limitation really is that again, if your source file is minified or even more so, if it's a result of bundling, let's say with NPM and with Webpack, sorry, then it can get fairly tricky to use this mechanism. 

CHARLES MAX_WOOD: Cool, very cool. Well, maybe someday we'll have Craig back and he can show us how to do all that stuff. 

CRAIG_BUCKLER: Well, thank you very much. 

CHARLES MAX_WOOD: All right, well, let's go ahead and do some picks and yeah, see where we land with all that stuff.

 

Hey folks, if you love this podcast and would like to support the show, or if you wish you could listen without the sponsorship messages, then you're in luck. We're setting up new premium podcast feeds where you can get all of the episodes released after Christmas 2020 without the ads. Signing up will help us pay for editing and production, and you can go sign up at devchat.tv slash premium. 

 

CHARLES MAX_WOOD: AJ, you want to start us with picks? 

AJ_O’NEAL: Sure, I will. And the first thing that I need to pick is tip number 15, which is emulate mobile hardware, because this is pretty cool it talks about you can emulate GPS location and tilt and all sorts of other stuff which I think is that we can't leave that out of this show so I'll pick that first of all and then Chuck you picked this a while ago which is why I got into it so I'm now going through the Lightbringer series starting with The Black Prism and 

CHARLES MAX_WOOD: good books 

AJ_O’NEAL: I'm finding it to be very enjoyable I just finished and so I need, you know, another series to keep me busy over the next year or two while Brandon Sanderson gets his act together and publishes the other 10 books that are going to take him the next 20 years to get all through. So I'll pick Black Prism. And again, this is a fantasy series. And I think that this, the author really is comparable to Brendan Sanderson. The world building, the depth isn't quite as full as what Brandon does, but I think it's, it's pretty darn good. And the magic system does have a system. It's not just random like Harry Potter. Harry Potter would be my definition of absolutely worst possible magic system, meaning that there is no magic system. Just whatever's needed for the plot is available at the time. And then forgotten about in the next chapter. And then the next thing I will pick, I'll keep my list short today is because we mentioned WSL and I know tons of people have trouble getting it installed and working correctly. So on web install.dev slash WSL, there's a copy and paste little curl script for windows. If you run it and you follow the instructions to reboot your computer, which is something that people commonly miss when they, if you, if you end up on the forums and the GitHub issues, that's one of the most common problems is that people don't realize you have to reboot your computer. I think two times during the process in order for WSL to completely install because for whatever reason it can't install everything and then reboot. It has to reboot and then continue installing and then reboot again. But yeah, so this script will, will install all of the right things without any gooey interactions and then prompt you to reboot your computer and rerun the script to finish it. So if you need that, there it is. And those are my picks for today. 

CHARLES MAX_WOOD: All right, Dan, what are your picks? My first pick is being not in mute. Uh, so I actually have one pick that I prepared in advance and another one that's a direct result of AJ's pick. Because the fact that you said that you liked a particular book because it has a coherent magic system, a fantasy book that has a coherent magic system, reminded me of a series of fantasy books that I read a long time ago, but that I recall that I really enjoyed, and I think you might enjoy as well. I the first one is called Master of the Five Magics. It was written by Lyndon Hardy way back in 1980, but he created a really great magic system that has very coherent and consistent rules. And the books, the plot really flows around that magic system and is driven by it. So I really think you'll enjoy that series of books a lot. They're not really long. They're just these three books and that's it. That's before the day of people writing those infinite series of books that never seem to end. But try it out. I think you'll enjoy it. So that would be my first pick. My second pick is something quite amazing that recently came out. This is a technical pick, and I'm still trying to wrap my mind around it. StackBlitz introduced recently something called web containers. They introduced it on May 20th. And it's basically, it enables you to run node, VS code, NPM, all that good stuff inside your browser. And it launches instantly. It's mind blowing. So you basically you click a link, and you get a new browser tab with VS code running inside of it with the entire development environment, node, NPM, you can build a server running inside your web browser and you can single step through your code. It's insane. Like I said, I'm still trying to wrap my head around this stuff, trying to figure out what it can do, what are its limitations and capabilities. But yeah, it's amazing that browsers can can actually run something like this. 

CHARLES MAX_WOOD: Awesome. 

DAN_SHAPPIR: And those would be my picks. 

AJ_O’NEAL: Have you heard of UTM? It's so basically it's a virtual box for iOS and now it works on the M1 Max. And it allows you to run, for example, Windows XP on your phone. 

STEVE_EDWARDS: Why would you want to do that? 

AJ_O’NEAL: Why wouldn't you? Windows XP was the best operating system ever invented. Cause you hate your phone. 

CHARLES MAX_WOOD: Steve, what are your picks? 

STEVE_EDWARDS: First I was gonna dress something Dan was saying. I have yet to figure out how you wrap around hard object around something like your head, but that's just me. Going for the, you know, the weekly dad jokes here. So my, for Christmas this last year, you know, I had asked my wife what she wanted. She said, you know what? I would like nothing better than a diamond necklace. And so I got her nothing, but changing tacks here real quick. What do you call a vampire on? 

DAN_SHAPPIR: You're lucky that I'm on mute, so you couldn't hear me groan.

STEVE_EDWARDS: That's okay. That's better than nothing. 

CHARLES MAX_WOOD: I was going to say would like nothing better than to hear you groan. 

STEVE_EDWARDS: Yes. And they were muted. Yes. That enhances the environment. You know, two questions about vampires that have been bugging me. Well, actually one, why do you call a vampire? What do you call a vampire that's on sale? Discount Dracula. But then the other question about vampires that's always bugged me is if it's true that vampires cannot see themselves in the mirror, why is their hair always so neatly parted? I mean, how do you see that? 

AJ_O’NEAL: This is a good question. 

STEVE_EDWARDS: Yes, it is AJ, it's a very good question and I have yet to hear a good answer on it. I'll have to see if I can do some research. 

DAN_SHAPPIR: I think they use an app for that. 

STEVE_EDWARDS: They use their, the camera on their selfie camera on their phone. Cause that still works. Maybe that's, there you go. That's my picks for the day. 

CHARLES MAX_WOOD: Awesome. Amy, what are your picks? 

AIMEE_KNIGHT: I'm going to keep on my DevOps picks because, you know, why not? I think JavaScript people like to hear this stuff too. So mine's going to be, I saw this on Hacker News. I'm always looking for things that I can do every day and not just sit down with a large chunk of time. And it's AWS flashcards. So I'll give the link in the show notes. I'm also going to pick... Not a developer pick, but I have become addicted to these Normatech. I don't know if anybody's tried them before. They're like compression therapy for your legs. And I usually go to a place and do it and the treatment is $25. But it's really good if you're like an athlete and run a lot, spin a lot, just lift really heavy. The recovery time to be able to do another workout hard is literally 24 hours. So that'll be it for me. I'll drop a link to those in the show notes too. They're pretty expensive. So you might just want to find a place nearby that has them. 

STEVE_EDWARDS: So would they be equivalent to using something like a foam roller? 

AIMEE_KNIGHT: It's like a foam roller on steroids. A pair of them is like $1,000.

STEVE_EDWARDS: Oh my good. Yeah. I'm looking at them. They look pretty fancy. 

AIMEE_KNIGHT: They're absolutely amazing. Like I sit in those for 20 minutes and I'm ready to go. 

CHARLES MAX_WOOD: So cool. I'm I have to check that out. 

AIMEE_KNIGHT: I recommend them. 

CHARLES MAX_WOOD: So I have a couple of picks. Uh, the first one that I'm going to throw out is, so one of my three year goals is to run an iron man. And I was chatting with some guys that I did not realize were prepping for triathlons. Now I knew one of the guys had actually run an iron man and he had actually roped in these other two guys. They all live in the neighborhood. We all go to church together. And so I'm going to pick just having workout buddies or workout group. And so I signed up for the same swim team that they're on and we're going to be running together and stuff. And it just makes all that stuff just so much easier because you have this accountability group that you can go and participate with. And so I'm going to pick just having a workout buddy.

STEVE_EDWARDS: I can vouch for that Chuck, just because you know, part of the reason we've talked about this in my initial interview, but I do, you know, CrossFit is workout. And part of it is because of the exercise and I like the coaching and all that kind of stuff. But part of it is just the group aspect of it. And there are other people that at my particular gym, who have killer home gym setups, but they just can't get motivated when they're doing it by themselves. And I can speak for myself, you know, when I'm out, if we're having a workout that has some running into it or just about anything, looking over somebody next to you or trying to keep up with somebody. You tend to work a little harder when somebody's there with you pushing you. So yeah, the group aspect of working like that is huge. 

CHARLES MAX_WOOD: Yep, absolutely. The other pick I have, we're getting into summer. And I'm kind of involved to a certain level in the leadership of my congregation. I'm the president of the Sunday School. And so we're planning one of the parties for the summer. And we're doing a morning breakfast. And so I have two picks related to that. One is they asked me to bring one of the activities for people to participate in around while we're eating, you know, things that people can do while we're chatting and playing and stuff like that. And of course, somebody's bringing cornhole and somebody's bringing like lawn darts or something. And of course, I'm the brilliant guy that comes up with, I'm going to bring water balloon launchers and I love water balloon launchers. Oh, those are fun draw chalk targets on the church parking lot. And I'm going to put some poles in the back of my truck so that you don't have to have people hold up the ends. And I'm just going to hook the water balloon launcher onto the ends of the poles. And then you can just pull down the middle and launch and see if you can hit the target. And I'm totally cool if like teenagers or kids want to go stand down on the targets and see if they can get hit with water balloons. So yeah, my first pick is water balloon launchers. And then the other pick I have is my dad did scouts for years and years and years. And when he passed away, we were cleaning out my mom's garage and she had, or he had a griddle and a camp stove that he just, he'd had for years and just anyway, I inherited that and that, um, that's always nice to have for some of these kinds of activities. And since we're doing a breakfast, you know, I kind of volunteered it. The church had stuff from scouting and stuff like that, that we'll probably use, but that's always nice for some of these get togethers. And so I'm going to pick that just a camp stove and a griddle and I'll find something that's like it on Amazon and link it over. So if people want to go buy something like that. But yeah, the water balloon launchers are fun. 

STEVE_EDWARDS: When I was in college, we built, I built, we called it a funnel later, but basically a water balloon slingshot out of surgical tubing and some cloth. And we could launch balloons from like a dorm, clear over the football field and track across the fence you know, on a jogging path. And so you could launch them and laid land by people and they couldn't tell where a heck was coming from. Cause you were so far away. 

CHARLES MAX_WOOD: Yeah. When I was a teenager, we would do it and we, we did it off of the back of somebody's Jeep and we, we lived in this cul-de-sac. And so we would launch it from the end of the cul-de-sac all the way down into the middle of the cul-de-sac. Cause it was like two or three houses in, and then it was a cul-de-sac. So it wasn't just the circle was right on the road. And so it was kind of a safe way to do it. But yeah, we would take turns launching it off the back of the Jeep onto... We'd hook it onto the back of the Jeep and launch it from the road down into the cul-de-sac. And that was fun. We also had a disabled kid in our scout troop. And so they always put us on the lowest down campsite. And what that meant was that we had a clear shot onto the lake with our water balloon launchers. And it took them a few days to figure out that scout camp, that it was our troop that was launching the water balloons onto the lake. Ah, always fun stuff. Craig, do you have some picks for us? 

CRAIG_BUCKLER: Yeah, I've got a couple. So the first one is how to fab icon in 2021 by, I think it's pronounced Andre Sitnik. So this, if you've ever had to create icons for mobile web apps, then Apple tell you, you need 357 different combinations of icons. One, I can identify with that and there are lots and lots. So what Andre's done is condense that down into just six. And you just need to put a couple in meta tags, a couple in your manifest, maybe a couple of those various places, and that will do you. And they all downgrade gracefully. And that's all you need. So that's gonna be really useful and save a lot of people a lot of time. And the other one is, for anyone who's ever had problems with a printer, there's a video by Stevie Martin, which is hilarious. So it's worth a watch. And he goes on for a couple of minutes. 

DAN_SHAPPIR: We have a printer at home that I'm literally now that I don't have any kids in school anymore. We're literally just using as a scanner and we're not printing anything really anymore. 

CRAIG_BUCKLER: No, but they still demanding, don't they? Even with scanning, I had one the other day. It wouldn't, 

DAN_SHAPPIR: and even that people tell me that they're just using their phones. 

CRAIG_BUCKLER: Yeah. But, uh, yeah, printers are up world of pain. But there's some other videos as well she's done, Stevie. I'm not sure she's in the web industry, but she seems to like mocking us. 

CHARLES MAX_WOOD: I was going to say the fab icons is going to come in handy. And when you said anybody who's had a problem with the printer and I was going to say, so humans. 

CRAIG_BUCKLER: Absolutely. 

CHARLES MAX_WOOD: Anyway, thanks for coming, Craig. This has been great. And yeah, I can imagine folks getting a whole bunch of use out of this. We'll link to the blog post as well because there's some stuff that we didn't cover. And yeah, thanks again for coming. 

CRAIG_BUCKLER: Thanks for having me on.

DAN_SHAPPIR: How can we reach you? 

CHARLES MAX_WOOD: Oh, yeah. Yeah. Details. 

CRAIG_BUCKLER: Well, I'm on Twitter as everyone else is Craig Buckler. My name's pretty unique. So it's not many people have it. And if you go to craigbuckler.com, there's a lot of links there as well. But you also find on site point. 

CHARLES MAX_WOOD: Awesome. All right. We'll put those links in the show notes and we will make sure that people can or in the chat, we'll make sure people can find them. And yeah, thanks again. 

CRAIG_BUCKLER: Thank you. 

STEVE_EDWARDS: Adios. 

CHARLES MAX_WOOD: All right. Max out everybody.

 
Bandwidth for this segment is provided by Cashfly, the world's fastest CDN. To deliver your content fast with Cashfly, visit c-a-c-h-e-f-l-y dot com to learn more.