Recent Posts

The Myth of the Zone

published Aug 28, 2010

I’ve been thinking about how I work best for a while, and I was inspired by Peter’s post on his new workflow/schedule to write something up about it.

First, the provocative title is only partly link-bait. For me, the zone really is a myth. I keep hearing and reading about coders getting into zones and coming out of the mist 10 hours later with reams of awesome code (and, presumably, a really full bladder).

I’ve never had this happen.

Maybe it’s just me, and everyone else does get into a zone regularly. Maybe the zone isn’t as universal as hacker literature makes it out to be. Maybe the zone is a young hacker thing, and I’m getting towards the old side of the scale. Or, maybe it really is a myth.

Whatever the answer is, my version of “The Zone” looks like this:

  1. Start working on something.
  2. Hit a wall where I can’t find a solution or the solution I’ve come up with is too complicated.
  3. Realize “Hey, I’ve hit a wall. I should change the scenery” (The realization is the hard part).
  4. Go for a walk / go to a coffee shop / leave my home office and head to the “real” office / etc.
  5. On the way there, mull over the problem. Or don’t bother, and let my subconscious do that for me.
  6. Arrive at my destination, unpack my laptop, and find out that I’ve solved the problem or, at the very least, have come up with a new way to look at solving the problem.
  7. Happily code away until I get stuck again, whereupon I go for another walk.

Luckily, I live close to a lot of coffee shops. Also, our new office is about a 25 minute walk from home, and a lot of those coffee shops are en route.

This means that I can start working at home (or, preferably, at a coffee shop. That way I don’t spend half an hour surfing the web in the morning). Then, when I hit that inevitable wall, I continue my commute and arrive at the office with a fresh solution to whatever problem I’ve been working on.

Here are a few more thought on this in no particular order.

  1. The hard part really is coming to the realization that I’m banging my head against the wall. I’ve started listening more closely to those little voices in the back of my head saying “There must be an easier way to do this” or “Do you really need this feature?” or “Sheesh, I need a break.” Once I started doing this, I spent a lot less time going down rat holes.

  2. Part of the problem is that I tend to dive into the details really quickly and don’t spend long enough looking at the big picture. I’m working on this. I’d suspect that most (not all, but most) programmers do this too.

  3. It’s a heckuva lot more productive to go for a 10 minute walk than to bang your head against a wall for an hour.

  4. This would be tough to do in a typical office environment – I don’t think I would’ve been able to go out for a walk and a coffee a few times a day while I was working at Creo (and Creo was far from being a bureaucratic, top-down organization).

  5. Pair programming or describing the problem to someone or Rubber Ducking also get you out of those ruts. You don’t get those nice walks, though. Also, you may break someone out of their zone if you interrupt them to describe the problem to them…

  6. Surfing the web does not give you the same results as going for a walk. You absolutely have to do something active.

  7. Jamis Buck recommends getting a standing desk to help you walk away from the desk more easily. I may have to try this.

I’d love to hear any thoughts you have on the zone, whether or not it’s a myth, and how you stop yourself from banging your head against the wall.

Custom Validators with Validatious

published Aug 10, 2010

When I talked about Validatious previously, I had written almost no Javascript and had no need for any validations besides making sure that fields were required and of a certain minimum length.

On another project, I needed to validate some North American phone numbers and Canadian postal codes. It turned out to be really simple to add custom validations. Here’s how it’s done.

First, here’s a form:

<form id="test_form" class="validate">
  <div class="formset">
  <label for="address">Address</label><br />
  <input type="text" id="address" name="address" class="required" />
  </div>
  <div class="formset">
    <label for="postal_code">Postal Code</label><br />
    <input type="text" id="postal_code" name="postal_code" class="required cndpostalcode" />
  </div>
  <div class="formset">
    <label for="phone_number">Phone Number</label><br />
    <input type="text" id="phone_number" name="phone_number" class="required phone" />
  </div>
</form>

Note that I’ve added a class of cdnpostalcode to the postal code input and a class of phone to the phone number input. You still need the required class to turn on the validation.

This won’t do anything other than require that the inputs be filled out yet, as we haven’t added our custom validators in. To register a validator, you do something like this:

v2.Validator.reg('validatorClassName', function(field, value, params) { 
   return true /* some call back that returns true or false */ 
})

Most of the time, the callback is a regular expression. Let’s tackle the Canadian Postal Code one first, as they’re a bit simpler.

A Canadian Postal Code looks like A1A 1A1 or S7J 3A2 or H0H 0H0 ( bet you didn’t know that Santa lived in Canada! ). It’s letter-number-letter space number-letter-number. The space is optional, too. So, a regular expression to match a Canadian Postal Code might look like this:

/^\w\d\w\s*\d\w\s$/

We’ll register the class cdnpostalcode to trigger this validation like this:

v2.Validator.reg('cdnpostalcode', function(field, value, params) {
  return /^\w\d\w\s*\d\w\d$/.test(value)
})

The phone number validator is exactly the same, except the regular expression is a bit more hairy. This regex is from regexlib.com (I added in the part that accepts an extension).

v2.Validator.reg('phone', function(field, value, params) {
  return /^([0-9]( |-)?)?(\(?[0-9]{3}\)?|[0-9]{3})( |-)?([0-9]{3}( |-)?[0-9]{4}|[a-zA-Z0-9]{7})[ x0-9]*$/.test(value)
})

If we add those two chunks of Javascript to the HTML that calls our form, then they will validate the postal code and phone number correctly. The only problem is that the validation error message will be something like “Postal Code does not pass cdnpostalcode validator”. Not very pretty. There are a few more options to Validator.reg that will allow us to fix that.

The signature for Validator.reg looks like this (it’s in src/core/validator.js):

reg: function(name, fn, params, message, aliases, acceptEmpty) {
}

So far, we’ve only used the first two parameters (name and fn). The params argument would allow us to specify the parameters used in the validator. We don’t need that, so we’ll pass in null. Then, we can set the default message. Like this:

var postal_code_message = "You must provide a valid Canadian Postal Code"
v2.Validator.reg('cdnpostalcode', function(field, value, params) {
  return /^\w\d\w\s*\d\w\d$/.test(value)
}, null, postal_code_message)

similarly for the phone validator:

var phone_message = "You must provide a valid phone number"
v2.Validator.reg('phone', function(field, value, params) {
  return /^([0-9]( |-)?)?(\(?[0-9]{3}\)?|[0-9]{3})( |-)?([0-9]{3}( |-)?[0-9]{4}|[a-zA-Z0-9]{7})[ x0-9]*$/.test(value)
}, null, phone_message)

Here’s what the full HTML looks like. You can see this form in action here. If you’re intrigued, make sure to go check out Validatious.

<html>
  <head>
    <title>Demo: Custom Validations with Validatious</title>
    <style type="text/css">
      ul.messages {
        list-style-type: none;
        padding: 0;
        margin: 15px 0 0 0;
      }

      .error ul.messages li {
        color: red;
        padding: 0;
        margin: 0;
      }
    </style>

  </head>
  <body>
    <h1>Demo: Custom Validations with Validatious</h1>
    <form id="test_form" class="validate">
      <div class="formset">
      <label for="address">Address</label><br />
      <input type="text" id="address" name="address" class="required" />
      </div>
      <div class="formset">
        <label for="postal_code">Postal Code</label><br />
        <input type="text" id="postal_code" name="postal_code" class="required cdnpostalcode" />
      </div>
      <div class="formset">
        <label for="phone_number">Phone Number</label><br />
        <input type="text" id="phone_number" name="phone_number" class="required phone" />
      </div>
    </form>
    <a href="/2010/08/custom-validators-with-validatious.html">Back to the blog post</a>

    <script src="/demos/javascripts/validatious.min.js" type="text/javascript"></script>
    <script type="text/javascript">
      v2.Field.prototype.instant = true; // make the validations happen instantly

      var postal_code_message = "You must provide a valid Canadian Postal Code"
      v2.Validator.reg('cdnpostalcode', function(field, value, params) {
        return /^\w\d\w\s*\d\w\d$/.test(value)
      }, null, postal_code_message)

      var phone_message = "You must provide a valid phone number"
      v2.Validator.reg('phone', function(field, value, params) {
        return /^([0-9]( |-)?)?(\(?[0-9]{3}\)?|[0-9]{3})( |-)?([0-9]{3}( |-)?[0-9]{4}|[a-zA-Z0-9]{7})[ x0-9]*$/.test(value)
      }, null, phone_message)
    </script>

  </body>
</html>

Validating with Validatious: A Quick Tutorial

published Aug 03, 2010

I had a need for some client side validation for a project, so I looked into a few validation plugins. We’re using JQuery on the project (of course!), so I looked into the standard jquery validation plugins (jquery.validate looked nice, and so did jQuery Validation).

In the end, though, I ended up going with the totally unobtrusive Validatious.

I’m totally happy with my choice, but I ran into a gotchas and figured out a few things that I thought I should mention.

First, though, a quick overview of Validatious.

A quick intro to Validatious

Validatious has two different APIs: a Javascript DSL and an HTML extension. I used the HTML extension.

To use it, you load the script with a standard script tag

<script src="/javascripts/validatious.min.js" type="text/javascript"></script>

Then, you add some class names to elements. For example, to validate a form that looks like this:

<form id='donation_form' action='/donate'>
  <label for='first_name'>First Name</label>
  <input type='text' name='first_name' id='first_name' />
  <label for='last_name'>Last Name</label>
  <input type='text' name='last_name' id='last_name' />
  <label for='amount'>Amount to donate</label>
  <input type='text' name='amount' id='amount' />
</form>

You need to add a class of validate to the form element, and a validation class to each of the form elements that you want to validate. Validation classes are things like required (this element is required) or min-val_3 (this element has a minimum value of 3). Your final file might look something like this:

<html>
  <head>
    <title>Validatious Demo</title>
  </head>
  <body>
    <h1>Validatious Demo</h1>

    <form id='donation_form' action='#' class='validate'>
      <label for='first_name'>First Name</label>
      <input type='text' name='first_name' id='first_name' class='required' /><br />
      <label for='last_name'>Last Name</label>
      <input type='text' name='last_name' id='last_name' class='required'/><br />
      <label for='amount'>Amount to donate</label>
      <input type='text' name='amount' id='amount' class='required min-val_3' title='The donation amount must be at least $3'/><br />
      <input type='submit' value='submit!' />
    </form>
    <script src="/demos/javascripts/validatious.min.js" type="text/javascript"></script>
  </body>
</html>

All I’ve done is:

  • include the javascript.
  • add a class of validate to the form element.
  • add a class of required to the inputs.
  • add a class of min-val_3 to the final input (I want a donation of at least $3 or it’s not worth my time!).
  • add a title to the donation input to set a custom validation error.

Notice what I didn’t do: write any Javascript. I like that :).

You can see the form in action. Note that you have to click on submit to see the validation. Also note that the form and the validation errors are really ugly . We’ll fix all of that before the end of this.

There’s lots more you can do here. A reasonable place to start learning is on the Validatious features page, which contains a bunch of mini tutorials to get you started.

The Gotcha

I mentioned a gotcha. The problem, which almost made me give up on this plugin right away, is that

if you try to validate a form element with no name or id, it blows up with a cryptic error message like this:

     Uncaught Error: SYNTAX_ERR: DOM Exception 12

If you see this, go through and make sure that all of your form elements have ids and names.

Go see it in in-action.

Validating on blur

In the original demo, you had to click the submit button to see the validations. There’s been some research done that shows that validating on blur (just after the user has entered the value into the input box) is more effective. Luckily, that’s easy enough to do. Just add a script like this to your form:

v2.Field.prototype.instant = true; // make the validations happen instantly

Putting validations closer to the input field

One thing I didn’t like was that the validation errors were all getting piled up on the top of the form. It turns out that Validatious inserts the errors at the beginning of the parent of the input element that has an error. So, the fix is to wrap all of your input elements in a div tag. Not perfect, I know, but it’s reasonable if you give it a class name like formset and use it to hook some CSS in as well.

That’s semantic, right? It works, and that’s semantic enough for me. Don’t tell the standardistas.

Here’s what that looks like:

<form id='donation_form' action='#' class='validate'>
  <div class='formset'>
     <label for='first_name'>First Name</label>
     <input type='text' name='first_name' id='first_name' class='required' /><br />
  </div>
  <div class='formset'>
    <label for='last_name'>Last Name</label>
    <input type='text' name='last_name' id='last_name' class='required'/><br />
  </div>
  <div class='formset'>
    <label for='amount'>Amount to donate</label>
    <input type='text' name='amount' id='amount' class='required min-val_3' /><br />
  </div>
  <input type='submit' value='submit!' />
</form>

Validating via Javascript

As per usual, I wanted to do something a little different with my form. It was a very complex form, and I needed to do a few things before submitting. So, I needed to intercept the click on the submit button. Also, I wanted to style the button as an image with hover and active states, which is easier to do with an anchor tag than an submit input.

This all meant that I needed to trigger the validations from Javascript. You do this with a Javascript line like this:

var validate = v2.Form.forms['form_id'].validate()

replacing form_id with the id of the form you are validating. The validate variable will be true if the form is valid, false otherwise.

In the end, that’s all of the JavaScript I had to use. Everything else was as simple as adding a class to the form and then to all of the form elements I wanted to validate. I’m definitely using Validatious next time I need some client side validation.

Bringing it home

Here’s a final version of the form, with the formset divs, validation on blur, validating via Javascript and even a bit of styling:

<html>
  <head>
    <title>Validatious Demo</title>
    <style type="text/css">
      ul.messages {
        list-style-type: none;
        padding: 0;
        margin: 15px 0 0 0;
      }

      .error ul.messages li {
        color: red;
        padding: 0;
        margin: 0;
      }
    </style>
  </head>
  <body>
    <h1>Validatious Demo</h1>

    <form id='donation_form' action='#' class='validate'>
      <div class='formset'>
        <label for='first_name'>First Name</label>
        <input type='text' name='first_name' id='first_name' class='required' /><br />
      </div>
      <div class='formset'>
        <label for='last_name'>Last Name</label>
        <input type='text' name='last_name' id='last_name' class='required'/><br />
      </div>
      <div class='formset'>
        <label for='amount'>Amount to donate</label>
        <input type='text' name='amount' id='amount' class='min-val_3' /><br />
      </div>
      <a href='#' id='submitter'>submit!</a>
    </form>
    <script src="/demos/javascripts/validatious.min.js" type="text/javascript"></script>
    <script src="/demos/javascripts/jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
      v2.Field.prototype.instant = true; // make the validations happen instantly
      $('#submitter').click(function() {
        var validate = v2.Form.forms['donation_form'].validate()
        // if validate is true then submit via AJAX or something ...
      })
    </script>
  </body>
</html>

You can see it in action here.

If you’re interested, go check Validatious out.

Update: I’ve also written a post on writing custom validators with Validatious.

My Git Aliases

published Jul 27, 2010

After you’ve been using Git for a while, you start to get kind of bored with typing git commit -a -m "some message" all the time, and you never want to see this message ever again:

  $> git stastus
  git: 'stastus' is not a git-command. See 'git --help'.
  
  Did you mean this?
        status

(why can’t you just do it for me!)

Ken had set up some nice aliases for git on his machine, so I totally stole them. My only regret is that it took me so long to do it. (I am glad that I didn’t do this right when I started using Git, though – it was worth while getting the long commands deeply ingrained into my memory before I started taking short cuts).

Here’s what I came up with:

   alias gpom='git push origin master'
   alias st='git status'
   alias gppp='git pull peter master'
   alias gcam='git commit -a -m '
   alias gd='git diff '

Obviously you don’t want the git pull peter master one, but the rest are probably close to something you use all the time.

I also wanted one that replaces

  git commit some_file some_other_file -m "commit message"

with something like

 gcom some_file some_other_file "commit message"

but my bash-fu wasn’t strong enough, so I resorted to a quick Ruby script instead:

#!/usr/bin/env ruby
USAGE = 'gcom <file 1> <file 2> "commit message" ==> git commit <file 1> <file 2> -m "commit message"'
(puts USAGE; exit) if(ARGV.length == 0)
message = ARGV.pop
exec "git commit #{ARGV.join(' ')} -m \"#{message}\""

These are still a work in progress, and there’s nothing earth shattering here, but I thought I’d throw up a post just for the heck of it.

How scottpatten.ca came to be

published Jul 27, 2010

I was happily working away on Leanpub one day when I got a phone call. It was some guy from the city of Vancouver asking why I hadn’t paid for my business license for spatten design.

I explained that I was no longer running spatten design as a business, so there was obviously no need to pay the $200 per year fee. Seemed pretty straight forward to me.

Unfortunately, he wasn’t buying any of that. He had gone all CSI on me and done a Google search for spatten design and found a (gasp!) running web site at http://spattendesign.com. There was a website running called spattendesign.com, therefore I was still in business.

Q E fucking D.

He was quite proud of his cyber sleuthing skills, and didn’t want to hear that the fact that the website was running had no bearing on whether or not I was running it as a business.

The front page of the site looked like this at the time:

spattendesign.com on May 3rd, 2010

Note a few things:

  1. It says I work full time at Ruboss
  2. The latest blog post was on April 20th. That’s April 20th, 2009.
  3. There’s no mention that I do any consulting work as spatten design (and I don’t! Trust me, running a startup and a consultancy is enough work for me.)

I tried to explain that there were useful things on that site that people still used (mostly the S3 synch plugin), but he didn’t really care. The only thing I could do to avoid paying $200/year for a business license for a business that does not exist was take down the web site.

After a long and rather unfruitful discussion, I basically hung up on him.

So, here we are. I’ve made spattendesign.com redirect to scottpatten.ca. Hopefully that’s close enough to taking down the site that I don’t get another call from the Googler extraordinaire from the City of Vancouver.

On the plus side, I finally registered scottpatten.ca, and I had a great time getting this site up and running with Jekyll, and got rid of the old blog, which had been running on an old and creaky install of Mephisto. Also, Jekyll makes me actually want to blog (like a hacker).

Don’t worry, this is as close as I get to ranting. Your very irregularly scheduled technical posts will be coming back soon.