This is a potentially useful bit of CSS that I had no idea existed.
Sunday, April 15th, 2018
Friday, April 6th, 2018
Wednesday, April 4th, 2018
This service could be quite handy if you’re making a presentation that involves showing code—it generates syntax-highlighted images of code.
Tuesday, March 27th, 2018
Tim explains why that neat trick of making a really big JPEG with quality set to 0% is no longer necessary, and how the savings you make in bandwidth with that technique are nullified by the expense of the memory footprint needed.
Monday, March 12th, 2018
The hits just keep on coming from the Filament Group. Here Scott shares a really clever technique for creating an image magnifier using the
sizes attribute of the
Wednesday, March 7th, 2018
This is impressive—a fully featured graphics app for creating SVGS right in your browser.
Metaballs, not to be confused with meatballs, are organic looking squishy gooey blobs.
Here’s the maths behind the metaballs (implemented in SVG).
Friday, February 9th, 2018
Wednesday, November 29th, 2017
edent/SuperTinyIcons: Under 1KB each! Super Tiny Icons are miniscule SVG versions of your favourite website and app logos
These are lovely little SVGs of website logos that are yours for the taking. And if you want to contribute an icon to the collection, go for it …as long as it’s less than 1024 bytes (most of these are waaay less).
Monday, November 27th, 2017
This is clever—you can use the
navigator.connection API from a service worker (because it’s asynchronous) which means you can have a service worker script that serves differently sized images based on bandwidth.
Saturday, November 18th, 2017
Here’s a clever to technique to improve the perceived performance of image loading with a polygonal SVG placeholder.
Thursday, November 9th, 2017
A clever performance trick for images:
- Reduce image contrast using a linear transform function (Photoshop can do this)
- Apply a contrast filter in CSS to the image to make up for the contrast removal
Wednesday, November 8th, 2017
Wednesday, November 1st, 2017
A really great case study of a code refactor by Mina, with particular emphasis on the benefits of CSS Grid, fluid typography, and accessibility.
Sunday, October 29th, 2017
A lovely interactive photo essay charting the results of what happens when evolution produces a life form that allows a planet to take selfies.
Thursday, October 19th, 2017
The end result is really impressive but there’s still the drawback that the browser history will be updated every time you click on an image thumbnail (because the functionality relies on
ID attributes referenced via
:target). Depending on your use-case, that may or may not be desirable.
Monday, October 9th, 2017
It looks like the
async attribute is going to ship in Chrome for
This attribute would have two states:
- “on”: This indicates that the developer prefers responsiveness and performance over atomic presentation of content.
- “off”: This indicates that the developer prefers atomic presentation of content over responsiveness.
Monday, October 2nd, 2017
Amber has been investigating which image formats make sense for which situations.
Choosing image format is only one step towards optimising images on the web. There are many, many other steps to consider, and so, so much to learn!
Sunday, August 13th, 2017
119 slides from Sarah on a wide range of SVG magic (with code).