Lazy loading is a popular technique for gradually requesting images as they come into view, rather than all at once after the HTML of the page has been parsed. It can reduce the initial page weight, and help us hit our performance budgets by requesting images when they’re needed. In this post, we’ll look at an implementation you can add to your site as I’ve done on this little demo site.
The features available to web developers are constantly evolving. In recent years we’ve seen exciting new abilities that were beyond my imagination when I started building websites. They have changed what it means to design and build for the web.
Besides the design, loading time and performance, accessibility determines the user experience of the web apps that you’re building profoundly. This quick guide will give you an introduction to the why and how of testing your website’s user experience using screen readers.
Atomic design is now over 6 years old (which is nuts!). I’m thrilled that all these years later the methodology continues to help teams think of their user interfaces as a hierarchical, interconnected set of components that build real product screens. Of course over these last 6 years, the language and tactics around design systems has evolved (even the term “design systems” wasn’t really a thing back in 2013!), so I thought I’d share how some of these other concepts interact with atomic design.
When it comes to building a layout, CSS Grid offers us a number of different choices for placing items. In this article we’ll take a look at the different placement methods, how to use auto-flow to avoid having to explicitly place every item, and why sometimes grid items might not be placed where you expect them to be.
With the Lobotomized Owl Selector and now the Flexbox Holy Albatross I’m worried people are going to think I have a thing about birds. I mean, it’s pretty cool that birds are essentially fluffy dinosaurs. Then again, crocodiles are kind of actual, real dinosaurs, still living today! So, like, they win on that count. Wait, how did crocodiles survive the meteorite impact when all the other dinosaurs died off? What did they know that velociraptors didn’t? Did they have bunkers? In any case, this talk is the story of a peculiar and peculiarly named CSS layout technique I came up with, what it means to write algorithmic layouts, and how to integrate this layout primitive into your design system via the custom elements spec’.