Building Beautiful Components: Combining NPX, Radix View, and Shadcn - VUE 228

Cody and Steve join this week's panelist episode. They delve into the world of Shadcn, Radix UI, and the advantages of a unified design system built upon tailwind CSS and headless components. Additionally, they explore the configuration process in Nuxt, including TypeScript integration & auto-import settings, and many more!

Show Notes

Cody and Steve join this week's panelist episode. They delve into the world of Shadcn, Radix UI, and the advantages of a unified design system built upon tailwind CSS and headless components. Additionally, they explore the configuration process in Nuxt, including TypeScript integration & auto-import settings, and many more!

Sponsors 


Socials

Transcript


Steve (00:01.819)
Hello everybody, welcome back to Views on View. I am Steve Edwards, the host with the face for radio and the voice for being the mime, but yeah, I'm still your host, you know that. Flying with me today, as always these days, is Mr. Cody Bontacue, how you doing, Cody?
 
Cody Bontecou (00:17.258)
Hey, hey, I'm doing just wonderful.
 
Steve (00:19.931)
Yes, Cody suffers living in Hawaii. We felt we all feel his pain as we look out at the window with the cold and rain. Although I was supposed to get back up in the 80s this weekend, so I'm looking forward to that. Like to hold on to summer as long as I can around here. I'm not one of those people that just can't wait for fall and pumpkin spice and Halloween and all that stuff. I want sun and warmth and shorts. Anyway, that's me.
 
Cody Bontecou (00:26.102)
Hehehehe
 
Steve (00:45.575)
So it is just the two of us today because our scheduled guest was unable to make it, unfortunately, and hopefully we can reschedule that person for later. But on the fly we said, what in our vast knowledge of wisdom and experience can we talk about? And so we decided, actually it was the only thing we could think of, that Cody's going to talk to us today about shad. And no, we are not talking fish.
 
I go shad fishing with a buddy of mine by myself quite a bit actually. ShadCN, it's a component library. And it's a good thing because there aren't any component libraries out there, right Cody?
 
Cody Bontecou (01:28.032)
Yeah, just a couple, but this one's worth knowing about.
 
Steve (01:29.459)
There's just a few.
 
This one's worth knowing about. So I've been looking at it and anyway, I'll let Cody take us away and tell us about his experience with SHADZ-E.
 
Cody Bontecou (01:42.806)
Sure, let's see. So if some of you follow the Twitter drama, this is ShadCN is the latest and greatest UI framework. In fact, the creator of it, I think he just goes by ShadCN on Twitter, just got hired by Versel. And so if you're familiar with Versel, the company behind Next.js,
 
I believe they use Shad entirely for their UI. And there's also some other pretty unique things I'm sure we'll talk about later. But enough of the history, ShadCN is a UI library, I guess if you wanna call it that, a component library, built on top of RADx. And it brings...
 
One, just like it's beautiful, like the components that it's very, very nice. They're built using Tailwind CSS and it's purely accessible, which is also really important for a gamer like myself. You know, you can tab through your UIs incredibly effectively, you know, hit that enter button, hit that escape button, and you know.
 
I'm sure there's other areas of accessibility that I just personally haven't had to deal with, that it's a surprise. And yeah, I don't know. I've been using this in just personal projects lately and it's really nice. One of the key features, something they pride themselves on, is that Shad is not a...
 
Okay, they say this in bold. This is not a component library. It is a collection of reusable components that you can copy and paste or use the CLI to add to your apps. And so there is no like NPM installed necessary. You just copy and paste these view components in your application and it works. All the views, all the interactivity, all of like the...
 
Cody Bontecou (04:01.91)
you know, mobile support, everything you can need from like a UI, like these view components, it comes with the project.
 
Steve (04:12.423)
correct one thing here you're already off on the wrong foot Cody missing something here you don't necessarily copy paste they it looks like they have a CLI that you can use and it basically copies creates their components and puts them in your directory
 
Cody Bontecou (04:17.986)
Yep.
 
Cody Bontecou (04:29.726)
Right, you can do either. So the CLI just does that for you. So there's like an NPX command that will just kind of create like a directory structure for these components and kind of connect them easily. But it's also copy and pasteable. And basically like what that means is there's no additional like external packages that it needs to download outside of.
 
I believe like the core view functionality. Just so like to give an example, if you wanted to use something like a viewify or like prime view, you can't just copy and paste their source code into your project due to what I'm assuming that they have like dependencies that also come alongside that package, which will bloat your...
 
your project. We're at ShadSyan. So ShadSyan is a layer, I guess we kind of skipped a step here. So ShadSyan is a layer on top of something called Radix view. And so ShadSyan is just like a opinionated UI.
 
like a design system on top of these other headless UI components that RADx provides. But again, I believe it's the same philosophy, like RADx does not require any external dependencies. RADx just, these components are copy and pasteable. Or you can use their handy CLI to just run a terminal command to get them into your project.
 
Steve (06:16.083)
So what is, okay, so I'm looking at the RADx docs at radix-view.com, and it's talking about how it's designed for view. So what is Shad doing on top of RADx? Is it taking away the styling and using Tailwind? Is that it? Or what's it, do they both rely on Tailwind?
 
Cody Bontecou (06:35.686)
Yes, right, right. I think all Shad is doing is adding like a unified design system on top of RADx. And so it's, so if you've ever been to like Vercell, they're very much just black and white and like grayscale. And I believe that's like what Shad is doing, Shad Cien is doing. Is it...
 
It's just kind of adding that Tailwind CSS along with these headless components. So typically with like a headless UI component, it just comes with like the, the view logic, the JavaScript, the JavaScript logic, and it's up to the developer to customize the UI and the CSS of it. Um, and Shad CN just like takes it one step further and they just do all of that for you. Um,
 
So it's copy and pasteable and beautiful, but it doesn't take away from the ease of customization. If you do wanna change like the color of your buttons or whatever you may have, it's all based in like CSS variables. And so you can alter your design systems through that, or just go into the component that's now a part of your project and alter some of the source code there.
 
Steve (07:59.743)
Okay, so looking at the installation docs for Shad, it has it for frameworks. I don't see a view option here. So if you're using V, you just take the V8 install option then because it's got Laravel, Astro, Remix, Next and Gatsby as well.
 
Cody Bontecou (08:17.942)
Um, so, um, are you looking at Shadzian view or Shadzian? Okay. So Shadzian, just to clarify Shadzian and RADx are, um, they come from the React world. And, um,
 
Steve (08:23.647)
Shazian.
 
Cody Bontecou (08:36.162)
There's a wonderful dev, I think he goes by Zernonia, yeah, Zernonia, who is creating, basically recreating these components, but in Vue. And so there's a ShadCN Vue as well as a Radix Vue package. Yep. And so far in my experience, it's pretty much feature complete. Like I haven't ran into any issues in the Vue.
 
Steve (08:50.207)
Gotcha.
 
Okay, I got you. Now I'm looking at it.
 
Cody Bontecou (09:04.83)
in these view components that the React components don't have. The only difference really is maybe the React side is slightly better documented. But I've been able to look at the React docs and see maybe the prop usage or just examples of how it renders. And I can put those props into my view component, and it works perfectly.
 
Steve (09:29.427)
So that's not considered heresy using react stuff in view.
 
Cody Bontecou (09:33.482)
Well, so I was just looking at the RADx source code and I don't actually think there's, I assumed it was just gonna be some magical wrapper around the React code, but it looks like he just actually rebuilt a lot of these components in PureView. So I'm a fan of inspiring one another between frameworks.
 
Steve (10:02.975)
Sure, sure. Oh, I'm not some get off my lawn kind of guy. I was just going for the funny.
 
Cody Bontecou (10:09.434)
No, for sure. So it's actually funny, the reason I got involved with this was I was trying to rebuild a personal project in Next.js and Radix and
 
It was just, I was just running into walls, just not, I still struggle with Next and React. And so it just like put me down the rabbit hole until I realized, oh, it also exists in Vue. And I was able to continue on with my Next project and it was just so much faster for me. But.
 
Yeah, again, I didn't there all the components are the same. I see in like the shadCN views issues that there are. Like feature requests of certain components. And so my assumption is these are components that are in the react version, but not yet in the view version. Um, but I could be wrong there. It could just, maybe they're just evolving and trying to implement even more components.
 
Cody Bontecou (11:20.342)
But yeah, so that's been honestly really fun. I highly recommend people checking these things out. It kind of solves a lot of UI problems that you probably didn't even know you have in terms of accessibility, but it also adds beautiful animations, beautiful styles, and then because of this preset design system, it's very easy to...
 
Steve (11:20.794)
Alright, okay.
 
Cody Bontecou (11:51.53)
just kind of build apps very, very quickly.
 
Steve (11:58.367)
So, okay, so yeah, I'm just looking to the docs. So you install this, or you got the CLI, the NPI command, and then you're manually configuring your Tailwind files, it looks like. So then when you do, say you go to install a component, so there's a, for instance, a commonly used one, at least one that I use a lot, is a table component. And so you run npx shadcdn-view at latest add table.
 
Cody Bontecou (12:21.213)
Okay.
 
Steve (12:30.372)
So then that just installs the table, table caption, table header, table row, table head components. It knows where to install it in your directory or what exactly does that do when you run the command.
 
Cody Bontecou (12:42.026)
Yes, yes, so there is like a bit of, like you said, there is like, at least in Nuxt, where I'm familiar with this, there is like a bit of just like a configuration that needs to take place. And really it's just kind of TypeScript configuration or like auto import configuration. But there's also this JSON file, this configuration file that...
 
basically, are you using TypeScript or not? Which framework are you using? Where is your CSS file? And where would you like us to install these components? And so that's kind of where that configuration occurs. I haven't actually tried running that command without the JSON file, but I assume there's some defaults, or maybe the CLI just yells at you.
 
But for example, I just gave my, I just told it like where to put my utils files and where to put my component files and where my tailwind CSS config is, and it's good to go. So when you run that, that npx install command, it'll just place it wherever you prefer.
 
Steve (14:07.027)
So it's not assuming, so you can't do it without TypeScript, right? For those of us who put Draggers who have not seen the light and dived fully into the TypeScript world. Or for those of us who have dived out of the TypeScript world, there's a lot of drama has been about lately. Yeah, interesting, okay. So then it adds it in and then you're basically then gonna go in and instead of having this whole package under node modules.
 
Cody Bontecou (14:18.408)
I'm sure you can.
 
Cody Bontecou (14:24.98)
Right, right.
 
Cody Bontecou (14:36.397)
Yep.
 
Steve (14:37.059)
Or somewhere else you're going to have it in your actual project itself and then you can tweak and mutilate to your heart's content, right?
 
Cody Bontecou (14:44.914)
Exactly, exactly. And so at least like for the button component, for example, in one of the files that comes alongside that component is just like a JavaScript object called like button variance. And so this kind of, this is...
 
It just does some like functional magic to allow you to say like button, put in a variant prompt and say, for example, like the defaults are like destructive or outline. But you can easily just add in your own variant there if you want to. And so that's one nice way of like configuring your CSS or like the visual side of these components if you want to tweak those.
 
And of course you can totally change the prompts, you can change the emits, you can change everything because you're just getting these raw view components. So there's nothing stopping you from tweaking it however you want.
 
Steve (15:52.563)
So then it's pretty bare bones. It looks like everything just installed like with the gray border, light gray text. And there's gotta be some tailwind in there to configure some stuff, I'm assuming.
 
Cody Bontecou (16:02.118)
Oh yeah, see, you know, that's the funny thing is I thought these were like pretty bare bones, but for example, like the toggle component has like a lot of code behind it. And I guess maybe I just didn't realize that how much logic might be in a toggle component. But yeah, there's...
 
There's a surprising amount of CSS that like tailwind CSS that comes with it because it's always it comes with dark mode and light mode in your code or like all that tailwind comes with it, dark mode, light mode, dark mode, hover, light mode, hover, focus rings, like all of these little areas of CSS that like at least for me personally, I don't tend to pay attention to until way down the line. This just comes with all of that right from the get go.
 
And so it's, again, it's just another benefit because now you have kind of like a fully featured component that kind of encompasses every problem you might need to solve. And then you can just kind of tweak those values right then and there instead of hoping to someday come back to it later.
 
Steve (17:22.483)
Yeah, it looks like one of the things that does is override the tailwind resets. Cause if you look in the typography section and under getting started, it has a whole list of styles for H1 through H4, paragraph block quote table and so on. And I know that out of the box tailwind has its own resets that clears all that stuff, you know, wipes away the browser resets. So even if you put in a H1 tag in your
 
in your component, in your HTML, you still have to style it. It doesn't do the default, okay, it's this size font and it's bold and it's got this much margin and all that kind of stuff. So it looks like it has some opinionated settings for typography at least.
 
Cody Bontecou (18:11.458)
Definitely. And I think that's kind of like the philosophy of the ShadCN is it's very opinionated. Which, yeah, for me I enjoy. Like, but it's very opinionated, but it gives you the freedom to rip all that out if you need to. And it's just in simple config files, there's nothing special about what they're doing. It's just tailwind, you know, tailwind config and things of that nature.
 
Steve (18:30.143)
Mm-hmm.
 
Steve (18:43.763)
Yeah, interesting. And I guess that's a little.
 
I know one of the frustrations with bootstrap that I've always heard is that it gets you 80% of the way there and then 20% of it you're trying to figure out how to heck to override it or customize it because everything is so hard-coded and built into it. Yeah, it's something I've run into, you know, with using Bootstrap butte at work. So yeah, that's nice that you have the full capability of overriding it from the ground up.
 
Cody Bontecou (19:17.982)
Yeah, I agree. It's kind of nice to have both. I personally enjoy the super-opinionated UI libraries because most of the time I'm just trying to solve a problem. Like...
 
It's not that I'm trying to solve a similar problem that's just super well designed. It's just, I wanna solve this specific problem and get it in front of people and see if they like it. And so I like these like opinionated UI libraries, like, oh, drop down menu, done. I don't have to worry about anything else. And same with pretty much every aspect of the app. And of course, if I need to add a little something here or there, it's easy, but.
 
I rarely do. But we'll see. I know one of the problems with bootstrap, at least last time I used it, which was probably, I don't know, five or six years ago now.
 
was that at the time, Bootstrap was so popular that every website looked like a Bootstrap website. And so that was a problem. And so what once was like a beautifully designed, easy to use like library to create nice websites ended up just being like, oh, it's another Bootstrap website. It's not great. And so who knows, maybe Shad, Sien will also get there too.
 
Steve (20:21.406)
Right.
 
Cody Bontecou (20:44.417)
But they also include different styles. So there's like a New York style versus a default style. I don't know if that's eventually they're going to add more styles down the line. But yeah, we'll just have to wait and see.
 
Steve (21:04.947)
I think they've got a little incomplete documentation because they're either that or they're copying from somewhere else because they have a, on the data table page which is, I know that was a real big one for, in talking with John Leader for Viewtify, that was really late in getting done and one that I've had to deal with in other places just because of the complexity of that type of component. It says, okay, we're not, we don't, there's just so many edge cases, there's so many different ways.
 
Cody Bontecou (21:19.596)
Mm-hmm.
 
Steve (21:34.503)
that we're going to lose the flexibility that headless UI provides. And I don't think it means tailwind UI because it points to the tan stack documentation, but it says, okay, we'll start with the table and build it, build a complex table from scratch, but then it doesn't go anywhere. There's no more documentation for the data table. So I don't know if that's, uh, something they mean to add and just have, they haven't gotten to or what, but I would be curious to see how they add all this stuff together to create a data table.
 
Cody Bontecou (21:54.281)
Eh.
 
Cody Bontecou (22:02.506)
Yeah, that's funny actually. So yeah, if you actually go to the UI.shadcn.com data table component, so the React ShadCN docs.
 
Steve (22:14.004)
Mm-hmm.
 
Cody Bontecou (22:16.214)
Yeah, it looks like it's word for word copied, the documentation. And then, so, yeah. And then, you know, the React version has much more documentation. And so that's kind of been my experience is if the docs aren't working out for me in the view documentation, I dip into the React docs and.
 
Steve (22:22.794)
Oh, oh it does, yes.
 
Cody Bontecou (22:41.066)
Like every time I've had to do that, those props or you know, whatever I'm reading in the react docs Translate over to the view docs So I assume it's the same with the data table, but I'm not sure I haven't had to play with that one yet Because yeah, like I like I was saying I believe like there's really just a couple devs mostly just one key dev Who's kind of doing writing these components?
 
And so docs are not his main focus. And when I've asked them on Discord about certain things, because they do have a dedicated Radix View Discord channel that we can put in the show notes, where you do get responses, it's semi-active. They tend to just point you to source code docs. So.
 
Cody Bontecou (23:38.658)
which is the best you're gonna learn the most that way.
 
Steve (23:42.591)
But no, I want somebody to just give me the steps. Tell me what to do. I don't wanna figure it out on my own. Right?
 
Cody Bontecou (23:47.434)
right, don't we all? Step one. Yeah. So yeah, that's Shadzian. I very much recommend it. It's covered every case that I've needed. There are some pieces missing for the most, but I've been able to work around them pretty seamlessly.
 
Steve (24:13.764)
It's quite a, quite a...
 
Steve (24:19.679)
Good amount of components. I mean, I have a count of big looking at what 30, 35, something like that, I'm guessing. I got toggle buttons and hover. What was the one I was looking at? A hover card? Yeah, hover card.
 
Cody Bontecou (24:25.406)
Yeah.
 
Cody Bontecou (24:34.05)
Yep.
 
Steve (24:34.791)
I wonder if that's like a hoverboard, but just a card.
 
Cody Bontecou (24:38.466)
two-dimensional hoverboard. Yeah, when I...
 
Steve (24:40.071)
There you go. That's pretty cool. Or does that for you? Yeah, you just provide it some text and. And then you just hovers does the hovering for you.
 
Cody Bontecou (24:51.73)
Yeah, you're looking at the code snippet, right? Yep. Yeah, it's, it's very nice. Just slots, just basically slot magic.
 
Steve (24:54.068)
Mm-hmm. Oh, the usage, yeah.
 
Steve (25:04.399)
It's slots everywhere. It's like a casino, huh? Slots everywhere.
 
Cody Bontecou (25:07.954)
Yeah, it slots props and emits. Like if you, if you start digging into these components, that's, that's all it is. And, and then there's some, uh, huge chunks of Tailwind CSS occasionally.
 
Steve (25:19.471)
And MIT, so by that you mean like the component V model type of MIT where you have you plug that in and so Whatever it's generated within the component. You got to pass back to the parent wherever you're implementing it And then you can do whatever you want
 
Cody Bontecou (25:31.923)
Yeah, so for example, like this component, this hover card, I'm assuming there's an on hover emit that's taking place. And so,
 
Within the code that's occurring, that on hover emit is just, it knows how to handle it. But if you wanted to customize it further and say like, you hover one card and like other things occur, for example, like a window appears or a window disappears, or I don't know, really whatever you want, you want to run additional code on that, not just an on or off, not just a boolean value on that hover.
 
that's all exposed as well.
 
Cody Bontecou (26:20.294)
and I want to think of an area. So I used that recently with the alert component, for example. And so, or what, it was the alert dialogue. So same thing, it's like if you click on this show dialogue button, the alert, the dialogue appears. And it's like, hey, you know, are you sure you want to do that? Continue or cancel.
 
Sometimes, at least in my case that I was using it in, I didn't want that dialogue to appear based off of like a button click. I wanted it to appear after like so many items were created. And so like.
 
And then basically, once five items exist, now we wanna show the dialogue type of logic. And so you can work on those emit props and emits to do that as well. But again, that's kind of where the TypeScript comes in, in my opinion, is...
 
All of that's in at least the TypeScript versions. You can see when they're defining the emits or defining the props, there's also the types that are defined along with it. So you can click into those types to see all of the props that are accepted, for example, or all of the emits that you can react on.
 
Cody Bontecou (27:56.75)
because sometimes they use multiple V models. Sometimes you don't want just V model, there's gonna be like two V models that it's watching and managing. And I actually don't know how that's handled in JavaScript view, because I haven't written JavaScript view in a while, but.
 
Steve (28:16.195)
It's just named emits basically you can have you can do if you look at the component view model documentation in the view docs Uh, you can have multiple bound Values that will emit up to your parent. It's just uh, you're basically adding an alias. There's a short version, you know
 
Cody Bontecou (28:33.542)
Okay, that's great. You just pass it like an array, right? And they're just strings or some, or you can also maybe do a dictionary, I guess.
 
Steve (28:38.528)
Uhhhhhhh... not sure.
 
Steve (28:43.443)
That's Python, isn't it?
 
Cody Bontecou (28:48.454)
I mean, they're called dictionaries in JavaScript too, right? Or hash maps.
 
Steve (28:50.859)
Oh, I thought Python had the lock on the word dictionary. I thought they trademarked it or something.
 
Cody Bontecou (28:55.61)
And...
 
Steve (28:57.947)
Yeah, you can have multiple V model bindings if you look under component V model because you're targeting a particular prop that gets passed down and then an emit event that gets passed up. So you can sync it to different props because you're naming what your V model value is that you're binding to.
 
Cody Bontecou (29:17.408)
Yeah.
 
Steve (29:18.983)
So that's probably, I'm assuming that's how it does it.
 
Cody Bontecou (29:20.022)
Yeah, look. Oh yeah, no, it's exactly how it does it. But I was just curious how, like in TypeScript, it's easy to, like in a JavaScript component versus a TypeScript component, if you're writing in the JavaScript component, like vmodel colon, does that autocomplete take place? Of like, you know, in this example, there's a,
 
two potential props, first name and a last. Well, I guess that's kind of the same. That's just shorthand. Anyways, it doesn't really matter. I'm just rambling at this point. But one thing I did wanna talk about as well alongside the ShadCN is are you familiar with v0.dev? Have you heard of this, Steve?
 
Steve (30:16.968)
have not.
 
Cody Bontecou (30:18.674)
No, so v0.dev is a Vercell project that came out shortly after they acquired Shatsian, shortly after they hired him on. And it's literally just the letter v, the letter v and then the number 0.dev.
 
Steve (30:37.599)
How do you spell it? What size is it? V zero spelled out?
 
Steve (30:44.932)
Oh, okay, gotcha.
 
Cody Bontecou (30:47.646)
And this is, I've just been seeing some people on Twitter post about this because it's, there's a wait list. So you have to be invited and I'm not cool enough to be invited just yet. But it's basically, it's basically the ChachiBT prompt that, for example, this says a landing page for my personal portfolio is their example prompt. And you click that.
 
and it'll actually generate a landing page for your personal portfolio and give you the code to run that, to render that in code.
 
Steve (31:31.827)
Based on what? Just pulling, guessing what you like or what your thing looks like? I mean, do you give it any input like, hey, go look at this URL and...
 
Cody Bontecou (31:41.698)
So here's one example, I can send you a link. So it's kind of built similar to like a mid journey or a chat GBT. And so this one is a hero component for an email client. And so it just has like this nice little like, you know, grid layout, half of the grid is text with the input, the other half is an image, and it actually just renders like, kind of exactly what you'd expect. But then,
 
There's like a second iteration. So you can talk about this after like, it's like, okay, they rendered this with all the components in the code. It's like, okay, let me actually talk to this. And then so the second prompt is then clean up this text, remove the extra characters.
 
And I believe there's some way of like actually talking about it. And then the third one is add some gradient to the heading. And then it keeps going on and on. Then it changes it to black and white gradient. And there's actually like 11 different prompts until he eventually gets to like the finalized landing, like form input that he was expecting. Um, and so this is kind of like, uh,
 
Like I think it's been kind of solved using something like a mid-journey or stable diffusion. Like we've had like image generation. But what's really interesting here is it's actually doing both. It's generating, like I don't think there's actually any image involved. It's just generating React code that it's rendering for you right then and there. And you can see the experience and interact with it using prompts. And.
 
Cody Bontecou (33:29.07)
I believe, they haven't really announced it, but I believe a lot of this is built on top of ShadZien and Radek's UI. I think that's part of what enabled them to do this.
 
Steve (33:48.223)
Cool, yeah, I don't know too many people that would be averse to saying, here, make me this and have something make it for you.
 
Cody Bontecou (33:58.503)
Yeah, I mean, I've had some experience with this, not with V0, but with ChatGPT's image recognition feature that just came out recently. For this app I wanted to build, I needed a complex grid system, and I just couldn't figure out how to build it with CSS and HTML, or even programmatically build this grid.
 
And so what I did was I designed the grids that I wanted. Like here's what it looks like with one item, here's what it looks like with two, all the way down to like 10 items. And I actually then sent those photos, I took pictures of those designs and gave it to ChatGBT and asked it to write the code to build that grid system. And it worked really well.
 
Cody Bontecou (34:54.774)
So it's just, I don't know, my mind is blown. I honestly am so blown away that this works. And it's like problems that I'll be like banging my head against for a week, it'll help me solve it in like 30 minutes. And I'm seeing the light here in the AI world, in the post AI world.
 
Steve (35:20.335)
Yeah, I mean, I have to admit I'm real. I'm not a fan of AI at all. And chat GPT for, you know, in a lot of cases, there are some cases where I'm seeing where it's, it can be useful, you know, just in general, there's too many stories about false data, whether it was when, you know, the model four first came out from open AI about, you know, searching for information on something in Mexico. And it just makes up all kinds of data. And there was a story about the lawyer.
 
who had to fight back because GPD made up all these cases that had gone against him and these crimes he'd been charged with and none of it never happened. It just got made up on the fly out of thin air. That's what scares the bejesus out of me. But I think from a coding standpoint, from everything I've heard, and from if you're using it for specific uses other than just a general answer to the question about life and...
 
Cody Bontecou (35:51.104)
Yep.
 
Cody Bontecou (36:06.639)
Yes.
 
Steve (36:20.355)
why everything is here, it's great. You know, we're using it at my work every day for we're feeding it tons of data that is, that we have, you know, in our database and it's government contract data. And usually we have a guy who's super smart and very knowledgeable in this stuff and he's feeding it in and trying to, you know, create predictions for our customers. Okay, based on this, we predict that, you know, this and this is likely to happen in this particular contracting space.
 
And for that kind of stuff, it's awesome. And for generating code and templates and stuff like that, considering my extreme lack of design capabilities, I could see something like this being incredibly useful, for sure.
 
Cody Bontecou (37:04.242)
Yeah, I think when there's like a right or wrong answer, it does a good job at, not necessarily like true or false, like this law stuff or like real life events, but for code, it's either gonna work or it's not gonna work. And so I think it's very easy to see if it's working or not.
 
Steve (37:25.489)
Mm-hmm.
 
Cody Bontecou (37:32.85)
And that's where I find a lot of benefit from it. I agree with like Dejus, AI assistant, something to talk to scenario. I don't find much value in that because it always, you're always right in these situations. And I don't, that's not a real conversation. For example, my wife asked yesterday,
 
Steve (37:35.891)
Mm-hmm.
 
Cody Bontecou (38:03.78)
Which day of the week rhymes the best with chest day?
 
just were talking about working out our chest at the gym. And she thought it was Thursday, I thought it was Wednesday. And yeah, but really it's just day, right? We're just rhyming day with day. And so we asked Chachi BT and it's like, oh, we think it's Monday. And she's like, Monday, explain why. And he's like, oh, I'm sorry, actually we think it's Sunday. Oh, explain. And there was never an explanation. It was just very assertive. This is the correct answer.
 
Steve (38:16.2)
I go with Wednesday.
 
Steve (38:20.179)
Yeah, yeah, right.
 
Cody Bontecou (38:36.482)
Oh, you're charging me to you're not correct. It just kind of throws out a different answer. And that I don't like that. There's, there's a lot of work that needs to be done there. Um, but with code, it's amazing. I big fan.
 
Steve (38:56.199)
Yeah, it looks like SuperBass is, I was just looking at their Twitter account, SuperBass is starting to use Shad C and.
 
Cody Bontecou (39:07.166)
I don't understand why, frankly, because their UI is, honestly, I think they have a really nice dashboard. But, yeah, well, I'm curious to see what they do with that.
 
Steve (39:26.023)
Alrighty, anything else about Shad we wanna talk about before we wrap up?
 
Cody Bontecou (39:31.982)
Uh, no, I just, I just, uh, I think everyone should give it a try. That that's, that's the key point here. Um, it, again, it solves a lot of the problems that you probably didn't even know you had and it makes your website very uniform and very nice, very quick.
 
Steve (39:50.355)
Yeah, I'm wishing I had used something like this when I started my current app that I've been working on. But I can say I've learned a lot about creating my own data tables and search capabilities from scratch. Let me tell you, it gives you a lot more control over what you want and what you wanna do and how to display things and stuff like that for sure. But yeah, I'm definitely gonna play with that. I've been looking at this and stuff like PrimeView and daisyui. daisyui is another one.
 
Cody Bontecou (40:02.878)
Oh yeah.
 
Steve (40:18.739)
that coworker uses that's fairly unstyled. You know, and you just plug it in, it's all tailwind based, and then you can tweak it how you want. So right on. All right, so let's move on to picks. Picks are the part of the show where we get to talk about anything we want, within reason, of course. We don't want to get fined or anything. So I'll pick...
 
I actually pick a movie, a couple movies. On JavaScript Jabber, one of the other panelists, AJ, had recommended a movie, Gran Turismo. And he said, really good, really clean movie. It's not like rated R or anything. And I don't do what I did and get it mixed up with Gran Torino. Gran Torino was the Clint Eastwood movie about the guy who had a car and was helping out.
 
Cody Bontecou (40:59.277)
Mm-hmm.
 
Steve (41:17.403)
you know, a neighbor kid friend of his. This is based on a true story. And I'm already forgetting the guy's name. He's British, a British kid. And I'll look it up while I'm talking. But the premise is really cool. And it's a true story, it really happened. So Nissan, or as Nissan as they pronounce it in the movie, this marketing guy played by Orlando Bloom wants to get Nissan into racing. And so there's this game.
 
called Gran Turismo, it's like a huge simulator. And these guys play it, they've got the whole racing car thing with the seat and the custom steering wheels and a big old screen and it's supposed to be incredibly realistic, it was created by a Japanese guy. I forget his name. And so what they do is they want to find some racers and so they, through the whole connectedness of the game that you can play in like, you know, gaming cafes and stuff.
 
and they're on realistic courses like Le Mans and Sebring and Daytona and stuff like that. They track who's got the best times. And then they have these actual online races using this game and the best 10 they picked to come to this camp where they all learn how to actually drive a car, not in a simulator, but actually drive a car. And they get a guy who used to be a racer himself and...
 
They all go through this training and then the best one, top one they picked to actually go race on the racing circuit and get their license and so on. And so this is all about the kid that actually did it. And he actually plays a part in the role. He plays one of the stunt drivers in the movie himself. His name is Jan Mardenborough is the racer's name. So I understand that he's still racing, but great movie.
 
really cool racing scenes and stuff. He has a really gnarly wreck at one point where his car's flipping over and over from getting caught by the wind. But really great movie, good if you wanna take kids to see it. It's awesome to go see. A little bit of squaring, but that's about it. So we went and saw it in the theater. I think it's still out there. And I took my 12 year old son, he loved it. And then we came back a couple days later, we came back and watched Ford versus Ferrari, which is you can see on Amazon Prime now, which is.
 
Steve (43:43.091)
That's another great movie, a good story about how Ford got into racing at LeMans because they were pissed at Ferrari for blowing them off and beat Ferrari for four years running. This is back in the 1960s, I think it was like 65 when all this happened and how they developed the car and everything. So, two, if you're into race, even if you're not into racing a lot, they're good movies.
 
Cody Bontecou (44:07.05)
I have to agree with that one. We saw Grant's Resma recently as well.
 
It's pretty, it's amazing how they were able to bring in these gamers and, uh, you know, turn them into real, real world race, uh, race car drivers. And, um, from what I understand, that's kind of the standard now in like the race car world. I think a significant portion of professional racers come out of these, uh, virtual simulators.
 
Steve (44:36.603)
Yeah, the term that this the slang term that the real the other drivers used is oh those stupid sim racers They call them sim racers For simulators. I mean there's granted even with the full-on setup You know in your room, you're still not gonna get all the g-force effects and all the stuff of actually driving a car Until you actually get in the car for sure and you're going, you know up to 200 miles an hour. I went to
 
Cody Bontecou (44:42.807)
Yep.
 
Cody Bontecou (44:55.21)
Not yet.
 
Cody Bontecou (45:01.027)
Right.
 
Steve (45:02.235)
recently, or every year, one of the last stops, I think it's the next to the last stop on the IndyCar circuit here in the US is here in Portland. And so for the past couple of years, I've gone to see those races. And I've seen other races out at our racetrack here in Portland, PIR. You know, I've seen NASCAR and other levels of racing. IndyCar, those speeds are, it's a whole different ballgame. It's a whole different world about how fast those things go. I have a video that I put on my Instagram.
 
where I'm sitting in a fixed spot as the Indy cars go by and it's just they're just a blur you know it's so fast and we're uh I'm talking to some friends of mine uh the son of a buddy of mine works out at the track quite a bit and we're out there and he's saying yeah usually you know these races go a little longer because a lap time it's a couple miles and lap times maybe you know two minutes with the Indy cars it's like a minute and a half or a minute you know just
 
Steve (46:03.507)
But anyway, onto the dad jokes of the week, which are, as most people know, at least me, are the highlight of any of the podcasts I'm in. So...
 
Steve (46:18.239)
I saw this the other day about someone who's been, you know, they're having browser issues and you know you use the Microsoft stuff, restart, clear your cache and this person says, okay I've cleared my cache of cookies but I still don't see how eating 300 Oreos is going to make my computer work any better.
 
Steve (46:40.376)
All right. What do you say when your favorite smoke shop, for those of you that are smokers, turns into a J. Crew store? Clothes but no cigar.
 
Steve (46:54.693)
Right? Another day I said to my son, what do you call a bunch of indifferent pumpkins grown on a hill in Norway? He didn't know, so I said, a hoard of bored fjord gourds.
 
Steve (47:12.635)
He was floored, by the way.
 
Cody Bontecou (47:15.886)
Oh no.
 
Steve (47:19.655)
Anyway, those are the dad jokes of the week. Cody, your turn.
 
Cody Bontecou (47:21.902)
Great, great, great. Let's see, so my pick, I guess, is more about atmospheric changes. No, so in the winter time, this time of year, or as the year we get closer to winter, the waves, the surfable waves, the swells, begin to come from the north.
 
south. And we are just experiencing today, well I guess started on Sunday but it's still going on today, our first north swell of the year. And so what that means is like the direction of the wave is coming from a different direction and so that now all of the beaches on the northern side of the island
 
surfable whereas the beaches on the southern end are flat, are very small. And it's just a time for celebration because these are the better waves in my opinion. The North Falls are very fun.
 
Steve (48:31.923)
So is this the vaunted North Shore of Wye that everybody talks about? Okay.
 
Cody Bontecou (48:36.358)
Yeah, exactly. So the north shore of Oahu, it's a different island, but it's only like a $50 ticket, so I fly over pretty regularly to hang out with friends and surf over there. But yeah, so that they have just gotten starting today, like their very first significant sized waves. So it's forecasted at about like 10 to 15 feet, so pretty much expert level surf.
 
has begun and so it's a very exciting time for us here in Hawaii.
 
Steve (49:11.155)
Yeah, that sounds really swell.
 
Cody Bontecou (49:14.175)
Yeah, exactly. Oh, come on over. Yeah, happy to.
 
Steve (49:16.703)
I'm so coming over to your place and crashing at your place so I can surf sometime. The most surfing I've ever done is bodyboarding down in San Diego when I was down there one time. So yeah, I would love to be able, it's physical as heck, right? I mean, you're using every part of your body to, especially your legs and your core more than anything I would imagine.
 
Cody Bontecou (49:25.823)
Nice.
 
Cody Bontecou (49:29.845)
Oh yeah.
 
Cody Bontecou (49:33.57)
Full body, yep. And I have plenty of back muscle and as well as extreme cardio. You know, you're in a very low, low oxygen environment half the time. So you're underwater. Right, right. No, unfortunately I didn't get that gene. So, but yeah, that's all I got. I'm just.
 
Steve (49:41.96)
Yeah.
 
Steve (49:49.77)
Yeah, unless you got gills, then you got all kind of available oxygen, right?
 
Steve (50:00.871)
So what's your, how big of waves can you surf?
 
Cody Bontecou (50:04.734)
I would surf the waves that are there right now. Yeah, I could surf the 10 to 15, but I'm not probably not going much bigger than that. Yeah, it depends. It depends. Like I think one of the bigger limitations is less my skill and more just the boards that I have available to ride.
 
Steve (50:06.675)
Bridget?
 
Cody Bontecou (50:26.93)
As you get to those bigger waves, the board becomes very important. You really, you don't wanna be catching it at the wrong time. And so you need like a bigger board, but it can't be too wide. Like there's a lot of variables that take place and they're just very expensive. So, and we don't, where I live on this island, we don't really have waves that get that big. So.
 
It's only, it's kind of like a, I don't know if it's worth investing in just yet. Yeah. No, but my brother has. Yeah, my brother, so we grew up bodyboarding as well. And so like my brother was actually a professional bodyboarder for a number of years. But the sport kind of died economically. Like it's, you can't make a living off of professional bodyboarding.
 
Steve (50:58.623)
Hmm. You ever done any competitions?
 
Steve (51:22.275)
Right, unless you got sponsors maybe or something like that, right?
 
Cody Bontecou (51:23.466)
Whereas surfing, well, like he was definitely sponsored, but even then, like even the best of the best bodyboarders in the world, like they're more like prestigious coaches is how they make their money. They have like surf camps and stuff is how they, yeah. There's not like, you're not winning a tournament and making a million dollars like in surfing, you know.
 
Steve (51:35.931)
Mm, right.
 
Steve (51:47.483)
Right, right. Like what's the guys named Kelly Slater? Those kind of guys.
 
Cody Bontecou (51:51.698)
Yeah, Kelly said he's worth like $50 million. You know, the best bodyboarder in the world is probably worth like two. So. Oh, right, right. Of course. But he's the absolute best in the world that's ever existed, you know, and, and in, in how many things, if you were the absolute best, would you make millions? And it's most, most things.
 
Steve (51:55.613)
Yeah.
 
Steve (51:59.987)
I don't know, I wouldn't sneeze at two million, but.
 
Steve (52:06.471)
Right, right. Right.
 
Steve (52:15.219)
So how often, at least in Hawaii, probably more so in Australia, do you run into sharks?
 
Cody Bontecou (52:22.419)
I'm sure they're there, but I never see them.
 
Steve (52:26.635)
Okay, yeah, they're great. Just stay away from me. We're fine. I don't taste good, you know, just leave me alone
 
Cody Bontecou (52:30.994)
Yeah, for sure, of course. I like to think our ocean is very healthy, at least here, and there's plenty of fish for them to eat. But there are definitely shark attacks. I think there were actually two on this island this year. Right, right, exactly. No, no, there were, I wanna say like 500 yards offshore. There were both.
 
Steve (52:40.1)
Oh, okay.
 
Steve (52:47.359)
I mean, they came up onto the island. That's pretty good. Oh, okay.
 
Steve (52:55.041)
Oh, okay.
 
Cody Bontecou (52:57.486)
that both attacks occurred to people that were us doing like long distance swims by themselves. Yeah, so, yeah, probably don't do that and you'll be fine. I guess.
 
Steve (53:03.284)
Oh, right, okay.
 
Steve (53:13.683)
Don't go swim in the water if you don't want to get eaten by a shark.
 
Cody Bontecou (53:16.382)
Yeah, don't swim super far out all alone. And like, yeah, don't do that. But I have seen sharks like while snorkeling, but just like little sharks that are like sleeping in caves and stuff. And I have gone like cage shark swimming. But it is always on my mind. That's for sure. But it's yeah, it's a risk I'm willing to take.
 
Steve (53:43.315)
Yeah, I think the closest I've ever come to surfing, besides watching something like Point Break, is listening, to this day, I still listen to the surf punks. If you've ever heard the surf punks, they're this punk band from LA in the early 80s that can play three chords, maybe four if they were lucky. And it's all about, their music is all about how all the valet people that come out to the beaches on the weekend piss everybody off and...
 
Cody Bontecou (53:50.53)
Hehehe
 
Cody Bontecou (54:02.861)
set.
 
Steve (54:12.691)
The locals hate them because they're, and they're always making fun of them. It's so funny. My Beach, I think is the name of the album I listen to all the time, but.
 
Cody Bontecou (54:20.21)
Nice. I'll give it a, I'll get, I'll check it out. Yeah. That sounds about right.
 
Steve (54:25.759)
There's one song, it's so funny, there's one song, it's called Surfer's Nightmare. And it's all about what it's like for a surfer if you actually had to join the military. And so the drill sergeant yelled at me, I said, come on, give me pushups, get down. And I'm like, no, man, I like nature, I wanna surf, leave me alone, no, get down. And so my wife comes in one time and I had that on the speakers, like, what the heck are you listening to? I had to laugh and explain the story to her. So it's.
 
Cody Bontecou (54:54.73)
Yeah, it sounds about right.
 
Steve (54:56.721)
I'm sorry.
 
I think there was another band I remember hearing of back then. There was, oh yeah, the Butthole Surfers, I think was another one. Or I can't remember who, but yeah, it's funny. Just funny music, you know.
 
Cody Bontecou (55:09.37)
Surfers are, it's a good group of people. Very, very fun group of people. You know, they're just, they go with the flow, man. They go with the flow. Ha ha. Yeah.
 
Steve (55:15.076)
Oh yeah, I'm sure.
 
Steve (55:20.675)
Hey man, you're not a local. So, all right. So I think we've spent half this time talking about surfing and movies and half about Vue, but that's okay. We aim to entertain. So with that, we'll wrap it up. Thanks Cody. And we'll talk to everybody next time on Vue's on Vue.
 
Cody Bontecou (55:31.695)
all right.
 
Cody Bontecou (55:36.75)
Thank you.
 
Cody Bontecou (55:41.193)
Take care.
 
Album Art
Building Beautiful Components: Combining NPX, Radix View, and Shadcn - VUE 228
0:00
54:59
Playback Speed: