Toggle Dropdown

Too Epic Tumblelog

The former iteration of my home page was underwhelming at best. It made abysmal use of Google App Engine’s offerings to the point that my GAE account had been reduced to a free, low-latency static file server (which is by no means a bad thing).

But alas, my bank account balance is running low: I figured I should have a nice place to refer potential freelance clients to. So I took a few days out of my winter break to come up with a new design and get to work creating it. Going into the project, I had a few explicit goals:

1. It had to be purple.
2. It would serve as a lightweight portfolio with screenshots of past work.
3. The underlying content would come from tumblr (that link is not much of a sight to behold for the time being).

Initially, I tried just implementing the site as a tumblr template and loading the rest of the content (twitter, flickr, last.fm, AIM) through JavaScript with some simple $.getJSON calls. After a few days of private use, I decided this method was too unreliable:

• Twitter’s JSON API failed to return the data I asked for about 30% of the time.
• Users with JavaScript disabled would wind up not seeing half the site.
• Tumblr occasionally goes down a few minutes for maintenance, and I’d rather have as much uptime as possible.

So, with these observations in mind, I returned to my former mistress, App Engine, who welcomed me with outstretched arms. I am by no means a proficient Python programmer, but I was able to hack together a passable backend that stores incoming data at regular intervals.

The end result is something that hopefully looks decent and renders reliably. I’m using a ton of experimental CSS, some of which is webkit exclusive for the time being: custom scrollbars and -webkit-transitions come to mind. The redesign should, however, look half decent in most modern browsers. I have not even tried visiting in IE; I’m guessing it won’t be too colorful, seeing as most of the colors are in rgba.

I’m prone to borrow and experiment with ideas unapologetically, but I must give credit where credit is due:

• All the pretty icons come from Glyphish.
• Much inspiration and background-texture theft from Meagan Fisher’s post on 24 ways.
• The heading typeface, League Gothic comes from the League of Movable Type, purveyor of prime open source fonts.
• @font-face embedding was vastly simplified by Font Squirrel.
• jQuery will forever hold a special place in my heart.
• Tumblr might be somewhat to blame for my obsession with faux picture frames.
• The ever helpful Hao Lian ensured that I didn’t make any fatal Python blunders.

I’m sure I’ve overlooked a few, but so it goes. Now, if you’ll humor me, here’s something I’m proud of that I haven’t really seen elsewhere. Despite having a Python-powered backend rendering the initial page, I’ve got my script checking for new content every 30 seconds, so if I happen to be listening to a song or posting a tweet or getting onto AIM when you visit, the page will dynamically update in (almost) real time. Feel free to poke around and critique the source code.

I have a few novel ideas for making good use of the tumblr-powered content. Stick around long enough and I might even get around to realizing them. In the meantime, please send comments, questions, amorous solicitations, and potential freelance website work my way via email.

The recent redesigns of maxvoltar.com and orderedlist.com both feature a design subtlety that I haven’t formerly seen in the wild (omitting webkit.org):

Minute as they may seem, the custom scrollbars are a nice touch, offering the designer that much more control over the viewing experience (provided you’re using Chrome or Safari, of course). I’m guessing we’ll start seeing many more sites donning custom scrollbars as we move into 2010.

If you’re interested in how the effect is achieved, here are the relevant bits of CSS for hiding the default scrollbar (extracted from Maxvoltar’s stylesheet):

// the @media stuff is for viewers on mobile devices
 
html {
    overflow: hidden;
}
 
@media only screen and (max-device-width:480px) {
    html {
        overflow: auto;
    }
}
 
body {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 10px; // could be a different value
    overflow-y: scroll;
    overflow-x: hidden;
}
 
@media only screen and (max-device-width:480px) {
    body {
        position: relative;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        overflow: auto;
    }
}

Beyond that, it’s just a matter of styling the scrollbars to your liking. Check out Ordered List’s style sheet as a starting point.

For whatever reason, in-page scrollbars don’t play nice with some of Safari’s keyboard shortcuts (command up/down, spacebar), but page up/down still function as expected.

I guess I’ll start counting down the days before this becomes as commonplace and abused as rounded corners. The irony of it all is that Internet Explorer was actually the first to implement scrollbar styling. We’re ten years late to the party.

Update: Looks like Ordered List has removed their custom scrollbar for the time being. I think it might be my fault.

Back in February, my mother commissioned me to churn out a redesign for her website to go along with her upcoming book of short stories, set to be released in September. Her former site, also written by myself (back in 2005), was a series of hand-updated html pages. I took this redesign as an opportunity to add some much-needed dynamic content to the site.

Because my mom was a bit intimidated by the prospect of maintaining a conventional blog, I decided to rely on tumblr as the basis for the news section of the site. The prime criterion that led to selecting tumblr over self-hosted lightweight blogging engines, such as Chyrp, was tumblr’s straight-forward dashboard interface. Even my technologically inept mother managed to figure out how to click “Text,” fill out two boxes, and tap “Create Post.”

The rest of the site was hobbled together with jQuery and Simplepie. Simplepie is a goliath of an RSS parser (the single PHP file is a whopping 348 KB), but it was easy to bend to my will for use in a google calender-backed events page. I’m also filtering posts through Smartypants for typographical correctness.

I’ll probably come back to optimize the site further down the line, but for now my client is appeased, and I’m sleepy.

instapaper:

That’s better.

Beautiful. Did you make it yourself?

dailymeh:

So you have a blog. You want people to be able to publically react to what you write. You want debate, or at the very least feedback. What are you going to do? If I were in a pompous mood, I’d call it the Commenting Problem… (Post clipped to conserve space. I suggest reading the whole entry on Simen’s site)

Why not have your like/vapid reblog cake and eat it too? I just implemented some changes to my notes display per your suggestions. My tumblelog is kind of an experimental mess right now, so the design isn’t exactly as thoughtfully executed as I’d like, but I think my current permalink page setup, which allows visitors to toggle the visibility of the less significant notes, is a step in the right direction.

Ok, so this is likely grandpa balls old, but I just noticed how awesome SOFA’s website is. I love it. Their (three month old) write-up on building the site with Django and Google App Engine made me giddy. They know how to get stuff done and get it done beautifully.

My respects.

This is part two. Design is not my forte, but I’m making an effort to understand it better. I appreciate aesthetics as a means of optimizing the end user’s experience. I am continually tweaking and rethinking elements of my current and previous failed theme designs. For this reason, an application that lets me annotate potential alterations and sketch out design revisions is important.

Skitch, surprisingly, does this very well:

It is no substitute for Photoshop, but it doesn’t get in the way of my thoughts.