Erik Hanchett is Front End Engineer at Amazon Web Services. He joins the show with Steve to talk about UnoCSS. He begins by explaining what it is. They also discuss the difference between UnoCSS, tailwind CSS, and WindiCSS. He shares his own experience of using UnoCSS and its useful features. 

 

Hello everybody, welcome to another exciting thrilling on the edge of your seat episode of views on view. I am Steve Edwards, the host with the face for radio and the voice for being a mime, but I'm still your host. With me today, I have one of our special returning guest hosts and initial OG of views on view, as we say, Mr. Eric and handshit. How you doing, Eric?

 

Hey, how's it going, Steve? Good to be

 

Good.

 

back.

 

Good to have you. Good to have you. So, Eric comes to us from the wilds of Reno, I believe, still, right?

 

Yep, Liv and Reno, Nevada, Northern Nevada.

 

Yeah, I'm, uh, how's things down there where it's still cold and snowing up here in early April in Oregon.

 

Yeah, similar here in northern Nevada. Some people think that Nevada is just Las Vegas and that we always get 100 degree plus temperature. But

 

Right.

 

here in northern Nevada, it's actually closer to Lake Tahoe and we have some ski areas. So we live in a little bit of a valley, but we get quite a bit of snow. And we just got snow like last week. So it's still at this point, we're still getting crazy weather. But that's good. Because I my I I don't personally ski your snowboard, but my family does. I'm trying to get back into it. I did it when I was a kid, and it's great going skiing and the ski resorts around here, so

 

Oh,

 

that's

 

same

 

pretty

 

here.

 

fun.

 

I got into skiing a couple of years ago through a buddy of mine I hadn't skied in like 25 years. And so I'm loving this, because Mount Hood, I live about, you know, it probably takes me 45 minutes to get up to Timberline on Mount Hood where I got a pass. And we're just getting dumped on every day. Every day go up there's a whole bunch of new snow. And we're sort of up to, I think where our normal average is, but yeah, it's just a ton of new snow. Which means spring skiing is gonna be awesome, which usually goes through May around here so yeah I'm looking forward to getting up there and skiing again hopefully next week.

 

Well, nice. Is it late in the season now? For you?

 

No, I mean the season usually goes up through end of May, usually get some pretty decent spring skiing.

 

Mmm,

 

But

 

nice.

 

yeah, we've been getting, I think last weekend, I got like three or four feet over the weekend and we've gotten some more over the weekend. Haven't

 

I

 

had

 

will

 

a lot

 

say.

 

of sunny days, unfortunately, but still it's good snow, which means we'll have a lot for spring skiing, which

 

I

 

would

 

will

 

be

 

say

 

really, really

 

I am

 

nice.

 

getting a little sick of all the snow though,

 

Yeah.

 

and the weather craziness. I'm ready for spring and I'm ready for summer

 

Sun,

 

hot

 

warmth,

 

weather.

 

yes.

 

Yeah.

 

Yeah, my parents live in Tucson, and so I've been making a point to go down there and hang out and work from their place for a week. Trying to do that, I did it in January and it was still sort of cold. So once it warms up again, I'm gonna head down there again and just hang out and warm up for a while.

 

for sure.

 

So today we are going to talk about UNO CSS. And for those of you who remember the card game from your childhood, no, I don't believe it has anything to do with UNO CSS, although Anthony Fu could probably answer that question for us better. But it's basically a, I don't know if it sees itself as an improvement on tailwinds or the atomic CSS type library or not. But I know nothing, Eric knows everything, so I'll let Eric

 

Thank you.

 

talk. about UNO CSS.

 

Yeah, this is kind of a surprise to me. It's been out for a while. I have been doing, for those who have been listening to Views on View or may know me from the View community, I've been doing YouTube videos for quite a while and blog posts and people have been asking me to check out Uno CSS for quite a while. I think it's been out for a year or two. I could be wrong. I'll have to look at the first, it's all open source. I'll have to look at the first release, But so I, being a curious person and trying to create fun content from my YouTube channel, I decided to give it a shot. And I was pleasantly surprised. I've used a lot of different frameworks, UI component frameworks out there. Give a quick plug. I'm a developer advocate for AWS Amplify and we have our own component framework called Amplify UI. But that one's more of like a full. on component framework where we have our own primitives, buttons, and menus and drop downs, and modals, and things like that. But Uno CSS is more like the line of tailwind CSS where if you look at the H1 on the uno.css.dev website, if anyone wants to follow along, it says it's instant on-demand atomic CSS engine. It's customizable, powerful, fast, and joyful. So it's That's what it says on the H1. I'm very well done website too, by the way. I really like it. It's, it's the brainchild behind, uh, the brainchild behind it is Anthony Foo. If you're in the view community, you probably have heard his name quite a few times. He's the guy behind a bunch of really popular projects like view use. If you ever use composables, you probably brought that into your app. V test. He helped, um, write some of that. He's also on the Wendy CSS. core team I believe. He's created VTES, not VTEST, but VTES which is like a pinionated VT plus view starter template. Oh did I miss anything that he's done?

 

I don't have it memorized so so

 

He has a lot of

 

not

 

different

 

sure.

 

projects. I think he's somehow affiliated with Nux too. I think he works well with the Nux people. But he has a lot of really interesting open source projects, especially a lot in the view community. So where should we start, Steve?

 

I guess you could talk what it, I guess it's ancestry. It's, I've been reading about it on the page here and I guess the purpose of it and what it supposedly does better than maybe Tailwind or Windy, which is apparently no longer supported. Oh, and to answer your question, October of 2021 was its first commit or its first

 

Ah,

 

release on GitHub.

 

yeah, so it seems like it may have been inspired by all the lockdowns and COVID lockdowns everybody came up with a side project during that time. Maybe Anthony

 

Right.

 

Fu was the same at least a year after.

 

Uh-huh.

 

Yeah, so it's inspired by windy CSS, tailwind CSS and T-wind, but kind of the differences in it. They say it's a lot more customizable. They call it fully customizable. where you can take pretty much any of the tail. Well, let's take a step back before we talk about customization. Just to define some terms for those who may not know, I don't think most people do, but Tailwind CSS is like a utility first class framework. And the way you usually create your apps using Tailwind, and this is a simplified version for those Tailwind experts out there, but you usually have classes, and then you have these like short little class names, mt-4, which stands like margin top, add four pixels. And then you might have something called text-color-500 and that'll add a CSS property for the color, for a font. So you can pretty much create your whole application just adding these little utility classes everywhere and they all translate to CSS. And then when it builds and compiles your app, only the CSS and those utility classes that you're using will be inside your application. So it's really, I used it a lot. I've used it a lot just to quickly create and scaffold and CSS, since I can put it all in my HTML applications, it's less verbose than doing inline styles, of course. And it's pretty powerful. And I'd say it's gained a lot of popularity in the last few years. And to the point where, Other frameworks are kind of also taking on our engines, I guess you'd call them, are also taking on this same kind of utility class style. Does that make sense?

 

Yeah, yeah, I mean, I think that the thing to know is that you're not, I mean, by itself, Tailwind doesn't really have any components, you know, like a beautify or a bootstrap view or something like that. It's just, it's the CSS classes by themselves. Now, if you look around at do some searching and look at the ecosystem, there's a lot that has sprung up around Tailwind. I mean, pre-built components using Tailwind, they have their own hero icons and you got Tailwind UI which gives you a number of UI components that are all made with Tailwind. It's got some modals and buttons and select lists and transitions and things like that. And there's Tailwind UI which you can buy, which I did and I love it, which has a whole bunch of pre-made components, pages and shells and little smaller components that you can just by itself, Tailwind is in it is, you know, just the atomic library tool set, but there's a big ecosystem around it where you can literally, you know, go find a, what's the term I'm looking for, a template, there we go, drop it in and then tweak it to your content. But very different from, like I said, the bigger frameworks, BootstrapView, Viewtify are probably some of the better known ones in the View community.

 

or quasar, yeah.

 

Quasar, right? Yeah, Luke's hosted on He used to host with me from down under and he's real big in the Quasar community. This is QuasarCast.com.

 

Oh, that's really neat. Yes, that's a good summary of Tailwind. I've used a little bit of Tailwind UI. I know there's even something called Headless UI, which I think is made by Adam Atwathen and that same crew

 

Uh-huh.

 

that you can combine with, that it's used in Tailwind UI to make more interactive type components instead

 

Yeah.

 

of just normal, instead of just having these classes and just a look and feel. have some interaction in JavaScript behind it.

 

Yep.

 

I think some people have compared Headless UI to Radix on the React side in some ways.

 

Well,

 

So.

 

Headless UI support has both view and react versions

 

Oh yeah, that's

 

of

 

true.

 

the code that you can copy. Same with, I think, Tailwind. Now Tailwind UI, Headless UI, has the view and react components as well.

 

So going back to then Uno CSS, so as you already alluded to, Steve, so I believe Anthony Foo was on the Windy CSS core team and

 

He was.

 

they have Windy CSS, as you said, is no longer actively maintained any longer. And Windy CSS was sort of a better tailwind CSS. It was a fully compatible with tailwind CSS B2 and they added some like additional features that. it boosting your workflow and further opens up more possibilities. So we have like these variant, more variant groups. So if you ever seen like dark or light, that's like a kind of variant class that you can add in you put dark colon and then like hover or dark colon, something else. And then you can have it like when certain if you have light or dark mode set up on your computer, it can, or if you have a switch on your website, you can make it look differently. There's also like better responsive designs. So, Windows CSS, which I haven't used, but for what I can tell, was taking Tailwind CSS, V2, and then adding a bunch of additional features. Then Uno CSS, like you said, came out in 2021, and they kind of started off with, like, let's take the features from Windows CSS, and then let's improve on it even more and adding more features and using something called presets, which presets are like plugins that you can add into your app. And so they, Uno CSS inherited a windy CSS on-demand, natural, some utilities like Attributify, which I can talk about. There's shortcuts, variant groups, compilation modes. And then Uno CSS brought some new things to the world, to this engine, including pure CSS icons, a different type of Attributify, a valueless Attributify, and Tagify and Web Fonts, et cetera. And so it's kind of, and there's a whole section on why you may want to use Uno CSS, but it's really taking like some of the best parts of Tailum and CSS and on top of that, Windy CSS, and then creating like just a lot of different features to make it really easy to create CSS and atomic CSS inside your application.

 

So the gist is still the same in that you got your predefined classes and you add them to your markup.

 

Yes.

 

Okay, does it still do the color ranges like 100 to 900 like Tailwind does or does it, and allows you to customize and create your own colors if you want?

 

Yep. Yep. So you have, you have the same exact, um, the same exact color, uh, schemes that, that Tailwind has. I've been told that, that there's some slight differences, but like the basics are the same between Tailwind classes and UNO CSS classes. In fact, Tailwind has not just Tailwind classes. It also has Bootstrap, uh, Tachyon, and Windy CSS. custom classes because you can do things like a Windows CSS. Like I said before, you can do MT-4 and that would translate to like margin top four pixels,

 

Right.

 

but you can do actually MT-10 pixels or MT-20RREM. And that would do a margin top with 20REM instead.

 

Mm-hmm.

 

So it has, it's almost like you can not just do tailwind, but you can use these other libraries that have these atomic CSS utility classes. I have. the comments of my video said that the bootstrap, some of the bootstrap utility classes, which I've never used. I have used bootstrap, but I don't remember using them in utility classes. It's been such a long time that they actually overlap with the tailwind ones and the tailwind ones wins out though. So if you are using, if you're used to like the bootstrap utility classes, there might be a few that are the same as the tailwind, but the tailwind ones will win out on them.

 

Yeah, I can see the similarities. I use Bootstrap View every day. So there's a lot of classes that are very similar that You know the way tailwind works

 

Did you use, are you a bootstrap fan, Steve?

 

I don't know if I'm a fan, I use it because I have to,

 

Ha ha ha!

 

you know, day to day. But I mean, I've used it before, I can remember when it was pretty much the only thing, you know, before you started getting things like Bulma and other libraries, but yeah, I have no problems. But the Bootstrap view has been very nice from a component library standpoint and that a lot of things you can drop in and just, you know, write your code and configure them pretty easily. you know, data tables or you know, form fields and stuff like that.

 

Yeah, it's good to remember. A lot of people think that we're only using, you know, everybody's using beautify or quasar, but there's quite a few people in the view community still using Bootstrap View or just using their own style sheets or CSS modules and no one size fits all for the whole community.

 

Yeah, the project that I'm working on, my inertia, Laravel View project, I wanted to use Viewtify. I really did and we had John Leder on a few months ago, I think talking about Viewtify version three and so on. But the one thing that held me back from using it was the lack of data tables, because that's something I use quite heavily in this particular app that I'm doing. And so because of that, I sort of stayed away from Viewtify. And it wasn't, quite ready yet. There were some other issues as well. So I've been, you know, I went with a letterbell breeze starter kit, which uses tailwind and view and they're a lot of the box. So I just been sticking with tailwind on this current project.

 

Yeah, works great. One thing Uno CSS doesn't support is the Tailwind plugin system that they have.

 

Mm-hmm.

 

So that's definitely, if you are hardcore Tailwind user and you use Tailwind's plugin system or specific configurations, it might be, the migration might be harder going to Uno CSS. So there's definitely some trade-offs that you have to kind of think of. But Uno CSS, by performing an extensible. So I guess we could talk about some of these extensions or plugins that you can add in. I think we all can understand at this point how

 

Mm-hmm.

 

atomic CSS works and just adding classes in. By the way, when I was using this, I used it on a VIT view app, but you can use this on React, Angular. It even has installation instructions use it with solid and quick. And it looks like you can pretty much use it everywhere, which is really nice. So this is definitely not a view-only project by any means. So.

 

Yeah, yeah, tailwinds the same way, drop it in and use it.

 

Which makes sense because this is, you know, this is CSS we're talking about here. Yeah.

 

Right.

 

They have an installation guides on next astro, webpack, runtime, CLI, post CSS. I think it even has a CLI that you can use to install it. Yeah. There's

 

Mm-hmm.

 

a UNO CSS CLI. So

 

Right.

 

if you really want to start your app with UNO CSS, you can use the CLI.

 

Now one thing that's interesting that here's one difference from Tailwind and I just remember when I first started using Tailwind I couldn't figure this out but UNO doesn't do any browser style resets. So Tailwind by default will go in and reset all your styles so you know like all your h tags and I can't remember all the other ones I've dealt with but basically you can go add an h1 if you're using Tailwind if you go add an h1 into your code. pre-built browser styles that go with an H1 in terms of the font size and the font weight and all that kind of stuff are gone. So you specifically have to add it back with your classes. So you have an H1 from a semantic point of view in terms of your document structure and and you know, how that could come into play with whether it's SEO or international, not international. What's the what's the term for accessibility?

 

I accessibility, yeah.

 

There we go. You have it from a from a semantic viewpoint from a visual viewpoint. specifically have to add, you know, do I want a font weight bold? What font size do I want? Do I want a, you know, line height? Whatever the case may be. Whereas Uno CSS says that they specifically do not do any style resetting for maximum flexibility.

 

That's a good point. I wonder if there's like a preset that changes some of that.

 

Well,

 

But

 

they

 

you can.

 

says you can, if you want to do that, if you're using the Uno by itself, you can use something like Normalized CSS.

 

Okay. That's sort of like when you start a new project. And I haven't done this in a while, because I think some of my frameworks I've used do this for me. But yeah, the first thing you would do is like you add and normalize or you reset your CSS somehow, depending on that was like a thing I used to always do all the time. Because then you know, it would look correctly in every single browser, at least hopefully.

 

So one thing I guess it just struck me that I'm a little confused on. You said if you use this with other tools, you wouldn't just use UNO by itself? I mean you wouldn't use it as the UNO thing on your application?

 

Yeah, no, I would.

 

Oh dang,

 

I

 

I

 

would.

 

missed my rim shot, I should have had that ready. Anyway.

 

Yeah, you would definitely, I think this, what I would say is that once you're picking like a CSS framework or UI component framework that you, mixing and matching is usually almost always a bad idea. It's if you never really want to like add in material design framework and then another framework on top of that and or using Tailwind or use Uno and then bring something else in. So no. probably wouldn't be the best idea to do that.

 

Okay, just make sure I didn't misunderstand there, because to me, yeah, you said something about bootstrap classes conflicting with tailwind classes, so that's why I was wondering, but. But yeah, all by itself would make more sense. I don't wanna deal with conflicts, to be honest. I got enough of that in my life.

 

Yep, for sure. Um, where else, um, do we want to talk about, um,

 

You were talking about plugins or?

 

yeah, could we, I actually, can you give me a second real quickly? I

 

Yeah, we're

 

just have

 

throwing

 

to,

 

an edit here. Yeah, sure.

 

okay, yeah. Hey, sorry about that. Actually, I have to go run real quickly to pick up my daughter. I'll probably take like 10 minutes and I'll be right back. Could we take like a 10 minute break?

 

Yeah, sure. We'll just stay in the room here.

 

Okay, yeah, I'll pause it.

 

Dixit in post as they say.

 

Okay, all right.

 

All right, see you.

 

I'm back. Heyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy

 

Cool. I want to grab some food.

 

perfect. So you'll let the editor know that you have it.

 

Say what?

 

You'll let the editor know that

 

Oh

 

we

 

yeah, they'll

 

had

 

figure

 

a

 

it

 

break.

 

out.

 

OK.

 

Yeah, they'll figure it out. I don't think they at least blindly publish.

 

If

 

Yeah,

 

so,

 

I'll put

 

sorry

 

a note

 

for

 

in.

 

everybody listening right now.

 

It's like the old dead air, you know, signs they put up in front of the TV. We will be right back. I'll see you so we were talking CSS pages. Oh, wrong browser. That's why. OK, cool. So there's a. Yeah, I don't think there's much to talk about in terms of the integrations.

 

Yeah, but

 

Like,

 

kinda went over that already.

 

yeah, okay. All right, let's see. Oh, we'll put that in the notes to your little thing yesterday. Let's see. Here we are. Okay. So, I don't think we got about 20 days. It doesn't have to be real long, it's fine. So, all right, we'll end the edit here. So now that we know about Uno, have you been using it at all? Have you tried any projects or anything?

 

I tried it in my video that's on my YouTube page, plug Eric.video, if you wanna check it out, but it's kind of a lot of interest. So when I used it, I was just kind of playing around with it in that context, trying it out different features. So I went through most of the preset, a bunch of the presets. So let me go over a few of them. So the Uno preset, there's a Uno preset, which is default and that includes the Uno preset, or Uno preset wind and Uno CSS preset wind and Uno CSS preset mini. And that's kind of like the one that you want to use if you're just checking this out. This will have all those different tailwind, tacky on windy CSS utility classes in there that you'll want to use. It also kind of bundles in this mini preset which gives you additional features for different variants mode and an at layer CSS native at layer is supported. So you can do layer at layer foo and then your CSS classes. And it also has a theme available. So you can use a fully customizable theme property in your config, which allows you to create certain, they're almost like design tokens in some ways. It kind of reminds me of it. If you've used design tokens or you can put in. different brands and components and well, mostly colors in this case. And then you can also in use some customized rules. And that's all part of preset mini, which is a part of the default preset. Uno preset. And then I used a couple other ones, uh, attribute a fi, which that enables attributes in your presets. And the way that kind of works is you, you might have a preset that has something like. blue-400, which is like background blue with the hue of 400. And you might have hover colon bg-blue-500. And then you might have dark colon blue-500. And what you can do with this attributes is you can use HTML attributes inside your inside your HTML elements. So you can add an attribute equals and then then have a list of all the kind of related attributes to BG, which is the background. So you can put blue dash 400 or hover colon blue dash 500 or dark colon blue dash 500. You can also do things. I was playing around with it. You can just put flex. So if it only has one attribute, like you normally inside a class, like if you're using content. I think it's like justify center or line item center. And you can actually use those as attributes on the HTML element. So like in a button attribute, you can just put flex and that'll add display flex as a CSS property. And you can do the same thing with with color text color red. So you can add these attributes in instead of having them in as class instead of having them as I liked it because we have something similar in Amplify UI. We call them style props. So it was kind of a nice way to do it. I don't know. The one thing I did notice is after I added these in, I got a lot of feedback on my YouTube video about that. And a lot of people are like, why would you want to add classes as attributes? And I was like, well, I think it's just handy to add in. rather than putting in a class in its nice to group similar classes together inside as an attribute. But, you know, some people are really against it. What else? You can also,

 

So

 

yeah,

 

let

 

value

 

it...

 

list attribute, attributes is what I'm talking about where you can have just m dash two is an attribute.

 

So basically if I'm understanding presets, they're basically a sort of a template. I don't know if

 

Yeah,

 

you

 

they're

 

call it

 

like,

 

a

 

like

 

template.

 

plugins.

 

So here's

 

or

 

a predetermined

 

template plugin.

 

list of different capabilities or different classes and things sort of as a toolbox for lack of a

 

Yeah.

 

better term.

 

Yeah. So when you set up, like in beat, when you set it up, you add in Uno CSS as a plugin to beat. And then inside it, you can add in each preset. And then you can, the default preset is that preset Uno I just talked about, but then you can add in presets like for Attributify.

 

So your presets are different things. They're not like the same thing, just different styles and sizes and shapes or whatever.

 

Yeah, you can think of them like different plugins, like this adds, this is the attribute of full five one adds in, allows you to have classes as attributes on your elements. Another one, maybe this will clarify it a little bit. Like another one is tagify. So it's called preset dash tagify. And this does something where instead of having, you know, you have your spans or and all your other HTML5 tags. Now you can actually have a tag be a name of one of these classes. So let's go back to Flex. So you can actually have a tag that's Flex inside your app. So you just put Flex. That would create basically a Flex tag and it adds in a CSS class for basically a CSS flex inside there. So you can do that for flex, you can do that for text color. So that's kind of another way where you can start like, tagifying your classes.

 

So what's the benefit of Tagify? I'm looking at it and if I'm understanding the docs correctly, it's basically when you only have one attribute that you wanna add to a one class that you wanna add to a specific element. So instead of div class equals flex, it's just a flex tag. Is

 

Exactly.

 

that right?

 

Yeah, I think it just saves you like a little bit more time. So instead

 

Mm-hmm.

 

of having to type out, of course we all use M and VS code. So maybe this is not that big of a deal, but instead of writing div class equals flex, flexbox, n tag, close div, you can be like flex tag, information there, close flex, or text-red. I thought this wasn't quite as useful as Attributify, but I think that's neat that you can add it in there.

 

Thank you.

 

Another one I found, one I found worked well with the tag one. The tag of 5% is called icons. It's

 

Mm-hmm.

 

called the icons preset. They say it's used any icon with pure CSS for Uno CSS. So in this case, there is this Iconify JSON GitHub repository. Have you ever used that?

 

I have not. When I was reading the docs earlier, that was the first time I'd noticed anything about icons in CSS. I mean, that makes, from a performance standpoint, I can see why that would work sort of like a what, a base 64 encode of an image, whereas just, you know, you're not downloading some big huge thing or, you know, fonts or images or something. It's just straight CSS that's right there, so it's going to be more performant.

 

Yeah, yeah, you kind of outlined it in there. The iconify set, there's an icon set is like a master set of all these open source icon sets. So if you look at the, if you look at the collections, it has everything from material symbols, material design icon, solar, table or bootstrap, it literally has like a hundred different icon sets inside of it. And you can install, you don't have to install the whole thing. you can install a subset of it. So they're all referenced with an at sign. So you can install just MDI or just Solar if you want. So you install this as an NPM module into your app as a developer dependency. And then what you can do is you also install the preset icons. inside UNO CSS. And what you can do is inside your classes, you put I dash and then the name of the icon set. So like if you're using VS Code, that's an icon set, VS Code dash icons, you put I dash VS Code dash icons. And then depending on the icon set, you put dash and then the name of the icon. which could be like circle or square or maybe you have a pause button or start button or something like that. And so that class gets interpreted and that div then becomes that class icon. And it's an SVG icon that's inside your app. So that's pretty neat and there's a bunch of configuration too. You can make them inline block or you can make them blocks or you can vertically align them and things like that too. easy way to add icons to your application. You can also add your own custom icons too if you don't wanna use, like, Spotify.

 

Now for a lot of these are just in black and white, so I'm assuming since they're CSS you could also add color to them. Is that a safe assumption?

 

Yep, yeah, you can take them and add fills to them. See the CSS fill property or just add a color class and, or color, yeah, color, text color class and you can change the colors of them too. Depends on the icon set and what they kind of give you and what they allow you to change the colors for. But yeah, I did, when I was playing around with it, I took, it's called evil icons, which was a cool name. And so I looked, I took the evil icon set and I took like a pause and, and I took like an arrow up and then I changed the color and everything seemed to work fine on it. It was pretty neat. Now you can use this as like a div tag and then add a class and then add in that utility class to i dash and the name of the icon set and then the name of the icon, or you can use this with the tagify preset icon. So it's kind of hard I have them on a podcast here, but in that case, you can have your icon just be the tag name. So it would be I dash evil icons or EI dash up. And then that would be the icon name. And then it would just show up. So that was kind of neat combining those two presets together to do things. I'm not a big SVG icon guy, but I, there's, this icon of five is the first time I've kind of been playing around with it. projects, any, my designer just gives me SVG icons or extract them out of Figma or wherever else, but it was nice having like really nice, uh, icon set playing around with to play around with. Do you guys use icon sets at your job?

 

Yes, we use Ford Awesome.

 

Oh yeah,

 

So, Fond

 

that's

 

Awesome.

 

a great one too.

 

Yeah, so

 

Fonk awesome.

 

we have our, you know, we pay for create our own custom set of icons and we just import them and if we need to add one out of there, we just, the nice thing is that you can say, okay, I only want these icons instead of the whole world, you know, and then so you have your own custom icon set, if we need to add one, then we add one and do it that way. So yeah, that works pretty well. So what'd you

 

Nice.

 

think about

 

And maybe

 

documentation?

 

I can go over one more preset too,

 

Oh,

 

if

 

okay,

 

you like.

 

go for it and then we'll talk docs.

 

The last one I just want to mention is the web fonts preset. And that one is allows you to add any of the Google web fonts just really quickly to your app. The way it works is you inside your, um, inside your configuration and your beat config file, you would put a preset web fonts. And then you can put the provider and the type of fonts that you want without having to install them all. And then. automatically generate the CSS. So like for example, in their docs, they have you wanted to add in like fire code or Roboto and it's the providers Google and then you can it'll automatically do the import of the URL for you and grab all the fonts for you So that's pretty handy too

 

Yeah, it looks like it also supports Bunny. I have never heard of Bunny before now. And Fonts Share, so.

 

Yeah, I've always used Google Fonts or I've downloaded the font directly into my app. I

 

Thank

 

don't

 

you.

 

know what, are you a font guy? I don't know.

 

Browser fonts is about the extent of my knowledge, so.

 

Ha ha ha!

 

Now I haven't really played with fonts too much. But yeah, that's cool. I like this that you can just sort of pick and choose when you're from different sets. That's cool.

 

Bunny is a price. It says it's a privacy friendly Google font. So if you're like a

 

Yeah.

 

Google font person, but you want Like privacy enabled Google fonts, I guess you use bunny

 

Wonder what that means, privacy enabled fonts.

 

I don't know.

 

I

 

I

 

mean, people can't steal

 

guess,

 

from your website.

 

why not just like download the font and then do it that way? We had a discussion a few years ago at an old startup I was in. Like should we use Google Fonts or is that going to cause like slowdowns or issues later on? Or should we always use our own fonts that we downloaded? I don't know if we ever, I think we ended up just downloading all our fonts and importing them that way.

 

Yeah, the Bunny Fonsta says they have a zero tracking and no logging policy.

 

Ah.

 

It helps you stay fully GDPR compliant, put your user's personal data into their own hands. Hmm. Not sure how that works, but anyway.

 

Google funds work great for most people.

 

Uh-huh. Yeah, I'll have to maybe play with fonts at some point. I struggle just to get a decent dashboard to look good, just because I have no design chops. I just, somebody give me a design and I'll implement it, but that's about it. One of those things I should probably learn if I want to do front end, huh?

 

This is...

 

So what about the documentation? I know when I'm working with Tailwind, I live quite a bit in their docks. Is it pretty good? It looks like it's sort of a search and find type of thing instead of putting it all out there for you.

 

I think their docs are excellent. A little tidbit when I was learning this, I didn't have access or I think they changed their website when I was looking at it, but the long story short, the website is great, it has lots of good information and it's fine to go through and they did a great job of finding information on it. As always, when you probably get into the sticky wicked of configuration, like the happy path is great for Uno CSS. I'm certain when we get into a little bit more difficult issue, when you get into like off the happy path and you're doing a bunch of overrides configurations, then I would say where the documentation probably isn't as robust. But for the most part, you know, it's been great. I haven't had any real issues. It looks like I want to say this is a website that's created with. I wonder if this is created with another view product. What is this created with? It looks like it's dog food-ing, you wanna see a sass for sure, at least.

 

I would assume so.

 

I think it's

 

It looks

 

using

 

like

 

beat

 

it's

 

press.

 

nuckst. Looks like it's nuckst.

 

Oh, maybe it is not. I thought it was thinking of either beat press or nox, I'm not sure.

 

because my dev tools said next-hand viewer detected on this page.

 

Okay.

 

Yeah, the documents are interesting because they're, you know, if you're familiar with the tailwind docs, you know, there are things in the middle and you've got your nav bar on the left side and you can click and go right there. Whereas the UNO CSS stocks are interactive, so there's a big search bar up at the top and then it has a type of head type feature. So if you type typing margin, then below you'll get a whole list of different margin, margin left, margin top, and then on the right gives you some documentation. So

 

I

 

instead

 

will see

 

of...

 

there's two different ways to your point that you can, there's the uno css.dev, which is like the guide, how to get started, configurations, integrations, things like that. Then there's interactive docs, which is more of a type in what

 

It's

 

you're

 

a

 

looking

 

reference.

 

for,

 

It's a reference.

 

like more of a, exactly more like a reference, where you can just type in margin and then there's the playground,

 

Mm-hmm.

 

which is really slick where you can type in classes and see in the left-hand side. I'd like in an interactive playground and it updating in real time. So I can type in like text to Excel and it, it automatically change it. Uh, and even has what's really cool. I don't know, I wonder what library they use as I am typing into the playground. They want to see us plus playground. This looks like an HTML file with all the tags on there.

 

Hmm.

 

It's giving me like a type ahead auto complete in the browser, which is really cool. So I can do it in, and they're typed. By the way. their playground they're using Attributify. So instead of putting classes everywhere you just type in the attribute right on like the div tag for text to excel and it just does everything for you which isn't really nice. So it's pretty slick I mean definitely I like it like it like that.

 

Cool. Yeah, maybe we'll have to get Anthony Ant-Fu on here sometime, maybe gives a little more detail. Behind the scenes goodies, that's always fun to get.

 

Yeah, has he been on here?

 

No, I've never had Anthony on before. No, the name, like most everybody else.

 

I don't think he does too many podcasts, but it'd be great if he does.

 

Yeah, definitely retop to him for sure.

 

Mm-hmm.

 

For sure, I know he was, we were talking earlier, he was sequestered in a hotel in China for a while

 

Ha ha ha!

 

last year, so as I understand, he's not sure where he's at, where he's based, but you know,

 

I'm

 

have

 

guessing

 

to talk

 

that guy's

 

to him.

 

just really busy, just with all the great things he's doing for the Vue community and

 

Oh yeah, he's in a lot of stuff for sure.

 

the web development community in general.

 

Cool, all right, with that we'll wrap up our talk about UNO CSS. Now yet another tool in the burgeoning web development world of ways to make your content look good.

 

Mm-hmm.

 

for sure. So that will move to PIX. PIX are the part of the show where we get to talk about things that we like to talk about that may have something to do with tech and web development, or maybe not, just depends on, I guess what your thing is for the day. One of the things I'll bring up is an interesting article about chat GPT. And if you've listened to, you know, read anything on Hacker News, I swear, half the articles are about chat GPT anymore and all the different tools that people have been creating And I think chat, as of right now, chat GPT-4 is the most recent version. It's been interesting to see some of the stories about it. You know, it's like anything else, you know, everybody's on the bleeding edge. Oh, this is great. It was awesome. And then you start to slow down and say, well, maybe there's some issues that

 

Thank

 

we

 

you.

 

need to talk about. I remember when it first came out and how Google flopped miserably trying to get it out the door without making sure it was working correctly. And some of the issues with the Bing bot, AI is going to be like any other tool, modeling, whatever, over its garbage in, garbage out. So it's only as good as the programmers behind it. But here's an interesting story. I came upon an interesting story about the impact that can have on an individual. Jonathan Turley is a law professor at George Washington University, and he's a pretty big commentator on legal issues. You'll see him in different publications. interesting article in the Washington Post recently that referred to a post that he has on his own site, JonathanTurley.org, about how he was contacted by a reporter, I believe it was, about a claim of sexual harassment that was never made against him on a trip that never occurred while he was on a faculty where he never taught.

 

Wow.

 

That's a quote from the first paragraph of his blog post. on a cited Washington Post article that was never written and quotes a statement that was never made by the newspaper. When the Post investigated it learned that another AI program, Microsoft's Bing, which is powered by GPT-4, repeated the false claim about him. So in other words, something that never happened was made to appear as if it did happen. So to me, that's sort of scary. I'm probably one of the few people that hasn't jumped in and played with this stuff for the and the language models and so on. Probably because I tend to like to sort of sit back and see how things shake out before I really dive in. So I'm reserving judgment at this point. You'll hear a lot of people talking about stuff like this in terms of writing code, in terms of helping people write code. You already had something sort of like GitHub co-pilot, right?

 

Thank you.

 

And other tools like that. And you hear various opinions. Yes, this is gonna replace all programmers. And no, it's not. help you do things better and faster because this will do some of the lower level stuff for you. There's good and bad to it and I can certainly see its benefits provided they're used properly. You know, not used as a cure all. Oh, this is going to replace Google is one of the great ones I've heard.

 

Ha ha.

 

Really? Okay. I don't know about that. But anyway, so the title of this blog post by Jonathan Turley is The Famed by ChatGPT. my own bizarre experience with artificiality of quote unquote artificial intelligence. So I'll drop that link to that in the show notes for sure. But then with that, we get to what I like to refer to as a high point of every podcast, although I'm sure some people would contest that assertion with our the dad jokes of the week. So not too long ago, a cannibal crashed my dinner party and really demanded that I feed him. I gave him a piece of my mind.

 

Bye bye.

 

Oh no! My drum joke's not working. It says it's working but it's not working. This is not good. Okay, anyway, well, I'll have to live without the rim shots for the day. Maybe I'll get editor to add these in later. There's none. So, you know, being an older person, I guess, I can say back in the day, my day, excessive use of commas was considered a very serious crime. It usually resulted in a long sentence. Right,

 

Let's get one.

 

we'll say that. And then, people say from a health standpoint, people say that circumcision is not painful, because the baby's so young, but personally, I couldn't walk for a year after I got mine.

 

Bye-bye.

 

But I'm shh. All right. So imagine the drum jokes. Anyway, those are my picks. You got any for us, Eric?

 

I feel like I should talk about Bard, because I was trying, that's Google's version of chat GPT4, has different language models, completely different that way,

 

Oh.

 

but it's a similar interface where you can ask it prompts and it gives you answers. And so far I've felt it's a little underwhelming compared to chat GPT. Just I've tried some prompts in the past, like create a view three app that does this and then it'll be like, sorry, can't do that, or it'll tell me I'm a text-based AI capabilities.

 

Ha

 

So

 

ha.

 

it feels like the prompts aren't quite as good as chat GPT. It feels like I barely, like most of the time chat GPT would try to do something, at least regarding code. Maybe I just, I'm not a good enough prompt prompter. That's funny. That story that you just mentioned, I guess they call it hallucination, like your AI hallucinates, makes up facts and stories. I

 

Mm-hmm.

 

wonder if that'll be an issue as things go on. It's funny, this, this whole cycle of AI and chat GPT. Like I have fully admit last year and the year before I jumped into Web 3. Be first, got

 

with the

 

really

 

whole

 

into

 

crypto,

 

it.

 

crypto and

 

I've been into

 

blockchain.

 

I yeah, I did crypto. I had own crypto for a while. And but when everybody started, when crypto started going crazy, everybody is doing blockchain development. I started learning it and I jumped in. And it's so funny. Like how everybody. quickly turned on crypto and blockchain in general, not everyone. There's still some amazing products, amazing people working in that space that I highly respect. But it feels like in general, it's definitely cooled down a lot. And now everybody's jumping on the AI bandwagon. I just saw a good friend of mine just tweet, like, hey, I'm dropping everything for AI. This is I'm all in. And then even I saw some tweets from other people saying, like, if I was beginning my career, I would just go all in the AI right now. I wonder if there's any parallels of the Web 3 mania that was happening a year or two ago and what's happening now. I guess in some respects, a lot of people are saying Web 3 didn't have very good use cases. Like there was nothing ever, someone was like, wow, I really need to do this because Web 3 really solves this thing. Like blockchain is interesting and decentralization is interesting, but there wasn't any like a killer use case. And now people are all finding like, well, at least I can use chat gpt to give me 10 or a blog article I'm writing, or I can use chatGPT to answer some questions that will much harder I could answer. So it feels like there's more use cases, but I don't really find like there's a killer use case for it. But man, the hype is just insane right now.

 

Well, I know in the education world, some of the things I've been reading about is how, which to me is rather unfortunate is how kids will use it to write papers, you know, generate papers or do homework assignments or find stuff like that, which is, what's, aren't you supposed to be learning stuff by

 

Ha

 

doing

 

ha

 

it

 

ha!

 

on your own? You know, not sort of defeat the purpose, but you know, I don't know, and you know, issues with professors trying to determine the difference between an actually written paper versus one written by AI. So there's some, some tools that way for sure. It's interesting that people say it's almost like a sentient being. Well, no, it's really not. I mean, like I said, garbage in, garbage out. It's not going to be able to think, actually, and come up with stuff on its own. It's basing off what it's been trained to do. You know? So.

 

Yeah, don't get me wrong. I'm seeing a bunch of different use cases. Some bad, like you're talking about, kids plagiarizing or cheating using chat GPD to write their papers. And then I'm seeing, I am seeing some use cases coming out, which is way more than I saw in the Web 3 world where everybody was still like, well, we can create NFTs and pay for JPEGs. And wasn't quite where it is. Now, so I'm excited though. You know, It's really neat. So I guess Bard would be my pick. And also I'll just throw out a quick plug at Amplify. As a developer advocate, we've been releasing a lot of cool connected components that work with our AWS Amplify system. So we recently created a storage manager, which is, I think the last time I went on, I may have talked about a file uploader. This is kind of like the second revision of a file uploader, but it has a lot more features. It allows you to upload files. It's like a React component. not really useful for a view developers who are listening right now, but I'm sure if you have a React project and you need to connect to some AWS services, check that out.

 

Yeah, we did a podcast, it's been a year. I'm not sure how long ago it's been where we had you on to talk about view at

 

Yeah.

 

AWS.

 

Yeah, and we still do tons of view. There's still great support for view for AWS Amplify, for AWS Amplify. And then we have some features that are React only and some are view only.

 

Right. Right. And, uh, we'll drop a, he mentioned a video, uh, that he was doing yesterday. It was sort of a, was it, was it a AMA type thing or just you're demonstrating how to use tailwind or, you know, with Amplify?

 

Yeah, yeah, I did. I'm doing more live streaming for fun, just part of my developer advocate work. And just it's kind of fun talking to people. So I've been doing more of those often. So I'm trying to do one one a week, just like an hour, just do Q&A. I'm also just building apps live on on my YouTube channel. I'm going to set up Twitch soon. I just haven't done it yet. But I'll probably like live stream probably an hour a week and just build fun apps and try to educate people on amplify and not even just amplify just like web development best practices in general. So I've, I've, it's, uh, it's definitely challenging a little bit to do live string, but I'm, I'm getting used to it. It's fun.

 

That's being risky.

 

Yeah.

 

You get stuck in something. Sorry, I'm gonna pause for a minute while I figure what the heck that's going on here, right?

 

Exactly. I do leave the, I have been leaving the live streams up after the fact though. So if you want to watch it on demand, you can. But I'd also just recommend the YouTube channel Eric.video where I have more, more specialized videos on different topics like UNO CSS. I did about a 20 minute video on that. And that's where I got a lot of feedback

 

You

 

and

 

have

 

a

 

to

 

lot

 

watch

 

of people

 

the video.

 

watching it.

 

You can see where I sort of bombed, Eric.

 

Yeah.

 

I jumped in the middle of this video. I was like, oh, I forgot about this. So I turned it on, and he's creating a new app. And I'm watching the chat. And he's like, well, for this particular case, we're going to use React. And for whatever the reason was, I don't remember. And somebody's in there, where aren't you using View? And I got in there and said, what? View, you're a heretic. And he finally

 

Ha

 

got

 

ha

 

down to

 

ha!

 

my thing and started laughing. I was like, oh, good. I was hoping he recognized me. I think it's some net

 

Ha

 

jobs.

 

ha.

 

Well, maybe it is the same thing, but cool. All right. Well, thanks for coming on me again man, it's good to have you as always and I'm trying to think what else I was gonna say that's it so if you have any suggestions For topics or anything you want to talk about you can always ping me on Twitter at wonder95 Or we are also at views on view and Eric is what Eric CH is that right?

 

Yep, Ericchch, E-R-I-K-C-H on Twitter, and DMs are open.

 

Alrighty, with that, we'll wrap it up. Thanks to everybody for listening and we'll talk to you next time on Views on View.

 

Thanks.