Skypack, Tabs & Generic Components

[00:00:00]
>> Pretty cool, I'm using Skypack, I don't know if you've used Skypack. But you can just go to Skypack and look for skypack.dev. You can look for whatever package you want, somebody named a package, I don't know, like,
>> Gulp-babel is the one I had to look up.

[00:00:22]
>> Gulp-babel?
>> Yep.
>> Okay, bingo, babel, yeah. So you can get gulp-babel here and you could just import it into your JavaScript as a module right here, and it tries to modulefy whatever it can. I think that's sort of a tough science with all this legacy-required code.

[00:00:43]
But if you're writing a Node app, you could kind of require it from the CDN. Again, your banking software probably can't just import it from [LAUGH] an untrusted CDN. But I tell you what, it's really great for prototyping out an idea very quickly to see if it's something you wanna even get started on.

[00:01:04]
So, a pretty awesome way to do it. So, details-utils. I kinda just found it, or came out I think this year, so, pretty cool and I plan on using it kinda more going forward. I know what you're saying, we just added some accessibility features. Wouldn't it be great to have a bundle of premade accessible components that I could style on my own without having to install all of god's earth just to make some tabs on my website?

[00:01:33]
Yeah, that would be cool, that's the goal, that's the utopia, we just have things, [LAUGH] I just wanna have things. Generic-components by Pascal Schilp is a really cool library I came across, and it's maybe one of my favorite kind of collection of Web Components. This isn't really a design system, it's just a collection, a few components.

[00:02:06]
And it has kind of the standards, the hits, it has accordion, it looks ugly. But you can bring your own style to it, if you're doing whatever, tailwind or whatever, and the code here, that's maybe super hard to read. Let's go over to my example cuz we can read this code, for my tabs.

[00:02:32]
The code here is pretty awesome, generic-tabs, we'll give a label to the group. That sort of depends on your situation, but we have a button and we're gonna slot that into the tab slot, that's named tabs, right, or named slots. Again, I don't use this feature that much but in tabs, you have buttons and panels, right, you have tabs and panels.

[00:02:59]
And so he has two slots, an about and a contact. And then you have a panel and then you have another panel, and you can slot stuff into the right slot. And then you get features like, you get a tabs control with just writing HTML basically, writing normalish HTML.

[00:03:24]
I even committed like a patch to this, what if you didn't want buttons? Because, let's say that JavaScript fails or whatever again, we're talking progressive enhancement. Or let's say I wanted to turn off tabs at some point. What if you wanted progressive enhancement? Well, you could just have normal content, [SOUND] and then it just [SOUND] rolls up into some kind of tab structure.

[00:04:00]
Interesting to think about, and that's kind of an idea me and a group of people, called the Tab Vendors, whatever. The Tab Vendors were a part of Open UI, open-ui, were part of Open UI. And Open UI is a group of, let's call them component enthusiast, it's just a community group.

[00:04:29]
We can't actually propose anything for legal reasons, but we're a group of component enthusiast from browsers, from spec authors, from ARIA accessibility experts, CSS spec writers, and normal podcast hosts like me. We all come together, and we talk about components. And we're kind of using this this big component matrix, we surveyed something like 18 different design system.

[00:05:00]
And try to find the most common components across design systems. Well, if you look at, number five is tabs, right? So tabs is one of the fifth most common element behind button and menu and tooltip and a checkbox, fifth most common control. So we've been experimenting, over here in spicy-sections, we're going to spicy-sections.

[00:05:27]
And we sort of realized, if you have tabs and you have that well structured content, this is just the idea. This isn't something coming out tomorrow, but if you have that well structured content, you can make tabs, but you know what else you can make? An accordion, you can make a vertical tabs, you could make an accordion where only one panel shows at a time or they can all open close, stuff like that.

[00:05:58]
Maybe, I don't know, maybe even a carousel, does that have a tabs? Well, we're looking into it, we're trying to figure this out and just see what is going on. Just see if there's a way to a express control that fits with everything. And so here's sort of the canonical demo, we'll start in the mobile viewport, you have an accordion, right?

[00:06:23]
And then in the medium viewport, you're gonna get normal content. Just like that weird tablet viewport where you don't know what to do where an accordion is too much collapse. And you don't have enough room for tabs or, it's a weird place for websites, it's like the teenage years for websites.

[00:06:44]
And then you go to all the way out and then it turns into a tabs control. And so this is just an idea we've been experimenting with. There's a few other demos that I could show you. But it's just kind of an idea we're experimenting with in kinda seeing if this is maybe a pathway forward for tabs like element native in the browser.

[00:07:09]
So, kinda cool, don't know, it may rebrand to panel set soon, so keep an eye out for that. Not sure if that's the official name, but that's just sort of something we've kind of been riffing on in terms of this. Yes, we have a question.
>> On Shop Talk, you and Chris mentioned doing a circular menu, was that tabs as well?

[00:07:34]
>> Like a radio? Yeah, that would be tabs. I mean, if you think about video games,often have these radial menus, you go into the menu and you, go to grenades or something. [LAUGH] I don't know, or say this voice line or something, there's these kind of radial menus.

[00:07:54]
And then you'd choose an option and then it drills you down or shows you content from within that option, are those just tabs? The old Xbox 360 UI that had these like vertical blades, [LAUGH] is that tabs? It might be tabs, and so I think as we've kind of investigated tabs, it's a long story.

[00:08:17]
But there may be a point where you graduate from the standard tabs, and you have to make your own custom tabs. I think my favorite one was where one of the tabs was a phone number. And you could click it and call somebody's grandma or something like that.

[00:08:35]
I think it was like in Salesforce or something, so you could call somebody from a tab. That's probably not making it into the HTML, [LAUGH] finals back, but it's interesting to think about what is a tab and what is not. And then even we've gotten some feedback, maybe there's tabs for a whole page, for a whole application.

[00:08:59]
And maybe there's tabs for inside the content, maybe those need to be different tabs from an accessibility in aural announcing standpoint. So, lots to think about, again the stuff's slow, doesn't move fast, but it's fun to play with. And actually the spicy-sections has been a really great tool for discussing web standards or potential web standards.

[00:09:23]
Just because it's a prototype, and everyone's probably had that experience at work where you just show the code or show it living in code and suddenly people's opinions change. Some people don't react until you see it and then they're like, wait, wait, we have to stop this. Or they're like, wait, this is good, this is bad, let's do this, let's tweak this.

[00:09:48]
And so, it's been a really good talking point, and that was all kinda started through generic-components. Which I should mention, they're all coded to this WAI-ARIA Authoring Practices, sort of, I guess, tutorial guide. You wouldn't know this but [LAUGH] this page on the Internet is basically the the holy grail for telling you how to code something and what the expectations are of that unit or a menu button, radio group, what it is, what it isn't, tabs.

[00:10:23]
This page should be at the front of the Internet, [LAUGH] the front of the guidebook you get when you get a new job. But yeah, so that's a very handy little library. Again, your mileage may vary, maybe you want this, maybe you don't, but this is just a starting point.