Links
CSS Grid Areas
It’s no surprise that many avoid template areas as making sense of the grid is challenging enough. In this interactive article, I aim to shed light on this feature and, hopefully, convince you to use it more often. Once you see the simplicity and power of template areas, you may reach for them much more frequently.
Misconceptions about view transitions
The View Transition API is a web development game changer. Whether your website is single or multi-page, this powerful API lets you create seamless transitions between views, resulting in native-like experiences that captivate users.
Dungeons & Dragons taught me how to write alt text
Describe the most important thing first. I don’t know about you, but I’d want to know about the red dragon’s presence and activity a lot more than the quality of the masonry.
Fit-to-Width Text: A New Technique
Registered custom properties are now available in all modern browsers. Using some pre-existing techniques based on them and complex container query length units, I solved a years-long problem of fitting text to the width of a container, hopefully paving the path towards a proper native implementation.
Eleventy Buckets & Cascade Layers
I’m trying to find the best pattern for organizing my CSS into Cascade Layers. Layering can be done within a file, using the
@layer <name> { … }
rule block, or it can be done with alayer(<name>)
function on-import. I prefer the latter for my top-level layers.
Videos
Character Modeling in CSS
Forget about efficiency, and being a drone, working with your atomic CSS… No, CSS can do so much more than than that and we're to see how if you can imagine it, you can make it happen. We're going to we're going to see that from Julia, who works at GitLab. She is a product designer and UX engineer, but you probably know her for CSS animations. This is what she does. She demonstrates not just CSS, she demonstrates the magic that CSS makes possible, and you will believe that nothing is impossible with CSS!
Sponsor
Sponsored by Cloud Four
Thanks to Cloud Four for sponsoring this week’s newsletter! They solve complex responsive web design and development challenges for ecommerce, healthcare, fashion, B2B, SaaS, and nonprofit organizations.
If you’d like to help with the costs of running Friday Front-End, you can back our Patreon for as little as a dollar a month.