A big part of my job is to try to stay on top of new technologies for web developers. After 16 episodes of the Toolbox I have to admit…I had no idea how deep the rabbit hole was. Here’s what I think you should to learn in 2022 to stay ahead of the game.
I’ll do a demo of the new features in Tailwind CSS 3 and the usual news and reviews of developer tools and more.
01:24 How to Keep Up
03:20 State of CSS
08:33 CSS Trends
08:33 CSS Trends
19:00 CSS Frameworks to Watch
37:09 What’s Happening with Frameworks
46:12 Honorable JS Mentions
50:00 Every Tailwind CSS 3 New Feature
Links from the Episode
ES6 Proposals: https://proposals.es
State of JS: https://2021.stateofcss.com
State of CSS: https://2020.stateofjs.com
ES Proposals: https://www.proposals.es
State of CSS
I use this site to guide me in what to learn. Every year, they do a survey and ask questions about the usage for new technologies.
State of JS
Let’s talk a bit about some of the things that happened in the world of web development and where things are going. We’ll start with CSS.
If you look at the state of CSS survey, you’ll notice that the big news in CSS is that Grid has finally become something you need to be comfortable with to stay competitive. In 2021, 83% of respondents said they have used it.
Something that’s getting a lot of press is container queries. It’s still very much a feature that’s in flux. It lets you define responsiveness, not just at the viewport, but each individual HTML tag can respond to how much room it has on the page.
A lot of interesting things are happening in the world of frameworks. Sass is still heavily used everywhere in the real world, but most of its features have been added to or plan to be added to regular CSS.
Bootstrap is also still incredibly popular and I love Bootstrap 5, but things like Tailwind CSS as well as WindiCSS, and others are starting to nip at its heels.
Tailwinds is quickly becoming the de-facto standard for Component Based Architectures like React, Vue and Svelte. The Utility based approach is superior when working with those frameworks.
Frameworks are adopting Tailwinds Utility approach and taking it further. I covered in a previous episode how Windi CSS is a Tailwinds clone that brought the JIT approach.
Another interesting contender is something that sounds even crazier than Tailwinds…Assembler CSS.
Finally, there’s UnoCSS, from the developer who made Windi. This is an Atomic CSS framework that claims to be 200 times faster than the tailwinds even with the Just In Time compiler.
The Rise of the Meta Frameworks
The other thing to know is that there are these new meta frameworks that aren’t real frameworks in themselves, but frameworks that use other frameworks.
The most important one of these is Astro. It’s still in heavy development and I did a demo of this in a recent episode, so make sure you check that out. Everyone I know is super excited about this.
There are two new developments on this front that are super interesting. First is Hydrogen, which is a framework from the shopping platform called Shoppify. What’s interesting about this one is that it uses a module based approach to load and modify content independently of what else is going on in the page.
Tailwind CSS 3
Tailwind CSS 3 is a new version of the utility-first CSS framework that shook the world a few years ago. Let’s take a look at why it’s gotten so dominant so quickly and what’s changed in the latest version.