I’m almost always reading and learning what is going on in the industry. Of late, I’ve been spending more time on Medium.com as another source of personal enrichment. But, it isn’t just the content that intrigues me, I enjoy their design.
Their site is clean and crisp, a great modern interface. In my continuing journey to improve my own site, I decided to code a few of their design ideas into my test blog. In due time, I’ll port them to my primary blog as well.
The first, is read time. Medium isn’t the only site that uses it, but was the first that caught my eye. If you’re interested, here’s how they calculate it. I’m actually using a slightly different method using a bit slower read time. The routine is pretty basic and I should be able to tweak it over time if I find the need. For now, it works well enough and gives you an overall feel for how long an article will take to read.
The other thing I liked, and one I have seen elsewhere as well, is the post time. My posts have generally used the long and unfriendly publish dates. Although useful for some things, I like the fresh way that Medium displays their times. Time for another change, no pun intended.
It was actually easy to build a new post time. Since the routine I used already adjusts based on HTML or XML/RSS, it was simple to add another test to it. In this case, I made the new routine the default, leaving the old should I want to return to it.
The actual code was straight forward. I already calculate the epoc time using Perl’s timelocal() function, making it trivial to get the age of the post. Once I had the age in seconds, I calculate the minutes, hours and days as well. I thin run through a series of tests, returning a friendlier message for the post time. Here is the routine for those few Perl coders out there.
# time difference
my $mins = int($secs/60);
my $hrs = int($mins/60);
my $days = int($hrs/24);
my $curyear = (localtime())[5]+1900;
if ($secs < 60) {
return "$secs secs ago";
} elsif ( $mins < 60 ) {
return "$mins mins ago";
} elsif ( $hrs < 24 ) {
return "$hrs hrs ago";
} elsif ( $hrs < 48 ) {
return "yesterday";
} elsif ( $days < 7 ) {
return "$days days ago";
} elsif ( $year == $curyear ) {
return "$month $day";
} else {
return "$month $day, $year"
}
I’ve already added read time to my blog, although not on the landing page like you see here. That requires a bit more coding still. Most likely, I’ll add the friendlier post time when I do that.