Summer is over, school has started, and it's time for the Front End News to return to the regular schedule. Here are the main things that have happened since the last update.
State of CSS 2023 results are available, and you can submit your proposal for Interop 2024. In Browser News, we have a look at what happened to the web platform in August, and we check the major browser releases that occurred since the last issue: Chrome 116 and 117, Firefox 117, Polypane 15, Safari 16.6 and 17, and Vivaldi 6.2.
On the Release Radar, we encounter products like Angular 16.2, Astro 3.0, Bun 1.0, Electron 26.0.0, TypeScript 5.2 (and a first look at TS 5.3), and WordPress 6.3 "Lionel."
We wrap things up with many tools, assets, and resources for all your design and development needs.
State of CSS 2023 Results
The State of CSS survey is already an established landmark in the web industry. Browser vendors use these results to choose which web platform features to focus on. The results for the 2023 edition are now available, and we can find many exciting data there.
:has(), container queries and viewport units are the most adopted features. Animate to auto and Masonry Layout are the most desired features. Subgrid is the feature that generated the most feedback.
Submit your proposals for Interop 2024
2023 is far from over, but the organizers are already preparing for Interop 2024. Now is your chance to propose the features the program will focus on next year.
💻 Browser news
August brought us updates from all major browser makers. The stable releases were Chrome (and MS Edge) 116, Firefox 116-117, and Safari 16.6. Firefox implemented the Audio Output Devices API and the latest spec of CSS Nesting, while Chrome brought experimental support for CSS Motion Path and the Document Picture-in-Picture API.
The Google Chrome team has also announced a faster release schedule starting with Chrome 119. The releases will come every three weeks instead of every four weeks as they do now.
Chrome
As mentioned above, Chrome 116 brought support for the Document Picture-in-Picture API. We can now open any document in PiP mode, not just video content, as before.
Devs can now debug missing stylesheets a lot easier. There is an editor for easing functions, and the Lighthouse panel now runs Lighthouse 10.3.
Chrome 117 brings new CSS features for entry and exit animations, Array grouping, a more streamlined way to do local overrides in DevTools, Lighthouse 10.4, and partial subgrid support.
Lighthouse 11 is available in PageSpeed Insights, as a command line tool, and inside Chrome Canary. This update will introduce new accessibility audits, while Interaction to Next Paint is no longer experimental.
Regular users will have access to the new tool once Chrome 118 reaches stable status.
Firefox
Firefox 117 supports improved CSS Nesting, new CSS compatibility hints inside the Web Inspector, more comprehensive support for credit card autofill, and various security fixes.
Microsoft Edge
Edge 116 updates three features - Microsoft Edge for Business, Option to attach the Edge sidebar to the Windows desktop, and Tab organization - with fixes to various bugs and performance features.
Edge 117 updates several features - Microsoft Edge for Business Banner, Microsoft Edge Sync Favorites Recovery, and Autofill Autocomplete. Web Select, the Unload event, and several more features are deprecated. Microsoft Edge for Business is available for unmanaged Windows devices.
Polypane
There is another major release from Polypane. Version 15 runs on Chromium 116 and brings a new Browse panel, the option to search from the address bar, Mastodon preview, and many fixes and performance improvements.
Vivaldi
Vivaldi 6.2 for desktops boasts a significant improvement in window opening speed, as the interface has been refactored on top of Portal Windows. Both desktop and mobile versions include fixes to multiple issues while existing tools have been fine-tuned for a better user experience.
WebKit
Safari 16.6 brings no new features but fixes many important issues, such as using currentColor with color-mix() or container queries using the border box instead of the content box. The list is short; you can check it in the release notes.
Safari 17 is a significant step forward for the WebKit team. The list of new features and important changes is huge (printing it without further formatting would take close to 50 pages). The new HTML search element, the popover attribute, full support for Media Queries level 4, CSS @counter-style, support for JPEG XL, HEIC, and AV1 media formats, Web apps on Mac, and the list goes on and on.
Safari 17 is already available for iOS 17 and iPadOS 17. Mac users can access a public beta version, and the stable version will deploy on September 26th.
Last but not least, we got three iterations of Safari Technology Preview, numbered 176, 177, and 178, respectively. If you want more details, I invite you to check out the release notes below.
- Release Notes for Safari Technology Preview 176
- Release Notes for Safari Technology Preview 177
- Release Notes for Safari Technology Preview 178
📡 The Release Radar
- Angular 16.2 - The modern web developer’s platform
- Astro 3.0 - a website build tool for the modern web
- Backbone.js 1.5.0 - Give your JS App some Backbone with Models, Views, Collections, and Events
- Bun 1.0 - an all-in-one toolkit for JavaScript and TypeScript apps
- Deno 1.36 - A modern runtime for JavaScript and TypeScript
- Electron 26.0.0 - Build cross-platform desktop apps with JavaScript, HTML, and CSS
- Fresh 1.4 - A next-gen web framework from Deno
- Node v16.20.2 (LTS), Node v18.17.1 (LTS), https://nodejs.org/en/blog/release/v18.17.1, Node v20.6.0 (Current), Node v20.6.1 (Current) - an asynchronous event-driven JavaScript runtime
- NodeBB v3.4.0 - Node.js based forum software built for the modern web
- Preact 10.17.0 - Fast 3kB alternative to React with the same modern API
- TypeScript 5.2, TypeScript 5.3 First Look - a superset of JavaScript that compiles to clean JavaScript output
- Vuestic UI v1.8.0 - Free and Open Source UI Library for Vue 3
- YouTube.js v6.4.0 - A wrapper around YouTube's internal API
- WordPress 6.3 - Say hello to WordPress 6.3 “Lionel”
🛠️ Front End Resources
- 0 to 255 - a color tool to find lighter and darker colors based on any given color.
- Accessible Brand Colors - Check if your brand colors are ADA compliant
- Accessible Palette - Create color systems with consistent lightness and contrast
- Blendicons - Free, world top icons
- ConvertFiles - Convert Your Images Online for Free
- CSS Loaders - The Biggest Collection of Loading Animations
- Flexer - CSS flexbox playground
- Iconbuddy - Over 180k+ open source icons
- PDFTool - Edit PDF files, with privacy integrated
- Shots - Craft beautiful presentations for your social media, website, and more!
- SVG Doodle Icon - Library of free SVG Doodle Drawings
- TOOOLS.design - A growing archive of 1000+ design resources
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 - if you are looking for ways to help, please check 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, spend as much time as possible with your loved ones, and I will see you again next time!