This Component Could Have Been A Class

Hey, what's up? My name is Scott. I'm going to be talking about why this component could have been a div. That title is definitely a bit ridiculous and not entirely accurate, but I thought it was funny.

So let's first, as CJ said, I'm the executive producer of Syntax. You can find me on the socials here. If you need a web development, just fun stuff going on, we do all kinds of crazy stuff on YouTube from coding competitions to just wacky stuff in general. And I'm also over at Sentry where I get to work on Syntax full-time. So check out Sentry. I know they're a sponsor here, but a great service.

And I'm going to go really fast because I got too many demos, I made too many slides, and instead of cutting things out, I'm just going to go quick. So I made a bunch of code and demos on my site here. I will have this QR code available at the end of the talk if you found anything that's interesting. But just to let you know. And even though I am going quick, I do want to show you that this is actually all individual particles here. Where's my mouse? So this is React 3 Fiber. So I don't run a ton of React, but React 3 Fiber rips. And man, this was a joy to work in. And it actually just dumps an SVG in here. So pretty neat. Again, I'll have the slide in here at the end so you can copy that.

I'm going to get right into it. And the first... Well, before I do that, actually, we are in bubbles all the time. And I know there's potential criticism around the React ecosystem for being too much in a React bubble, right? You're doing things the React way all the time. And I'm here to get you out of that bubble just a little bit and show you what's possible with web APIs. Some of which have existed in the browser for a while. Some of which are still coming. Some of which will be available this year in all browsers. And some that will be available in the future. And hopefully we'll get you out of that bubble and just see what's available in the wider web ecosystem here and maybe why it matters.

So the first one is not exciting, but I think it sets things up a little bit. So dialogues and drawers. We've seen the dialogue element. This is available in all browsers. It's been here for a while. So it's been in Chrome since version 37. Safari since 15.4. Firefox 98, right? You can use this, obviously, in React with a show modal on a ref or anything like that. But for some reason, a lot of us are still doing the ampersand, ampersand, hide a div, position fix that div, or absolute, inset, whatever, right? Dialogue exists, and it's great.

And I think the really cool thing about dialogue is that just simply by using it, you automatically get keyboard shortcuts to close it, you get focus capture, you get all of this stuff baked into the browser, meaning that you don't have to type it yourself. And ultimately, in a microcosm, this is a lot of what this talk is about, is that these things are being taken care of for you in the browser when so many of us are having to write key events for all of our things like this. And then that just leads to situations where, well, we miss things or the AI misses things or things don't become as smooth as they can be, and that's going to be a common theme through this.

Now, a lot of people critique this because the drawer, well, it's not as fancy, right? There are issues with the dialogue element. But there are additional CSS properties and features that come in here to save the day. For instance, starting style allows us now to just simply add animations to this thing using the straight up transition property. So now, again, you don't often think about, I mean, we think about these drawers as dialogues and drawers and whatever, but it's really simple to wire up a dialogue element, turn it into a drawer, and again, we get keyboard support, everything out of the box. And likewise, there's another property called a value, allow discrete, that you can set on properties that couldn't actually be animated in the past. So before you're trying to animate something out, use display none, it disappears from the DOM, there's no animation, now we have allow discrete, which allows you to essentially wait until the animation is completed before removing something from the DOM. So dialogue is great for these sort of reasons, and it does show Firefox support for this, and that's a bit wrong, because Firefox, where's my hover support? So Firefox, it has support for allow discrete, but not on display just yet. Hopefully very soon. I will say even with that, even with that allow discrete, that business, this does progressively enhance really well. Just by not having that on Firefox, you just don't get animation. That's not a problem. That's not a problem for me.

Alright. Scroll snap. Scroll snap is an API that has existed for a while now. It's available on a lot of browsers. Chrome 69 nice, Safari 11, Firefox 68, and a lot of people just think of scroll snap as being carousel sliders or whatever, but like the classic swipe real interface can be done so easily with like no code, with scroll swipe. And the thing I love about this is that, like, I know me personally, when I reach for touch animation libraries, drag animation libraries, whether that's motion or any of these things, they're great, they're fantastic, they allow you to do so many cool things, but nothing feels as stinkin' smooth as the scroll that's native into the browser. I don't, like, I've used a ton of scrolling and panning and whatever libraries, and they just don't feel as good as this. You're offloading a lot of that to JavaScript, you're just updating transition, or translation properties, when in this, it's just straight up scrolling. You get touch and scroll support without having to accommodate for either of that, and it just feels good. It's super easy. Scroll snap type, Y mandatory, overflow, auto. So I'm gonna go really quick through some of this stuff, because I gotta move here. This is the classic swiper. A lot of people don't think about this as you're always gonna reach for a component. I've reached for this a hundred times where you're doing the push down and drag events, and you're tracking the values, and you're doing the translation. This works with scroll snaps super easily. And the trick here is just that you're doing a grid, you have one in the middle that takes up the space, and you're snapping to the middle. So because you're always snapping to the middle, it can't ever reach the middle of the other one, so it just snaps back.

And a key point about this is that, like, you might be thinking, like, OK, but I need my JavaScript, I need my events, and that's a key point, because, like, this talk is not about eliminating JavaScript, it's not about removing react, it's about letting the browser take care of the stuff that it is super good at, and then offloading those things to the browser, the rendering engine, so that way it can be smooth as hell, and then we get the events and all that stuff, you can still track it with JavaScript, fire those events, control, do whatever you need to do, and it just works. There's actually a future API that will allow this to stay open, so you can have multiple buttons and clicks. You can't do that right now without JavaScript. But again, you just toss a little bit of JavaScript on that bad boy, and it works.

Carousels. Carousels are getting dang buttons now with Scrollsnap. And this is actually pretty interesting, it's a scroll marker, gives you these little dots that are even interactive, and you even have the scroll button pseudo element, and you can set the scroll buttons that actually do this, and the cool thing here is that we automatically have swipe and touch support, mobile desktop and everything. Again, just Scrollsnap. Like, I love Scrollsnap, and I just feel like people don't use it enough.

Scroll-driven. So scroll-driven animations are really sick for a lot of reasons. This is a new API that is available in everything and behind a flag in Firefox. So if you've seen that this scroll-driven animations is, like, future stuff, it's coming. It's coming very soon. And the cool thing here is that you're just specifying an animation timeline, you're assigning an animation to it, and this also uses Scrollsnap, but check it out. So this is the type of interface you'll see a lot, and these types of things, again, it feels smooth as hell because you're using the browser's native scrolling, and now we can control the animations with it. I feel like a lot of times we see animation timeline demos, it's just like, ooh, parallax, right? But there's really real usable UI to come out of some of this stuff. This is one that we do all the time, a sticky header, and this one uses a container type of scroll state. So we're defining the container type of scroll state and then we're able to use a container query to check when the top is stuck and then change the CSS accordingly. There's no JavaScript in this bad boy, and I do think, like, this is something that we've done with JavaScript forever. I don't know, what was it? Headroom or there was all these different plugins we used to use to change the header when you scrolled, but now you can do it in a couple lines of CSS. Slick. Okay. Values. Did anybody know that you could do this with CSS? You can count that value up and down. Now, this uses a couple of things at property which allows you to specify a type in CSS. Did anybody know that CSS had types now? Yeah.

Did anybody know that you could do this with CSS? You can count that value up and down. Now, this uses a couple of things at property which allows you to specify a type in CSS. Did anybody know that CSS had types now? Yeah. And they're not that, they're not like, they're cool, but a lot of times when people talk about types in CSS, they're like, oh, you can animate gradients with them. Like, oh, okay, cool. But you can also do stuff like counting, and you can use these values to calculate and use these properties and all kinds of stuff just beyond counting a number up and down. But this uses a thing called counter reset where you're assigning the counter a name, in this case, the name is n, and then you're assigning it to a variable, and this is only just outputting it here, but the real, everything is happening from a CSS key frames. We were just saying count to n equals 1 million, and it just works. It's sick. This is supported in just about everything. I'm not getting my hover here, but good support for that one.

Sibling index, this is a sick API, and this example is a little trite, but we use this all the time in syntax. How many times when you're working with JavaScript or anything like that, what you end up writing is nth child 1, nth child 2, nth child 3, but so many times we add something to the list and then that whole CSS gets rocked, so then you have to write JavaScript to accommodate for that, or add an index to pass that in as a prop to then update the CSS to have the CSS be dynamic, but this is a straight up one liner where you can just say what's the sibling index? The sibling index is this? I can do math, I can do animation delays for staggered animations. Staggered animations with one line of CSS using sibling index. This is coming to Firefox, but it's available in everything right now. Really sick API. Really simple too.

People talk about anchor menus as just like an anchor as allow you to anchor to something to something else, that's great, but what people don't often think about is that you get baked in position try fallbacks. So check this out. As this gets inline or block on either dimension, it automatically flips, and this is being done just purely with this one line of position try fallbacks, flip block or flip inline. This tweet was done June 7th saying CSS tool tips works until you have to get it near an edge. Like brother, you can do this today in all the browsers. So like you don't need JavaScript to make this, and I'm not hating on this guy, but people just straight up don't know about this stuff, that you can do this. And you toss this onto a menu, a drop down or anything like that, and it just works anywhere on the screen, mobile, desktop, whatever. All right. Slack list. So we're going to be able to style Slack list in every single browser this year.

All right. Slack list. So we're going to be able to style Slack list in every single browser this year. And this is just a straight up Slack list. There's two cool things about here. One, there's a new selected content element in HTML that gives you the currently selected item. The other one is just that you can just toss whatever you want inside of a Slack list, and now it has the appearance of whatever you want just by using appearance, base Select, you can style it with CSS. On the surface, this is cool. We have a lot of components to do Slack list and all that stuff, but now we don't need that. The cool thing is, again, on mobile, it's going to pop up with the default native Select list. No more faking inputs to do what we want with Select list and all that stuff. And you can animate it, since it's just a popover. So again, you can have full control of how you want this thing to look. Now the cool thing about this is that people often think of that as being like, oh, okay, we can make our Select list look pretty now. They're no longer ugly. But Una did this really great demo of an emoji picker using a Select list. This bad boy is just a Select list. I've never seen a Select list that looks like this. But we use this type of component all the time, and it's so cool that this can be the native form element without faking it, without doing a ton of divs and all that cool stuff.

All right. All right. Good. I'm moving time. Okay. So I bet you did not know that HTML is getting declarative partial updates and out of order streaming in straight up HTML. This is really sick. And this could be the future of how we use web frameworks in general, or it could be the future of just how you're writing code. Because this is inspired by Astro's island architecture. You're going to be able to have out of order streaming directly in HTML straight up. And this, even though it's only in Chrome today behind a flag, there's a polyfill that works for this across all major browsers.

You can actually try this today. It's crazy. See this new question mark start thing? That's an old XML tag. I believe it's called processing instructions. Don't hold me to that. But they're reusing that as a valid tag that's existed for a while, and you can see fallback state in here. This is crazy.

Another crazy API that you may have seen because it's gotten a lot of hype is the HTML in Canvas API. This one again is behind a flag in Chrome. You're taking DOM and drawing it with Canvas. You build so many interfaces with Canvas, and you lose so much because people who are non3D users, they don't have WebGNL; they're just not going to get an experience or maybe the accessibility, those types of things.

This is a small project I've been working on. If this stuff interests you, you can check it out at graffiti-ui.com. It's just a handful of elements that show what you can do without JavaScript. It's like a showcase of here's all the cool stuff that you can do with just CSS. AI is the elephant in the room here. It's like why does this stuff even matter? Well, agents can write this stuff. It's less code.

In giving this talk, this talk is so processor intensive, my computer went to like 50% battery while I was preparing this, so I got to make sure this doesn't die. This is a small project I've been working on. If this stuff interests you, you can check it out. It's called graffiti-ui.com. It's just a handful of elements that show what you can do without JavaScript. And it's not intended necessarily to be used as like a replacement for JavaScript, but it's like a showcase of here's all the cool stuff that you can do with just CSS.

If this interests you, this is by no means like a finished product, but there's a lot of cool stuff in here, and if you are interested, check it out. There's a lot of fun stuff. User menus, swipes, all that kind of stuff that we showed here. So obviously AI is the elephant in the room here. It's like why does this stuff even matter? Well, agents can write this stuff. It's less code. Every time you give it some API library, what are you doing? You're going over to context 7. Context 7 has got to get the latest docs, or there's an update, and now context 7 is using the wrong old docs. Or maybe not context 7, but your AI has got some training on some old docs, it uses some crappy old APIs.

I write Svelte, and they had this huge API change, and AI is just like, well, let me use this old API. And it's like, please don't, I'm begging you. I've asked you several times. But when you have less code and less APIs and things that are baked into the browser and things that most importantly aren't going to change because they're in the browser, the agents writing it, it's a pro, and you really just have to ask them very nicely. And so, again, no shade on floating UI. Floating UI is dope. But imagine writing two lines of CSS instead of importing a library that imports 10 other libraries that has this massive ecosystem of connected packages where one gets compromised and you get wormed, as you see.

I tried really hard to make this worm look cool, and I'm prompting Claude, I'm like, please make worm more impressive. Make my worm impressive, please. And this is what I get. This is the most impressive worm this thing could come up with. So I guess that's the best it can do. We're not toast yet.

I hear oftentimes, though, nowadays people are talking about, like, I can build all my own components now because it's easy to do it. The cost of building all of your own components now is so much less because you just say, hey, AI, this is what I need. Now you're not going off onto some other potential attack vector here. And I'm not saying there's no downsides to that. Let me be very clear. There's definitely downsides to any approach here. But I do think that the browser doing so much for you makes this part of it way easier.

All right. Again, easy stuff. Just say, use dialog over a modal line. And actually, I found with the models being so up to date, it knows how to use dialog, it knows how to use has, it knows how to use anchor just fine. These aren't things you're having to pass it docs to do. And I love this node dependency without asking first. Because it loves to be like, you know what? Ten years ago, 10,000 libraries used this particular package. That means that's what I got to use. But you have control over what it uses. You have control over the libraries, the code, all that stuff you bring into our project. And maybe now more than ever, people are just like, give me app. Code comes in, you're like, whatever, it works. I believe there's a higher bar than that, right?

I'm a little bit over. So the Q&A will just be over by a couple minutes. But code and demos are here. And again, it's just on my website, tolin.ski, if you want to check that out. Now it's time for me to go slower. Yeah. Check me out on syntax. We do stuff like this. If this was interesting to you at all, we talk about new APIs all the time on here. And we're exploring them, we're diving into them, we're doing challenges with them, and we're doing all kinds of stuff. Thank you. Thank you so much.

This first question comes from Isaac. And I know you've thought a lot about this and you're working on some tools to help with this too. What are your tactics to get AI to write quality and modern CSS? Oh, yeah. You know what is tough? The AI has a number of tools that it loves to do with CSS. And the hardest part is even when you give it a system, getting it to adhere to that system or understand without it falling back into those patterns. For me, personally, I have a set of rules that I like to adhere to in how I manage my CSS. And that graffiti library that I showed you was born out of that, where I was tired of writing the same kind of patterns over and over again, right?

So the key thing is really having a good system and adhering to that system. We have a team member on the Syntax team and his name is Wes. And Wes is kind of like an AI in that he loves to like, oh, I see your system? Let me just kick over your system and do my own thing. I'm gonna add new colors here and there. And so I've had a little bit of practice preparing for developing a good system, right? So yeah, I really think it's all about systems. It's all about systems having those defined systems and being able to express those systems in a way that the AI can consume. Definitely. Would you say, so you're working on a CLI tool for linting CSS? Is that one way that you can help AI do things better, too?

Yeah, that's a good... Thank you for bringing that up. Here with the assist. Like many of you, the non-deterministic nature of AI makes it tough to work in sometimes or you're just going back and forth.

Here with the assist. Like many of you, the non-deterministic nature of AI makes it tough to work in sometimes or you're just going back and forth. I've been trying to reduce that loop and I've noticed that like deterministic tools, one of which I really like is called Fallow for code quality, code dupes, and those types of things. If you give that output to the AI, it does such a better job because it's like, oh, here are the things I need to fix. So I've been taking that approach to everything in my code base. So whether that is graffiti where I have a CLI that checks it and outputs reports, or it is just, again, adding CSS linting. Style lint is a great library for this. ES lint does CSS linting. There's one called CSS kit that's way better than the one that I was working on. So I'm going to use that one instead. And yeah, linting is good for AI. It works.

How can we best keep ourselves informed about these native browser features without needing to check MDN every day? What sources do you recommend? You know, I would recommend syntax dot FM or syntax on YouTube. But no, MDN has maybe a little known page that's just updates where it's like, here's all the things added this week. And you could just check that out, scroll through it, and it's JavaScript, HTML, CSS, and just see, is there anything neat in here, anything catching my eye? The Chrome developer blog is great. That's where I found out, I didn't know about the HTML streaming out of order API, and then I saw it on the Chrome developer blog, and I was like, this is going to allow for all kinds of stuff like HTML, like native HTML partials that load in a most performant way possible and it's got a polyfill? It's like, yeah, the Chrome developer blog is great too. Yeah. Definitely. And I think all of those have RSS feeds if you just want to get them in your newsreader too.

From Bes Was, what's your favorite new CSS API? All right, Bes Was. My new favorite CSS API, that's tough because I have so many favorites. I think it's pretty evident from this that I really like ScrollSnap. I think ScrollSnap was one of these ones that came out and everybody's just like, it exists, right? And everybody was like, but you can do, like I said, reels or swipers, you can do all this stuff with it that, like I feel like really went under the radar. We talk about this on syntax sometimes where it's like the effects of these new APIs will be felt years from now when people actually figure out what you can do with them because at first everybody's just like, okay, but then anybody who's been a part of the web development ecosystem for long enough knows that, like, we get really creative with APIs.

From Bes Was, what's your favorite new CSS API? All right, Bes Was. My new favorite CSS API, that's tough because I have so many favorites. I think it's pretty evident from this that I really like ScrollSnap. I think ScrollSnap was one of these ones that came out and everybody's just like, it exists, right? And everybody was like, but you can do, like I said, reels or swipers, you can do all this stuff with it that, like, I feel like really went under the radar.

And we talk about this on syntax sometimes where it's like the effects of these new APIs will be felt years from now when people actually figure out what the hell you can do with them. Because at first everybody's just like, okay, but then anybody who's been a part of the web development ecosystem for long enough knows that, like, we get really creative with APIs. Back when we had floats and a handful of colors and whatever, we made it work. People did some crazy hacks. And I think this type of thing is only the type of thing that gets discovered with people getting curious.

Awesome demo. Thank you. How do we manage using some of these newer features if we know that they're not supported everywhere? Yeah. Screw them. No. Progressive enhancement is such a key thing here. So one of the things I think about, and there's another question about Firefox. Firefox took a long time to get view transitions. And the coolest thing about view transitions was that if Firefox didn't support view transitions, the only downside to that was that they didn't get the animation. Like, how trivial is that? So you can progressively enhance, which is a word that at one point was very much a popular thing to talk about in the ecosystem, where the browsers that support the features get all the new stuff and the older browsers, well, they either get supported via polyfills or they get an experience that is degraded, maybe a little bit, but still accessible, functional, all of the things that are important and maybe don't have a swoop in animation or something like that, right? So each of these techniques and different things has a different progressive enhancement story. It's a lot to get into up here, but you can catch me any time talk about that stuff. Yeah. Definitely. There's like polyfills, shims. Oh, yeah. Oh, yeah. The anchor positioning had a great polyfill.

There's like polyfills, shims. Oh, yeah. Oh, yeah. The anchor positioning had a great polyfill. So people weren't even using anchor for so long, but it had a great polyfill. I used anchor positioning on level up tutorials two years ago with a polyfill. I threw it on syntax. I used temporal API on syntax two years ago too with the polyfill stuff.

Why is Firefox lagging so much behind in features? I'm a Firefox user. Recently we did a live stream where I talked about a blog post someone wrote that talks about why Firefox seems like it's lagging, but really Chrome is shipping and using unsupported APIs. That's one issue. Firefox gets a bad rap. This guy is trying to defend Firefox here. Yeah. Do you have any thoughts on that?

No, we had Jake Archibald on the podcast just recently. He works at Firefox now and we were asking him about this and he said that they have shifted their focus to one, they are really following interop and they're very involved and they're adding APIs like crazy, but it might seem like they are because one of the things that they prioritize in the APIs that they land on is the ones that have a significantly degraded experience if you're on Firefox and not others. For instance, like that view transitions. They could look at that and say, all right, if you don't have that in Firefox, it's not breaking your app. Let's spend our time focusing on the ones that will break your app if we don't have it. Do that. Crush it. Honestly, like the styled select list, they're getting that. I feel like Firefox is on a heater right now. I was right with you on this question. I was a grumpy person about Firefox maybe about a year ago and I've kind of changed my tune. I'm still not using it, but yeah.

I feel like Firefox is on a heater right now. I was right with you on this question. I was a grumpy person about Firefox maybe about a year ago and I've kind of changed my tune. I'm still not using it, but yeah.

Definitely. All right. This next one, is Sass still relevant today? I don't think so. Sass does some cool stuff, the imports and things like that, but as a long time Sass user, I did the very first Sass tutorials on YouTube back in 2012. And I'm a big Sass head for a long time. I use compass. I was deep into that ecosystem. So I love Sass, but CSS variables are so much better than Sass variables by a mile because they're reactive, right? It's essentially props. So there. It's out. CSS is now getting if statements. It's getting functions. It's getting kind of crazy stuff and that's all cool, but largely I think the things that Sass still wins out on are ideas like mixins because CSS has had native nesting for a long time. Like mixins and functions and those type of things are maybe it, but we got color mix. We got relative color. I wouldn't pick up Sass today. I would use like post CSS to do importing and stuff like that, but that's it pretty much. Yeah.

And so the graffiti UI that you wrote, did you use just post CSS for that? I don't use anything but CSS. No, only CSS. Yeah. Wow. Yeah. Only CSS. Amazing. This next one, does this all look the same across every browser or is it based on how the browser devs implement each feature? Yeah, it largely works the same across every browser, but again, a lot of it is CSS.

So like if you have a base layer of CSS, whatever that may be, whether that's tailwind or whatever, it's going to look the same across it because it is just elements at the end of the day. It's just straight up elements. It's a neat... Actually, you know, one element that Safari has that's sick that nobody else has is a native switch toggle. It has a native switch toggle. Like a slight... Yeah, and it looks great, and you can change the color with the accent color. And it just... Why are we lagging on that? I got one in graffiti that's using the old check box trick and stuff like that, but I'm like, you know, just give me the switch. We all use the switch.

With so many modern CSS advancements, and LLM using it to write maintainable raw CSS, does tailwind still matter? Yeah, you know what? I think tailwind matters because there's so much communal knowledge around tailwind like that. I personally don't use tailwind because I don't want a DSL that I need to learn when the CSS properties are often like one-liners. The thing that tailwind does great to me is that it systematizes everything, it's structured, which is really what makes CSS fall apart is when you have people writing bad systems, bad structures.

It also has a shared way of doing things, so that way if you know tailwind and I own tailwind, we don't have to be onboarded to some new system. So tailwind does those types of things great, but I don't necessarily see the value in writing br-whatever instead of border radius. I just don't want to learn that DSL there. But I think also a lot of React folks really latched onto tailwind more so than anyone else because React doesn't have necessarily a built-in way of solving scoped CSS like single component or single-file component frameworks do, like, you just write your CSS in the component, and it scopes all that CSS to that component.

I just don't want to learn that DSL there. But I think also a lot of React folks really latched onto tailwind more so than anyone else because React doesn't have necessarily a built-in way of solving scoped CSS like single component or single-file component frameworks do, like, you just write your CSS in the component, and it scopes all that CSS to that component. Vue does the same. So with React, people had issues with scoping, and I don't think a lot of people realize this, but tailwind actually ends up solving those issues of scoping because they don't have to worry about the cascade at all. But yeah. That's just my two cents.

Definitely. It's a bit of a different tune than a couple of years ago on your tailwind stance. I'm trying to be nice! Is accessibility supported by the CSS APIs? Yeah, I mean, I think it's the best part. Especially with the custom select list. The fact that that allows you to style select lists. But it is the form select. So you get all of the form select things that are built into HTML forms. But also, again, the modal examples. They give you focus capturing, keyboard support, and all of these things that we just are often writing ourselves with key events and drags and all that kind of stuff. Yeah.