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.
- The Front End Developer/Engineer Handbook 2024
- The Front End Developer/Engineer Handbook 2024 - A Guide to Modern Web Development
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,
- 10 updates from Google I/O 2024: Unlocking the power of AI for every web developer
- The latest in CSS and web UI: I/O 2024 recap
- What's new in the web
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.
- 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 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 on Android: It's all about details
- 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.
- News from WWDC24: WebKit in Safari 18 beta
- Safari 18 - what web features are usable across browsers?
📡 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!
Top comments (0)
Some comments may only be visible to logged-in visitors. Sign in to view all comments.