--- title: "Understanding the browser rendering cycle" publication: "Frontend Focus" issue: 523 published_at: "2022-01-05" canonical_url: "https://frontendfoc.us/issues/523" --- β€” and a Happy New Year from us. | [![\](https://res.cloudinary.com/cpress/image/upload/v1602675575/hhmdxfk96fnbq3effjk1.png)](https://frontendfoc.us/) Frontend Focus #​523 β€” January 5, 2022 | [Read on the web](https://frontendfoc.us/issues/523) ![](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1641385098/nxbcqczy7asnfyk3mewf.png) **πŸš€ Hello 2022!** **Hey! πŸ‘‹** Hope you're well β€” thank you for opening the first issue of the year! After a festive break, we're back and ready to keep you updated on all things frontend for another year. If you missed our last issue, we took a look back over some of the highlights shared in Frontend Focus throughout 2021 ([you can read it here](https://frontendfoc.us/issues/522) β€” there's plenty of good stuff worth reading). Also, whilst I've got you, you may want to [follow our accompanying Twitter account](https://twitter.com/FrontEndDaily), sharing helpful resources and handy links most days. Anyway, that's all from me. All the best for 2022! β€” [Chris](https://twitter.com/chrisbrandrick) ✌️ [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/cuoeutnlfc7gdaajmo4v.jpg)](https://medium.com/@matthew.costello/frontend-web-performance-the-essentials-0-61fea500b180) [The Browser Rendering Cycle, Hardware Acceleration & Compositor Layers](https://medium.com/@matthew.costello/frontend-web-performance-the-essentials-0-61fea500b180) β€” A detailed read that aims to give the reader a solid understanding of the rendering cycle, how to analyse it with available tools, and minimise the work necessary to deliver frames – something that’s essential for a performant frontend. Matthew Costello [![\](https://copm.s3.amazonaws.com/4e8e6035.png)](https://frontendmasters.com/courses/css-variables/?utm_source=frontendfocus&utm_medium=email&utm_content=css) [Course: Dynamic CSS with Custom Properties (aka CSS Variables)](https://frontendmasters.com/courses/css-variables/?utm_source=frontendfocus&utm_medium=email&utm_content=css) β€” Join Lea Verou and learn how best to leverage Custom Properties - a revolution in how we write CSS. This detailed course will see you improve code reuse, maintainability, and enable possibilities that previously required large amounts of JavaScript. Frontend Masters sponsor [Improving Core Web Vitals, A Smashing Magazine Case Study](https://www.smashingmagazine.com/2021/12/core-web-vitals-case-study-smashing-magazine/) β€” How Smashing Magazine went about improving their own Core Web Vitals, with details on detection, how they fixed any bottlenecks, and ended up with green scores across the board. Barry Pollard [Frontend Developer Resources for 2022](https://www.iamdeveloper.com/posts/frontend-developer-resources-2022-4cp2/) β€” Nick has compiled a list of stuff he found to be compelling throughout 2021. Lots of good stuff here including videos, tutorials, and resources on things such as CSS, JavaScript, animation, testing, and more. Nick Taylor **⚑️ Quick bits:** - A lawsuit has been filed alleging that Google is violating antitrust laws by paying Apple to ['stay out' of the search business](https://www.prnewswire.com/news-releases/class-action-lawsuit-filed-in-california-alleging-google-is-paying-apple-to-stay-out-of-the-search-engine-business-301453098.html). - Mozilla has [started accepting](https://www.benzinga.com/markets/cryptocurrency/22/01/24854245/mozilla-now-accepting-donations-in-dogecoin-users-threaten-to-quit-using-firefox-in-respon) crypto donations, but it hasn't gone down well β€” as [these two](https://twitter.com/jwz/status/1478022085737803776) [rather sweary tweets](https://twitter.com/plinss/status/1478135256683143168) illustrate. - Jen Kramer's ['Getting Started with CSS' course](https://frontendmasters.com/courses/getting-started-css/) is currently free on Frontend Masters. - [This case study](https://web.dev/terra-dark-mode/) looks at how 'dark mode' helped reduce bounce rate and increase pages read for one Brazilian media company by some considerable margin. - Xavier Harding [interviews award-winning UI Design Engineer Sara Soueidan](https://hacks.mozilla.org/2021/12/hacks-decoded-sara-soueidan-award-winning-ui-design-engineer-and-author/) on frontend development, design, and more. πŸ“™ **Tutorials, Articles & Opinion** β–Ά[Generating Your Color Palette in CSS](https://www.youtube.com/watch?v=Uh95jZPTDfw) β€” Jake Archibald and Surma (who is [leaving Google after 7 years](https://twitter.com/DasSurma/status/1478425713703329805)) sit down to discuss Color Spaces β€” touching upon device capabilities, color mixing, contrast calculations, and more. Google Chrome Developers [Metaphors We Web By](https://maggieappleton.com/metaphors-web) β€” An interesting post looking over the history of our metaphorical understanding of the web. Maggie Appleton [Container Queries](https://12daysofweb.dev/2021/container-queries/) β€” This incoming CSS feature will allow developing components that respond to their container’s width and other properties. Stephanie Eckles [Doppler - All Your Environment Variables in One Place](https://www.doppler.com/?utm_campaign=newsletter&utm_medium=referral&utm_content=frontendfocujan5s&utm_source=newsletter) β€” Stop struggling with scattered API keys and avoiding access controls. Keep your team and servers in sync with Doppler. Doppler sponsor ['CSS Underlines Are Too Thin and Too Low in Chrome'](https://css-tricks.com/css-underlines-are-too-thin-and-too-low-in-chrome/) β€” Ε ime has encountered two bugs in Chrome while testing the new CSS `text-decoration-thickness` and `text-underline-offset` properties as shared here. Ε ime Vidas [Should CSS Override Default Browser Styles?](https://css-tricks.com/should-css-override-default-styles/) β€” Every CSS ruleset you write will likely changes the defaults of _something_. But should CSS override browser defaults defaults? Chris Coyier [Building Gatsby Themes for WordPress-Powered Websites](https://www.smashingmagazine.com/2021/12/building-gatsby-themes-wordpress-powered-websites/) Paulina Hetman β–Ά[The Six Most Important CSS Concepts for Beginners](https://www.youtube.com/watch?v=JnTPd9G6hoY) Kevin Powell [Smoothly Reverting CSS Animations](https://pragmaticpineapple.com/smoothly-reverting-css-animations/) Nikola Đuza Jobs [Frontend Developer Excited About Internet of Things?](https://dimensionfour.io/careers/frontend-developer) β€” Great opportunity to join a remote-friendly company positioned for exponential growth, working with emerging technologies and tools. [Apply now](https://dimensionfour.io/careers/frontend-developer). Dimension Four [Frontend Developer at X-Team (Remote)](https://x-team.com/remote-frontend-developer-jobs/?utm_source=cooperpress&utm_medium=email-ad&utm_campaign=cooperpress-frontend&utm_content=frontend) β€” Join the most energizing community for developers and work on long-term projects for Riot Games, FOX, Sony, Coinbase, and more. X-Team [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) β€” Create a profile on Hired to connect with hiring managers at growing startups and Fortune 500 companies. It's free for job-seekers. Hired πŸ§‘β€πŸ’» _Looking to share your job listing in Frontend Focus? [There's more info here](https://booking.cooperpress.com/jobs)_. πŸ”§ **Code, Tools and Resources** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1641388651/adpr9kv0k0csvtl6y8ug.png)](https://non-boring-gradients.netlify.app/) [Non Boring Gradients: Online Tool to Build Gradients That Look Good](https://non-boring-gradients.netlify.app/) β€” As the author explains, this takes advantage of non-sRGB interpolation spaces and non-linear easing, evidently making the gradients more appealing. Tom Quinonero [Try JavaScript Online: Simple Web-based JavaScript Console Input](https://try.javascript.org.pl/) β€” This is a console side-by-side with a web page, so you can run script snippets while learning. The default example web page is [Eloquent JavaScript](https://eloquentjavascript.net/) but you can enter any online resource. Jakub T. Jankiewicz [Buildkite Is Now an Official AWS Graviton Ready Partner. Read All the Details Here](https://buildkite.com/blog/aws-graviton-ready?utm_campaign=CPress&utm_source=ppc&utm_medium=cp&utm_term=aws-graviton&utm_content=arm-based) Buildkite sponsor [HTML Mocker: A Script to Mock Dynamic Data in HTML for Automatic Responsiveness Testing](https://github.com/ClearTax/html-mocker) β€” Just add the script to a page and it will randomize the innerText content for elements based on constraints you can define via HTML classes. ClearTax [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1641393275/ydcwsmjeg0u9rvfhiqkw.png)](https://www.guess-css.app/) [Guess CSS: An Interactive HTML & CSS Game](https://www.guess-css.app/) β€” An interesting game to test your CSS layout knowledge. Based on a visual layout, select which code example matches. You can even filter which CSS features you want to be tested on. Aleksei Berezkin [Inspect: Figma Plugin to Export to HTML, React, or Tailwind](https://www.figma.com/community/plugin/1049994768493726219/Inspect---Export-to-HTML%2C-React%2C-TailwindCSS) Figma πŸ“¬ **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://twitter.com/chrisbrandrick) & [Peter Cooper](https://twitter.com/peterc). Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom [Stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*)