👋 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, your editor |
Designing Beautiful Shadows in CSS— 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— 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 |
How to Make the Web Accessible— Join Jon Kuperman for this video course on website accessibility, covering screen readers, ARIA, focus management, tooling, and more. Frontend Masters sponsor |
What’s New With 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 |
📙 Tutorials, Articles & Opinion |
A Deep-Dive into 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 — 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— 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 |
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 |
Bundling Non-JavaScript 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) |
Frontend Engineer (m/f/x)— Grow & work in our cross functional squads in an amazing environment, providing a personal educational budget and 30d of vacation.
HOMEDAY |
|
🔧 Code, Tools and Resources |
|