Srcset and sizes
Read NoteA wonderfully illustrated and deeply informative article on responsive images on the web. 👏 Also, Eric's worries about "none of this being implemented in any browser yet" are no longer relevant …
theAdhocracy
A wonderfully illustrated and deeply informative article on responsive images on the web. 👏 Also, Eric's worries about "none of this being implemented in any browser yet" are no longer relevant …
A very thorough overview of how to write a modern, performant, HTML-driven image component that is as optimised to serve the most appropriate image as possible. There are some very neat tricks in …
A pretty exhaustive overview of the HTML and CSS options that we now have for responsive image layouts. Here are some key …
Malte has put together a brilliant overview of the various techniques that are currently available on the web natively for loading images in the most performant and user-centric ways possible. I'm …
An attempted experiment to replicate the blog layout of ilovetypography.com, which uses floats to great effect, with more modern CSS Grid and Flex techniques. Turned out to not be quite so simple, but taught me a lot about the benefits and limitations of CSS Grid.
Craft CMS has the ability to accept environment variables as well as aliases. It can be worthwhile understanding how these two seemingly similar concepts differ, and when you might want to use one over the other.
I keep running into the same problem: how to set a style attribute in the CMS and have that be dynamically rendered on the front-end, without relying on inline styles. Turns out it's a great use case for CSS variables!
Static sites don't make search functionality easy, but luckily there are some excellent services that do. I've been messing around with Algolia and finally have it working with Craft and Gatsby the way I want it... on the backend, at least.
Notes from the fully remote React Summit 2020 (or at least the talks I tuned in for). Lots covered, from static-site generators and the Jamstack through to React state management and accessibility. What a fun day!
YouTube embeds can be expensive on page load metrics, but what alternative is there? How about loading a thumbnail that hot-swaps itself for an <iframe> when clicked? Sounds great, but wouldn't …
A very neat little trick. Embedding @keyframes within your SVG <style> element makes it animate when it loads, whether rendered as an image or a background (or, I assume, inlined). It can even …
Ahmad has put together some really interesting examples of where modern CSS techniques can replace traditional use-case for absolute positioning. I'd be really interested to know how some of them …
I saw Zach's poll on Twitter when they posted it, so I was intrigued to see what the results were. Most people agree with me, that URLs shouldn't have trailing slashes. It turns out that we're …
Robb has come out with some very cool ideas over the years, but wow, seeing CSS-only specular highlighting and holograms is such a neat trick 🤯 I immediately want to co-opt some of this for the …
A quick (and dirty) way to fetch local data from a JSON file and modify the look of a page in Astro, completely natively.
Harry has created an absolutely phenomenal talk here that provides an immense amount of depth whilst still being completely accessible to someone like me who largely doesn't deal with the technical …