--- title: "What's the carbon footprint of your website?" publication: "Frontend Focus" issue: 426 published_at: "2020-02-05" canonical_url: "https://frontendfoc.us/issues/426" --- This week's HTML, CSS and browser news #426 — February 5, 2020 [Read on the Web](https://frontendfoc.us/issues/426) Frontend Focus [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1580901205/kpnjqpknk9smpd5aglts.jpg)](https://dannyvankooten.com/website-carbon-emissions/) [CO2 Emissions On The Web](https://dannyvankooten.com/website-carbon-emissions/) — Sites are said to now be [four times bigger](https://httparchive.org/reports/page-weight?start=earliest&end=latest&view=list) than they were in 2010. This post looks at the energy costs of data transfer and what you can do to reduce your web carbon footprint. Danny van Kooten [Old CSS, New CSS](https://eev.ee/blog/2020/02/01/old-css-new-css/) — This is a tale of one individuals personal history with CSS and web design, offering a comprehensive, detailed “_blend of memory and research_”. A great trip down memory lane for any of you who got started on the web in the 90s. Evelyn Woods [![\](https://copm.s3.amazonaws.com/cecca22b.png)](https://github.com/webiny/webiny-js/?src=FrontEndFocus) [Open-Source Serverless CMS Powered by React, Node & GraphQL](https://github.com/webiny/webiny-js/?src=FrontEndFocus) — The way we build, deploy and operate the web is evolving. Webiny is a developer-friendly serverless CMS. Use it to build websites, APIs and apps and deploy them as microservices. SEO-friendly pages and fast performance. [View on GitHub](https://github.com/webiny/webiny-js/?src=FrontEndFocus). Webiny sponsor [How Smashing Magazine Manages Content: Migration From WordPress To JAMStack](https://www.smashingmagazine.com/2020/01/migration-from-wordpress-to-jamstack/) — An interesting look at how a big site like Smashing Magazine went about migrating from WordPress to a static infrastructure. This technical case study covers the gains and losses, things the Smashing team had wished they’d known earlier, and what they were surprised by. Sarah Drasner ▶[What’s New in DevTools in Chrome 80](https://www.youtube.com/watch?v=2EiPb1opH3g) — New features include improved WebAssembly debugging, network panel updates, support for let and class redeclarations and more. Google Chrome Developers [A New Technique for Making Responsive, JavaScript-Free Charts](https://dev.to/richharris/a-new-technique-for-making-responsive-javascript-free-charts-gmp) — There are countless libraries for generating charts on the web, but they all seem to require JavaScript. Here’s how the New York Times approached JS-free charts with SVG. Rich Harris [Bringing The Microsoft Edge DevTools to More Languages](https://blogs.windows.com/msedgedev/2020/02/04/localizing-edge-devtools/) Erica Draud (Microsoft) 💻 **Jobs** [Frontend Developer at X-Team (Remote)](https://x-team.com/remote-frontend-developer-jobs/?utm_source=cooperpress&utm_medium=email-ad&utm_campaign=frontend) — Work with the world's leading brands, from anywhere. Travel the world while being part of the most energizing community of developers. X-Team [Find a Dev Job Through Vettery](https://www.vettery.com/tech?utm_source=newsletter&utm_medium=cooper-frontendfocus&utm_term=tech&utm_content=grouped&utm_campaign=ad-77580) — Vettery is completely free for job seekers. Make a profile, name your salary, and connect with hiring managers from top employers. Vettery 📙 **News, Tutorials & Opinion** [HTML Attributes to Improve Your Users' Two Factor Authentication Experience](https://www.twilio.com/blog/html-attributes-two-factor-authentication-autocomplete) — How to use the HTML autocomplete, inputmode and pattern attributes to improve the user experience of logging in. Phil Nash ▶[Exploring the Frontend Performance of the UK's National Rail Website](https://www.youtube.com/watch?v=WRwxOonOYK0) — Runs through using the layers panel in Chrome DevTools to diagnose performance issues on a high traffic website. Umar Hansa [Transitioning Hidden Elements](https://cloudfour.com/thinks/transitioning-hidden-elements/) — Paul Hebert has written a little [JavaScript utility](https://www.npmjs.com/package/@cloudfour/transition-hidden-element) to wrap up all of the intricacies of dealing with transitioning hidden elements - _often tricky as they’re not in the document flow_. Cloud Four [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1580815213/xppssi9w4oeqdvex8mrv.png)](https://fossheim.io/writing/posts/css-polaroid-camera/) [How I Recreated A Polaroid Camera with CSS Gradients Only](https://fossheim.io/writing/posts/css-polaroid-camera/) — A high-level tutorial showing how to recreate physical products with just CSS. The end result here is a Polaroid camera made entirely out of gradients. Sarah L. Fossheim [The React Hooks Guide: In-Depth Tutorial with Examples. Start Learning](https://www.telerik.com/kendo-react-ui/react-hooks-guide/?utm_medium=cpm&utm_source=frontendfocus&utm_campaign=kendo-ui-react-blog-react-hooks-guide&utm_content=sponsored-link) — Learn all about React Hooks as we comprehensively cover: State and Effects, Context, Reducers, and Custom React Hooks. Progress KendoReact sponsor [How To Create A Headless WordPress Site On The JAMstack](https://www.smashingmagazine.com/2020/02/headless-wordpress-site-jamstack/) Sarah Drasner & Geoff Graham [Using the CSS `line-height` Property to Improve Readability](https://alligator.io/css/line-height/) William Le [Possibly The Easiest Way to Run a Static Site Generator](https://css-tricks.com/possibly-the-easiest-way-to-run-an-ssg/) CSS Tricks [Getting Keyboard-focusable Elements](https://zellwk.com/blog/keyboard-focusable-elements/) — A quick JavaScript function for managing focus. Zell Liew [Shopping for Speed On eBay](https://web.dev/shopping-for-speed-on-ebay/) — This case study explains how eBay increased key metrics by optimizing the performance of their web/app experiences. Addy Osmani [How We Started Treating Frontend Performance as a Feature](https://product.hubspot.com/blog/treating-frontend-performance-as-a-feature) — A non-technical guide to the decisions HubSpot made (and the tools they now utilise) that helped them start treating frontend performance as a feature. Adam Markon 🔧 **Code, Tools and Resources** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1580905198/cxgxf97d3t1hipefrsji.jpg)](https://legrajs.com/) [LegraJS — Lego Brick Graphics](https://legrajs.com/) — A small (3.36KB gzipped) JS library that lets you draw using LEGO like brick shapes on an HTML `` element. Preet Shihn [massCode: A Free and Open Source Code Snippets Manager](https://masscode.io/) Anton Reshetov [Axe Pro: Free Accessibility Testing Tool Created for Development Teams](https://www.deque.com/axe-pro-sign-up/?utm_source=frontend_focus&utm_medium=sponsored&utm_campaign=brief_link) Deque sponsor [micro-jaymock: Tiny API Mocking Microservice for Generating Fake JSON Data](https://github.com/Meeshkan/micro-jaymock) Meeshkan [Craft 3.4 is Here](https://craftcms.com/blog/craft-34) — Version 3.4 of this paid CMS brings improvements to user experience, collaboration, GraphQL, and more. Craft 🗓 **Upcoming Events** [Flashback Conference, February 10-11 — Orlando, USA](https://cfe.dev/events/flashback-conference-2020/) — Looks at cutting-edge web dev, browser APIs and tooling, but adds how they’ve evolved from the past to the web of today. [Frontend Developer Love, February 19-21 — Amsterdam, Netherlands](https://frontenddeveloperlove.com) — Three full days of talks from 35+ global JavaScript leaders from around the world. [ConveyUX, March 3-5 — Seattle, USA](https://conveyux.com) — This West Coast user experience conference features over 65 sessions across three days. [W3C Workshop on Web & Machine Learning, 24-25 March — Berlin, Germany](https://www.w3.org/blog/news/archives/8238) — Hosted by Microsoft, this free event aims to “_bring together providers of Machine Learning tools and frameworks with Web platform practitioners to enrich the Open Web Platform with better foundations for machine learning_”. A **[Cooperpress](https://cooperpress.com/)** publication — Curated by [Chris Brandrick](https://twitter.com/chrisbrandrick) & [Peter Cooper](https://twitter.com/peterc). [Change your email address](https://frontendfoc.us/edit_subscription/*|UID|*) or[Stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*) © Cooper Press Ltd · Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom