Times are changing. In the last few years it feels like being a web developer has changed more than ever, and there was already jokes about how quickly things change and how many new frameworks are being pumped out! I've been lucky to spend 2024 focused mainly on creating new sites from scratch, ranging from client work to demos to completing little dev challenges or building sites for friends.
This is just a quick run down of the main changes I've made in 2024, some are opinionated and some may not be right for you. Let's get started.
No More Single Page Apps
With the death of Create React App coincided the rise of NextJs (and Remix if you can't get into the app router system of Next). There's still Vite for SPAs if it really is the right choice for your situation, but I've been using NextJs for the last year and really liking it now. The main issue is trying to deploy it in Docker, which is possible but has some caveats. Vercel is the easiest way to host a NextJs app BUT the costs can get really high if you happen to attract a lot of attention very suddenly.
Tailwind and Shadcn UI - Dream Team
Embracing utility classes from TailwindCSS and utilising Shadcn UI has been amazing for quickly building things that look pretty solid. There's definitely a case that things built with the components from Shadcn can all look similar, but I remember the same complaints about Bootstrap and that didn't stop it from being a useful tool. TailwindCSS takes the utility of Bootstrap to the next level with amazing coverage of all CSS classes and consistency in how they're used, sure you may need the documentation to workout some complex issues but between the predictable class names and a VS Code extension that lets you hover over a class and see the CSS it will apply, it is getting less and less common that I'm switching to the Tailwind docs tab. Tailwind is available in NextJs by default, it's actually what's used in the template too.
Shadcn UI is a collection of reusable components that have fairly consistent design patterns to use them, this makes it easy to add some new features to your site without feeling like you're learning a new library every time. One of my favourite things about it is how it uses the class-variant-authority library (CVA) to allow you to create different variants of a component easily.
Payload 3.0 is Coming
Speaking of using NextJs, the next version of Payload will be out of beta any day now, this should be awesome, it allows you to build a CMS inside your NextJS site with amazing typescript coverage.
Typescript Everything
Typescript is amazing. It wasn't too long ago that getting comprehensive type coverage was a real pain in the foot. But now frameworks like NextJs are almost always built in typescript and export the types they use, so you can quickly see how things work, and use their types when appropriate. Now, trying to understand types based off their definitions is still really hard, libraries often use generics in a way that is pretty hard to read but obviously is very powerful. Using a tool like Zod to parse data coming back from a fetch request is so nice, compared to just assuming the shape will match a certain interface, you get the correct type while you develop and some runtime protection!
Drizzle is Awesome
Drizzle ORM is super cool. I've used it on a few projects but if you're interested I'd recommend watching a Code with Antonio video that uses it. This is a great way to connect to a database and still keep everything typed. It also allows you to manage the SQL schema from your TypeScript. This was never appropriate at my previous job, where we had more database admins that developers, but now it's been really cool.
AI and Other Tools
Ethically dubious? For sure. Helpful? Yes. I've had really good success using Claude to help me get through awkward debugging. I know that it really has just consumed an incredible amount of documentation and stack overflow content, but... same, dude.
V0 is a prototyping tool that can generate sometimes high quality components in the style of shadcn, ready to be used in your project.