Transcript

[Banjo music]

MANTRA: Just Build Websites!

Dave Rupert: Hey there, Shop-o-maniacs. You're listening to another episode of the ShopTalk Show, a podcast all about Web design and development. I'm Dave Rupert and with me is Chris Coyier.

Chris Coyier: Heck yeah!

Dave: Who is in the studio today?

Chris: Absolutely nobody.

Dave: Aw, perfect. [Laughter]

Chris: Just Dave and I, which is nice. Some people write in to say they like these shows. Everybody - everybody likes all the shows, but sometimes it's nice just to keep it in-house here.

Dave: One hundred percent engagement on every show.

Chris: As you know, the meat and potatoes of ShopTalk Show is listener Q&A. Of course, I'd like to remind all of our listeners that you just head over to ShowTalkShow.com and there's a big old button that says, "Ask a Question," and you can send one in, which is kind of, like I said, the meat and potatoes; the heart of ShopTalk Show. That's kind of what we've always done here. Less of an interview show and more of, let's answer your questions. Keep those coming in. We love to have them.

We have one here from James Hamann who wrote in. It was kind of a long one, and we can't read, always, super long emails on the show, but it was kind of describing the system by which he's using WordPress and using the block editor Gutenberg on WordPress, which I feel like could be an interesting topic for the show anyway. I feel like these block editors are everywhere these days. The Web has kind of decided that block editors are the cool way to do editors these days.

Dave: One stepping stone on the path to Dreamweaver 4.0.

[Laughter]

Chris: Do you think it'll come all the way back full circle?

Dave: It's gonna, dude. It's gonna. Anyway.

Chris: That's hilarious. But anyway, when you have a block with an editor, you can kind of programmatically describe that block, which I think is appealing to JavaScript nerds because they're like, "Oh, cool. I can have an array of objects. Then each one is a block. Then my drag and drop schema will fit with that nicely," yada-yada-yada.

In WordPress, you can also do additional things. There's an API that says, "Tell me all the blocks that are on this page."

James has wired up something that he's not only dropping these blocks on the page through WordPress, but he's styled each block so that each block has its own set of CSS that goes with it.

Dave: Hmm.

Chris: Then he's got some way that he can be like, "Okay, what blocks are on the page?" Got it. Give me the CSS for each one of those blocks, which is a minimal set of CSS. Then I'll drop that in my critical CSS in the header, which is like, "Wow, that's some fancy … there."

Dave: Whoa! This is like CSS in PHP. This is awesome.

[Laughter]

Dave: This is it. This is what you want. I think this is incredibly clever.

Chris: It is.

Dave: Is there a problem? Are there drawbacks?

Chris: No. I just think it's interesting, of all the different ways that people do it. First, it definitely requires some fancy dancing. WordPress isn't going to help you with this. You're kind of on your own here.

Dave: Right. You have to associate blocks to styles, right?

Chris: Right.

Dave: WordPress isn't like, "Here's the exact styles you need.

Chris: No, there probably is a way to code it, though, where it's not too bad. Like if all your code for a block is in one place, I'm sure there's a way to put your styles there too and name space it in such a way that works for you or something. It doesn't help you because Gutenberg is just the content area. It's not going to help you with your header and your sidebar or whatever else too. It doesn't solve the whole critical CSS issue, but it is cool.

Dave: I have an ignorant question. Can I ask?

Chris: Yeah.

Dave: How granular is it? Is a paragraph a P-block? Is an image an image block?

Chris: Totally. Yep.

Dave: Or is it like I have text blocks and then I have other blocks? Does that make sense?

Chris: There are so many blocks. Out of the box, there are dozens, I think. Yeah, a paragraph is a block.

Dave: It's just like Notion. I use Notion a lot.

Chris: Yeah.

Dave: It's like every line.

Chris: Heck yeah.

Dave: Every time I hit return, I'm basically writing a new field in a database.

Chris: Right, but also imagine that it's extensible as heck. WordPress, when people get the power to do extensible things, they do it.

Dave: Yeah. If I could write plugins for Notion, it would be like that. These are apples and oranges, but--

Chris: Right. You know what Notion doesn't have is settings for a block. It kind of does. You could set the background color of a notion block. You right click and you get a context menu. You can pick a color for the text or the background of it.

Dave: Yeah. Yeah.

Chris: That's kind of like a setting. But imagine instead that, when you have that block selected, you have a whole sidebar and its dropdown menus, radio buttons, and all kinds of stuff. A text input that says, "do you want to apply a custom CSS class to this block?"

Dave: Yeah, and custom font to this block.

Chris: Sure.

Dave: Yeah.

Chris: You can configure not only the block itself and, just to complicate matters a little bit, there's an onboarding step that you can do for a block. You can say, "Before the block gets inserted, answer these questions."

[Laughter]

Dave: Grab them there. "Hi. It's me, Clippy. It looks like you're writing a paper."

Chris: Yeah. Well, not for every paragraph, but a custom Google Maps block.

Dave: Okay.

Chris: Give me some coordinates and then I'll drop the block in.

Dave: Yeah.

Chris: I can't do anything unless I have the coordinates.

Dave: Address. Yeah, okay. That's actually….

Chris: Then there are settings on top of that. This whole thing is like, each one of these blocks can be a whole app, practically. [Laughter]

Dave: Yeah. Yeah, yeah. All right. Well, that's cool.

Chris: Anyway, that was a lot of stuff there, but it's cool. Doesn't it get you thinking? Remember that HTTP2 thing? I was blabbing about this the other day where you don't have to do anything special. You just put a link tag right before the block that links to your style sheet.

Dave: Yeah.

Chris: Then you didn't have to mess about with any fancy build step. It's just right there in your HTML.

Dave: I have that on my site. I'm not sure it's the best loading experience. My state is so small, I could server all 5K of CSS in the header if I wanted.

Chris: Yeah, this was just an experiment or something.

Dave: Yeah, I was just experimenting with this kind of layered loading, I guess.

Chris: Oh, I see. Yeah, you've got it going on right here. Right before the footer, there's a link style sheet to footer.css.

Dave: Yeah and, on the post, there's a link to a post CSS and stuff like that. I tried it on that, but I see a little flash.

I think Robin Rendle DM'd me and was very concerned. [Laughter] He said, "Hey, on Mobile Safari, I see bold text flash and then your lightweight font comes in."

He's exactly right. There's a little flash of fonts going on, but that could also be my link rel preload for fonts happening.

Chris: Well, hmm. Shoot. So, that's just fonts, though. Isn't the whole point of this that links in HTML are render blocking, so it shouldn't render anything until it has the CSS?

Dave: Right, so it must be the fonts coming in, like async or something, or it has one font and doesn't have the other. I also have other problems where, in old Edge, not new Edge, which we could talk about, but old Edge will sometimes not load the font. It'll just decide, yeah, I don't need the bold font. I'll do Helvetica or whatever. Anyway - anyway, I like this block, just what you need but, also, sometimes it's, just give them the content and let the styles come in lazy.

Chris: Yeah.

Dave: That's maybe also my favorite.

Chris: We have another one about CSS loading, so maybe we'll get to that, either in this show or the next one. There is a lot to talk about with CSS loading. I feel like there are different ways these days that are all kind of interesting. You have messed around with it, clearly, but I don't think any of these particular interesting ways of loading CSS have really taken hold.

Dave: Yeah. I think we're all still doing either mega style in the header or CSS in JS now, which is little style blocks on each component that have been munged up.

Chris: Yeah, right. That's the whole thing.

Dave: But I think those are two popular paths. I think there are three or four maybe out there still, you know. But even that critical CSS going, I struggle with it because you do get the flash but, man, it does make the page feel very fast, like you get a paint.

Actually, I'm working on some sites: my site or client sites. Actually, my biggest issue with rendering is the CSS. I've solved all the other issues. There are huge JavaScript issues, but it's like, yeah, that's going to take ten years to figure out.

The CSS, Lighthouse gives you a load impact like assessment. On 3G, it takes one second for your CSS to load and it's red because that's a long time for CSS to load. That makes me -- I'm very numbers, videogame oriented. If I see those numbers, I'm like, "Yes, I'm going to win this one and make it green. I have to win."

[Laughter]

Dave: For better or for worse. If you wanted to game me--

Chris: I was on the Zeit docs yesterday, and you get points for much docs you read. I was like, "Oh, gosh. Now I have to read every word of their docs."

Dave: I know! It's terrible because I'm just a gameable system. You just show me a number and then show me what number it should be, and I'm like, "Well," crack my knuckles, "I've got some time here."

What's cool is I can see the impact of my CSS, especially on 3G. You start seeing the speed impact of overserving CSS. Yeah, anyway, because it is a blocking file. It's a big impact. It's a big hit.

Chris: Yep, okay. Well, interesting stuff, James. Definitely consider your technical debt with all of this, which is, I guess, a word that gets thrown out a lot, but I think about it a lot where you're like, "Have you engineered this to the point where it's going to become a pain in the ass?"

Dave: Yeah.

Chris: Or is it a set it and forget it kind of feature?

Dave: Yeah, especially with blocks, the future is, Joe from the office can install whatever plugin, the Dribbble plugin as a Dribbble block. Did you account for the CSS there? If you're managing it, awesome - awesome. But does it work when 3,000 people are using your CMS? I don't know.

Chris: [Loud exhale] I was just fighting some CSS loading this morning in WordPress because I used the wp_enqueue_style in a way that I thought was normally the way to do it. It loaded up the CSS okay, but it decided to put it in the footer. I was like, "That's a weird place to put it." Cool. I guess it's not render blocking, but I definitely see a massive flash of style thing here, which I don't like.

Dave: Mm-hmm.

Chris: I was like, "Why is it doing that?" I put the wp_enqueue_style in the page template itself. I was like, "I wonder if that is executing too late for it to go into the header."

Dave: Oh, wow. Okay.

Chris: You know what I mean?

Dave: Yeah.

Chris: It can't put it in wp_head because wp_head has already ran.

Dave: Yeah, I don't know.

Chris: I tried moving it around. Then, Dave, you were like, "Let's do the show." I was like, "Okay," so I stopped working on it.

Dave: [Laughter] So, you stopped working on it. Three months later--

[Banjo music]

Chris Enns: This episode of ShopTalk Show is brought to you by ImageKit.io. If you're looking to optimize the images on your website or app to improve performance, page load time, and SEO, then ImageKit.io is a complete solution for this. ImageKit offers real time image optimizations and transformations with a global content delivery network making image management and optimization really, really simple.

Using ImageKit will allow you to deliver a great user experience and much better SEO for your project. You can integrate ImageKit with just about any platform: AWS S3, Magento, WordPress, Shopify, and just about anything else. With ImageKit, you get great features like automatic format selection, compression, resizing, smart cropping, and more.

They've got some great custom integrations like using ImageKit with custom domain names, using your own CDN with ImageKit for transformations and optimizations, and dedicated infrastructure setup for enterprise clients. With the ImageKit performance center, you can have automated performance monitoring right on the desktop and mobile devices. You can use coupon code SHOPTALK for $100 in free credits and it starts absolutely free at ImageKit.io.

Our thanks to ImageKit for sponsoring this episode of ShopTalk Show.

[Banjo music]

Chris: Well, there is some browser news. I guess the big one is that there's a build for Edge and Chromium. You're a Windows insider, certainly. Have you ran it?

Dave: I am running Edge dev and Edge Canary on my laptop.

Chris: Nice. You were kind of a fan of Edge before this, so do you like it more now or is it just as fast?

Dave: I was an Edge user. For all intents and purposes, it's Chrome, but it looks better, if that's kind of cool. Also, I saw a little slide somewhere. I can dig up the tweet for the show notes. They removed something like 50 APIs from Chrome, which are kind of like Google specific APIs, Google Now and OK Google, or whatever.

Chris: Sure.

Dave: I don't have any of those services running inside my browser. I think it makes it a little more lightweight. I've seen people showing their task manager, like how many processes and threads.

Chris: Yeah.

Dave: It's like it runs three threads where just opening Chrome is nine or ten threads. The memory footprint and stuff--

Chris: Wow, so it might be the best version of Chrome.

Dave: Well, yeah. It might be the best version of Chrome, which is kind of wild, but I don't want to claim that because it's still in beta.

Chris: No.

Dave: It can always get worse as they turn things on, but I like it. In some ways, I got my preferred dev tools because Edge dev tools weren't that great. They were good, but it was ported from IE9. Then they just were like, "Oh, yeah, we need dev tools." They shimmed it into Edge, I think, or carried it over.

The user experience was a little clunky and it didn't have everything you needed, so I would always end up in Canary.

Chris: Yeah.

Dave: Like Web inspecting, auditing, and getting even just the kilobytes that we're sending down, like in the network panel. That's helpful to me. I always ended up going back and forth there. Anyway--

Chris: Yeah, now you get sweet dev tools. They just came along for the ride, right away, huh?

Dave: Yep, sweet dev tools. They added a custom theme so, actually, that's better for sure. Anyway, yeah, so now I have all these features. I'm feature compatible. I have Houdini now, like all those cool demos. I can see them without opening up another browser. That's cool.

Chris: What's the UA? Is the UA weird?

Dave: What do you mean? Just the feel or the tabs and stuff?

Chris: No, I mean like literally the screen where … browser….

Dave: Yeah. No, it says Edge, but it says EDG right now, "egg," so--

Chris: Oh, my God! Really?!

Dave: Yeah, it's funny.

Chris: Is that on accident?

Dave: I think it was on accident. [Laughter]

Chris: Oh, no!

Dave: I'm sure they'll fix it. They have time to fix it.

Chris: Well, I guess. Yeah.

Dave: I think of a bunch of browser nerds, like Mike Taylor and people who like UAs, user agents, who live in that world. They were all having a laugh because they were like, "Nope, this is cannon. We're doing it." It's called "egg" now or whatever. [Laughter]

Chris: Uh!

[Laughter]

Dave: Anyway, "egg" browser on Chrome. It's good.

Survivor's guilt, is that maybe what I have, Chris? [Laughter] I have a better browser now. Edge was great. I really liked it, but I have maybe a better browser just because it has all the Chrome features now, but the sacrifice is HTML, as a whole, loses another rendering engine and a JavaScript engine. The Web lost an engine, so how does that make me feel? A little sad but, in some ways, my browser--

Chris: We lost a closed source engine. [Laughter]

Dave: We lost a closed source engine, so maybe that's a good thing, right?

Chris: Mm-hmm.

Dave: Yeah.

Chris: I don't know. It's not a good look to argue against browser diversity, and I'm not going to do that because you can't know the impact of that, but it does seem like probably some negative will ultimately come from that, but I don't know. It's a tricky world. We're run by -- it's just complicated.

Dave: …I just saw Mike Taylor, speaking of. He is Web Compat at Mozilla, so he's Web compatibility. He tracks the differences in browsers and stuff. We should have him on again.

He was at BlinkOn. He proposed that Chrome maybe switches to Gecko. He just was throwing that out there.

They gave a talk, and they're trying to come up with a formula to measure the gap between browsers, whether browsers create their own private API or browsers behind. They're trying to measure the gap, like come up with an empirical number that they can all watch and measure the gap.

The data, I guess, from this PowerPoint, I think the talk will go on later this week or something. The data seems to show that the gap between browsers is widening between now Safari, Chrome, and Mozilla. The gap is actually widening.

Chris: Of compat, the compat gap?

Dave: Yeah, the compat gap, so just the number of features and stuff like that. I think the question is, can Mozilla catch up to Chrome's APIs, hundreds of Chrome devs, and tons of Edge devs.

Chris: Isn't this the thing. You can't; a new company can't just roll in. They could, but here's what it would take for a new company to roll in and be like, "We're going to make a browser too, from the ground up, JavaScript engine. Every part of this browser, we're going to reengineer and we're going to do it to spec. Our intention is to beat you and do a better job than you've been doing before."

That is an absolutely incredible engineering effort. Just unreal of what it would take to do that. And, at the end of it, it's got to be free. You can't charge a penny for it because the competition doesn't.

What's going on there? How is the world of business going to ever do that, ever?

Dave: Yeah.

Chris: They're not going to do it. It's not going to happen.

Dave: No, no. Yeah, I mean the economics doesn't work. Somebody could maybe fork KHTML again or something and make WebKit, some alternate WebKit universe.

Chris: Yes. Forks is where it's at, right? The fork land hasn't gone super good. Opera goes, "Hey, we're going to just use Chromium 2," and now they're gone.

Dave: Well, yeah.

Chris: I mean I shouldn't say that because I have a piece of Opera news on -- [Laughter]

Dave: Yeah. I go back and forth, right? I'm trying to -- Dave Rupert, in 2019, is trying to be a little less sided in his hot drama.

Chris: [Laughter] Sure.

Dave: Trying to dial that back and be a little more inclusive.

The one thing I think we have to acknowledge is the mobile Web, right? I think Mozilla's attempt to build a mobile browser that memory constraints, chipset constraints, all that has been unsuccessful, I would say. They have the feature phone, but they don't have a smartphone, if that makes sense.

The future, I think, is mobile. It's going to be lower powered chipsets. Even our Apple laptops are kind of converging on a cheaper chipset. I think Windows is supporting RM chipsets now.

I think the days of this Intel infinite CPU is kind of going away. I think we have to think, if a browser were to start, like snap today and start, I think its focus would have to only on the mobile experience or something, like being fast.

Chris: That'd be kind of rad. Yeah.

Dave: This idea of desktop, I think it changes everything. I'm going off of clients and their stats too.

Chris: It's interesting, the thin client browser hasn't really. I shouldn't say hasn't really. Wasn't that Opera a mini or mobile app at one point was like that?

Dave: Yeah, like the proxy.

Chris: That's what the Silk browser was supposed to be. I think it is still. Yeah, why put the pressure of computing on the device itself when we can obviously put much more powerful computers in the cloud? Let them do the work.

Dave: I don't even know. Maybe there are just features that don't exist. Yeah, it doesn't do geo locating because that murders batteries or something. But that doesn't make sense in a mobile context. I'm just thinking. Browsers have to be mobile to even exist in 2019, if that makes sense. That has to be a feature.

I think it's obvious that maybe Edge, based on some of the announcement stuff that they did, Edge maybe wasn't hitting their mobile goals or whatever. IE was shoehorned on Windows phones, but it doesn't seem like it was a mobile compatible browser, if that makes sense, an AMD chipset compatible browser.

I think Gecko is having the same, although they've re-platformed entirely. It's pretty cool. But I think they have a lot of work to get to that.

I think, in 2019, it has to be mobile. I think that also impacts our front-end frameworks like Angular is a very desktop centric framework. React is kind of a desktop centric framework. Vue is kind of a desktop centric framework.

I'm saying this; I like these things, and I'm using them and recommending them. That's not it. It's just like, I don't think we've embraced the mobile reality of very crappy phones. [Laughter] That's it. That's my diatribe. I will transcribe it and put it on my blog.

Chris: There's a little less incentive to put a lot of engineering effort behind a mobile browser when iPhones don't have it, which I know is not the point because low power -- Apple is never going to make a sub-$100 phone, which who cares, I guess. Maybe it is worth doing from the ground up, Android specific browser.

Dave: Yeah.

Chris: I don't know. That feels like a question I'm not qualified to answer. What's up with Opera, though? Aren't they kind of like, "We need to compete now"? We don't have our own browser engine anymore. Now that we don't, we probably save a bunch of money, so we can use that new month, theoretically, to do interesting things.

I remember, it wasn't so long ago, they were promoting Neon, Opera Neon, and then I remember downloading it. I was like, "This is kind of cool." I'm always fascinated when browsers do something big, bold, and different with themselves and offer us some kind of--

They compete on a feature that isn't standards. They compete on something else. I think that's cool.

I remember kind of liking it. I wasn't convinced to use it all the time because it wasn't very developer-y, but it looked good.

Dave: It was almost like an OS, right? Opera Neon was Web plus social. Your social media accounts were heavily featured and you could even do split screen browsing inside your browser. It was kind of cool. It was like, "Oh, yeah. You want split tabs? Here you go." You can split tabs, and so I thought it was very cool.

Chris: They marketed it right. They said, "This is what Opera could be some day." It wasn't saying, "This is the new version of Operate. Get used to it." Was that years ago at this point?

Dave: Two, three years ago.

Chris: Yeah. Now, Opera introduces Reborn 3, the first desktop browser with Web 3, which I'm definitely not qualified to talk about. It's got a faster VPN, which is actually a really cool feature, I think, and a built in ad blocker, I guess, which is unique for a desktop browser, isn't it, to have an ad blocker built in.

Dave: Yeah, I think Chrome is on the table and Safari kind of has -- sorry. Safari has the ability to add content blockers, but I think Firebox is beta-ing a content blocker by default. Brave would have it too.

Chris: This is in the Zeitgeist right now, for sure, is that browsers are trying to get ad blockers just right in there. It's funny that Chrome is messing with it. They're like, "Well, we're going to block stuff," other than our own stuff, obviously.

Dave: Yeah. It just so happens DoubleClick gets a free pass. [Laughter]

Chris: Duh!

Dave: Whoops. But I think this is cool. I think you look at paving the cow paths. Everyone has an ad block plus installed, almost, or Ghostery or something. These are very critical features for users, so I think it makes sense for browsers to offer these.

Also, I looked into this Web 3 thing because this is the feature they're branding, Web 3.

Chris: Decentralized is the keyword, right?

Dave: Yeah, so I think it was kind of like Web 2 was social, and so user generated content was kind of the big thing about Web 2 and Ajax, which go hand-in-hand.

Chris: These don't mean anything. This is like the world trying to decide what millennials are?

Dave: Yeah, I bet it's some weird corner of the Web that talks about this. They're like, "Yeah, that is it," but we're not in that corner, even though we built the Web.

Chris: If you are in the corner of Web 3, what are you?

Dave: I think it's decentralization, so part of the social movement was, like, oh, Myspace, Facebook, Twitter, and Medium. We all started centralizing our content into ten different sites, basically. This is more about decentralization, so they're introducing decentralized technologies like blockchain. There's a crypto wall inside your browser.

I don't know if that's like, "Oh, my God!" to me because I'm not really on the crypto train, but I guess it's neat. I guess it's neat that, hey, if we're going to be a browser--

Chris: It is kind of neat. Yeah, right, because any kind of payment feature that's in the browser that makes it -- it isn't just there for show. It really does make it easier to check out in some way and buy things.

Dave: Mm-hmm. Yeah.

Chris: That's kind of cool.

Dave: Yeah, and so you're kind of like, "Hey, what if the Web--?" you don't have a bank anymore, you know? That's kind of neat. That's kind of neat. I don't know.

Chris: What's the big question? If you had to answer right now, Dave, ten years from now or whatever, is cryptocurrency bigger than it is now or was it a fad and it's gone now?

Dave: I don't know. Can I say it's a safe haven for criminals?

Chris: Uh--

Dave: So, it'll probably always be around.

[Laughter]

Chris: Yeah. I feel like, if you asked me a year ago, I would have been like, okay, it's a fad. It's not going to replace money. Money is too big and too important. Not USD, like banks as it exists now. The existing infrastructure is too powerful for this new thing to take hold and crypto will eventually go away.

Now, I feel like I've changed my mind a little bit. Not that I'm ready to buy in on it entirely, but I feel like the movement is too big to go away, also, and crypto is too big.

Dave: That's what the people on Reddit want you to believe so that their crypto goes up in value. But that's also, you know, I think there is something to be said. I'm out of my tech punditry element here, but I think there is something to be said of, like, this is money if we all agree to it. We can use it, and there's no banks involved.

Chris: Doesn't there have to be one or two that win, though, like not 50, or would a crypto person tell us, "Oh, no, it's perfectly acceptable that there are 50 different ones or 1,000 different ones." I'm sure there are already well over 1,000 different ones.

Dave: I think those people just arbitrage against each other, and that's what raises the value. It's like, "Oh, Lightcoin is up. I'll just sell this and buy Bitcoin. Now Bitcoin is up, and now I'll sell this and buy Lightcoin," or Ethereum or whatever.

Yeah, the thing that bothers me, and this is probably my old-man-isms, is if all the money disappears from my Crypto Wallet, I want to call somebody and yell at them. You don't get that. [Laughter] But if all my money disappeared from Wells Fargo, I could at least call somebody, yell at them, and be like, "What happened?"

Chris: Yeah, right.

Dave: As far as money goes, that's sort of what I'm -- that would be a concern of mine.

Chris: Don't you need a centralized thing to make it? If your stuff in Coinbase, well, it can't go away because then you just log into Coinbase and it's still sitting there, even if your hard drive failed or whatever. But then it's centralized, and then what's the point, right? I don't know. I don't get it.

Is there any actual technology that is Web 3? When Operate 3 says, "We've got Web 3 built in now," is that meaningless? It doesn't mean anything. It's not anymore built in than Chrome, Edge, or anything else.

Dave: Yeah, I think it's just the features, and the features are coming through. It's this idea. I think they said Crypto Wallet has a VPN built inside, so you can just turn on VPN, which is kind of cool, actually. I like that.

Chris: Mm-hmm.

Dave: Whatever.

Chris: There's some crypto built in, so Web 3.

Dave: Yeah, I have a tinfoil hat. It's sometimes worth it. [Laughter]

Chris: Are you VPN all the time? Are you on a VPN right now?

Dave: No, but it would be nice to have that option, or if you wanted to watch a show on the BBC or something.

Chris: It's too weird of a worry because mine is on right now, but it doesn't do general Web traffic. It just does specific stuff. I downloaded one for Firefox the other day because I wanted to test, like, what does it look like to look at a specific site from a specific country? These VPNs are often like, "Take a look at your site from Canada," or whatever. [Laughter]

Dave: Yeah. Yeah.

Chris: There's just some plugin. I don't even remember what it is. Hax or Han. I don't know. I just installed it and signed up for an account, which totally didn't spam me or do anything phishy at all. It was a nice little plugin with decently good UX. I picked the country I wanted to visit the site from and it worked great. I'm like, "God dang. These VPNs are getting good; easy to use." It's hard to believe it's free, but it is.

Dave: Yep. Yep. No, I mean it seems…. I'm interested in the future of where things are going for browsers. Even if we all have Chrome under the hood, I'm curious where it goes. I know Edge in, I think, their Android browser, Android Edge, which is just Chrome Web views or whatever, Chrome under the hood, they actually offer an AI product in there that's a fake news detector. What do they call it? Basically, it'll give you a green badge up in the top almost like an SSL thing that's like, "Hey, this is a trustable source of news," or something like that. Let me find what it's called so people can Google it.

Chris: Yeah, you can't look in news because it's only about this Chromium thing.

Dave: Yeah, it's only about Chrome.

Chris: I like to say I was Captain Whiney about not getting any news about this while it was happening because there was never a date put ever on this release. It was just, "We're going to do this at some point." Then one day it was like, "Okay, we did it," and it was a lot of months in between those things, to be fair.

There really was no date ever put on it. I don't blame people. It's not like we need dates, but it was annoying to me because it was like, "How soon is soon? Is it years? Is it months? Is it days?" Some of these things are like, you'll get a Jira ticket or whatever. Not that I use Jira, but people do, that says, "Hey, there's an Edge bug. Do you fix it or not?"

Dave: I'm glad to see this out, and it's mature. It's basically Chrome with a few different features….

Chris: So, it's what everybody thought it was going to be.

Dave: Yeah.

Chris: It's no surprises.

Dave: Yeah, it's cool. I mean they have a weekly channel. You don't get Edge updates every six months. [Laughter] I guess you would get it every three weeks or whatever. It's going to update a lot faster, too, as features get ready. It'll be on par with Chrome for the rest of eternity or, well, I guess until they fork or whatever.

Anyway, the feature is called NewsGuard. I just wanted to say that I found it. NewsGuard Edge Mobile, and it's basically a fake news fighter. Anyway, check it out.

Chris: That is great. I like that.

Dave: Yeah, I'll post a link in the show notes here.

[Banjo music]

Chris Enns: This episode is also brought to you by Netlify. We've talked a lot about Netlify build before, the Git workflow for Web development where you can build, deploy, and manage modern Web projects super easily with Netlify. They just launched something new they're calling Netlify Dev, where you can run their entire platform right on your laptop -- or your desktop, I suppose, too. You can preview it all: site generation, functions, and edge logic. Imagine the productivity boost of being able to locally test your site generator, API integrations, serverless functions, and edge rules all in a single development server. That's Netlify Dev, a powerful way to build and test modern Web apps on your local machine.

With one simple command, you can install Netlify Dev to use on any project. That'll spawn a fully local environment of Netlify Dev that automatically detects and runs your site generator, makes environment variables available, performs edge logic and routing rules, and compiles and runs cloud functions. The extra bonus is that you can even stream that live, so Netlify Dev takes hot reloading to a whole new level, allowing you to actually stream your dev server to a live URL, which is great for collaborative development.

You can now share your work as you work and get instant feedback. I could be working on my site. I could have it open in a browser, open on my phone, and see the changes live as they're happening, but you could also have it wherever you are in the world open on your browser or on your phone. Whenever I update something, the site will update and you'd be able to see it.

Netlify Dev automatically detects common tools like Gatsby, Hugo, Jekyll, React Static, 11ty, and more, providing a zero config setup for your local dev server. Netlify has faithfully replicated their powerful edge logic engine and Web assembly so you can locally test all the same rules before deploying them to their global infrastructure. You can write cloud functions in modern JavaScript, adding needed dependencies. Netlify will compile your functions as AWS Lambdas and deploy them as full API endpoints.

Local testing works too. It all comes with Netlify Live, a hosted service that continually runs your dev command, just like you do locally, watching for changes. The result is an instant preview you can share with your entire team with live updates as code and content changes.

Like I said at the beginning, Netlify Dev installs with a Netlify CLI. Create new sites, set up continuous deployment, and push new deploys right from the command line.

Netlify Dev is just the beginning. Take your local developments to Netlify Build: Power collaboration through Netlify's Git-based workflow with deploy previews, branch test, and more. Check out Netlify Dev at Netlify.com. Our thanks to Netlify for sponsoring this episode of ShoptTalk Show.

Chris: There was an article I think I linked to not too long ago. It was from March by Ian Bicking. It was called "The Firefox Experiments I Would Have Liked to Try." It's a wonderful article because it was about Firefox Test Pilot or Firefox Labs or something kind of shutting down or something. They had all these experiments that were kind of like add-ons for Firefox that did special stuff.

The reason I loved this so much is because it's insight into what browsers could do for us but aren't. There's a lot of innovation that browsers could do, again, not really at the standards level, like, "Hey, we do border radius differently and it's better." That's not the kind of fighting browsers should do, and that's well established. We should hold them to that now and forever because that's the worst thing ever for the Web.

It doesn't mean they can't do extra stuff on top of that to make a browser awesome. There are dozens and dozens of these ideas in here that were a part of this Firefox Test Pilot thing that are super clever. I want to try all these.

One of them was called Sticky Reader Mode, which is all these browsers have reader mode. You click it on for a website. Then maybe you leave that website. But if you come back to that website and look at an article, why isn't it just already in reader mode? You've already told the browser that you prefer reader mode on this website. Maybe you like that, maybe you won't, but it's kind of a cool idea.

One of them is navigational breadcrumbs. You click from one website to another website, and then to a third and fourth website. Maybe you should be able to see a breadcrumb trail of that visually somehow because that's kind of interesting.

Dave: Oh, gosh, I would love that. I would love a little tree of all my webbings.

Chris: Sure. It's just an interesting way to do it. I like this one, Find Plus One. You do a find on the page and it looks at that page for the text that you're looking for, but it also does a request for links that it finds that look relevant on that page and does the find on that linked-to page. That's kind of an interesting idea.

Dave: Wow. Yeah. Wow, yeah. Oh, man, I would love that. Have you ever tried to go through your browser history? You're like, "Oh, man, my tabs crashed," or whatever. "I wanted to go find that file or find that thing I had open for five days."

It's so hard. I've done it recently. I would love nesting because sometimes you're like, "I was 20 levels deep on trying to find something," or if I search for something and then went through a query, I'd like to know that. "Oh, yeah, that was that search for that Jira ticket or something. I don't care about the Jira flow. Anyway, yeah. Anyway, I would love that.

Chris: What if you could save something kind of permanently? Not a bookmark, but kind of like how Pinboard does it or whatever, or they'll promise when you bookmark something that they actually archive it for you, so it's like your own personal little Web archive thing. That would be kind of cool.

Dave: Yeah.

Chris: What if your bookmarks played nicer with other browsers? You could open your bookmarks and it would show you your bookmarks in all your other browsers, too, just in case you happen to hop around. Browsers, you shouldn't be penalized for your bookmarks. There are so many things like that.

I feel like we should almost ask more of our browsers. Like, "Hey, I like that you work on cool APIs, but make yourself better." [Laughter]

Dave: Yeah. No, I think that's going to be -- I wonder if that's the next--? Well, I think it is the next future, but I do think we need to figure out what we do about Gecko. I don't mean get rid of it. I mean bring it up to feature parity.

Mozilla is doing some cool things. They have a VR browser you can download on Steam. It's a VR-centric browser to compete, I guess, with Oculus's Caramel browser, which isn't that popular. Yeah.

Chris: You know what I don't particularly like, and maybe this isn't a hip opinion either, though, is that I feel like there was a lot of messaging right when we got the news that Edge was dying. It was like, "We all should really, really switch to Firefox, like switch to Firefox. We need to bring Firefox up in this world. We can't let this happen to Firefox too," which is kind of like sympathy switching or something. They're like, "We should do this just because," not because Firefox is better or because we should, but just because it's good for the Web or something. That's not effective. I don't think that's necessarily going to work.

Dave: Yeah. I think if you care about browser diversity, put it on your number of cares, care-o-meter one to ten. If you care about it and you're a ten, I think you should. I think I care about it, and I switched to Edge just for that reason. I suffered a bit. I missed out on some cool CSS-Tricks, I'm sure.

[Laughter]

Dave: Lots of CodePens. Based on that experience, I'm not like, "Yeah, I want to just switch to another browser," but Firefox is good now.

Chris: Yeah, you're not….

Dave: I don't even think it's a penalty to switch. You know what I mean?

Chris: Yeah, I don't necessarily think that it's a penalty to switch, either, but if you think it is. It just feels weird to be like, "I'm willing to just hurt my life in this really arbitrary way just because I think that maybe browser diversity is good."

Chris: You're not a maybe if you're a ten, is what you're saying. If you're a ten and you're--

Dave: Yeah. Yeah, if you're a ten, do it. I think you should. I think there are a lot of reasons. I think there's also, like, if we all just use Chrome and we all just think of Chrome, I think that creates that browser monopoly. It just reinforces the monopoly. Then people are mad something doesn't work in Firefox or Edge rather than understanding.

Vitriol gets cast on these hardworking developers because of whatever; it doesn't support some weird API that only Chrome supports. I think that's bad. That is bad marketing for other browsers, but it's not their fault because it was like, "Yeah, we just didn't event off-screen canvas," [Laughter], "so it's not our fault. They didn't tell us about it. They just put it out there and now have to do it."

That's all. I think there are a lot of reasons people should switch and try different platforms, got Linux, go Windows, go everything because I think, if we just have a monoculture, we suffer.

Chris: It would be interesting to read somebody's fictional browser-based sci-fi novel about what it's like in the future where there's only one browser.

Dave: All right.

Chris: Is it really dystopia? What's the worst thing that could happen in this? Again, I'm not trying to say that nothing bad can happen.

Dave: Okay. Imagine one company. The one company tracks every movement you make on the Internet.

Chris: [Laughter]

Dave: Just imagine that.

Chris: Yeah.

Dave: Then they monetize you based on that. Just imagine that.

Chris: Yeah. Nobody else has any permission to do this. They've locked out anybody else's ability to innovate on this.

Dave: Yep. Yep, they basically innovated so much that no other browsers can catch up. Therefore, this one surveillance capitalism company now controls the Web and all of its features and all of its amps. Sorry, I meant all the pages. They control HTML, you know. What is that future? We just do what this one browser says. That's not a good future for the Web.

If you're a developer who likes to make JavaScript sites, man, they might turn JavaScript off on you. Who knows? It's a power consolidation. That's why Microsoft in the early 2000s sucked. They were like, "Yeah, we're the top dog. We'll have 90% of the market within the next quarter, so you get what you get; don't throw a fit. Everything is built on ActiveX now, which is a thing we invented," you know.

Chris: Yeah. It doesn't feel theoretical. It feels like, if this happens it just will be worse.

Dave: Yeah, absolutely, I think so. Again, I have a giant tinfoil hat over here. It's just the biggest. It's a samurai helmet made of tinfoil. [Laughter] I think there are browsers that do this currently and I think they have all the best intentions. There are nice people that work for that browser and they do make the Web better, but I think too much power corrupts. That sounds like something a Greek philosopher says. [Laughter]

Chris: Once that point comes along where the power is tipped so strongly that way, which is closer if not there, if a feature comes along that people don't like, which is somewhat rare -- usually, when new features come along, you're like, "Oh, cool. You shipped Intersection Observer version 2.0. That's good. Only good things will come from that." Then I don't know -- who knows.

Dave: Encrypted media extensions.

Chris: Yeah, then you're like, "We don't like that." They're like, "Absolutely too bad."

Dave: Yeah. Yeah, we encrypt. You can't even download an image now because we use encrypted media extensions on images, so you can't even make memes because we care about copyright and we want Netflix. We want Netflix users on our browser.

Chris: [Laughter]

Dave: You know?

Chris: Yeah.

Dave: It's already happened, if it hasn't. You know, that's my thing is we're already tiptoeing in that future. I think if it matters to you, again, use Firefox, but don't just--

Here would be my other advice. Don't just talk about Chrome. Don't just be like, "Oh, yeah, Chrome is the devil man trying to take your data." I don't think it helps to set them up as a strawman or a boogieman. I think we need less boogiemen in the industry.

I think the way you win is you talk about the cool stuff in Firefox. You, for lack of a better word, evangelize that stuff and you just say, "This is cool," or say, "Oh, I can't see it. I'm on Firefox." It's such a bummer, but that's also a good way to nudge people into, "Hey, make it work in Firefox," sort of thing.

Chris: It feels weird to just answer some simple little question about border erase or something.

Dave: Let's wrap it up.

Chris: Let's wrap this one up and we'll see you next week. Next week will be Dave and I as well, and then we have some guests lined up and some more ideas.

Dave: All right. Thank you, deer listener, for downloading this in your podcatcher of choice. Be sure to star, heart, favorite it up. That's how people find out about the show. Follow us on Twitter, @ShopTalkShow, for tons of tweets a month.

Chris: Hey, ShopTalk Show listeners, do you want to work on NASA projects? Do you want to be a front-end developer for space exploration projects? That sounds like the coolest job ever. The MRI developer team is a close nit group of passionate developers looking to track down problem spaces at NASA, then design and implement solutions to meet the requirements that space demands. Oh, that's so awesome.

They need a front-end developer here, so we're talking about a Vue job, work with Apollo GraphQL, which I think is highly appropriate and funny, TypeScript, HTML, CSS, SaaS. You work in Git and just have a passion for learning new things. They say, "We love all development and leave the dogmatic approaches for other teams to argue them out while we implement solutions to drive human space travel exploration forward. We strive to use the best tool for the job regardless of the technology," surely like NASA itself. If you have some experience with Docker and continuous integration and the Cyprus testing framework and stuff like that, that's great too, and the ability to work effectively remotely.

How great is that? Don't you want to work on space exploration projects with your front-end developer skills? That job is in Houston, Texas, at MRI Technologies. Check them out. We'll have a link to the job with how you apply to it and all that stuff in the show notes for this show.

Dave: Chris, do you have anything else you'd like to say?

Chris: ShopTalkShow.com.