jQuery Masonry

Thursday, 11 March 2010

jQuery Masonry:

Masonry is a layout plugin for jQuery. Think of it as the flip side of CSS floats. Whereas floating arranges elements horizontally then vertically, Masonry arranges elements vertically then horizontally according to a grid. The result minimizes vertical gaps between elements of varying height, just like a mason fitting stones in a wall.

Came across this for the first time today. Reminds me a lot of the old Grid-a-licious WordPress theme. Also, it's hosted on GitHub so you can grab it there too.

html5media: JavaScript That Enables 'Video' Tag For All Major Browsers

Thursday, 11 March 2010


HTML5 video tags make embedding videos into documents as easy as embedding an image. All it takes is a single <video> tag. Unfortunately, not all browsers natively support HTML5 video tags.

… and that's where this clever little stop-gap script comes in. It replaces the video tag with a Flash Player if the video tag is not supported natively in the current browser.

Daily Deeds: The Other Side of "Getting Things Done"

Tuesday, 09 March 2010

For me, apps like Omni Focus or Things — although great at managing tasks — don't give you a complete picture of the things that need to get done. I'm talking about things that you'd like to do, maybe even every day, but that maybe don't fit into a particular project or "Area of Responsibility". Things that guide you to a bigger picture goal and remind you that checking off tasks is not the be-all end-all of your life or career.

As is often the case, Rands nails it in this article from 2008:

The curse of any effective task management system is that you get really good at capturing, prioritizing, and executing tasks. To the point that you start to believe that merely completing a task is helping your career. After a solid decade of rampant task management, I realized I needed to augment tasks with a system that would strategically guide and remind me that my job was not to do things, but to remember the interesting words in my title: manager, engineering, and products. That’s what I do.

What I needed was a guiding force behind these tasks, a way to remind me that I was pushing towards a goal and defining and refining a strategy.

He calls this a "Trickle List" and I highly recommend you read the entire article for a clearer picture of what exactly it is.


The problem, for me, with a Trickle List was just that I'd forget to mark stuff off since my list wouldn't be with me all the time and having to build the list every day (on paper!) becomes a chore. Just yesterday an iPhone app was released that aims to fill this gap digitally. It's called Daily Deeds and it has a super simple, clean and usable interface.

I still use Things as my task manager, but Daily Deeds seems to fit the bill as a Trickle List replacement very nicely. It's a great (albeit simplistic) app that allows you to set daily "habits" that you can check off as you do them. Having it on your iPhone means that you have your list with you all the time and adding new habits can be done right away. (By the way, I love that they chose to call them habits since essentially that's what I'm trying to form by using this app.)

At first I thought that I might want to see finer grained control over the time-frame for habits. Say, I only need to do something once a week, or once a month. After giving it some thought though, I'm inclined to think that those tasks should stay in my task manager as recurring tasks. Daily Deeds is better suited for just that: things you'd like to try to do each day.

One thing I would like added is the ability to see some stats about my habits. On average, how often have I watered the plants? There's a nice calendar view that helps in this regard, but having some cold-hard stats would help define the things I really need to work on.

Filtering out Foursquare and Gowalla Tweets with Tweetie for Mac

Thursday, 04 March 2010

Gowalla and Foursquare tweets are annoying. If you're using Tweetie for Mac, you can add a list of "filter terms" that remove matching tweets from your stream.

Nathan Smith posted a Gist with a terminal command that will filter out Foursquare and Gowalla Tweets:

defaults write com.atebits.tweetie-mac filterTerms -array "@gowalla" "http://gowal.la" "@foursquare" "http://4sq.com"

It's basically doing a string match for tweets that contain the above terms and excluding them from your stream. Really though, you can add any string of text to be matched and it'll get filtered out just as well. There's more info (and a few more examples) at the official Atebits Posterous.

Using iPhone Apps to Curb Email Based Notifications

Sunday, 21 February 2010

I get a lot of email. Most of it — since its managed to get past my barrage of server side and client side spam filters — is actually relevant in some form or another. The problem is that relevancy depends on context. Do I want to know that I have a new follower on twitter equally as much as I want to read an urgent email from my boss or a family member? Probably not.

I do my best to sift through the noise, but the best way to get to the signal is just to cut out the noise as much as possible in the first place. Social media presents an interesting challenge. Sites like Twitter and Facebook are constantly vying for our attention and unfortunately, using email as a medium to do it.

One solution that has been working well for me is using iPhone apps as replacements for email notifications from these services. I find that a push notification to my device is much less invasive than an email and there are a number of cleverly crafted iPhone apps that make use of push notifications and simple "dashboard-style" overviews which make it easy to keep from resorting to email.

Here's a quick list of services who's notifications I've turned off and the corresponding iPhone apps I'm using instead:



  1. New Follower Emails: Email when someone starts following me
  2. Direct Text Emails: Email when I receive a new direct message

I've replaced new follower emails with BirdBrain. It's probably my favorite app of the bunch. Not only does it tell you who has recently started following you, but it gives you a ton of useful statistics and information for pruning your Twitter social graph. (Including my favorite, the "Nonreciprocal Following" list.) This app also makes it almost comically easy to see who the "I'll follow you if you follow me" people are.

Direct text emails are a perfect candidate for Push notifications. I use Tweet Push which has the added benefit of sending me notifications for @replies. Boxcar is similar app.

It should be noted: You can set up twitter to send your phone SMS messages for direct message notifications but, like email, these come into an "inbox" that has to be viewed and marked as read, which is what I'm trying to avoid. Also, before I finally succumbed to an unlimited text messaging plan, I found that Twitter was eating into a significant amount of my SMS message quota.



  1. Messages
  2. Wall Posts
  3. Friend Requests
  4. Friend Confirmations
  5. Photo Tags
  6. Events

I'm not a big fan of Facebook and hardly use it, but I still want to know if someone's trying to get in touch with me through the service. Sadly, the Facebook iPhone app only covers a handful of the (numerous) notifications they send, but it in practice it does a nice job of cutting down on the email that's sent.



  1. When people comment on your photostream
  2. When your contacts upload new photos or video

This one's a bit of a cheat. In conjunction with the (very decent, but ultimately insufficient) official flickr app I've subscribed to an RSS feed of all comments on my photostream as well as all uploads by my contacts. (The links are in the account page.) Since they're just Google Reader subscriptions, they come up in my iPhone's RSS reader: Byline.

Moving Forward

With just these email notifications turned off I've significantly reduced the noise in my email inbox. I'm constantly looking for new apps to add to my arsenal so if you know of any other iPhone apps that can be used in a similar fashion, let me know in the comments!

Using Capistrano to Deploy to a Media Temple Ruby on Rails GridContainer

Friday, 12 February 2010

What I thought would be quick to set-up nearly took an entire evening. Using Media Temple's Grid Service along with their Ruby on Rails GridContainer seemed straightforward, but they really don't provide much help for what I'd assume most people are using to deploy: Capistrano.

After following the basic Rails container installation steps outlined on their knowledge base, I had to figure out how to use capistrano to deploy. Media Temple does provide a special set of capistrano tasks that work with their service called mt-capistrano, but as far as I can tell, there's no official documentation other than the file itself. The following is a recap of a few of the hurdles I came across.

Deploying With Capistrano

Ok, my grid container is turned on, but how do I add deploy my app to it using capistrano? Contrary to what I've seen in other articles, you do not need to do activate an app in their control panel, but you do have to turn on your rails container. Once the container itself is turned on, you can do everything else from capistrano. This is where mt-capistrano comes it. Media Temple has provided special tasks so you can add a new app directly using capistrano without having to touch the Account Center control panel. Robert Prill's site was an excellent resource for getting everything set up, but I had to add a couple of things to his deploy script:

# I commented out this line since it was causing my deploys to fail
# set(:rake) { "PATH=$PATH:# --snip-- #" }

# necessary for functioning on the (gs)... (my deploys were failing without this)
default_run_options[:pty] = true

# use svn export instead of checkout so we don't include .svn folders
set :deploy_via, :export

After you've set up your deploy.rb file, you can use the mt capistrano tasks to get everything set up. The directions are at the bottom of Robert Prill's deploy file:

The first time you deploy, do it step by step:

cap deploy:setup
cap deploy:update (performs deploy:update_code, deploy:symlink)
cap deploy:migrate
cap mt:add
cap mt:start
cap mt:status
cap mt:generate_htaccess
cap mt:create_link

Going forward:

cap deploy
cap deploy:migrate # if there are database migrations to run

Troubleshooting A 500 Error

Once I had finally successfully deployed, I got a 500 error (the dreaded "We're sorry, but something went wrong." page) and my production.log file was empty. After trying script/console and everything loading fine, I tried script/dbconsole and I got this error message on startup:

Couldn't find database client: sqlite3. Check your $PATH and try again.

I finally realized that this was because my database.yml file was using the default sqlite connection, but sqlite was not installed. The rails app I was using was just a shell with nothing in it so I overlooked the fact that the database would be trying to establish a connection. It's not noted anywhere here by Media Temple but sqlite3 is not installed with the default gems and for some reason manually installing the gem doesn't work:

$ gem install sqlite3-ruby

ERROR:  Error installing sqlite3-ruby:
	sqlite3-ruby requires Ruby version > 1.8.5

So then I tried installing the previous version:

$ gem install sqlite3-ruby -v 1.2.3

Building native extensions.  This could take a while...
ERROR:  Error installing sqlite3-ruby:
	ERROR: Failed to build gem native extension.

	/usr/bin/ruby extconf.rb
	checking for fdatasync() in -lrt... no
	checking for sqlite3.h... no
	*** extconf.rb failed ***
	# --snip-- #

At this point I didn't really feel like figuring out why sqlite was failing to build since I'd be moving to a mysql database eventually anyway, so I just changed my database.yml and added a mysql connection for production and then re-deployed. Everything worked fine.

Extend CSS With Variables, Mixins, Operations and Nested Rules Using LESS

Tuesday, 09 February 2010


LESS extends CSS with: variables, mixins, operations and nested rules.

Best of all, LESS uses existing CSS syntax. This means you can rename your current.css files to .less and they'll just work.

LESS defines its own extension to CSS syntax which then gets compiled into standard CSS. It's a really great idea. And there's a great companion app for Mac OS X called less.app:

This app makes working with LESS a snap by turning it into a graphical interface.

Basically, this standalone app allows you to compile your .less files into CSS with a click of a button. The really nice thing about it though is that it can be set up to monitor changes to your LESS files and then recompile the associated CSS files automatically.

You can also use LESS directly from within Ruby on Rails using the More plugin (which compiles the .less files into .css files automatically).

Update: Konstantin Kudryashov pointed me to a version for Symfony as well. And while we're at it, here's a plugin for Django. It's a little more generic but LESS is one of the compilers it supports.

Great Looking Cross-Browser Forms Using jQuery and Uniform

Monday, 08 February 2010

Just came across a great looking new jQuery plugin called Uniform:

Have you ever wished you could style checkboxes, drop down menus, radio buttons, and file upload inputs? Ever wished you could control the look and feel of your form elements between all browsers?

If so, Uniform is your new best friend.

Uniform masks your standard form controls with custom themed controls. It works in sync with your real form elements to ensure accessibility and compatibility.

You can also submit patches via github (or even new themes!) if you're so inclined.

Using Modernizr to Implement Missing HTML5 Features in Browsers

Friday, 08 January 2010

User sunny on github posted a quick gist snippet that shows how to use the aforelinked Modernizr to implement missing HTML5 features for browsers. Here's an example of how you can pick and choose which HTML5 features you want to implement for the current page:

$(document).ready(function() {

You'll notice in the snippet that these methods are only being executed if the browser does not support a native HTML5 version. For example, here's the definition for autofocus:

autofocus = function() {
    if (!Modernizr.autofocus)

Since Modernizr only detects HTML5 functionality, this is a good example of how a script can be used to fill in the gaps caused by varying browser support.

Trouble With Python Paths and Installing Django From SVN

Thursday, 07 January 2010

Just a quick note for others that might have this problem since I wasn't able to find much information about it. I installed django manually using an svn checkout to /Library/Python/2.6/site-packages/django. On Snow Leopard while trying to get a django site up and running I tried to run manage.py syncdb and I got this error:

ImportError: No module named django.core.management

As it turns out, django — though installed in the right place — wasn't in my PYTHONPATH so it couldn't be loaded. You can test this by changing directories to your django project and issuing this command:


… which starts the python shell. And then from the shell, type:

import sys
print sys.path

You should get some output like this:

Python path screenshot

On Mac OS X version 10.6 (Snow Leopard), django gets installed into /Library/Python/2.6/site-packages/django (which you'll notice is absent from the sys.path output). There are a few ways to fix this. Probably the easiest is to simply add a file named django.pth in /Library/Python/2.6/site-packages/. In this file put the path of the django library:


Save and quit and you should be good to go.

Another approach would be to add django to your PYTHONPATH by adding this to the .profile or .bash_profile file that's in your home directory:

export PYTHONPATH=/Library/Python/2.6/site-packages/django:$PYTHONPATH

Alternatively, if you'd like to potentially use a different version of django for each project you can symlink the django directory you want to use into your project:

ln -s /Library/Python/2.6/site-packages/django ./django

More info can be found here:

  1. Python Installation Docs
  2. Snow Leopard’s Python 2.6 site-packages
  3. How to install Django on Mac OS X 10.6 Snow Leopard