Recently, I was browsing a post on Medium and I spotted a nice image loading effect. First, load a small blurry image, and then transition to the large image. I found it pretty neat and wanted to dissect how it was done.
I have performed a WebPageTest test against this page on Medium where you can see how it loads too. And if you want to see it by yourself, open Medium’s post in your browser, disable the cache and throttle the response so it takes longer to fetch the images and you can see the effect.
Here is what is going on:
Render a div where the image will be displayed. Medium uses a
padding-bottomset to a percentage, which corresponds to the aspect ratio of the image. Thus, they prevent reflows while the images are loaded since everything is rendered in its final position. This has also been referred to as intrinsic placeholders.
Load a tiny version of the image. At the moment, they seem to be requesting small JPEG thumbnails with a very low quality (e.g. 20%). The markup for this small image is returned in the initial HTML as an
<img/>, so the browser starts fetching them right away.
Once the image is loaded, it is drawn in a
<canvas/>. Then, the image data is taken and passed through a custom
blur()function You can see it, a bit scrambled, in the
main-base.bundleJS file. This function is similar, though not identical, to StackBlur‘s blur function. At the same time, the main image is requested.
Once the main image is loaded, it is shown and the
All the transitions are quite smooth, thanks to the CSS animations applied.
These snippets are my attempt to save and organize various bits of code, best practices, and resources relating to web development and design. They also function as a to do list of sorts, for things I want to implement in my own code, but haven't yet. The concept is inspired by Jeremy Keith's links and CSS-Tricks, among other things. Enjoy.
On December 15th, 2016, someone attempted to assault Kurt Eichenwald, Newsweek journalist, through Twitter. They sent him a GIF known to trigger photosensitive seizures because Eichenwald has photosensitive epilepsy, and had reported highly unfavorable information about Donald Trump.
Let’s make this clear. This is assault. A seizure is dangerous. Every single person with epilepsy lives with the specter of SUDEP — Sudden Unexpected Death in EPilepsy. Attempting to cause a seizure in someone is dangerous and could be lethal.
(Small aside — a test for epilepsy involves trying to trigger a seizure with strobe lights, and this is done under medical supervision while hooked up to diagnostic machines. I’ve been through it. I did not have a seizure. You should never subject someone to such a test without informed consent and medical supervision on hand.)
The problem is not that Eichenwald failed to use a setting available to him. There are two culpable parties here — Twitter and Eichenwald’s assaulter.
Twitter is culpable in a moral sense, not legal. Twitter allows auto-played GIFs by default. A strobing GIF is easy to identify with an algorithm. The website could have made it impossible to assault Eichenwald this way. But Twitter never considered that its service could be used maliciously. It never assumed malice.
There was a widely held concept on the early internet that should have been carried forward to today. Bandwidth was limited, and computer users felt they had a right to control exactly what was put on their machine, so early internet applications allowed users to decide what images to download, and what GIFs to play. In that early internet experience, assaulting Eichenwald would have been impossible.
There are currently four active methods for storing data on the client side.
- Cookies (old school, still useful because they are sent with server requests)
- Local Storage (very easy to use)
- Session Storage (exactly the same, only clears when the tab is closed)
- IndexedDB (quite complex, quite powerful)
I was stopped at an intersection the other day. It was raining. The road on the other side sloped upwards, so I could see the stopped cars on the other side of the road kind of stadium-seating style. I could see all their windshield wipers going all at the same time, all out-of-sync with each other. Plus a few of them had seemingly kinda broken ones that flapped at awkward times and angles.
What does that have to do with web design and development? Nothing really, other than that I took the scene as inspiration to create something, and it ended up being an interesting hodgepodge of "tricks".
Today we’d like to show you a fancy little lettering animation made with SVG and anime.js. The idea is inspired by Jake Bartlett’s gorgeous opening animation for the “Shading Letters in Illustrator” Skillshare class by Jamie Bartlett. While we didn’t do any shading, we wanted to animate the stroke of each letter multiple times to achieve a similar effect.