Renaissance Nerd

Photo Stream, Dropbox, Hazel, and Automatic Backups

Wed, 30 May 2012 19:39:02 -0700

This article over at MacWorld gave me an idea: would it be possible to automatically back up my Photo Stream pictures to Dropbox without ever having to open iPhoto.

The answer is yes; you’ll need a little help from Hazel to do it, though.

This rest of this article assumes that you have Dropbox and Hazel installed.

Start by creating two folders in your Dropbox account, one named something like Photo Stream and one named iOS Screenshots. We’re going to set up two rules to filter screenshots into their own folder.

Next, we need to make navigating to your Library folder easier, so open a new Finder window, hold down Option, click the Go menu at the top of the screen, and choose Library. Switch to column view, then drag the Library folder to your Favorites list.

Open Hazel, and click the + button at the bottom of the Folders list on the left. Select Library from the Favorites list on the left side of the file selection pane, then navigate to Application Support, then iLifeAssetManagement, then assets, then sub. Click the Open button.

Create a new Hazel rule called Find subfolders. You only have to set one condition: Kind is Folder. Next, set the action to Run rules on folder contents. It should look like this:

Next, create a rule called Backup photos. This one requires two conditions: Kind is Image, and Extension is jpg. Set the action to Copy to the Photo Stream folder you created in your Dropbox. Click the Options button, and check Do not copy if a duplicate. When you’re done, it should look like this:

Click OK to save your rule.

Finally, control-click the Backup photos rule and choose Duplicate. Name this new rule Backup screenshots. Change the second condition to Extension is png, and change the action at the bottom so that the Copy points to the iOS Screenshots folder you created in your Dropbox. When you’re done, it should look like this:

Now, open your folders and watch as your pictures get copied over. Then, take out your iPhone or iPad and snap a picture, wait a few seconds, et voilà, a copy of the picture appears in the folder and is synced to your Dropbox account.

Don’t forget to remove the Library folder from your list of Finder favorites. You can do so by holding the Command key while dragging the folder out of the list.

Writing This Blog With tmux

Sun, 20 May 2012 00:28:46 -0700

Writing This Blog With tmux:

Not this blog. My other blog. Or, I guess, my other other blog. I have three now. Because I’m not busy enough. Obviously.

If you have any interest in using Octopress, this post is worth your attention.

A Thought Experiment: Pixel Art

Thu, 17 May 2012 00:42:54 -0700

We know we can draw a 45-pixel × 45-pixel square using an empty div and some CSS.

.square {
    background-color: #fff;
    border: 1px solid #ccc;
    height: 45px;
    width: 45px;
}

And we know that we can make the square’s background color red using jQuery.

$('.square').css('background-color', 'red');

If we take this snippet a bit further, we can alter the square’s background color when it’s clicked.

$('.square').click(function() {
  $(this).css('background-color', 'red');
});

But what if we want to turn it off again—that is, what if we want the background of the square to be white if it’s clicked while the background is red?

$('.square').click(function() {
  var newBackground = ($(this).css('background-color') == 'rgb(255,255,255)') ? 'white' : 'red';
  $(this).css('background-color', newBackground);
});

Now we can toggle the square’s color like a switch. Which is utterly useless. Unless you float the square, duplicate it 15 times, wrap all 16 in a row, then duplicate the row 11 times. Now we have a 16 × 12 grid of squares that can be toggled on an off. We’ve created a pixel art canvas.

In this demo, I’ve taken the idea beyond just the basic grid of squares that can be toggled and added a rudimentary color palette. Each palette box uses an HTML5 data attribute—in this case, data-color—to hold the color of the box, which is set via JavaScript. Finally, using a conditional to check for the presence of on-touch handlers, I optimized the whole thing for use on the iPad, which was the ultimate goal of this experiment.

if ('ontouchstart' in document.documentElement) {
  // Handle touch events
  ...
}

When I started out, I didn’t know that onClick events suffer from a delay of a couple hundred milliseconds on touchscreen devices, which causes interactions to feel very sluggish if you rely on jQuery’s click listeners. You can see here how I wired up touch events in favor of click events when the page is loaded on a touch-enabled device. The JavaScript isn’t pretty, but it’ll suffice for a project that I spent about an hour on.

There was no real purpose to this, no ultimate goal. I just had the idea in the shower and wondered if I could do a quick prototype.

Mapping JSON Object Arrays With CoffeeScript

Thu, 29 Mar 2012 11:40:00 -0700

This might be a well-known technique for some of you, but it was new to me when I stumbled onto it last week.

I have a Rails app that’s grabbing some JSON data via AJAX and using the resulting data to display a chart using Highcharts. If you haven’t seen it, Highcharts is a JavaScript library for displaying gorgeous, interactive graphs and charts.

Without getting into the full implementation, when you create a line graph, you have to pass an array of numbers to Highcharts, like this:

series: [{
  name: 'Tokyo',
  data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}

Suppose you get a JSON object back that contains an array of numbers called data. You could just pass it in to Highcharts, right?

series: [{
  name: 'Tokyo',
  data: json['data']
}

Nope. The gotcha is that the values returned in the data array are actually strings, not numbers, so Highcharts will choke if you don’t convert the data from strings to numbers. This is pretty easy. Iterate over the array, typecast the values, store them in a new array, right?

var numerical_data = []
$.each(json['data'], function(k, v) {
  numerical_data[k] = (Number) v;
}

It works, but that’s an ugly approach. Suppose you’re drawing multiple lines, each of which requires its own array of numbers. Doing the conversion via iteration ends up looking really, really gross, and you’ll likely end up duplicating a lot of code.

CoffeeScript’s .map function to the rescue:

series: [
  name: "Cu"
  data: json['data'].map (s) -> (Number) s
,

The map function handles the processing of each item in the array for you and returns a new array with the modified values. If you’re familiar with Ruby, this should look pretty familiar. It’s super-clean, it sticks with the DRY principle, and it’s very easy to read.

Installing MacVim with homebrew and Xcode 4.3

Tue, 28 Feb 2012 21:03:56 -0800

If you’ve tried running brew install macvim since upgrading to Xcode 4.3, you might have run into this error:

    Error: No developer directory found at /Developer

The error message is obvious; the solution isn’t. Try this:

    $> sudo xcode-select -switch /Applications/Xcode.app/Contents/Developer
    [enter admin password]
    $> brew install macvim

You’ll only run into this if you deleted the Developer directory after installing Xcode 4.3.

You can find more info on Google Code.

RSS Feed Changes

Tue, 21 Feb 2012 10:20:30 -0800

Hi there. If you’re an RSS subscriber (all 14 of you), please take a second to update your subscription. I was using Feedburner, but I ditched it. Here’s a link to the new RSS feed:

http://renaissancenerd.net/rss

Thanks!

Tumblr Architecture - 15 Billion Page Views a Month and Harder to Scale than Twitter

Mon, 13 Feb 2012 15:21:47 -0800

Tumblr Architecture - 15 Billion Page Views a Month and Harder to Scale than Twitter:

(via High Scalability)

The amount of data Tumblr pushes around in a single day is absolutely harrowing.

Using Rake, Pow, and TextExpander for Project Templates

Thu, 09 Feb 2012 22:53:00 -0800

TL;DR: I made a Rakefile to automate the creation of a project template that pulls fresh copies of either Twitter Bootstrap or the HTML5 Boilerplate from GitHub. I serve the template’s HTML with Pow, and I use TextExpander fills to generate boilerplate snippets.

Over the years, I’ve put together a number of project templates, each containing its own set of default HTML, CSS, and JavaScript that I would—invariably—abandon. Each would start off with the best intentions, but I’d fail to routinely update them. They’d grow stale, my workflow would change, and I’d start again.

This cycle repeated itself again recently as I started to move back to Web development in my spare time. Wanting to try out some responsive design techniques, I grabbed a copy of the HTML5 Boilerplate project, tweaked it, added some media queries, and posted it to GitHub. I deleted the repository yesterday because I realized that keeping my template in sync with the HTML5 Boilerplate’s releases would be tedious. Thinking about the problem differently, I turned to Rake, and I’m pretty happy with the results.

Workflow

These days, when I start a project, shortly after some sketching but before I even think about what back-end technology will be powering the site, I focus on building the interface using plain old HTML. My default directory structure looks like this:

I like to use CoffeeScript with Jitter, so I include directories named /coffee and /js. Everything else is pretty straight-forward: /css for CSS, /images for images, and a /resources directory for storing things like PSD files, icon sets, and other project-specific clutter. Finally, the /docs directory is for annotated CoffeeScript documentation that’s generated with Docco.

I create an empty file called application.coffee in the /coffee directory, which ends up compiled to application.js in the /js directory. I also include an empty application.css file in the /css directory. Finally, I toss in an empty index.html file.

If I use a framework like the HTML5 Boilerplate project or Twitter Bootstrap, I download the package and place the project’s various assets into the appropriate directories. The HTML5 Boilerplate’s index.html becomes the default index file when I use that project.

With all of the files in place, I initialize an empty Git repository and start cranking out code. But there’s an easier way.

Rake

This file handles all of the above for me by providing three command-line options.

$> rake newblank

This creates the blank project directory structure and a handful of empty files as outlined in the Workflow section above (complete with a Git repository).

$> rake newhtml5

This clones a copy of the HTML5 Boilerplate project, places its files in the proper directories, and creates a new Git repository.

$> rake newtwitter

This clones a copy of the Twitter Bootstrap project, moves the JavaScript and image assets into the proper directories, compiles the .less files into a single CSS file, runs a quick find-and-replace on the compiled CSS to change references to ../img into ../images because I’m tightly wound and like to name my images directory /images, and creates a new Git repository.

To use it, create a directory for your project and place the contents of this Gist into a file in that directory. Name the file Rakefile. Then, cd into your project’s directory and run one of the above commands.

Advantages

I don’t have to keep my template in sync with changes to projects I use (e.g., the HTML5 Boilerplate project). I don’t have to keep a blank project template full of empty files and directories lying around that will grow stale and require maintenance. I always get the latest HTML5 Boilerplate and Bootstrap code when starting a new project. Everything’s boiled down to one file that’s far easier to maintain and tweak as my needs change. And if a new set of fancy boilerplate comes out, all I have to do is write a new Rake task to add it to my arsenal.

Pow

You can use Pow to serve the flat HTML files you create using any of the templates that are generated by this Rakefile.

Create a directory for your project, and then create a public directory inside your new project’s directory. Place a copy of the Rakefile in the public directory. It should look like this:

cd into the public directory, and run one of the commands to generate the template structure. Then—just like you would with any other Pow-based project—create a link to your project’s directory (not the public directory, but the root project directory) in ~/.pow. For more info on using Pow, see the user’s manual.

Yes, you could just open your plain old HTML files in a browser without having Pow serve them, but using Pow lets you avoid addressing your assets (images, JS, CSS) with relative paths. You won’t have to go through your code and change all the relative paths to full paths once you’re ready to turn your templates into production code.

TextExpander

I love TextExpander, and I use it to fill a gap that’s left by generating blank files with no template code in them. For example, I like my default application.coffee file to include the following header:

#      Project Name v1.0
#      (c) 2012 Company Name
#      http://projecturl.com

# Load the application once the DOM is ready using a `jQuery.ready` shortcut.
$ ->

This block turns into a very pretty header when I run Docco to create my documentation, and it sets the application up to work with jQuery. I created a TextExpander fill to generate this header. The fill, which is triggered when I type coffeehead, prompts me to enter the project name, version, company name, and project URL. For more info on how fills work, see this video by the venerable Merlin Mann.

I have a similar fill that creates the header for my CSS files, which looks like this:

/*
      Project Name v1.0
      (c) 2012 Company Name
      http://projecturl.com
*/


/*  Header
--------------------------------------------- */

This one’s triggered when I type csshead. It’s very similar to the CoffeeScript header. Another fill creates CSS section breaks by prompting me for the name of the section when I type csssec:

/*  Section
--------------------------------------------- */

If you have TextExpander and want to try these snippets for yourself, you can download a copy of them here.

Bonus: Docco

Don’t delete the Rakefile when you’re done generating a new project! It provides a task for creating annotated documentation for your CoffeeScript:

$> rake doc

Run that command, and then check the contents of the /docs directory.

Requirements

I’ll be honest; I lost track of all of the software that’s required to make this work. You’ll need Ruby and Rake and Git to get started. To compile the .less files that come with the Twitter Bootstrap project, you’ll need Node.js and NPM. Once you have NPM installed, you’ll need to install the less package. You can also install CoffeeScript and Docco with NPM; Docco also recommends installing Pygments for syntax highlighting. If I missed any other requirements, please let me know in the comments.

Bridging the App Gap

Wed, 08 Feb 2012 10:02:44 -0800

Bridging the App Gap:

Luke Wroblewski’s notes from Marco Arment’s An Event Apart talk.

Differences Between jQuery .bind() vs .live() vs .delegate() vs .on()

Wed, 08 Feb 2012 00:27:40 -0800

Differences Between jQuery .bind() vs .live() vs .delegate() vs .on():

(via Web Dev .NET)

If you’ve looked at jQuery’s documentation lately, you might have noticed that .live() is on the chopping block and will soon be deprecated. This article’s a good guide to understanding why and what will replace it.

Ruby Trick Shots: A Video of 24 Ruby Tips and Tricks

Tue, 07 Feb 2012 22:19:36 -0800

Ruby Trick Shots: A Video of 24 Ruby Tips and Tricks:

Nice little screencast by Peter Cooper of The Ruby Show fame. Also, get more Ruby tricks by following @rubytrickshots on Twitter.

(via Adventure - mlkshk)

Tue, 31 Jan 2012 14:05:13 -0800

(via Adventure - mlkshk)

Tutorial: Rails 3.2 with Ruby 1.9.3 on Heroku

Tue, 31 Jan 2012 11:07:13 -0800

Tutorial: Rails 3.2 with Ruby 1.9.3 on Heroku:

This is a very thorough explanation of how to get a new Rails app running on Heroku (including how to use a custom domain). If you’re interested in doing such a thing, start here.

A Beginners Guide to HTML & CSS

Tue, 31 Jan 2012 10:46:47 -0800

A Beginners Guide to HTML & CSS:

Just getting started with HTML and CSS? Go here.

"Over time, software builds up legacy. The old technology is baked in, and the roots of the product..."

Tue, 24 Jan 2012 10:00:28 -0800

“Over time, software builds up legacy. The old technology is baked in, and the roots of the product are so knotted that simply unwinding them becomes a massive undertaking. Think about trying to uproot a 250-year-old oak tree versus a two-year-old one.”

- Jason Fried

Or, put another way:

“The bones of your software are all the bad decisions you made early on ossified over time. Sometimes you have to break them to move on.” - Zachery Bir

JavaScript pattern and antipattern collection

Wed, 18 Jan 2012 14:45:37 -0800

JavaScript pattern and antipattern collection:

Hard to believe this is free.

Standard CoffeeScript Procedure

Sun, 08 Jan 2012 19:42:45 -0800

Here’s a quick one that I’ve really started to like. I’ve taken to setting up new projects with js and coffee directories in the root of the project. Then, I use Jitter to watch the coffee directory for changes. It automatically recompiles the JavaScript files every time I save my changes.

Jitter takes two arguments: your CoffeeScript directory, and your compiled JavaScript directory, like this:

$> jitter coffee js

So, when I start working, I run that command in the root directory of the project, and Jitter goes to work.

You can make it even simpler by setting up a Bash alias. Add this to your .bashrc or .bash_profile:

alias jjitter='jitter coffee js'

Now, when you start working, just enter jjitter, and you’re off to the races.

Profiling CSS for fun and profit. Optimization notes.

Thu, 05 Jan 2012 10:13:31 -0800

Profiling CSS for fun and profit. Optimization notes.:

(via Perfection Kills)

Eye-opening and incredibly thorough. The news about border-radius bums me out; I love that property.

"If I wrote a post saying “Don’t pass arguments to methods, just promote your data to a..."

Fri, 30 Dec 2011 09:50:25 -0800

“If I wrote a post saying “Don’t pass arguments to methods, just promote your data to a global” I’d be crucified. Yet we do the same thing (albeit on a smaller scale) every time we write a Rails application.”

- ActiveRecord (and Rails) Considered Harmful - Literate Programming

This is something that I’ve been actively ignoring over the years, but it secretly bothered me.

I’ve posted a couple of articles recently that were critical of some of the things I enjoy using, including CoffeeScript and Rails. This isn’t an attempt to troll visitors or start arguments. It’s more an attempt to encourage the 3 people who read this site to think about tools differently. Always question your tools. Hardware, software, whatever.

"From a front-end development perspective, the mobile first approach also requires the default CSS..."

Thu, 22 Dec 2011 12:23:44 -0800

“From a front-end development perspective, the mobile first approach also requires the default CSS rules go into the main style.css sheet and that we progressively enhance layout and further rules for larger screens using min-width: Media Queries.”

- Tom Milway - How To Build a Modern Website in 2011

If you’ve been looking for a succinct, plain-English explanation of how responsive design works, here it is.