semiBad version four: more old school than an old school
Earlier this weekend I decided to add a few bits of new functionality to the site. As is so often the case with these things, it quickly snowballed into an early spring-clean, and the first proper refit of the site's backend since I built it the first time.
Now with extra comments
I removed the comment functionality some time last year â€“ the site had been targeted suddenly (and brutally) by spammers, and as the notification system I'd built sent me an email for each comment, this quickly got pretty old. I had been meaning to add it back shortly with better protection, but it was one of those jobs that I simply never got around to â€“ until this weekend!
The commenting system now uses Twitter OAuth to confirm the commenter's identity. I'm hoping this will cut out most (if not all) of the comment spam that I previously encountered, but it also has some other nice features â€“ it automatically populates the commenter's name and uses their avatar on the comment, as well as linking back to their Twitter feed. In many ways, the last couple of years have seen Twitter accounts becoming people's de facto online identities, and I think that being able to use those identities elsewhere is probably a good thing. Of course, some people don't have Twitter accounts â€“ I was mildly concerned about excluding those people, but they could always send me an email. Or send a telegram; whatever it is these people do.
I'm extremely poor at taking part in #followfriday-type exercises. The sad thing is, it's not for lack of amazing people to recommend â€“ quite the opposite, as I often feel it'd be unfair to single out one person in particular. My other major gripe with our hashtag-based traditions is that people are so lazy â€“ often, great dispassionate lists of names (I get included on these all the time, and have never picked up any worthwhile followers from them). Possibly worse are those in my feed who list their same five friends every week, same bat-time, same bat-channel. If I haven't followed them yet, I'm not likely to this time.
Minor rant aside, I decided that this was possibly something that could be added as functionality to a site. The sidebar box was my super-simple solution â€“ just a small database of people my Twitter feed would be worse without, each with a lovingly-written description of who they are and why you should care. Every page visit plucks one completely at random and recommends that person â€“ looking at today's stats, it seems that this is probably how I'm going to lose most of my traffic from now on.
To make this process even simpler, I added a little area to the site's CMS which lets me add people to the database â€“ just adding a person's twitter name and hitting a big friendly button grabs all their relevant details from Twitter, prepopulating the form ready for me to come up with a recommendation worthy of the person. Tellingly, the description usually takes me quite a lot longer than it did to add this whole set of functionality.
The new hotness
I also took the opportunity to rewrite pretty much everything â€“ frontend to backend â€“ from scratch. Although the site's markup gets refreshed with each design, it's not always guaranteed a total overhaul, and much of the PHP in the CMS harks back to my first forays with server-side development. To put it bluntly, the cruft was often the best bit.
The new layout / design evolved almost entirely by accident â€“ originally just a single page with bare markup which I was using to implement the new comment functionality, I kept tweaking the strictly-development stylesheet until it started to look functional, then elegant, and finally better than my previous design. While the previous layout was technically HTML5, this was mainly a doctype-based distinction; the refresh gave me a chance to create a virtually div-free document from the ground up.
The new design also fixes a lot of problems I had with the previous design â€“ I've cut right back on the colour, got rid of all the drop shadows, and been extremely sparing with border-radius and the like. At the time when I created version three, these were only recently available and exciting â€“ this layout is a far more sober and considered application of the medium.
Finally, this layout also adds responsive design, something the previous iteration was sorely lacking (it was particularly terrible on the iPad, which to be fair wasn't launched until shorty after I designed it). A flexible grid means that the new layout switches between three-, two-, and single-column versions according to the available screen real-estate, making it a much more mobile-friendly proposition. Although this does technically use media queries to load a second stylesheet for narrow screen widths, most of the heavy lifting is actually handled by the flexible grid itself â€“ narrow.css simply edits the column widths and spacing slightly for single-column layouts.
For my next trick...
It was certainly nice to get stuck back into some backend stuff for a while, as my day job mainly involves design and frontend development. It's likely that I'll continue to tinker over the next couple of months, although my real hope is that the redesign will make me fall back in love with the blog â€“ like many, this site has pretty much withered thanks to me using Twitter for so much of my output, but I would like to write a bit more long form stuff again.
Thank you for reading my spiel, and I hope you like the new look â€“ get following some of those people to the right, they're a lot more interesting than what you just read!