DEV Community: Adrian Sandu

Announcing Interop 2026, Interop 2025 review, Web Almanac 2025, State of the Industry surveys, and more | Front End News #114

Adrian Sandu — Thu, 21 May 2026 16:57:30 +0000

NOTE: This is issue #114 of my newsletter, which was published on Thursday, May 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.

In this issue, we look ahead to Interop 2026 and reflect on the accomplishments of Interop 2025. The Web Almanac provides an analysis of the current state of the web, while the "State of..." suite of surveys takes the pulse of various developer communities.

The Web Platform has made many advances since the last issue, and we take a look at the most important ones, along with the latest releases from the main browsers. The Release Radar highlights only major releases. And there is a huge list of great resources for your convenience.

Announcing Interop 2026

Interop is, without a doubt, the most important initiative of the web industry. It has been running in its current format since 2021 and has helped tremendously advance the web platform.

The 2026 edition is picking up where the 2025 edition left off. Anchor positioning, container-style queries, scroll-driven animations, or view transitions are among the focus areas for this year.

Interop 2026 Dashboard
WebKit: Announcing Interop 2026
Chrome: Interop 2026: Continuing to improve the web for developers
Mozilla: Launching Interop 2026
Microsoft: Microsoft Edge and Interop 2026
Igalia: Interop 2026 Focus Areas Announced

Looking back at Interop 2025

Interop 2025 focused on 19 areas in total. At the end of the year, the scoreboard showed 95 across the board for the stable versions and 97 for the experimental ones.

The 2025 Web Almanac

The Web Almanac is one of the most comprehensive analyses of the World Wide Web. The 2025 edition was compiled from over 16 million websites and 244TB of data. It covers four main sections:

Page content: fonts, WebAssembly, third parties, and generative AI
User experience: SEO, accessibility, performance, privacy, security, capabilities, and PWA
Content publishing: CMS, ecommerce
Content distribution: page weight, CDN, and cookies
The 2025 Web Almanac

The CSS Selection

Project Wallace is dedicated to providing insight into CSS within other projects over longer periods. By accessing the code of many websites, they compiled an overview of how CSS is currently used in the field.

The CSS Selection is meant to compensate for the lack of a CSS chapter in the recent editions of the Web Almanac. The report includes data points such as the size of CSS code, the use of @-rules, the size and complexity of rule sets, and more.

The CSS Selection

State of the Industry

Sacha Greif and the Devographics surveys have been a staple of the industry over the last few years. What started back in 2016 as an attempt to get the next framework to work with has evolved into a vital insight into the various aspects of the web industry.

State of AI

The results for the State of AI survey arrived just as I was preparing this issue for publication, and I couldn't just skip it. Over 7000 developers provided their input, and the things are both great and bad. Use of AI grew tremendously over the last year. Layoffs happen everywhere. Developers turn into AI supervisors. And the overall quality of apps and websites has decreased, despite the greater amount of code generated.

The State of AI 2026

State of Devs

The State of Devs survey is a foray into developers' lives. Over 8700 people participated and offered insights on their people actually writing code. Most of them (44%) are between 30 and 39 years old. More than half (52%) are affected by some impairment, illness, or medical condition, while poor sleep, weight issues, and mental health are the top three issues encountered. Video games, movies/TV, and reading are the main hobbies, while Japan is the place most people (21%) would like to move to for a few years.

The State of Devs 2025

State of CSS

CSS has been one of the fastest-growing fields in the industry over the last few years. The Interop initiative has helped the adoption of new features. It allowed developers to use CSS for tasks that were usually reserved for JavaScript. :has(), subgrid, and aspect-ratio are the most used and loved features. Safari is still viewed by some as "the new IE", but their team is working hard to fix this. And more developers use Baseline as a reference for adopting new features.

The State of CSS 2025

State of HTML

The State of HTML survey is more about the entire Web Platform and the advancements in multiple directions: accessibility, APIs, and support for new formats. Developers still care more about things that make their work easier: SVG support, popovers and dialogs, lazy loading, and customizable selects. These are the features they expect browser vendors to implement as a priority.

The State of HTML 2025

State of React

State of React takes a peek at the most used JavaScript framework. Despite version 19 being available since December 2024, only about 50% of developers have made the change. The community is neutral or optimistic about the React Foundation. Last, but not least, AI and vibe-coding made the framework more popular than ever.

The State of React 2025

State of JavaScript

State of JavaScript aims to take the pulse of the entire ecosystem. Here is not just about frameworks, but about the Web Platform itself, about extending the language and bringing native support in browsers. TypeScript gains even more ground, with 40% of respondents writing TS code exclusively.

The State of JavaScript 2025

💻 Browser News

Web Platform Updates

Time and tide wait for no one, and neither does the Web Platform itself. Here is a brief outline of what has happened since our last issue.

It is not enough for new features to enter Baseline. It helps to have examples of what you can do with these features. Here is where the "Baseline in action" series of articles from the Chrome dev team comes to help:

Baseline in action

Speaking of Baseline, we must mention the monthly digests. They are a great way to stay up to date, not only with newly supported features but also with those that have become widely supported and are thus safe for use in most scenarios.

Another long-running series is the "New to the Web Platform in..." set of articles, highlighting browser releases and the new features that became available in stable or beta builds.

I must make a special mention of the CSS Wrapped 2025 article, where the Chrome dev team put together both an interesting page and a demo of the most important new features released in 2025.

CSS Wrapped 2025

Chrome

The main features of Chrome 136 are better security for :visited links and the option to upgrade saved credentials to passkeys, along with DevTools improvements to the Performance panel.

Chrome 137 brought better logical tab order in complex layouts via reading-flow and reading-order, and support for CSS conditionals via the if() function. DevTools updates focused on integration with Gemini.

Chrome 138 integrates new AI APIs for translation, language detection, and summarization, as well as the Viewport Segments API for targeting foldable devices. DevTools feature improvements for most panels.

Chrome 139 brings on-device speech recognition via the Web Speech API and support for CSS corner shaping and custom functions. DevTools updates focus on addressing known issues and further integrating with AI tools.

Chrome 140 introduces native support for the source that triggered a ToggleEvent, better control of alt text of the content property, and improved customization of variable fonts directly in the @font-face rule. DevTools bring (as you might have guessed) even more integration with AI, and the option to see Baseline status in a CSS property tooltip.

Chrome 141 improves IndexedDB performance for getAllRecords(), and provides direction for getAll() and getAllKeys(). WebRTC Encoded Transform (V2) now matches the Interop specs, while nested SVG elements support width and height attributes. DevTools integrates even more AI, while the Elements > Layout tab adds support for masonry layouts.

Chrome 142 brings support for the :target-before and :target-after CSS pseudo-classes, and range syntax for CSS style container queries and the if() CSS function. DevTools brings more AI features and direct integration with the Google Developer Program.

Chrome 143 adds support for CSS anchored fallback container queries, side-relative values for background-image longhand position properties, and the font-language-override CSS property, allowing override of the system language used for OpenType glyph substitution. DevTools feature updates for the MCP server, improved performance trace sharing, support for the CSS @starting-style rule, an editor widget for masonry, and integration of Lighthouse 13.

Chrome 144 adds support for the new ::search-text pseudo-element, enabling "find-in-page" search result styling. The <geolocation> element is a new control for accessing the user's location. The Temporal API offers a new way to work with dates and times. The DevTools feature, you guessed it, mostly has more AI integration.

Chrome 145 allows column wrapping for multicol layouts, working with origins is easier due to the new Origin object, part of the Origin API. User sessions can now be bound to their specific device, making it harder to use stolen session cookies on other machines. DevTools bring updates to the MCP server, faster trace interaction, the identification of render-blocking resources, and more.

Chrome 146 brings support for scroll-driven animations, scoped custom element registry, and the Sanitizer API. DevTools now supports dense grids, improved privacy debugging, accessibility improvements, and more.

Chrome 147 implements element-scoped view transitions, the CSS contrast-color() function, and the border-shape property. DevTools brings new features for AI agents, code suggestions and generation, regular expressions for filters, and more.

Chrome 148 implements CSS name-only container queries, lazy loading for audio and video elements, and the Prompt API. DevTools brings more features for AI Agents, a full accessibility tree, and more.

Firefox

Firefox 138 brings profile management, global tab groups, and a better experience with address and card auto-fill.

Firefox 139 brings full-page translations for extension pages, the Temporal API is enabled by default, and you can search inside closed <details> elements.

Firefox 140 adds even more search engines, reduces memory usage by unloading unused tabs, prioritizes full-page translations based on viewport content, and adds support for the Custom Highlight and Cookie Store APIs.

Firefox 141 brings the option to convert units directly in the address bar, enabling the WebGPU API on Windows.

Firefox 142 begins gradual rollout of link previews, while developers can use the wllama API to integrate local LLM capabilities for extensions.

Firefox 143 adds the option to use Microsoft Copilot as a chatbot in the sidebar, and you can decide whether files downloaded in Private Browsing mode are deleted at the end of the session or remain on the device.

Firefox 144 brings better profile management, and the Firefox Password Manager replaces the older 3DES-CBC encryption with the modern AES-256-CBC scheme. Search with Google Lens is now an option for any image, while the desktop version includes Perplexity, an AI-powered answer engine.

Firefox 145 adds the option to add, edit, and delete comments in PDF files; you can manage passwords directly in the sidebar; 32-bit Linux systems are no longer supported; and includes Matroska support for the most common codecs.

Firefox 146 makes Firefox Labs available for all desktop users. Unused CSS custom properties are hidden in the Inspector. The new @scope rule allows developers to restrict styling to a subtree of the DOM. And the CSS contrast-color() function makes it easier to maintain a good color contrast.

Firefox 147 supports the Safe Browsing v5 protocol, you can inspect and view transition pseudo-elements in the Inspector, and you can add or edit pseudo-elements directly in the CSS rules panel.

Firefox 148 adds a new section for the AI controls in the Settings area and implements support for the CSS shape() functions. Service workers now support WebGPU, and HTML manipulation is safer thanks to the Sanitizer API.

Firefox 149 lets you view two tabs side by side with the new Split View feature. There is a new built-in VPN and PDF file handling with the benefits of hardware acceleration. Privacy and security settings are grouped in the new TrustPanel. Under the hood, there is support for the popover="hint" HTML attribute, media element pseudo-classes such as :playing and :paused, and the new Reporting API.

Firefox 150 improves the Split View feature and adds a fully featured free PDF editor. Developers can use light-dark() on images, and the color-mix() function supports an arbitrary number of colors.

Polypane

Polypane 25 runs on top of Chromium 138, supports Manifest v3 extensions, offers improved form handling (including a free online HTML form inspector), and more.

Polypane 26 adds better device emulation, including support for safe areas and small viewports. You can have multiple measuring overlays at the same time. And everything runs on top of Chromium 140.

Polypane 26: Accurate device emulation with safe area and small viewport units

Polypane 27 runs on Chromium 142 and brings a long-awaited project-based workflow. The Live CSS panel has been replaced by the new Snippets panel, which lets you save, edit, and manage CSS and JS snippets for reuse whenever you want.

Polypane 27: Projects, a Snippets Panel and Chromium 142

Polypane 28 runs on Chromium 146 and brings project environments - no more working on prod by mistake. The Elements panel is faster than ever, and there are further improvements to the entire interface.

Polypane 28: Project improvements, Elements panel updates and Chromium 146

Polypane 29 runs on Chromium 148 and features a new UI for the panels. There is a Snippets Store for ready-made snippets, although it's more of a repo than a marketplace. There is also a new Network panel, and you can inspect iframes and visualize grid and flex layouts with the Peek functionality.

WebKit

Safari 18.5 is more of a follow-up to the previous release. It brings Declarative Web Push to macOS, along with many fixes and enhancements.

WebKit Features in Safari 18.5

Safari 18.6 follows the same path, primarily a vector for deploying four bug fixes.

WebKit Features in Safari 18.6

Safari 26 represents a major shift in the evolution of this web browser. Apple decided to match the version number with the year (2025 - 2026). It brings a new design language - Liquid Glass, 75 new features, and over 170 other improvements. Some of the new features include CSS Anchor Positioning, HDR images, the Digital Credentials API, WebGPU, and more.

WebKit Features in Safari 26.0

Safari 26.1 introduced support for relative units in SVG, improvements to CSS Anchor Positioning, and many fixes and enhancements.

WebKit Features for Safari 26.1

Safari 26.2 is another large release. It includes over 60 new features, such as button commands, auto-growing text fields (with CSS field-sizing), and improvements to anchor positioning and text decoration. APIs get a lot of love, too, like the new Navigation API. The Performance and Web Animations APIs continue to receive improvements. And the list goes on.

WebKit Features for Safari 26.2

Safari 26.3 is low-key "tok" to the richly featured "tik" 26.2. This release brings mostly bug fixes and improvements to existing elements.

WebKit features for Safari 26.3

Safari 26.4 brings another large set of new features and a huge list of nearly 200 fixes for existing issues. I am most excited to see the first implementation of the newly adopted CSS Grid Lanes mode - the native CSS version of the popular Masonry layout.

WebKit features for Safari 26.4

Safari 26.5 is another "tok" release. There is new support for the :open pseudo-class, SVG gradients work now with color-interpolation, and the Origin API is now functional. However, this release is mostly a vehicle for fine-tuning existing features and fixing existing issues.

WebKit Features for Safari 26.5

Wolvic

Wolvic aimed to establish a baseline for an open-source browser in the XR space. However, the landscape has changed over the last year. The Gecko engine has fallen behind in terms of support. Google announced its own initiative with Android XR. All this forced Igalia to move the Wolvic project into maintenance mode, including security updates and some minor maintenance work.

Next Steps for Wolvic

📡 The Release Radar

Given how long it has been since the previous edition, it would be overwhelming to take the usual approach and mention every interesting update. Therefore, here are only major releases (increments of the main version number).

Angular v20, Angular v21 - Deliver web apps with confidence
Astro 6.0 - The web framework for content-driven websites
Apache ECharts 6 - a powerful, interactive charting and data visualization library for browser
Babylon.js 9.0 - a powerful, beautiful, simple, and open game and rendering engine packed into a friendly JavaScript framework.
Critical 8.0 - Extract & Inline Critical-path CSS in HTML pages
Electron 37.0.0, Electron 38.0.0, Electron 39.0.0, Electron 40.0.0, Electron 41.0.0, Electron 42.0.0 - Build cross-platform desktop apps with JavaScript, HTML, and CSS
ESLint v10.0.0 - Find and fix problems in your JavaScript code
Ink 7.0.0 - React for interactive command-line apps
Jasmine 6.0.0 - Simple JavaScript testing framework for browsers and node.js
jQuery 4.0.0 - jQuery JavaScript Library
Lingui 6.0 - A readable, automated, and optimized (2 kb) internationalization for JavaScript
Mantine v9.0.0 - A fully featured React components library
Next.js 16 - The React Framework
Node.js 25.0.0 (Current), Node.js 26.0.0 (Current) - an open-source, cross-platform JavaScript runtime environment
Nuxt 4.0 - The Full-Stack Vue Framework.
pnpm 11.0 - Fast, disk space efficient package manager
PM2 - Node.js Production Process Manager with a built-in Load Balancer
reveal.js 6.0.0 - The HTML Presentation Framework
Skeleton v4.0 - an adaptive design system powered by Tailwind CSS
Storybook 9, Storybook 10 - the industry standard workshop for building, documenting, and testing UI components in isolation
syncpack 15.0.0 - Consistent dependency versions in large JavaScript Monorepos
TypeScript 6.0 - a superset of JavaScript that compiles to clean JavaScript output
Vite 7.0, Vite 8.0 - Next generation frontend tooling
Vitest 4.0 - Next generation testing framework powered by Vite
VuePDF v2.0.0 - PDF component for Vue 3
Vuetify v4.0.0 - Vue Component Framework
Wasm 3.0 - WebAssembly Specification, Release 3.0
WordPress 7.0 Beta 1

🛠️ Front End Resources

GSAP is now 100% FREE!

One of the most popular libraries for animations on the web became free, including for commercial use.

GSAP is now 100% FREE!

Other resources

3D Icons - Beautifully Crafted Free & Premium 3D Icons
Aether CSS - Free Liquid Glass, Glassmorphism & Neumorphism CSS Generator with live preview
All SVG Icons - Free and Open Source SVG Vector Icons
BaseWatch - Track CSS & Browser Feature Support, Get Baseline Alerts
Can We - A collection of websites focused on browsers usage and features
Cascade Icons - meticulously crafted, small-batch, artisanal icons for CSS properties
Color Flow - Mesh gradients that actually look good
Color Lisa - Color palette masterpieces from the world's greatest artists
Color Palette Pro - A Synthesizer for Color Palettes
Colorffy - Mesh Gradient Generator
Colorize Design - Generate color palettes from any website
Colormoods.co - a different kind of color generator
CSS Editor - getButterfly - online visual CSS Editor with instant live preview
CSS HDR Gradients - Wide gamut Color 4 compliant CSS gradient builder
delphitools - A collection of small, low-stakes and low-effort tools. No logins, no registration, no data collection
Design Token Naming Guide - Learn how to name design tokens the right way, or jump straight to building your token system
Design.dev - Code generators, cheat sheets, and resources to boost web development
DPaint.js - Web-based image editor modeled after the legendary Deluxe Paint with a focus on retro Amiga file formats.
EaseMaster - CSS & Spring Easing Generator
Easing Wizard - CSS easing functions made easy
Flexbox Labs - A visual tool for experimenting with flexbox layouts
Font Stealer - Extract, compare, and discover open alternatives for any website instantly.
Github Profile Readme Generator - The best profile readme generator you will find
Glass UI - Glassmorphism CSS Generator
Glass3D generator - A modern 3d glassmorphism generator
Glow Icons - 442 open source icons in 2 styles, made for interfaces. MIT license
Gradient Generator - Create & export linear, radial, & conic gradients
Graphite - a free, open source vector graphics editor and animation engine
Grid Paper - Printable graph paper in various patterns
Griddy Icons - free open-source icon family with unique utilitarian vibe
ICONIC - a free, open-source collection of community-curated SVG icons
Kigen Color Generator - Generate beautiful color palettes for your design system.
Logo Ipsum - 190 free placeholder logos
Lucide Icons - Beautiful & consistent icons
Mesh Gradient Generator - Create & export mesh gradients as SVG or to Figma
MingCute Icon - Carefully Designed Icon Library
ModernCSS - Modern CSS code snippets, side by side with the old hacks they replace
Mossaik - Create beautiful abstract SVG images for your designs
Nerd Fonts - Iconic font aggregator, collection, and patcher
Obra Icons - A simple, consistent set of icons, perfect for user interfaces
OKLCH Color Picker & Converter - OKLCH is a new way to encode colors (like hex, RGBA, or HSL)
OKLCH Color Picker, Generator and Converter - Convert, generate and explore OKLCH colors
Pattern Collider - Create And Share Mathematical Tiling Patterns
PatternCraft - Professional-grade background patterns and gradients
Photo Palettes - Find color inspiration in the everyday
PlaceCats - Purr-fect placeholders for your project
PNG to ICO - Convert PNG to ICO files instantly in your browser
Pokemon Cards V2 - A collection of advanced CSS styles to create realistic-looking effects for the faces of Pokemon cards
QR Code Generator - Create QR codes for websites, text, Wi-Fi, calls, and messages with custom styles
ReliCSS - Detect CSS Hacks & Modernise Your Code
Remix Icon - a set of open source neutral style system symbols free to use for both personal and commercial use
SaaS UI – Free Illustrations for your Documentation or Design System
Shower - HTML presentation engine
Susty Icons - Simple, smart, and scalable vector graphics for a speedy and sustainable web
SVG Doodles - Free, editable SVGs to spice up your designs
SVG Studio - Inspect, edit, and optimize SVGs in the browser
SwatchMaker - Compare paint colors from different brands side by side. Find the perfect color combinations for your home with our paint comparison tool
Symbl - a world of SVG icons, symbols, and design tools
theSVG - Search, copy, and ship brand icons in seconds. Free, open-source, and community-driven
Thiings - A growing collection of 9000+ free 3D icons, generated with AI
Volume Editor - 3D OKLCH Color Picker & Palette Generator

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