The case of the eternal blur – Medium Engineering

So Brad + I have been working on these elevated collection pages + posts for a small eternity. We forked the post page, ripped out all the cruft, and made this rad index page that shows off all the posts in the collection with some branding. We’ve had a few different collection concepts on Medium, but this one is optimized for our editorial team to showcase some of the collabs they’ve been working on, like Unruly Bodies with Roxane Gay.

our new shiny collection index page

We identified the last stray bugs, patched them, and I made some time for some purely engineering improvements I couldn’t squeeze into our first version before I bounced for 🌴 hawaii 🌴 for a bit of workcation.

One of these improvements was to make that giant blue Unruly Bodies cover image progressive + to have a nice placeholder for it while it loads. (Before, the text would jankily shift to the right on first render, then the image sloooowly painted in over mediocre connections)

Our progressive image code takes a super tiny version of the image that loads in quickly + blurs it out as a placeholder until the real one is ready. This unfortunately synonymous with when javascript is ready, but it’s still way better than a jagged paint-in.

We used to only use this image treatment on our post page (rendered in the backend) and for horizontal images. I moved the template generation code over to the client, flipped the logic on its side to support vertical images and was extremely pleased with myself.

ahhh yeah once that image loads in this is gonna be so premium
TLDR: my progressive image is definitely broken

Top of the next morning, our valiant editorial team files a bug with me over slack. The issue is a weird one, transient, and I can’t reproduce at all. The blurry placeholder image loads in fine but then is never swapped with the real asset.

I have some wild stabs in the dark theories, but it’s impossible to say until I have my very own eternally blurry image in my grasp.

I give up for the evening, 🙏 for transience and eat a spam musubi on the beach for dinner + fall asleep.

Design + Editorial do not give up trying to help me conjure this eternal blur on my laptop, and are on it top of the morning.

brad is the best, and this is sherlock level sleuthing
pray to be blessed with wonderful co-workers willing to help you repo obscure things, especially when you’re the only eng on a project with a million threads to pursue

Brad + Euni notice the issue only happens at very specific browser sizes and seems to happen reliably in one window size vs another.

Equipped with something to look for, I brace myself to flail around some of our more ancient code.

Source link