What are Headless Components?

So if you were to throw like a use action on a DOM element, Mhmm.

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 Right. It's just the data portion of it. What's a headless Cozy cooking? That's the,

of

do more of the accessibility concerns for us or let the browser do more for us.

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

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

that could be a way of doing headless components granted it's it's

Rid. Exactly. And to be clear, it's not a set of, like,

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

but Rid.

rid. You need full control over that. You want to style it how you want. You want to create your own it

And it was the best because

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.

before.

Is

And all of the event handlers, all of the Dom So headless components will give you all of that for free.

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

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

And again, it's headless because you are saying, 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,

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

Let's go through some examples tables and data grids. That's TanStack Table.

Yeah. The select menu and actually, Wes, I wrote a, headless action or whatever for 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

how the autocomplete is being rendered, what's being highlighted. And you want like when somebody selects one of those values,

Like in forms

that fires an event, a custom event If the current node is not clicked on,

And it would also give you active classes.

So they they think the ideal use case or the semantic use case for select menu is very specifically very basic web components Or things like what we talked about in the open UI

All you have to do is slap this sucker on a div that you Cambodia for accessibility drop down pickers, date and time, overlays,

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

on select.

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

change the value of something,

And what that is going to do is put a event handler basically Let's talk a little bit about the word headless and and what that means

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.

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.

if you need to create some sort of autocomplete

library. And Svelte says, alright, well, here's a function that does all the heavy lifting for you.

I have a list of just things that Headless UI provides Rid It's freezing.

rendering hooks on when to re render large element lists. So if you have a list of

drop down, Headless browser is Chrome switched

So they're building out button, and it's a circle. How do you know you have it perfectly centered providing additional options where you can sort of fuzzy search and start to add it could just run without actually when you do stuff like that, I also had this when I was doing drag and drop, is

of select menu components, It's really hard to build custom components Versus Code is only rendering the lines of code that it knows to be

this is literally an HTML tag

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 the what it actually looks like. And that's really cool custom selectors that you can now choose.

Work without having to write any JavaScript. Yeah.

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 What? And then there's adapters Right. And then there's the Call box developer edition is not responding.

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

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.

is totally different.

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.

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

tracking stuff are just functions.

theoretically,

But Yeah. If you if you've never been through a really wild hailstorm, It hits really hard and And and maybe those are 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.

which is like an awesome component for rendering out tables and current class selected values on select callbacks, all of that good stuff

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.

ready. Tanner 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 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 inches and fractions. You find the common denominator like some sort of psycho.

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 approach a really good version of an AI podcast 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 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

or headless UI. What is it? Why would you ever want a headless component? My mind was blown. I was talking to Garage. No kidding. I just got back the other day. I went to the Tailwind Connect event, because I just was So then they just use APIs. It's often, like, when you're doing a drop down like this. 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, does not include

at Reactathon the initial render is really slow.

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

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.

Welcome the bones that you have, and then you can go

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

And he was talking to me about his

about a month ago, super powerful drop down that is fully accessible as well. Yeah. You know what this reminds me of 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.

react table or not even react table. His table tan stack table, 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.

rid. A pair of calipers are gonna give you to the millimeter. Or if you're a yank, that

plug here,

that you can you can do all of that.

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

machining or something like that where you need it down to where 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 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.

But it's so easy to be able to just measure things around your house. And I can't tell you how often are being built in here, which is really cool that they this is 80% of what I want,

So calipers are those. Oh, man. You got to grab a pair. So calipers are just like a simple little measuring thing where This is like a tailwind library

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

grab you can grab People also use headless browsers could be an issue. But man, they have everything here. Carousel, form 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

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

If you want to know, I'm specifically talking about this because Scott and I are working on our camera rigging setups, is if you're filtering, you type in USA.

It's wild, but, like, 50 megs for an entire browser also is rid. Fetch the raw data.

I'm going to shamelessly

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, or headless components provide. It's obviously the functionality, full functionality,

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.

and I've been trying to figure out event handler that you need? Or what if there isn't a slot You click on it. You have a list of all your countries, And that's,

rid. A $20.10.

if you want to know how thick is this piece of plywood or

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,

the not to the millimeter to like. Yeah. So the Adam, you don't need a super high pair. Just grab

I need to level these items,

monitor arms.

as to who's authoring them because there certainly are like a handful

Let's think. No.

the API and searching and all that kind of stuff. And he's like, the whole thing is headless. I was like, how do you build? gives them for you.

Just do it in web components.

Yeah. I know. Right? Like, we keep asking that question is

menu box select menu being done in web components? Yes, it is. Okay. So, like, like,

whatever it is that they are using. Like, I would imagine that it would make sense how much of this code base is not react focused. Right. It's probably a lot of event listeners those different values there.

if it was just all that in a web component,

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

to maybe even build some of the stuff in web component. Is the

And and there's all this stuff does kind of feel like,

alright, but

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.

You want to have hidden values.

like telephone code. Plus 1 is North America, and plus 43, I think, is

Maybe you want to put, like, the countries,

use your arrow keys.

what is necessary are components for

Austria.

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?

Or what if it's just United States? accessibility event handlers, getters and setters. So if you want to programmatically

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

stuff that needs to be that needs to happen. So actually, I wanted to just Give a quick little example of just in JavaScript.

And that That's not even including all of the accessibility

What's 43? 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.

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

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 Yeah. Yeah, right. There's a lot to it, which is kind of frustrating.

Oh my gosh.

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

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.

AI podcast. That's their entire product. The first ever end to end Podcasting tool, AI voices, hosting, script generation show notes,

Toolbox. The like, honestly, they they they could have, like, sat down and said, alright. We have a really good

Sentry is the tool that you need to make sure That your users aren't getting errors,

And don't forget to subscribe in your podcast player Who knows what? Nothing. Publish a podcast without doing a gosh darn thing. Who cares? What? Yeah.

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,

evolved and updated

and constantly improved tools in my entire

AI.

The users

my text to speech has just been values in there. There's another example on here. So

Rid.

Voice.

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

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

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.

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

I'm already

Century,

Yeah. Wow.

and video content all from

Wondercraft

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

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.

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

real. What are they using to do that? Because unstyled, 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.

Fusion.

to make it sound

Wow. Wow. Pretty neat.

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 This podcast Yes. It is currently owned by the library 4 different ways, you're supporting the core library once and then It's the adapters which are most likely much smaller

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

Head on over to syntax.fm This is done by Corey

You You know what it might be? Is my my wife sometimes How many? A lot.

Io. You

already over the ass.

Or drop a review if you like this show.

for a full archive of all of our shows.

For a very long time, and I gotta say it's one of the most consistently rid. Fully customizable

know what?

like option and item and whatnot.

and much smaller things to have to worry about supporting which

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

And I'm a big fan of that. Yeah. I you know, and it makes it so instead of having to support CLI, wizards, and all sorts of things for a 109 different supported platforms.

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.

both React and Vue components driver, I guess,

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.

or playwright drop down component

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.

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 if you want, However, they're just I was having some issues lately where a whole bunch of stuff and where you have to worry about updating and whatnot. Similar to how, like, WordPress themes worked

how their headless browser works. Because I was dipping into this a couple of weeks ago with meaning that Yeah. Thanks entry. Alright. That is it. Thanks, everybody, for tuning in. We will catch you on Friday. Peace.

Rid. It's pretty commonly used when people want to go for For a list of all my web development courses, use syntax for $10 off any of the paid ones. Sick.

all in on, like, a single page app or react website.

rid. Version of But certainly 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

having the browser open. That's what that means. Headless Often used with puppeteer

Chrome now, and and re rendering it. And that gives you nice, snappy, fast scrolling what the answer to that is. I guess that you don't have to use web components.

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 ran into was using Downshift Then you're sitting there being like, well,

frames and stuff within Figma just based on variables. And, You get the outer you get the the outer appearance, but you don't get the structure, the bones.

We should do a show on design tokens. Somebody on Twitter was asking, that is similar to a select, That will launch different browsers headlessly.

the functionality

Because the headless component space should kind of be episode where,

the visual of it. It includes of web component like things here

the,

1st class React supports built in localization.

the component itself or the the headless,

It it really feels like that Figma could

a key like Siri, you know? This is from WonderCraft

People like popcorn to watch an Apple event. I was like, I will skim 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, and maybe the 3 before and the 3 after. And then as you scroll, it's literally

the reason why a tool library Meaning that down. And the browser does all the accessibility, rid. I guess theoretically, then you could you could build them as web components and then just open up the Let's look it up.

No, me neither.

It used to be pretty heavy on rid

visual aspect of it.

this space, right?

a coding thing that I need to check out before I say anything dumb about That allows you to

headless goes a little bit further than something like this is

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.

browser? It's a browser without

that's the kind of ideas

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.

they sort of went away from all the web stuff at Google IO.

built with accessibility

at their core, wondercraft.ai

rid. Here to the show notes,

which people are saying you are opting out of or

Oh, wow. That's I I was wondering that because they had contacted me to To do like a demo

what if it doesn't have an to Syntax, the podcast with the tastiest web development treats. Today, we're talking about headless components 735 rid. If you were to run headless WordPress,

the news for 3 minutes after the fact. I'm not going to spend my whole day watching some

a forward thinking library of web components that are, one, works with all frameworks,

into understanding 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.

and you have to then go ahead and taking those ones out So very scary. It is wild. How long until you can't get insurance in Colorado anymore? Rid. So everyone's cars And my favorite part about it was,

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.

So but it I I saw people building, like, really,

have a developer mode.

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

Figma announced a ton of cool stuff like, like a coding, Compared to something like web components as a technology.

rid. It says it's fully customizable with CSS. So meaning that, like, yeah, you can select anything

rid Really quickly turned into a visual coding platform, 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,

card, button, button group, badge, avatar. It's pretty much every

The entire theme system you're opting out of Chrome and the browser and and web APIs, And 50 megs is the limit to a serverless function.

with CSS

really wild interactive

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 I think maybe we could drill a little bit more into, like, what kind of functionality? 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,

within Figma.

It really feels like they had variable support.

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 premade components it's only react based,

like, very quickly here.

But

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

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.

So I I figured I'm like one of those guys that, like,

language

Shoelace dot style. I'll paste it in

in mind.

There's spaces that you can put whatever it is you want into it.

I'm not going to sit and watch the announcement.

Do it headless. Cypress.

I guess boneless would be just the CSS and their whole thing is, it falls down very quickly. It it's very wild experience. So thanks to Swix had tweeted about this podcast. It's called the Hacker news recap But Yeah. Nobody's Does anybody wanna do that? Yeah. Nobody

Chrome has gone over 50 megs in size, You have to announce anytime you go outside of your default But what if they put it as United States of America? components. You want to use your own divs, your own CSS classes. But But you also want to be able to have control over

So you either have to compile 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

If you want to run it in like a serverless function.

It's pretty big to run a headless browser 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 navigation, Rid. Some of them are

or you have to use, like, an older version of Chrome that didn't cross that 50 meg threshold, which is kind of funny.

How did we get here? Yeah.

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?

before headless Chrome came around, which is like it sort of emulated the browser, but it's so much easier to use And it brings none of the HTML. It brings none of

PNG or something like that.

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, and see how big things were.

at the time does not sound like a,

Or maybe not headlessly if you Not heard headfully.

Yeah.

and no structure. Right? Because then you get the styling.

Skinless.

Headfully what web components do well.

your own version of Chrome. That doesn't include some stuff that you want. Like WebGL is fairly large, And I was like, I never would have been able to do this with a measuring tape because it's not precise enough Rid. I think people just want to use rid. For Solid and for React and for Svelte. And all of his packages go this way, which is unless you're doing like Why aren't people using web components? Have you ever seen a shoelace? Shoelace.

Taking a screenshot and then serving that up as a for you, the developer, why they are awesome for accessibility that are also accessible.

Customize it all that much. And it's kind of frustrating

Right below should just have on hand is something that is super cheap and super handy, and that is a pair of digital calipers.

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

but I want to be able to add

that there's always this major trade off after party, they have, like, 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, 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.

in Cameroon or something like that.

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.

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

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 for what you need? I'm not saying that this doesn't 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, And I was like, who from Hamilton wants to,

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

and then you can click your country. Right. The

give you like a set of premade UI components which you can then start to 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 sorting

completely void of any specific style. So again, it gives you the functionality, on the screen. So virtualization It even has a a breath, like, Yeah. So Cypress is a 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,

from there on out JS, which is the React component for creating like with options inside of it. So you have a select, you have options, and they have a bunch of examples different

this as being a concept

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

have functionality.

provide

These things are Allowing you to use markup to

initial styles.

tweak and whatnot without having to like import

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 That I think everybody gives you I specifically use a headless browser to render out

as a component, the browser.

That's a good question.

components.

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 was a good one. I really like rid Thing, like you just said, any everything from the open UI. Yeah. As you use these components

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

But it also will give you in this case, it gives you all the markup,

I don't necessarily know But all I had to do is hook up the on key up on key down

Web components

all of the different

built in functionality The select menu to a target.

classes. If you're using Tailwind, you add your Tailwind classes,

HTML elements and JavaScript

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, the first example I ever it will give you that different sizes of pipes that will connect with my existing

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

Announce when things change. If you're building your own sort of drop down, base, like, maybe you don't get this because the United States is almost always at the off of these drop downs.

and I am currently hovering over top of it. I'm gonna hit my enter key.

you're giving up all the accessibility that's built into a lot of those things, and you need to be able So for me, Canada is rid.

select items, But 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 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,

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

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

Dog. Dog. Selected. 2 of 3.

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

so I'm going to open it.

Favorite animal dog.

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

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.

agnostic, which is really cool,

which I get it for the ambiance, but

rid. But

the they did a lot of stuff in the event that was nice. There was no music,

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

literally anything. Could be, yeah, could be Svelte, could be View.

So Headless components and then some of them are specific to

or there's like a VIP rooftop party, and it was so loud. And not that I I really I really don't mind, one of the things that they announced was variables a popover because there's a whole new pop. So select menu includes is like a

speakers the size of, like, a house just blasting music and you can't even hear anyone or they have a live band, It's a pretty fun area to get into.

and you either get all of the functionality for free, all of the accessibility for free.

rid. I don't know if I'm old, but I just want to talk to people at conferences, And then it looks like they will also To fully understand the beauty of Select menu, I'm going to put a link in the show notes to Microsoft Edge. GitHub. Io,

React or View or Svelte or something like that. So

they are components that bring all of the functionality, He has TanStack Virtual, which is a headless UI for virtualizing For web scraping and for

like, carpool in an Uber? And I jumped into really cool

big fan of the podcast. And we chatted about you have to Lindsley. I always goof up his last name the trying to record video

the Slack rid of this or the discord for the conference.

like, I needed a ride out to Cambridge, like, 45 minutes.

All kinds of met met tons of syntax listeners there. It was pretty cool event.

rid, which was in Cambridge, You might want to show text on the screen, but the value of that actual input 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.

Nice. Sick. Yeah. Wish I could have been there. Ready. Yeah, it In fact, after, like, big hailstorms,

Or a way that doesn't it makes you feel like you understood essentially the big picture. So it you know, it can be, rid Yeah.

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? Like, what's the intersection here between web components and headless

AI.

The Hacker News recap I found actually

the text to speech the functionality of it. Yeah, exactly. Like you think about Literally Chrome. Cypress.

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.

to be 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

all of the positions taken in the comments.

And it does so very quickly in a way that's not annoying tech.

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

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

and

I found,

the audio the, like, the selenium.

So

stay up on it or check it every day. And as somebody who doesn't love reading in general,

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

what it is is it's basically a

Let me pipe in my Spotify, I could not tell you any of these. Country code,

and it's from WonderCraft

Which is you've got to think 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.

rid in the Dom. It's probably a lot of just refs. So I wonder.

All of the sliders that you might be used to where you can start and stop checkboxes

rid.

So Tanner Lindsey has a headless UI for building

Pretty much all of the major components of building an application

are doing this. The only like 1 bummer, I think, how a plugin might render itself,

is that

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

these elements heavy lifting arrow functions,

Versus Code does this. If you have 10,000 lines of code, like blasting, which is, you know, you go to conference and then pretty amazing

of people. And in each Div, there's probably, Rid. That skimming over it, Why am I saying that wrong? That was a big one 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, not worth it And that's because there's how headless is working, and it's just a single

that it is agnostic

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 to do that. And that example didn't even have, like, a filter where I was typing in some sort of

from whatever library you're using.

more smooth and buttery. So all of these 10 stack ones are written Something's fine for me. Date packer is fine for me. So I want to give an example of, like, a customized country for things like WordPress.

in 10stack virtual will figures out how big Post the raw data to the back end via mutations.

rid 50, 60 spans and links and buttons and all of that stuff. Right. It's just really slow. Rid. There's But then you can't really rid Because it solves the problem of, I want And Rid. I like that.

where sometimes you could get like if you go to the uses. Tech website,

And all you have to do

drop downs.

rid HTML.

HTML. So You're gonna have to be able to learn

Yes. Exactly.

is it's like when you go to a barbecue and you just bring a salad, you know, like, it's the most low you can So, like, the big one with United States of America But If you think about like the speed