The Front End Developer Handbook 2024, State of HTML and State of JavaScript 2023 Results, TypeScript 5.5, and more | Front End News #109
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.
💻 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.
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.
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 20 brings Chromium 126, various performance tweaks, better screenshot functionality, and more.
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.
Vivaldi on iOS adds multiple windows support to iPad, improves Notes, Bookmarks, and Dark Mode
Vivaldi boosts performance with Memory Saver and auto-detects feeds with its Feed Reader
Moving on to update 6.8, we get Vivaldi Mail 2.0, an updated AdBlocker, and better tab management.
Vivaldi 6.8 on iOS – Take control of your inactive tabs and new personalization options.
Vivaldi 6.8 on Android – New ways to make the browser match you and updated Ad Blocker
Improved browser features for desktop and Vivaldi Mail 2.0 amped up with new functionalities
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
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:
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!
Subscribe to my newsletter
Read articles from Adrian Sandu directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by
Adrian Sandu
Adrian Sandu
I am a "front-of-the-front-end" developer, focused on CSS, user experience, and content creation. Available for hire, projects, or outsourcing.