✍ My Favorite Mac OS X Apps For Web Development

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

GitHub for Mac (free)

A very nice looking Git client.

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.

PandaBar ($4.99)

An awesome Pandora player.

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

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

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

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

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

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

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(/&/,'&')}\""
     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

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?

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

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?