New layout for /dev/random tumbleblog

I don’t know how many of you visit and/or subscribe to my little tumbleblog that I dubbed /dev/random. I started it around March 07 and I have been irregularly updating it since then almost on a daily basis.

The idea is simple – if I see something funny, memorable, thought provoking or generally worth sharing, I tumble it instead of posting it here. At some point in the lifetime of this blog, I got this crazy idea that Terminally Incoherent should have original content rather than be a repository of recycled news from tech sites or a link dump. The length and complexity of my posts has been increasing since then. Tumble blogging is different. I tumble stuff almost exclusively using bookmarklets. I visit a site, I hit a button and boom! Done! No commentary is necessary.

When you read /dev/random you get a nice mix of funny pictures, memes, youtube vids, quotes and useful links. None of the stuff there is original content. It’s all copy pasta, but it is the kind of copy pasta that I like. So if your tastes, interests and sense of humor are similar to mine, you will probably find it a good resource. If you never visited the site, do it now. Just keep mashing the “Random” button for hours of entertainment – the archives go back all the way to March 07 averaging at close to 100 posts per month (give or take a few).

But I wanted to talk about the changes that my little tumble blog underwent this weekend. First, I changed the URL. It used to be terminally-incoherent.tumblr.com but I changed it to random.terminally-incoherent.com. Update your bookmark accordingly! Now it is linked to my domain, and the sub-domain does reflect the nature of the tumbleblog quite well. The old URL should seamlessly forward you to the new address indefinitely, because tumblr is cool like that.

Next, I completely re-designed the layout. And I mean from ground up! I trashed the old theme, and built my own basing it on the Supplementary I found on FreeCSSTemplates.org.

So yeah, I didn’t make it from scratch. You see, this is one of my weaknesses. I can do code, I can do algorithms and etc – but composition and design eludes me. I do understand the fundamentals. I did take art classes in schools and I know a thing or two about color theory, composition, balance and etc. But putting that into practice doesn’t usually work out for me. Most of the stuff I design looks like amateurish shit. One day I will really have to sit down and figure out exactly how to use Photoshop to create all these nice looking gradients, shiny rounded corners and etc.

My whole Photoshop experience boils down to creating simple desktop wallpapers featuring Farscape characters back when I spent most of my days at ultimatefarcape.com (don’t look for it, it’s gone now) and forging paychecks at work that one time, Leonardo De Crapio style. It was totally legit though – just funny. Remind me to blog about that story one day.

Anyway, I suck at Photoshop – and I say it with a sense of shame and failure. It is something that I need to work on. It makes me angry when people literally brag about their little failures. I talk to people, and they are like “Dude, I totally suck at programming” – as if they wanted a prize. Work on it then! Jesus! Of course then there are people who pretend they know everything, but they don’t. So I choose to admit to what I suck at, but I’m not proud of it.

So until I find time to sit down and run myself through enough tutorials and howto’s to grok Photoshop I steal nice layouts form the interwebs. The Supplementary theme gets bonus points because it was not designed to work with Tumblr so it will look semi-original and fresh on a tumbleblog.

Of course that meant that I would have to spend a considerable amount of time shoehorning the design into the Tumblr templating system. This was not a trivial task as it forced me to grok the Tumblr templating tags, and know exactly what the are doing. I messed around with Tumblr layouts before, but I mostly left the tags alone. This time around I had to know exactly what they do, and how to use them.

It turns out they are fairly simple to use. After you figure out how Tumblr structures it’s Post block, you are good. Let me show you how this works. In my layout I had something like this:

{block:Posts}
    
    

  
        {block:Regular}
            
            {block:Title}
                

                    {Title}
                
            {/block:Title}
            
{Body}
        {/block:Regular}

        {block:Photo}
            
            

                
                

                {block:Caption}
                    
{Caption}
                {/block:Caption}
            
        {/block:Photo}
        
    
{/block:Posts}

The {block:Posts} tag sort of defines a generic post. Whatever formatting you include inside of it, will be repeated on every single post. This is where you define your container divs, permalinks, and where you post the code that imports a 3rd party comments system such as Disqus or Haloscan.

Inside of that block, Tumblr defines sub blocks with tags such as {block:Regular} and {block:Photo}. These are conditional, and help you define special formatting rules for each of different post types.

In other words, when you are trying to make an existing template work with Tumblr you should treat the whole Post block as a single div that will contain your post. You can pretty much ignore sub-blocks for the most part, but you probably want to look closer at the Quote and Conversation blocks since they are the ones that usually use some special CSS formatting to make them look nice. You can probably copy and paste that stuff over from your old template.

Note that if you do any copy/pasting from the old template you should keep in mind that a lot of these css entries refer to colors using names defined in meta tags in the header. You can find all these names as a block at the top of your old template. Either include that whole thing in the new template, or go back and edit each of the entries you copied with an appropriate hex color code by hand.

Oh, and you will need to find a place to host the images that are used in your layout. I just dumped them in a directory on the Terminally Incoherent server. Which, will probably produce interesting effects when Dreamhost decides to be flaky again.

All in all it was a worthwhile endeavor. /dev/random is now looking better than ever, and I learned few things that I didn’t know about Tumbleblogs. For example, I didn’t know that they had a search feature. But since the template I was using had a nice search box in the sidebar I went to investigate and it turns out that yes, search does exist. Tumblr added quite a few features since I signed up with them including search, random page fetch, automated archives and tagging. None of these things was supported in my all layout. I included all of them in the new one.

Let me know what you think. If you see any glitches, post a comment here or there and I will try to fix it. If anyone is interested, I released the code and appropriate files here. Its really not much stuff, I probably shouldn’t even bothered creating a Google Code project for it, but oh well.

Also, if you own a Tumbleblog feel free to pimp it out in comments. Just note that my ant-spam feature sometimes gets testy when it sees a lot of URL’s.