One of the ideas I came up with was this interactive starry backdrop. We combined GSAP and an HTML <canvas>, and even sprinkled in some React that makes it more configurable and reusable. We even dropped an Easter egg in there!
I have always wanted a native CSS way to crop an image and position it in any direction I need. In this article, I will walk you through the new CSS property object-view-box that was suggested by Jake Archibald early this year. It allows us to crop or resize replaced HTML elements like an <img> or a <video>.
When people talk about CSS complexity, a major contributor to that is CSS specificity, or writing effective CSS selectors. The more you add to a CSS selector, the more precise it is, but also, the more specific it is, so the harder it will be to overwrite styles if you need to at a later point.
“Should I use pixels or ems/rems?!” This is a question I hear a lot. Often with a dollop of anxiety or frustration behind the words. It’s an emotionally-charged question because there are a lot of conflicting opinions out there, and it can be overwhelming. Maybe you’ve heard that rems are better for accessibility. Or maybe you’ve heard that the problem is fixed and pixels are fine?
Last month, I wrote about fixing common accessibility issues. That post seems to have resonated with people, so I have written up five more fixes you could do to your codebase today. Let’s go!
Responsive designs being created today have to serve more users on more devices and with more varied abilities and preferences than ever before. And size and spacing of elements can quite literally make or break your layout. In this new world, strict pixel values are so Web 2.0. Let’s review modern CSS techniques for building future-forward flexibility into our layouts and components.
Thanks to Cloud Four for sponsoring this week’s newsletter! 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.
Tweet
Share