We wrap up 2024 with a new edition of the Web Almanac and the results from the State of CSS and State of JavaScript surveys. Every December for the last five years, I've gathered another Advent Calendar roundup containing a lot of high-quality content.
In Browser News, we have the usual "new on the web platform" updates and many releases from the major browsers: Chrome (130 and 131), Firefox (131, 132, and 133), Polypane (22 and 22.1), Safari (18.1 and 18.2), Vivaldi 7.0, and Wolvic Chromium 1.1.
Many well-known names are on the Release Radar. We spot Angular v19, Astro 5.0, Deno 2.0, Electron v33, Eleventy 3, Express v5, Next.js 15, React v19, Svelte 5, TypeScript 5.7, and Vite 6.0.
We top up with a set of Front End Resources, including a documentation gallery, free public APIs, assets, and utilities.
The 2024 Web Almanac
The yearly edition of the Web Almanac is one of the most informative sources of information regarding the actual state of the web. The data is collated out of nearly 17 million websites. Each chapter is released independently, so keep an eye on the index for the chapter that interests you.
State of CSS 2024 Results
The 2024 edition of the State of CSS survey confirms that CSS has come a long way over the last few years. We can see this in the popularity of new features such as ':has()', subgrid, or container size queries. Tailwind and Bootstrap remain the most popular frameworks/libraries by far. CSS filter effects are the most-used feature by the survey respondents.
State of JavaScript 2024 Results
The State of JavaScript survey boasts a larger number of respondents (over 14000). React is still the most popular framework, while Vue and Angular are almost matched for the next two positions. Next.js, Astro, and Nuxt share the meta-frameworks podium. Last but not least, AI tools are all the rage now.
The 2024 Roundup of Advent Calendars for Designers and Developers
For the previous four years, I have rounded up advent calendars for designers and developers. Here is the fifth such list, aggregating a new set of high-quality content.
💻 Browser News
Web Platform Updates
This issue includes three "new to the web platform" updates and a bonus entry covering the status of the Baseline 2024 initiative from the perspective of the Google Chrome team.
- New to the web platform in September
- New to the web platform in October
- New to the web platform in November
- Baseline 2024: more tools to help web developers
Chrome
Since the last issue, there have been two major Google Chrome deployments. Chrome 130 improves on the Picture-in-Picture API, allowing content such as custom video players, video conferences, productivity apps, or a tiny Spotify player. Web Developers can now enjoy the improved Dev Tools, which boast improvements across multiple panels.
Chrome 131 improves styling to the <details> and <summary> elements. The Dev Tools introduce a new AI assistance panel, allowing you to debug your CSS using Gemini.
Firefox
Twenty years ago, Firefox 1.0 was launched, and the web was never the same. We will take a peek at some of the major milestones in the evolution of this iconic browser.
Firefox 131 brings temporary permissions, a preview option for background tabs, translation to and from Swedish, and various security fixes.
Firefox 132 rolls out support for "Microsoft Play Ready encrypted media playback" to select sites on Windows. This feature gives viewers better performance and less battery drain while streaming media.
Firefox 133 implements Bounce Tracking Protection as part of the "Strict" mode of Enhanced Tracking Protection.
Polypane
Polypane 22 runs on Chromium 130. It starts faster, has better performance when resizing panels, and improves the meta, outline, and elements panels. It also allows you to save social media previews and emulates the latest iPhone and Pixel devices.
Polypane 22.1 has an entirely new tab logic that makes tabs persistent in memory, making tab switching faster and more reliable. You can mark which tabs will be kept in memory and which will be reloaded. There is also a new split layout, astigmatism simulators, and other UI improvements.
Vivaldi
Vivaldi 7.0 promises an entirely new experience. The dashboard has everything at hand, the Feed Reader is better organized, and the Email Manager controls all your messages. The latest Vivaldi Sync functionality ensures a seamless experience, no matter your device.
WebKit
Safari is the only major modern browser locked to the operating system. Therefore, any updates are highly expected.
Safari 18.1 brings support for the Writing Tools enhanced by Apple Intelligence. Included in the package are also various fixes and updates, some counting for Interop 2024
Safari 18.2 brings a long list of new features and resolved issues. CSS text-box and View Transitions, or the support for spatial videos and photos, are just some of the features. The full list is available in the official release notes down below.
Wolvic
2024 has been a good year for Wolvic, and they have the review to prove it. They topped it off with the release of version 1.1 of the Chromium branch.
📡 The Release Radar
- Angular v19 - Deliver web apps with confidence
- Astro 5.0 - The web framework for content-driven websites
- Deno 2, Deno 2.1 - the open-source JavaScript runtime for the modern web
- Docusaurus 3.6 - Easy to maintain open source documentation websites
- Electron v33.0.0, Electron v33.1.0, electron v33.2.0 - Build cross-platform desktop apps with JavaScript, HTML, and CSS
- Eleventy v3.0.0 - A simpler site generator
- Ember 5.12 - A JavaScript framework for creating ambitious web applications
- ESLint v9.11.0, ESLint v9.12.0, ESLint v9.13.0, ESLint v9.14.0, ESLint v9.15.0 - Find and fix problems in your JavaScript code
- Express v5 - Fast, unopinionated, minimalist web framework for node
- Jasmine 5.4.0 - Simple JavaScript testing framework for browsers and node.js
- Neutralinojs v5.4.0 - Portable and lightweight cross-platform desktop application development framework
- Next.js 15 - The React Framework
- Node v23.0.0 (Current), Node v23.1.0 (Current), Node v23.2.0 (Current), Node v23.3.0 (Current), Node v23.4.0 (Current), Node v22.10.0 (Current), Node v22.11.0 (LTS) - An asynchronous event-driven JavaScript runtime
- Nuxt 3.14 - The Intuitive Vue Framework
- React v19 - The library for web and native user interfaces
- React Native Storybook 8 - Storybook for React Native
- Redwood v8.1.0, Redwood v8.2.0, Redwood v8.3.0, Redwood v8.4.0 - The App Framework for Startups
- Svelte 5 - web development for the rest of us
- Tailwind CSS v4.0 Beta 1 - A utility-first CSS framework for rapid UI development
- TypeScript 5.7 - a superset of JavaScript that compiles to clean JavaScript output
- Vite 6.0 - Next generation frontend tooling
🛠️ Front End Resources
- Awesome Docs Gallery - A crowdsourced, open-source gallery for high-quality dev docs
- Beautifully crafted animated icons - An open-source collection of smooth animated icons
- Easing Graphs - A collection of easing graphs for web developers
- Easing Wizard - CSS easing functions made easy
- Free Public APIs - A collection of Free Public APIs for Students and Developers.
- Graphicsauce Freebies - A collection of 3D icons, placeholder logos, mockups, and flat illustrations, free for non-commercial use.
- SVG Loaders - 100+ Open Source SVG Spinners
- Tailwind Colors - All the Tailwind CSS colors in a handy cheatsheet
- VTracer - A utility to convert raster images into vector graphics
There's more where that came from. Explore the rest of the Front End Resource collection.
Wrapping things up
Ukraine is still suffering from the Russian invasion. To find ways to help, please read Smashing Magazine's article We All Are Ukraine 🇺🇦 or contact your trusted charity.
If you enjoyed this newsletter, there are a couple of ways to support it:
- 📢 share the link to this issue on social media
- ❤️ follow this newsletter on Twitter
- ☕ buy me a coffee
Each of these helps me out, and I would appreciate your consideration.
That's all I have for this issue. Have a great and productive week, keep yourselves safe, and spend as much time as possible with your loved ones. I will see you again next time!