The Joy of Hack

Running Out Of Power At The Grand Canyon

2012-03-29T17:41:00-05:00

I’m currently in the last 48 hours of my first ever visit to the Grand Canyon in Arizona. Just hours before setting out to see the Canyon for the first time, I realized that I couldn’t recharge my camera’s battery. I had 80% of a full charge, and four more days of vacation to go. Time to panic?

On Monday I drove through Sedona, Arizona with a fully-charged battery, taking many pictures at each stop. By early evening we reached our hotel in Tusayan, a mile from the entrance to the Grand Canyon National Park. That night I prepared my gadgets for the next day, when we were to visit the Canyon for the first time. I charged my phone, charged my laptop, and tried to charge my camera.

When I placed the camera battery in its charger, the light on the charger came on and immediately turned off. “That’s odd,” I thought. I removed the battery and placed it in again. Again, the light went on momentarily. I tried a third time, but the light never turned on again.

I could have a bad charger, or a bad battery, or both. I put the battery into the camera, and it seemed to work fine. Breathing a sigh of relief I realized that it was only my charger that was broken.

If I rationed my photography, I thought, I might be able to make it through this vacation on the 80% charge that I had left. But I didn’t want to have to worry about taking too many pictures on a once-in-a-lifetime trip, and I would need a new charger anyway. So I ordered a charger and spare battery from Amazon, and they promised to have them delivered on Wednesday.

To Amazon’s credit, they delivered the charger as promised, an hour before we left for a sunset tour. In the 36 hours before I got the new charger one simple decision and one camera setting allowed me to take as many pictures as I normally would without having to worry about running out of juice even if the new charger never came.

Battery Saving Tips

There are two functions of a modern digital camera that need a lot of power. The first is the on-camera flash. Fortunately for me, I had an external flash that had its own power source: four AA batteries. Using the external flash exclusively meant that the camera battery didn’t have to throw all the light required for those backlit shots of the family with a brightly-lit canyon in the background. Also, AA batteries are easy to find at any gas station or general store.

The second function that taxes the camera’s battery is the display on the back - the monitor. On my digital SLR, by default the monitor displays the photograph just taken for 10 seconds. I had already set this to the minimum value of 4 seconds. Minimizing the amount of time that the monitor is in use can greatly improve your battery’s performance.

Morals Of The Story

When you’re on the road for an important photo shoot, keep a spare, fully-charged battery. You may never need to use it, but if you do, you’ll be glad you have it.
Use an external flash if at all possible - It will prolong your battery life and give you the option to try out multiple-flash photographs.
Don’t waste your battery browsing through pictures on your camera if you don’t need to. Minimize the time spent using your monitor to maximize your battery life.
When you’re on vacation with family, when you’re not a Pro shooting for a client, remember that it’s just a camera. The vacation can be fun even if you don’t take any pictures. You’re in a beautiful place with the most important people in your life. Enjoy yourself and make some memories that everyone will share fondly.

Stopping by the Streets on a Snowy Evening

2012-01-20T18:50:58-06:00

Whose streets these are I think I know.
The brave commuters of Chicago-o;
They wonder why I’m standing here
To watch the streets fill up with snow.

The hurried folk must think it queer
To stop without a shelter here
Between the Loop and frozen lake
The darkest evening of the year.

The give my lazy butt a shake
To ask if there is some mistake.
The only other sound’s the sweep
Of easy wind and downy flake.

The Streets are lovely, dark and deep
But I have promises to keep,
And miles to go before I sleep,
And miles to go before I sleep.

With apologies to Robert Frost.

One-legged Medicine Ball Burpees

2012-01-10T07:00:00-06:00

After only being able to do a single one-legged medicine ball burpee last week, I was able to do 12 last night. Here’s the trick:

The X2 Core workout of P90X2 is all about core strength and balance. Having completed P90X twice, I’ve found this workout intimidating but not impossible. The exception is the one-legged medicine ball burpee. The workout calls for a single set of 12, but on the first day I was only able to do 1.

Last night, on the second day of X2 Core I was able to do all 12. It’s not that I got that much better over 7 days. The trick was that I stopped and really watched how the people in the video were doing this exercise. I was doing it wrong. My mistake was that I had the medicine ball at shoulder level when I was doing a one-legged push-up on it. This made it very difficult to balance.

Simply moving the medicine ball ‘down’ to solar-plexus level helped immensely. This way I was more balanced and my arms were perpendicular to the ground, and I was able to keep my elbows in. It was still very difficult, but I was able to hammer out 12 ugly reps. Now that I understand the form I can work on perfecting it and working on 12 slow, solid reps.

So, if you’re doing P90X2 now, and find one-legged med-ball burpees as difficult as I did, have another look at your form and make sure you’re not putting the ball to much in front of you, instead of directly under you.

Tag Clouds With Octopress

2012-01-07T06:00:00-06:00

In this post I’ll show you how I added tag clouds to my Octopress blog.

Before I go any further I want to stress something: While this is a robust solution, it’s not the optimal solution, and not a permanent solution. I don’t know whether it’s particularly elegant, either. It’s not ugly, but it isn’t beautiful. There is at least one project in the works to add tags to Octopress. When that’s pulled into the main Octopress repository, it will probably be the way tag clouds ought to be done. Despite that I came up with my own way to do it for the following reasons:

I don’t know Ruby yet. I’m learning, but I don’t feel comfortable incorporating so much code I don’t understand.
I don’t want to re-invent the wheel in Ruby. Ted Kulp, the author of the commit shown above, seems to have done all the heavy lifting. I look forward to incorporating his changes once they’re in Octopress proper. My solution’s written in Perl, and as far as I’m concerned, my solution is a short-term one.

Having said that, read on to see how I got the tag clouds that you see in this blog working.

There are three parts to this problem:

Displaying a list of tags applied to the current post at the bottom of each post.
Clicking through from a tag name in that list to a tag page that lists all posts with that tag.
Generating and displaying the tag cloud.

Displaying a list of tags

This was pretty easy to get right. I modified source/_layouts/post.html to include a new file called tags.html:

source/_layouts/post.html View in GitHub

...
       {% include post/author.html %}
       {% include post/date.html %}{% if updated %}{{ updated }}{% else %}{{ time }}{% endif %}
       {% include post/categories.html %}
+      {% include post/tags.html %}
     
     {% unless page.sharing == false %}
       {% include post/sharing.html %}
...

I then created source/_includes/post/tags.html which is shown in it’s entirety here:

source/_includes/post/tags.html View in GitHub

 id="tag_list">
    Tags:
     id="tags_ul">
{% for t in page.tags  %}
         href="/tags/{{t}}/">{{t}}

{% endfor %}
    

I chose to display tags as a list so that screen readers and other renderers interpret this correctly as a list of entries, rather than a sentence where each word is an anchor. Finally I added the appropriate CSS to display the tag list properly in the browser.

sass/custom/_styles.css

div#tag_list {
    font-size: 12pt;
}

#tags_ul {
    display: inline;
}

#tags_ul li:last-child:after {
  content: "";
}

#tags_ul li:after {
  content: ", ";
}

#tags_ul li {
    display: inline;
}

Generating the tag files and tag cloud

This was the most involved step of all. I wrote a script called tagify.pl that generates the tag markdown files as well as a file containing the HTML markup for the tag cloud. I started off parsing the markdown files with a YAML parser and gathering the tags from there. But then I realized that for each tag’s page I would have had to know the URL of the posts that are marked with that tag. If I only have access to the markdown then I would have to duplicate Octopress’s code that determines a location for a post in the public directory - the /yyyy/mm/dd/modified-file-name.html logic.

Rather than do that and tightly couple my hack with Octopress’s code I decided to parse the generated HTML instead. Therefore, my script would have to be run after rake generate is called. But! My script has to generate tag files and tag clouds that get pulled into asides in the sidebar! That means that rake generate has to be called after my script as well - a second time. Now do you believe me when I say that this is a temporary solution? It works, but it’s not very efficient.

But you know what? I’m happy with it. I could have waited until I was done learning Ruby, and done learning the Liquid Template Manager, and done learning Octopress’s idioms and then started with this project. I could have waited until Ted Kulp’s changes were pulled into the master Octopress branch. But I know what I want, and I know I can write decent code. It took a few hours, but I was able to get tag clouds done and move on. I’m not emotionally attached to this code and will gladly abandon it when something better comes along. The way I’ve designed it, it will be easy to pull it out - instead of running

rake generate
./tagify.pl
rake generate

I’ll just run

rake generate

Since tagify.pl is rather long (307 lines with comments), I’ll include it in the Appendix at the bottom of this post, and just link to it here.

What’s important to remember is that tagify.pl does 3 things:

It creates a single file called source/_includes/custom/tag_cloud.html that looks like this

source/_includes/custom/tag_cloud.html

 id='tag_cloud'>
 href="/tags/Editors/" title="6 entries" class="tag_10">Editors
 href="/tags/Firefox/" title="2 entries" class="tag_3">Firefox

The title is included for accessibility, and the classes tag_1 through tag_10 are used to display the tags in the appropriate size.

For each tag it creates a file that lists all the posts tagged with that tag in reverse chronological order. For the tag Editors it would create source/tags/Editors/index.markdown
It creates one file called source/tags/index.markdown that includes the tag_cloud.html file in the main article area.

Displaying the tag cloud

To display the tag cloud in the right sidebar I added a default aside in _config.yaml:

default_asides: [asides/recent_posts.html, asides/twitter.html, asides/tag_cloud.html]

I then created the file source/_includes/asides/tag_cloud.html. This file includes the source/_includes/custom/tag_cloud.html file that was generated by tagify.plabove.

source/_includes/asides/tag_cloud.html

    Tags
     class="tag_cloud">
     {% include custom/tag_cloud.html %}
    

I then modified sass/custom/_styles.css to include the css for each of the 10 tag ‘buckets’:

sass/custom/_styles.css

.tag_1 {
    font-weight: 200;
    font-size: 10pt;
}
.tag_2 {
    font-weight: 200;
    font-size: 12pt;
}
...
.tag_10 {
    font-weight: 900;
    font-size: 24pt;
}

Finally, I added a line to source/_includes/custom/navigation.html to link to the main Tags page:

source/_includes/custom/navigation.html View in GitHub

...
    href="/">Home

    href="/about/">About Me

    href="/categories/">Categories

+   href="/tags/">Tags

    href="/blog/archives">Archives

...

Summary

It bears mentioning that you don’t always need to run tagify.pl. You only need to run it if you’ve updated the tags on a post. If you have changed a tag, you must run rake generate before and after running tagify.pl. If you’re just working on edits to a post before publishing it, you don’t need to run tagify.pl every time you want to view your post on your local machihne . rake generate is enough.

I’m glad to say that I was able to get tags to work with Octopress exactly the way I wanted. It was pretty quick, too. It took me longer to write this blog post than to actually do the work. If you like this post, please let me know on Twitter, where I’m @_aijaz_. Thanks.

Appendix - tagify.pl

This is what tagify.pl looks like. I describe the code in the comments within the file.

tabify.pl (tagify.pl) download

#!/usr/bin/perl

use strict;
use warnings;
use File::Find;
use HTML::TreeBuilder;
use Getopt::Long;

my $octopress_root;

my $options_read = GetOptions("dir=s", \$octopress_root);

############################################################
unless ($options_read && $octopress_root) {
    print "\n";
    print "\n";
    print "usage: tagify.pl --dir d\n";
    print "\n";
    print "where d is the root octopress directory\n";
    print "   - the parent of source, public, etc.\n";
    print "\n";
    exit 1;
}

# The tag cloud HTML gets saved into this file.
# This file is included by two others: 
#  a) The file used for the sidebar aside
#  b) The page used to display all tags 
#     (accessible as /tags/index.html)
#
my $custom_file = "$octopress_root/source/_includes".
                  "/custom/tag_cloud.html";

# This is the data structure that contains all the tag 
# data parsed by the HTML files.
# It's key is the tag name (not case-normalized).
# The value is another hash.  That hash has 2 keys:
#  count - number of pages with that tag
#  range_num - a number from 1 - 10 indicating 
#              popularity (see below)
#  pages - an array of hashes
#
#  Each hash in the pages array has 3 keys: 
#  title - the HTML title of the post
#  file  - the full file name of the HTML file
#  categories - yet another hash
#
#  The categories hash has two keys: 
#  href - the url to the category page (as determined
#         by OctoPress)
#  text - the name of the category (as displayed by 
#         Octopress)
#
my $tag_data      = { };

# This function populates the tag_data data structure
#
find(\&getTags, "$octopress_root/public");

# Find the number of times the most popular tag is used
#
my $max = 1;  # start with 1, not 0 to prevent a 
              # divide-by-zero error later
              # if none of the posts have tags
foreach my $tag (keys %$tag_data) {
    $tag_data->{$tag}->{count} = scalar(@{$tag_data->{$tag}->{pages}});
    if ($tag_data->{$tag}->{count} > $max) {
        $max = $tag_data->{$tag}->{count};
    }
}

# Assign each tag a range number from 1 - 10
# based on popularity.  This range number will
# be used along with CSS to print tags with
# the appropriate size.
#
foreach my $tag (keys %$tag_data) {
    $tag_data->{$tag}->{range_num} =
      int(($tag_data->{$tag}->{count} / $max)
          * 10
          + 0.5); # nearest whole number

    if ($tag_data->{$tag}->{range_num} == 0) {
        $tag_data->{$tag}->{range_num} = 1;
        # we want 1-10, not 0-10
    }
}

# Write the tag cloud file
#
open (O, ">$custom_file") || die;
print O "\n";

# sort by tag name, case insensitive
#
foreach my $tag (sort { lc($a) cmp lc($b)}
                      keys %$tag_data) {

    # give each tag anchor a title, 
    # for screen readers and the like
    #
    my $plural = "y";
    if ($tag_data->{$tag}->{count} > 1) {
        $plural = 'ies';
    }

    print O qq[;
    print O qq[title="$tag_data->{$tag}->{count} entr$plural" ];
    print O qq[class="tag_$tag_data->{$tag}->{range_num}">];
    print O qq[$tag];
    print O qq[\n];
}
print O "
\n";
close O;


# Now save the individual tag files
# First, clear out the directory because we're gonna 
# regenerate all the files.
#
my $tag_dir = "$octopress_root/source/tags";

# If source/tags exists but is a file
#
die "source/tags is a file" if (-f $tag_dir);

# Create the directory if it doesn't exist
#
if (!-d $tag_dir) {
    mkdir $tag_dir;
    createTagsIndexMarkdown($tag_dir);
}
else {
    # Delete all directories under source/tags.
    # We don't want to delete everything because we 
    # need to preserve tags/index.markdown in case 
    # something was modified there.
    #
    my $dirs = `find $tag_dir/* -type d`;

    my @dirs = split(/[\r\n]+/, $dirs);
    foreach my $dir (@dirs) {
        `/bin/rm -rf $dir`;
    }

}


# Make a file for each tag.
#
foreach my $tag (keys %$tag_data) {
    makeTagFile($tag);
}


##  ####################################################
##  Functions
##  ####################################################

sub makeTagFile {
    my $tag = shift;
    mkdir "source/tags/$tag"
      ||
      die "Couldn't make directory source/tags/$tag";

    open (O, "> source/tags/$tag/index.markdown")
      ||
      die "Can't open source/tags/$tag/index.markdown";

    print O qq^---
layout: page
title: Tag: $tag
footer: false
---


^;

    my $year = 0;

    # Sort by file name descending
    # This is the same as sorting by date descending
    #
    foreach my $file (
               sort { $b->{file} cmp $a->{file} }
                    @{$tag_data->{$tag}->{pages}}) {

        # Get the year month and date
        #
        my ($yyyy, $mm, $dd) = $file->{file} =~
            m!(\d\d\d\d)/(\d\d)/(\d\d)/!;

        # The HTML and associated logic here mimics
        # the HTML of the category pages - print 
        # a H2 for every new year
        #
        if ($yyyy != $year) {
            $year = $yyyy;
            print O "$year\n";
        }

        # Construct the URL & date string
        #
        my $url = $file->{file};
        $url =~ s/^$octopress_root\/public//;
        my $title = $file->{title};
        my @months = qw ( x Jan Feb Mar Apr May Jun
                          Jul Aug Sep Oct Nov Dec );
        my $mon = $months[$mm * 1];

        print O qq[

$title
$mon $dd $yyyy

posted in 
];
        # Print each category, separated by commas
        #
        print O join(", ",
            map { "$_->{text}" }
                @{$file->{categories}}
            );

        print O qq[


];
    }

    print O "
\n";
    close O;
}



sub getTags {
    my $file = $File::Find::name;

    # Only parse files that look like posts
    #
    return unless $file =~ /\.html$/;
    return unless $file =~ 
          /^$octopress_root\/public\/\d{4}\/\d{2}\/\d{2}\//;

    # Read the contents of the HTML file
    #
    open (HTML, $_) || die "Can't open $file";
    my $contents = join("", );
    close HTML;

    my $tree = HTML::TreeBuilder->new();
    $tree->parse($contents);

    # Get the title
    #
    my $title = $tree->look_down(_tag  => "h1",
                                 class => "entry-title");
    $title = $title->as_trimmed_text();

    # Get the categories
    #
    my $category_ent = $tree->look_down(_tag  => "span",
                                        class => "categories");
    my @as = $category_ent->look_down(_tag  => "a",
                                      class => "category");
    my @categories = ();
    foreach my $a (@as) {
        push(@categories,
            { href => $a->attr('href'),
              text => $a->as_trimmed_text
            });
    }

    # Get the tags
    #
    my $ul = $tree->look_down("_tag", "ul",
                              "id"  , "tags_ul");
    if ($ul) {
        my @items = $ul->look_down("_tag" => "li");
        foreach my $item (@items) {
            my $tag = $item->as_trimmed_text();

            # Finally, populate the data structure
            #
            push (@{$tag_data->{$tag}->{pages}},
                { title      => $title,
                  file       => $file,
                  categories => \@categories
          } );
        }
    }
    else {
        # no tags in this document
    }

    $tree->delete();

}

# This function creates a default 
# source/tags/index.markdown
#
sub createTagsIndexMarkdown {
    my $tag_dir = shift;
    open (O, ">$tag_dir/index.markdown");
    print O qq[---
layout: page
title: Tags
footer: false
---


 {% include custom/tag_cloud.html %}

];
    close O;
}

Shell Tricks - Extracting A Column From A Text File

2012-01-04T21:25:00-06:00

There have been times when I’ve had to extract a particular column from a tab-separated or comma-separated file. The best way to do this is to use the shell command cut. Let’s say I have a file named input.txt that looks like this:

(input.txt) download

First Name,Last Name,User Id,Quota,Used,Last Login
Aijaz,Ansari,aijaz,5000,2200,2011/12/23 14:23
John,Smith,js,7500,3300,2012/01/04 15:23
Shilpa,Gupta,guptas,3000,1500,2010/10/25 12:00

If I want to extract just the User Id column, I could type in the following:

cut -d ',' -f 3 input.txt

Here the -d option specifies the delimeter and the -f option specifies the field(s) to be extracted. The command above would generate the following output:

User Id
aijaz
js
guptas

If I want to include line numbers, I can use the nl shell filter:

$ cut -d ',' -f 3 input.txt | nl -ba
     1  User Id
     2  aijaz
     3  js
     4  guptas
$

If I want the User Id and Used columns, I could do:

$ cut -d ',' -f 3,5 input.txt 
User Id,Used
aijaz,2200
js,3300
guptas,1500
$

As one would expect, I can change the order in which fields appear by using -f 3,5,1, for instance.

Look at the man page for cut for more options, including how to extract specific bytes from each line.

Excluding Yourself From Google Analytics

2011-12-20T17:56:00-06:00

In my last post I wrote that I followed some instructions to exclude myself from Google Analytics’ reports on my Octopress blog. There was an error in the Javascript that was preventing the required cookie from being set. Here’s what I did that finally worked:

The instructions that I found in Google’s support forum correctly show how to set a filter to exclude any requests where the client has a custom cookie set. However, the javascript code that’s supposed to generate the cookie gave me a ‘variable not defined’ error. This page had the instructions that worked for me. For completeness, here’s the current version of the HTML file I use to exclude myself from the reports:

(exclude.html) download

 xmlns="http://www.w3.org/1999/xhtml">
  
     http-equiv="content-type" content="text/html;charset=iso-8859-1" />
    </span>Excluded from Google Analytics<span class="nt">
    
    You have been excluded from Google Analytics.

Essentially, I moved the line that sets the cookie from the body tag to line 11.

Switching To Octopress

2011-12-12T08:19:00-06:00

Over this past weekend I switched my blog over from WordPress to Octopress. In this post I write about why I did it, what exactly I did to get the blog just the way I wanted, and what I plan to do in the future.

If you were to ask me what’s the difference between the two, the first thing I would tell you is that Octopress serves static HTML. The blog is generated on my local machine (usually my laptop) and then the static files are uploaded to the server. This is also called ‘baking the site.’

While I’m not an ‘A-list’ blogger and don’t have to worry about my site being Fireballed or Slashdotted (or JessicaHisched or SwissMissed) it’s comforting to know that my blog is being served as efficiently as it can be.

A lot has been said about the virtues of baking your own blogs, so I’m not gonna repeat them here. You can read what Matt Gemmell had to say about it and also what Brent Simmons wrote about it in these three articles.

For me, though, the biggest motivating factor was that I didn’t like using the Wordpress website to create and edit blog posts. The web interface is just not natural. Yes, there are apps like MarsEdit that simplify the process, but that’s still one more layer of abstraction than I care to interact with. I want the experience of writing to be as close to the metal as possible: I use a text editor to edit text - I should be able to use any text editor to edit my blog.

Enter Octopress and its support of Markdown. I set up Octopress per Matt’s recommendations and with some minor hacking I was able to migrate the blog over the course of one weekend. In what’s left of this post I’ll write about what changes I made to the system to get the blog ‘just right’ and what changes I would like to make in the future.

Floating Images

Octopress has a nice shorthand for specifying images:

{% img [class names] /path/to/image [width] [height] [title text [alt text]] %}

Using the proper class names one can have the image float left or right or otherwise set its alignment. However, I like having captions under my images. This requires a floating div that would contain both the image and the caption under it. For best results, the div would have to be about as wide as the image.

Octopress is based on Jekyll that supports the Liquid template engine written in ruby.
I could probably have written a Liquid plugin to do this, but I don’t know Ruby (yet) and so I had to come up with another solution.

To get this to work I created my own markup that would be inserted into the markdown text as an HTML comment. Markdown would preserve the HTML comment, and it would show up in the HTML file after rake generate was called. I wrote a small shell script call generate that calls rake generate and then invokes the perl script imageCaption.pl on every generated html file:

(generate) download

#!/bin/bash

rake generate

find /Users/aijaz/octopress/public \
     -type f \
     -name '*.html' \
     -exec /Users/aijaz/octopress/imageCaption.pl '{}' ';'

And, here’s imageCaption.pl. It searches for the markup and replaces it with the appropriate HTML.

(imageCaption.pl) download

#!/usr/bin/perl

use strict;
use warnings;

# The file that was specified on the command line
#
my $file = shift;

# Read all lines from the file into a list named 'lines'
#
open (I, $file) || die;
my @lines = ;
close I;

# Scan each line for our special markup: 
# a comment that starts with ai and then has upto 6
# space-separated components
#
# For each such line, call makeDiv on the components and 
# replace the markup with the output of that function
#
foreach my $line (@lines) {
    $line =~ s^^makeDiv($1, $2, $3, $4, $5, $6)^ge;
}

# Save the possibly modified contents of the 'lines' array
# back to the original file
#
open (O, ">$file") || die;
print O join("", @lines);
close O;


sub makeDiv {

    # The enclosing div should be this much bigger
    # than the image.  This accounts for the white margin
    # that octopress puts around the image
    #
    my $width_inc = 20;

    # The 6 components in our markup are
    # align:   'l', 'c' or 'r'.  Used to specify the
    #          css class
    # target:  The href of the a tag that's put around
    #          the image
    # image:   The URL of the image 
    # width:   The width of the image
    # height:  The height of the image
    # caption: This is used as the alt tag of the image, 
    #          the title of the a tag as well as the 
    #          caption that's displayed under the image.
    #          This field may be blank, but don't do that 
    #          because really, that's the whole point of 
    #          this exercise.
    #
    my ($align, $target, $image,
        $width, $height, $caption) = @_;

    my $div_width = $width + $width_inc;

    # Construct the html.  Note that the css class is
    # 'ai' followed by the value of the 'align' component.
    #
    return join("",
        qq^^,
            qq^^,
                qq^,
                    qq^width="$width" ^,
                    qq^height="$height" ^,
                    qq^alt="$caption" ^,
                    qq^border=0>
^,
            qq^$caption
^);
}

In order to tie this all together, I had to define the css classes for the various ‘ai…’ classes. I added the following code to sass/custom/_styles.scss:

(_styles.scss) download

// This File is imported last, and will override other styles in the cascade
// Add styles here to make changes without digging in too much

div.ail {
    max-width: 100%;
    float: left;
    font-size: 12pt;
    color: #808080;
    padding-right: 1em;
    font-style: italic;
    text-align: center;
    margin-bottom: 1em;
    line-height: 16pt;
}

div.air {
    max-width: 100%;
    float: right;
    font-size: 12pt;
    color: #808080;
    padding-left: 1em;
    font-style: italic;
    text-align: center;
    margin-bottom: 1em;
    line-height: 16pt;
}

div.aic {
    max-width: 100%;
    font-size: 12pt;
    color: #808080;
    font-style: italic;
    text-align: center;
    margin-bottom: 2em;
    margin-left: auto;
    margin-right: auto;
    line-height: 16pt;
}

div.air img {
    max-width: 100%;
}


div.ail img {
    max-width: 100%;
}


div.aic img {
    max-width: 100%;
}

Note that I added max-width:100% for all the divs and images - this ensures that the images won’t get cropped when the page is displayed on a smaller, mobile display.

You can see an example of these aligned images in my post on how lenses work.

Web Server Optimizations

I host my site on an Apache 2 web server. As I had done with my taskforest website , I decided to optimize the site and get a high score from PageSpeed. I enabled compression of html files, and turned on KeepAlive.

I also had to change my site redirections. Originally, I was redirecting aijazansari.com to www.aijazansari.com. However, I noticed that my site was not being displayed correctly on Windows Internet Explorer Version 8. As this page shows, it’s probably due to poorly-implemented restrictions to prevent cross-site scripting. I changed the redirections to be the other way around, and then the site worked fine on IE8. I’ve included the relevant part of my httpd.conf file below:

(httpd.conf) download

 216.139.228.44>
    ServerName        aijazansari.com
    DocumentRoot      "/home/aijaz/aijazansari.com"
    FileEtag          None
    ExpiresActive     On
    ExpiresDefault    A3600
    CustomLog        logs/access_log_blog combined
    KeepAlive        On
    ErrorDocument    404 /404.html

    # 1 Week
     "\.(ico|gif|jpe?g|png|flv|pdf|swf|mov|mp3|wmv|ppt)$">
        ExpiresDefault A604800
        Header append  Cache-Control "public"
    

    # 1 Day
     "\.(xml|txt|html|htm|js|css)$">
        SetOutputFilter DEFLATE
        BrowserMatch    ^Mozilla/4         gzip-only-text/html
        BrowserMatch    ^Mozilla/4\.0[678] no-gzip
        BrowserMatch    \bMSIE            !no-gzip !gzip-only-text/html
        ExpiresDefault  A86400
        Header append   Cache-Control "private, must-revalidate"
    

    # Never cache
     "\.(pl)$">
        ExpiresDefault A0
        Header set     Cache-Control "no-store, no-cache, must-revalidate, max-age=0"
        Header set     Pragma "no-cache"
    


 216.139.228.44>
    ServerName    www.aijazansari.com
    RedirectMatch (.*) http://aijazansari.com$1

Excluding Myself From Google Analytics Reports

While I tweak this blog, I’ll be accessing it very often. I don’t want my accesses to influence the Google Analytics reports. I followed the advice on this page and set up Analytics to ignore the cookie that only I would have set.

Update 2011/12/20 - These instructions didn’t work. Read my next post to see how I got it to work.

Can’t Forget The FavIcon

Finally, I overwrote the default favicon.png with my own version. It was the fininshing touch to get the blog ‘just right’ (for now).

Plans For The Future

The first thing I want to change about my blog is the theme. I think the default Octopress theme is very good, but I personally prefer the more minimalistic themes. I used to use Basic Maths on my WordPress site. I might have to learn some Ruby, and also learn about Liquid and Jekyll, but I would like to make a theme that’s somewhere between Minimal Mac and Basic Maths. I’m also gonna have to replace my Perl image alignment hack to a Liquid plugin soon.

How To Wrap Text In Vim

2011-12-07T07:00:01-06:00

[Another in my series of posts on Vim]

If you’re writing natural language text you may wish to format your paragraph so that the text wraps before lines get too long. Here’s how you do it:

To set the maximum width of a line of text, go to Normal mode and enter

:set textwidth=72

This will set the maximum width of a line to 72. If you want to reformat a paragraph you have already typed, one easy way to do this is to type in {gw}.

The first { takes you to the beginning of the paragraph. gw formats all the text between the current location and the point you would be taken to had you typed in the motion command that follows the gq. In this case the motion command is } which means go to the beginning of the next paragraph. So, gw} formats the rest of the paragraph but leaves the cursor where it was. If you want to move the cursor to the the location indicated by the motion command, then use gq instead of gw.

Why would you want to use gq? Simple: when you have a bunch of paragraphs you want to format or reformat, you can use gq} once and then hit . to repeat the previous command over and over again. There are other shortcuts to reformat an entire file. We’ll look into those later.

Like emacs, Vim has very powerful paragraph reformatting commands. In future blog posts we’ll look at some of them in more detail. If you want to explore them on your own, I would suggest you enter

:help gq 
:help formatoptions

Understanding Your Camera's Histogram

2011-12-05T17:00:58-06:00

In a previous blog post we learned what a histogram is. In today’s post we’ll see how to use histograms to help take properly-exposed photographs. If you haven’t read the previous post, or are not familiar with histograms, I would recommend you read that post before continuing with this one.

You may remember that in photography the term ‘exposure’ refers to the amount of light that enters the lens. A photograph that is considered to be correctly exposed is neither too bright or too dark. It’s just right. An underexposed picture is too dark - the dark areas are pure black, and therefore lack detail. Similarly an overexposed picture is too bright - the bright areas are pure white and therefore lack detail. Figure 1 shows an underexposed picture, and Figure 2 shows an overexposed one.

Modern digital cameras, whether they are point-and-click models or SLRs, have two main tools to help you determine the exposure of your pictures. The first is the light meter. The light meter will tell you whether or not the camera thinks your picture is well exposed. It usually displays some sort of linear indicator that ranges from “Very Underexposed” to “Very Overexposed.”

The second tool is the histogram. The histogram graphs the distribution of the different levels of light in the photograph (more on this later). Most cameras display the histogram on the LCD panel after you take the picture, but some now display a live histogram even before you “press the button.”

What Histograms Display

In order to understand exactly what the histogram displays you first need to consider the camera sensor (the CCD). When you take a picture with a digital camera, light enters the camera through the lens and falls on the the sensor. A different amount of light falls on each ‘pixel’ of the sensor. Each pixel converts the light into a corresponding voltage. This analog voltage is then converted to a digital value which is usually 12 bits (between 1 and 4096).

The histogram displays how many pixels are at each of these 4096 levels. The x axis represents the brightness levels - from 1 to 4096, where 1 is “very dark” and 4096 is “very bright.” The y axis graphs the number of pixels at each of these levels.

Examples of histograms

Each sensor has a range of how much light it can detect. That range is anywhere between 5 and 12 f-stops, depending on the sensor. (If you remember from this blog post, every lower f-stop doubles the amount of light entering the lens.) Now, if everything in your photo is at a brightness level that falls within your sensor’s range, that’s a good thing. Figure 3 is an example of such a picture.

If the scene you’re trying to photograph is too bright for the sensor, some percentage of the pixels will have a brightness that is too high for the sensor to measure, so all of those pixels will be assigned the maximum brightness value (4096). This is when you start having problems - if the pixels in your image range in brightness equally from 3000 to 6000, every pixel from 4096 to 6000 will show up with a value of 4096 (pure white). So what’s happened is that you’ve lost 1004 pixels’ worth of information. All the detail of the image between 4096 and 6000 is lost. In that case you would be better off decreasing the exposure by increasing the shutter speed or decreasing the aperture (choosing a higher f-stop). Figure 4 is an example of such a picture. Look at the right edge of the histogram - the high number of pixels at the maximum level indicate ‘clipping’ of the histogram. That’s your data loss. Compare it to the histogram for Figure 3, which tails off nicely on the right end. Once you get the all the pixels back within the 0-4096 range (as seen from the histogram) you’re back to no loss of data.

Now let’s look at the other scenario: If the scene you’re trying to photograph is too dark for the sensor, some percentage of the pixels will have a brightness that is too low for the sensor to measure, so all of those pixels will be assigned the minimum brightness value (1). If your range is 3000 (as in the last example) a large number of pixels will show up as black. Again, you’ve lost data, and lost detail in the image. In that case you would be better off increasing the exposure by decreasing the shutter speed or increasing the aperture (choosing a lower f-stop). Figure 5 is an example of such a picture. Look at the left edge of the histogram - the large number of pixels at the minimum level indicate ‘clipping’ of the histogram. That’s your data loss. Compare it to the histogram for Figure 3, which tails off nicely on the left end. Once you get the all the pixels back within the 0-4096 range (as seen from the histogram) you’re back to no loss of data.

What if the range is too large?

Changing the exposure to get the histogram within the sensor’s range is a good solution as long as the range of brightness in the scene is less than the range of the sensor. However, common scenes in real life often have ranges higher than those of many of today’s best cameras. We don’t notice it often because our eyes have a ridiculously large range of about 10 f-stops, and when they’re paired with the processing of our brains, we can see better than cameras can. Figure 6 is an example of an image whose range is more than that of my camera. Notice the clipping on both ends. What should be done here?

There are two things you can do here, and you should consider doing them both. The first is biasing towards the highlights, and you do that while you’re on the scene taking the pictures. The human eye tends to focus on the brighter parts of the picture, and the brain expects shadows to be dark. You can take advantage of these expectations and expose your picture to minimize the clipping on the bright end (the right end). While that means you’ll get more clipping on the darker end, you’ll have more detail and greater tonal range on the brighter end. It’s very subjective, but pictures like that tend to look more natural and therefore better than pictures where the bright areas are washed out. You can see that this is what I did in Figure 7.

The second thing you can do is post-process the image with image processing software. You do this after you import your picture into your computer. Two of the most popular image processing applications are Adobe’s Lightroom and Apple’s Aperture. If you’re shooting in RAW format (as you should be) there’s a lot of data in the image for you to play with. Post-processing images is a topic for a future blog post, but Figure 8 shows how the image changed after I took Figure 7 and increased the “Recovery” and added “Fill Light” in Lightroom. The histogram looks better now, but you can never get something for nothing. Look at the middle of the histogram - it’s gotten a flatter. The shape’s changed and image is a little washed out, now. Again, these are subjective settings. You need to play around with them until you get the kind of picture you want.

What is the perfect histogram?

After all this talk about clipping and how to avoid it, you may ask yourself “What is the ideal histogram I should try to get in all my pictures?” There is none. A histogram isn’t good or bad. It’s just a way of looking at your picture. You get to decide if the image that shows up on the LCD panel is the image you want or not. If it isn’t, then the histogram can help you determine why. If you’re not sure, the histogram can tell you whether or not you’ll have room to play around with the settings once you start processing the picture. If there is no clipping you’ll have a lot of room to work with.

Figures 9 & 10 are examples of histograms with a lot of clipping. I don’t care, because these are exactly the pictures I was looking for - pictures with a lot of contrast and a lot of specular highlights (brightness where a light source is reflected off a shiny surface). In many cases specular highlights may be ignored - they’re actually good because they add to the ‘drama’ of the shot.

Many cameras have a setting where they will display overexposed pixels (those where clipping occurs to the right) in flashing red. This helps you determine very easily just how much of your image has clipped. The image post- processing software allows you to do that as well.

Summary

Histograms are very powerful and easy-to-use tools. Learn how to read them, and then use them. Set up your camera to display the histogram after every shot is taken, for about 5 seconds. A quick glance will let you know whether or not you’ve “messed up the shot” and need to take it again. If your camera supports it, also set it up to highlight overexposed areas. I’ve found this to be very useful as well.

In a future blog post we will complete our discussion about histograms – we’ll learn how data is distributed on the histogram and how to maximize the data we have for post-processing. Until then, keep taking pictures (and use the histograms).

References

Understanding Histograms by the wonderful site The Luminous Landscape.
Chapter 2 of Mastering the Nikon D700 by Darrell Young and James Johnson.

Thanks to John Gallagher for reviewing an early draft of this post and giving me his feedback.

Inspiration vs. Imitation

2011-12-05T06:13:18-06:00

Jessica Hische has just published a very well written article on “why it’s ok to copy people to learn, but never ok to publish that work.” I love the tone of her writing. Even though I’m not a designer and won’t ever be as good a letterer as she is, I hope to be able to write as well as her.

How To Quickly Delete Words While In Insert Mode In Vim

2011-12-02T09:00:52-06:00

[Another in my series of posts on Vim]

Sometimes when you’re typing natural language text, you find yourself wanting to rephrase the sentence you’ve written so far. You could hit backspace many times to delete the characters to the left of the cursor, or you could type Ctrl-W. When you’re in Insert mode, Ctrl-W will delete from the cursor to the beginning of the previous word.

If, instead, you type in Ctrl-U, you will delete everything to the left of the cursor on that line (everything before it), and preserve everything to the right of the cursor (everything after it).

Let’s try this out. Open a test file in Vim and enter Insert mode by hitting a or i or o. Then type in the following sentence (don’t hit ):

A slow brown dog lazed

Then hit Ctrl-W twice. You’ll see that each time you hit Ctrl-W, you delete the word to the left of the cursor. After hitting Ctrl-W twice, you should see:

A slow brown

Then continue with the rest of the sentence. Type in ‘fox jumps over a lazy dog.’ After typing that in, still in Insert mode, use the arrow keys to move your cursor just before the ‘b’ in ‘brown’:

A slow brown fox jumps over a lazy dog
       ^
       Your cursor should be just to the left of the 'b'

The hit Ctrl-U. Everything to the left of the cursor will be deleted, leaving you with:

brown fox jumps over a lazy dog

Then you an continue typing in ‘The quick’ , which will get you:

The quick brown fox jumps over a lazy dog

I’ve found that learning these little shortcuts really helps me type efficiently and keep my typing in sync with my thoughts.

What Is A Histogram?

2011-11-30T20:16:45-06:00

A key aspect of good photography is exposure - the amount of light that enters the lens. One of the most useful tools a digital cameras has to help you measure a photograph’s exposure is the histogram. In order to learn how to use it, you must first learn understand what a histogram is.

Let’s pretend I teach a class of 20 students. One day I decide to give the students a test in which they can score anywhere from 0 to 100 points. After grading the tests I want to see how the population of students did. So I graph the scores in a histogram. A histogram displays the distribution of measured values across a population. Let’s make one now.

The following table lists my fictional students’ scores:

Alice       82
Bob         79
Chetan      88
Darla       94
Evan       100
Fatima      89
Gerard      96
Harry       43
Ibtissam    68
Jack        56
Kate        93
Labiba      70
Mary        76
Noreen      83
Ophelia     92
Pablo       63
Qazveen     84
Rick        89
Sophia      73
Taline      89

The first thing I do is make a bunch of ‘buckets’ of values into which each score should go. The larger the bucket size the more scores it will have. The smaller the bucket size the fewer scores it will have. I choose a bucket size of 5 points because that seems like a nice level of granularity. 5 points gives me the following 20 buckets:

I draw these buckets horizontally because that’s how histograms are almost always drawn:

| | | | | | | | | | | | | | | | | | | | |
0 5 1 1 2 2 3 3 4 4 5 5 6 6 7 7 8 8 9 9 1
    0 5 0 5 0 5 0 5 0 5 0 5 0 5 0 5 0 5 0
                                        0

The next thing I do is go through the list of scores and put each score in its appropriate bucket. I do this by marking an X in the appropriate bucket. Alice scored 82, so I mark an X in the bucket between 80 and 85. Bob got 79, so I put an X in the bucket between 75 and 80. When I’m done, the histogram looks like this:

                                  X
                                X X X
                            X X X X X X
                 X     X X X X X X X X X
| | | | | | | | | | | | | | | | | | | | |
0 5 1 1 2 2 3 3 4 4 5 5 6 6 7 7 8 8 9 9 1
    0 5 0 5 0 5 0 5 0 5 0 5 0 5 0 5 0 5 0
                                        0

The x axis of this histogram has the ranges of values (scores) and the y axis represents the number of data points that have that value.

If you think about it, this histogram has less data than the original table did - It doesn’t map a student’s name to their score. However, it does illustrate the distribution of the scores in a manner that isn’t obvious from the table: Looking at this histogram you can see that most students scored 75 or higher, and that more students scored in the 85-90 bucket than in any other bucket. We call distributions that look like this ‘skewed to the right’ - most of the data points are towards the right end of the histogram.

Now that you know what histograms are, you’re ready to use them to take better photos. I’ll cover that in Monday’s blog post.

References

Wikipedia entry on histograms.

How To Insert A Line Of Dashes In Vim

2011-11-28T23:02:08-06:00

[Another in my series of posts on Vim]

If you’re a developer, you will often find yourself having to insert a line of dashes or hashes (#) or asterisks into your comments. In this post I’ll show you how to do this quickly. Memorize this because you’ll wind up doing this often. Position the cursor to the beginning of a blank like (in command mode) and enter the following:

80a#

The ‘80’ tells Vim that you want to repeat the next command 80 times. The command immediately follows: a#. This command instructs vi to add a hash character to the right of the cursor. You terminate the command with the .

How To Subtract One File From Another

2011-11-23T14:45:26-06:00

Let’s say you have two text files, FileA and FileB. You want a file that has all the lines of FileA that are not in FileB. How do you do that?

The simple answer is grep. The -v option inverts the search, and only prints lines that do not match. The -f option is used to specify a file that contains a list of all the patterns for which to look - one pattern per line.

Let’s say FileA looks like this:

1 Alice 10
2 Bob   15
3 Alice 16
4 Carl  10
5 Dave  20

and FileB looks like this:

2 Bob   15
4 Carl  10

Then, you can use the following command to print out all lines from FileA that are not in FileB:

    $ grep -vf FileB FileA
    1 Alice 10
    3 Alice 16
    5 Dave  20
    $ 

You could, alternatively, have gotten the same results if FileB looked like this:

.*Bob.*
.*Carl.*

A Different Kind Of Running

2011-11-22T15:33:02-06:00

I don’t like running unless I’m running towards something or away from something. But I do run often because of the health benefits. I’ve always thought the right way to run was to land on my heel and then transfer the weight to the ball of my foot, and finally the toes. Now according to this article and this site I may have been doing it wrong.

The key here is to land on the balls of your feet and not extend the ankle past the knee. I’ve started trying it out this week, and so far I can feel a difference. Yesterday at the end of a 3 mile run I started feeling a slight pain in the tendons below the knee. Slowing down and focusing on keeping my form as described in the attached links eliminated the pain immediately. Today I ran for just 1.5 miles, but I made sure I followed the prescribed form very carefully. The run was easier than normal. Slower than normal, but it felt less strenuous.

With only two data points I’m not ready to say that this system works for me, but I’ll keep trying it out and let you know how it goes. I don’t know how to evaluate success, since I’m not an avid runner, and can’t really compare it to previous results. I’ll keep reading and running and we’ll see.

There and Back Again - A Hacker's Switch from Emacs Back to Vi

2011-11-21T14:55:49-06:00

When I first learned how to exist on UNIX, in 1988, I used vi as my primary editor. During the next nine years I taught myself how to become a power user - migrating from the simple motion and copy and paste to more complex skills like marks and named registers. When I started graduate school I saw many of the professors and grad students using emacs. I tried it out a couple of times, but it was not until 1997 that I decided to take the time to stick with emacs and take the time to learn the right way to do things even when I could get the job done faster in vi.

I used emacs almost exclusively after that. I got myself a couple of books, browsed the gnu.emacs newsgroup and wrote my own elisp code for matching HTML tags, among other things. For a while I used rmail from within emacs as my primary news client, used org-mode as an issue and task manager and even flirted with the idea of using emacs as a web browser. I used emacs for half a generation and didn’t think I would switch back to vi for daily work.

But switch back I did, in November of 2011. After Richard Stallman, the inventor of emacs made some controversial comments about the passing of Steve Jobs, the angered Mac and iOS developer community starting posting some of the more polarizing of his writings. Reading them I realized that Stallman and I held conflicting opinions about some issues I consider very important - namely the importance of one’s family and the relative importance of emacs in the Grand Scheme Of Things.

I was surprised by my reaction to Stallman’s opinions. Like him, I care deeply about the skill of editing text. But I could not separate my dislike for Stallman’s worldview from my enthusiasm towards the platform. To me it was inevitable that I would switch away from emacs. I wanted to show myself that to me, at least, emacs was never a religion - it was never the One True Way. It is a fantastic editor, but no more. I wanted to convince myself that there could be life after emacs - that Stallman was wrong - that I could continue to be productive and excel with an editor other than emacs. So I decided to switch to vim.

As I relearn vi through vim I’ll post what I learn here. If you’re a vim user, please join the discussion and post your comments, suggestions, disagreements, etc. That will not just help you and me, but others who happen upon this page while trying to learn something.

The First Vim Tip

I’ll start off with a discussion how to do something in vim that I could never do in vi, and that I did all the time in emacs - rectangular selections. In my line of work I often need to select a rectangle of text and operate upon it; I may need to delete the rectangle of text, or I may have to append something to either of the two edges, or delete something from either of the two edges. In emacs I would use C-x r k and C-x r y to kill and yank, for example. In vim we can use visual mode.

There are three different kinds of visual modes. Each operates on text differently, and each is invoked differently. To get to ‘normal’ visual mode, hit ‘v’ when in command mode. To get to the ‘rectangular’ visual mode, hit C-v (hit Shift-V for line visual mode). This will allow you to use your cursor to highlight a rectangle of text and easily see the scope of your next commands.

Once you have the proper rectangle highlighted, you can delete it by hitting ‘d’. You can insert text to the left edge of every line by hitting ‘I’ and inserting the text. You will have to end with an ESC, and not enter any newlines (or else the editor will treat it like a normal insertion). You can also insert text to the right edge of every line by hitting I and inserting the text. Again you will have to end with an ESC, for the same reasons as before. You can copy (yank) the rectangle by hitting ‘y’.

[Update 11/29 - Changed header to “The first Vim Tip”]

Taking Back My Relationships

2011-07-09T18:59:15-05:00

I’m trying to formulate a sensible strategy to overhaul my net presence. The rough plan so far:

Change my 12-year-old email address that is on every spammer’s short list
Extract friends’ contact info from Facebook
Delete Facebook account.
Import FB contacts into Google & Mac
Redirect facebook friends to current tech blog (aijazansari.com) and new personal blog.
Find out if FB friends can subscribe to an RSS feed of my blog somehow (doesn’t seem possible any more)
Pick up the phone and actually talk to friends more often.

The goal’s pretty obvious - I want to reclaim my data. I think I own my relationships, not FB, not Twitter, and not Google+. So far, G+ may be the most accommodating network out there - if I can export my G+ presence as easily as I can export my G+ contacts, we might have a good candidate here.

If you have any ideas or comments or experience with this, please let me know.

I’ll keep you posted.

Glen Ellyn Volunteer Fire Company

2011-07-01T19:50:31-05:00

Fire marks were used in the 1700s to designate homes or buildings protected by the fire insurance companies. They were generally oval plates placed on the outside of a structure to let volunteer fire brigades know which buildings carried a “reward” if saved.

You can read more on this here.

Implementing Inertial Scrolling in iOS

2011-04-25T21:36:25-05:00

I hadn’t really given much thought to how the iPhone handles scrolling until I recently had to implement it myself. I needed to add vertical scrolling to a UIView that models a real-life metaphor. In my particular case I feel using a UIScrollView would break the metaphor - the user would “snap out” of the immersive app and realize they’re merely using an iPhone app with a pretty skin. So the natural solution was to implement scrolling myself. This is how it went from simple, unnatural scrolling to its current state of acceptable inertial scrolling.

Version 1 - Hit By The Ugly Stick

I started off with my view controller’s existing implementations of touchesBegan:withEvent:, touchesMoved:withEvent: and touchesEnded:withEvent:. In touchesBegan I saved the starting y location of the view controller (self.frame.origin.y) into an instance variable. I also saved the total amount moved in another variable:

    - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
        self.lastFrameOriginY = canvasView.frame.origin.y;
        self.cumulativeDeltaY = 0;
    }

In touchesMoved I tracked the location of the touch in the view, as well as the location of the previous touch in the view. Subtracting one from the other I was able to see how much the touch had moved in between invocations and in what direction:

    - (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {
        NSObject * obj = [touches anyObject];
        CGPoint p      = [(UITouch *)obj locationInView: canvasView];
        CGPoint o      = [(UITouch *)obj previousLocationInView: canvasView];
        // Translation only, not real distance between points
        //
        int deltay = p.y - o.y;
        // This is how much we have moved since we started dragging
        // defined as an integer property of the view controller
        //
        [self setCumulativeDeltaY: self.cumulativeDeltaY + deltay];
        if (obj != nil) {
            CGRect r = [canvasView frame];
            // Move the view according to how much the touch has moved
            //
            r.origin.y = self.lastFrameOriginY + self.cumulativeDeltaY;
            [canvasView setFrame:r];
        }
    }

I didn’t really need to implement touchesEnded because by the time the touches ended, the view was already where it needed to be. That’s the whole point of dragging, right? Well, yeah, but just leaving the view where it was made for a very abrupt and unnatural stop. There was no gentle stop. Ironically, the immediate stop made the application feel more sluggish than if I had the inertial stop we’re all used to with UIScrollView. Clearly it was time for plan B.

Plan B - Well, At Least Your Intentions Were Honorable.

How difficult can it be? Just implement a touchesEnded:withEvent: and use animation to move the view a certain distance before stopping, depending on how fast it was going in the first place.

This is where I donned my Engineer hat and told myself “Obviously, speed is distance divided by time so, I need to find the distance moved so far and divide it by the time between when the touchdown event and the touchup event, and (as my music teacher would say) Viola! That’s my speed.”

Turns out that’s wrong. I looked at the UIScrollView, and what matters is not how fast you got from touchdown to touchup, but how fast you were moving right before touchup. Okay, we have a really good approximation of that already - that’s the distance between locationInView and previousLocationInView (what I call deltay). So that was chosen to be my speed. I decide to choose reasonable approximations rather than model the physics perfectly. The scrolling just needs to ‘look right’ and it should not slow the app down or be computationally intensive. Here’s what it looked like:

    - (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {
        NSObject * obj = [touches anyObject];
        if (obj != nil) {
            CGPoint p = [(UITouch *)obj locationInView: canvasView];
            CGPoint o = [(UITouch *)obj previousLocationInView: canvasView];
            // Translation only, not real distance between points
            //
            int deltay = p.y - o.y;
            // This is how much we have moved since we started dragging
            // defined as an integer property of the view controller
            //
            [self setCumulativeDeltaY:self.cumulativeDeltaY + deltay];
            CGRect r = [canvasView frame];
            // Put a cap on what the speed can be, so we
            // don't have to deal with absurdly fast flicks.
            // Also, treat a tiny move as no move at all - you don't want a
            // tiny move causing a large drift.
            //
            int maxSpeed = 80;
             if      (deltay > maxSpeed)         { deltay =  maxSpeed; }
             else if (deltay < -maxSpeed)        { deltay = -maxSpeed; }
             else if (deltay > -5 && deltay < 5) { return; }
             double duration = 0.5;
             // Chose 10 after trial and error because
             // the results 'looked right'
             //
             int finalDistance = deltay * 10;
             r.origin.y += finalDistance;
             // Animate the view with an EaseOut curve so that it slows down.
             //
             [UIView beginAnimations:@"inertialSlide" context:NULL];
             [UIView setAnimationDuration:duration];
             [UIView setAnimationCurve:UIViewAnimationCurveEaseOut];
             [canvasView setFrame:r];
             [UIView commitAnimations];
        }
    }

Now that’s better! The scrolling came to a gentle stop as I gingerly tested it. Then I tried a few fast flicks of the view, and the scrolling just stopped abruptly (see Ugly Stick). There was no inertia here. It was like the fast flicks were being treated as really slow scrolls.

Sure enough, when I started debugging, the value of deltay inexplicably moved to -2 or 2 when the scrolling was really fast. This post at Opetopic Blog confirmed my suspicions: the events were happening so fast that previousLocationInView could not be trusted.

So then I decided to go with a hybrid solution - Keep what I have for slow scrolls, and use something else for fast scrolls. First, I would need to know how to differentiate between slow and fast scrolls. Then I would need to figure out how to handle fast scrolls. Here’s what I did:

Final Version: That’s More Like It

I added two new instance variables to my view controller: startTime and endTime, whose difference would give me the duration between the touchdown and touchup events. I also added a CGPoint called previousLocation that saved the starting location of the touchdown event.

    - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
        self.cumulativeDeltaY = 0;
        self.lastFrameOriginY = canvasView.frame.origin.y;
        // Save the time at which the touches started
        //
        startTime = CACurrentMediaTime();
        NSObject * obj = [touches anyObject];
        if (obj != nil) {
            // Save the location at which the touches started
            // (in the parent view)
            //
            previousLocation = [(UITouch *)obj locationInView: bgView];
        }
    }

Now that the starting location and time are saved, we can use these variables to figure out whether the flick was ‘too fast.’

    - (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {
        NSObject * obj = [touches anyObject];
        // The time at which the touches ended
        //
        endTime = CACurrentMediaTime();
        if (obj != nil) {
            CGPoint p = [(UITouch *)obj locationInView: canvasView];
            CGPoint o = [(UITouch *)obj previousLocationInView: canvasView];
            // Translation only, not real distance between points
            //
            int deltay = p.y - o.y;
            // This is how much we have moved since we started dragging
            // defined as an integer property of the view controller
            //
            [self setCumulativeDeltaY:self.cumulativeDeltaY + deltay];
            CGRect r = [canvasView frame];
            // Put a cap on what the speed can be, so we
            // don't have to deal with absurdly fast flicks.
            // Also, treat a tiny move as no move at all - you don't want a
            // tiny move causing a large drift.
            //
            int maxSpeed = 80;
            // Find out the how long the touches lasted
            //
            float timeDifference = endTime - startTime;
            // Chose 0.35 after some trial and error.  It seemed like the most
            // natural amount
            //
            if (timeDifference < 0.35) {
                // The flick was really fast.  Use Distance/Time to
                // calculate speed.  It will likely be accurate.  
                // Get the current location in the parent view
                //
                o = [(UITouch *)obj locationInView: bgView];
                // Calculate the speed as distance/time.  Use some scaling
                // to get the speed to be comparable to a normal flick.
                //
                deltay = (o.y - previousLocation.y) / (timeDifference * 10);
            }
             if      (deltay > maxSpeed)         { deltay =  maxSpeed; }
             else if (deltay < -maxSpeed)        { deltay = -maxSpeed; }
             else if (deltay > -5 && deltay < 5) { return; }
             double duration = 0.5;
             // Chose 10 after trial and error because
             // the results 'looked right'
             //
             int finalDistance = deltay * 10;
             r.origin.y += finalDistance;
             // Animate the view with an EaseOut curve so that it slows down.
             //
             [UIView beginAnimations:@"inertialSlide" context:NULL];
             [UIView setAnimationDuration:duration];
             [UIView setAnimationCurve:UIViewAnimationCurveEaseOut];
             [canvasView setFrame:r];
             [UIView commitAnimations];
        }
    }

With these new changes the speed is calculated acceptably well in both cases - slow scrolls and super-fast flicks. Note that I used trial and error to come up with the 0.35 second threshold and also to calculate the speed (deltay) in that case. These values work on the device that I have tested with, but more testing will be needed to see if this is a solution that will work for all the devices out there.

Summary

I was certainly surprised at how important the ‘little’ things like inertial scrolling are to a satisfying user experience. While my crude attempt at implementing it may not be technically accurate, it appears to be good enough. And that’s really what I’m looking for. If I’ve done my job well, no one will notice the scrolling. I’m not designing a user interface toolkit; I just don’t want it to stick out like a sore thumb. Please keep in mind that this isn’t exactly the code that’s in my app - I’ve modified it for display here. I may have introduced some minor syntax errors while formatting the code for this blog post. Also, I can’t stress enough that this isn’t a default solution. Whenever possible, use the UIScrollView. It’s there because it works. It’s Apple’s gift to you. If you can use it, don’t roll your own implementation. Just use UIScrollView.

"Hello, World" on the iPhone

2010-09-19T20:26:11-05:00

Yesterday I started learning how to write applications for the iPad and the iPhone. There are so many books that promise to teach you everything you need to know that picking one or two (or three) can be very difficult. While I normally like to learn new skills by reading a good book, I think for iOS development a more dynamic source would be a better choice.

The iOS Developer Center from Apple is the best source of current, complete documentation for the iPhone and iPad development. This is especially important as the developer tools are updated and new toolkits are introduced, making printed books obsolete. While there are literally thousands of tutorial documents and videos, and because there are so many it’s very difficult to decide where to start.

The best tutorial I have found so far is the iPhone Application Development class (CS193P) taught at Stanford University in the Winter of 2010. This is an actual course taught at Stanford, available on iTunes for free. Most of the lectures are taught by iPhone engineers. The video of every lecture is available online on iTunes (search for “CS193P”), as are class slides. There’s also a Downloads web page that has source code, assignments and other supporting files. If you’re considering taking this class download these files as soon as possible, because the next time this class is offered those files may be deleted off the web server. If by the time you read this it’s too late, let me know, and I can send you the copies I downloaded.

As if to illustrate just how quickly information becomes outdated, even some key parts of the course’s videos are no longer accurate. In Lecture 1, actions and outlets for the controller class are set in the Class Inspector. As this post shows, as of version 3.2 of the Interface Builder, there is a new tab in the Library window called “Classes.” The “Classes” tab is where you should now go to manage actions and outlets.