Every two weeks, the Daily Kos tech team has a retrospective meeting in which we look back at our work together so that we can talk about what could have gone better and what we did well. One thing I brought up at our last meeting is that we don’t have a really great way to communicate with DK users about new features and bugfixes on the site. Jason, our VP of Technology, had been blogging about changes weekly during our transition to DK5, but Jason has been too busy lately to consistently blog.
At the meeting, everyone agreed that this was important— that we should be blogging about changes to the site. So I volunteered to write a regular story so that we can keep everyone up to date on the latest changes. The conversation with Jason went something like this:
Me: I think we should blog about the latest technical changes to Daily Kos. I could “make that so.”
Jason: That’s a good idea, absolutely!
Me: So do you want me to “make it so”?
Jason: Yes! Let’s do it!
Me: Can you say “make it so” to keep the Star Trek vibe going?
Jason: <sighing> OK, “make it so.”
And this is it, here we go! It’s an experiment, but if people like these I will keep ‘em coming.
Before I get into the latest changes, let me tell you who I am. I’m Iterology (birth name: John), a software developer who has been working at Daily Kos for the past four years. That gives me the third longest tenure on the tech team here after elfling and Jason. I’ve gotten to know the application pretty well in that time. I’ve been here from almost the beginning of the DK5 transition (I’ve seen some things, man) and I hope to be here to the end. I blog and comment infrequently, but I consider myself a user of the site as well as one of its developers.
Let’s get to the changes! This will be a bit of a catch-up edition, and I’ll call out some notable fixes and improvements from the past month or so. I won’t mention anything purely internal but will stick to the things you’d notice (though there were many other internal changes). My idea is to provide a handy list of things we’ve done and then to go into more detail later, so you can read on past that if you want to know more of the gritty details.
Ch-ch-ch-changes
- Brought back small embedded campaign widgets, with new design
- Fixed a bug in the editor where bubble over link that lets you open it in a new tab was sometimes misplaced
- Fixed a bug that made some links to older stories in a legacy format not work
- Fixed a bug where new embedded campaign widgets were not showing up in older stories
- Added a confirmation dialog to the tool that allows blog admins to “bump” a post to the top (it was easy to hit it by accident)
- Created new design for share and recommend buttons
- Fixed a problem that made bottom recommend and share buttons disappear sometimes
- Fixed a bug where comments were missing a bottom margin in collapsed view
- Fixed a bug in which sometimes outdated styles and scripts were occasionally being used (this one will probably fix a lot of little weird thing that would go wrong now and then)
- Fixed a bug in which images in comments would incorrectly default to right aligned rather than centered
- Fixed a performance bug for long comment threads in which partial transparency in hidden comments would cause everything to grind to a halt
- Added separation between campaign embed widget and blockquotes (they would previously blend together as they have the same background color)
- Made it so campaign widgets will now be centered by themselves at narrow screen widths (rather than wrapping around skinny columns of text)
- Fixed a bug that made disclaimer language too big in campaign widget embeds (we aren’t trying to hide it, it was yuuuuge)
- Fixed a bug in which featured image captions would load very skinny before the image, causing a flash of a “snail trail” of text going down the page
- Fixed a bug in which some older images would weirdly appear hovering over the right sidebar rather than in the story
But wait! There’s more! After where it breaks my heart that there is no longer an orange squiggle.
Aside: I may have been the one who removed the orange squiggle from the codebase.
Scene: The Old West
(Iterology and the orange squiggle are in the street after a gun battle has taken place)
Iterology: Hold on buddy, we’re going to get you help.
Squiggle: It’s no good. I’m too low res for this retina world.
Iterology: <fumbles with photoshop>
Squiggle: Tell— tell the people— <coughs> not to have primary wars. To be unified as Democrats and not to squabble or write mean comments on the site. It’s what I want.
Iterology: OK Squiggle, I’ll spread the word, I’ll—
Squiggle: <dies>
You may have noticed that there’s been a ton of bugfixes and not much new feature development. That’s partly because some of those bugs were really important to fix, and partly because much of our development team has been stuck in the basement working on a seekrit project so we’re a bit short handed. (No, they aren’t building a giant wooden rabbit, but good guess.) Actually, I’ve been informed it isn’t secret and Markos even mentioned it in passing, but I don’t think we’ve really had an official announcement. There will be some really cool enhancements coming to the site soon though!
Let’s change the subject and talk about one of those changes I discussed above in more detail, if only to see if I can describe it in such a way that I don’t make everyone’s eyes glaze over. Presented for your consideration: The Mysterious Case of the Snail Trail of Text (of Doom).
The Mysterious Case of the Snail Trail of Text (of Doom)
If you’ve used this site in the past few months, you may have seen something like this flicker on your screen for a few seconds before the featured story image loads:
The snail trail (of doom)
Then the image would load, and that snail trail of text would look like what it actually is, the caption for the image. It would be long and skinny no longer. All would be well, but that flash of a long skinny string of text would be jarring. So why did that happen and how did we fix it?
When an image loads in a web browser, the browser doesn’t really know how wide or tall it will be until it loads, unless you specifically tell the browser how big the image is going to be. The image width is pretty much zero until it loads, so that’s why the caption looks so long and skinny: it’s trying to fit in a space one pixel wide, like it was captioning an image on the head of a pin.
So some months ago we hit on what seemed like an easy solution: we’d just tell the browser what the image’s height and width should be in the page markup. Then the browser would reserve the right amount of space for the image, and the caption would look right!
Well, that fixed the problem briefly, but then something went wrong. When we started to look at why that wasn’t working, it was immediately clear that we were setting height and width in the wrong way for the browser to truly believe that that was the space it should reserve. (We were setting the height and width properties instead of a inline style with height and width, which didn’t work because reasons.)
Well, problem solved, right? Not so fast. We tried out the fix only to have our team of trained otters come back and tell us that this fix was no good. It turns out that when we publish stories from the new editor, that worked out fine. Unfortunately, the older DK4 infrastructure that publishes scheduled stories would not know about the height and width of the image. The browser would not know how much space to reserve and would be sad, crying sad, sad snail trail tears.
This lead to an animated discussion in the tech bullpen. Some advocated for updating the old infrastructure to know about the image size. Others advocated for adding a new rule that captions could only be one letter long. (OK, no one really did that. ) There were various highly difficult solutions proposed. Finally, we had an idea: we can just hide the caption until the image loads. Ten minutes later we had our fix.
And so the snail trail was vanquished. Everyone’s browser was happier and did not cry tears of text. They all lived happily ever after and there were never any more bugs on the website. The end.
OK, probably not. Tune in next time, maybe, for more tales from the bug hunt, if people like this sort of thing. Let me know in the comments.
(Special thanks to Peregrine Kate for editorial help and feedback)