~frontendfocus | Issue 635 - The web and the needs of humanity (19)

Marking the Web’s 35th Birthday: An Open Letter — Last week marked the Web’s 35th birthday, so to mark the occasion 'father of the Web' Sir Tim Berners-Lee penned an open letter calling for the need to “overturn the online world being dictated by profit to one that is dictated by the needs of humanity”.

Chrome's Performance Tooling in 2024 and Beyond — The Performance panel in Chrome’s dev tools began life as the DevTools Timeline but is now almost an entire app within an app for measuring and optimizing Web performance. And it’s only going to get better in 2024, the authors promise.

Practice Your JavaScript through Vanilla JS Projects — Join Anjana Vakil for this extensive video course on vanilla JavaScript projects. Tackle real-world tasks and learn how to use asynchronous JS, Browser APIs, the DOM, Node.js, GitHub Actions, and more.

Navigating the Future of Frontend — A thorough exploration of how modern JavaScript meta-frameworks navigate the constraints of the modern web, all in an effort to better understand the direction of travel for the frontend ecosystem as a whole.

'There Is No EU Cookie Banner Law' — Some gentle myth busting (plus a little opining, of course) on the often maligned but well intentioned ‘cookie law’.

A Formula for Responsive Font-size — A brief look at one approach for handling responsive font sizes with just one function (by way of calc). A neat and tidy pattern – I like it.

The Box Model and Box Sizing — A practical look at how the CSS box model is affected by box sizing — an important thing to have a solid grasp of.

Implementing Vertical Form Controls — Safari 17.4 adds vertical writing mode support (for e.g. Chinese, Japanese, and Korean locales) for form control elements across macOS, iOS, iPadOS, and visionOS.

5 Lessons Design Systems Teams Can Learn from Open-Source Maintainers — Design system teams must balance evangelism with maintenance and development. Turns out, the same is true of open source.

AVIF is the Future of Web Images — The author notes that this image format “stands out as a beacon of efficiency and quality” but faces adoption challenges (though browser support is quite broad).

A Guide to Using localStorage in Modern Apps — localStorage has been supported in almost every browser for at least fifteen years now, so it’s a reliable way to store data client-side, although there are still some situations where you wouldn’t want to use it.

CartoSVG: Design Gorgeous and Lightweight SVG Maps with Ease — The editor lets you customize just about any part of the map using an intuitive UI. The results are performance optimized and simple to export to inline into your HTML.

Storybook 8 Released — The popular front-end component workshop introduces built-in visual testing, up to 50% faster start times, upgraded Vue and React control auto-generation and more. There’s also ▶️ a launch video to enjoy.

How to Add an Onboarding Flow for Your Application — Use Next.js Middleware and Clerk’s customizable session tokens to create a strong onboarding experience.

Emojisplosion: Blast Emojis Like Fireworks in Your HTML — The API includes a slew of options to not only customize the emojis that appear, but also the physics, location, count, size, etc. You’ll likely spend too much time on the demo page.

MistCSS: Write React Components Using Only CSS? — Forget about CSS-in-JS.. what about JS-from-CSS? This new approach provides a way to compile CSS-only React components into their TypeScript equivalent – it’s early days, but an intriguing idea. (Code example.)

Alpine AJAX: An Alpine.js Plugin to Request Remote Content from the Server — A lovely 1950s-inspired home page including a neat interactive example using a jukebox to search for songs, which displays the server requests in real time in a panel at the bottom of the page.

css2wind: A Minigame for Learning Tailwind CSS — Test your Tailwind CSS know-how with this quick challenge. You’ve got eight properties to translate.