Web technology is constantly evolving and new front end libraries and frameworks are constantly being released. New primitives, improved developer experience, and so many headless UI libraries. It’s hard to keep up sometimes. Let me make that easier for you by sharing my highlights from this year.
CSS - :has selector
The Chrome Team has written a beautiful blog post that lists all the changes that CSS had this year. Go check it out and skim through it at least.
What I (and everyone else) loved and would probably use the most is the new :has selector. You can now style the parent element based on some condition present in its child elements without JavaScript. For example, give it a background color if a child element is an input and has the :checked state.
From Tailwind Connect 2023 Keynote
Or as Web Bae has demonstrated, create a CSS-only dark mode toggle.
I love when CSS adds features that usually required workarounds in JavaScript. Speaking of which…
HTML - Exclusive Accordion
Sadly there’s no pretty blog post detailing all the changes to HTML like the CSS one had. In fact, I had a hard time figuring out when certain things were released. There is this State of HTML 2023 Survey that asks people about their familiarity with the newer features and changes. The survey is over and I recommend perusing it because I learned a lot.
For example, I did not know you make an accordion element by wrapping the element around elements.
The survey has not been updated because it says no browser has implemented the exclusive accordion yet. But as of Chrome 120, it is! Just give the the same name, and voila! The behavior that required JavaScript is now native to HTML.
JavaScript - new array methods
The new ECMAScript 14 came out this year and I would love to check it out but it kills my browser every time I try to load it. So instead I relied on reading blog posts about it. Please check them out:
The main highlight are new array methods. These include:
- findLast
- findLastIndex
- toReversed
- toSorted
- toSpliced
- with
The last 4 allow you to change array by copy, which follows the same behavior as .map and .filter, resulting in less confusion and also following functional programming patterns. And according to MDN, all these methods have already been implemented by browsers!
Web APIs - View Transitions API
I’d describe Web APIs as a set of standardized features and behaviors that are implemented through a combination of HTML, CSS, JavaScript, and browser APIs. And View Transitions API is a great example of that.
This API allows you to seamlessly transition between “different DOM states while also updating the DOM contents in a single step”. Such behavior that would have required complicated and verbose CSS and JavaScript is now available in the DOM. Furthermore, the transitions can be controlled by JavaScript and CSS.
This API has been implemented by Chrome but is still being worked on by the W3C. Still, its current state is quite exciting already.
UI Component Libraries - ShadCN
I wrote an article about headless UI libraries so feel free to skim that to get up to date.
On Dec. 20th, React Aria has updated their landing page for the GA release of React Aria Components, which is built on top of React Aria hooks.
Also on Dec 20th, Lemon Squeezy released Wedges, which is built on Radix UI and Tailwind.
Then on Dec 22nd, shadcn also updated shadcn/ui, adding the following new components:
- Drawer
- Carousel
- Pagination
- Toast
- Resizable
Before, I was team React Aria. But as time went on, I have to say shadcn has outdone everyone. It has more components than the others and are very easy to use. The copy-paste approach that allows your codebase to own the component code instead of relying on an external package and have full control over it is really what won me over. And since copy-pasting manually is tiring, the CLI does all that work for you. And it works amazingly well. There’s a reason he was hired at Vercel.
I still have to try out Wedges, but for 2023, shadcn/ui was the clear winner.
Conclusion
So these were the highlights of 2023 for me. I need to take some time and tinker around with all these new features and updates to really solidify them in my head.
I thought about writing about my highlight for UI framework (React, Svelte, Vue, Solid, etc) and metaframework (Next.js, SvelteKit, Nuxt, SolidStart, etc) but I need more time with all of them. Though two things stood out to me as they gained more adoption by these frameworks: signals and server actions. Once I have enough experience and wisdom (ie. read the opinions of people way smarter than me), I'll share mine.
All in all, I’m excited for what 2024 has to offer. Let me know what your highlights were!
Top comments (0)