🔥 Radix UI Themes, Project IDX, Form validation on the web
Hey hey hey,
Welcome to yet another issue of the Top 3 in Tech newsletter. Where I bring you all the recent goodies from the web development space to make you smarter and impress your coworkers:
1. Radix UI Themes
A few weeks ago I talked about shadcn UI, a collection of beautiful React components. Well, we recently got another super cool update from Radix UI, which is the team behind all the unstyled, accessible React components that shadcn is built upon.
They just launched their own component library - completely free and open source - that add a layer of design on top of their already amazing and flexible base components. It’s called Radix UI Themes, and it’s super easy to install. Just add their styles and wrap your entire app in their main component and you’re off to the races!
The new Themes kit is a bit more opinionated in the styling compared to shadcn, but it’s still super easy to override specific styles to make it your own. They also offer some more low-level components like and , which are great if you prefer that kind of abstraction in your code base.
All in all, it’s always great to have different options for your UI library, and both of these do a great job without limiting the flexibility to make the design your own. I personally have a slight preference for shadcn UI still, as you copy/paste the components rather than using them from a package, which means you have complete ownership over the code. But if you’re not really about that, and prefer the design of the Radix UI Theme components, it’s an excellent choice 👌
Learn more in the official documentation here or check out this 5 minute explainer video from Josh tried coding:
2. Project IDX
Another recent cool update is actually from Google - can you believe it?!
They launched their new Project IDX (well, kinda launched… there’s a waitlist, but the landing page looks dope). It’s basically a way to get your entire development workflow running in the cloud with minimal effort. The idea is that setting up a complete full-stack environment on your own laptop is not always ideal - there’s lots of complexity involved and things that can go wrong.
Project IDX does away with this, and also adds cool features like being able to preview your apps on platforms like web, iOS and Android all from within the browser. It will also include Google’s version of GitHub Copilot - Codey - to let AI assist you during development.
I’m excited to see where this goes and how well it works when launched. It definitely sounds interesting and useful, and the landing page itself is quite stunning. But time will tell!
Read more here:
3. Form validation
The last pick for this week is a super sweet article on progressively enhancing forms on the web. As we all know, forms are one of the most essential aspects of a website. But they can be quite difficult to work with and get just right.
In the article, the author shows us how we can go about implementing a simple form that works without JavaScript enabled, using just what the browser already gives us. It also shares some cool upcoming CSS selectors like :user-valid and :user-invalid that we’ll (hopefully soon) be able to use to style form elements based on their input - without needing JS! And then in Part 2, the author shows us how to layer in some JavaScript to enhance the experience where possible.
I know I personally struggled with implementing forms optimally for a long time, and I still learned a lot of great tricks from this article. So if you’ve ever built a form (or develop for the web in general) this article is a must read:
Progressively Enhanced Form Validation, Part 1: HTML and CSS
cloudfour.com/thinks/progressively-enhanced-form-validation-part-1-html-and-css
That's all for now! See you in 2 weeks ✌️
If you did, why not share it with your friends! Either by forwarding this email, or by posting about it on Twitter, LinkedIn, or Facebook. You can also simply copy/paste the link mads.fyi/top3 on other platforms. It really helps to keep me motivated and let the newsletter grow.
— Mads Brodt