semiBad

semiBad version four: more old school than an old school

semiBad version four

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.

semiBad version four – commenting

Follow *day

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.

semiBad version four – follow recommedation CMS

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!

Comments

  1. Kristian Lunde

    Nice site mate. Good idea with the "Follow *day" section, I couldn't agree more with your thoughts about FollowFridays.

  2. Kathryn Warwick

    I had to look up what cruft means. At first I thought you had misspelt crust (i.e. it was some sort of pie metaphor - your design, the crust, was much better than the filling, back end.) but now I have learned a new word. Thanks semibad!

  3. James Rutherford

    Great redesign- clear and functionally well considered.

    A little egocentric, but I've also mused over the division of my "solid gold nuggets" [*1] of information between blog and Twitter streams. The solution that appeals is a short hashtag to signal that a Twitter message should get auto-spooned into the blog as a tiny post (or daily aggregation).

    [*1] YMMV

    I've got something a bit like this at creativenucleus.com - which records all my Tweets into a database and promotes those with #fp to the front page. It's not as sharply integrated as I'd like, though.

  4. Joe Tidmarsh

    Very slick, Mr. Semibad. Now, where is this pie that @kathryn83 speaks of?

  5. Gavin Logan

    I heartily endorse this product or service!

  6. Andi Farr

    Thanks for all the kind words guys!

    @James Yeah, a bit more Twitter integration is something that I've thought about a few times – my gut reaction is not to cross-post between any two services, as these posts always end up feeling a little bit out of context to me. The main thing that I've definitely lost from the blog is the 'links' section – I now tend to pass on interesting links on Twitter, where the 140 character limit pretty much guarantees I'll write 'OMG DOODZ THIS IS COOL:' rather than a more considered recommendation.

    That said, Jeff Croft (http://jeffcroft.com/) has always done a decent job of presenting material from different sources in blog format. Being able to select specific tweets to archive as 'permanent', as you say, might be the way forward.

  7. Julia Eckel

    Andi, this redesign is awesome. I really love the minimalistic, yet not too simple style. Great job :)

  8. Torunn S Skrogstad

    This logging in with Twitter is very fancy indeed!

Leave a comment

Comments on semiBad require you to log in with your Twitter account – it really only takes a couple of seconds! Get logged in, or find out what data we access (short version – pretty much nothing).