Together with  logo

👋 Hello! This week we've asked Michelle Barker to share a few of her favourite frontend tools. Be sure to scroll down and see them.
Chris Brandrick, Editor

🚀 Frontend Focus

#​608 — September 6, 2023 | Read on the web

Astro 3.0 Released — This new version of popular web framework / site generation system Astro claims to be amongst the first to support the View Transitions API — making transitions possible without rolling out a SPA. This release also includes image optimization improvements, optimized built outputs, and more. Repo here.


🪐 Astro was also featured by the Chrome team for their use of the View Transitions API.

Browse Websites by What Fonts They Use — If you’re looking for inspiration or the ways in which a particular font has been used, this is a handy resource.

Bertrand Bruandet

Headless CMS with AI Capabilities, That’s — Streamline your code and scale with ease using Generate TS types from your content model, use CLI for maintenance tasks, and leverage rich text resolvers to map React components easily. And finally, use AI to generate and improve content. sponsor

A Review of Browser Video Players — Browsers each provide built-in video players for the <video> element. Here, Adrian runs some tests to see how they compare from an accessibility point of view.

Adrian Roselli

How Layout Position Impacts Three Big Web Performance Levers — An interesting performance study from Shopify that looked at three common issues that impact on layout position — namely lazy loading images above the fold, asynchronous loading of CSS needed for elements above the fold, and not prioritizing the fetch of the the Largest Contentful Paint (LCP) image.

Sia Karamalegos (Shopify)


📙 Tutorials, Articles & Opinion

Laying Out Dots on Dice using display:flex & Pseudo Classes — A neat problem to solve here: How to display the proper number of dots on the faces of dice.

Maciek Fitzner

Towards HTTPS by Default — Chrome is expanding its ‘HTTPS-First Mode’ in an effort to help keep safe users who run into the “stubborn 5-10% of traffic” that has remained on HTTP.

Joe DeBlasio (Google)

Where to Put Focus When Deleting a Thing — When deleting something Adrian notes that you should “generally move focus to the prior equivalent control or its grouping container”.

Adrian Roselli

Latency Is the New Outage — Learn the basics of Frontend application performance monitoring to see (and fix) slow faster. Join us for a live AMA.

Sentry sponsor

Why Does Email Development Have to Suck? — A relatable explainer on why things are the way they are when it comes to email and what things can help ease the pain.

Hristiyan Dodov

Adapting Illustrations to Dark Mode — Shares a quick way to make any illustrations on your site look good in both light and dark mode.

Simon Farshid

Information Architecture vs. Sitemaps: What’s the Difference?
Samhita Tankala (NNG)

Case Study: Rebuilding TechCrunch Layout with Modern CSS
Ahmad Shadeed

How to Create a Chrome Extension in 10 Minutes Flat
James Hibbard

Eight Micro Tips for Remarkably Better Typography
Matej Latin

🔎 FIVE IN FOCUS with Michelle Barker

Five frontend recommendations from Michelle Barker, Senior Front End Developer at Ada Mode and author of CSS { In Real Life }. She's has a keen interest in digital sustainability and creative coding.

  1. WebPageTest: Carbon Control
    WebPageTest measures your site’s performance, and has recently added a new feature, Carbon Control, which helps to measure the CO2 impact, along with tips for reducing it.
  2. Lite YouTube Embed
    Embedded videos can be responsible for a lot of performance problems (and CO2 emissions) of a site. This package by Paul Irish ensures they are only loaded upon interaction, providing a better (faster) user experience.
  3. SVG OMG
    Jake Archibald’s tool for minifying and compressing SVGs is indispensable for any developer working with SVG.
  4. SVG Path Visualizer
    A really cool playground to help you understand how SVG path syntax works.
  5. ENV Switcher for VS Code
    This VS Code extension enables easy switching between different .env files in a project.

🔧 Code, Tools & Resources

UI Skeleton Gallery: SVG Loader UI Elements for Design Wireframes & Mockups — As explained in the FAQ, “A skeleton element is a UI element or screen that doesn’t contain actual content but instead offers a low-fidelity page wireframe before content completely loads.”


Feature Flags That Devs Actually Want to Use — DevCycle makes it easy to create and manage flags at scale, maintain an organized codebase, and stay on top of tech debt.

DevCycle sponsor

tw2panda: An Online Tool and CLI to Migrate Code from Tailwind to Panda CSSPanda is a type-safe CSS-in-JS solution we featured a few months back. You can try the online tool here or install locally to use the CLI. Also offers a VS Code extension.

Alexandre Stahmer

🎸 SVGuitar: Create SVG-Based Guitar Chord Charts — You can experiment with it in this live demo.

Raphael Voellmy

🧑‍💻 JOBS

Find Frontend Engineering Jobs with Hired — Hired makes job hunting easy-instead of chasing recruiters, companies approach you with salary details up front. Create a free profile now.

Video Thumbnail API: Get Thumbnail Images from Public Video URLs — Enter a public video URL along with a time in seconds to grab a thumbnail at the closest frame. Also usable via a GET request using the API.

Tim Bennetto

SVG Shapes: A Collection of 100+ Customizable SVG Shapes — Choose any shape in the gallery then customize the color using a solid fill or gradient of your choice.

Anup Aglawe