From image sharing sites to online stores, image galleries are a common pattern on the web. Images can be very data heavy, and loading images can make the page take a long time to load. In addition, users have high expectations around the usability of galleries, so it’s common to add additional libraries that further increase page size.
The web platform has added support for many of the underlying pieces of an image gallery. So, what does it look like to code an image gallery with Baseline features? This demo showcases a variety of techniques that you can use to do just that.
Images can be some of the largest assets you ask your users to download, and image galleries by their nature often have many images. This demo uses a couple of Baseline features to help reduce the performance impact on users.
@starting-stylebackdrop-filter for better readabilitySee the Pen Baseline Zoo by @web-dot-dev on CodePen.
Brad chats with Miriam Suzanne about pottery, theater, CSS, and why we shouldn’t just accept AI as the way. Miriam describes their through-line as collaborative creativity across pottery, theater, client work, and CSS standards, arguing process shapes results and that CSS is inherently collaborative with users, browsers, and devices.
Miriam and Stacy troubleshoot an issue with the dev tools available in each browser, exploring the differences and what each browser’s tools do best.
This long-debated solution for masonry layout is now available and it’s time to figure out how to use it. Join us for a deep dive into the workings of Grid Lanes.