Z poniższego tekstu usuń fragmenty zaczynające się od [ i kończące się na ], a następnie usuń entery.
[00:00.000 --> 00:06.300]  The worst part about being a front-end developer is developing UIs, which also happens to be 100% of the job.
[00:06.300 --> 00:12.040]  Web developers have tried to make things easier with countless UI libraries like Bootstrap, Material, and so on,
[00:12.040 --> 00:16.540]  but recently, ShadCN, the hottest UI framework in the front-end world recently,
[00:16.540 --> 00:19.600]  released a major update that makes it way overpowered.
[00:19.600 --> 00:21.540]  And it's nothing like you've ever seen before.
[00:21.540 --> 00:25.840]  The only way I can think to describe it is like if Ruby on Rails and Skynet had a baby
[00:25.840 --> 00:29.500]  who grew up and got jacked on steroids and then got into front-end web development.
[00:29.500 --> 00:35.540]  When I started this channel back in 2017, my goal was to make tutorials like this Facebook-style emoji reaction thing.
[00:35.540 --> 00:40.740]  The code for that video took the better part of a day, but now I can build an even better one in like 30 seconds.
[00:40.740 --> 00:44.840]  In today's video, you'll learn how to build a custom front-end website faster than ever.
[00:44.840 --> 00:49.440]  But with great power comes great trade-offs, and we'll also look at the drawbacks of this approach.
[00:49.440 --> 00:52.940]  It is September 5th, 2024, and you're watching The Code Report.
[00:52.940 --> 00:57.540]  Last week, I ran a poll about Vercel, and thousands of people agree that it's the best front-end cloud.
[00:57.540 --> 01:01.280]  This video is not sponsored by them, nor have they sponsored any of my past videos.
[01:01.280 --> 01:07.980]  And that's why I can tell you that yesterday, Vercel took a pretty big L when it was revealed that ChatGPT switched from Next.js to Remix.
[01:07.980 --> 01:12.540]  Despite that, Vercel did make a really good move by hiring the developer behind ShadCN.
[01:12.540 --> 01:15.980]  And now, as we'll see, it's tightly integrated into the Vercel ecosystem.
[01:15.980 --> 01:21.240]  ShadCN is a component or UI library, but it's a lot different than most other libraries like Bootstrap.
[01:21.240 --> 01:25.580]  Instead of installing a massive library of components into your node modules and importing them,
[01:25.580 --> 01:29.340]  you copy and paste the code for each individual component into your own project,
[01:29.340 --> 01:33.420]  which allows you to use things a la carte and makes it easier to customize the code.
[01:33.420 --> 01:38.640]  It sounds chaotic, but it's based on primitives like Radix and Tailwind, which keep things looking consistent.
[01:38.640 --> 01:43.680]  Pretty cool, but its killer new feature landed in the CLI in the form of a component registry.
[01:43.680 --> 01:50.520]  Like, you can run ShadCN add data table or ShadCN add carousel to easily add those components to your project,
[01:50.520 --> 01:52.280]  and it works with all the major frameworks.
[01:52.280 --> 01:53.980]  But here's where things get really crazy.
[01:54.020 --> 01:58.980]  Vercel also runs this service called v0, which is an AI chatbot for building UIs.
[01:58.980 --> 02:06.480]  Like, all you do is ask it for a button, and it'll return something that looks just as good as any A16Z-funded startup with a $100 million valuation.
[02:06.480 --> 02:11.420]  If we look at the code, though, what you'll notice it's doing is relying on the existing ShadCN button.
[02:11.420 --> 02:15.220]  It then AI generates some extra Tailwind slot, and the end result is pretty nice.
[02:15.220 --> 02:16.580]  That's not the crazy part, though.
[02:16.580 --> 02:21.380]  If we click on this install button up here, we'll have a command to ShadCN add this to our project.
[02:21.380 --> 02:25.880]  It'll automatically copy that code into our project and bring in any necessary dependencies.
[02:25.880 --> 02:28.180]  And now we have a cool custom button we can use anywhere.
[02:28.180 --> 02:32.320]  And not just that, but these URLs can also be made public to be shared with anyone,
[02:32.320 --> 02:36.020]  and you could even build up your own standard library of ShadCN components.
[02:36.020 --> 02:41.020]  If you drink the ShadCN Kool-Aid and then combine it with other AI tools like Copilot or Cursor,
[02:41.020 --> 02:46.120]  you can build UIs 10 times faster than you could just a few months ago, and they actually look halfway decent.
[02:46.160 --> 02:49.520]  The end result might look exactly the same as all your friends' side projects,
[02:49.520 --> 02:51.720]  but at least it didn't take you six months to build.
[02:51.720 --> 02:55.320]  But the AI haters out there will tell you to never touch any of these tools.
[02:55.320 --> 02:59.760]  They'll make your programming skills go flaccid, and their garbage code will eventually backfire on you.
[02:59.760 --> 03:03.460]  But the reality is that just a few years ago, you'd have to solve many of these problems
[03:03.460 --> 03:07.960]  by going dumpster diving for code on blogs or humiliate yourself with a Stack Overflow question.
[03:07.960 --> 03:11.760]  But nowadays you have people building to-do apps in their Teslas in the IKEA parking lot.
[03:11.760 --> 03:15.760]  The AI performance gains are real, but they have to be used carefully and deliberately
[03:15.760 --> 03:17.760]  to avoid unnecessary complexity.
[03:17.760 --> 03:22.060]  I don't think tech like this will replace actual front-end developers, but here's my prediction.
[03:22.060 --> 03:25.960]  In the near future, I think developers will care less about the ergonomics of a framework,
[03:25.960 --> 03:29.360]  like the syntax differences between Angular React, Vue, and Svelte,
[03:29.360 --> 03:32.560]  and care more about how quickly and reliably they can generate stuff.
[03:32.560 --> 03:35.760]  Like, I wouldn't be surprised if we see a prompt-based UI framework.
[03:35.760 --> 03:38.360]  Oh, wait a minute, it actually looks like someone already built that.
[03:38.360 --> 03:39.560]  This has been The Code Report.
[03:39.560 --> 03:41.960]  Thanks for watching, and I will see you in the next one.