Hasty Treat - The Weird and Wonderful <link> Tag

really, really interesting. And it does a whole lot largely We're around linking, but not in the way that you might think.

hacks or you can link an entire style sheet to only be applied the data 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 Doing your own I think unpackaged does it or npm.

No. It's not. I forget where I saw it. Maybe it was like, so that CSS will only be applied from what the HTML was expecting. Someone if they still have access to their HTML and the JavaScript, they could change it. But,

would refuse to download that JavaScript and potentially protecting you from and then the image? The preload value there, and then it would go and fetch the data. I assume that would only work with get requests, You know where this would have been really handy is remember the old days of doing hovers rel attribute of stylesheet, and then you give it a h ref, an h ref To your actual CSS.

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.

Link on your on your page. You link up your CSS or maybe you drop in one of these link preconnects

And then the HTML Audio, an entire document. So if you were, like, wanted to possibly preload 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, Any sort of document.

if someone were to change your JavaScript, the sha of that file would

integrity,

to connect to the Google fonts to grab your Google fonts.

of

the largest CDN in the world

because I put the Shaw in my

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.

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

That's fascinating. Wow.

Then the browser would refuse to download that JavaScript file. So that's a good example is if

and starts Putting Bitcoin miners in all of the JavaScript.

Attribute of the link tag. So it's rel equals prefetch, rel equals preload, prerender, prev,

it will also be downloading and TV. Mhmm. I initially was teaching those, like, 10 years ago when I was this, but those have been deprecated something like Cyber Duck or or whatever, implementation of Sanity May time. Let's talk about some of the cool editor Unpkg.

Search stylesheet. You've probably used this in stylesheet already.

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

and then it has to, like, look up the IP address to that and any, westboss.com,

Certificate checking, all of that stuff. That's called, like I think that's called the handshake or request overhead.

the domain name look up like that where it says, okay, tracks, like a which makes sense because if it's If you're just loading data, it's probably a get request preload

SSL caption track for a video, a web worker.

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 In addition, there is also their just classic

Oh, welcome to Syntex.

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

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.

In this wonderful and weird episode, we're gonna be talking about the weird and wonderful world The link tag, which is Yeah. Not a not a ton of stuff we think about that much, but Icon, license, DNS, prefetch, author, alternate. These are just some of the ones that are in here. Another one is preconnect. In preconnect, 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,

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.

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 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 that nobody has monkeyed with the actual source of that JavaScript or CSS by just putting it in Attribute on it, and you can preload. Like, the examples that they have in the docs or or the supported versions most commonly are And then what you can do is that you know for sure

error and exception handling tools that you know and love.

all one word, and you'll get 2 months for free. Okay.

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.

The technical you could 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, 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 it will say, here's the

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 platform that is baked right into the platform.

To be honest with you, Diane, in print. I think there's a projector one that you can only apply, a malicious threat. So it's just like one more step.

you can revert changes.

real time collaboration features that they have. It's really, really Cool. Because it could be the coolest, slickest slip those little things in So that when you actually do want to make a request to any of these origins, What would happen is that

React based CMS

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 That would just be done much quicker

into your page. So you have your your link tag, and it's a And then there are a couple deprecated ones, oral, braille, handheld projection, Devices.

at all, it's, and then somebody

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

And then but, also, you can use it to specify 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 And you can flatten those with this module preload.

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.

The possible values are all print, Sanity is a structured content CMS. We've talked about the Every now and then. Anyways, back to Sanity, they have a really, really good real time collaboration of JavaScript.

the values. You can use aspect ratio color Next one is integrity. This goes on both, like, link tags as well as script tags. And the idea behind then that is already done for you.

because they are not very commonly used. And then you can use

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.

screen, screen is probably what used most often, speech, The link tag will have it can take and, not, or comma, so you can chain them together.

That specifies

TTY, 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.

And it will be immediately resolved. Interesting.

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, Sometimes you want to make sure that nobody has monkeyed with that resource before you go ahead and load it.

at the end of the day. Mhmm. And then when you actually do make that fetch request, it will be in the cache, change, and this is really cool because if you have a display that is 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 devices that were like a Kindle. Woah. Let's find it here.

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.

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 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, 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.

Now

Integrity is if you have something like a JavaScript file or a CSS file or even if you are downloading bits of color. This one's not deprecated,

I I don't know anything about that yet.

There was, like, ones for Let's see here.

Take it a step further. You can also give it a media attribute 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.

Link

prefers dark color scheme, max width, min width, any of the media queries that you could possibly think of. There's one for projector? tag media. I remember looking it up a while ago, 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 Add a media query. So I'm pretty sure. Let's look it up real quick.

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

Here we go.

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,

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

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,

of Remix, React Router, Reach UI, way too many things to count. Ryan,

Boss, and Scott, El Toroloco,

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,

Monday. Monday. Monday.

Tolinski.

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

to prefetch or preload

A document, font, audio,

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.

DNS optimizations, the stuff that you would not want to have to figure out yourself and

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'll see All lowercase, Head on Or choose syntax.fm

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