**Wes Bos** (0:00)
I think, like, the only thing that hasn't changed is simply building stuff is going to help you learn. And if you are able to build way more and way larger stuff now that you have AI, and the lessons that you have, like, you're going to go down so many rabbit holes. And I will tell you, please go down those rabbit holes and deeply understand the problems that you hit rather than just swearing into the box. Because when you fully, deeply understand what these problems are and how you could possibly tackle and solve them, that is going to make you a better developer, but a better person who makes things.
Welcome to Syntax. Today, we're talking about, I don't understand Shadcn. We got a potluck episodes as you bring the questions. Why use PNPM over NPM? What does the standards process look like? We'll take a look into that. If something gets added to HML, CSS, JavaScript, the browsers, how does that even happen? What does that process look like, right? What should you focus on in the age of AI, especially for beginners, right? Should you go low level and understand the fundamentals really well, or should you go high level in like architecture and kind of like steering? Kind of interesting answer to that one. Also, really interesting question about design systems. Why do no design systems use our modern features, right? We have dialogue and anchor and popover and scroll snap and like all of these new amazing HML features. It seems like, especially in React land, none of them use them. So we're going to answer why that is. Submit your questions to us. If you have a question you'd like us to answer on a podcast coming up, go to Syntax.fm. In the nav, there's a button that says Potluck. You can type your question in and we'll answer it on an upcoming episode. Let's get into it. First question from Digital Server says, Hello Syntax OG listener. First time, Potluck questioner. Thank you for sending that in. I have been doing front end development for a long time. I see I've seen many different CSS component approaches from bootstrap to preprocessors, scoped components, utility classes, CSS, JS, etc, etc. For every single approach, I see the pros and cons. But my question regarding specifically Shadcn approach, what is the benefit of installing components in our project? I understand we own the code, but is that a good thing? How do we handle updates? What happens if a component has a vulnerability after we update all of our custom code gets deleted? I'm having a hard time understanding the pros of this approach. Okay, so if you've never used Shadcn, the way that it works is that when you install a Shadcn component, it literally is just putting the component and all of its code into a folder inside of your workspace. There's no NPM dependency where you're importing the component from Shadcn, and then you're changing it, and literally just copy and paste the code in it.
This approach has been a favorite of mine since the WordPress days. Do you remember WordPress? Not remember, but WordPress has this idea of child themes, meaning that you could take a parent theme, and then you could modify the bits that you want. I never liked that approach. I like simply just taking a theme, copy-pasting it, and then just being able to get into the code and edit it. There's no weird dependencies. There's no black box behind that type of thing.
I can see why that is a little bit weird. I think the benefit to that is that you are simply able to own 100% of the code. Similar to a CSS reset, you're not getting updates to a specific component. When you bring in a component, that is the component that you are going to use. And if there is a new or updated or bug fixes to any part of that component, then you have to either manually apply them or use some sort of AI to apply them, but typically you just say like, yes, this is the component that I want. And vulnerabilities, a lot of the Shadcn stuff is not implementing its own logic. It's using other libraries that it leans on. And those libraries can continually be updated. And it's just like if you were to write the component by hand, it's simply just like a bit of a head start and a standard way of creating your component.
I absolutely love that. I don't want to have to worry about when a component updates, especially because a lot of the Shadcn is about how it looks and how it actually renders out. And I don't necessarily want it updating and then changing the look or the feel or the functionality of how that works.
46 more minutes of transcript below
Try it now — copy, paste, done:
curl -H "x-api-key: pt_demo" \
https://spoken.md/transcripts/1000651996090
Works with Claude, ChatGPT, Cursor, and any agent that makes HTTP calls.
From $0.10 per transcript. No subscription. Credits never expire.
Using your own key:
curl -H "x-api-key: YOUR_KEY" \
https://spoken.md/transcripts/1000774996832