---
title: "Astro 3.0 released, and RIP to a Web hero"
publication: "Frontend Focus"
issue: 608
published_at: "2023-09-06"
canonical_url: "https://frontendfoc.us/issues/608"
---

Plus Michelle Barker's five Frontend picks, creating dice with CSS, and why to take care when sharing QR codes. |       

Together with [![logo\](https://res.cloudinary.com/cpress/image/upload/c_fill,g_auto,w_320,h_100/e_make_transparent/co_white,e_outline:4/kishpd4z3cddmgekpc7p.png)](https://kontent.ai/developers/?utm_source=frontendfocus&utm_medium=cooperpress_newsletter&utm_campaign=q1_newsletter_cooperpress)   

👋 **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](https://twitter.com/chrisbrandrick), Editor_       

🚀 Frontend Focus 

#​608 — September 6, 2023 | [Read on the web](https://frontendfoc.us/issues/608)      

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1694005118/ablkxoxux2vmjcbviqr0.png)](https://astro.build/blog/astro-3/)  

[Astro 3.0 Released](https://astro.build/blog/astro-3/) — This new version of popular web framework / site generation system Astro claims to be amongst the first to support the [View Transitions API](https://developer.chrome.com/docs/web-platform/view-transitions/) — making transitions possible without rolling out a SPA. This release also includes image optimization improvements, optimized built outputs, and more. [Repo here](https://github.com/withastro/astro). 

Astro   

🪐 Astro was also [featured by the Chrome team](https://developer.chrome.com/blog/astro-view-transitions/) for their use of the View Transitions API.   

[Browse Websites by What Fonts They Use](https://maxibestof.one/typefaces) — If you’re looking for inspiration or the ways in which a particular font has been used, this is a handy resource. 

Bertrand Bruandet   [![\](https://copm.s3.amazonaws.com/1a36a698.png)](https://kontent.ai/developers/?utm_source=frontendfocus&utm_medium=cooperpress_newsletter&utm_campaign=q1_newsletter_cooperpress) 

[Headless CMS with AI Capabilities, That’s Kontent.ai](https://kontent.ai/developers/?utm_source=frontendfocus&utm_medium=cooperpress_newsletter&utm_campaign=q1_newsletter_cooperpress) — Streamline your code and scale with ease using Kontent.ai. 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. 

Kontent.ai sponsor   

[A Review of Browser Video Players](https://adrianroselli.com/2023/09/browser-video-players-review.html) — 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](https://performance.shopify.com/blogs/blog/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)    

**⚡️ IN BRIEF** 

- Notable accessiblity advocate and inclusive design expert [Molly Holzschlag](https://en.wikipedia.org/wiki/Molly_Holzschlag), sometimes called 'the fairy godmother of the web', [has died aged 60](https://www.tucsonsentinel.com/local/report/090523_molly_holzschlag/tucsons-molly-holzschlag-known-as-the-fairy-godmother-web-dead-60/). She was a force for good for the open web and will be much missed.
- The [Web Preferences API is being prototyped](https://groups.google.com/a/chromium.org/g/blink-dev/c/UNfjkjHAPOM/m/pVAlW_43AgAJ?pli=1). Bramus explains [why it matters](https://front-end.social/@bramus/111017811072436704).
- The first public working draft for the [CSS Transitions Level 2](https://www.w3.org/TR/2023/WD-css-transitions-2-20230905/) spec is now live.
- Firefox, as of version 117, now has [automatic translation](https://www.theregister.com/2023/08/31/firefox_117/), _a la Chrome._
- In other browser news, Chrome is pushing ahead with its not-exactly-much-loved [new way to target ads at users based on their browser history.](https://www.theregister.com/2023/09/06/google_privacy_popup_chrome/)
- If you use QR codes anyway, be careful and check where they actually point to.. otherwise you could [📄 have to recall several physical products](https://www.lidl.co.uk/static/assets/Paw_Patrol_Public_Recall_poster-500790.pdf) _(PDF)_ for containing QR codes pointing to offensive web sites.. 🙈    

📙 **Tutorials, Articles & Opinion** 

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1693997584/oi8yiyjdcgnjflgtef6e.png)](https://mackfitz.hashnode.dev/laying-out-dots-on-a-dice-using-displayflex-pseudo-classes)  

[Laying Out Dots on Dice using `display:flex` & Pseudo Classes](https://mackfitz.hashnode.dev/laying-out-dots-on-a-dice-using-displayflex-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](https://blog.chromium.org/2023/08/towards-https-by-default.html) — 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](https://adrianroselli.com/2023/08/where-to-put-focus-when-deleting-a-thing.html) — 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](https://sentry.io/resources/frontend-performance-monitoring-101/?utm_medium=paid-community&utm_source=frontendfocus&utm_campaign=performance-fy24q3&utm_content=newsletter-performanceworkshop-register) — 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?](https://dodov.dev/blog/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](https://blog.simonfarshid.com/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?](https://www.nngroup.com/articles/information-architecture-sitemaps) 
Samhita Tankala (NNG)   

[Case Study: Rebuilding TechCrunch Layout with Modern CSS](https://ishadeed.com/article/rebuilding-techcrunch-modern-css/) 
Ahmad Shadeed   

[How to Create a Chrome Extension in 10 Minutes Flat](https://www.sitepoint.com/create-chrome-extension-10-minutes-flat/) 
James Hibbard   

[Eight Micro Tips for Remarkably Better Typography](https://betterwebtype.com/8-tips-for-remarkably-better-typography/) 
Matej Latin    

🔎 FIVE IN FOCUS _with Michelle Barker_        ![](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1693994335/lf9w5glh5tqi47z96zxw.png) 

Five frontend recommendations from Michelle Barker, Senior Front End Developer at [Ada Mode](https://www.ada-mode.com/) and author of [CSS { In Real Life }](https://css-irl.info/). She's has a keen interest in digital sustainability and creative coding.      

1. [WebPageTest: Carbon Control](https://www.webpagetest.org/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](https://github.com/paulirish/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](https://jakearchibald.github.io/svgomg/)
 Jake Archibald’s tool for minifying and compressing SVGs is indispensable for any developer working with SVG.
4. [SVG Path Visualizer](https://svg-path-visualizer.netlify.app/)
 A really cool playground to help you understand how SVG path syntax works.
5. [ENV Switcher for VS Code](https://marketplace.visualstudio.com/items?itemName=EcksDy.env-switcher)
 This VS Code extension enables easy switching between different .env files in a project.    

🔧 **Code, Tools & Resources** 

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/vk6q56xgz4fa4k5ebhvg.jpg)](https://www.brandbird.app/tools/ui-skeleton-gallery)  

[UI Skeleton Gallery: SVG Loader UI Elements for Design Wireframes & Mockups](https://www.brandbird.app/tools/ui-skeleton-gallery) — 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.” 

BrandBird   

[Feature Flags That Devs Actually Want to Use](https://devcycle.com/?utm_source=frontend-focus&utm_medium=em&utm_campaign=newsletter-frontend-focus-september-2023) — 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 CSS](https://github.com/astahmer/tw2panda) — [Panda](https://panda-css.com/) is a type-safe CSS-in-JS solution we featured a few months back. You can try the [online tool here](https://tw2panda-astahmer.vercel.app/) or install locally to use the CLI. Also offers a [VS Code extension](https://marketplace.visualstudio.com/items?itemName=astahmer.tw2panda-vscode). 

Alexandre Stahmer   

🎸 [SVGuitar: Create SVG-Based Guitar Chord Charts](https://github.com/omnibrain/svguitar) — You can experiment with it [in this live demo.](https://omnibrain.github.io/svguitar/) 

Raphael Voellmy    

🧑‍💻 JOBS  

[Find Frontend Engineering Jobs with Hired](https://hired.com/join/?utm_source=newsletter&utm_medium=sponsor&utm_campaign=%28b2c%29%28l-all%29%28r-all%29%28cooper-frontendfocus%29&utm_content=find-your-next-job) — Hired makes job hunting easy-instead of chasing recruiters, companies approach you with salary details up front. Create a free profile now. 
Hired      

[Video Thumbnail API: Get Thumbnail Images from Public Video URLs](https://thumbnail.video/) — 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](https://www.svgshapes.in/) — Choose any shape in the gallery then customize the color using a solid fill or gradient of your choice. 

Anup Aglawe    

📬 

**Got a new email address?** You can [change your email here](https://frontendfoc.us/edit_subscription/*|UID|*). 

--- 

**Bored of us?** Click [here to stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*). 

--- 

**Got a link for us?** Reply and tell us. We can't include everything but we'll take a look. 

--- 

Published by Cooper Press Ltd.
Curated by [Chris Brandrick](https://mastodon.social/@brandrick) & [Peter Cooper](https://twitter.com/cooperx86).
Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom 

[Stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*)  

[Ipx.](https://frontendfoc.us/open/608/*|UID|*?ipx=t)