484: Cloudflare, Lying to the Browser, Cloudinary Issues, Vue 2 to Vue 3, and Font Icons
We're talking about Cloudflare product updates, whether you should lie to the browser about image size, Chris is having Cloudinary issues, Dave's answering questions about upgrading from Vue 2 to Vue 3, a question about Font Awesome icons, and what's the deal with Webhint?
Guests
Chris Coyier and Dave Rupert
Time Jump Links
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 front-end Web design and development. I'm Dave Rupert and with me is Chris Coyier. Hey, Chris.
Chris Coyier: Hey, dude! Another day.
Dave: Hey!
Chris: More technology news.
Dave: We've got a lot of technology news coming down the pipe.
Chris: Yeah. The one I'm thinking about is Cloudflare had their speed week thing. I don't know. I didn't follow it as closely as I should have, even though I'm mostly a fan of all the stuff they do. It just seems like they push the envelope of things.
Dave: Yeah.
Chris: I'm just a big workers fan because they're like Lambdas, but they're also like service workers and they also have storage. They run at the edge, and they're super-fast. They manipulate HTML. They're just really cool.
Dave: Mm-hmm. Mm-hmm.
Chris: But anyway, that's just one of the cloud offerings they have. Just a couple of days ago, as we're recording this, they announced this thing, Cloudflare R2. Did you see it? Did it cross your desk?
Dave: You know I followed it, but I'm not a big Cloudflare user, so I don't--
Chris: Yeah, it didn't.
Dave: I don't feel the repercussions.
Chris: Yeah, so much. Anyway, it's S3. [Laughter]
Dave: Oh, well -- less acronyms.
Chris: It's Cloudflare's S3. It's just a place to put some files, right?
Dave: Great. Okay.
Chris: Object storage, as they call it. Although, why are they called objects? Objects are in JavaScript, to me, so it always feels weird. It's like, "No, it's not an object. It's a file."
Dave: You know what gets me, too?
Chris: Yeah.
Dave: People say storage and they lump databases in with the storage. I'm like, "Okay. Maybe technically, but it's such a different thing. It's not just like a spreadsheet hanging up there. There's database software that runs a client." I don't know. But then--
Chris: Yeah. Databases are more than just a file dump.
Dave: Technically, it's a storage mechanism.
Chris: Yeah, it's hard to talk about this stuff. But anyway, clearly it's a play on S3 calling it R2, and the joke was that somebody is going to make a Q1 or something just to make sure it's all good.
It's not the only company that has an S3 competitor. S3 is widely successful for AWS. People really get what S3 is.
Dave: Mm-hmm.
Chris: You put files in it and then you get them out later. Yeah! But it's cheap in stuff.
Dave: Mm-hmm.
Chris: But is it really cheap?
Dave: It could be cheaper. [Laughter]
Chris: [Laughter] Yeah.
Dave: In my experience.
Chris: It could be cheaper. Yeah.
Dave: Yeah.
Chris: Especially for bandwidth reasons and things like that. Cloudflare rolls in and says, "You know what we're going to charge you for bandwidth? Nothing. Just zero."
Dave: Really? Whoa!
Chris: I think maybe you pay for it on the way in the first time and then nothing.
Dave: Bandwidth tax. Okay. All right. Sure.
Chris: Something like that.
Dave: Yeah.
Chris: I wish I had all the details right, but what I wanted to get at was there was a great Twitter thread from Cory Quinn, @QuinnyPig on Twitter. He says, "Time to put my economics pants on and do a little math around Cloudflare's R2 pricing model."
The idea is, let's say you had a gigabyte of data. To store it in S3 is $0.023 per month. Okay. Fine. Storage at rest, not too bad. For a gigabyte, that's all right. That's a lot of data. You know?
Dave: Mm-hmm.
Chris: But let's say I send you the link to that S3 file and you download it one time. $0.09. Whoa! Right?
Dave: Okay.
Chris: A lot of people doing that, you put a file and a bunch of people -- it's starting to add up cost-wise.
Dave: Yeah.
Chris: Let's say you're going to use R2 instead, right? What you might do is not totally trust R2 because it came out (checks watch) two days ago. Right? Maybe not going to be my canonical storage.
Dave: No. We move the whole company over. We're moving it.
Chris: Yeah. [Laughter]
Dave: We're all in. We did it. We're going 100%. Yes.
Chris: If you're a cloud nerd, though, that makes a lot of sense that you'd be like, "I'm going to take all the advantage of this, but maybe not just make it my canonical, like today."
Dave: Mm-hmm.
Chris: You'd throw it in S3, costing you $0.023. But you'd really front it by R2, so you'd move it from S3 to R2, which means you pay the $0.09 to send out the gigabyte. Then R2 is saying it's going to cost you $0.015 over here to keep it. That's our long-term data. That's our data storage ability.
Dave: That's the ability storage price.
Chris: But that, from then on, you're done. Guess how much it costs you from then on. Nothing.
Dave: So, how much? What's the price break? What's the S3 versus--? What's the final total?
Chris: I don't know. It's like infinite, essentially. It keeps going here. Okay, so if you tie it together, you pay $0.023 per gigabyte to keep it on S3, and then the $0.09 on-time over there. Let me find the final breakdown here.
Let's remember that the Internet is one too many. If one million people download this one-gigabyte file this month -- a little extreme, but we're doing economics here -- if you put it on R2, that's going to cost you $0.13 in total.
Dave: Wow. Okay.
Chris: If you left it on S3, it's going to cost you $59,247.52.
Dave: Uh....
Chris: Right? It's $0.13 and $60,000 are just different numbers to the world, you know. [Laughter]
Dave: I don't know why you'd choose one or the other.
Chris: [Laughter]
Dave: I'm not good. I hire an accountant.
Chris: To have Cloudflare roll in and be like, "This is not only cheaper data at rest, but bandwidth is free," is wild.
Dave: Mm-hmm.
Chris: That's just big tech news, I think.
Dave: Yeah, well, and I wonder how they do it other than they've just figured out how to reduce cost to basically nothing. They also want to get business right now.
Chris: Well, right. I think Cory was a little salty in the thread. Here's a tweet. "AWS charges $19.98 prices for bandwidth." I think bandwidth prices have generally just gone way down.
Dave: Mm-hmm.
Chris: Cloudflare not only benefited from that, but that they have all their own hardware and all that crap, so that is close to free for them.
Dave: Mm-hmm.
Chris: Not free, but you know. They've figured out a way to get this to work. AWS is over here just like, "Um, we're the industry leader, so we just charge what we charge." It's not real shade on AWS. I'm basically a big fan. They do great -- they have excellent Internet services that they offer. But it's cool when we see competition roll in and really shake things up.
Dave: I like this.
Chris: They can't really battle. Elsewhere on this thread they're saying, "Well, what's AWS going to do if you use both?" I think that's good cloud architecture, actually, as he suggests, to use both. Right? That way if R2 goes down, you just flip it off and you're back to where you were. You're fine.
Dave: Mm-hmm.
Chris: Does AWS detect that you're doing this move and charge a premium or some crap to send it to Cloudflare?
Dave: Right.
Chris: No. No.
Dave: Yeah.
Chris: That's just not cool. You know?
Dave: Right.
Chris: They just have to take one on the chin here.
Dave: Well, and it's probably hard to move. Amazon is not hurting. It's probably hard to move stuff. [Laughter]
Chris: Yeah, some tiny fraction of customers are actually going to do this, right?
Dave: Right. He's talking like one gigabyte. I'd move a gigabyte in my sleep, but you know.
Chris: Yeah.
Dave: If you're in the terabyte, petabyte territory, you're probably just going to keep paying Amazon prices.
Chris: Unless your bill is crazy high. Surely, there are some customers that are doing this right now. You know?
Dave: Right.
Chris: They're like, "Oh, my God. We could hire eight more people if we just did this one move," and it was so high value for them.
Dave: No, I mean that's true.
Chris: I dream of getting there at CodePen. I want to be one of those customers. [Laughter]
Dave: Well, this is hopefully not sharing too much, but I talked to some investors about applications and stuff. One thing they're basically into is, you need to figure out your cost. What's your cost to get a new user or monthly costs? Then they do some algebra from there to figure out, oh, if you've got 1,000 more users, you'd be worth this valuation. You know. Et cetera. Et cetera.
Chris: Yeah.
Dave: They abstract from the cost it takes you to run something.
Chris: For sure. That's how they think.
Dave: Yeah, and they're just in numbers, so they're just thinking if it costs you a million dollars per customer to do CodePen.
Chris: Yeah. That's a bad -- you did a bad--
Dave: They're probably like, "That's a bad investment." But if now suddenly it goes from $53,000 for CodePen -- because you all have a two-megabyte asset limit, right? Maybe this would change--
Chris: Yeah... Oh! Dave. Yeah.
Dave: This would change the two-megabyte asset limit, I'm sure.
Chris: Why would we have a limit at all? Really.
Dave: Right. Exactly. If it costs pennies.
Chris: That was the big thing is because we knew bandwidth is a little pricy. The only reason there's a cap at all is because -- and the cap for us is tricky, right? You want to give people useful numbers, right? But at the moment, we've kind of got to stop short of being a useful media host.
Dave: Mm-hmm.
Chris: I don't really want to be your free podcast host. You know?
Dave: Yeah. Yeah. Yeah.
Chris: I think we're at ten megabytes for pro plan. It's two megabytes within a project or within a Pen and ten megabytes if it's just a global asset. Ten megabytes is pretty okay for images and other assets, you know, your 3D models and stuff. But it's a little too small to be your podcast host. I was kind of trying to avoid that.
Dave: I think that's good. Yeah.
Chris: Now we don't have to. Who cares.
Dave: Cloudflare.
Chris: If we switch. You know?
Dave: Yeah, yeah. No, I mean this has huge cost per user repercussions. I mean even--
Chris: Then that investor looks at Cloudflare, though, and they say, "What's your average customer worth?" Then they bust out their spreadsheets. Then the investors are like, "Oh, yeah. That's fine, actually. Yeah, keep doing that." You know? [Laughter]
Dave: Yeah.
Chris: Because we're about to sign a new contract over there that has a bunch of zeros on it that freaks me out a little bit.
Dave: Well, and that's because the monthly pricing isn't good, but the annual pricing is a lot better, or the contract pricing is a lot better.
Chris: Yeah, and we use a whole suite of crap over there.
Dave: Mm-hmm.
Chris: It's not just the workers we use, but it's just their DNS product anyway, which speeds stuff up, and their offline stuff, and we use their auth stuff for certain things.
Dave: Mm-hmm.
Chris: We're going to be using different -- you know, there's some resizing stuff we use. Then there's a bots management enterprise thing we use that does secret AI protection magic that I don't even know how it works.
Dave: I encounter that from time-to-time, I think, just because it's like, "Hey--"
Chris: Yeah, I wish you didn't.
Dave: Well, I think it could be mobile Safari, maybe, because it has that ITP, and I think it gets in the way.
Chris: That's exactly where I see it once in a while. You click a thing over from a tweet and it hits you, and you're like, "Hmm. That's not ideal."
Dave: Right.
Chris: But I'll tell you. The fact that you see that once in a while also means -- you know a couple of years ago we dealt with DDoS stuff. Guess if we've had any trouble with that. No. But it's not because it's totally gone away. You can see the machine fight back.
Dave: Mm-hmm.
Chris: Like still deal with it, but it's just handled now.
Dave: Yeah.
Chris: Pfft. The value there is hard to explain, Dave. It's very high.
Dave: Oh, what do you mean, Chris? Like your website falling over?
Chris: You get to have a company--
Dave: Yeah?
Chris: Yeah.
Dave: Having a dead website is less valuable than having an alive website. [Laughter]
Chris: It turns out -- it turns out, that's the case.
Dave: To investors, when you show that paper sheet.
Chris: Yeah.
Dave: The term sheet to the investor.
Chris: You go down a little bit for a little while, and everybody rubs your shoulders. Isn't there some hashtag everybody sends on Twitter, like DevOps, an ops hug?
Dave: An ops hug, yeah.
Chris: An ops hug, yeah.
Dave: DevOps hugs. Yeah.
Chris: Yeah. But I'll tell you who has patience for that. They have patience for it when they hear you're down. But if they need to use your thing while it's down, I don't think you're getting an ops hug. You know what I mean?
Dave: No, you don't get an ops hug.
Chris: No, you get an F-you.
Dave: People are DM'ing me, "Hey, you know Chris. Go tell him CodePen is down."
[Laughter]
Dave: I'll do my best.
Chris: Yeah, nobody likes that. I don't like it. Companies I really like, I turn into a huge dick when they're down.
Dave: Yeah.
Chris: Slack had a little burp today, and I'm like, "What is this?!"
Dave: What?!
Chris: "Don't we pay you money?" [Laughter]
Dave: [Laughter] Just for a burp. I like that you call it a burp.
Chris: Yeah.
Dave: It had a burp, and then it--
Chris: All right. Scott Fennel writes in. Let's do some Q&A, meat and potatoes stuff. He says, "I'd like smaller devices to stop worrying about pixel density and load the smaller image file. A convenient way of doing this is to lie to the browser in the image sizes attribute. For example, tell the browser that on smaller devices the image is only going to be 50 viewport units wide when in reality the image is actually 100 viewports wide. This seems to be working. The browser chooses a source set file appropriate for 50 viewport units, so I end up with a smaller file size. I like it. What do you think of this approach? I suspect lying to the browser in this way will have unintended consequences."
Dave: Um... I don't like lying, in general. [Laughter] I think the whole point of sizes is to sort of express what it's going to be. Then the browser negotiates what the best image it can get is. You know?
Chris: In brass-tacks, there's a 320-pixel-wide screen, but it's really 2x, so it's really 640. He's saying, "I don't care. I want the 320. If I'm providing a 320, I actually want it to just use that," meaning that it's going to look a little blurry on a 2x screen. That's why the browser is picking the bigger one.
Dave: Mm-hmm.
Chris: It's because its pixel density is high enough that it needs it to look good. But I take your point. If you really want to force it, yeah.
To Dave's point, I don't like lying. It sounds like you want -- the whole point of source set and sizes is to give up control and let the browser do it. You're saying, "I want control."
Dave: Mm-hmm.
Chris: If you want control, then use picture. Picture is all about control.
Dave: Yeah.
Chris: If you want this to happen, you can write picture with sources with the information in it that says -- it has a waterfall effect. The first source to match is the one that's going to be used. So, if there's one at the top that matches what you consider a smaller device, and then you put a source in there, it's going to pick that source. That's the way to do it without lying.
Dave: You can also do device pixel ratio in your picture media query, so you're like, "If viewport is 1000 and device pixel ratio 4, send them the 2x desktop image," or whatever. You could treat it that way. That way you're saying this.
Yeah, sizes and source set were kind of the shorthand to kind of make a robotic determination. The only reason -- you're probably fine. Whatever. [Laughter] You use an I-tag instead of a span. I'm not going to fight you here. Somebody might, but whatever.
But I think the idea here is browsers could use sizes source set and notice an actual bandwidth constraint and then serve the smaller file. Does that make sense? Maybe not with sizes because it's all about the size in the viewport.
Chris: Yeah. Isn't it satisfying to let somebody else make the decision for you?
Dave: Mm-hmm.
Chris: What you're saying, Scott, is you want the control. You want to pick that thing where it's like - I don't know - maybe for you, it is loading the 2x version because you happen to be testing it from your couch with your fancy broadband Internet connection. But lower-powered phones are capable of making different choices than your phone is making. On other phones, it could be like, "Ooh, I'm sensing a low bandwidth situation here. I'm going to choose the lower source image." That's a thing that can happen.
Dave: And I don't know that any browsers have implemented that, but I think the theory was they could.
Chris: Yeah. Is that really none? Hmm.
Dave: We should bother some Chrome people about it because they were kind of the ones like, "We need this - maybe. Maybe." You know?
Chris: Yeah. I remember at one point that was definitely true that it was a suggestion kind of thing. But I guess (all these years later) if that's still the case that nobody has ever supported it, well, that does kind of change the math then a little bit. [Laughter]
Dave: Yeah. Well, the math is changing. If you think about phones available on the market today, there's no such thing as a 1x phone. If you have a 320-wide image, no one is ever going to see it unless they're on an old desktop or something like that. So, I don't know. It's kind of like--
Chris: I just had a little meeting about that the other day. It was exactly that. Should we shoot a 320?
Dave: Mm-hmm.
Chris: People come at that thing from different perspectives. Mine was that. Nobody is going to request that thing. All phones these days -- I shouldn't say all, right? I don't know the exact situation, but if your phone is so old that it's going to be 1x at that screen size, it probably also doesn't support the picture syntax. You know?
Dave: Yeah. Yeah, right or it has a thousand other problems that a 540 image is not going to be its main problem. You know? [Laughter]
Chris: Right. Yeah.
Dave: In my professional opinion.
Chris: Right. Then how far do you go? How many do you shoot and stuff? The perspective of one developer I was working with was like, they don't care about the 320 because it's so easy to make and so small a file size that to them it's like, "Why not just shoot it?"
Dave: Okay. Yeah.
Chris: The problem is not that. It's--
Dave: It would. Okay, now I want to know. I think I bothered you for metrics on the last show, but now I want to know, if you had five sources, which ones actually get hits?
Chris: Yeah, don't you?!
Dave: Like, wouldn't that--?
Chris: I think it's a double matrix because generally what you're trying to do is shoot in different sizes and shoot in different formats.
Dave: Mm-hmm. Yeah.
Chris: Ideally, you serve from a CDN-like situation, which does the format math for you - but not always. Sometimes that costs money.
Dave: Mm-hmm.
Chris: That's a situation we're in at the moment. It was like, actually, you know what? We're not going to have you do the thing because it's ticking up a counter that counts as basically a resize on our bill. We're like, "Eh, we'll shoot them then. We'll provide our own formats."
We thought, "Which ones are we going to do?" To me, I was like, "Well, AVIF for sure because we have a crapload of desktop Chrome users."
Dave: Mm-hmm.
Chris: But, Dave, they take a hot second to make.
Dave: Yeah.
Chris: If you shoot a PNG or JPEG and then say, "I'd like an AVIF from it," depending on what it is, it could take eight seconds. That's too long, dude. That's a long time to make an image.
Dave: Yeah.
Chris: I think that was kind of like average, not even -- it was high end, but not impossible. So, I kind of scratched it just for that reason. I'm like, that's a different kind of bill. It's not actually saving us that much money.
WebP is actually pretty fast and make them pretty good, so I think we scratched AVIF from the list just because of how slow they are to make. Put WP on the list and then had to make a determination of either JPEG or PNG.
Dave: Mm-hmm.
Chris: We could make them both and try to compare sizes and stuff, but yet that's even more technical debt complication. Meh.
I think it's going to be down to just WebP and JPEG only, and then in five sizes. What you're asking is how's the hits. Where do you hit on the dartboard the heaviest?
Dave: Yeah. Give me -- if I had a table, and down the left column is the different sizes, and across the top are the formats (AVIF, WebP, PNG, JPEG, or whatever), which of those on that little dartboard get hits? Count them up.
Chris: Yeah.
Dave: Oh, God! I'd love to see that. You know what I mean?
Chris: Mm-hmm.
Dave: I'm sure it's football-shaped, like right in the middle is what gets the most.
Chris: Yeah, there's probably a lot of stuff that influences it towards one direction, like the layout of your page is a big deal that makes it mostly request one particular thing. I almost guarantee for us it's going to be WebP 960 - or something.
Dave: Yeah.
Chris: But it'd be cool to see the data.
Dave: It would be cool to see the data. Oh, my gosh. I've got to know now. Oh, this is going to consume my whole life. I'm going to call. Actually, I'm going to outsource it. I'm going to nerd snipe Scott Jehl. That's a webpage test problem now. Sorry, boys. [Laughter]
Chris: Yeah. I'd snipe Eric Portis on it. You know? Cloudinary, make them.
Dave: Ooh, Cloudinary. They could do it for me.
Chris: They can figure it out.
Dave: That'd be sweet, Cloudinary.
Chris: Cloudflare's analytics in Cloudinary. I've never even looked.
Dave: Yeah, maybe it actually tells me this.
Chris: Like which of my images get hit. I'm going to do this. I'm going to nerd snipe them right on this podcast. If there's anybody from Cloudinary watching, I have the weirdest problem on Cloudinary that's been going on for a couple of years now that I just have punted on. I've stopped using it not for any reason because I don't like Cloudinary. In fact, I love Cloudinary. But for various reasons, for production stuff, I haven't used it as heavily lately.
But here's one of the things I'll use it for. I use a third-party ad service, right? I hit a JSON endpoint. It gives me back an ad. The ad has a JPEG or something that I'm supposed to use. Fine, but I don't necessarily trust it that it's going to be optimized and that it's going to be in the right format. It's a JPEG. I'm like, "Why don't I serve it as a WebP? Wouldn't that be nice?"
All I have to do is throw Cloudinary in front of it, that URL that I get back, and it'll optimize it and it'll serve it in the right format and all that stuff, right?
Dave: Mm-hmm.
Chris: Hey! Clever!
Dave: Mm-hmm. Mm-hmm.
Chris: So, all these URLs I slap on CSS-Tricks for some of the ads have Cloudinary in front of them, and that's fine. Then if I go to my dashboard on Cloudinary, I can see those ads because they get automatically added to your media library.
Dave: Mm-hmm.
Chris: In Cloudinary. Then--this is the weird part--what happens is that archive.org (like the way back machine) hits CSS-Tricks a lot, and it appends extra crap to the URLs. When it requests it, it has a little HTML transformer or something.
Dave: Okay. Okay.
Chris: Then Cloudflare sees it as a different image, and it uploads it again. So, every single day, added to my Cloudinary media library is just hundreds of the same graphic. Just exactly the same one.
Dave: Cloudinary, exact machine graphics.
Chris: Yeah.
Dave: Yikes.
Chris: I told -- Cloudinary knows, I think, at this point. I just don't think they care that much. And it doesn't affect my life that much, but what it does is it makes my media library on Cloudinary just totally useless.
Dave: Yeah.
Chris: It makes me wonder about data at rest, too, a little bit. Huh, there's a lot of data just sitting on servers that are just going to fricken' sit there just forever doing nothing useful.
Dave: There is, and there's a carbon cost to that. Yeah.
Chris: For the Cloudflare R2, didn't it make you think about that? Like, okay, so you're already keeping your crap on S3, and then you're like, "Well, and I'm going to replicate it over on Cloudflare R2." The only thing we think about is how many dollar bucks we save, which is a legitimate thing to worry about but also it means -- [laughter]. I don't know. Isn't there a carbon cost to all this? How many different places can we keep all our data forever?
Dave: Yeah, you're not just storing data. You're storing it on 500 servers next to--
Chris: Yeah, for the rest of time, as I sign some document that said that's what's going to happen.
Dave: Yeah. Next to an Internet provider, and so -- but you know. Is the carbon cost of having it next to the Internet provider--?
Chris: Yeah, and I've seen some evidence that it has. That it doesn't have to go under -- like electricity doesn't have to go under the Atlantic Ocean.
Dave: To send my cat GIF to somebody. Yeah.
Chris: But the fact that it's propagated to 82 data centers around the world, was there a cost there, too? I think it's just--
Dave: It did it once. It did that once.
Chris: Yeah.
Dave: In theory, and then your site gets millions of hits. I mean probably a day, right?
Chris: Yeah, so probably it's okay.
Dave: Yeah.
Chris: But can you prove it? Anyway--
Dave: Yeah. What about Dave's blog that gets a thousand hits?
[Banjo music starts]
Chris: This episode of the ShopTalk Show is brought to you in part by WooCommerce. You know WooCommerce, made by Automattic. It's a plugin for your WordPress site. It powers all WordPress-based e-commerce.
If you sell something on WordPress.com and integrate all their e-commerce features on there, that's WooCommerce powering it all. If you've ever bought something on CSS-Tricks, that's WooCommerce powering that. A really nicely done e-commerce software that does all kinds of things.
I sell physical products. You can sell appointments for things. You could sell tickets for things. You could sell candles. You can certainly sell physical products.
Depending on what you want to do, it can be very different from one store to the next on the Internet, and that's where WooCommerce shines because there's this big plugin. WooCommerce is a plugin, but there are plugins for WooCommerce that do all kinds of stuff. If you need special tax stuff or special shipping stuff, special calendaring, special checkout methods, whatever, there are additional plugins that you install for it. That makes it shine for me, and just because it's such a big ecosystem. You're going to find what you need no problem.
I've had Google Analytics installed on CSS-Tricks since the day I launched that site. It's cool because it just has loads of data, over a decade of data. I can see how things happened.
But I always go into Google Analytics and poke around and see stuff in there. There'd always be an e-commerce area that I'd be like, "Ah, that's over my head. I don't know how to set that up. Yuck."
I could learn all about it. It's not like I couldn't do it. It always just felt like - I don't know - is it actually worth it to figure out all this stuff? I never did it.
It turns out there's, for example, a plugin: WooCommerce for Google Analytics. I just installed it and turned it on. It just configures everything for my Google Analytics, for my existing Google Analytics account, that just fills out all that data.
Now I can go into Google Analytics and see every detail of what Google Analytics thinks is important for what products are selling and what they're worth and what the funnel is like and where I lose people and people's analytics behavior for e-commerce. It all just works, and I did none of the work. You know? I think that's the advantage of taking advantage of a powerful ecosystem of tools.
Thanks for the support, WooCommerce.
[Banjo music stops]
Chris: What do we got next?
Dave: Here we go. This one is for me. Frustrated user writes in, "I'm starting a new job using Vue. I like it quite a bit. I love that it's not owned by Facebook or Google. I like the way they blessed solutions for styling and state management. I like the Vue SFC (single file component) and I like a lot of the actual stuff. But they're on Vue 2, and the official documentation on Vue basically says if you're a large enterprise app, don't bother upgrading. My problem is with this Vue 2 to Vue 3 migration. It seems like Angular 1 to 2. If I'm moving from Vue 2 to Vue 3, I might as well consider moving to Svelte because, just like when there was a massive transition to React. It seems like such a big mistake to make such a big breaking change. It's been out for almost a year and we're seeing many community packages still not able to use Vue 3, Vuetify, Nuxt, Gridsome, et cetera. I'm curious (especially Dave) what's your opinion on this move? Is it a big mistake? Yes or no?" Frustrated Vue User.
Chris: I mean I don't know. Are you following this? It seems like--
Dave: I am, and I just went to Nuxt Nation conference about Nuxt and the next version of Nuxt, Nuxt 3, which will support Vue 3. There was a lot of discussion, even from Evan You (the creator of Vue) about Vue 2 to Vue 3 sort of stuff.
I think it's really important to know what Vue 2 and Vue 3, the differences there. I actually had to relisten to the podcast we had with Ben Hong.
Chris: Yeah.
Dave: I was -- so the issue is there's a new API in Vue 3 that is the React style effects. You have a setup function and everything runs in your setup function for your component.
Chris: Mm-hmm.
Dave: But you're not doing the structured data object. You're not doing a class object for your component. Okay?
Chris: Yep.
Dave: Instead of the object syntax, it's the composition API.
Chris: That why, the main reason why the transition is not easy?
Dave: Yeah, and then the second reason (sort of inside of that) is there's a new way to do Reactivity in Vue 3.
Chris: Okay.
Dave: And that uses proxies, which are a modern browser-only feature. So, that sort of footnote about being a large enterprise app - never. Don't upgrade.
Chris: That's what it means?
Dave: It's probably based on that entirely.
Chris: Yeah. Okay.
Dave: Because it's one of those non-Polyfillable or Polyfill at your own peril sort of things that proxies are for React. Proxies are hard to Polyfill for Vue.
Chris: I see. I see. Okay. Okay.
Dave: So, Vuetify is going to upgrade. I don't know about Gridsome, but I assume they're on a pathway as well. There is a lot of code written in Vue 2. There's starting to be a lot of code written in Vue 3, and I'm like, "Ah, I can't use it," but there's going to be -- there's this Vue bridge. Actually, Nuxt has a bridge component or a bridge module. Nuxt Bridge, I think it's called.
They're going to start backporting some of the Vue 3 features into Vue 2, so some of the features are going to come back. It's just not all of them will because not all of them can easily go in. And so, I think they're in a much better shape than Angular 1 and 2. Angular 1 and 2 was kind of just like you have to rewrite everything. There's no hope. But for Vue 2 to Vue 3 -- or even Nuxt 2 to Nuxt 3 -- there's going to be this bridge package that you can install that will give you the composition API but then will also kind of help you understand places where you might have problems upgrading.
Chris: Hmm.
Dave: But the API, like Vue 3 still supports a lot of the API that Vue 2 did. I think everything but filters or mix-ins in filters. If you used a lot of mix-ins, you're probably in trouble, or the filter sort of syntax.
Chris: Let's say it's better and all that. Certainly, I think Angular 2 is better - or all that. [Laughter] I think the insinuation here is that that was so rough that people are just like, "I'm going to literally switch frameworks."
Dave: Nah. Yeah.
Chris: Frustrated Vue User might. We'll see. I guess you could write back and tell us what you actually chose to do, but I wonder if they're going to jump ship or if that's--
Dave: I would be curious. I mean what are you going to do when Svelte has a major migration?
Chris: Yeah.
Dave: Are you just going to bail? Are you going to take the coward's way out?
Chris: [Laughter]
Dave: What are you going to do? You know?
Chris: Yeah.
Dave: Python 2 to 3 had a big jump. Big jumps are hard, and I bet React is heading to one. They said, "We're going to maintain backward compatibility and stuff," but I think they started changing their tune on that.
Chris: Oh, really?
Dave: React might have a big jump someday.
Chris: It feels like they don't.
Dave: I don't know.
Chris: It's not as exciting as it was for a long time. You know? React 18 is kind of around now, and I guess it has suspense, but people were almost bored of waiting for that, so I don't think the excitement is very high for it.
Dave: [Laughter]
Chris: They talked about server-side components, which is kind of exciting but a little confusing. They need to be so careful. Every time React ever mentions they're doing anything, they talk about it super far in advance and tell you, you don't have to worry about it for a long time. Then go quiet on it for like a year. [Laughter]
You're like, what is even happening over there? Not that that's bad. I don't know. I think React might be too big to rock the boat much anymore, and maybe they should just do nothing. [Laughter] I don't know.
Dave: Controversial tweets here. No, I mean--
Chris: What more do I want from them? I don't know.
Dave: I think the server -- that's true.
Chris: I was thinking back. We did that little Hello, World video earlier this week, last week, or something. It was fun, right? Web components and stuff, figure out the syntax and get it going.
Dave: Yeah.
Chris: Then after we were done, I'm like, "I wonder if we should have done it in React?" I could write that thing in one second in React because I just have so much more experience with that. It feels really sensical, how you do it.
Dave: Mm-hmm.
Chris: And it also feels very sensical how I move on from that, too. Like what if I need to--?
You know how we put Hello, World on the screen with a prop, essentially, because it was an attribute on the element.
Dave: Mm-hmm.
Chris: Then we tracked state internally for the counter (1, 2, 3, 4, 5). You know? I was thinking what if the counter was actually a subcomponent? That would be an interesting next step for that because then you've got to pass state from the parent, maybe, down to the child or get them to share somehow. Maybe you use the counter itself to track state in a parent component or something. I think that complicates things in just the right kind of way that it's interesting to see how frameworks deal with that.
I was like, "Well, pfft, it's just a no-brainer in React. You get this little state updater function from used state and you pass it down. You call it from the child. It knows how to re-render the parent. Problem solved.
I think, what an achievement that is. That's great.
Dave: Mm-hmm.
Chris: That's a really clean UI that people seem to just understand, and it's not a problem that when you just Hello, World something, you don't get a good feel for that.
Dave: Mm-hmm.
Chris: It made me smile at React a little bit right there. I know it's a little controversial and you don't need to rub React's shoulders because it's a big boy and it has a lot of -- [laughter] -- you know, it doesn't need a lot of help.
Dave: [Laughter] It's emotionally stable. Yeah.
Chris: Yeah. But still, it does make me think part of the reason it's successful is because the APIs that it does have are so strong.
Dave: I'd be curious because, yeah, every framework takes it a different way. Right? Right off the bat, Vue kind of has Vue X, which is sort of a Redux built in. You know? You might use that or just an event bus, like where you fire an event and then somebody upstairs listens for that.
Chris: Yeah.
Dave: And responses to it, so--
Chris: That's pretty sweet. Yeah. As far as I know, every time there's something I like, and even if I like it in React, Vue does it better somehow. Or anything I stumble on in React, it's like, oh, there's a cleaner thing in Vue. [Laughter] I get why people like the big frameworks because it matters, all that stuff that they make easy for us.
Dave: Yeah. There was somebody I think over -- I'm just going to peek in the D-d-d-d-discord here. I think we were talking about frameworks and stuff, right? Is that right? We were just talking about features and stuff that come in frameworks, whether that's like a CMS.
Christopher Kennedy here was saying, "I like when I have those bumper rails of guidelines of how I can do something."
Chris: Mm-hmm.
Dave: They're just point out they'll reach for a framework, but what they're expecting are the guardrails. That's kind of what I want, too. Tell me how to use this.
The reason I'm picking this is to make my life easier, so provide the guardrails. That's what I want.
[Banjo music starts]
Danh: Howdy, friends. If you're looking for gaming hot-takes and standouts from a team of filthy casuals, then you should be listening to Aside Quest.
Dave: Every month, me (Dave), Danh, and Zach deliver updates on our time-starved favorite hobby through the magic of the Internet.
Zach: With our combined 80 years of video gaming experience, we provide some soul balm for that weary gamer heart.
Danh: So, check us out on your favorite podcast listening app of choice and follow us on Twitter, @Aside_Quest.
[Banjo music stops]
Chris: We have some more in here. Let me take a look and dip my hand down into the question box. Did you watch Ted Lasso?
Dave: I have not. No, but--
Chris: Oh, that's all right. That's all right. That's all right. But, but, but there's a cute moment where they were always making a little box where you can put your comments in.
Dave: A feedback box. Yeah, I saw season 1, but yeah.
Chris: Oh, you saw season one.
Dave: I did.
Chris: Well, that's what the comment box was in. Remember?
Dave: Oh, I didn't know. I didn't want you to be like, "Well, in season 2, whoever does that--"
Chris: Nate the Great always brings in a really cutely decorated question box.
Dave: [Laughter]
Chris: I'm going to dig into it. Let's see. Frustrated Vue User, we did you. Let's do Tyler Duprey. "It rhymes with monkey," he says.
"Dave briefly mentioned that he saw a website that used Font Awesome icons. You know FA icons. [Laughter] And then, at the time -- so, apparently they are dead to him. So, could you explain the issue with Font Awesome icons? I've used them for five years. I use them like a five-year-old uses stickers," he says, "just putting them everywhere.
Dave: [Laughter]
Chris: "I assume it's an accessibility concern or something. What should I do instead? Do you even feel that way? Did I--?"
Dave: You know. I probably am talking out my butt. That's probably the big issue there.
Chris: [Laughter]
Dave: Again, this is a pundit podcast. Icon fonts themselves were a good thing but they have some limitations, like whether that's anti-aliasing problems, so some crispness, or some accessibility problems like you didn't wrap it in the right tag with the right ARIA and the right blah-blah-blah. That I think SVG are a better choice.
Chris: Well, I didn't even know that was on the table. Obviously, SVG is a better choice. But I guess it's in the name, right? Font Awesome. It almost encourages that you use the font way to do the icon, which maybe I'm so far removed from that. I feel like I made it my problem for too long. [Laughter] You know?
Dave: [Laughter]
Chris: I feel like I was kind of anti-icon fonts.
Dave: You branded yourself. Yeah.
Chris: I don't care anymore. Not that I don't care, but I feel like, in my mind, I just won. [Laughter] I win. Don't use those. Those are a bad idea.
Dave: [Laughter]
Chris: I'm sick of talking about it. I rarely see websites anymore implement it, an icon system with fonts. It just feels like it's such a not-good idea that it's gone. It's so easy to do with SVG. Why bother doing it any other way?
Dave: Well, you know I'm going to probably eat my words here. I imagine it's like SVG Now. Maybe I'm missing out. Maybe I missed the update where they said we're SVG Now.
Chris: Yeah, kind of. I mean the icons in CodePen, like if you open up the assets panel and go to icons, those are the open-source Font Awesome icons, and they're all SVG. You just click it and you get SVG.
Dave: Mm-hmm.
Chris: They definitely are SVG, and I think have been for years. You know? They did a Kickstarter in 2018. Remember that Font Awesome 5, and they made it a big deal? They made a million dollars on a Kickstarter for Font Awesome.
Dave: One million dollars.
Chris: I remember being so shocked by that, like, "Holy cow! People love these things," and I think they still do. As far as I know, it's a company that's based around Font Awesome, and good on you. You know? They don't force you to use the fonts. They made the fonts because they thought -- you know they've been around a long time and it used to be kind of how you did it. I think these days not only have SVG but have helpers to use it in SVG and stuff. I don't think they're -- they're certainly not evil. But the name is not my favorite, [laughter] if we're going to poke at them a little bit.
Dave: Yeah. Okay. They do offer SVG. You need to be in the pro plan.
Chris: Oh, it's a big ol' upsell. Yeah.
Dave: Here's what I'm going to say. Use what works. Spend about 8.5 seconds worrying about your icons is sort of how I feel. You can make them better, and I actually do think there's -- we've talked clients into custom icon sets and stuff like that and had them built and stuff like that just because you can't get a cohesive set of icons and stuff like that. Whereas, if you hire a designer who does icons, they can do that for you.
Spend like eight seconds and get a nice one. Then put it on your website. A nice enough one, put it on your website, but don't be so bought into some system or some tool that you would never change that.
Chris: Oh, there you go.
Dave: It's sort of what I want to say because you can have a lot better -- you can have a really nice effect if you have really good, cohesive icons. I think that's a really strong design flex that not everyone gets to. But these are great.
I use Heroicons, which is, I think, based on the old Tailwind stuff. I think that's by some Tailwind people.
Chris: Oh, yeah, like Steve. Yeah, man.
Dave: Yeah, Steve Schoger. Steve Schoger is really good. They offer the light and dark or the outline and the solid. Then you can copy in SVG or copy a JSX file.
Chris: That's nice.
Dave: I will personally say the copy is a little weird because it does still have some JSX in it sometimes. [Laughter]
Chris: Oh, weird.
Dave: Or the SVG will have -- it ships with default Tailwind classes. Whatever. I can rip those out. I can fix that. It's fine.
But I really like these. They give me just a nice out-of-the-box cohesive feel.
Chris: Yeah. I like having a good set of icons. Isn't it? You know. Instead of just grabbing one-offs all the time and then, a year down the road, you're like, "These don't really go together that good."
Dave: No, I agree. Yeah. I think Font Awesome is great in that regard. There are a lot of icons.
Chris: At least they're all cohesive in that way, but there are a million of them. You know? It's not like a rare thing to find an icon set. There are a flippin' zillion billion of them.
They change over time because it'll be like the output of them is like you can find some ancient one that's on Dribbble and, in the comments, it links to a PSD that they hosted somewhere, and that's how they delivered them was a photoshop document that you have to open and copy them out of or something. Then fonts became a way to deliver entire sets that I think got kind of popular.
Dave: Yeah.
Chris: Now it's more common to get a folder full of them. Then they're in PNG and SVG. Now you find really modern ones, like Heroicons. The more of the vibe is just, you know, you click on the icon right in a website and it gives you some copy and paste code to use because that's actually the best way to use SVG icons.
If you're out there listening and you didn't know that, I will stand behind that. The best way to use an icon on your webpage is to dunk a little SVG right in the HTML right where you need it. That's it. There's no system. There's no build step. There's no use. There's no Shadow DOM. There's no font. There's nothing. You just hit icon. It's on the page. You style it and that's it.
Dave: Yeah. That's good. Yeah, I agree. Anyway, that's all I'm saying. Font Awesome is probably fine. [Laughter] I think font throws me off because I'm like, "I'm not going to reach for a font-based icon system."
I've had too many problems. There's the famous four stars on a horse rating that was on Etsy or something like that.
Chris: [Laughter] That's the best thing that's ever happened.
Dave: Four on a horse stars, and so, anyway, those problems I don't want to experience again, so I like SVG for that now.
Chris: All right. We might as well finish this off just for our own synchronicity. That means we are maybe two behind the scenes here, but we've emptied the coffers for questions.
Dave: Oh, my gosh. People have got to give us more questions.
Chris: Yeah.
Dave: Yikes. Okay. Well, come up with them.
Chris: Yeah, call them in. But you know a lot of them were -- I had to do some cleaning house of some stuff that was just too old. Then a good 22% of things are people that use that form to tell us to invite their boss on the podcast. Rest assured; we always say no.
Dave: Yeah. I mean maybe, yeah, just ask us if we want to interview your boss. That's the only thing people use it for. [Laughter] We could rapid-fire that.
Chris: [Laughter]
Dave: "Do you want my boss, Harry Manman, to come on?" No!
Next. "Do you want my boss?" We just go, "No!"
Chris: Or we record a whole interview with them, and they go, "Well..." and then we just cut the interview right there and do a regular show. [Laughter]
Dave: Yeah, just start it and then just delete it. Yeah. No.
Dave: Hey, here we go. Alexander Hagerman writes in, "I haven't got to use this much, but I stumbled across webhint.io in the MS Edge Chromium dev tool docs today. It seems interesting and in the realm of something of code automation tools mentioned recently. It comes with an editor and a CLI tooling, which is nice. Thanks for making the show."
Chris: Mm-hmm.
Dave: Do you know about Webhint?
Chris: It looks like you install it and then it tells you stuff about your code, right? I think I used it for a minute, but I don't know why it's not installed anymore. Why did I give up, Dave?
Dave: [Laughter] Well, it had a few generations of kind of going cool and weirder, but I've seen some really cool demos. Web Hint is sort of like a Lighthouse tool, but it was previously called Narwhal, or something like that.
Chris: Hmm. I see it's got Axe built in, so that's one thing, right? You open up any kind of file and, in fact, the homepage of it has a TSX file, which is TypeScript JSX. He hovers over an input and the input has some Axe problem, like it's an input that doesn't have a label, which is fantastic. Isn't it? Like, thank you for reminding me that I wrote bad HTML.
Dave: Yeah.
Chris: But that's just Axe, and they have their own browser plugin, so why do I need this one?
Dave: Well, so this one gives you security. It gives you some best practices stuff. Actually, I think it's included [laughter] in dev tools in Edge. If you open up and you open up the issues panel--
Chris: Oh...
Dave: There's issues, and so it'll give you warnings. And so, if I go to -- let me just pull up my site. It's probably giving me -- so, it's telling me WebKit text size adjust is not supported by Chrome. Text size adjust is added in Chrome 54. It's telling me there are some--
Chris: This is Webhint doing that?
Dave: Webhint doing that behind the scenes, I believe. But it gives you very similar things. It's saying image loading isn't supported by Firefox. It's a warning in Android, Safari, and stuff like that. Text decoration skipping, not supported. It's telling me--
Remember back when we were like, "I want to know these unsupported properties"? This is telling me that. Text decoration thickness, not supported by Firefox. Underlying offset, not supported by Firefox.
Chris: Oh, yeah. That's clever.
Dave: Then XUA compatible meta element should not be used. It's not needed, so I can delete that old - whatever - IE workaround. Navigator.user-agent, navigator.app-version, audit the usage of this. I'm sure that's my ads using that, so I'm not going to worry about it - wherever hook.js comes from. That's not me. [Laughter]
Then add a cache-control header. Response header should not include unnecessary headers. X-Access protection. I don't need that header, I guess, so I should probably get rid of it. I think that's handled over on the Netlify side of things, so I don't know.
Then xFrame options should not be used, I guess it's giving me a warning, and I'm hitting that.
Chris: Okay, so the point of this is that it's hints. It's like, here's some advice of your code, but it's for all kinds of languages and for all kinds of reasons. It could be a performance problem. It could be a compatibility problem.
Dave: Mm-hmm.
Chris: It could be a security problem. It could be an accessibility problem. I imagine there are even others. I've seen one where it yells at you for the complexity of your code. Have you ever seen a tool like that?
Dave: Yeah.
Chris: It's like the cognitive load of this function is too high. Reduce it.
[Laughter]
Dave: I mean that would be nice. I don't know. [Laughter]
Chris: We have that. That one is in JShint, though. I guess the point of Webhint, though, is you don't have to then cobble together the best of all these plugins. You just get them all in one.
Dave: I think it's all together, and so it'll give you some accessibility. It'll give you some security. It'll give you some performance.
Chris: Yeah.
Dave: More maybe granular, and it doesn't give you a score like Lighthouse. It's not like you did 100, buddy. It's kind of the opposite. It's sort of just like, "Here. I'll just tell you the problems."
Chris: Yeah.
Dave: It kind of just goes through and tells you your problems exactly.
Chris: Is it wildly popular or not or what?
Dave: I think it could be more popular. I've talked with the developers before.
Chris: Yeah?
Dave: I was like, "You know you should think about adding a score just because, in Lighthouse, you're like, 'I got a 90. I want to make that 100 now.'"
Chris: Yeah, but maybe that's philosophically not aligned here. That's just one aspect of like 12.
Chris: Right. I think that's philosophically not aligned. Then you have to come up with a rubric or a weighting system for every single one, like LI elements must be contained in a UL. Where are you going to rate that? You know?
Chris: Yeah. Then whose problem is all this stuff? Clearly, they're not writing the accessibility hinting. Axe is. And they're just using it.
Dave: Yeah, so I think just CLI Axing on the page, probably.
Chris: And they probably do that for all kinds of stuff. They didn't write this stuff. They're just cobbling it all together from other sources.
Dave: Yeah.
Chris: The advantage to users is I don't have to think about 12 different extensions to slap on my crap - or whatever. I just run it through this one.
Dave: Yeah.
Chris: I wonder if that's what makes it no so popular is that people are like, "You're just some glue. I don't need that."
Dave: Yeah. I wonder. I mean I wonder if you can get this stuff elsewhere, but it's kind of neat. In Edge and stuff, you can kind of surface these warnings and issues. There's a little feedback bubble that shows up, and it says 14. It's telling me about the 14 problems on this page right now.
Chris: Yeah.
Dave: You can kind of get to it. You actually don't even need to have it. You can just click that little bubble when you show up, and it'll take you to the issues panel. I'm pretty sure, 90% sure, that's Webhint under the hood.
Chris: Yeah. I don't blame the swing at things here. Maybe this will -- I don't know. I might be wrong that it's not popular. Maybe it's more popular than I think it is. But I don't get the sense that it's wildly, wildly, wildly popular yet. You know?
Dave: Yeah.
Chris: But I wonder. But I don't blame them for the swing because sometimes stuff like that really hits. You know?
Dave: Yeah.
Chris: Like in the way that Prettier has. I don't know any codebase that doesn't it, pretty much. It seems wildly popular because it just happened to be the thing that, for whatever reason, just hit. And if this thing hits then it becomes the thing that's in people's mind, like, "Of course you use this on your project. Duh! It's the standard."
Dave: Here. I pulled up Chrome, Chrome's issues panel, and Edge's issues panel. I have zero issues on my site in Chrome and I have 12 issues in Edge.
Chris: That's using -- yeah.
Dave: I have more information, and a lot of these are just warnings, like compat warnings, so that's kind of cool. I might know if I heavily invested in some technology that no one else has--
Chris: To me, it confuses it a little bit. I like that. No disagreements there, but is this a dev tools thing or is this a VS Code thing or what? I mean I get that it's both, but the fact that it's both weakens it somehow.
Dave: Yeah, well, I think there's an extension. You can also do it in VS Code. I think it's a tool that can be run in multiple places, I guess, is what Webhint is.
Chris: Yeah, because it says it can run in your CLI, too, right?
Dave: Yeah NPX hint your URL.
Chris: It's abstract in that way.
Dave: I'm having trouble getting it to run, but that's probably a Dave Rupert issue, not really a--
[Laughter]
Dave: I'm not going to blame a whole browser on that.
Chris: I'm looking for the issues tab in Edge, though. Is it just one of the top-level things?
Dave: Pull up a site and you see the little speech bubble next to the shish kabob menu, the gear and the feedback. There's a little speech bubble with a number next to it.
Chris: No.
Dave: No? You don't have issues on your site? Let me go.
Chris: [Laughter] I see the kabob on the right. Then right to that is profiles. There's bookmarks or something or collections, but there's no -- I don't see no bubbles.
Dave: Man, I need to see your dev tools. I don't know. You have different dev tools than me.
Chris: Oh, do you have to open dev tools to see it?
Dave: Yeah. Sorry. Open dev tools. It's in dev tools.
Chris: Dev tools, not just -- oh, yeah. Oh, the little guy with the bubble.
Dave: That's the speech bubble.
Chris: Ooh, that's a terrible icon. Sorry.
Dave: Yeah, that's the feedback. Then there's settings, the gear, and then there's a little speech bubble and a little warning thing.
Chris: Oh! Oh, yeah. Oh, I have lots of errors, 99+. There are so many problems on this site that it had to say 99+ because it wasn't ready for three characters.
Dave: It was very upset, but it's interesting. I don't know. I don't know. It's interesting. And it's maybe opinionated, like it was saying scroll margin top is not supported by Safari. But you're like, "I don't care."
Chris: Oh, it's just a little opinions for you. It looks like you can scope it down if you don't really care about warnings. It's telling me loading is not supported by Firefox and Safari, like the loading lazy or whatever.
Dave: Yeah.
Chris: I don't care.
Dave: Yeah.
Chris: It's too bad. I have it anyway. You know? Go away.
Dave: Guess what. I'm going to use it.
Chris: But, yeah, I have the same crap you have. WebKit text size adjust is not blah-blah-blah.
Dave: I don't know. It's noisier, but at least it offers a different perspective.
Chris: At least you know.
Dave: Right?
Chris: Totally. Yeah. And you think this is Webhint?
Dave: I think it's Webhint under the hood because Chrome is not doing it. Yeah. CSS-Tricks, I go to there. I get one. It says you're using navigator.user-agent, so that's probably you and I have the same ad vendor.
[Laughter]
Dave: Yeah.
Chris: Yeah. That's interesting, though. Then I wonder about crediting the people that did the work.
Dave: Oh, so Webhint is made by people at Microsoft. I should have said that at the beginning. [Laughter]
Chris: Yeah, but Axe isn't. You know?
Dave: Yeah.
Chris: They just use Axe and then you get an accessibility warning. You click on it. You go over to the Webhint site. I'm like, "Whoa! Yeah, you can't even tell the people that made the plugin had anything to do with this experience."
Dave: Nah, and that's fair. You should credit whenever--
Chris: I don't know if that's actually happening here. Don't take me too -- I'm mostly just seeing CSS problems, actually.
Dave: Yeah.
Chris: So, that has nothing to do with the accessibility. So, don't quote me on them doing anything wrong here. I'm sure they're doing right stuff.
I do like the idea, especially on a fresh machine or something, in my VS Code. I kind of like that this is a blessed set of code analysis tools. That's cool.
Dave: Yeah.
Chris: It's kind of cool.
Dave: It's neat, and it's very front-end. It covers the big buckets, like compat, performance, security, accessibility. That's what we care about day-to-day.
Chris: Yeah. Gosh darn right, man.
Dave: All right. I'm going to wrap this up. Thank you, dear 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 16 tweets a month. And watch our YouTube over on the real CSS-Tricks channel.
Chris: Yeah.
Dave: We've got some YouTubes coming out, so there you go. We're having fun doing that. Still, I think. Yeah. [Laughter] And then join us on the D-d-d-d-discord, patreon.com/shoptalkshow. We'd love to have you in there. Chris, do you got anything else you'd like to say?
Chris: I don't think so. ShopTalkShow.com.