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.

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.

I try to refrain from pulling content straight from other sites, but I saw this on Daring Fireball today and couldn’t resist. I see this as an evolutionary step in news website presentation. It’s an experience. Try pressing “s” on your keyboard. If I were a heavy reader of the New York Times, I could actually invision myself using the article skimmer over the standard home page. AJAX search implementation wouldn’t hurt.

A few friends and I started a strange tumblelog for recording humorous names for imaginary bands. I spent the evening creating a muxtape ripoff theme for it. I might release it eventually. For now, enjoy.

I was working on a new theme to be named Herald. I’ve decided it doesn’t quite work. Here’s what it looks like currently:

I don’t know. Maybe I’ll get back to it later. Sorry for the lack of updates.

Edit: Link removed.

compatriot:

To install this theme:

1. Download the file here.
2. Copy all of its contents.
3. Login to tumblr. From your Dashboard go to Customize > “Use Custom Theme”
4. Paste the theme into the text box and Save Changes.

That’s it. High five, well done, nice choice. Tell me if you run across any design quirks, and I’ll get right to fixing them. Email’s a nice way to get in touch.

What does this mean? New design time wooooh.

Sorry I couldn’t manage to get the avatar in the header.

I’ve been using NearlyFreeSpeech for domain and web hosting since February, and as far of my needs go, it works perfectly. The idea behind their service is paying based on your actual resource usage, and, going by their rates, this translates to my site’s bill being a couple of dimes a year (not including domain renewal costs). Granted, if you’ve got a high volume, resource intensive site, NFSN probably isn’t the best host to use, but if you’ve got a simple tumblelog setup and just want to be able to host a few images and scripts and have a domain of your own, all accessible from an ultra simple control panel, it’s great.

Check out their surprisingly frank FAQ for more info.

As a followup to this post I’ve updated my pageturn script to work on any part of the site with paginaiton. To do so, I relied on the getElementById method, which made things incredibly simple. It also means that in order to use the script on your site, you’ll need to specify an id for the pagination hyperlinks in your theme. For mine, I used the ids “older” and “newer.”

Check it out: Press the left or right arrow keys on a date, permalink, or main page and watch with delight.

Feel free to use it, either by linking directly to my script or by downloading and hosting it yourself.

Try pressing your right/left arrow key.

I mostly did this for an afternoon’s giggles and to reassure myself that I still kind of know javascript. If you’d like to implement it on your own tumblelog, just grab the script below:

/* 	pageturn.js
	created by Ethan Sherbondy
	originally for use at http://iam.tooepic.com
	October, 2008
	Feel free to modify this as you see fit.
*/

document.onkeyup = KeyCheck;

function PageTurn(a_id) {
	var the_url = document.getElementById(a_id).href;
	window.location = the_url;
}

function KeyCheck(e) {
	var KeyID = (window.event) ? event.keyCode : e.keyCode;

	switch(KeyID) {
		// Replace "older" and "newer" with whatever ids you gave your pagination links.
		case 37:
		PageTurn("older");
		break;

		case 39:
		PageTurn("newer");
		break;
	}
}