Hasty Treat - Stylin the Unstylables

Custom elements in journal. What do they call those? C s or, I keep on HTML components. Is that what they're called now? Shadow DOM components. Shadow DOM. Yeah. But what do people call them call them? Oh, web components. Web components. Yeah. I couldn't think of that. I don't know why I didn't think of it. Either way, this is the this is basically

and that is the shadow DOM, which is inaccessible. This is The pieces that make up the larger element that you're using.

So what do we do here? What do we do with these elements that don't have things that we can access? but And, yeah, this is the way you gotta do it. This is how we basically do everything nowadays, unless, of course, we're rebuilding it from scratch in JavaScript.

just about anything in HTML that is a complex element. What you'll see is a shadow,

And this is sort of the whole basis around

the hood, Syntax, give it a check out and see the magic.

The shadow DOM is not necessarily easily Stylable.

element. I think there's, like, a list of Select drop downs, checkboxes, radio buttons, date color pickers. So, basically, they wanna what they're doing right now is they are documenting If you're just overlapping them, you can use pointer events none.

spans or or actual button elements that go on top and below.

Yeah. Woo hoo. I wanna be able to to style everything,

You can overlap And and that you want them to do something else. And the big like, a a regular input type of text is fine, though that one you can pretty much do everything you wanna do. But if you wanna style the input type of date or you have a checkbox with a radio button that you want to look custom, and they they're awful. You mean to tell me they got a skeleton in there? I was really happy to see skeleton in there. I and I bet I bet Once they've standardized this, then they'll go to the browsers. Nicole works for Google.

Checkboxes where you physically are styling a before and after property to maybe use maybe, like, your own custom checkbox. I've done it It's like animated a little check or you're creating these boxes, but it's all relying on

you can't use it on because Because they are shadow DOM. Right? Well, before and after inserts

but you're just adding a little bit of Frills on and around it, which is it can be nice. Yeah. It's

and select and checkbox and radio, and they are very hard to style. Some of them, You can provide, like, accent color, I think, is one that is coming to the browser. Will you be able to at least specify what the accent color is? Woo hoo.

So you can do this to then have your own custom

Specifically, like yeah. Their inputs,

Those are the 2 big things in the browser, and I'm I'm not even sure if there are more. Maybe maybe the details element in HTML. But, basically, we have these defaults f. In there, and there's a little bit you can style, and there is a lot of it that you can't style. And if you want it to look a certain way or have Yeah. Input type of file. Like, imagine there would be one where you could preview the image that you've selected like such a simple thing. Styling a tooltip.

I think I think HR can have a

at the very basics. I've I've sort of rattled off a little list of CSS properties here that you could possibly style on these things. And, generally, it revolves around font size, color, padding, margin, Ants. Yeah. There's nothing you can do to style those things to make them bigger or change the color, thing, every little browser bug because this stuff can be really, really finicky, super super nice. We use it in one of my my Gatsby course specifically because I liked it so much, not because They're a sponsor of this. So check it out. Sanity dot I o forward slash syntax. That will give you double the free usage tier. We're also sponsored by LogRocket. LogRocket.

past that, if you want them to look good

last ditch effort am I gonna be using JavaScript to do anything Fancy there. Yeah. As much as it sucks to style

kind of rip. It's kind of goofy, right, if you think about it because here we have this checkbox x. And what we're saying is, hey. How about let's not show the actual checkbox, and let's, like, create a fake one. And then we can kind of style it and

input type of number. When you use input type of number, you get these tiny little arrows like arrows for ants.

that is actually good. There is 1 built into the browser for suggestions. Yeah. But it's it's not very good. Like, you don't have full control over over that type of thing. That's we I asked on Twitter, like, what is something that you want you UI. Chakra. Chakra.

those are still maintained,

labels, something like that that's wrapped around it, and then you can The built in native ones or and this is the next one is just use an existing UI library because there are switch,

it's it's so so annoying, some of the things that you have to do To get just, like, basic styling of things that, you know, feel like they should have been stylable from day 1, but, you know, here we are. Right? It's been this way forever and ever and ever. There there's a, you know, select list too. The select list has some things that you can style in it, and then, like, a lot of it, you can't. And, typically, you'll find people just, like, rewriting this from scratch, which is a whole another way that you could do this is to reimplement everything in JavaScript yourself To have your own list of of potential select things maybe that you're selecting from and have, like, a fake input. And, by gosh, I've done this before, and it just doesn't it's not a lot of fun to maintain. It's not a lot of fun to have, you'll typically see if you if you pop open your browser, you inspect

Yeah. In the past, what I've done is either using before or after. Before and after doesn't work on every

A before and after now that I think about it, but a lot of the input cannot. So if that's the case, just wrap it in a div or a span or or use the wrapped,

On top of these inputs to make it look like it's custom. Have you done that before? Yeah. There's a lot of different strategies for doing this, but, typically, I I'm using, like, before and after insanely painful to try to CSS in HTML. HTML.

toggles, autofill.

that are Tune very finally for mobile. And if you get into a mobile case and you click on a drop down and it gives you some, like, really crabby drop down selector that somebody wrote themselves in JavaScript, It's not gonna be a lot of fun for your users, and that's not super accessible typically anyway. So Video replay.

benefits that come keyboard media elements.

suggestion, People would just be like, okay. But I wanna be able to do x, y, and z. Right? And I think that's where web components outline, focus styles, and borders. And past that, there's not a whole lot you can do to actually style these things.

Things like that. So at the very basic, we have input input elements, JavaScript that you can write to implement it and pull it in and and listen for changes,

especially when there is a select list Component out there, one that is, you know, nice as it is. And, also, one reason you shouldn't do this, one reason you should just use a select list or have some better kind of fallback here is because Mobile browsers, Safari, Chrome, any of that stuff, they know how to handle these with very custom input selectors extremely closely.

One common technique that you'll see specifically for styling checkboxes or radio or toggle buttons is through the usage of labels and input colon checked To be able to determine if the input has been checked or or or selected.

Background, background image, Yes.

when I am coding up my my HTML forms,

So

and There's a little bit that you can do, and we'll move on to point 2 here, which is you can start to overlap DOM elements

Sort of fake it, essentially.

I've put backgrounds on specific things that look like arrows in the past.

the kind of 4 different ways or

into the DOM element. So if you have an element that cannot have a child property, it can't have before or after. So it has to have a child property. That's at least my understanding. Yes. That that makes a lot of sense, actually, because before and after are flex children. They are Child, so what what are other elements that can't have children? Break tag, horizontal rule.

pseudo selectors that allow you to create content in the DOM. So in CSS, And you might not think about this offhand, but there are a number of things that are I'm always thinking

Yes. I'm out I'm out here. Internet is a little bit better today, so me and Scott are having a decent time talking. Absolutely.

Monday. Monday. Monday.

It's a CMS where you can create your content types. You can create relationships between the 2,

Welcome to Syntax.

and then you pull that data into whatever

Styling and the unstyllables.

Open wide dev fans. Get ready to stuff your face with JavaScript, CSS, node modules, barbecue tips, get workflows, breakdancing,

is. They I love it. They've every time I visit their home page, they've They're they're very clearly Extend it? I don't know if if that's a good idea, but I guess that brings us to the next every little focus Come in where you could maybe set maybe even, like, a standard lib

This episode is sponsored by 2 excellent sponsors, and I'm talking about Sanity and LogRocket.

In this Monday, hasty treat, we're gonna be talking about

distilling down what it is they do, and now their website just says content is data. So, basically, native elements, I agree with you there. Try to use them as default as you can. When you get into things like autocomplete In most cases, you're maintaining all of the accessibility all of the different types of UI controls, I don't think Chakra does Skeleton,

soft skill, web development, the hastiest, the craziest, the tastiest TS, web development treats coming in hot. Here is Wes, Barracuda,

UI you've wanted, whether that is I I've talked to them about some pretty cool use cases that they've used it for. Obviously, pull it into a mobile app or a website, site, but it could be pulled in literally anywhere.

And me, I like CSS and stuff. So we're gonna be talking all about the different types of things that are difficult to style in CSS, a little bit about how you can style them, and then Some future tech around this same subject. My name is Scott Talinski. I am a developer from Denver, Colorado. And with me as always is Wes Bos coming to you from the full stack shack.

Sanity

Boss, and Scott, El Toro Loco,

I thought you I thought you had more there. So, yeah, I'll pick it right back up. Yeah. We're having a great time talking. And in Queen, this episode and the other one just dropped my, new hedge trimmer just arrived, so shout out to the hedge trimmer that I was very excited about in the last episode that we just recorded.

Tolinski.

Ticker badge. I had to do that a handful of times. In fact, I'm just deleting 1 today that I'm not using anymore. But that's like that's on them that you gotta do all the time. And, it's it's not necessarily PIA, but, hey, here's one that's a very common thing that we use on the web.

And set of UI boxes that we can Just use they work. They look really good.

you know, an individual React component to handle this or that or whatever. So Would love to have some of this stuff in here, and Open UI is definitely a project that I will be watching for a full archive of all of our shows. And don't forget to subscribe in your podcast player or Drop a review if you like this show.

all of these things and so much work making the editing experience just as an end user, let alone the amazing

that don't necessarily exist,

Yeah. Get in on the ground level. Share share, any of the many UI libraries that are out there. What are some of the the more popular ones? Actually, before we even get to that, I I did wanna say something about the video and audio stuff. I've really gone down the rabbit hole of custom video players. I wrote 1 using React Framer Motion

Make it standardized.

Peace.

Your use cases and requirements and help out because I think this is one of those projects

table, tabs,

I I I think I would like them in

Wednesday.

Yeah. Tooltip would be another one that would be really nice to have built into the browser. I don't know that all of these things will make its way into the browser because I I could see an argument against all of them being like, well, it's not really the browser's input. Maybe they do. Maybe they do. Maybe I'm wrong, but of UI components that are already built out there, and they have hit every little edge casey A decent user experience, the big one being

Head on over to syntax.fm

They'll go to the browsers and say, hey. How about how about This is gonna be HTML

include the CSS as well. And You're gonna have to anyways for the browsers like behind. But if you're just giving a simple example, pop open Chrome or something, yeah, that'd be nice to have a main browser. Yeah. So I'm really excited about I'm surprised I had never heard about it. It's called OpenUI, available at opendashui.org.

They're accessible. And then if you want to be able to extend them, then you can.

I'm not sure via JavaScript API likely. I love that. I love it. How many times have you had to implement a badge, like a an like a notification

that's not really the browser's job. I don't even care if they're into the browser at this point. If this library was easy to implement, then give me this. Just give me this thing. Yeah.

slider, from these browser based components.

Alright. I think that's it. Thank you so much for tuning in, and we will catch you on

that, like I said, how many times do you have to implement this? I don't know. I have to implement it Certain things in every project, and I'm not always looking to install,

that, has a lot of potential to change things For the for the like, there's so many little things in in web development long time to work on that. So don't don't don't think that's it like a, you know, a a 2 hour project and you're done. That is a big, big project, and it's going to be one that will sit with you for a long time. And not only that, you'll see that there's a ton of video players out there that do different things, and

I am excited to follow along With what's going on, and we should also encourage anybody who, like, cares deeply about this stuff, maybe even join in. Give your 2¢ now before you It's implemented, and then you start a tweet thread about how it was not implemented the way you thought it would be.

Stardust seven, I bet. How about we have some really good And then, also, people are asking for kind of the world

like micro things rather than, like, a UI framework. Maybe that's where web components really take off. That's what I was thinking as well. I was I was like it's because it's frustrating to make a new component for every single framework out there.

That make up the video player, it's just buttons and divs and actual

to do animation stuff and, CSF. A lot of, like, custom stuff for our video player,

it's very easy to make a div that you Click, but then you gotta think about keyboard access and all that. So I would say,

is aiming to be is allow web developers to style and extend

state issue. So definitely would would reach for one of those. I'm interested if web components are going to really pick up steam in this department,

you wish was added to HTML. And a lot of the responses were basically just like good, stylable, commonly used UI widgets. Oh, yeah. Could you, like, a toggle toggle selector, like, that's on iOS? The iOS toggle selector with come on, man. I got 800 of those in my site. It's true. Also talking about, Just underneath

You can right click inspect element, and you can see all of the elements three and a half different ways that you can style these things. And We're primarily talking about 2 things, inputs Some nice defaults in the browser because then you don't have to bring them in, especially for simple little I do lots of little simple little examples. And you don't have to do npm install. You know, give me my normal UI components. Yeah. Polyfill, You can also

Many, many cases where you need a custom input. And if that's the case, you can reach for point that we have here. We had Nicole Sullivan comment on, one of our tweets is that I had never seen this. Work is underway over at Open UI. Please join and contribute use cases. So what Open UI

Obviously, Bootstrap Foundation, 2 big ones. Ant Design, Carbon Design System, UI Fabric, Fast

of components. And then if you don't like it, you can Peace.

You're opening yourself up to a

like an MP 4 in Firefox.

Lightning Design System, Material Components, Any special And what that will do is when somebody clicks on the thing, it will just Pass through the click through whatever you've put on top of it to the element that is below it, and that can be really handy. I I like those because and progress bars and whatnot, and we had to pre implement the entire audio player on syntax. CSF. When we built it, and then you need to make sure that that types of stuff is is accessible as well because There's a whole whole bunch Yeah. You we've got a couple options, really. So we'll break it down into

in most cases, try to use defaults,

None of them have, like, less than a 100 issues on GitHub because there's just so many issues. There's so many things Pop up, and I I've done I've done the tour of all of them, and I'm actually about to swap out the one that we're using in level up tutorials for another one for a handful of reasons, whether that is Chromecast support being finicky or how how they work, it is a huge, huge world. So just keep that in mind if you're like, oh, I'm gonna reimplement my own some video player from scratch. It's it's a bit of a it's a bit of a task. I just looked up some examples of, popular UI libraries.

built in web UI controls such as select. That's exactly what we just said. Style and extent. Mhmm.

replay that gives you

Now one of the coolest things that Loud Rocket does is they make it crystal clear what their product does for you because they they show you very quickly and easily on their landing page exactly what this thing looks like. You can see all the features. So, basically, their little tagline is stop guessing why bugs happen, and that really sells it to me because You get to see the error happen in a video

What about things, that can be difficult in styling, and how can we style them? So the 1st category we wanna talk about were things that you could just Sort of just style the defaults the best you can. So most elements in CSS, right, most things you can style.

anything you want to use, this thing works with it. And there's a self hosted or an on premise version,

the network logs, any JavaScript errors, The stuff that you're used to when when when debugging on your own in local development, you're gonna get there for things that have happened in the past to actual users and be able to Solve those problems everything in in your browser is made up of Smaller HTML elements, and sometimes those are obfuscated behind the shadow DOM.

Let's get started here. Styling the unstylable. Can it be styled?

So check it out at logrocket.comforward/syntax.

is very cool. You can even guide your users to a resolution with a live co browsing mode, which is, I think that's a new feature because that's not one I've seen before. It's really neat.

the LogRocket cloud. There's a lot of really cool stuff here. Logrocket.comforward/

And complex elements when you get into things like let's use a select list as an example. Select list is a complex element. Right? It's not just one thing. You have Kind of like a button interface, maybe some arrows on the side. You click it, and there's an options list. There's a whole bunch there with the select list. And, typically, If you've ever tried to CSS this, you'd know that this is not your standard type of grouping of HTML elements. And even though it is Wes, would you like to take Sanity, and I'll take LogRocket?

Editor I have ever worked in. If you've you've been using WordPress forever, check out Sanity Studio because or not the browser's default

never mind all that. But, actually, the The end user editing experience is And I don't think that if the browser were to roll out a set of really good Or they do exist like Select, Stuff that comes along with the browser in terms of features or accessibility, They have spent so much time like, video and audio is another one that is entirely built on the shadow DOM. It's kinda interesting. If you open,

So I really like it myself. They have this really slick thing called Sanity Studio, which is, I'm gonna say, the best

One of the cool things that LogRocket does, you can go head to their website, logrocket.comforward/syntax.

Session, video replay for errors and exceptions. Now LogRocket is a perfect place for you to see exactly how errors and exceptions happen in real time in a scribble there are so many things you have to consider when doing that. In fact, like, when you when you say, you know what? I'm gonna drop the default video player to go with something more custom,