Modern CSS for Dynamic Component-Based Architecture — Explores modern project architecture, with a focus on theming, responsive layouts, and component design. Stephanie looks at features we can use to improve code organization, digs into layout techniques (such as grid and container queries), and shares some real-world examples of context-aware components. A solid overview of how we can now approach things thanks to growing feature parity across browsers.
Stephanie Eckles
|
Gotchas of CSS Nesting — Starting with a question with a surprising answer, Kilian explains how CSS nesting can lead to unexpected results due to how specificity can change when nested CSS rules are internally translated into individual rules for application.
Kilian Valkhof
|
Enterprise UI Development: Testing & Code Quality — Managing or migrating large apps and codebases? This video course covers what you need to know to scale efficiently whilst maintaining code quality. Covers unit testing, CI pipelines, mocking, code coverage, and more.
Frontend Masters sponsor
|
A Preview of Web Apps in macOS Sonoma 14 Beta — The next version of macOS (Sonoma) will double down on the idea of well integrated, desktop-installable webapps. These apps hide their web roots by not showing any Safari UI at all. Here’s a dig around into how it works so far.
Thomas Steiner
|
📙 Tutorials, Articles & Opinion |
'My Custom CSS Reset' — We first linked this popular (and rather meticulous) post a few years back, but it’s recently been updated. Josh outlines the rationale behind his own, custom CSS reset — detailing each rule, what it does, and why you may want to use it.
Josh W. Comeau
|
Real-World Frontend Success Stories — Discover how DroneDeploy, LaunchDarkly, and Oyster HR revolutionized their customer communications with this Notification Inbox.
Courier.com sponsor
|
SVG vs Canvas: Which to Choose and Why? — James runs through some of the key considerations (performance, accessibility, testing, etc.) behind choosing the right technology for vector graphics.
James Williams
|
🔧 Code, Tools & Resources |
Blur Vignette Effect in CSS — Inspired by one of the Apple Vision Pro demos from WWDC, Artur attempted to recreate something similar using just CSS. There’s even a neat generator at the end of this blog post so you can play about with the effect yourself and grab the resulting code.
Artur Bień
|
Realtime Colors: Visualize Your Colors on a Real Site — An interactive website that lets you choose colors for UI elements (text, background, buttons, etc.) which are applied live on the page. You can randomize the colors, generate palettes, and export in various formats. A handy way to test out your ideas.
Realtime Colors
|
|