Skip to main content
636

July 5th, 2023 × #headless#accessibility#components

What are Headless Components?

Scott and Wes discuss headless components - reusable components that provide functionality without any UI. They talk about various headless component libraries, building accessible components, using headless WordPress, running headless Chrome, and more.

or
Topic 0 00:00

Transcript

Announcer

You're listening to Syntax, the podcast with the tastiest web development treats out there. Strap yourself in and get ready. Ready. Here is Scott Talinski and Wes Boss.

Wes Bos

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

Scott Tolinski

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.

Scott Tolinski

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

Wes Bos

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

Scott Tolinski

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

Scott Tolinski

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

Wes Bos

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.

Topic 1 02:33

Wes talks about hailstorm damage in Colorado

Wes Bos

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

Wes Bos

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.

Wes Bos

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.

Scott Tolinski

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

Topic 2 03:27

Wes discusses the Tailwind Connect conference in Cambridge

Wes Bos

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,

Scott Tolinski

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.

Wes Bos

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

Wes Bos

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.

Wes Bos

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

Topic 3 05:39

Wes explains the struggle between functionality and customization with built-in browser components

Scott Tolinski

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.

Scott Tolinski

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

Wes Bos

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.

Scott Tolinski

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

Wes Bos

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

Wes Bos

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.

Topic 4 07:41

Wes gives an example of customizing a country dropdown component

Wes Bos

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.

Wes Bos

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.

Wes Bos

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.

Wes Bos

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

Wes Bos

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

Wes Bos

You want to have hidden values.

Wes Bos

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

Wes Bos

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.

Wes Bos

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

Topic 5 09:16

Wes demonstrates accessibility features of dropdowns using VoiceOver

Guest 4

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

Guest 4

Favorite animal dog.

Wes Bos

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.

Wes Bos

Rid It's freezing.

Guest 4

Dog. Dog. Selected. 2 of 3.

Wes Bos

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.

Guest 4

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

Wes Bos

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

Guest 4

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

Guest 4

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

Wes Bos

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.

Wes Bos

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

Topic 6 10:49

Wes explains headless components provide accessibility for free

Wes Bos

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

Scott Tolinski

rid HTML.

Wes Bos

Yes. Exactly.

Wes Bos

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.

Topic 7 11:35

Wes introduces Downshift as an example of a headless dropdown component

Wes Bos

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.

Wes Bos

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.

Wes Bos

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

Wes Bos

And it would also give you active classes.

Wes Bos

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.

Wes Bos

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

Scott Tolinski

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

Scott Tolinski

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.

Scott Tolinski

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.

Wes Bos

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.

Wes Bos

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.

Scott Tolinski

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.

Scott Tolinski

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.

Scott Tolinski

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.

Wes Bos

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

Scott Tolinski

before.

Scott Tolinski

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

Wes Bos

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.

Wes Bos

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.

Wes Bos

And that's,

Scott Tolinski

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.

Wes Bos

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

Scott Tolinski

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.

Scott Tolinski

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.

Scott Tolinski

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

Wes Bos

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.

Wes Bos

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.

Wes Bos

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

Topic 8 19:23

Wes mentions Parcel is building headless components

Wes Bos

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.

Wes Bos

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

Wes Bos

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

Topic 9 20:11

Wes talks about Tanner Linsley's TanStack table and virtualization libraries

Wes Bos

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

Wes Bos

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.

Wes Bos

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

Wes Bos

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.

Wes Bos

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.

Topic 10 22:04

Scott notes the benefit of TanStack being framework-agnostic

Scott Tolinski

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.

Scott Tolinski

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.

Wes Bos

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

Wes Bos

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.

Topic 11 23:00

Wes says Headless UI provides unstyled components

Wes Bos

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.

Wes Bos

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

Scott Tolinski

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.

Scott Tolinski

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

Scott Tolinski

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

Scott Tolinski

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

Wes Bos

That's a good question.

Wes Bos

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

Wes Bos

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

Topic 12 25:08

Wes and Scott discuss why headless components aren't built as web components

Scott Tolinski

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.

Scott Tolinski

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

Wes Bos

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.

Wes Bos

Just do it in web components.

Scott Tolinski

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

Wes Bos

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.

Wes Bos

Let's think. No.

Topic 13 26:32

Wes introduces the Shoelace web component library

Scott Tolinski

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.

Scott Tolinski

1st class React supports built in localization.

Scott Tolinski

This is done by Corey Levitzka.

Scott Tolinski

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

Wes Bos

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.

Wes Bos

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

Scott Tolinski

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.

Wes Bos

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

Scott Tolinski

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.

Scott Tolinski

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

Scott Tolinski

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.

Scott Tolinski

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.

Scott Tolinski

It really feels like they had variable support.

Scott Tolinski

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

Wes Bos

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.

Wes Bos

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.

Scott Tolinski

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

Wes Bos

No, me neither.

Wes Bos

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

Scott Tolinski

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.

Scott Tolinski

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

Wes Bos

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.

Wes Bos

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

Scott Tolinski

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.

Scott Tolinski

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.

Scott Tolinski

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

Scott Tolinski

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

Wes Bos

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.

Topic 14 32:31

Wes explains using WordPress headlessly

Wes Bos

Post the raw data to the back end via mutations.

Wes Bos

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.

Wes Bos

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

Wes Bos

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

Scott Tolinski

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.

Scott Tolinski

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.

Wes Bos

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

Wes Bos

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.

Wes Bos

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.

Topic 15 34:11

Wes talks about running headless Chrome in serverless functions

Wes Bos

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.

Scott Tolinski

Do it headless. Cypress.

Wes Bos

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

Scott Tolinski

Mhmm.

Scott Tolinski

Or maybe not headlessly if you Not heard headfully.

Scott Tolinski

Headfully at the time does not sound like a,

Wes Bos

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?

Scott Tolinski

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

Scott Tolinski

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

Scott Tolinski

Yeah.

Scott Tolinski

Skinless.

Scott Tolinski

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.

Wes Bos

Rid. I like that.

Wes Bos

It's a pretty fun area to get into.

Wes Bos

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.

Wes Bos

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

Wes Bos

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.

Wes Bos

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.

Scott Tolinski

What? Yeah.

Scott Tolinski

How did we get here? Yeah.

Topic 16 36:18

Scott and Wes joke about ridiculous browser sizes

Wes Bos

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

Wes Bos

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.

Wes Bos

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.

Wes Bos

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.

Wes Bos

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.

Wes Bos

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.

Wes Bos

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.

Wes Bos

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

Scott Tolinski

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

Scott Tolinski

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

Topic 17 39:02

Scott sick picks the Hacker News Recap podcast

Scott Tolinski

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.

Scott Tolinski

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

Scott Tolinski

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.

Scott Tolinski

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

Wes Bos

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.

Wes Bos

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

Scott Tolinski

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.

Wes Bos

Let me pipe in my Spotify,

Scott Tolinski

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?

Topic 18 41:38

Wes and Scott listen to Spotify's AI-generated playlists

Guest 3

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.

Scott Tolinski

Oh my gosh.

Guest 3

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

Wes Bos

What?

Scott Tolinski

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

Wes Bos

already over the ass.

Wes Bos

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

Scott Tolinski

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.

Scott Tolinski

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

Wes Bos

Voice.

Guest 5

Fusion.

Guest 5

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

Guest 5

The users

Wes Bos

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,

Scott Tolinski

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

Scott Tolinski

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.

Guest 3

Yeah. Wow.

Wes Bos

Wow. Wow. Pretty neat.

Wes Bos

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.

Wes Bos

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.

Wes Bos

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

Scott Tolinski

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.

Wes Bos

Rid.

Wes Bos

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.

Scott Tolinski

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

Scott Tolinski

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.

Scott Tolinski

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.

Scott Tolinski

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,

Wes Bos

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

Scott Tolinski

Head on over to syntax.fm for a full archive of all of our shows.

Scott Tolinski

And don't forget to subscribe in your podcast player Or drop a review if you like this show.

Guest 3

Rid.

Share