Same Energy Snap
Match up images that have been posted in pairs to Twitter with the caption “same energy”. This is more fun and addictive than it has any right to be.
Match up images that have been posted in pairs to Twitter with the caption “same energy”. This is more fun and addictive than it has any right to be.
The latest edition in this wonderful series of science-fictional typography has some truly twisty turbolift tangents.
This is a very nifty use of CSS gradients!
I wrote a while back about one of my favourite photographs but this might just give it a run for its money.
It was only near the end of the 19th century that shutter speeds improved, as did emulsions, meaning that spontaneous moments could be captured. Still, smiling was not part of many cultures. It could be seen as unseemly or undignified, and many people rarely sat for photos anyway.
Chris has put together one of his indispensable deep dives, this time into responsive images. I can see myself referring back to this when I need to be reminded of the syntax of srcset
and sizes
.
Progressive Enhancement allows us to use the latest and greatest features HTML, CSS and JavaScript offer us, by providing a basic, but robust foundation for all.
Some great practical examples of progressive enhancement on one website:
type="module"
to enhance a form with JavaScript,picture
element to provide webp
images in HTML.All of those enhancements work great in modern browsers, but the underlying functionality is still available to a browser like Opera Mini on a feature phone.
A nice succint explanation of using the srcset
and sizes
attributes on the img
element—remember, you probably don’t need picture
and source
elements if your use case is swapping out different sized versions of the same image.
One caveat thought: you do need to know the dimensions of the images. If you’re dealing with unknown or user-generated photos, that can be an issue.
This is not an image format. This is made of empty elements styled with CSS. (See for yourself by changing the colour value of the sun.)
These are great photos of the speakers at Beyond Tellerrand—great captures of Sharon, Cassie, and Charlotte.
The Web is smothering in useless images. These clichéd, stock images communicate absolutely nothing of value, interest or use. They are one of the worst forms of digital pollution because they take up space on the page, forcing more useful content out of sight. They also slow down the site’s ability to download quickly.
Here’s a clever tiny lesson from Dave and Brad: you can use prefers-reduced-motion
in the media
attribute of the source
element inside picture
.
There’s something deliciously appropriate about using a painting cloning service to clone a photograph of some cloned dogs.
“Did you just order an oil painting of Barbra Streisand’s dogs?” is the most Simon and Natalie thing ever.
Although this comes close:
PIctures of computers (of the human and machine varieties).
Analogue switches, dials, and buttons, buttons, buttons (just like that Flickr group I linked to).
Here’s a clever to technique to improve the perceived performance of image loading with a polygonal SVG placeholder.
Time-shifted photographs of my hometown in Ireland.