Photo Corners headlinesarchivemikepasini.com
A S C R A P B O O K O F S O L U T I O N S F O R T H E P H O T O G R A P H E R
Enhancing the enjoyment of taking pictures with news that matters, features that entertain and images that delight. Published frequently.
Site Tweak: Last Updated
24 April 2016
It's amusing, we think, how much time you can spend getting something right.
We noticed a hissing sound coming from the toilet tank the other day. We took the top off but didn't see anything peculiar.
We ran a test. Turned off the water supply (which eliminated the hiss), marked the water level, came back in half an hour. The water level was the same. So the flapper was OK.
We looked the hissing valve up online and went through the recommended maintenance procedures, taking the thing apart, rinsing it (it was clean) and putting it back together.
Still, we heard the hiss. And we noticed the water level kept rising. Not good.
We lowered the water level so it took longer to overflow (and used less water to flush) until we could get a replacement part.
The next day we got the part from the hardware store and stopped the hissing. A rubber gasket had to be replaced.
If we could have afforded a plumber, we might have gotten the OpticFilm 135 review done.
LAST UPDATED
Yesterday we updated our Last Updated time display on the Headline page and the Calendar data file. It took just as long as fixing the toilet.
It all started when, surfing the Web for something interesting, we ran across some code to report the time elapsed since a file was last updated. How many seconds ago. How many minutes ago. How many hours ago.
Yes, it's a very small change to the site and not of very much importance. But we think it illustrates the difference between plumbing and coding.
We were reporting the file time and date of the Headline and Calendar files so you know how long ago they were updated but we don't tell you the elapsed time. You do that in your head, right?
Well, we became enamoured of the idea. "That's kind of cool," we said to ourselves.
WE TRY IT
So we added the PHP code to our local copy of the Headline page, right under the (heavily-manipulated) file timestamp.
Naw, we didn't like it. It took up too much room, it was too many numbers to read, it was disorienting. Bummer, man.
The next day we had a bright idea. What if we kept it to one line but used elapsed time for short durations like seconds ago and minutes ago, switching back to the old file timestamp if it's been over an hour?
Then, at a glance, you'd know if the page has been updated very recently or not. If not, you could do the math in your head like you used to do.
We tried that.
It was tricky trying that. We unwrapped the time_ago() function (it's only run once per page load) and wove it into our existing timestamp code, dropping a few conditionals into it to determine which branch gets run when. Then we rearranged it to make it a bit more efficient.
We ended up with code that grabbed the file timestamp, calculated the elapsed time and if it wasn't seconds or minutes, formatted the timestamp as we used to do.
But then we thought we should format the elapsed time, too. Which required simply enlarging the digits.
So we did that. And we were pleased.
TESTING
Testing required over an hour. Seconds looked good right away. Minutes just as good a few minutes later. We took a shower and came back to examine what happens after an hour.
All good.
It was convenient to have two files to try this on so we could keep one going while we fiddled with the other. Otherwise we would never have seen what happened after an hour.
BUT WAIT
But wait, we were still not done. Why should we make you do the math? The code can do the math. The question is really just how it should be displayed.
We thought about that for a minute. Then we got the bright idea of using a tool tip.
Just hover the mouse over the displayed data to see the alternative. So it it says, "3 seconds ago," you can hover to see the timestamp. And if you see the timestamp, hover to see how many hours or days (it could happen) ago the page was updated.
We implemented that in CSS so you don't need JavaScript to use it. But unlike the JavaScript sliding slide shows we use in reviews or even the JavaScript plus signs we use in headlines to show new content since publication, a tap isn't the equivalent of a hover on phones and tablets.
It's not critical information, just a convenience, so we didn't bother to implement it for mobile devices. In fact, our phone mobile layout doesn't even display the last updated data.
Since we aren't using a link, we made sure the cursor turned into a pointer when you hovered over the data so you'd know there was more there than meets the eye.
Finally, we dressed up the CSS so the tooltip would match the design of the site.
CONCLUSION
Yes, it's a very small change to the site and not of very much importance. But we think it illustrates the difference between plumbing and coding.
A plumber doesn't take two days to fix the hiss in a toilet valve. That's because a plumber comes with a truck that has frequently used parts in it. The plumber just has to take to tank top off, peek inside at the valve in use and get the part from the truck.
A coder works differently.
There's an initial spec (what you want, say) that is without exception just the tip of the iceberg. Fulfilling the initial spec won't do the job. The coder realizes that but the client, despite plenty of experience to the contrary, doesn't.
That's because you spec a function but implementation requires design. A plumber doesn't design anything. A plumber removes and replaces, restoring (or updating) the original design. But a coder has to design not just what things look like but how they work (or even if they work across all devices).
Coding is fun but there's a lot to it. If you need help, we're happy to discuss your project with you.
How much does it cost? Less than a plumber.