Heath's Blog of Stuff

My Favorite Mac OS X Apps For Web Development

2011-09-26T00:00:00-04:00

Text Editors

Sublime Text 2 (currently free; will be $59)

I've been using this as my main text editor (replacing TextMate). It uses TextMate bundles and themes. Sublime runs on Mac OS X, Linux and Windows. Also checkout the Vintage mode if Vim intrigues you

Tincta (free)

A really simple code editor with syntax highlighting.

Graphics/Design

Pixelmator ($29.99)

I love this app. Does almost everything that Photoshop does. It actually will open Photoshop files and does a pretty good (but not perfect) job with them.

Color Picker Pro (free)

A simple, intuitive app that makes sampling any color on your screen super easy.

SeaShore (free)

It is literally a prettied-up, simplified version of GIMP for Mac OS X.

Utilities

Liya (free)

A simple GUI for MySQL, SQLite, and PostgreSQL

Alfed (free)

This is basically a better Spotlight. I have it mapped to Command-Space instead of Spotlight.

Divvy ($13.99)

Manage your windows. Definitely set some global shortcuts. Mine are: ⌥-⌘-f (fullscreen), ⌥-⌘-← (left half of the screen), ⌥-⌘-→ (right half of the screen), ⌥-⌘-↑ (top half of the screen), ⌥-⌘-↓ (bottom half of the screen)

Candy Japan

2011-09-12T00:00:00-04:00

I just ate some weird Japanese candy called takoyaki-ya san. It is supposed to mimic the look of "octopus balls" (a Japanese dish that is decidedly not candy like). The candy, unlike the food on which it is based, is peach/strawberry flavored. Takoyaki-ya san embodies two concepts that seem a bit odd to me: candy that looks like real (non-candy) food and candy that you have to assemble yourself. Overall it was pretty ok. The texture was strange, but the flavor was fine.

I received this candy from CandyJapan.com--a neat little service that will send you some weird Japanese candy twice a month for $24. I don't know how long I'll keep my subscription, but I think I'll get at least a few months of entertainment out it

Some Simple jQuery Plugins

2011-08-27T00:00:00-04:00

Below are some really simple jQuery plugins that I've thrown together over the past couple of years that I've found useful.

Need to scroll to element with animation? Here you go:

  // scroll to animation
  // example usage: $('.scroll_to_here').scrollTo();

  jQuery.fn.scrollTo = function(speed) {
    if(speed === undefined ){
      speed = 'slow';
    }
    $('html,body').animate({scrollTop: this.offset().top},speed);
  };

Ajax polling is pretty easy with jQuery, but it is nice to have reusable function so you don't repeat yourself. The plugin below is based on another simple ajax polling plugin that scales the amount of time between requests. This plugin uses a simple interval with a maximum number of attempts.

  //Simple AJAX Polling jQuery Plugin
  // example usage:
  /* $.ajaxPoll({
          url: "/path",
          type: "GET",
          interval: 250,
          maxAttempts: 25,
          successCondition: function(result) {
              return result != "processing"; 
          },
          success: function(data) {
              $('#container').replaceWith(data);
          }
      });
  */

  jQuery.ajaxPoll = function(user_options){

    var options = {
      interval: 30000,
      maxAttempts: 15
    }
  
    jQuery.extend(options, user_options);
  
    var attempts = 0;

    options.success = function(data, status) {

      if (options.successCondition(data)) {
          if (options.successCallback){
            options.successCallback(data, status);
          }          
          return;
      }
    
      attempts++;

      if (attempts > options.maxAttempts) {
          return;
      }
    
      setTimeout(function() { jQuery.ajax(options) }, options.interval);
    };

    jQuery.ajax(options);
  }

The HTML5 placeholder attribute is awesome, but some browsers (IE and ... maybe just IE?) do not support it. Here is a jQuery plugin that solves that problem by clearing and restoring a field's placeholder value in browsers that don't handle that silliness for you.

  // clears and restores a field's default value
  // example usage (js): $('input.has_default').hasDefaultValue();
  // example usage (html): <input class="has_default" placeholder="This is displayed by default" type="text"/>

  jQuery.fn.hasDefaultValue = function() {
    function supports_input_placeholder() {
      var i = document.createElement('input');
      return 'placeholder' in i;
    }
    if(!supports_input_placeholder()){
      this.each(function(){
        if(this.value === ""){
          this.value = $(this).attr("placeholder")
        }
      });
      this.focus(function(event){
        if(this.value === $(this).attr("placeholder")){
          this.value = ""
        }
      })
      this.blur(function(event){
        if($(this).attr("placeholder") && this.value === ""){
          this.value = $(this).attr("placeholder");
        } 
      })
    }
  };

Roku 2

2011-08-27T00:00:00-04:00

One month ago I got a Roku 2. This was my fourth Roku. I bought a first generation Roku in June 2009 and I loved it. I eventually bought one for every TV in my house. My third box was the second generation Roku 1. It was much smaller than the first gen, had a better remote, and also had a cool little fabric tag on it. The Roku 2 follows in the second gen Roku 1's footsteps by being even smaller, having an even better remote, and still having the little purple tag.

A new feature of the Roku 2 is the ability to play games. The only game that I've tried is the included Angry Birds. It's a good version of the game, and the motion controls are surprisingly good. But, for me, gaming on the Roku is just a nice secondary feature. I think I'll stick to either my Xbox, Playstation or Wii for the majority of game playing.

The best thing about the Roku is the number of 'channels' available. There is one for Netflix, Amazon Instant Video, Hulu, and many more. The first generation boxes seem to have some trouble with channels like Hulu that sport a flashy interface. The Roku 2 doesn't have this problem. This is definitely the best Roku yet.

Minimalist Business Card

2011-08-22T00:00:00-04:00

I came across the business card to the left via Boing Boing. Even though the original post is over one year old, it inspired me to try to design a simple business card (although I suppose it is more of a calling card). Graphic design is one of my weaker skills so I like to practice when I can. My take on the concept is below:

I kind of like it. I ordered twenty from Zazzle for $7 just to see what they look like printed on actual paper.

Bastion

2011-08-21T00:00:00-04:00

I've been playing Bastion for the Xbox 360. I love this game. The art is great, the dynamic narration is unlike anything I've ever seen in a game before, and the music is amazing. The game narrates the main character's actions while you play--a feature that would certainly be annoying if poorly executed. Luckily here it is wonderfully done. The narrator simultaneously injects both humor and a sense of weight to the story. The music is great and evocative. I even bought the soundtrack.

And on top of all that the game is really fun. Every weapon featured in the game is fun, looks cool and is useful. I'm starting my second play through and I'm looking forward to experimenting with some of the weapons that I only briefly used on my first try.

Bastion is one of the best games I've played this year. If you have a 360 download the Bastion demo and give it a try.

Automating New Post Creation in Jekyll

2011-08-14T00:00:00-04:00

After automating deployment, my next goal was to automate creating a new post. After looking around a bit I decided to slightly modify the rake task used by Octopress, a Jekyll based blogging framework.

  # adapted from https://github.com/imathis/octopress/blob/master/Rakefile   
  # usage rake new_post['My New Post'] or rake new_post (defaults to "My New Post")
  desc "Start a new post"
  task :new_post, :title do |t, args|
   args.with_defaults(:title => 'My New Post')
   title = args.title
   filename = "_posts/#{Time.now.strftime('%Y-%m-%d')}-#{title.downcase.gsub(/&/,'and').gsub(/[,'":\?!\(\)\[\]]/,'').gsub(/[\W\.]/, '-').gsub(/-+$/,'')}.html"
   puts "Creating new post: #{filename}"
   open(filename, 'w') do |post|
     system "mkdir -p _posts";
     post.puts "---"
     post.puts "layout: post"
     post.puts "title: \"#{title.gsub(/&/,'&amp;')}\""
     post.puts "date: #{Time.now.strftime('%Y-%m-%d %H:%M')}"
     post.puts "published: false"
     post.puts "---"
   end
  end

Now that the above is in my rakefile, I'm just a rake new_post['This is Awesome'] away from starting a new post.

Deploying a Jekyll Site to Amazon S3

2011-08-14T00:00:00-04:00

Before moving my blog to Amazon S3 I wanted to make sure that I could deploy updates easily. I came across several ways to do it. The easiest method I found was in a blog post by Hendrik Volkmer. It uses a command line tool called s3cmd run through a rake task. s3cmd can be installed using Homebrew on Mac OS X.

 brew install s3cmd

I updated the rake task to use S3's reduced redundancy storage and set an Expires header for my images by using s3cmd's --reduced-redundancy, --exclude, and --add-header options. You can find out about other s3smd options on the s3tools website.

  # based on http://blog.hendrikvolkmer.de/2011/02/25/moving-from-wordpress-on-a-vps-to-jekyll-and-amazon-s3/
  task :default => :deploy

  desc "Deploy to S3"
  task :deploy do
    sh "jekyll"
    sh "s3cmd sync --reduced-redundancy --exclude 'images/*' _site/* s3://www.heathanderson.net"
    sh "s3cmd sync --reduced-redundancy --add-header 'Expires: Thu, 6 Feb 2020 00:00:00 GMT' _site/images/* s3://www.heathanderson.net/images/"
  end

After placing the above in a rakefile all I have to do is run the following to publish a new post or deploy any other changes:

 rake deploy

Why Amazon S3?

2011-08-13T00:00:00-04:00

The main reason for switching to S3 as a host for this site was cost. This blog gets almost no traffic so I anticipate my monthly S3 bill to be less than $1 USD. That is pretty cheap. I was previously using a VPS from Linode. It was $19.99 a month. I love Linode, and next time I need a VPS I will go with them. But it was overkill for this blog. I was simply serving static HTML from Apache.

Using Amazon's Simple Monthly Calculator I estimate that even if this site gets a couple orders of magnitude more popular, I'll still be paying less than $4.00 a month.

I also no longer have to worry about server security and server uptime. Those are two pretty big pluses.

Using Amazon S3 for Hosting

2011-08-13T00:00:00-04:00

Earlier this year Amazon S3 was updated to more easily support hosting static websites. The full documentation is online, but I'll give a quick overview of how it works here.

The first step was to create a bucket. The only way I could get the DNS CNAME record (more on that in a minute) for my domain to actually point to the correct bucket was to name the bucket the same as the domain. I didn't see this mentioned anywhere in the documentation so perhaps I was doing something incorrectly.

The new 'Website' tab what makes hosting a site possibility. All that needs to be done here is click the 'Enable' checkbox and tell S3 what the site's index document (usually index.html) and error document (usually 404.html) are. Also note the endpoint url--it is needed when setting up the DNS.

Another thing that needed to be done is setting the policy so that others can actually view the site. This is found on the properties menu in the S3 management console for your website's bucket and go to the permissions tab. The 'Edit buck policy' button brings up a text area where I pasted the following (found in the documentation):

  {
    "Version": "2008-10-17",
    "Id": "",
    "Statement": [
      {
        "Sid": "PublicReadGetObject",
        "Effect": "Allow",
        "Principal": {
          "AWS": "*"
        },
        "Action": "s3:GetObject",
        "Resource": "arn:aws:s3:::www.heathanderson.net/*"
      }
    ]
  }

After copying my site to the buck and testing the endpoint URL in my browser, I was ready to set up my domain to point to my new host.

Setting up the DNS was easy. All it takes is setting the root domain to forward to the www subdomain, and setting up a CNAME alias for the www subdomain to the endpoint from the 'Website' tab of the Amazon S3 management console.

The only problem that I had was when I initially named my bucket 'blogofheath'. I followed all the steps listed above, but when trying to visit the site from www.heathanderson.net I kept getting an error. Apparently Amazon was to to serve a bucket named 'www.heathanderson.net' and since that bucket didn't exist things were not working. So I created a new bucket (renaming buckets isn't allowed), named it the same as my domain, and went through the same steps. Then it worked. Any ideas?

Simple Search

2011-08-10T00:00:00-04:00

I often come across interesting ideas and tools that I have no current use for but seem like they may be useful someday, so I bookmark them and hope I will recall them when needed. That process is what led to the current implementation of site search located at the bottom of each page on this blog.

At some point I came across an article on the the Google Webmaster Central Blog about enhancing a site's 404 page. I thought it was a pretty cool idea, and I'm using it on this site. The required code is very short:

 <script type="text/javascript">
	var GOOG_FIXURL_LANG = 'en';
	var GOOG_FIXURL_SITE = 'http://www.example.com'
 </script>
 <script type="text/javascript"
	src="http://linkhelp.clients.google.com/tbproxy/lh/wm/fixurl.js">
 </script>

The most interesting thing about it is that it adds a search form. It doesn't actually submit a form. It simply changes the current page's location to "http://www.google.com/search?q=site:www.heathanderson.net" (with the text from the text box appended) using JavaScript. This limits the Google search to (in this case) pages from my site. It is a really simple concept that I would like to think I would of eventually thought of (but probably wouldn't have).

When I needed a search for this site I decided to try this technique. So here it is, a simple search script:

 <script type="text/javascript">
	function simpleSearch(form) {
		var q = window.encodeURIComponent(form["q"].value);
		var url = "http://www.google.com/search?q=site:www.heathanderson.net ";
		url = url + q;window.location = url;
		return false;
	}

 </script>
 
 <noscript>
  You can search this site using <a href="http://www.google.com/search?q=site:www.heathanderson.net">Google</a>.
 </noscript>
 
 <form onsubmit="return simpleSearch(this)" method="get" id="searchForm">
    <input type="text" size="40" name="q" placeholder="Search this site...">
    <input type="submit" value="Search">
 </form>

I could have created the form element in JavaScript and appended it to the page, but that seemed more complicated than necessary. I also could have used an event handler instead of the inline onsubmit attribute, but again I point to the complexity. This way avoids most cross-browser pitfalls, and has the advantage of simplicity. I also added a link to Google inside a noscript tag for people that have JavaScript disabled.

Another Blog Redesign

2011-08-05T00:00:00-04:00

I've decided to change the design of the this blog once again. I've radically simplified the site. The side bar is gone. The comment section is gone. Pretty much all the JavaScript is gone (the exception being the search box at the bottom of each page). The site is now HTML5--no more XHTML.

I am still using Jekyll to generate the HTML files of the site. I love the simplicity of it. I'm hosting the site on Amazon S3. It is fast, cheap and maintenance free.

I hope this new, streamlined version of my site will encourage me to post more. I guess we'll see.

Programming Fonts

2010-09-07T00:00:00-04:00

I recently read a thread on Hacker News that got me thinking about the font I use when programming. I spend about eight hours a day looking at text in Textmate, but I've never really thought about the font. I didn't even know what font I was using. So I decided to do some research.

Apparently I was using Monaco 12pt.

As you can see it is a little largish, but it never really bothered me. I began to search for other fonts to try. The first resource I found was Jeff Atwood's Programming Fonts post. I saw nothing that made me want to switch even temporarily. Next I looked at Top 10 Programming Fonts. I decided I might as well try out a couple of these fonts, even if just for a few minutes. I downloaded Monofur, Inconsolata, and Envy Code R. Envy Code R wasn't mentioned in the list, but it was brought up in the comments and in the Hacker News thread above.

There seems to be no 'best' font. Font preference seems to vary immensely from person to person. I had a hard time deciding if I actually have a preference. After a couple of days of font switching I finally decided on Inconsolata 12pt. I really don't know why. That makes it impossible for me to actually suggest a font to someone else, but I do recommend trying out some different fonts and seeing if one of them makes your time staring at text a little more pleasant.

Here is what my screen looks like now:

One final note on anti aliasing: It seems that I like it (at least with Inconsolata and Monaco), some people do not. As with font choice I suggest trying it out and seeing for yourself.

Welcome to the new blog

2010-09-06T00:00:00-04:00

I've finally had time to move my personal blog off of Wordpress.com. Now it is just static HTML generated by Jekyll. The new address is http://www.heathanderson.net; http://www.blogofheath.com will redirect there.

I hope to posting *something* at least once a month. I know that doesn't sound like a lot, but I've had a blog for about a year and only have four previous posts. That is kind of pathetic. I'm planning on posting more than just code related stuff, so-- if programming doesn't interest you --maybe all hope of you reading future posts isn't lost.

What am I using to generate this site? Here is the list:

I'm hosting this on Linode. Server side is the usual--Apache. I'm deploying using git's post receive hook. It is pretty sweet.

Ruby on Rails Plugin: string_encryption

2009-11-23T00:00:00-05:00

This is a very simple Ruby on Rails plugin that allows easy encryption of strings. For the sake of simplicity there no customization. The only cipher used is 'des-ede3-cbc' (Triple DES using Cipher Block Chaining) . See my post on encrypting/decrypting a string with Ruby for more information. First install the plugin:

Next we need to add an encryption key as the constant @ENV['STRING_ENCRYPTION_KEY']@. To do this just run

  script/generate encryption_key

or you could set

  ENV['STRING_ENCRYPTION_KEY'] = "somekey"

where "somekey" is your key in environment.rb.

Now encryption/decryption is easy.

Encryption:

  "Test".encrypt  #=> "NDFkZTc5NDEyNTg1MzdiZPzBrxZz5aoN%0A"

Decryption:

  "NDFkZTc5NDEyNTg1MzdiZPzBrxZz5aoN%0A".decrypt  #=> "Test"

Code at Github:
http://github.com/handerson/string_encryption

Initialization Vector Length in MRI Ruby versus JRuby

2009-09-27T00:00:00-04:00

When using OpenSSL encryption in standard Ruby, the length of an initialization vector (IV) can apparently be as large as you want it to be as long as it is at least the minimum size. This is odd. This can also cause trouble when switching over to JRuby. JRuby appear to be much pickier about IV length.

This works in MRI but not in JRuby:

  unencrypted_data = "test"

  des = OpenSSL::Cipher::Cipher.new("des-ede3-cbc")
  des.encrypt
  des.key = '0123456789abcdef01234567890'

  des.iv = "ed87acdcca419954edccb736f7dc77a74f5ac8dfe3861c3d5f77248e21592131a5423d63ff91f07956ce1aa386f8359931b5" # 100 characters
  encrypted_data = des.update(unencrypted_data) + des.final

  puts encrypted_data

JRuby gives you this very helpful message:
@ruby_string_encryption.rb:27:in `encrypt': No message available (OpenSSL::Cipher::CipherError)
from ruby_string_encryption.rb:37@

Change the IV to 8 characters and everything works fine.

Update 10/14/2009 The code that I originally posted was incorrect. I have updated it. Also I opened a ticket for this issue.

If you are looking for what size an initialization vector should be check out my post on encrypting a string with Ruby.

Ruby String Encryption

2009-09-25T00:00:00-04:00

Encrypting a string is fairly easy in Ruby. All you need to do is @require 'openssl'@. For this example I am using the 'des-ede3-cbc' (Triple DES using Cipher Block Chaining) cipher. Most--if not all--of the ciphers listed on OpenSSL.org as supported ciphers should work as well.

Triple DES requires a 24-byte key, with Ruby this means a string with 24 characters. We are also required to provide an initialization vector (IV). The IV is usually the same size as the block size of the cipher you are using (so says Wikipedia, so say we all). In our case this means an IV of 64-bits, or 8-bytes, or an 8 character Ruby String. If we randomize our IV and include it with our encrypted string then we can ensure that our encrypted data never looks the same even when we encrypt the same string multiple times.

  require 'openssl'

  KEY = '0123456789abcdef01234567890' # 24 characters

  string = "encrypt this"

  des = OpenSSL::Cipher::Cipher.new("des-ede3-cbc")
  des.encrypt # this tells OpenSSL what mode to operate in, here we want to encrypt data
  des.iv = iv = '01234567' # 8 characters, hard-coded for now

  data = des.update(string) + des.final  
  data = iv + data # this way when we randomize our IV it will be available when we need to decrypt the data

  puts data

This should output some crazy string. This isn't the friendliest way to send data, so lets do something about that. The easiest thing to do is Base 64 encode the data, and maybe URI escape it for good measure.

  # be sure to put the following at the top of your code:
  # require "base64"
  # require 'uri'
  # after 'the puts data' in the snippet above do the following:

  data = Base64.encode64(data)
  data = URI.escape(data, Regexp.new("[^#{URI::PATTERN::UNRESERVED}]"))

  puts data

This should give you the much nicer @MDEyMzQ1Njd6jzSlS73fKSAdqYgRiJie%0A@.

Decryption is similarly easy.

  des = OpenSSL::Cipher::Cipher.new("des-ede3-cbc")
  des.decrypt
  des.key = KEY
  encrypted_data = URI.unescape(data)
  encrypted_data = Base64.decode64(data)
  des.iv =  encrypted_data.slice!(0,8) #This gives us our iv back and removes it from the encrypted data
  
  decrypted = des.update(encrypted_data) + des.final  
    
  puts decrypted

If you are using Rails or have access to ActiveSupport ActiveSupport::SecureRandom is a great way to generate your key and IV. Also be sure to check out ActiveSupport::MessageEncryptor and my string_encryption plugin. I'll probably do a writeup on the string_encryption plugin sometime next week.

Ruby on Rails Plugin: data_migration

2009-09-22T00:00:00-04:00

data_migration allows you to separate data you need to load from your normal database migrations in a minimal way. While developing the new version of our flagship site, Knetwit, we decided we needed to separate our data migrations (initial settings and the like) from our structural migrations. We decided the easiest way to do this was to modify the existing Rails migration to allow for a new data migration. So we did.

Install Plugin

 
  script/plugin install git://github.com/handerson/data_migration.git

Generate Migration

 
  script/generate data_migration BlockedDomains

  exists  db/data
  create  db/data/20090915161242_settings.rb[/sourcecode]

db/data/20090915161242_settings.rb:

 
  class BlockedDomains &lt; ActiveRecord::Migration
    def self.up
    end
  end

Add your data:

 
  def self.up
    BlockedEmailDomain.create(:domain => "mailinator.com")
    BlockedEmailDomain.create(:domain => "spamherelots.com")
    BlockedEmailDomain.create(:domain => "disposeamail.com")
  end

Run Migration

  rake db:data:migrate

 
  ==  BlockedDomains: migrating ===========================================================
  ==  BlockedDomains: migrated (0.0020s) ==================================================

db:data:migrate adds the data migration version number to the 'schema_migrations' table so it will not be ran again.

Code at Github:
http://github.com/handerson/data_migration