---
title: "Should web perf tools report carbon emissions?"
publication: "Frontend Focus"
issue: 621
published_at: "2023-12-06"
canonical_url: "https://frontendfoc.us/issues/621"
---

Plus a special feature on cool fonts to check out. |       

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=q4_newsletter_cooperpress)        

🚀 Frontend **Focus** 

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

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/wd5u9abtn4pspyb9rze1.jpg)](https://evilmartians.com/chronicles/care-beyond-code-7-best-design-practices-for-frontend-developers)  

[Taking Care Beyond Code: 7 Best Design Practices for Frontend Developers](https://evilmartians.com/chronicles/care-beyond-code-7-best-design-practices-for-frontend-developers) — When a frontend engineer fails to think about the importance of design, the user experience can suffer. This post highlights the importance of a holistic approach, offering pointers and best practices to ultimately result in less bugs and overall delays. 

Nina Torgunakova   

🚀 [Astro 4.0 Released](https://astro.build/blog/astro-4/) — The new major release of the [Astro](https://astro.build) content-site framework is just out, including a new dev toolbar, automatic i18n routing, new view transition APIs, and more. There’s also, experimentally, incremental content caching. [Upgrading is simple](https://docs.astro.build/en/guides/upgrade-to/v4/) – an `npx @astrojs/upgrade` away for most folks. 

Astro   [![\](https://copm.s3.amazonaws.com/c0006ef2.png)](https://kontent.ai/developers/?utm_source=frontendfocus&utm_medium=cooperpress_newsletter&utm_campaign=q4_newsletter_cooperpress) 

[AI in Content Management Done Right](https://kontent.ai/developers/?utm_source=frontendfocus&utm_medium=cooperpress_newsletter&utm_campaign=q4_newsletter_cooperpress) — With AI assisting marketers, tech people can finally focus on their strengths - apply a code-first approach, avoid code debt, design high-quality structures for content, and be prepared for the future. 

Kontent.ai sponsor   

[An Informed Pre-Caching Strategy for Large Sites](https://calendar.perfplanet.com/2023/informed-pre-caching-strategy-for-large-sites/) — Pre-caching, also called cache priming or cache warming, involves preemptively putting items into the cache _before_ they are requested by a user. Ethan shares how this can be a great way to reduce expensive computations and strain on the origin server, but notes that once a site gets to a certain scale, it requires more thought than simply keeping everything in a warmed cache. 

Ethan Gardner     

⚡️ Quick Links 

- 🔟 It's been a decade since Troy Hunt launched [the invaluable 'Have I Been Pwned' service](https://www.troyhunt.com/a-decade-of-have-i-been-pwned/). Thank you!
- 📉 Bruce Wray looks at the stats and asks: [is Firefox 'on the brink'](https://www.brycewray.com/posts/2023/11/firefox-brink/)?
- 🤦 The UK government is exploring [AI face detection](https://arstechnica.com/tech-policy/2023/12/unproven-ai-face-scans-may-estimate-age-for-access-in-uk/) to age-gate adult content.
- ⌨️ It's from 2020, but this [Advent calendar of accessibility tips](https://kittygiraudel.com/2020/12/01/a11y-advent-calendar/) remains useful.
- ☀️ Do you think you'd ever use [an `au` CSS size unit?](https://github.com/w3c/csswg-drafts/issues/9678) Yes, `1au` would be about 93 million miles or so... 😎     

📙 **Tutorials, Articles & Opinion** 

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/wuvfxfzmivbgszdzdrom.jpg)](https://calendar.perfplanet.com/2023/why-web-perf-tools-should-be-reporting-website-carbon-emissions/)  

[Why Web Perf Tools Should Be Reporting Website Carbon Emissions](https://calendar.perfplanet.com/2023/why-web-perf-tools-should-be-reporting-website-carbon-emissions/) — A response to a [DebugBear post](https://www.debugbear.com/blog/website-carbon-emissions) explaining why the company opts _not_ to report carbon emissions in their reports. Fershad gently suggests why they should, chiefly to allow developers the opportunity to contextualize the impact of their sites. 

Fershad Irani   

[`sizes="auto"` Pretty Much Requires Width and Height Attributes](https://ericportis.com/posts/2023/auto-sizes-pretty-much-requires-width-and-height/) — Eric notes that ‘auto-sizes’ for lazy-loaded images is a fantastic addition to the web platform, but they curiously do basically require a `width` and `height` attribute. 

Eric Portis   

[The AI Engineer Path Just Launched 🚀](https://scrimba.com/learn/aiengineer?coupon=FrontendFocusDec06#join) — Supercharge your web dev skills with this JS focused AI Engineer course. Frontend Focus Readers get 62% off Annual plans. 

Scrimba sponsor   

[Does Interaction to Next Paint Actually Correlate to User Behavior?](https://www.speedcurve.com/blog/INP-user-experience-correlation/) — Now that Interaction to Next Paint is poised to dethrone FID as the Core Web Vitals metric for responsiveness, it’s time to scrutinize its effectiveness. 

Cliff Crocker   

[Examples of Great URL Design](https://blog.jim-nielsen.com/2023/examples-of-great-urls/) — Some examples of good URLs and why following certain patterns might be helpful. “_They’re not just for typing into browser bars_.” 

Jim Nielsen   

[Measure LCP Sub-Parts to Improve Largest Contentful Paint](https://www.debugbear.com/blog/lcp-subparts) 
DebugBear   

[Creating a Marquee Effect with CSS Animations](https://www.bennadel.com/blog/4536-creating-a-marquee-effect-with-css-animations.htm) 
Ben Nadel   

[How HTML Web Components are 'Having a Moment'](https://cloudfour.com/thinks/html-web-components-are-having-a-moment/) 
Scott Vandehey  

🔧 **Code, Tools & Resources** 

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/kghhnodnujr3s4dkdizf.jpg)](https://www.classyfont.com/)  

[ClassyFont: An Online Tool to Generate CSS for Your Fonts](https://www.classyfont.com/) — Upload your web-friendly fonts and this tool will generate the necessary @font-face code. You can edit the URL paths, the font fallbacks, and the naming style (camel case, hyphen, underscore). 

sakar hamasaid   

[Pravatar: Avatar Placeholder Photos Under a CC0 License](https://pravatar.cc/) — Provides an API so you can access a random image, specifying the size, or choose a specific image from all those available by image ID, all sourced from [Pexels](https://www.pexels.com/). 

simular   

[A Non-Cloud Alternative to Google Forms That Has It All](https://surveyjs.io/?utm_source=frontend_focus&utm_medium=email) — Transform your form management. Build and edit dynamic JSON-based forms in a form builder fully integrated in your IT. 

SurveyJS sponsor   

[Design2Code: Use AI to Convert Any Web Design Screenshot to Clean HTML/CSS Code](https://github.com/mostafasadeghi97/design2code) — Claims to support sketches, wireframes, Figma, XD, etc. Requires an OpenAI API key and the demo video shows an HTML form being converted from an image to responsive HTML/CSS. YMMV for other types of layouts! 

Mostafa Sadeghi     

🔥 Hot fonts 

- I've stumbled across a handful of nice, interesting new fonts lately, so I figured I'd share a few of them here with you:  

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1701859462/rzjh6rmnaikdvomj5gro.png)](https://vercel.com/font/sans)   

- First up is [Geist](https://vercel.com/font/sans), a new pair of clean, versatile fonts from Vercel. There's two typeface variants here, Geist Sans and Geist Mono.       

The much-loved [Inter](https://github.com/rsms/inter) font just hit [version 4.0](https://github.com/rsms/inter/releases/tag/v4.0). This new release has several new OpenType features, redesigns to thousands of glyphs, six additional display designs, and more. You can [download it here](https://rsms.me/inter/).   

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1701866691/zrsnxqikxb2zqy88uj8k.png)](https://rsms.me/inter/)        

[Berkeley Mono](https://berkeleygraphics.com/typefaces/berkeley-mono/) is a lovely (paid) monofaced typeface "_by software engineers, for software engineers_" that's described as a "_love letter to the golden era of computing_". There's lots of examples here of it in use. It comes with several sets, plenty of ligatures, and has wider international/language support.   

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1701863978/jiojc4sknjtqoy82ibv9.png)](https://berkeleygraphics.com/typefaces/berkeley-mono/)        

_Snoo!_ Reddit recently [underwent a brand redesign](https://www.pentagram.com/work/reddit), and as part of that they’ve now, naturally, got [their own series of fonts](https://github.com/reddit/redditsans), including additional mono and condensed variants.   

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1701863685/wpncahxiwnskuy15mu6g.png)](https://github.com/reddit/redditsans)    

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1701860822/u5nlynpbsqdzaxbhi0yh.png)](https://marbla.de)   

- This one's a bit different! [Marbla](https://marbla.de) is an experimental variable font that goes beyond its regular style to adopt curves and balloon-like playful variations. It doesn't seem to be generally available, but as variable fonts are still in their early days, it feels apt to share what's possible.      

📬 

**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/621/*|UID|*?ipx=t)