This guide won’t regale you with the cool theory behind responsive images, because for now, you’re just testing the waters. It won’t lecture you on the potential benefits to site speed, because there are better resources out there. And it won’t dwell on the pitfalls, quirks, or brain-bending complexities of the modern implementation, because you’re a busy person and will study these later. Instead, we’re going to look at a single real-life example of efficient image scaling using the new srcset and sizes attributes.
An exploration of video game preservation, based on interviews with archivists and restorationists at digital distribution service GOG.com. This feature uncovers the process of digital archaeology, including license acquisition, emulators & wrappers, code hunting, and digitisation of printed assets, as well as touching on the wider issues surrounding the preservation of classic titles.
In this tutorial, I explain how to create the responsive sprite animations seen in my feature on Command & Conquer. The guide includes instructions for creating image sprites using the command line, animating them using the CSS keyframe syntax while maintaining their responsive dimensions, and finally a technique to bind playback to the scrollbar using JavaScript.
Until now, web developers have had very little control over how browsers render images when they’re scaled. Take Mario, for instance: This is a 24x32 pixel image, scaled up using Photoshop to preserve its crisp, blocky composition. It’s a great example of the low-res pixel art that’s long been a staple of retro and indie games. Let’s see how our image is rendered in the browser when scaled up using CSS:
Great Scott! With the site’s first birthday approaching, I felt that now was an ideal time to give Bennet.org a much-needed jolt of lightning. The features page, on which all my long-form projects now live, represents my first foray into Flexbox. I’ve barely scratched the surface of what’s made possible by flex layouts, and I haven’t yet rolled it out site-wide, but suffice to say it really does make the CSS layout mechanisms of yore feel like 1955.
Welcome to my new website. Shiny. This is the obligatory Hello World post. First things first, please forgive the pretentious choice of TLD. The appeal of a super-geeky firstname@lastname email address outweighed my reluctance to brand myself as a non-profit organisation. My main goal here was to create a website from scratch, without relying on a CMS. WordPress is great and I use it daily, but when it’s necessary to tinker under the hood, I’m lost in loops and functions that I don’t understand or need.