[ad_1]
https://i.ytimg.com/vi/IwvyuqjOeNE/hqdefault.jpg

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.

Index
=====
00:00 Intro
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
32:30 Lets talk about JavaScript
37:09 What’s Happening with Frameworks
46:12 Honorable JS Mentions
50:00 Every Tailwind CSS 3 New Feature
59:27 Q&A

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
JavaScript as a Second Language: https://go.raybo.org/6uWw

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

The State of jS survey is of course focused on just JavaScript. This one’s a bit older, but it can give you a good reference to see the usage of certain features.

ES Proposals

Another way to stay current is to look at this site that has the status of what’s being added to ECMAScript (AKA JavaScript) each year.

What’s New

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.

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.

CSS Frameworks

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.

JavaScript

Let’s talk about JavaScript. Most of the additions to the language aren’t super revolutionary, but it means that There’s some features that you should be super comfortable with.

The module system is one of these. JavaScript is fully modular today, so you should be super comfortable with the import command.

JavaScript now has async/await functions that make the execution of code more predictable. To understand Async/Await, you should have a good understanding of promises.

Javascript Frameworks

The real action in JavaScript is happening in the Framework front. Of course there’s the big three frameworks, React Vue and Angular. If I was out looking for a job right now, I would definitely learn React. It’s truly dominant and it’s also constantly evolving, so it’s the most marketable of the frameworks.

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.

Original source