What are Headless Components?

Welcome to Syntax, the podcast with the tastiest web development treats. Today, we're talking about headless components or headless UI. What is it? Why would you ever want a headless component? My mind was blown. I was talking to ready. Tanner Lindsley. I always goof up his last name at Reactathon about a month ago, And he was talking to me about his react table or not even react table. His table tan stack table, which is like an awesome component for rendering out tables and sorting and searching and all that kind of stuff. And he's like, the whole thing is headless. I was like, how do you build? Like, headless means that there's literally no markup. I'm like, how do you build a table without markup? And then I was like, oh, yeah, I understood what it was, but it blew my mind that he was building a table. It's the 1st time I had seen that. So we're going to go through today and talk about what headless components are, why they are awesome for you, the developer, why they are awesome for accessibility

And all that good stuff. How are you doing today, Scott? Hey. I'm doing good. I am, just chilling out here. We had a crazy hailstorm last night. The, I did I was just reading some article this morning about why Colorado is so susceptible to, like, massive hailstorms.

But Yeah. If you if you've never been through a really wild hailstorm, It hits really hard and it falls down very quickly. It it's very wild experience. So I saw there was a a Red Rocks, the concert venue last night. And people were basically watching a concert, then they announced, alright, here's a weather delay. And then, like, Seconds later, getting pelted with hail and there's a lot of people having to go to the doctor, emergency room and stuff from it. Rid. I saw broken bones, shattered windshields, and stuff. It looked

very scary. It is wild. How long until you can't get insurance in Colorado anymore? Rid. So everyone's cars

are totaled every 6 months. There's, like, very specific hail stuff.

In fact, after, like, big hailstorms, rid You just people go around getting new roofs. Everybody gets a new roof after a big hailstorm. That's like the whole whole thing here. And and you see Cars very frequently with little dings all over them because they got left out in a hail storm or something, which is why when we bought out here, it was like, it needs to have a garage, needs to have rid

Garage. No kidding. I just got back the other day. I went to the Tailwind Connect event, rid, which was in Cambridge, which is wild. It's like I don't think they've ever had a it was like a mix between, like, a conference and a meet up. Ready. It was much more on the conference side, but it was awesome.

And my favorite part about it was, like, I needed a ride out to Cambridge, like, 45 minutes.

And I was like, who from Hamilton wants to, like, carpool in an Uber? And I jumped into the Slack rid of this or the discord for the conference.

And somebody without a username was like, hey, we'll pick you up. And I was like, this Sounds safe. Let's just do that. But without a turn out to be a guy named Charles, big fan of the podcast. And we chatted about All kinds of met met tons of syntax listeners there. It was pretty cool event.

Nice. Sick. Yeah. Wish I could have been there. Ready. Yeah, it

was a good one. I really like the they did a lot of stuff in the event that was nice. There was no music, like blasting, which is, you know, you go to conference and then after party, they have, like, speakers the size of, like, a house just blasting music and you can't even hear anyone or they have a live band, which I get it for the ambiance, but rid. I don't know if I'm old, but I just want to talk to people at conferences,

and sometimes it's too hard. Probably a little bit of that too. A little bit of being old. You know, render Was like that for their speaker or there's like a VIP rooftop party, and it was so loud. And not that I I really I really don't mind, rid. But but when you're trying to talk to everybody, you're yelling the whole time, and I just speak the next day. So I'm not having a couple of drinks. I'm just yelling. I'm yelling. I'm yelling. And then it's, like, 10 o'clock hits, and I can just feel my throat, like, coming to a grind. And I was like, you know what? Rid I gotta go. There's no way I'm gonna stick around here. Also, I'm gonna not be able to talk tomorrow. So yeah. No. I definitely get the bummer about that. Alright. Let's get on into it.

So Headless components are components for literally anything. Could be, yeah, could be Svelte, could be View.

Rid. Some of them are library agnostic, which is really cool, and then some of them are specific to React or View or Svelte or something like that. So they are components that bring all of the functionality, And it brings none of the HTML. It brings none of the what it actually looks like. And that's really cool rid Because it solves the problem of, I want full functionality, but I also want full control over customizing how it looks. And We see that sort of trade off with the built in components in the browser. Right now you have a select drop down or you have a video component or you have an audio component, and you either get all of the functionality for free, all of the accessibility for free.

But then you can't really Customize it all that much. And it's kind of frustrating that there's always this major trade off of a bunch of work or this, like, generic looking thing. And then the solution to that was like everybody made all these components that you can just NPM install. But Then you're sitting there being like, well, this is 80% of what I want, but I want to be able to add a div here. I want to add a filter. I want to add something else. When somebody selects an item, I want this to happen. And it's just like, well, we don't resurface those APIs, and it doesn't work all the well. So headless. And then what do you end up doing then? Yeah. You just I guess you build your own or you copy Fork it. You copy paste it. You know? You fork it, and then you're opting out of all future

updates. Now you got a thing you gotta support yourself with potentially dependencies of rid own project that you didn't write. And then yeah. I've done that so many times. I'm like, I this would be perfect, but it doesn't support SSR. So I need to fork it now because of some choice they made in the component itself or or something. I would love it if for do this. Like, exactly what you're saying. So Exactly. Yeah. I could see that. But when you say It provides the functionality.

I think maybe we could drill a little bit more into, like, what kind of functionality?

Or is that what you're gonna you're gonna do in this example here? Rid together. Yeah, I think, like, let's start with an example, and then we'll go into what they actually provide because you might not you might be thinking like, well, Something's fine for me. Date packer is fine for me. So I want to give an example of, like, a customized country drop down component where You click on it. You have a list of all your countries, and then you can click your country. Right. The base, like, maybe you don't get this because the United States is almost always at the off of these drop downs.

And when it isn't, I get annoyed, which is the way American of me.

So for me, Canada is Right below Cambodia in Cameroon or something like that.

And I've gotten pretty good at finding them, but It's a frustrating UI to work with. I love when you're able to use your arrow keys.

If you want to have, like, a better component. You want to be able to allow your users to use the arrow keys. You want to highlight the current item.

Maybe you want to put like a little flag beside each of them. Maybe you want to be able to press C to get to Canada.

Maybe you want to put, like, the countries, like telephone code. Plus 1 is North America, and plus 43, I think, is What's 43? Let's look it up.

I could not tell you any of these. Country code, Austria.

I would not have guessed that one. So you get the point where you want to be able to put that beside it.

You want to have hidden values.

So, like, the big one with United States of America is if you're filtering, you type in USA.

But what if they put it as United States of America? Or what if it's just United States? So providing additional options where you can sort of fuzzy search those different values there.

What if you want to programmatically select values? What if you want to hit enter to accept it? What if you want to hit escape? And that That's not even including all of the accessibility stuff that needs to be that needs to happen. So actually, I wanted to just Give a quick little example of what is necessary for accessibility when you're doing a drop down like this. So

Favorite animal dog. List box, pop up, collapse button.

Favorite animal dog.

Rid So here I am on, like, a drop down, and it's called favorite animal. And I have dog selected, so I'm going to open it.

Rid It's freezing.

Dog. Dog. Selected. 2 of 3.

So there's 3 options here. Cat, dog, and kangaroo. So it says dog. Selected. 2 of 3. Cat. 1 of 3. I just I just use my arrow keys to go up to cat, and I am currently hovering over top of it. I'm gonna hit my enter key.

Favorite animal cat. List box pop up collapse button article.

Right. And then there's the Call box developer edition is not responding.

Rid Tap. Favorite animal cap. List box, pop up, collapse button article.

Firefox developer edition is not Alright. Rid. I probably should Voice over off. I turned it off. So, essentially,

when you do stuff like that, I also had this when I was doing drag and drop, is You have to announce anytime you go outside of your default select items, you have to Announce when things change. If you're building your own sort of drop down, you're giving up all the accessibility that's built into a lot of those things, and you need to be able to do that. And that example didn't even have, like, a filter where I was typing in some sort of values in there. There's another example on here. So It's really hard to build custom components that are also accessible.

So headless components will give you all of that for free.

And all you have to do is it's like when you go to a barbecue and you just bring a salad, you know, like, it's the most low rid. Everything you could do for a barbecue. All you have to do is bring the dibs and hook up the event handlers of when somebody clicks this, when somebody arrows up and when somebody arrows down and it will do all of the rest for you, which is great. Are you saying that then developers are going to have to learn

rid HTML.

Yes. Exactly.

You're gonna have to be able to learn HTML. So the first example I ever ran into was using Downshift JS, which is the React component for creating drop downs.

And it was the best because if you need to create some sort of autocomplete drop down, rid. You need full control over that. You want to style it how you want. You want to create your own components. You want to use your own divs, your own CSS classes. But But you also want to be able to have control over how the autocomplete is being rendered, what's being highlighted. And you want like when somebody selects one of those values, You might want to show text on the screen, but the value of that actual input is totally different.

And this was like the 1st time I had run into this idea of like a headless UI, and I can have full control over where and how it is rendered out.

But all I had to do is hook up the on key up on key down on select.

And it would also give you active classes.

It would give you the currently matched word, like pretty much all of the little pieces. It's kind of just has this raw data And all of the event handlers, all of the Dom tracking stuff are just functions.

And then you just sort of wire them up to the different Dom elements that you need. And out the other end, you get a fully super powerful drop down that is fully accessible as well. Yeah. You know what this reminds me of

Is in SvelteWorld, we have actions which allow you to just essentially attach a life cycle methods to a DOM element.

So if you were to throw like a use action on a DOM element, theoretically, that could be a way of doing headless components granted it's it's Scope to Svelte because it's using Svelte APIs to do that. But, like, you're not writing components, then you're just writing HTML. You're dropping a a tag on here, and then it would, You know, apply to the the Dom elements. What what are what are some examples of action? For instance, let's say I have an action to do anchors right now or here's a here's a good one, like click on outside. You could say use click on outside.

And what that is going to do is put a event handler basically that fires an event, a custom event If the current node is not clicked on, you could think and, like, React world, you'd probably use, like, a ref and a hook or something to do that. Yep. Rid. But with this, you're just saying, you know, use click outside, and it's attaching it directly to the Dom node itself. So Oh, exactly.

So the use click on outside is some that's not a JavaScript thing. That's a piece of JavaScript that has been written and included in the library. And Svelte says, alright, well, here's a function that does all the heavy lifting for you.

All you have to do is slap this sucker on a div that you want to track and we'll do the rest of it. That's exactly what all these Headless components do. And probably another really good example that you could probably talk about this is the select menu. Yeah. Oh, yeah. HTML component. Right? That's a standard.

Yeah. The select menu and actually, Wes, I wrote a, headless action or whatever for a popover because there's a whole new pop. So select menu includes is like a select menu is a wider view of the pop Over API, which is a more narrow view of the same thing, where you have essentially a layer that sits on top of HTML.

You can choose to toggle, pop it on or off. And select menu is essentially a little bit more micro version that uses the pop over API. And I wrote an action that anchors The select menu to a target.

And again, it's headless because you are saying, Hey. Just here's the target. Here's the target ID. And then it automatically will apply like a position absolute style to the dev itself, the dom mode. Rid. Yeah. Select menu is, a good option because it is. It's a browser API you can drop in a polyfill and it'll just Work without having to write any JavaScript. Yeah.

To fully understand the beauty of Select menu, I'm going to put a link in the show notes to Microsoft Edge. GitHub. Io, and they have a bunch of examples of select menu components, Meaning that this is literally an HTML tag that is similar to a select, like with options inside of it. So you have a select, you have options, but you are able to use divs and spans, and you could put a freaking video tag inside of an option. If you really wanted to, you can do filtering. You can do multiple selects, meaning that you want to select 6 things from this drop down. And the browser does all the accessibility, heavy lifting arrow functions, hook up a keypad or a gamepad to it. It all just work. But you get to pick the divs, you get to pick all the HTML, you get to pick the CSS classes. All of that good stuff sort of comes out. And they have one that's just the emoji, and you click on it and it gives you a circle of emojis, a circle select menu, which blows my mind. Rid. Yeah. You get full CSS styling over too. There's there's pseudo properties and stuff. You have backdrop in there as well. Rid. There's a lot of great things about it. I've learned though that this select menu is really only supposed to be used in positions in which you would typically use a select

before.

So they they think the ideal use case or the semantic use case for select menu is very specifically Like in forms and not Yeah. Like, let's say we were trying to hack it to do drop down menus because it's like, hey. You do a drop down menu in here. Why not? But rid. Then then you have access to the lower level versions of the same API, which is pop over, which again gives you access to the JavaScript Stuff that you don't have to do to actually make the div show up on top of everything or anchor it or any of that stuff. It's kinda funny because

You might not even think to use Select menu for a lot of things, like maybe per page is what you can use the Select menu for.

But If you think about like the speed of our audio player on the Syntax website, like, maybe that would be a good use case for a select menu if it didn't look like rap when you clicked on it.

And that's,

I think, a really good use case for this. Yeah. Totally. Yeah. I love that. The select list has always been one of those ones you hit and you're just like Yeah. Well, I guess I'm writing a component to do this.

Rid. Exactly. And to be clear, it's not a set of, like, custom selectors that you can now choose.

It's literally bring your own HTML. Yep. BYO HTML. And and that's the way BYO. We were always talking about, like, let's Let's, let the browser do more of the accessibility concerns for us or let the browser do more for us.

And the only way that's, like, Going to happen is by using browser APIs instead of JavaScript to do everything, which so many people wanna reimplement everything in JavaScript and, You know, then you have to really reimplement everything.

And if the browser can do it for you with semantic HTML semantic elements, then Mhmm. Opt for that.

I have a list of just things that Headless UI provides or headless components provide. It's obviously the functionality, accessibility event handlers, getters and setters. So if you want to programmatically change the value of something, it will give you that rendering hooks on when to re render current class selected values on select callbacks, all of that good stuff it gives them for you.

Let's go through some examples now of the ones that are out there. So one that is in early days, it's from Devin of Parcel.

So they're building out button, different drop down pickers, date and time, overlays, form components, rid.

All of the sliders that you might be used to where you can start and stop checkboxes navigation, Pretty much all of the major components of building an application are being built in here, which is really cool that they are doing this. The only like 1 bummer, I think, is that it's only react based, Which is you've got to think how much of this code base is not react focused. Right. It's probably a lot of event listeners rid in the Dom. It's probably a lot of just refs. So I wonder.

And the only reason I wonder this is because all of the TanStack stuff.

So Tanner Lindsey has a headless UI for building tables and data grids. That's TanStack Table.

He has TanStack Virtual, which is a headless UI for virtualizing large element lists. So if you have a list of rid.

Versus Code does this. If you have 10,000 lines of code, Versus Code is only rendering the lines of code that it knows to be on the screen. So virtualization in 10stack virtual will figures out how big your div is. It figures out how big each of your elements are. And it will say, okay, well, I know that you're probably only viewing these elements and maybe the 3 before and the 3 after. And then as you scroll, it's literally taking those ones out and re rendering it. And that gives you nice, snappy, fast scrolling where sometimes you could get like if you go to the uses. Tech website, the initial render is really slow.

And that's because there's How many? A lot.

735 Divs of people. And in each Div, there's probably, rid 50, 60 spans and links and buttons and all of that stuff. Right. It's just really slow. Rid. There's thousands and thousands and thousands of elements on the page. So the solution to that is we have to virtualize it, meaning that you should only render, like, 6 that are actually being shown, and the rest of them can be taken out of the Dom and it'll make it much more smooth and buttery. So all of these 10 stack ones are written just in JavaScript.

And then there's adapters rid. For Solid and for React and for Svelte. And all of his packages go this way, which is really cool that it is agnostic from whatever library you're using.

And I'm a big fan of that. Yeah. I you know, and it makes it so instead of having to support the library 4 different ways, you're supporting the core library once and then It's the adapters which are most likely much smaller and much smaller things to have to worry about supporting which that feels like a win for updates.

You also have headless UI in here, but I was looking through I've never really seen this before, and I was having a hard time understanding how these were headless because they seem to just be React and Vue components.

Yeah, I guess they are the head to the headless.

This is like a tailwind library that gives you both React and Vue components for I'm pretty sure it's using React Aria behind the scenes. So then what's headless about? So the headless part of it is that they are unstyled, meaning that you use these components like option and item and whatnot.

However, they're just completely void of any specific style. So again, it gives you the functionality, But it also will give you in this case, it gives you all the markup, which is something a lot of people want. You can still add your own additional markup inside of each of these ones. But these are the the bones that you have, and then you can go from there on out and start to add all of the different classes. If you're using Tailwind, you add your Tailwind classes, you add a class to it and apply your CSS. No problem there. Rid. And then what they did announce at the Tailwind thing is that they're giving, like, these, like, premade components that you don't just NPM install them, but you just kind of just drag and drop them into your app and just start gutting them for what you want. Right. So it's kind of like a base of it. So headless UI seems like it's just void of any initial styles.

And then it looks like they will also give you like a set of premade UI components which you can then start to tweak and whatnot without having to like import a whole bunch of stuff and where you have to worry about updating and whatnot. Similar to how, like, WordPress themes worked in the early days before everyone started using child themes, You just, like, go grab something that looks close to what you want, and then you just start to dice it up into

what it is you actually want at the end of the day. I have a I have a question about, you know, maybe how to, like, how do we approach this as being a concept Compared to something like web components as a technology.

Web components provide built in functionality the, HTML elements and JavaScript as a component, the browser.

These things are Allowing you to use markup to have functionality.

Like, what's the intersection here between web components and headless components.

That's a good question.

I don't necessarily know what the answer to that is. I guess that you don't have to use web components.

Rid. I think people just want to use whatever it is that they are using. Like, I would imagine that it would make sense to maybe even build some of the stuff in web component. Is the menu box select menu being done in web components? Yes, it is. Okay. So, like, rid. I guess theoretically, then you could you could build them as web components and then just open up the the API to the different frameworks, but there's gotta be a reason why they're not being built in web components by default, you know? Yeah. Right. I know. Maybe

as to who's authoring them because there certainly are like a handful of web component like things here that allow you to do this type of functionality. But, rid. Yeah. Because to me, when we're talking about things like the select menu, I I just go to, okay, that's a web component, and that's like what what web components do well.

And and there's all this stuff does kind of feel like, alright, but if it was just all that in a web component,

Then maybe we wouldn't have to worry about that. Yeah. Well, that's been the web component drum that everybody's been beating for so many years.

Just do it in web components.

But Yeah. Nobody's Does anybody wanna do that? Yeah. Nobody

Yeah. I know. Right? Like, we keep asking that question is Why aren't people using web components? Have you ever seen a shoelace? Shoelace.

Let's think. No.

Shoelace dot style. I'll paste it in rid. Here to the show notes, a forward thinking library of web components that are, one, works with all frameworks, rid. Fully customizable with CSS built with accessibility in mind.

1st class React supports built in localization.

This is done by Corey Levitzka.

Actually, I think he had mentioned wanting to come on the show as well. So maybe we can get Corey to come on at some point. Rid. But the these are a ton of UI components that are at their core, very basic web components Or things like what we talked about in the open UI episode where, just really type of any type of component that you might need. Who they are as a web component. And if your framework of choice plays well with web components, then you can use any of these things without having to have it be rid Tied deeply to your framework and still being able to write HTML. And to me, that's a very big win. They've got adapters for React, rid. View in Angular, which is really cool. So I think

the reason why headless goes a little bit further than something like this is rid. It says it's fully customizable with CSS. So meaning that, like, yeah, you can select anything on this component and change the color of it. And then it seems like a lot of the components have slots, which is you're able to that's the kind of ideas There's spaces that you can put whatever it is you want into it.

But what if it doesn't have an event handler that you need? Or what if there isn't a slot for what you need? I'm not saying that this doesn't because I just was skimming over it, But certainly could be an issue. But man, they have everything here. Carousel, card, button, button group, badge, avatar. It's pretty much every rid Thing, like you just said, any everything from the open UI. Yeah. As

it's pretty substantial. Right? I I like this a lot. Yeah. Rid I know I've considered using this for Syntax, but Yeah. This looks nice. Yeah. Shout out to Shoelace.

We should do a show on design tokens. Somebody on Twitter was asking,

The hell is it design? Figma killed design tokens yesterday. Did you hear? What what so what did they announce? Oh. I didn't I didn't hear. Okay. So Figma Figma announced a ton of cool stuff like, like a coding, a coding thing that I need to check out before I say anything dumb about That allows you to have a developer mode.

But one of the things that they announced was variables within Figma.

Rid. And they had, like, a slide on their slideshow that said design tokens, and design tokens was crossed out and it said variables above it.

So but it I I saw people building, like, really, really wild interactive frames and stuff within Figma just based on variables. And, rid Yeah.

It really feels like they had variable support.

It it really feels like that Figma could rid Really quickly turned into a visual coding platform, like, very quickly here.

Oh, wow. That's I I was wondering that because they had contacted me to To do like a demo like that we do or and I was. Yeah, I was not. Did did you talk to them? No, because same deal. We were both on. Yeah.

Oh, I I was wondering how long it would take them to do that type of thing. But so the variable does I I'm assuming you can export the variables to CSS variables then. I bet I'd have to imagine. I I didn't watch any of the stuff. I saw the tweets come in.

So I I figured I'm like one of those guys that, like, I'm not going to sit and watch the announcement.

No, me neither.

People like popcorn to watch an Apple event. I was like, I will skim the news for 3 minutes after the fact. I'm not going to spend my whole day watching some

journalists clap for something. I'll have those on in the background, like the Apple ones or any of that stuff. It's just like, like a podcast that I'm listening to. You know, it's like just having on. Yeah. I'm not sitting down focusing for it either. But yeah. Especially, like, any kind of major, like, tech.

Not like tech conference that you're going to a conference, but any tech announcement that's a wannabe kind of Apple presentation. Yeah. I'm definitely gonna rid Skim later. I used to

always stream the Google IO ones while I was working. I haven't done that in a while. Maybe they've got I think For a couple years, they got really they sort of went away from all the web stuff at Google IO.

It used to be pretty heavy on rid Chrome and the browser and and web APIs,

and it went pretty heavy in the, like, Android direction. So I stopped watching all those. Yeah. I I was paying a lot of attention to it when I was a big Android user and then since I stopped becoming an Android user I just yeah. It's totally fallen off for me as well.

Let's talk a little bit about the word headless and and what that means in terms of things. It's funny because It does feel like one of those words that just gets tossed around. Like, what is a headless CMS? A headless CMS is a CMS without a UI specifically.

Right. It's just the data portion of it. What's a headless browser? It's a browser without the, visual aspect of it.

And and maybe those are a key language into understanding this space, right? Because the headless component space should kind of be the component itself or the the headless, the functionality does not include the visual of it. It includes

the functionality of it. Yeah, exactly. Like you think about rid. If you were to run headless WordPress, which people are saying you are opting out of The entire theme system you're opting out of how a plugin might render itself, and you have to then go ahead and rid. Fetch the raw data.

Post the raw data to the back end via mutations.

And then if you want, You hope that maybe, oh, a plug in. Let's say you have an event calendar plug in. You hope that they have some sort of component that you can use to render out.

Rid. It's pretty commonly used when people want to go all in on, like, a single page app or react website.

So then they just use APIs. It's often, like, not worth it for things like WordPress.

Yeah. Because it's like There's so many times where you think like, Oh, I got all of my full control of all of my stuff. I can do everything I like to do in my my React components.

And then you start working and you're like, oh, I gotta do everything. Yeah. I didn't re remember that WordPress does so many things for me. Now I gotta do everything. Current page does not Have a class on it.

Yeah. Yeah, right. There's a lot to it, which is kind of frustrating.

Headless browser is Chrome switched how their headless browser works. Because I was dipping into this a couple of weeks ago with the trying to record video headlessly.

Yeah. And Chrome was like running 2 versions of Chrome, the Chrome version and then the headless one. And then whenever they hit something that was like, Oh, this needs to work in the headless. They had to reimplement it. So they're switching how headless is working, and it's just a single rid. Version of Chrome now, and it could just run without actually having the browser open. That's what that means. Headless Often used with puppeteer or playwright or selenium.

Why am I saying that wrong? That was a big one before headless Chrome came around, which is like it sort of emulated the browser, but it's so much easier to use Literally Chrome. Cypress.

Do it headless. Cypress.

Yeah. So Cypress is a driver, I guess, That will launch different browsers headlessly.

Mhmm.

Or maybe not headlessly if you Not heard headfully.

Headfully at the time does not sound like a,

I I like your idea of calling it boneless. Oh, yeah. Boneless. I I was like, why do we call this headless and not spicy buffalo boneless components?

I guess boneless would be just the CSS and no structure. Right? Because then you get the styling.

You get the outer you get the the outer appearance, but you don't get the structure, the bones.

Yeah.

Skinless.

Rid Hey, Beaneless is we should start calling CSS frameworks, boneless frameworks. That's what they should be. I I think that's very great.

Rid. I like that.

It's a pretty fun area to get into.

People also use headless browsers For web scraping and for I specifically use a headless browser to render out my Open Graph images on my website. So if you share something via Twitter and you see a little image pop up, I'm literally just rendering out a web page, Taking a screenshot and then serving that up as a PNG or something like that.

It's pretty big to run a headless browser If you want to run it in like a serverless function.

I was having some issues lately where Chrome has gone over 50 megs in size, And 50 megs is the limit to a serverless function.

So you either have to compile your own version of Chrome. That doesn't include some stuff that you want. Like WebGL is fairly large, or you have to use, like, an older version of Chrome that didn't cross that 50 meg threshold, which is kind of funny.

What? Yeah.

How did we get here? Yeah.

It's wild, but, like, 50 megs for an entire browser also is pretty amazing that you can you can do all of that.

Yeah. Ready. Alright. Should we move into some sick picks? Yeah. We can do that. Do you have a sick pick for us today, Wes? I am going to sick pick something, a tool That I think everybody should just have on hand is something that is super cheap and super handy, and that is a pair of digital calipers.

So calipers are those. Oh, man. You got to grab a pair. So calipers are just like a simple little measuring thing where If you want to know, I'm specifically talking about this because Scott and I are working on our camera rigging setups, and I've been trying to figure out different sizes of pipes that will connect with my existing monitor arms.

And I always want to know, like, what is the inner diameter of this pipe and what is the outer diameter of this pipe? So I measured. I grabbed my calipers.

You just use your thumb to open and close it, and you can measure the inside and the outside. Same thing if you have, like, a bolt or like, literally, if you want to know how thick is this piece of plywood or I need to level these items, rid. A pair of calipers are gonna give you to the millimeter. Or if you're a yank, you can grab you can grab inches and fractions. You find the common denominator like some sort of psycho.

But it's so easy to be able to just measure things around your house. And I can't tell you how often I just grab a pair of calipers to be able to figure out rid The size of something. And then I literally took my calipers to Home Depot. I was just wandering around the aisles measuring pipes and see how big things were.

And I was like, I never would have been able to do this with a measuring tape because it's not precise enough and it's a circle. How do you know you have it perfectly centered in inside the pipe? So go grab a pair of digital calipers. I just have a cheap Amazon one. You can get highly, highly calibrated ones. But quite honestly, unless you're doing like machining or something like that where you need it down to the not to the millimeter to like. Yeah. So the Adam, you don't need a super high pair. Just grab rid. A $20.10.

I think there's even some on Amazon for $14 Canadian, which is, like, 10 Canadian.

Definitely handy. Hide your pipes. Wes is, coming to measure them.

I'm going to shamelessly plug here, or not shamelessly plugged. I'm going to sick pick a podcast.

Those of you out there, you know, I I know there's, like, a lot of websites like Reddit or Hacker news where people can just like really spend way too much time on them getting into the comments or trying to, stay up on it or check it every day. And as somebody who doesn't love reading in general, I found, thanks to Swix had tweeted about this podcast. It's called the Hacker news recap and it's from WonderCraft AI.

So if you want to get into the wild Wild world of an AI generated podcast.

The Hacker News recap I found actually to be a really good version of an AI podcast and what it is is it's basically a recap of the day's events On Hacker News. Here are the top posts and what it does is it goes through the top post. It summarizes the top post And then it summarizes all of the positions taken in the comments.

And it does so very quickly in a way that's not annoying Or a way that doesn't it makes you feel like you understood essentially the big picture. So it you know, it can be, Here's the the latest Reddit drama. Right? And here's the comments some comments were saying that this and this were this is the case and other comments were saying that the ready. Reddit mods were because of these reasons. So it presents all the sides to the arguments. You can hear all of the sides to any arguments that take place in hacker news things without having to read them all and rid filter through whatever, but it it takes all the top comments, top posts, and summarizes them via AI. And I gotta say, rid Really, really actually enjoyed this thing, and I I do listen to it every day. I I think it works

well. And, actually, This entire podcast Scott and I did today is generated by AI. Fake. Totally fake. I didn't say any. I didn't know that. Just joking. Yeah.

Rid. That the audio the, like, the the text to speech

is so good. Same with the have you tried the New Spotify AI? I don't I don't know if we have it in the states yet. Just popped up, like, 2 days ago here. Let me see let me see if rid. Can pipe in some examples of it because Is it the the AI DJ? Yeah. Is that what it is? Yeah. I heard somebody on Twitter saying, when is the US going to get the AI DJ? So I I don't think I don't see any major fan. Canada has beat the US.

Let me pipe in my Spotify,

and I'll show you What it sounds like. I would like an AI DJ that you could control the DJ voice too. Cool. Not feeling it. Let's change it up to a little stretch of sorority noise. Oh, this is it?

Rid I need to remind you That was the AI based voice? Ready? I'm gonna click it again. I was thinking Okay. We're changing it. Next, I got some new songs and maybe a few details that you haven't checked out yet, But I think you'll like them when you do. Jesus, peace up first.

Oh my gosh.

Up next, rid. It's time for a vibe, and that vibe is cozy cooking, starting with Nathaniel Rate Lafund the night sweats.

What?

Cozy cooking? That's the, I'm already

already over the ass.

You You know what it might be? Is my my wife sometimes our our Google Homes are hooked up to my Spotify. So every now and then it will be like, here's Flippy or something like that. I'm like, no. Can we turn that off? We have a, dinner playlist

because we don't do, like, TV. Like, some people do. We used to do TV when I was a kid during dinner, but we do. Yeah.

I I have, like, a really weird thing with mouth noises and stuff, so I have to have some sort of sound going. And since We don't have the ability to have done I I just have the whole house wired with Google Homes. Yeah. And I have, like, a dinner playlist that will always rid Play automatically every day at 5 o'clock. Oh, that's great. It just automatically turns Yeah. That way we just have music around the house. I'm gonna do the, Hacker News recap

Voice.

Fusion.

Furthermore, international IP laws And the enforcement of these laws were discussed in relation to the economies of different countries.

The users

It even has a a breath, like, to make it sound real. What are they using to do that? Because my text to speech has just been like,

like Siri, you know? This is from WonderCraft AI.

Wondercraft wondercraft.ai and their whole thing is, AI podcast. That's their entire product. The first ever end to end Podcasting tool, AI voices, hosting, script generation show notes, and video content all from Who knows what? Nothing. Publish a podcast without doing a gosh darn thing. Who cares? I I think For most use cases that makes me really upset and I hate the idea of it. But for summarizing hacker news, rid. Like, hey. I don't that's saving me time. I can put it at 2 x and get an idea of what's going on at Hacker News or even, like, what the latest stuff is that's come out or what the drama is. You can rid Clone your own voice with it.

Yeah. Wow.

Wow. Wow. Pretty neat.

Rid I'm I'm surprised at how good the the audio is. I love the the Spotify one. It's like and that's one thing I miss about listening to the radio. It's just, like, rid. Every 4 or 5 songs he comes in and says, alright. Let's switch it up to something you were really stoked on, like, 4 months ago. I haven't listened to recently.

Rid. It's kind of nice, you know? Like, I almost wish you would, like, give me the weather and do a little bit of drive time comedy, you know? Yeah. A little dry. Yeah. Maybe take a call or two. One thing rid is in 90% of households.

What is it? And then he, like, comes back 3 things later and tells me Yeah.

Rid. The the AI that you could have, like, let's let's take some calls now, and then you could have AI generated calls. Like, hey. I I like that last song. You were thinking about it.

Rid.

Oh, that would be great. That would be great. So It's all totally stoked about scary, bud. Rid Let's move into shameless plugs. I'm gonna plug my courses westboss.comforward/courses for For a list of all my web development courses, use syntax for $10 off any of the paid ones. Sick.

I'm going to shamelessly plug Century as century.iosentry.

Io. You know what? This podcast Yes. It is currently owned by Century, so I'm obligated to say nice things about them. But I've been saying nice things about them Long before I Yeah. Was employed there or long before Or they gave us our 1st dollar yet. Long before. Yeah. I've been using this tool For a very long time, and I gotta say it's one of the most consistently evolved and updated and constantly improved tools in my entire Toolbox. The like, honestly, they they they could have, like, sat down and said, alright. We have a really good error tracking product, And let's just leave it at that. But they, like, constantly are innovating things. I I mentioned in the last episode where I talked about this, there was, like, a Little CLI tool to add it to the new syntax site which is a Sveltekit site and it was like a 2 click thing. Hey, run this command, run this wizard. It automatically added all of the API keys correctly to the the application. It added the the code directly to my hooks file so I didn't have to do anything. It installed all the dependencies and I was just like, alright, you're basically good to go. And I pushed it up and it was ready in no time. They have they have, like, just such exquisite adapters, CLI, wizards, and all sorts of things for a 109 different supported platforms.

I mean, it's it's absolutely wild the amount of stuff that this supports The amount of stuff you can do with this. So if you're shipping any product that's hitting end users, Sentry is the tool that you need to make sure That your users aren't getting errors, that if there is any sort of error that's going on, that you're able to fix it and solve it quickly with all of their tools, or you can debug rid.

Issues be long before they even happen or even like Cron jobs, anything like that. So check it out. Century. Io. Use the coupon code tasty treat, all lowercase, all one word, and you won't be disappointed. It's one of those tools that I, you know, I've long admired and now get to work for. So,

Yeah. Thanks entry. Alright. That is it. Thanks, everybody, for tuning in. We will catch you on Friday. Peace.

Head on over to 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.

Rid.