DEV Community: Adrian Sandu

State of AI 2025 Results, State of Devs 2025, Launching Interop 2025, Interop 2024 Summary, and more | Front End News #113

Adrian Sandu — Fri, 30 May 2025 15:26:08 +0000

NOTE: This is issue #113 of my newsletter, which was published on Sunday, April 27. You might find this information valuable and exciting, and you may want to receive future issues before anyone else. If so, I invite you to join the subscriber list at frontendnexus.com.

We begin this issue with two new surveys from Sacha Greif and Devographics. We got the results for the first State of AI survey, and the State of Dev survey is still running. We continue with the announcements for Interop 2025, together with a couple of reports regarding last year's edition of the initiative.

In Browser News, the Google Chrome team is really stepping up its efforts. The monthly "New to the web platform" releases are accompanied by monthly digests about Baseline and deep dives into specific features. When it comes to releases, we have Chrome 132, 133, 134, and 135, Firefox 134, 135, 136, and 137, Polypane 23 and 24, Vivaldi 7.1 and 7.2, and Safari 18.3 and 18.4.

On the Release Radar, we have major releases from important names such as Electron 34 and 35, Material UI v7, Neutralinojs v6, Tailwind CSS v4, Typescript 5.8, or Vitest 3.0, along with a large number of updates from other popular libraries.

We round this issue up with a large set of Front End Resources, including fonts, icons, illustrations, gradient generators, and many other useful tools and utilities.

State of AI 2025 Results

We are all familiar with Sacha Greif's surveys, such as the State of CSS, the State of JavaScript, or the State of React. We have here the results for the first edition of the State of Web Dev AI survey, which had over 4000 respondents.

ChatGPT, Microsoft Copilot, DeepSeek, and Gemini were the most used AI models. Hallucinations and inaccuracies were the most common complaints. GitHub Copilot was the most used coding assistant. DALL-E, Midjourney, and Stable Diffusion were the most used tools for image generation.

State of AI 2025

State of Devs 2025

State of Devs is the latest survey from Devographics. Unlike the other surveys, which focus on a programming language or framework, this one focuses on developers themselves and topics such as health, hobbies, careers, and more.

State of Devs 2025

Announcing Interop 2025

Interop, hailed as the web industry's most impactful initiative of the last decade, promises to make waves again with the launch of the 2025 edition. The announcements made by all parties involved mark the beginning of a journey that promises to shape the future of web development.

This year, the focus will be on improving the Core Web Vitals metrics, some CSS and UI features highlighted by the State of CSS 2024 survey, the Web Assembly API, and the removal of the Mutation Events. The entire list of 19 focus points is included in the announcements below, and progress can be tracked on the Interop Dashboard.

Looking back at Interop 2024

In this section, we reflect on the achievements and learnings from the 2024 iteration of the Interop initiative, as shared in the after-action reports from the Chrome and WebKit teams.

💻 Browser News

Web Platform Updates

Rachel Andrew provided the usual monthly updates to the web platform. Although they focus mainly on Chrome, they offer a broad view of the industry's advancements month to month.

But wait! There is more! The Chrome team has also started publishing monthly digests of Baseline updates.

Did I mention that there are many articles focused on specific features?

There is also a central hub for the status of the entire web platform. You can even filter the features based on the baseline level to which they belong. This portal is a handy tool for deciding on the support level of your website or web app.

Web Platform Status

Chrome

Chrome 132 brought toggle events for the <dialog> element, the support for capturing video of a single page component, and File System API for Android and WebView. Developers can now view past chats with Gemini AI, the settings panel has a new look, and there are improvements to the Performance, Animations, and Elements > Styles panels. In contrast, the Performance Insights panel has been deprecated and removed.

Chrome 133 introduces several important CSS improvements: an advanced attr() function, scroll state container queries, and better control of vertical spacing using the text-box, text-box-trim, and text-box-edge properties.

In DevTools, the AI panel can persist locally in your chat history. The Performance panel continues to receive further improvements. Lighthouse was upgraded to version 12.3.0, and there is a new panel where you can find out "What's New."

Chrome 134 introduces new features to the dialog element, and the Web Locks API now works on shared storage. In DevTools, the Performance and Elements panels receive updates, along with many other smaller changes.

Chrome 135 enables developers to create carousels powered only by CSS and implements support for the CSS shape function, along with the new command and command for attributes.

In DevTools, we continue to receive updates to the Performance panel, various panels get better empty states, and Lighthouse receives an update to version 12.4.0.

Firefox

Firefox 134 enables touchpad hold gestures on Linux, hardware-accelerated playback of HEVC video content, and various security fixes. Developers have better support for debugging web extensions, while the Network panel displays information about Early Hints.

Firefox 135 brings credit card autofill and integrated AI chatbot access and enforces certificate transparency.

Firefox 136 has an updated sidebar, a vertical tab bar, more options to clear browsing data, several web platform updates, and various security fixes.

Firefox 137 brings tab groups, an updated address bar, and various security fixes. Developers can inspect font metadata and can override network requests with local files.

Polypane

Polypane 23 runs on Chromium 132. Windows users have a distinct dock icon for their undocked panels and devtools. Update 23.1 lets you see which elements have event listeners, while someone can trigger all screenshot features using keyboard shortcuts.

Polypane 24

Polypane 24 brings a new recording feature, a 3D stacking context visualization, tab customization options, and the option to edit HTML while preserving events. Everything now runs on Chromium 136.

Polypane 24: Recording, 3D view, Custom tab colors and HTML editing

One interesting fact is that Polypane has hired Igalia (one of the Interop participants) to improve the emulation of devices in Chromium.

Polypane is hiring Igalia to work on Chromium

Vivaldi

Vivaldi 7.1 brings a new Weather widget, more dashboard customization options, the ability to import open tabs when migrating from another browser, and the ability to share a tab with any of your other Vivaldi-running devices.

Vivaldi 7.2 brings faster page load, an improved address bar, and the option to override keyboard shortcuts.

WebKit

Safari 18.3 is a quality-of-life update that mostly brings fixes and improvements to existing features.

By contrast, Safari 18.4 brings 84 new features. These include Declarative Web Push, multiple CSS, HTML, and JavaScript features, and many more. Over 180 issues have been fixed, and 13 older features have been deprecated.

Wolvic

Wolvic has taken another big step forward. This set of updates includes better window management, new display options, support for the Meta Quest 3S, and many other improvements.

Gecko Wolvic 1.8.0 and Chromium Wolvic 1.2 Released

📡 The Release Radar

Angular 19.2 - Deliver web apps with confidence
Astro 5.1, Astro 5.2, Astro 5.3, Astro 5.4, Astro 5.5, Astro 5.6, Astro 5.7 - The web framework for content-driven websites
Babel 7.27.0 - a compiler for writing next generation JavaScript
Babylon.js 8.0 - an open game and rendering engine packed into a friendly JavaScript framework
Bun 1.2 - Incredibly fast JavaScript runtime, bundler, test runner, and package manager – all in one
Cypress 14, Cypress 14.1 - Fast, easy and reliable testing for anything that runs in a browser
Deno 2.2 - A modern runtime for JavaScript and TypeScript
Docusaurus 3.7 - Easy to maintain open source documentation websites
Electron 34.0.0, Electron v34.1.0, Electron v34.2.0, Electron v34.3.0, Electron 35.0.0 - Build cross-platform desktop apps with JavaScript, HTML, and CSS
Ember 6.1, Ember 6.2, Ember 6.3 - A JavaScript framework for creating ambitious web applications
ESLint v9.18.0, ESLint v9.19.0, ESLint v9.20.0, ESLint v9.21.0, ESLint v9.22.0, ESLint v9.23.0 - Find and fix problems in your JavaScript code
Ionic 8.5 - A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript
Inferno v9.0.0 - An extremely fast, React-like JavaScript library for building modern user interfaces
Jekyll 4.4.0 - Jekyll is a blog-aware static site generator in Ruby
Material UI v7 - Comprehensive React component library that implements Google's Material Design
Neutralinojs v6.0.0 - Portable and lightweight cross platform desktop app development framework
Next.js 15.3 - The React Framework
Node v23.11.0 (Current), Node v23.10.0 (Current), **Node v20.19.0 (LTS), Node v23.9.0 (Current), Node v18.20.7 (LTS), Node v23.8.0 (Current), Node v22.14.0 (LTS), Node v20.18.3 (LTS), Node v23.7.0 (Current), Tuesday, January 21, 2025 Security Releases, Node v22.13.0 (LTS), Node v23.6.0 (Current), Node v23.5.0 (Current) - An asynchronous event-driven JavaScript runtime
Parcel v2.14.0 - The zero configuration build tool for the web
pnpm 10.7, pnpm 10.8 - Fast, disk space efficient package manager
Prettier 3.5 - an opinionated code formatter
Puppeteer v24.0.0, Puppeteer v24.1.0, Puppeteer v24.2.0, Puppeteer v24.3.0 - JavaScript API for Chrome and Firefox
React 19.1 - The library for web and native user interfaces
React Admin v5.5.0 - A frontend Framework for single-page applications
React Native 0.77, React Native 0.78, React Native 0.79 - A framework for building native applications using React
Storybook 8.5 - The industry standard workshop for building, documenting, and testing UI components in isolation
Tailwind CSS v4.0, Tailwind CSS v4.1 - A utility-first CSS framework for rapid UI development
TypeScript 5.8 - a superset of JavaScript that compiles to clean JavaScript output
Vitest 3.0 - Next generation testing framework powered by Vite
Vuetify v3.8.0 - Vue Component Framework
YouTube.js v13.0.0, YouTube.js v13.1.0 - A JavaScript client for YouTube's private API, known as InnerTube

🛠️ Front End Resources

AI CSS Animations - Make CSS Animations with AI
Braille Institute Free Font - a family of hyperlegible fonts
Colorify Rocks - AI Color Palette Generator from Words
CSS Triggers - A reference for the performance implications of CSS properties
Flexbox Labs - A visual tool for experimenting with flexbox layouts
Flexbox Labs Grid - A visual tool for experimenting with grid layouts
Free Sound - a collaborative collection of free sounds
Gradienty - Tailwind Gradient Generator
iconmonstr - Free simple icons for your next project
ITOA - Image to ASCII Converter
Phosphor Icons - a flexible icon family
Photo Gradient - Generate beautiful gradients from colors or from a photo
Generate QRs - QR code generator and editor
Reshot - Free Icons & Illustrations
Symbl - a world of SVG icons, symbols, and design tools
Tabler Avatars - Free User Avatars
Tabler Icons - Free and open source icons designed to make your website or app attractive, visually consistent and simply beautiful
Tabler Illustrations - Effortlessly customize a wide range of SVG illustrations for various projects
Tailwind Grid Generator - Generate Tailwind CSS grids
tinygradient - simple gradient generator
Waveform Renderer - Upload an audio file to render its waveform
Who Can Use - A tool that brings attention and understanding to how color contrast can affect people with different visual impairments.

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!

The 2024 Web Almanac, State of CSS and State of JavaScript Results, the 2024 Advent Calendar roundup | Front End News #112

Adrian Sandu — Thu, 16 Jan 2025 16:57:49 +0000

NOTE: This is issue #112 of my newsletter, which went live on Saturday, December 28. You might find this information valuable and exciting and want to receive future issues as they are published ahead of everyone else. In that case, I invite you to join the subscriber list at frontendnexus.com.

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.

The 2024 Web Almanac

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 CSS 2024 Results

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.

State of JavaScript 2024 Results

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.

The 2024 Roundup of Advent Calendars for Designers and Developers

💻 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.

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.

20 years of Firefox: How a community project changed the web

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

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.

Polypane 22.1: true browser tabs and a new split layout

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
SVG WTF - Free online SVG editor
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!

State of HTML 2024, Interop 2025, Chrome 129, Firefox 130, Safari 18, TypeScript 5.6, and more | Front End News #111

Adrian Sandu — Mon, 07 Oct 2024 18:40:06 +0000

NOTE: This is issue #111 of my newsletter, which went live on Friday, September 20. You might find this information valuable and exciting and want to receive future issues as they are published ahead of everyone else. In that case, I invite you to join the subscriber list at frontendnexus.com.

The State of HTML 2024 survey is now open, and Interop 2025 is receiving proposals. We have new browser updates in Chrome 129, Firefox 130, Safari 18, Polypane 21, Vivaldi 6.9, and Wolvic 1.7. On the Release Radar, we have Express 5, Material UI v6, Redwood v8, TypeScript 5.6, Vue 3.5, and more. The Resource Bundle includes avatars, icons, gradient generators, image utilities, an SVG editor, and a set of CSS loading animations.

State of HTML 2024

The 2024 edition of State of HTML 2024 is live. The questions cover more than simple HTML. You'll touch on aspects related to web components, accessibility (a11y), native and web apps, and more. This is your yearly chance to help shape the path the web platform and browsers take.

State of HTML 2024

Interop 2025

The Interop initiative is getting ready for the 2025 edition. You can submit your proposals until October 9th. Do you have any pain points about web browser compatibility? Share your pain; it might be fixed by next year.

💻 Browser News

Web Platform Updates

Do you want to check all the updates to the web platform in a single go? There's no better place than Rachel Andrew's monthly updates. Now for the month of August.

New to the web platform in August

Chrome

Chrome 129 introduces scheduler.yield() (allowing developers to improve perceived performance), CSS animation with intrinsic sizes, and more. Developers also get improvements to performance and elements panels, Lighthouse 12.2.0, and even more fixes.

Firefox

Firefox 130 improves the translation service with new languages and the option to translate selected text to a different language after you translated the entire page. If you live in the USA or Canada, you can also check the local weather directly on the new tab page.

Polypane

Polypane 21 brings better stability for devices running on Apple chips. It upgrades the Chromium platform to version 128. And if you install the 21.1 update, you'll get scroll syncing to all scrollable areas and various improvements and fixes.

Vivaldi

Vivaldi released the 6.9 update for all platforms. Desktop users receive an improved tab management experience. Android users receive a revamped Settings panel. iOS users get desktop-style tabs and finer control of the Address fields. Everyone gets a suite of minor improvements and fixes.

WebKit

Safari 18 is finally here. You can now hide many of the annoying banners you encounter. There is support for the View Transitions API and CSS Style Queries. iPhone mirroring and Safari remote inspection development and debugging are also easier.

The list of new features is long, full of details, and is available in the official post linked below:

WebKit Features in Safari 18.0

Wolvic

We last heard from Wolvic a while ago. The 1.7 update brings OpenXR-enabled hand tracking and OpenXR eye tracking (similar to the features available for Apple Vision Pro). The Gecko engine moved up to version 128, and there are many improvements and fixes.

Wolvic 1.7 Released

But wait! There is more! Wolvic also has a Chromium version. Version 1.0 brings this variant closer in feature parity to the Gecko version, with support for eye-tracking navigation.

Wolvic Chromium 1.0 Released

📡 The Release Radar

Astro 4.14, Astro 4.15 - the web framework for content-driven websites
Biome v1.9 - A toolchain for web projects
Chroma.js v3.0.0, Chroma.js v3.1.0 - JavaScript library for all kinds of color manipulations
Deno 1.46 - A modern runtime for JavaScript and TypeScript
Ember 5.11 - A JavaScript framework for creating ambitious web applications
ESLint v9.10.0 - Find and fix problems in your JavaScript code
Express 5.0.0, Express 4.21.0 - Fast, unopinionated, minimalist web framework for node
faker v9.0.0 - Generate massive amounts of fake data in the browser and node.js
Jasmine 5.3.0 - Simple JavaScript testing framework for browsers and node.js
JsonTree.js v3.0.0 - generates customizable tree views to better visualize JSON data
Material UI v6, MUI v6.1 - Comprehensive React component library that implements Google's Material Design
Node v22.9.0 (Current), Node v22.8.0 (Current), Node v22.7.0 (Current), Node v20.17.0 (LTS) - An asynchronous event-driven JavaScript runtime
NodeBB v3.9.0 - Node.js based forum software built for the modern web
pnpm 9.8, pnpm 9.9, pnpm 9.10 - Fast, disk space efficient package manager
preact 10.24.0 - Fast 3kB React alternative with the same modern API
React Email 3.0 - Build and send emails using React
Redwood v8.0.0 - The App Framework for Startups
relay 18.0.0 - a JavaScript framework for building data-driven React applications
Storybook 8.3 - the industry standard workshop for building, documenting, and testing UI components in isolation
TypeScript 5.6 - A superset of JavaScript that compiles to clean JavaScript output
Vue 3.5 - a progressive, incrementally-adoptable JavaScript framework for building UI on the web
Vuestic UI v1.10.0 - an open-source Vue 3 component library

🛠️ Front End Resources

Avatars - a collection of diverse free avatar images
Avaaatars - The largest Library of Avatars, customizable and commercially free
Gradient Generator - Create & export linear, radial, & conic gradients
macOSicons - Free 5000+ macOS app icons in the style of macOS Monterey, Big Sur
Polotno Studio - Free Online Design Editor
Popicons - Make your designs pop with Popicons
Slimify - Compress your images in a blink
SVG WTF - powerful SVG editor
Whirl - CSS loading animations with minimal effort!

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!

js13kGames 2024, Stack Overflow 2024 and State of React 2023 Results, Interop 2024 updates, and more | Front End News #110

Adrian Sandu — Tue, 10 Sep 2024 18:12:28 +0000

NOTE: This is issue #110 of my newsletter, which went live on Friday, August 16. You might find this information valuable and exciting and want to receive future issues as they are published ahead of everyone else. In that case, I invite you to join the subscriber list at frontendnexus.com.

The 13th edition of js13kGames is open. We got the results for the Stack Overflow 2024 Developer Survey and the State of React 2023 survey. The Browser News start with updates on Interop 2024. We got updates from all major browsers, including Chrome 127, Firefox 128, Polypane 20.1, and Safari 17.6. On the Release Radar, we have Angular 18.1-18.2, jQuery 4 Beta 2, Meteor.js 3, TypeScript 5.6 Beta, and more. We wrap this issue with a set of resources, including gradients, illustrations, and image utilities.

js13kGames 2024

The 13th edition of js13kGames is open, and the theme is, unsurprisingly, Triskaidekaphobia, also known as "fear or avoidance of the number 13." Participants have until September 13th, 2024, to submit their work. If you have no idea how to integrate this year's theme, check out the announcement article for some suggestions.

Stack Overflow 2024 Developer Survey Results

Stack Overflow released the results of their 2024 Developer Survey. This year, over 65.000 people from 185 countries submitted their answers. Here are some of the highlights of this edition:

Most participants are full-stack developers, followed by back-end developers, students, and front-end developers
42% have a hybrid work environment, 38% work remotely, and 20% work in the office
JavaScript remains the most popular language overall
Amazon Web Services is the most popular Cloud Platform
Docker and npm are the most used tools, while Visual Studio Code is the most used IDE
MS Teams, Slack, and Zoom are the top three communication tools
Over 80% of participants have used ChatGPT for their work

For more details, I invite you to prospect the complete interpretation of the results.

2024 Stack Overflow Developer Survey

State of React 2023 Results

The State of React survey suffered the same long delay as its sister surveys, but we can finally explore the results. However, this means the survey did not cover React 19 and any other industry development that happened after November 2023.

State of React 2023 Results

💻 Browser News

Web Platform Updates

Rachel Andrew is back with two announcements. One is the customary monthly update for June, and another is a mid-year update to the Interop 2024 program. Baseline Newly Available now includes the Popover API, advanced custom properties with @property, the font-size-adjust property, and text-wrap: balance.

Chrome

Chrome 127 supports CSS font-size-adjust and the option to focus inside scrollable. DevTools allow you to inspect anchor positioning. The Source and Network panels have been improved, and there have been some quality-of-life improvements.

With Chrome 128, Console Insights by Gemini is going live in most European countries. Lighthouse jumps to version 12.1.0. The Performance panel got updated too, and there are multiple smaller fixes and improvements across the entire DevTools.

What's new in DevTools, Chrome 128

Firefox

Firefox 128 brings text translation directly from the context menu. The interface for clearing user data is now cleaner (pun intended). @property and the CSS properties-and-values API are now supported by default. The CSS rules specificity is now displayed in the Inspector Rules view. A set of security fixes completes the package.

Firefox 129 brings an improved Reader View, an enhanced Text and Layout menu, and theme selection. You can hover over background tabs to preview their content. And, of course, more security fixes.

Polypane

Polypane 20.1 brings a live accessibility tree and the option to copy/save SVGs directly from the page. The Meta and Elements panels have new features. The entire browser has improved performance, syncing features, and configuration.

Polypane 20.1: The accessibility tree

WebKit

Safari 17.6 brings safe alignment for Flexbox and a set of bug fixes.

WebKit Features in Safari 17.6

📡 The Release Radar

Angular 18.1, Angular 18.2 - Deliver web apps with confidence 🚀
Astro 4.12, Astro 4.13 - The web framework for content-driven websites
Deno v1.45.0 - A modern runtime for JavaScript and TypeScript
ESLint v9.6.0, ESLint v9.7.0, ESLint v9.8.0, ESLint v9.9.0 - Find and fix problems in your JavaScript code
Hexo v7.3.0 - A fast, simple & powerful blog framework, powered by Node.js
Jasmine 5.2.0 - Simple JavaScript testing framework for browsers and node.js
jQuery 4.0.0 Beta 2 - jQuery JavaScript Library
jQuery UI 1.14.0 - a curated set of user interface interactions, effects, widgets, and themes built on top of jQuery
Meteor.js 3.0 - the JavaScript App Platform
Node v22.5.0 (Current), Node v22.6.0 (Current), Node v20.16.0 (LTS) - An asynchronous event-driven JavaScript runtime
pnpm 9.5 - Fast, disk space efficient package manager
preact 10.23.0 - Fast 3kB React alternative with the same modern API
qwik v1.7.0 - Instant-loading web apps, without effort
TypeScript 5.6 Beta - A superset of JavaScript that compiles to clean JavaScript output

🛠️ Front End Resources

CSS Gradient Generator - Generate and make beautiful Gradients
CSS Grid Generator - Create custom CSS grid layouts more easily
CSS mesh gradients - A collection of 279 vanilla CSS mesh gradients
Handy Arrows - A collection of hand-drawn arrows, doodles, and infographic elements for your next project
My Color Hub - AI Gradient Generator
Repper Patterns - 100% free, high quality geometric patterns
Squoosh - The ultimate image optimizer that allows you to compress and compare images with different codecs in your browser

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!

The Front End Dev Handbook 2024, State of HTML and State of JavaScript 2023 Results, TypeScript 5.5 | Front End News #109

Adrian Sandu — Thu, 11 Jul 2024 15:11:56 +0000

NOTE: This is issue #109 of my newsletter, which went live on Monday, July 8. You might find this information valuable and exciting and want to receive future issues as they are published ahead of everyone else. In that case, I invite you to join the subscriber list at frontendnexus.com.

Front End News is back after a long pause, and the topics are extensive. We'll start with the updated 2024 edition of the Front End Developer/Engineer Handbook by Cody Lindley and the Front End Masters. Next, we have the long-awaited results of the State of HTML and State of JavaScrip 2023 surveys.

There is a lot of news about the Web Platform and mainstream browsers. Google I/O and WWDC were used to announce many upcoming changes. A new player enters the game - Arc, from the Browser Company, is now available on Windows. We have releases from Chrome (125/126), Firefox (126/127), Polypane (19/20), Vivaldi (6.7/6.8), and WebKit/Safari (17.5/18-beta).

Developers have plenty of new shiny versions of their favorite tools of the trade. Angular 18, Electron 30-31, Nuxt 3.12, TypeScript 5.5 RC, and multiple releases from Astro, Deno, ESLint, or Node are just some of the recent releases. There is even a jQuery UI update - are you still using it?

As usual, we wrap up with Front End Resources. This issue includes a large set of icons, shapes, generators, tools, and utilities, all free for you to use.

The Front End Developer/Engineer Handbook 2024

Cody Lindley and the Front End Masters are back with a new Front End Developer Handbook edition. It is the long-expected continuation of a series that took a break in 2019. The industry has experienced many changes over the past five years, and the Handbook is back with fresh advice to help developers master their careers.

State of HTML 2023 Results

State of HTML 2023 is the first attempt at surveying what the community thinks about the current state of HTML. It covered not only the HTML elements, but accessibility, web components, and a lot more. There were over 20000 people and a lot of answers to process. With a new way of displaying the results, we can understand why it took nearly half of 2024 to see them.

Forms and inputs are still major pain points; people want native elements for common interface elements like tabs, and web components are becoming increasingly popular. However, many new features are held back by the lack of wide browser support. You can find more details on the survey results pages.

State of JavaScript 2023 Results

The State of JavaScript is the second survey we discuss in this issue. It had the same ambitious reach as its State of HTML counterpart, with many freeform answer options. Over 23500 developers took part in this edition, and here are some of their choices.

React leads the pack for another year, while Vue climbs to second place, pushing Angular down to third place. Next.js increases its lead over the other meta-frameworks, while Electron and React Native are struggling fiercely for the top spot among mobile and desktop tool kits. Over 70% of the respondents write mostly TypeScript, while less than 10% write only pure JavaScript.

State of JavaScript 2023

💻 Browser News

Web Platform Updates

Google I/O 2024 facilitated a surge of content from the Web.dev team. We take a peek at how AI will integrate with web development work or what new things have appeared for CSS and the web at large,

The newly launched Web Platform Status website makes tracking browser support for any feature easier. This will also serve as a guideline for the yearly Baseline sets, so it's worth keeping an eye on it.

Announcing the Web Platform Dashboard

Last but not least, we have Rachel Andrew's monthly updates on what's new on the web platform.

Arc

Arc is a new(ish) browser from the Browser Company. It has been making waves on macOS and iOS over the last couple of years, and it just arrived on Windows, where Chrome reigns supreme. This launch also propelled Swift (a programming language created by Apple) to become a viable alternative for building Windows applications.

Arc aims to be more than a browser, instead becoming "the operating system for the Internet." The release received a warm reception and good reviews from platforms like The Verge or Tech Radar, which I'm adding below.

Arc from the Browser Company
The Verge: The Arc browser arrives on Windows to take on Chrome and Edge
Tech Radar: The Arc browser just launched and yes, it really is that good

Chrome

Chrome released two versions since the last issue of this newsletter. Chrome 125 brings CSS Anchor Positioning, the Compute Pressure API (measuring the CPU load), and the option to use the Storage Access API for non-cookie storage.

Chrome 126 allows cross-document transitions for same-origin navigation; the CloseWatcher API is back for dialog and popover elements; the DevTools are now running Lighthouse 12.0.0, and more.

Firefox

Firefox 126 allows users to share URLs without tracking parameters. It also supports the zstd compression (heavily used on sites like Facebook) and provides various security fixes.

Firefox 127 brings some quality-of-life improvements (such as auto-launch on Windows or better password security), various security fixes, an improved Screenshot feature, and more.

Polypane

Polypane has also grown two full versions since the last issue. Polypane 19 brings various workflow improvements, such as automatic dark mode emulation, Chromium 124, and more.

Polypane 19: Workflow improvements

Polypane 20 brings Chromium 126, various performance tweaks, better screenshot functionality, and more.

Polypane 20: Browser features and performance

Vivaldi

Vivaldi also had a double release across all three platforms: desktop, iOS, and Android. Vivaldi 6.7 brings better memory performance on desktops, support for multiple windows on iPads, and many quality-of-life improvements on Android devices.

Moving on to update 6.8, we get Vivaldi Mail 2.0, an updated AdBlocker, and better tab management.

WebKit

The WebKit team is determined to prove that Safari is NOT the new Internet Explorer. This means they worked hard to keep their browser on par (or even ahead) of the other browsers. Safari 17.5 brings new CSS features (text-wrap: balance, the light-dark() color function, and @starting-style) and many fixes and quality-of-life improvements.

Apple had its own event - WWDC24 - and used the occasion to highlight the upcoming features in Safari 18 Beta. As release notes are never too user-friendly, I'm linking an article by Stefan Judis, where he discusses all the new stuff, providing extra info about overall browser coverage, Baseline support, and any other relevant data.

📡 The Release Radar

Angular v18 - The modern web developer's platform
Astro 4.6 | Astro 4.7 | Astro 4.8 | Astro 4.9 | Astro 4.10 | Astro 4.11 - The web framework for content-driven websites
Biome v1.7 - A toolchain for web projects offering formatter and linter, usable via CLI and LSP.
Deno 1.43 | Deno 1.44 - A modern runtime for JavaScript and TypeScript
Docusaurus 3.3 | Docusaurus 3.4 - Easy to maintain open source documentation websites
Electron 30 | Electron 31 | Electron 31.1 - Build cross-platform desktop apps with JavaScript, HTML, and CSS
Ember v5.8.0 | Ember v5.9.0 - A JavaScript framework for creating ambitious web applications
esbuild v0.21.0 - An extremely fast bundler for the web
ESLint v9.0.0 | v9.1.0 | v9.2.0 | v9.3.0 | v9.4.0 | v9.5.0 - Find and fix problems in your JavaScript code
Headless UI v2.0 for React - Completely unstyled, fully accessible UI components designed to integrate beautifully with Tailwind CSS
Ionic 8 | Ionic 8.1 - A new way to build and ship for mobile
jQuery UI 1.13.3 - A curated set of UI interactions, effects, widgets, and themes built on top of jQuery
Neutralinojs v5.2.0 - Build lightweight cross-platform desktop apps with JavaScript, HTML, and CSS
Node: Security Releases July 8, 2024 | Current v22.0.0, v22.1.0, v22.2.0, v22.3.0, v22.4.0 | Long Term Support (LTS): v20.13.0, v20.14.0, v20.15.0 - An asynchronous event-driven JavaScript runtime
npm v10.6.0 | npm v10.7.0 | npm v10.8.0 - The package manager for JavaScript
Nuxt 3.12 - The Intuitive Vue Framework
Nx 19.0 - Smart Monorepos · Fast CI
playwright v1.44.0 - A framework for Web Testing and Automation
pnpm v9.0.0 | v9.1.0 | v9.2.0 | v9.3.0 | v9.4.0 - Fast, disk space efficient package manager
preact 10.21.0 - Fast 3kB React alternative
React 18.3.0 ,React 19 Beta - The library for web and native user interfaces
Redwood v7.6.0 - The App Framework for Startups
Storybook 8.1 - A frontend workshop for building UI components and pages in isolation
TypeScript 5.5 - A superset of JavaScript that compiles to clean JavaScript output
YouTube.js v10.0.0 - A wrapper around YouTube's internal API

🛠️ Front End Resources

Boring Utils - Free, privacy-first daily utilities
Chromicons - Handcrafted Open Source icons
Code Screenshot - Create stunning visuals of your code
Color Palettes by Deblanc - Inspirational color palettes tailored to your vision
Colors Visualizer - Visualize Your Colors On Real Designs for Better Experience
Cool Shapes - 100+ Abstract shapes with cool grainy gradient
CSS Shape - The Ultimate Collection of CSS-only Shapes
Formatify -
Gradientor - A minimalist radial background generator
HEX·P3 - Quickly convert your HEX colors to Display P3 color space
Logoipsum - 100 free placeholder logos
Pic Smaller - Compress JPEG, PNG, WEBP, AVIF, SVG and GIF images intelligently
Realtime Colors - Visualize Your Colors & Fonts On a Real Site
Softr SVG Shape Generator - Create Beautiful SVG Shapes
Softr SVG Wave Generator - Create Beautiful SVG Waves
Softr YouTube Thumbnail Downloader - A free tool for instantly grabbing and downloading any YouTube thumbnail
Super Designer Tools - A collection of free design tools to create unique backgrounds, patterns, shapes, images, and more
SVGViewer - An online tool to view, edit and optimize SVGs.
Tailwind CSS Color Generator - Generate, edit, save and share Tailwind CSS color shades
The good colors - Create a color palette using OKLCH, ensuring consistent perceptual changes in lightness and chroma
Type Fluidity - Calculate fluid typography sizes
VISIWIG Indie Icons - Copy/Paste icons into HTML, CSS, or Illustrator
VISIWIG Vector Pattern Generator - Customize seamless patterns and export for the web or your favorite vector software
Who Can Use - A tool that brings attention and understanding to how color contrast can affect people with different visual impairments.

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 want 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!

35 Years of Web, Speedometer 3, Chrome 123-124, Firefox 124-125, Vivaldi mobile 6.6, and more | Front End News #108

Adrian Sandu — Wed, 08 May 2024 15:32:43 +0000

NOTE: This is issue #108 of my newsletter, which went live on Wednesday, April 17. You might find this information valuable and exciting and want to receive future issues as they are published ahead of everyone else. In that case, I invite you to join the subscriber list at frontendnexus.com.

We mark a significant milestone in this issue - 35 years of the World Wide Web. Speedometer 3.0 sets a new standard for browser performance. Browser News brings you the latest updates for Chrome (123-124), Firefox (124-125), and Vivaldi mobile (6.6), ensuring you stay ahead in the digital landscape. The Release Radar has new releases and updates, including Angular 17.3, Bun 1.1, Deno 1.42, ESLint v9, Gulp v5, WordPress 6.5, and more. We wrap things up with tools, utilities, images, and fonts, equipping you with everything you need for your web design and development needs.

The Web’s 35th Birthday

March 12 marks 35 years since the birth of the Web. This year, we received an open letter from its creator, Tim Berners-Lee, and an article from the CEO of the W3C.

What are the key points we should remember? Big corporations still influence the Web, and the fast rise of AI only exacerbates the situation. We must address power concentration and the personal data market that enables targeted advertising.

Speedometer 3.0

Speedometer is a browser benchmark that has just reached the third major iteration.

💻 Browser News

Rachel Andrew provides the March synopsis of what new things launched on the web platform.

New to the web platform in March

Chrome

Chrome 123 supports the new light-dark() function, allows you to diagnose responsiveness on your site with the Long Animation Frames API, and more. The DevTools have been updated extensively, including the Elements and Network panels and upgrading Lighthouse to version 11.5.

Chrome 124 has just been released. It brings two new APIs for using declarative shadow DOM in JavaScript, a new API for WebSocket Stream, better view transitions, and more. DevTools include a new AutoFill panel, better CSS nesting, Lighthouse 11.6, and so on.

Firefox

Firefox 124 brings a suite of quality-of-life improvements and security fixes.

Firefox 125 supports the AV1 codec and the popover global attribute, providing numerous security fixes and minor web platform additions.

Vivaldi

Vivaldi mobile users get their upgrade to version 6.6, both on Android and iOS.

📡 The Release Radar

Angular v17.3.0 - The modern web developer's platform
Babylon.js 7.0.0 - A game and rendering engine packed into a friendly JavaScript framework
Bun 1.1 - An all-in-one toolkit for JavaScript and TypeScript apps
Cypress 13.7.0 - Fast, easy, and reliable testing for anything that runs in a browser
D3 v7.9.0 - A free, open-source JavaScript library for visualizing data
Deno 1.42 - A modern runtime for JavaScript and TypeScript
Docusaurus 3.2 - Easy to maintain open source documentation websites
ESLint v9.0.0 - Find and fix problems in your JavaScript code
Express 4.19.0 - Fast, unopinionated, minimalist web framework for Node
Gulp v5 - A toolkit to automate & enhance your workflow
Neutralinojs v5.1.0 - Portable and lightweight cross-platform desktop application development framework
Next.js 14.2 - The React Framework for the Web
Node: Security Releases April 3, April 10 | Current: v21.7.0, v21.7.1, v21.7.2, v21.7.3 | LTS: v20.12.0, v20.12.1, v20.12.2, v18.20.0, v18.20.1, v18.20.2 - An asynchronous event-driven JavaScript runtime
Nuxt 3.11 - The Intuitive Vue Framework
Preact 10.20.0 - Fast 3kB alternative to React with the same modern API
Storybook 8 - A frontend workshop for building UI components and pages in isolation
VitePress 1.0 and 1.1 - Vite & Vue powered static site generator
WordPress 6.5 “Regina” - The most popular website platform in the world
zx 8.0.0 - A tool for writing better scripts

🛠️ Front End Resources

AI Color Combination Generator - Generate color combinations for any project using AI
CSSmatic - The ultimate CSS tools for web designers
Figma Checklists - A set of benchmarks to elevate the design and quality of your Figma components
Gradientor - A minimalist, beautiful Radial Background Generator
Hex Colors - Free color tools, palettes, and color schemes
Lumni - free AI-generated stock photos and royalty-free images
The Inter typeface family - A free and open source font family
Variable Fonts - A simple resource for finding and trying variable fonts

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 want 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!

Apple vs the EU, Chrome 122, Firefox 123, MS Edge 122, Polypane 18, Safari 17.4, and more | Front End News #107

Adrian Sandu — Mon, 25 Mar 2024 21:32:47 +0000

NOTE: This is issue #107 of my newsletter, which went live on Monday, March 11. You might find this information valuable and exciting and want to receive future issues as they are published ahead of everyone else. In that case, I invite you to join the subscriber list at frontendnexus.com.

In this issue, we examine the recent interactions between Apple and the EU and their impact on the web platform and the industry. Interaction to Next Paint (INP) replaces First Input Delay (FID) in the Core Web Vitals lineup. Browser News covers Chrome 122, Firefox 123, MS Edge 122, Polypane 18, Vivaldi 6.6 for desktop, Safari 17.4, and Wolvic 1.6.

The Release Radar tracks many updates and releases, such as Angular v17.2, Astro 4.3, Babel 7.24, Deno 1.41, jQuery 4.0.0 BETA, Redwood v7.0, TypeScript 5.4, and more. Today's Web Resources include icons, gradients, generators, and valuable utilities.

Apple vs the EU

Apple is currently locked in a struggle with the EU. I covered in the last issue how they were forced to allow other browser engines to run on iOS devices for EU users. As the DMA deadline loomed closer, things escalated further.

Initially, Apple announced cutting support for progressive web apps from the home screen. As expected, this caused a wave of outrage. People started dissecting the official announcements and highlighting Apple's malicious compliance. Open Web Advocacy even penned an open letter to Tim Cook.

Faced with all this opposition, Apple backtracked on its decision regarding PWAs. The fight is far from over, though. As this topic is too large and
important for a single article, I've selected multiple viewpoints to help you better understand what's happening.

Apple.com: .Update on apps distributed in the European Union
Open Web Advocacy:
Apple backs off killing web apps, but the fight continues
Open Letter to Tim Cook, Sabotaging Web Apps Is Indefensible
Adactio: Rotten Apple
Alex Russel: Home Screen Advantage

Core Web Vitals updates

March 12 marks the day that the First Input Delay (FID) will be replaced in the Core Web Vitals program. In preparation for this move, the Web Vitals team prepared a suite of introduction materials, tutorials, and guides to help you update your websites.

💻 Browser News

If the calendar moved to a new month, there's a "new to the web platform" article from Rachel Andrew. This edition covers the release of Chrome 122 and Firefox 123 and the rest of the changes that landed in February.

New to the web platform in February

Chrome

Chrome 122 brings the Storage Buckets API, DevTool improvements in the Performance panel, and more.

Firefox

Firefox 123 supports declarative ShadowDOM, the 103 Early Hints HTTP status code, and more, along with plenty of security fixes.

Microsoft Edge

As usual, the release notes for MS Edge focus mainly on features specific to this browser: policies and Edge-only features.

MS Edge 122 Release Notes

Polypane

Polypane has now reached version 18. It would be a legal adult in many countries if that were its age. This release brings Chromium 122, new features, quality-of-life updates, and bug fixes.

Polypane 18: Introducing Polypane Portal

But wait! There is more! Polypane is now thinking with Portals. You can now open your local host to the world and share your work with anyone. And the landing page of this new feature is simply gorgeous!

Introducing Portal

Vivaldi

Vivaldi released a new version of their desktop client. The 6.6 update brings page navigation and extension support for Web Panels, a redesigned Mail Search, and overhauled Website Permissions and Theming (Dark Mode) settings.

Vivaldi improves Mail Search and Translate, extends Web Panels with extension support

WebKit

iOS 17.4 is the update to bring Apple devices in line with the EU DMA regulations. This means a new version of Safari is included in the package. This release brings an improved layout engine, support for CSS scoping, a long list of fixes and improvements, and more.

Wolvic

It's been a while since we last mentioned Wolvic. The team just released version 1.6, which includes Gecko 121 and Android Components 121.1, supports full-screen vertical video, includes new environments, and a lot more.

Wolvic 1.6 Released

📡 The Release Radar

AdminJS v7.6.0 - An admin panel for apps written in Node.js
Angular v17.2 - Deliver web apps with confidence
Apache ECharts 5.5.0 - An Open Source JavaScript Visualization Library
Astro 4.3, 4.4 - The web framework for content-driven websites
Babel 7.24.0 - a compiler for writing next generation JavaScript
billboard.js 3.11 - Re-usable, easy interface JavaScript chart library based on D3.js
Deno 1.41 - A modern runtime for JavaScript and TypeScript
Electron Forge v7.3.0 - A complete tool for building and publishing Electron applications
Ember.js v5.7.0 - A JavaScript framework for creating ambitious web applications
Hono v4.0.0 - A small, simple, and ultrafast web framework for the Edges
jest-puppeteer v10.0.0 - Run tests using Jest & Puppeteer
JointJS v4.0 - A proven SVG-based JavaScript diagramming library powering exceptional UIs
jQuery 4.0.0 BETA - The jQuery JavaScript Library
Lightning CSS v1.24.0 - An extremely fast CSS parser, transformer, bundler, and minifier written in Rust
Node v21.6.2 (Current), v20.11.1 (LTS), v18.19.1 (LTS) - An asynchronous event-driven JavaScript runtime
Nuxt 3.10 - The Intuitive Vue Framework
Parcel v2.12.0 - The zero configuration build tool for the web
Puppeteer v22.2.0, v22.3.0 - Node.js API for Chrome
React Native boilerplate v4.1. - A React Native template for building solid applications
Redwood v7.0.0 - The full-stack web framework designed to help you grow from side project to startup
Remix v2.7.0 - Create modern, resilient user experiences with web fundamentals
TypeScript 5.4 - A superset of JavaScript that compiles to clean JavaScript output
Vite 5.1 - Next generation frontend tooling
Vue DevTools v6.6.0 - Browser devtools extension for debugging Vue.js applications.
Vue Language Tools v2.0.0 - High-performance Vue language tooling based-on Volar.js

🛠️ Front End Resources

Bootstrap 5 Modern Backgrounds - Plug 'n play modern background made with Bootstrap, CSS variables, and plain CSS
CSS Generators: Tooltips & Speech Bubbles - A CSS-only collection of Tooltips & Speech Bubbles made with a single element
Figicon - Discover Thousands of Free Minimal and Pixel-Perfect Figma Icons for Your Projects.
Game-icons.net - An ever growing collection of free game icons
Gradients List - Biggest collection of gradients on the web
ICONSVG - Quick customizable icons for your projects
NEAT - Beautiful gradient animations for your website
Nucleo Essential Icons - A carefully curated subset of the broader Nucleo icon library
Social Media Icons - A collection of free SVG social media icons
Specificity battle! - CSS Specificity calculator
SVG Encoder / Converter - A simple tool to convert an SVG into different formats
SVG Flag Icons - Explore over 200 optimized SVG country flag icons
SVGFM - A node graph builder for SVG filters

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, and spend as much time as possible with your loved ones. I will see you again next time!

Interop 2023-2024, Baseline 2023, CSS Wrapped, Browser News, Front End Resources and more | Front End News #106

Adrian Sandu — Fri, 16 Feb 2024 19:14:12 +0000

NOTE: This is issue #106 of my newsletter, which went live on Monday, February 4. You might find this information valuable and exciting and want to receive future issues as they are published ahead of everyone else. In that case, I invite you to join the subscriber list at frontendnexus.com.

Welcome to the first issue of Front End News in 2024. Having a significant break between updates means there are more things worth mentioning. And today's list of topics is extensive. Therefore, there will be a lot more links and less commentary. Enjoy!

2023 was an excellent year for the web platform when we consider Interop 2023 and Interop 2024, the introduction of Baseline, and the many advancements done in leveling the field for CSS development and compatibility among the main browsers.

In Browser News, we discuss the additions to the web platform at the end of 2023 and the releases to the main browsers: Chrome 120-121, Firefox 120-122, Microsft Edge 119-121, Polypane 17.0-17.1, Safari 17.2-17.3, and Vivaldi 6.5. On top of all that, Apple will start allowing other browser engines to run on iOS devices for users inside the European Union.

The Release Radar shows lots of entries as well. We have multiple updates from Astro, Deno, Ember, React Toolkit, YouTube.js, and Node. Other noteworthy names are Angular 17.1, Electron 28, SvelteKit 2, Tailwind CSS v3.4, TypeScript 5.3, or Vue 3.4.

Next, we got a fair collection of assets and utilities, with AI and SVG sprinkled on top. We round things up with a reminder about all the quality content in the advent calendars published in December.

Interop 2023-2024

Interop is the industry initiative I am most pleased about. It brought an unprecedented level of cooperation between browser vendors. It also made life a lot easier for web developers everywhere. Today, we have multiple points of view from some of the parts involved in this process, both about what happened last year and the plans for 2024.

Bocoup: Interop 2024 Launch
Chrome: Celebrate a more interoperable web with Interop 2023 | Interop 2024
Firefox: Announcing Interop 2024
Igalia: Interop 2024 Launches
Microsoft Edge: Microsoft Edge and Interop 2024
Webkit: The web just gets better with Interop 2024

Baseline 2023

Baseline is another 2023 initiative aiming to streamline and improve feature support across web browsers and the industry in general. In the following article, Rachel Andrew highlights the changes in the definition between "newly" and "widely" available features and covers most newly available elements in 2023.

Baseline 2023

CSS Wrapped: 2023!

CSS is the web technology I care about the most. Therefore, I had to mention the roundup made by the Chrome team regarding all the new CSS features that landed in 2023.

CSS Wrapped: 2023!

💻 Browser News

Unsurprisingly, there is so much browser news in this issue. From the monthly "new to the web platform" summaries to the many browser releases: Chrome 120-121, Firefox 120-122, Microsft Edge 119-121, Polypane 17.0-17.1, Safari 17.2-17.3, and Vivaldi 6.5.

Chrome

Firefox

Microsoft Edge

Polypane

Vivaldi

WebKit

Last but not least, the EU has forced Apple to allow other browser engines to run on iOS devices. I look forward to seeing the rest of the world push the Cupertino giant to do the same for everyone else.

Using alternative browser engines in the European Union

📡 The Release Radar

AdonisJS v6 - Node.js Framework highly focused on developer ergonomics, stability, and confidence
Angular 17.1 - Deliver web apps with confidence
Astro 4.0, 4.1, 4.2 - The web framework that scales with you
Culori v4.0.0 - A comprehensive color library for JavaScript
Deno 1.39, 1.40 - A modern runtime for JavaScript and TypeScript
Dependency cruiser v16.0.0 - Validate and visualize dependencies
Electron 28.0.0 - Build cross-platform desktop apps with JavaScript, HTML, and CSS
Ember.js v5.5.0, v5.6.0 - A JavaScript framework for creating ambitious web applications
Fresh 1.6 - The next-gen web framework
HTML5 Boilerplate v9.0.0 - A professional front-end template for building fast, robust, and adaptable web apps or sites
Jint v3.0.0 - Javascript Interpreter for .NET
Mongoose 8 - MongoDB object modeling designed to work in an asynchronous environment.
Neutralinojs v5.0.0 - Portable and lightweight cross-platform desktop application development framework
Next.js 14.1 - The React Framework
Node v21.3.0, v21.4.0, v21.5.0, v20.11.0 (LTS), v21.6.0, February 2024 Security Releases - an asynchronous event-driven JavaScript runtime
Nuxt 3.9 - The Intuitive Vue Framework
Parcel v2.11.0 - The zero configuration build tool for the web
Prettier 3.2 - An opinionated code formatter
Puppeteer v21.10.0 - Node.js API for Chrome
Qwik v1.4.0 - Instant-loading web apps, without effort
React Email 2.0 - Build and send emails using Reactw
React Native 0.73 - A framework for building native applications using React
React Redux v9.1.0 - Official React bindings for Redux
Redux Toolkit v2.0.0, v2.1.0 - The official, opinionated, batteries-included toolset for efficient Redux development
SvelteKit 2 - web development, streamlined
Tailwind CSS v3.4 - A utility-first CSS framework for rapid UI development
TypeScript 5.3 - a superset of JavaScript that compiles to clean JavaScript output
Vue 3.4 - a progressive, incrementally-adoptable JavaScript framework for building UI on the web
YouTube.js v8.0.0, v8.1.0, v8.2.0 - A wrapper around YouTube's internal API

🛠️ Front End Resources

Big Heads - Randomly Generated Characters for Your Apps & Games
Colour Contrast Checker - Check the contrast between different colour combinations against WCAG standards
CSS Gradients - A collection of beautiful free-to-use CSS gradients
Flectofy - Generate custom SVG shapes
GitHub Profile Generator - Create awesome GitHub profiles and showcase your skills and projects easily
Loadership - Customize and generate stunning loaders for your website
SVG.io - Free AI - Text prompt to SVG
SVG Chart Generator - Free online SVG line & bar chart generator by the MagicPattern design toolbox
UI Faces - Free ✨ AI-generated avatars for your creative projects
unstock.ai - AI-generated vector logos, icons & illustrations

There's more where that came from. Explore the rest of the Front End Resource collection.

2023 Advent Calendars Roundup

December is a special month in the web development industry. That's when many brilliant developers distill their knowledge in tech advent calendars. I have rounded up many of these collections for the fourth time, and I invite you to browse them at your leisure.

The 2023 Roundup of Advent Calendars for Designers and Developers

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, and spend as much time as possible with your loved ones. I will see you again next time!

Polypane 16, Safari TP 182-183, Angular 17, Node 21.2, TypeScript 5.3 RC, Vite 5.0, and more | Front End News #105

Adrian Sandu — Thu, 08 Feb 2024 16:33:30 +0000

NOTE: This is issue #105 of my newsletter, which went live on Monday, November 20. You might find this information valuable and exciting and want to receive future issues as they are published ahead of everyone else. In that case, I invite you to join the subscriber list at frontendnexus.com.

In this issue, we present Polypane 16 and two releases of Safari Technology Preview: 182 and 183. There are many important entries on the Release Radar, including Angular 17, Node 21.2, TypeScript 5.3 RC, Vite 5.0, and more. And we're wrapping things up with a collection of tools, images, fonts, and other valuable resources.

💻 Browser news

Polypane

Polypane, the browser for ambitious web developers, received a significant update with workflow improvements, scoped styles, and Chromium 118. On top of that, we receive emulation for prefers-reduced-transparency, an updated preview for X/Twitter and Mastodon posts, updated React DevTools, and much more.

Polypane 16: workflow improvements, scoped styles and Chromium 118

WebKit

We got two new releases for Safari Technology Preview: 182 and 183. Each boasts a long list of fixes, improvements, and even some new features, such as basic support for text-wrap: balance and text-wrap-style CSS properties, or the showPicker() method for <input type="date">.

📡 The Release Radar

Angular v17 - a development platform for building mobile and desktop web applications using TypeScript/JavaScript and other languages
Astro 3.5 - The web framework that scales with you
Cypress 13.5.0 - Fast, easy, and reliable testing for anything that runs in a browser
Deno 1.38 - A modern runtime for JavaScript and TypeScript
Docusaurus 3.0 - Easy to maintain open source documentation websites
Ember.js v5.4.0 - A JavaScript framework for creating ambitious web applications
Node v21.2.0 (Current) - an asynchronous event-driven JavaScript runtime
PDFKit 0.14.0 - A JavaScript PDF generation library for Node and the browser
Prettier 3.1 - an opinionated code formatter
reveal.js 5.0 - The HTML Presentation Framework
TypeScript 5.3 RC - a superset of JavaScript that compiles to clean JavaScript output
Vite 5.0 - Next generation frontend tooling
YouTube.js 7.0 - A wrapper around YouTube's internal API

🛠️ Front End Resources

BGJar - Free svg background generator for your websites, blogs, and app
Bigjpg - AI Super-Resolution lossless image enlarging / upscaling tool using Deep Convolutional Neural Networks
Carbon - Create and share beautiful images of your source code
Geist - a typeface specifically designed for developers and designers
GriddyIcons - Ever-expanding icon set tailored to your needs.
monaspace - An innovative superfamily of fonts for code
Typeculator - a simple type scale calculator based on the "Golden Thread" technique

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!

js13kGames 2023 winners 🏆, Chrome 118-119, Firefox 119, Safari 17.1, Node 21, TS 5.3 Beta, and more | Front End News #104

Adrian Sandu — Sat, 04 Nov 2023 15:41:00 +0000

NOTE: This is issue #104 of my newsletter, which went live on Wednesday, November 1. You might find this information valuable and exciting and want to receive future issues as they are published ahead of everyone else. In that case, I invite you to join the subscriber list at frontendnexus.com.

In this issue we meet the winners of the 2023 edition of js13kGames. In Browser News, we find out what happened on the web platform in October, and we welcome Chrome 118 and 119, Firefox 119, MS Edge 118, Safari 17.1, Safari TP 181, and Vivaldi 6.4 for desktops.

There are many targets on the Release Radar, including Astro 3.3, Electron 27, Material Web 1.0, Node 21, TypeScript 5.3 Beta, Yarn 4.0, and more. Last, we got a large bundle of images, editors, generators, and other assets and tools for your projects.

js13kGames 2023 winners 🏆

js13kGames is a fantastic contest of coding prowess, where developers have to create a themed HTML5 game crammed in only 13KB of code. The theme for the 2023 edition was "13th Century," and we got the list of winners.

💻 Browser news

Rachel Andrew is back with her October synopsis on web platform changes.

New to the web platform in October

Chrome

Chrome 118 supports the CSS @scope rule and the prefers-reduced-transparency media feature. The Dev Tools bring a new section for custom properties, Lighthouse 11, and more navigation keystrokes to improve accessibility.

Chrome 119 is the first release in the new three-week update cycle. It supports the CSS :user-invalid and :user-valid pseudo-classes, sets all cookies to a maximum expiration date of 400 days, and more. In Dev Tools, you can now emulate many more devices. The Lighthouse panel runs Lighthouse 11.1.0, and the list goes on.

Firefox

Firefox 119 includes many quality-of-life improvements (such as the possibility to edit PDF files) and security fixes. Under the hood, you can also encounter many discrete updates to various areas of the web platform.

Microsoft Edge

MS Edge 118 brings new feature updates (such as the new AI-powered Designer) and changes to many of its policies.

Microsoft Edge 118 Release Notes

Vivaldi

Vivaldi has staggered their releases based on the target platform. While Android remains at 6.2 and iOS at 6.3, desktop users received the 6.4 update. You can now synchronize your data between your devices and even your car with Vivaldy Sync.

Vivaldi 6.4 for the desktop

WebKit

The WebKit team released another update to Safari, numbered 17.1. iPhone users can now also enjoy the benefits of the Managed Media Source API (the feature landed in 17.0 for iPad and MacOS users). There are also many bug fixes across the entire web platform.

WebKit Features in Safari 17.1

There is also another release of the Safari Technology Preview series. The 181 update includes support for the new CSS content-visibility features, along with many bug fixes.

Release Notes for Safari Technology Preview 181

📡 The Release Radar

Astro 3.3, Astro 3.4 - The web framework that scales with you
Clipboardy v4.0.0 - Access the system clipboard (copy/paste)
Electron 27.0.0 - :electron: Build cross-platform desktop apps with JavaScript, HTML, and CSS
Fresh 1.5 - The next-gen web framework
highlight.js 11.9.0 - JavaScript syntax highlighter with language auto-detection
Material Web 1.0 - Material Design Web Components
Next.js 14 - create full-stack Web applications
Node v20.8.1 (Current), Node v18.18.2 (LTS), Node v21.0.0 (Current), Node v21.1.0 (Current), Node v20.9.0 (LTS), October 2023 Security Releases, OpenSSL Recent Security Patches -
NodeBB - Node.js based forum software built for the modern web
Nuxt 3.8.0 - The Intuitive Vue Framework
Nuxt DevTools 1.0 - Unleash the Nuxt Developer Experience
Parcel v2.10.0 - The zero configuration build tool for the web
pnpm v8.9.0 - Fast, disk space efficient package manager
Postgres.js v3.4.0 - The Fastest full-featured PostgreSQL client for Node.js, Deno, Bun and CloudFlare
Remix v2.1.0 - Create modern, resilient user experiences with web fundamentals.
Rockpack 4.0.0 - create React Application with Server Side Rendering, bundling, linting, testing within 5 minutes
Solid v1.8.0 - A declarative, efficient, and flexible JavaScript library for building user interfaces.
Sortable 3.0.0 - Vanilla JavaScript table sort
Storybook 7.5 - a frontend workshop for building UI components and pages in isolation
TypeScript 5.3 Beta - a superset of JavaScript that compiles to clean JavaScript output
Yarn 4.0 - a package manager that doubles down as project manager

🛠️ Front End Resources

404 Illustrations - Trendy, ready to use images for your 404 page
AnimatiSS - Nice collection of CSS animations for your awesome web projects
Box Shadows - Create, edit, and generate multiple custom CSS box shadows with ease.
cccolor - HEX, RGB & HSL color picker
Durves - A tool for creating and exporting dot patterns
Epic Easing - Easing made easy.
Gradient Designer - Gradient designer with code generation.
JSONGenerator - Create complex JSON data structures using intuitive templates.
Karektar - Create your own bitmap font
Photopea - Free online advanced image editor
Popicons - Bring life & personality to your projects.
User Stock - Free photos of people's faces to use as avatars in UI mockups, prototypes, and more.
Vectorpea - Free online vector editor

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!

State of HTML, Firefox 118, Vivaldi on iOS, Safari TP 180, Astro 3.2, Deno 1.37, Next.js 13.5, and more | Front End News #103

Adrian Sandu — Tue, 10 Oct 2023 17:28:39 +0000

NOTE: This is issue #103 of my newsletter, which went live on Monday, October 9. You might find this information valuable and exciting and want to receive future issues as they are published ahead of everyone else. In that case, I invite you to join the subscriber list at frontendnexus.com.

The State of HTML completes the web platform survey trilogy. DuckDuckGo celebrates 15 years of existence, and we look at the new things to the web platform that landed in September. The browser releases include Firefox 118, Vivaldi for iOS and iPadOS, and Safari Technology Preview 180.

There are many signals on the Release Radar, including Astro 3.2, Deno 1.37, Hugo v0.119, Neutralinojs v4.14, Next.js 13.5, Node v20.8, and more. The resource package contains an extensive collection of programming fonts, a tool to create beautiful moving gradients, and many other helpful things.

State of HTML

State of JavaScript and State of CSS have proven to be outstanding gauges for the web platform, bringing together developers, standard makers, and browser builders. The trilogy is now complete with the third survey - State of HTML. It covers the HTML elements and several related browser APIs (PWAs, Web Components, and more).

State of HTML

💻 Browser news

Rachel Andrew continues her series of monthly summaries on the web platform. In September, we got stable releases from all major browsers: Firefox 118, Safari 17, and Chrome 117. You can find more details on the new platform features below.

New to the web platform in September

DuckDuckGo

DuckDuckGo appeared 15 years ago as a more user-focused alternative to Google. What started as yet another project born in a basement is now the 3rd in search market share in the US. Find more about its long journey in the article below.

Celebrating 15 Years of DuckDuckGo

Firefox

Firefox 118 brings automated local translation of web content, ten new CSS math functions, support for the <search> element, and various security fixes.

Vivaldi

An old proverb says: "If you can't beat them, join them." Vivaldi decided to enter the iOS market with their mobile browser. Users can enjoy the features packed inside Vivaldi, even though the engine running under the hood is WebKit.

Vivaldi Takes a Bite Out of the Apple: Introducing Vivaldi on iOS

WebKit

Speaking of WebKit, they launched another Safari Technology Preview. This release fixes a large number of issues, including many CSS and Accessibility ones.

Release Notes for Safari Technology Preview 180

📡 The Release Radar

Astro 3.2 - The web framework that scales with you
Bit v1.0 - A tool for composable software development
chardet v2.0.0 - Character encoding detection tool for NodeJS
ChatGPT.js - A powerful client-side JavaScript library for ChatGPT
CKEditor 5 v40.0.0 - Powerful rich text editor framework
Critical v6.0.0 - Extract & Inline Critical-path CSS in HTML pages
Deno 1.37 - A modern runtime for JavaScript and TypeScript
Dependency cruiser v14.1.0 - Validate and visualize dependencies
Ember 5.3 - A JavaScript framework for creating ambitious web applications
Env 3.0.0 - A utility for verifying environment variables are present
Faker v8.1.0 - Generate massive amounts of fake data in the browser and node.js
Hugo v0.119.0 - The world’s fastest framework for building websites
Marked v9.1.0 - A markdown parser and compiler. Built for speed.
Neutralinojs v4.14.0 - Build lightweight cross-platform desktop apps with JavaScript, HTML, and CSS
Next.js 13.5 - The React Framework for the Web
Node v18.18.0 (LTS), Node v20.7.0 (Current), Node v20.8.0 (Current) -
Pagefind v1.0.0 - Static low-bandwidth search at scale
pnmp v8.8.0 - Fast, disk space efficient package manager
preact 10.18.0 - Fast 3kB React alternative with the same modern API
Tailwind Elements v1.0 - Bootstrap components recreated with Tailwind CSS, but with better design and more functionalities
Tesseract.js v5.0.0 - Pure Javascript OCR for more than 100 Languages

🛠️ Front End Resources

.classnames - Find inspiration for naming things
B612 Font Family - a highly legible open-source font family designed and tested for use on aircraft cockpit screens
Color Lisa - Color palette masterpieces from the world's greatest artists
Doodle Ipsum - The lorem ipsum of illustrations
Flatdraw - Open-source canvas drawing web application built with TypeScript, React, and Next.js.
Image-to-Pixel - An editor that converts images to pixel art, adds dither, set palettes, and more!
Programming Fonts - Test drive all the programming fonts!
ShaderGradient - Create beautiful moving gradients on Framer, Figma, and React

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!

State of CSS 2023 Results, Interop 2024, Chrome 116-117, Firefox 117, Polypane 15, Safari 16.6-17 | Front End News #102

Adrian Sandu — Thu, 21 Sep 2023 14:51:19 +0000

NOTE: This is issue #102 of my newsletter, which went live on Wednesday, September 20. If you find this information useful and interesting and you want to receive future issues as they are published ahead of everyone else, I invite you to join the subscriber list at frontendnexus.com.

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.

State of CSS 2023 Results

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.

Submit your proposals for Interop 2024

💻 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.

New to the web platform in August

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.

Faster Chrome releases (round two!)

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.

What's new in Lighthouse 11

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 116

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.

Edge 117

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.

Polypane 15 Release Notes

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 16.6

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.

WebKit Features in Safari 17.0

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.

📡 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
PhotoRestore.io - Free AI Photo Restoration
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
Transhumans - open source illustrations of character transcending their biological barriers

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!