--- title: "Two ways modern CSS is moving things forward" publication: "Frontend Focus" issue: 508 published_at: "2021-09-15" canonical_url: "https://frontendfoc.us/issues/508" --- Plus Josh shows us how to make beautiful shadows. | 👋 Hey folks. Chris here, back at the helm after a week away. My thanks to Peter for taking the reins last week. Let's jump into this week's Frontend updates. __ _[Chris Brandrick](https://twitter.com/chrisbrandrick), your editor_ [![\](https://res.cloudinary.com/cpress/image/upload/v1602675575/hhmdxfk96fnbq3effjk1.png)](https://frontendfoc.us/) Frontend Focus #​508 — September 15, 2021 | [Read on the web](https://frontendfoc.us/issues/508) [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1631714638/p24qtgqbihki2ygkkcck.png)](https://www.joshwcomeau.com/css/designing-shadows/) [Designing Beautiful Shadows in CSS](https://www.joshwcomeau.com/css/designing-shadows/) — Another excellent tutorial from Josh, this time taking a considered look at how to use CSS to create “_rich, lush, lifelike shadows_” and do away with the commonly found “_fuzzy grey boxes_”. Josh W Comeau [Reducing the Need for Pseudo-Elements](https://www.smashingmagazine.com/2021/09/reducing-need-pseudo-elements/) — For years, pseudo-elements have helped frontend devs implement creative designs. They still have an important place, but Marcel explains here how we can now leave them behind in some scenarios, thanks to newer CSS properties. This is a lot more interesting than it sounds! Marcel Moreau [![\](https://copm.s3.amazonaws.com/ce6b29ef.png)](https://frontendmasters.com/courses/accessibility-v2/?utm_source=frontendfocus&utm_medium=email&utm_campaign=accessibilityv2) [How to Make the Web Accessible](https://frontendmasters.com/courses/accessibility-v2/?utm_source=frontendfocus&utm_medium=email&utm_campaign=accessibilityv2) — Join Jon Kuperman for this video course on website accessibility, covering screen readers, ARIA, focus management, tooling, and more. Frontend Masters sponsor [Less Absolute Positioning with Modern CSS](https://ishadeed.com/article/less-absolute-positioning-modern-css/) — A solid, practical explainer on how to go about reducing `position:absolute` usage by leveraging modern CSS. Ahmad Shadeed [What’s New With DevTools: Cross-Browser Edition](https://www.smashingmagazine.com/2021/09/devtools-cross-browser-edition/) — Learn what’s new with the developer tools not _just_ in Chrome, but in Firefox, Safari, and Edge too. One of those areas where just a little time spent becoming aware of the possibilities could shave off hours when it comes to debugging(!) Patrick Brosset **⚡️ Quick bits:** - [Version 8.4](https://developer.chrome.com/blog/lighthouse-8-4/) of Google's automated website auditing tool Lighthouse is available now in Chrome Canary. This post highlights what's new. - The W3C's design system [is now live](https://w3c.studio24.net/updates/design-system-live/). - Replay is a new [visual debugging tool](https://www.replay.io) from some former Firefox Dev Tools team members. - The Web Fonts working group has [published a Public Working Draft of 'Incremental Font Transfer'](https://www.w3.org/blog/news/archives/9254). The spec outlines methods to incrementally transfer fonts, allowing clients to load only the portions of the font they actually need, thus speeding up font loads. - Mozilla has [reverse engineered the way Microsoft sets Edge as default](https://www.theverge.com/2021/9/13/22671182/mozilla-default-browser-windows-protections-firefox) in Windows 10, enabling Firefox to quickly make _itself_ the default. 📙 **Tutorials, Articles & Opinion** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1631713375/guzmicbfp7znw4xwhkrq.png)](https://developer.chrome.com/blog/videong/) [A Deep-Dive into VideoNG](https://developer.chrome.com/blog/videong/) — If you’ve ever wondered how video rendering works in Chromium this detailed article covers just that, along with its evolution over the last few years. Dale Curtis (Google) [`overscroll-behavior`](https://css-tricks.com/almanac/properties/o/overscroll-behavior/) — What you need to know about this CSS property (_it controls whether an element will use ‘scroll chaining’ or not_). Mojtaba Seyedi [Developer Decisions For Building Flexible Components](https://www.smashingmagazine.com/2021/09/developer-decisions-building-flexible-components/) — A walk through of the decision process of taking a seemingly simple design for a component (often presented as a static mock-up) and deciding how best to translate it into code — keeping in mind the needs of both users and content authors. Michelle Barker [Implementing Batch Editing in an Angular Data Grid the Easy Way](https://www.telerik.com/blogs/batch-editing-with-kendo-ui-grid-for-angular?utm_medium=cpm&utm_source=frontendfocus&utm_campaign=kendo-ui-angular-blog-batch-editing-kendo-grid) — Use this tutorial to learn how to use Kendo UI for Angular to create a Data Grid that allows updates and saves in bulk. Progress Kendo UI for Angular sponsor [Orchestrating Complexity with Web Animations API](https://www.smashingmagazine.com/2021/09/orchestrating-complexity-web-animations-api/?ref=sidebar) — There’s lots to learn in the Web Animations API, as such here’s a how-to looking at learning both timing and playback controls — a good foundation/starting point. Kirill Myshkin [![\](https://res.cloudinary.com/cpress/image/upload/v1631713983/sepi2ve8alnbpzr9kcef.png)](https://css-tricks.com/grainy-gradients/) [Grainy Gradients](https://css-tricks.com/grainy-gradients/) — This tutorial looks at how generate colorful noise to add texture to a gradient using only a small amount of CSS and SVG. There's code demo's here and what you need to know in regards to browser support. It's a neat effect. Jimmy Chion [Modernising CSS Infrastructure in DevTools](https://developer.chrome.com/blog/modernising-css-infra-in-devtools/) — A look at the history of CSS in DevTools, and the future plans for migrating to CSS Module Scripts. Kriti Sapra (Google) [Bundling Non-JavaScript Resources](https://web.dev/bundling-non-js-resources/) — Learn how to import and bundle various types of assets from JavaScript in a way that works both with browsers and bundlers. Ingvar Stepanyan (Google) [Build Internal Tools in Minutes with Retool, Where Visual Programming Meets the Power of Real Code](https://retool.com/?utm_source=sponsor&utm_medium=newsletter&utm_campaign=cooperpress) Retool sponsor [Firefox’s `bolder` Default is a Problem for Variable Fonts](https://css-tricks.com/firefoxs-bolder-default-is-a-problem-for-variable-fonts/) Šime Vidas ▶[Three Fun Uses for `::before` and `::after`](https://www.youtube.com/watch?v=QFjqxVMwIl8) Kevin Powell [The Story Behind TryShape, A Showcase for the CSS `clip-path`Property](https://css-tricks.com/the-story-behind-tryshape-a-showcase-for-the-css-clip-path-property/) Tapas Adhikary [How to Optimize Button Microcopy: Seven Suggestions with Examples](https://t.co/ibLXFwbq1T?amp=1) Maria Panagiotidi Jobs [Walmart is Hiring Software Engineers](http://wmtcareers.com/cbsb) — Code at scale, Fortune 1 scale. Learn more about Software Engineering opportunities at Walmart. Walmart Global Tech [Frontend Engineer (m/f/x)](https://www.homeday.de/en/jobs/senior-frontend-engineer-m-w-x-4884343002/) — Grow & work in our cross functional squads in an amazing environment, providing a personal educational budget and 30d of vacation. HOMEDAY [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 🔧 **Code, Tools and Resources** [Tailwind Mobile: Mobile UI Components Built with Tailwind CSS](https://tailwind-mobile.com/) — Includes lots of utilities and components with a native iOS or Material Design look, currently available for React, with plans for Svelte and Vue in the future. Vladimir Kharlampidi [Pollen: A Library of CSS Variables Inspired by Tailwind](https://www.pollen.style/) — Features include no build process, no framework dependencies, and they can be used in external CSS, inline styles, and CSS-in-JS. Peppercorn [Starback.js: Create a Beautiful Falling Star Background](https://github.com/zuramai/starback.js) — This is a pretty specific feature to add to a website and won’t be useful for most projects, but [the demo](https://zuramai.github.io/starback.js/) is pretty neat and the API allows you to customize the speed and look of the falling stars. Ahmad Saugi [flag-icons: A Collection of All Country Flags in SVG — Plus the CSS for Easier Integration](https://flagicons.lipis.dev/) Panayiotis Lipiridis 📬 **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|*)