Hasty Treat - The Weird and Wonderful <link> Tag

Monday. Monday. Monday.

Open wide dev fans. Get ready to stuff your face with JavaScript, CSS, node modules, barbecue tips, get workflows, breakdancing, soft skill, web development, the hastiest, the craziest, the tastiest CSS, web development treats coming in hot. Here is Wes, Barracuda, Boss, and Scott, El Toroloco, Tolinski.

Oh, welcome to Syntex.

In this wonderful and weird episode, we're gonna be talking about the weird and wonderful world The link tag, which is really one of those tags we've all probably used a 100 times without even thinking about it. And in this episode, we're gonna be talking a little bit about why it's weird And what's up with the link tag? What does it do, and what are some of the things that it can do? My name is Scott Talinski. I'm a developer from Denver, Colorado, and with me as always is Wes Bos.

Hey, everybody. I'm excited to talk about the link tag, which is very weird. I'm excited to talk about link tag too. This episode is sponsored by 2 amazing companies, which is Sanity and Sentry.

You wanna take Sanity, and I'll take Sentry.

Sanity is a structured content CMS. We've talked about the The technical implementation of Sanity May time. Let's talk about some of the cool editor real time collaboration features that they have. It's really, really Cool. Because it could be the coolest, slickest React based CMS that you have ever seen in your life. But if the end user doesn't like using the thing at the end of the day, it's not gonna fly with your your stakeholders who you're building this thing for. So Sanity, let alone it being a very nice technical platform to work on, it's a really good collaboration platform. So you can work on editing content with multiple Well, people you can see what people have crossed out, what people have added, who added things. It's like it looks better than Google Docs, to be honestly To be honest with you, Diane, you can revert changes.

Do you remember that? No. I don't know what you're talking about, but it's funny. Also, Diane, I'm a horse. It's like a a Family Guy. I haven't watched Family Guy in, like, 15 years, but I still slip those little things in Every now and then. Anyways, back to Sanity, they have a really, really good real time collaboration platform that is baked right into the platform.

You can see what people are typing at at the same time. You can see what people have edited, and it's just really, really good. It's a great CMS, so check it out. Sanity dot io forward slash syntax. That's gonna get you double the free usage tier. Thank you, Sanity, for sponsoring.

Sick. This episode is also sponsored by Sentry at century dot I o, which is the error and exception handling tool that you know and love. We've been using Sentry at level up tutorials For a long time now, and we're huge, huge fans. And you know what? One thing I love about Sentry is that it's not like the service has stayed stagnant. They're always Constantly adding new things from new dashboards that are consistently added where you can see charts from errors by country, events, Handled versus unhandled, affected users, number of errors, number of issues. You can also get performance metrics like which of your sites have the The highest user misery score as in which of them take the longest to load and which of them are the fastest. So it's basically almost like analytics, but just for performance so So you can really see at a glance which of the, which of the links on your site are getting a lot of traffic but are slow for your users. It's extremely cool, and I use it All the time.

In addition, there is also their just classic error and exception handling tools that you know and love.

And they just recently also added because we're on the topic of talking about new things here. They've also added this whole new crash free sessions part of it, And it'll tell you how many like, what percentage of your users' sessions are crash free.

As in If you're 99 or a 100% crash free, then that is bang on. You are doing a great job. If you're gonna lower end of that Spectrum then, you need to figure out why your site is crashing so much. So a lot of cool stuff here from Sentry. Check it out at century. Io. Use the coupon code at tasty treat, All lowercase, all one word, and you'll get 2 months for free. Okay.

So this episode, it was funny. We were asking on Twitter A little bit about just some things that people were interested in in Ryan Florence of Remix, React Router, Reach UI, way too many things to count. Ryan, he he said, you guys should talk about the link tag. And he he linked us to this blog post that he wrote That is a link in the show. It's called ship weird, and it's all talking about the link tag. And so that was the genesis of this episode. We decided that, Yeah. The link tag is weird, and we use it all the time. So let's spend some time talking about it. I think the probably the weirdest part about the link tag is that it's not For links,

at all, it's, I guess it is for links, but it's not for anchor links, which is what you think it might be for. So we're gonna rattle Through the list of what is the link tag for and and how do they work, probably the most common use case that you use the link tag for is for loading CSS into your page. So you have your your link tag, and it's a rel attribute of stylesheet, and then you give it a h ref, an h ref To your actual CSS.

Take it a step further. You can also give it a media attribute so that CSS will only be applied in print. I think there's a projector one that you can only apply, or you can link an entire style sheet to only be applied Add a media query. So prefers dark color scheme, max width, min width, any of the media queries that you could possibly think of. There's one for projector? I'm pretty sure. Let's look it up real quick.

Link tag media. I remember looking it up a while ago, and There was, like, ones for devices that were like a Kindle. Woah. Let's find it here.

Here we go.

Devices.

The link tag will have it can take and, not, or comma, so you can chain them together.

The possible values are all print, screen, screen is probably what used most often, speech, And then there are a couple deprecated ones, oral, braille, handheld projection, TTY, and TV. Mhmm. I initially was teaching those, like, 10 years ago when I was this, but those have been deprecated because they are not very commonly used. And then you can use the values. You can use aspect ratio color That specifies bits of color. This one's not deprecated, and this is really cool because if you have a display that is

1 or 2 colors like a Kindle. You could write a media query for that, and only apply the CSS at that specific time. That's wild. And and I think that CSS is probably the 1st time that anyone uses the link tag typically. Right? Yeah. I mean, when you're using the link tag, the very first time, it most likely is via We are adding CSS to your page. So that's that's interesting to know. Now next 1 is for web fonts. Now it's funny because When this first hit, these were kind of very interesting and different. It's a very new kind of CSS syntax for us. And For a link tag here, you're really using the link tag to load up a style sheet that then loads a font.

Now That uses the link pref, and you're linking to a file a a style sheet that then has an at font face. And that at Font face is then where you can give your font a name. You can determine what the default font style and weight is for that, and then you give it a source with a URL where it actually loads up the individual font file or font files, which again, they need to be a network request because it is a font file that is grabbing from somewhere. And And that's one of the reasons why people don't realize this. If you add too many fonts to your page, it can be a substantial point of bloat because you are loading up a file just via CSS.

We also did an entire show on using the link tag for favicons, so the link rel equals icon. It also takes the sizes attribute. And this is what makes the link tag so weird is that you can use it to load in CSS.

And then but, also, you can use it to specify the favicon as well as all the other icons that we talked about in that show. You can go back and listen To that specific one, Apple Touch icon, things like that. Mhmm.

Mhmm. Mhmm. Mhmm. We can also use it to preload and prefetch resources. Now This is something that's become a little bit more prominent in the day to day workflow now that we're in in JavaScript land. Perhaps there's some hefty resource that you don't want to wait for the user to interact with Something before it loads. Well, you can now use the link tag well, not now. Well, you can use the link tag to prefetch or preload A document, font, audio, fetch, script style. You can use it for anything in maybe you can Have this available for something before it's even used. That way, it's loaded up, but you're not necessarily interacting with it, and you're not having to wait for it to finish loading before trying to use.

You know where this would have been really handy is remember the old days of doing hovers and then the image? Flashes in. Yeah. Yeah. It would have to download the image. You could, and then we would have to, like, laser preload them By putting them in image tag with, like, a 1 pixel by 1 pixel so that it would trick the browser into downloading it, we have that now. You just simply pop a link tag with the preload Attribute on it, and you can preload. Like, the examples that they have in the docs or or the supported versions most commonly are Audio, an entire document. So if you were, like, wanted to possibly preload the next page, that would be a really good way to do it. With code splitting, that's a big thing now. Yeah. Yeah. There you go. Fonts, images, scripts, tracks, like a caption track for a video, a web worker.

Tons of stuff you can put in there. I think that's that's a really good way to do it because it's just that HTML tag. There's no special libraries for that.

What else? We have a fetch request. This is something I didn't know that it did it, but it was in Ryan's blog post here. So if you're hitting, like, an API endpoint, you could preload the data by just putting it in The preload value there, and then it would go and fetch the data. I assume that would only work with get requests, which makes sense because if it's If you're just loading data, it's probably a get request at the end of the day. Mhmm. And then when you actually do make that fetch request, it will be in the cache, And it will be immediately resolved. Interesting.

Yeah. Like, even, like, if you don't wanna wait for your JavaScript to load and then for that thing to fetch, You could put the preload in the head, and then it as it's downloading a parsing in the JavaScript, it will also be downloading

That data. So it could speed things up that there as well. Now I don't know if we mentioned this, but most of these properties that we're we're adding and we're talking about here, they go in the rel Attribute of the link tag. So it's rel equals prefetch, rel equals preload, prerender, prev, Search stylesheet. You've probably used this in stylesheet already.

Icon, license, DNS, prefetch, author, alternate. These are just some of the ones that are in here. Another one is preconnect. In preconnect, you'll see this being also, like, one of those things that you learn about largely from if you if you didn't know about it before, maybe the 1st time you ran Lighthouse and Lighthouse would say or audit, any of those tools like Lighthouse. So it would say, maybe you should add a, You know, preconnect to this thing. And what preconnect does is it basically says, let's make the whole process of fetching this thing faster because This is an important resource. This is something that we're gonna want maybe like a font, and this is a well known origin. So we're going to establish an an an early connection to this thing, And it's going to make loading of your fonts faster. Basically, all you gotta know about this is if you're you have some sort of a font or something that you want to be loading faster, you add RHEL equals preconnect to it, and it's going to be faster. It's a little bit of magic and not some it's like built in browser DNS optimizations, the stuff that you would not want to have to figure out yourself and

honestly not something you could because it's the browser's territory. Right? Yeah. It just I I'm assuming what it does is it just does the domain name look up like that where it says, okay, westboss.com, and then it has to, like, look up the IP address to that and any, SSL Certificate checking, all of that stuff. That's called, like I think that's called the handshake or request overhead.

That would just be done much quicker So that when you actually do want to make a request to any of these origins, then that is already done for you.

Another one we have here is the module Preload? I didn't know that this was this one either. This is probably something that your your framework will take care of for you. But if you are Doing your own rolling your own, JavaScript, you can say link rel equals module preload. And if you have a module that quests another module, and then that one imports another module that's a waterfall of JavaScript.

And you can flatten those with this module preload.

I I don't know anything about that yet.

Next one is integrity. This goes on both, like, link tags as well as script tags. And the idea behind Integrity is if you have something like a JavaScript file or a CSS file or even if you are downloading Any sort of document.

Sometimes you want to make sure that nobody has monkeyed with that resource before you go ahead and load it.

You'd often see this on downloads of something like Cyber Duck or or whatever, and it will say, here's the And then what you can do is that you know for sure that nobody has monkeyed with the actual source of that JavaScript or CSS from what the HTML was expecting. Someone if they still have access to their HTML and the JavaScript, they could change it. But, if someone were to change your JavaScript, the sha of that file would change, And then the HTML would refuse to download that JavaScript and potentially protecting you from a malicious threat. So it's just like one more step.

I think unpackaged does it or npm.

Unpkg.

Let's see here.

No. It's not. I forget where I saw it. Maybe it was like, Cloudflare, one of those JavaScript CDNs. That is a really good example. Mhmm. Because if you're loading let's say you're loading jQuery in via JavaScript CDN, and then somebody hacks the largest CDN in the world and starts Putting Bitcoin miners in all of the JavaScript.

What would happen is that because I put the Shaw in my integrity, Then the browser would refuse to download that JavaScript file. So that's a good example is if you are putting third party JavaScript into your browser, and you wanna make sure that nobody has changed that version because it's a version that should stay the same forever.

That's fascinating. Wow.

The weird and I can't I'm not gonna say it again, but it's just so cool. There's so many little things that you just never do. You you pop a CSS Link on your on your page. You link up your CSS or maybe you drop in one of these link preconnects to connect to the Google fonts to grab your Google fonts.

Yeah. Not a not a ton of stuff we think about that much, but really, really interesting. And it does a whole lot largely We're around linking, but not in the way that you might think.

Yeah. Yeah. It's kinda interesting. So shout out to Ryan Florence for the idea for that show. I thought that was kinda Interesting. I've I've I've never really looked into it all that much. I've just, like, always, like, copy pasted these values into mine. And now you look at it and go, wow. It does do a lot of totally unrelated things. Yep. That's exactly how I feel. Yeah.

Alright. Thanks for tuning in. We'll catch you on Wednesday. Cool. Peace. Peace.

Head on Or choose syntax.fm for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show.