Tate Johnson

What I aspire to in minimal web design

2009-11-10T00:00:00+10:00

Constantly impressed with what I find in the Sites page on the Jekyll wiki (and my inbox).

Updated 11 Nov 2009

The 100% Easy-2-Read Standard is a fantastic foundation for designing a website. Wishing I read this earlier.

Quotes is a Sinatra application for browsing and submitting IRC quotes

2009-11-02T00:00:00+10:00

Having frequented IRC since 1999, I’ve always been disappointed with existing quote submission applications for their ugliness. Itching to try out Sinatra, Sequel and jQuery I started (re)writing Quotes last coding night.

From the code, to the design and ultimately the user experience; the objective of Quotes was to be simple. I wanted users to receive immediate feedback for any action that’s performed. I want quotes to be so pretty that you’d scroll up and down the page a couple of times.

It has a tiny footprint. There’s only three models, a few actions and a couple of views. Without caching it’s still fast to load on a resource limited environment, such as DreamHost. Sinatra was a perfect match for this tiny project.

Code is on GitHub and you can view a live example of the application. Thanks to #lolbot on irc.freenode.com for the motivation, Ashley Kyd for the concept and Pascal Klein for the initial design.

Simpler deployment for Jekyll using a Rakefile and rsync

2009-10-29T00:00:00+10:00

Earlier I wrote about using Git and its post-receive hooks for deployment. After using this configuration for six months, I’ve concluded that it’s unnecessarily complicated for my requirements. Scott Kyle and Ben Vinegar agree.

Using such a configuration makes perfect sense for projects residing on GitHub. The repository already exists, and it’s a complimentary service that you don’t have to configure.

In future, when someone asks me how they should deploy Jekyll, I will recommend using a Rakefile and rsync.

$ rake deploy

Thanks to Scott Kyle for sharing his Rakefile.

Updated 02 Nov 2009

Wolfgang König brought to my attention that you can exclude files from being copied in the build using the exclude option. I’ve appended this to _config.yml.

exclude: ['Rakefile', 'README.markdown']

Favourite photos from holiday to the United States

2009-10-07T00:00:00+10:00

You can browse the entire United States 2009 collection on Flickr.

A quick comparison of American and Australian slang

2009-10-06T00:00:00+10:00

Even though english is the de facto language of the United States and Australia, I’ve always been interested in the subtle differences of slang between other english speaking countries.

While in the United States, I compiled a list of common words or phrases which were unknown to me, even with exposure to American media.

United States	Australia	In a sentence
Sandwich	Burger	Extra melted cheese on my sandwhich
Grill	Barbecue	Throw a steak on the grill
Pitcher	Jug	I’ll have a pitcher of beer
The check	The bill	Could we have the check for the table?
To-go	Take-away	A smoothie to-go, please
Single	One dollar	Do you have a single?
Elevator	Lift	Elevator doors are closing, quick!

This list does not attempt to be a comprehensive or accurate comparison.

My desktop was minimal before migrating to OS X

2009-09-20T00:00:00+10:00

It’s possible to achieve a minimal Linux desktop, even if you’re unlikely to see one.

GNOME with OpenBox

GNOME with Beryl (Compiz)

Do you really need your processor utilisation, network traffic and weather sitting in your panel? It’s like you’re supporting the minority use case a majority of the time. As an end user, you shouldn’t care how much your processor is being utilised. If you really want to know the weather, take a look out the window.

Panels and task lists are redundant. Looking at the desktop, it’s easy to identify which applications are at your disposal. When in doubt, Beryl supported an exposé-like feature.

Holiday to the United States

2009-09-08T00:00:00+10:00

Three months ago it was spontaneously suggested that two mates ought to travel overseas. Had the suggestion occurred over IRC, it may have looked like this.

<Tate> Hey Jeff, do you want to go to the United States?
<Jeff> Sure.

On the 20th of September, Jeff and I will be travelling to the United States for two weeks starting in Los Angeles, California.

Using a combination of Google, Twitter, Google Maps, Wikipedia and Aardvark we booked hotels, flights and tours.

I’ve put together a map with the cities and national parks we’ll be travelling to.

Observing escalator etiquette

2009-08-15T00:00:00+10:00

When using an escalator in Taiwan, you’re expected to stand on the right unless you intend to pass quickly. It’s a simple concept that everyone is already familiar with from driving (Taiwanese drive on the right). More importantly, observing escalator etiquette results in increased efficiency with large crowds.

Casual commuters remain to one side of the escalator, allowing other commuters to pass without hindrance. Escalator etiquette is win-win.

Since returning from Taiwan I have continued to observe escalator etiquette, even if it hasn’t been adopted in this country. It’s easy, you ought to observe it too.

Don't know C# and love programming? Get on Stack Overflow

2009-08-13T00:00:00+10:00

Ryan Bates on Stack Overflow via Twitter.

I would like to see more Rails developers on http://stackoverflow.com/

Great to see a high profile Rails developer encouraging all Rails developers to start asking and answering questions on Stack Overflow.

It’s a step in the right direction, but not enough. The Stack Overflow community is heavily skewed towards C# development. If you don’t know C# and prefer a less popular language (or set of tools), get involved. You’re the perfect candidate for a new contributor.

I’ve compiled five reasons why you ought to consider my invitation.

Share your knowledge

Your knowledge is invaluable, and only available to you. Make your knowledge available for the benefit of the public. Think about how much easier it would have been had you been able to discover that knowledge earlier.

Build credibility

With each answer you’re building credibility. You’re demonstrating to the public (and potential employers) that you’re an expert. You even receive reputation and badges for asking good questions and providing excellent answers.

Talking about programming is interesting

Programmers love to talk about programming. Stack Overflow is a community of programmers. We care about that specific, technical topic.

Community owned content

Stack Overflow doesn’t own the content, you do. All questions and answers are licenced under a Creative Commons licence and made available via a database dump.

Foster growth in support of your preferred tools

Asking and answering questions about less popular tools is the best technique to foster growth in support of your preferred tools. You’re providing an open and transparent medium for newcomers and veterans alike.

JavaScript Rolling Elements with Prototype and script.aculo.us

2009-07-30T00:00:00+10:00

A recent project at work has provided me with the opportunity to create an animated, rolling list of elements capable of iterating through large collections. The idea was inspired by the rolling table on the GitHub home page (You’ll need to be logged out to view it).

JavaScript Rolling Elements is a small snippet of JavaScript that features:

Continuously animated rolling
No duplicate elements
Scales with large collections
Unobtrusive
Compatible with all modern browsers and IE6

View an example of it in action. The project is hosted on GitHub, after starting life as a Gist.

Stack Overflow is the programming forum I've been looking for

2009-07-26T00:00:00+10:00

Stack Overflow has been hard to miss. If you have ever searched for an obscure programming question in Google, chances are you’ve landed on a question that was posted on Stack Overflow.

Stack Overflow is a questions and answers site strictly for programmers. There’s a large, diverse range of questions from the newbie to the expert programmer. Questions are categorised by tags which makes it incredibly easy to filter questions you are or aren’t interested in.

More importantly, the quality of answers is typically high. It’s not uncommon to find a long, well written answer with links to supplementary resources for a narrow-topic question. In addition, an ingenious reputation system provides users with the credibility, motivation and the tools to maintain high standards. That’s right, tools.

Previously restricted tools become available to users who achieve defined thresholds of reputation, eventually providing them with the capability to moderate questions and answers.

What I like most about Stack Overflow is that the data is licenced under the Creative Commons and is freely available for download by the public. Irrespective of what happens to Stack Overflow, the community owns the data.

Stack Overflow has become my favourite destination as a programming forum, replacing my preference for other forums, IRC and mailing lists. It’s a free service, has a fantastic interface and minimal, unobtrusive ads (It’s only fair, they’re providing a free service).

I’ve got 126 reputation and two badges. It’s not much, but I’m getting there and really enjoying it along the way. If you’re a programmer and love to share your knowledge with others, then I strongly encourage you to join Stack Overflow and contribute.

Apollo 11 source code available

2009-07-22T00:00:00+10:00

Ilya Grigorik pointed out that the source code used in the Apollo 11 mission is now available on Google Code.

Interested to see the software responsible for landing a man on the moon, I browsed the lunar landing guidance equations. I’m not even going to pretend to understand, as I know full well how difficult programming in assembly can be.

Just for comparison I’ve published calculating a factorial in assembly on the Motorola 6800 (80 lines without comments) versus Ruby (3 lines). It really makes me appreciate the abstraction away from the hardware in higher generation languages.

Hats off to the engineers of the 1960’s.

Reset stylesheets are overrated

2009-07-05T00:00:00+10:00

I’ve recently been involved in a project where the designer insisted on using a reset stylesheet.

Reset stylesheets are necessary to eliminate the rendering inconsistencies between browsers by resetting elements to a common baseline.

It is not critical for a website to appear identical between browsers because no one is going to visit the website in multiple browsers. Only the designer will be aware of [any] browser inconsistencies.

Reset stylesheets require significant effort for minimal benefit.

Delivering projects on time and within budget is paramount. Productivity is understanding where to invest time to yield the maximum benefit. The benefit of eliminating rendering inconstancies between browsers is outweighed by the time required to maintain it.

Increased stylesheet complexity. Redefine all the elements which have been reset
Additional external stylesheet. That’s another GET request, right?
Larger file size than what would have been, had a reset stylesheet been avoided

I’ve written thousands of lines of CSS, and have never had the desire to reset an entire stylesheet. In a majority of use cases, browser defaults are satisfactory. Learn to work with them to your advantage, rather than against them.

Deploying a rails application to DreamHost

2009-07-04T00:00:00+10:00

Earlier this week I successfully deployed a rails 2.3.2 application to DreamHost. Deployment is quick and easy if you know what to do.

Enable Phusion Passenger in the DreamHost panel
Point the path to your rails public directory
Freeze rails and your application’s gem dependencies
Restart Passenger with $ touch ~/path/to/rails/app/tmp/restart.txt

On first request it’s slow to load as Passenger launches a Ruby instance. With some page caching, you’ll be able to negate this.

I wouldn’t usually recommend deploying to a shared hosting environment. However, this application was for fun, with a tiny audience and performance is not a constraint.

Quantifying what's better about Mac OS X

2009-06-21T00:00:00+10:00

I’m one of two Mac users out of a group of mates who are mostly Linux and Windows users. Time and time again, my choice of platform is on trial. Common arguments include “Apple hardware is expensive”, “It’s proprietary and locked down” and “I can do everything I need to”.

Jim Whimpey has thought about quantifying what’s better about Mac OS X. It’s the attention to detail on the littlest of things, a consistent user experience and the only platform which stays out of my way the most.

At work we’re predominantly a Mac environment with no mandated software. Everything just works.

IRB for teaching Ruby interactively

2009-06-21T00:00:00+10:00

As Rubyists, we’re familiar with the IRB for quickly experimenting with language features and new ideas. I was interested to see how this would translate when demonstrating Ruby in an informal teaching environment.

I invited Ashley Kyd and Owen Stickley for some Ruby 101. Ashley is interested in learning rails and Owen is interested in automating system tasks.

We each had our own laptops and a projector. Plugged a laptop in to the projector and asked everyone to start the IRB.

As the teacher, I could demonstrate Ruby’s features while Ashley and Owen followed and continued to experiment themselves. I think this style of interactive learning is more engaging by providing immediate feedback and lowering the barrier to entry.

Even after the initial learning phase, I’m sure that Ashley and Owen will continue to use and appreciate the IRB.

220KM round trip, mountains, dams, crisp air and country roads

2009-05-31T00:00:00+10:00

It’s the first weekend I’ve had no obligations to uni, friends or family. Couldn’t think of a better way to celebrate than a long ride with my old man and his mate.

We started on Brisbane’s southside and followed the Ipswitch motorway. Our route took us over the Wivenhoe Dam wall, past Somerset, through Kilcoy and over Mount Mee with various stops on the way. It was an epic ride, out for a total of seven hours.

With the recent heavy rains, the inland routes are looking spectacular. The dams had attracted a tonne of people interested in water sports and family picnics.

Being low to the ground with no obstructions, riding fast in between giant mountains and feeling the wind against your face is amazingly refreshing.

Jekyll meets DreamHost. Automated deployment for Jekyll with Git

2009-04-29T00:00:00+10:00

It has been just under a month since I launched this blog, and the first thing I promised myself was to automate deployment. If you have an existing GitHub account you might want to consider GitHub Pages, it’s quick and easy.

Why not GitHub Pages?

CNAME support (Eg: tatey.com) is reserved for paid GitHub accounts
No desire for a private repository. We host our repositories in-house at work
Existing DreamHost customer
Excuse to play with Git hooks

How will it work?

I am interested in achieving the same functionality offered by GitHub Pages with DreamHost. That is, a single push automatically generates the site, removing the pain of manually copying files and directories.

We are going to create a bare repository for pushing to. Every time you push, we will use the post-receive hook to execute a Bash script. The Bash script clones the repository with a working directory, executes jekyll and cleans up. Hooks in Git behave like events.

Preparing a Jekyll-friendly environment

Jekyll is not available on DreamHost. You will need to build your own RubyGems and install Jekyll with its dependancies. John Nunemaker has written an excellent guide.

If you are interested in code highlighting, you will also want to install Pygments. Pygments is a Python syntax highlighter that Jekyll uses to parse and wrap your code snippets in the appropriate HTML tags.

$ mkdir ~/lib/python
$ echo 'export PYTHONPATH="$HOME/lib/python:/usr/lib/python2.3"' >> ~/.bash_profile
$ source ~/.bash_profile

Download and build Pygments from source.

$ cd ~/src
$ wget http://pypi.python.org/packages/source/P/Pygments/Pygments-1.0.tar.gz
$ tar -xvzf Pygments-1.0.tar.gz
$ cd Pygments-1.0
$ python setup.py install --home=$HOME

Git it all together

Initialise a bare repository to push to. It is potentially dangerous to push to a remote repository with a working directory.

$ mkdir ~/src/your_git_repo.git
$ cd ~/src/your_git_repo.git
$ git --bare init

Add DreamHost as a remote in your local repository.

$ git remote add dreamhost ssh://user@server.com/home/user/src/your_git_repo.git

Write a Bash script to clone the repository, execute Jekyll and clean up. Jekyll will generate its output in to your publicly accessible directory.

# ~/bin/generate_public_www
#!/bin/bash
GIT_REPO=$HOME/src/your_git_repo.git
TMP_GIT_CLONE=$HOME/tmp/your_git_repo
PUBLIC_WWW=$HOME/var/www/your_site

git clone $GIT_REPO $TMP_GIT_CLONE
jekyll $TMP_GIT_CLONE $PUBLIC_WWW --pygments
rm -Rf $TMP_GIT_CLONE
exit

$ chmod +x ~/bin/generate_public_www

Add the Bash script in the post-receive hook of your bare repository. Hooks are Bash scripts too.

# ~/src/your_git_repo.git/hooks/post-receive
#!/bin/sh
$HOME/bin/generate_public_www
exit

$ chmod +x ~/src/your_git_repo.git/hooks/post-receive

Programmers should be lazy

Congratulations, you’re done! Every time you push to DreamHost, Jekyll will build the site. Cool, huh?!

$ git push dreamhost master

Bonus: You now have a redundant copy of your repository.

Updated 31 May 2009

Jay Williams followed this guide and experienced an annoying problem with the Git post-receive hook. After some trouble-shooting, it appeared that the hook was never executed because the user he was shelling in with didn’t have the access to the compiled binaries in its path.

Copying your .bash_profile to .bashrc should solve the issue for non-login shells.

$ cd ~/
$ cp .bashrc .bashrc.old
$ cp .bash_profile .bashrc

Updated 29 Oct 2009

I no longer recommend using this configuration for deployment. See simpler deployment for Jekyll using a Rakefile and rsync.

Git rebase for linear history

2009-04-23T00:00:00+10:00

Subject: Suggestion to rebase after committing and before pushing
To: Development Team
Date: 20 April 1:54:29 PM

What’s the issue?

Looking at our history, I’ve noticed that there is a lot of “Merge branch ‘master’ of XYZ”. Technically, this is fine but I feel it obscures the important history of the repository. No one cares that there was a merge, and following funky, rainbow lines in GitX is unnecessary effort.

Why does this happen?

Sometimes it’s unavoidable. If you’ve been developing on a separate branch, you’re eventually going to have to merge it in to master. I’m not talking about that. In fact, you’d probably want to know about that merge.

Let’s look at a simplified scenario for a merge we don’t care about.

’X’ and ‘Y’ pull from the repository at 9AM. ‘X’ works on a patch, commits, pulls and pushes to the repository at 9:30AM. ‘Y’ works on a patch, commits, pulls and pushes to the repository at 10AM. Sounds good, right?

Pulling is equivalent to fetching and merging, resulting in “Merge branch ‘master’ of XYZ” and more funky, rainbow lines.

Suggestion

You could stash your changes, pull, pop and push. That’s great until you have about 2 or 3 commits you want to push. Plus, I don’t want to have to think about this.

Enter rebase.

You can rebase your “local/master” branch against “origin/master”. This is not the same as rebasing an already shared branch, because your commits have not been published. You should never rebase something you’ve already pulled down.

Suggested workflow might look something like this.

$ git commit
$ git pull
$ git rebase -i origin/master
$ git push origin master

This has the advantage that you don’t need to execute the last two commands if there is nothing new pulled down from the second command. It also gives you a chance to squash commits into something more meaningful. Sometimes you want to do this, sometimes it’s better to keep them separate. I’ll leave that to you.

Generally this isn’t an issue, but last week we saw a flurry of commits to the repository. Such a process would keep the history nice and linear.

Cheers,
Tatey

PS: I’ve been secretly doing this.

Layouts with Smarty

2009-04-12T00:00:00+10:00

Smarty doesn’t appear to support layouts, an incredibly useful concept for separating reusable markup in views.

Documentation has an example using the {include} tags for including a header and footer template in to each of your views. I think this approach is repetitive and not as flexible as it ought to be.

My expectations:

Single function
Specify view
Specify layout or fallback to default

Fortunately, there is a fetch() function that returns the template output as a string. Taking the earlier example of the header and footer, I wrote a simple wrapper function to do this for me.

<?php
// includes/controllers/base_controller.php
require('Smarty.class.php');

public function __construct()
{
  $this->smarty = new Smarty();
}

public function render_layout($view, $layout = 'application')
{
  echo(
    $this->smarty->fetch('layouts/' . $layout . '/header.tpl') .
    $this->smarty->fetch($view) .
    $this->smarty->fetch('layouts/' . $layout . '/footer.tpl')
  );
}

<?php
// includes/controllers/items_controller.php
public function show()
{
  $this->smarty->assign_by_ref('item', Item::find_by_id($this->params['id']));
  $this->render_layout('items/show');
}

While it’s no where near as nice as layouts in Rails, it is a small amount of effort for greater flexibility in your views with Smarty.

Having a flashback

2009-04-06T00:00:00+10:00

Searching for a mock up in my abandoned design directory, I stumbeld on some interesting images. They were created in Flash, when it was owned by Macromedia and the major release number was 4.

P200

Second family computer. Intel Pentium 200Mhz with a 17” CRT. Memories of Command & Conquer, Team Fortress Classic, mIRC, FrontPage, non-breaking spaces and Internet Explorer 4.0.

The Water Tank

Second or third personal computer. Intel Pentium 4 1.6GHz with water cooling and an 16x2 LCD for displaying system statistics. Memories of Warcraft 3, Counter-Strike, Mandrake Linux, Stylesheet enlightenment, Photoshop 5.0, and Mozilla Phoenix.

Like P200, there was suppose to be a matching display. I drew it, I just can’t find it. I had the intention that the “on” button would boot the computer in to Windows XP.

View a photo of the box in all its glory. Like anyone else interested in PC hardware as a young teenager, you had a powerful computer and a shitty desk, chair and keyboard.

Obligatory hello, world!

2009-04-05T00:00:00+10:00

I’ve spent a good part of today on the seventh iteration of tatey.com.

Design
XHTML/CSS
Jekyllfy
About content
Generate and publish

It’s generated by Jekyll, a blog-aware, static site generator in Ruby. Posts are in Markdown and the source resides on GitHub, never to be lost again! Site conforms to the XHTML 1.0 and CSS 2.1 specifications. All pages are valid and semantic. I’ve only tested in Firefox 3.0.8 and Safari 4b on Mac OS X. If you find an error, please let me know.

Next step is to automate deployment.