• I joined Inspire9 in December, 2011 and my work life changed considerably.
• I left my church of ten years and moved in with two high school mates and their partners near the city but far enough out of the smog for it to be enjoyable.
• I was a beginner again.
• I rested and played often by going to St Kilda beach or eating out with friends.
• I bought a bicycle and began riding to work whenever the sun was out.

It took me a little while to actually enjoy exercise other than riding but I got there in the end. There’s a large group interested in fitness at inspire9 and they encouraged me to start running, now I love it. Recently I was inspired by the gymnastics of Cirque du Soleil and Ido Portal’s thoughts on movement. I’m riding and running regularly and practicing my handstands most days, the stretches and strength exercises make me feel healthier, happier and more balanced. I attended Yoga for the first time last week and instantly enjoyed it, even though I found it difficult.

Lastly but certainly not least there is a good woman in my life. Trish is honest, kind and beautiful, we laugh often and comfort each another. I like her a lot.

Right now, I feel I am living a more balanced and healthy life than I ever have:

• A balance in my physical body and spirituality.
• A balance in intellectual study and artistic expression.
• A balance in my relationships and my work.

I have been wanting to learn more about meditation for a while now, ever since reading @xshay’s post I suppose. Ryan Singer’s OffscreenMag article and Steve Jobs biography also encouraged me to look more closely at it. These three gents are more intelligent, more skilled and more balanced than most.

My first surprise was finding that this form of Buddhist meditation wasn’t religious at all. It asserts that suffering is caused by not understanding our own reactions – the reaction to pleasant sensations is craving, our reaction to unpleasant sensations is aversion. The meditation itself focuses on breath and progresses to focusing on sensations in every part of the body, one at a time.

The aim of the meditation is to become aware of how our mind behaves, by trying to focus on one thing only(breath coming out of the nostrils) we become aware of all of the different sensations but we don’t react to them.
As I understand it, the purpose of Vipassana is to simply observe ourselves to train our minds to focus, so that rather than reacting to our senses without understanding, we can simply recognize the sensation and choose how to respond.

It also includes some basic teaching on morality and encourages us to keep a pure mind:

1. to abstain from killing any living creature
2. to abstain from stealing
3. to abstain from sexual misconduct
4. to abstain from false speech
5. to abstain from intoxicants

One part of the teaching that really resonated with me was teaching that we have only ourselves to blame for our unhappiness and suffering because it originates in our mind. If we stop reacting to unpleasant sensations or wrongs that we feel have been made to us we can simply recognize them from a distance and move on. No need to carry them with us and continue our suffering.

I’m willing to give the practical aspects of Vipassana a shot and see what I can learn about myself in the process of meditation, one of the real attractions to me is it’s simplicity. I consider myself a happy person, but I would like to have greater control over how I react.

An enjoyable day of work is:

not having to wake up to an alarm
espresso
a casual ride along the Yarra
friendly faces
good music
good food
learning something new
working with well designed things
working with @wernah designed things
having machines work for you
solving a problem
deleting code
not wasting time

This is what my average day looks like and it’s lovely. I work on a macbook pro with Ruby, Rails, Sass & Compass, CoffeeScript and excellent browsers i.e. Tools and frameworks that make me happy and keep me from repeating myself. Programs and machines do the repetitive things far better than me so I let them and then thank them for their efforts, praising them to my fellow humans.

I’ve been consciously working on removing things from my workflow that aren’t pleasant or enjoyable. I have no time for things that require too much effort to achieve too little. I want to get as much done as a I can with as little effort, and I want to enjoy doing it too.
I suppose this is why I never open up Windows, though I am interested in IE10 and Windows 8.

All of my development work is done in Firefox and Chrome. When I release something, most of the time I will open up a VM with IE8 and 9 with the aim of making it work and then getting the hell out of there.
zoom: 1, position: relative or float: left will fix things in IE.
Learn about “hasLayout”, it will help you get out of there sooner.

If it’s CSS3 that’s difficult to provide a fallback for, take a deep breath and throw a PIE at it. Seriously.
With Sass and Compass you simply include it on the problematic elements and Boom, Chris Eppstein, Jason Johnston, thank you.

.hawt-element {
  @include pie;
}

I use shims and poly-fills cautiously but I have no problem throwing these types of scripted band-aids at Internet Explorer, it throws off the feng shui in my zen garden.

For me, breaking the mould of routine has always triggered fresh thoughts on life and death.
When I have moved on and not known where I’m headed I ask a lot of questions, these questions force me to make conscious decisions about my future.

Death motivates me to begin new things.
This will sound exceptionally lame, but when Steve Jobs died I decided to quit my job of four years. It is an uncomfortable reminder that our lives are indeed a vapour, we are here for only a moment and then we leave.

Death presents someone’s life to me as a short, singular entity with a sure end.
I replay memories, perhaps writing some of the dearer ones down.
If you forget interactions with someone who has passed away, those moments are lost forever. Our lives are the cumulation of these sorts of simple interactions, we mustn’t forget them.

My favourite relative passed away last week. Winnie wasn’t a direct relative, she was my mother’s father’s brother’s spouse. I only remember meeting her a dozen times or so, but I loved her. I loved her joyfulness and the excited way she reached out to greet me when I said hello at Christmases and birthday’s. Her beaming smile and laugh was infectious, she expected nothing from me, she seemed perfectly happy simply to exchange smiles and share each others company.

Time had done it’s work and taken most of her eyesight and mobility, so she held my hands and found her way around my fingers like a blind person would to recognise and acknowledge another.
I will miss her.

Death makes me sit up and take notice, of life’s simple interactions and also the bigger questions like our life’s work, legacy and meaning.

Ecclesiastes is an exploration of the meaning of life, the final chapter concludes with an exploration of aging and ultimately death.

when the keepers of the house tremble,
    and the strong men stoop,
when the grinders cease because they are few,
    and those looking through the windows grow dim;
when the doors to the street are closed
    and the sound of grinding fades;
when people rise up at the sound of birds,
    but all their songs grow faint;
when people are afraid of heights
    and of dangers in the streets;
when the almond tree blossoms
    and the grasshopper drags itself along
    and desire no longer is stirred.
Then people go to their eternal home
    and mourners go about the streets.

It’s true that the role of the front-end developer has become both more important & more complicated with the tooling and experience we are expected to have under our belts, but it’s become easier in a lot of respects.

More important

Javascript has grown up, left home, and is out taking on the world.  It is the most popular language on github and is continually taking processing off the server and moving it to the client, this trend will continue.
HTML5 has promoted web tech to another level of interactivity and power.
CSS3 has enabled designers to implement effect and animations that previously required a lot of complex scripting or flash.
Mobile devices have come out with great web browsers like Mobile Safari, Opera, Chrome and Firefox.
Frameworks like PhoneGap have enabled web apps to power installed apps on all the major platforms.
The web as a platform is kicking ass – an enthusistic crowd of designers/developers are building it daily, contributing to each others work. The web is deployable everywhere, future proof, cheap to build, and more powerful than ever.

More complicated

If you read Rebecca’s article you might feel overwhelmed at the level of things you need to learn, so lets simplify it – HTML, CSS & Javascript is what’s important.  Know those and you can develop for the web.

Tools have complicated things though, there is now an ever present learning curve before us.  If you join a new team or project you will probably be expected to learn a handful of unfamiliar tools that the team has adopted, you’d also do well to be able to offer a handful of your own practices/tools/frameworks that you like.  Tooling is really highly valued at the moment.

I’m a keen learner but a late adopter, I don’t jump from one hot thing to the next.
If you always adopt the hot new thing, you will often be adopting more code and complexity, the key is to find tools that require less code and complexity and allow you to do more.

The Javascript scene at the moment is very much the wild west.  It seems only yesterday that people actually cared what happened when javascript was disabled in the browser.  There is no one right way to build front-end web applications, my advice is to keep it as simple as possible and write as little code as you can get away with.

Yet Simpler

Browsers are great now, IE is dying.
Web standards have won and it’s now easier to develop for the web.
CSS3 means that there’s a lot of power and visual reward for a small amount of effort / code  #winning
Libraries – while there’s more to learn, a lot of these libraries allow you to go further and do more.

SASS, Compass, jQuery, git, github, cucumber and Rails are my favorite tools – each save me a lot of time and allow me to write better, more elegant and maintainable code.

Leaving full-time employment

Leaving my job was the best thing I have done for my career and personal development.
Being unemployed without a plan is a very freeing and revealing thing, you are forced to ask those important questions like “What do I want to be doing with my short time left on the planet?” and “What do I want my work to accomplish?”.

I haven’t yet answered either of those, but having some free time on my hands I was able for the first time in a long while choose what I wanted to work on. I set very simple, achievable goals for myself – I would linger around Inspire9, take on some freelance jobs to support myself and study. For a year I would see if I could sustain myself and work on my craft, I also wanted to work along side talented people I could learn from.

Client work

I love working directly with clients, being able to contribute to a design, offer advice across wide areas(staffing, ux, design, development, workflows, timelines, marketing etc.). I like the fact that small clients are small, they have more riding on their projects being successful and I like being able to contribute to that success.

I will continue to take on client work wherever I can.

Extremely fortunate

I feel extremely fortunate to be working on the web, in Melbourne. There is a huge amount of good work available, I thought this would be the case but I was still surprised at the amount. If you feel that you could be doing something more satisfying with your time, leave.

I only worked with four clients in my short time as a freelancer, two of those clients offered me ongoing work for the rest of the year that I’ve gladly accepted.

I first laid out a grid with a visible region the size of one of the pages.

<div id="grid-wrap">
  <div id="grid">
    <div id="pos-0-0"></div>
    <div id="pos-1-0"></div>
    <div id="pos-2-0"></div>
    <div id="pos-0-1"></div>
    <div id="pos-1-1"></div>
    <div id="pos-2-1"></div>
    <div id="pos-0-2"></div>
    <div id="pos-1-2"></div>
    <div id="pos-2-2"></div>
  </div>
</div>

CSS

All examples use SASS and Compass.

$height: 748px;
$width: 1024px;
$rows = 3;
$cols = 3;

#grid-wrap {
  height: $height;
  width: $width;
  overflow: hidden;
}
#grid {
  height: $height * $rows;
  width: $width * $cols;
  @include transition(all .3s ease-in-out);
}
#grid > div {
  position: absolute;
  height: $height;
  width: $width;
  -webkit-backface-visibility: hidden;
}
@for $y from 0 through $rows-1 {
  @for $x from 0 through $cols-1 {
    .no-csstransforms {
      .pos-$x-$y {
        top: $y;
        left: $x;
      }
    }
    .csstransforms {
      .pos-$x-$y #grid {
        @include transform(translate($x*-$width, $y*-$height));
      }
    }
  }
}

I first just transitioned the top and left values and it worked everywhere but the performance on the iPad wasn’t the best. Webkit has heavily optimised transforms using translate so the result was much better using translate. You could use modernizr to get the best of both worlds and serve transforms to the browsers that understand it. #winning.

-webkit-backface-visibility: hidden; is necessary so that the device renders the content off screen so that it doesn’t repaint when it’s scrolled in from one of the edges – without it the images flicker after a transition.

-webkit-backface-visibility did add a problem for me though, I was using a <video> element with video.js and I couldn’t click the play button within one of the elements with that property set. It took me a while to figure out but if you add a transform to the elements you need to interact with it somehow pulls them back into line.

.video {
  @include transform(translate(0, 0));
}

Javascript

I modified the jQuery Touchwipe Plugin so that it normalised click and drag as well as touch events. I also added a afterSwipe callback to make it a little more useful for me.

$body = $('body');
var updatePos = function() {
  $body[0].className = 'pos-' + pos.x + '-' + pos.y;
}
$swiper = $body.swipe({
  swipeLeft: function() {
    if (pos.x < 2 && pos.y !== 0)
    pos.x = pos.x+1;
  },
  swipeRight: function() {
    if (pos.x > 0 && pos.y !== 0)
    pos.x = pos.x-1;
  },
  swipeUp: function() {
    if (pos.y < 2)
    pos.y = pos.y+1;
  },
  swipeDown: function() {
    if (pos.y > 0)
    pos.y = pos.y-1;
  },
  afterSwipe: updatePos,
  threshold: 20,
  preventDefaultEvents: true
});

It’s fun playing with some of the -webkit features and seeing how they’ve optimised different features they deemed worthy enough for it. The ease-in-out transitions with transforms feel just like the native experience – It’s worth going the extra steps to optimise for these devices.

The Super Game of Life was beautifully designed by a Melbourne design agency, it’s a simple turn based game with multiple choice answers.

You spin to move your car around the track, answering questions along the way, if you answer correctly you add sweet moolah to your Super, as you pass Go you collect 2 years. The game ends when you answer all 12 questions correctly or are 10 years wiser.

Animation basics

All animation libraries at their core are a loop that runs as many times as they can over a given time, throughout the loop they calculate the change in position by multiplying the total distance by a progress(between 0 and 1) by an easing function. Easing functions make an animation slow down or speed up throughout the animation.

Here’s a simple example showing how a position between 0 and 100 could be calculated.

var easing = {
  linear: function (n) {
    return n;
  },
  easeIn: function (n) {
    return Math.pow(n, 1.7);
  },
  easeOut: function (n) {
    return Math.pow(n, .48);
  }
}
var progress = [0,.1,.2,.3,.4,.5,.6,.7,.8,.9,1];
var distance = 100;

for (var i=0, ii = progress.length; i<ii; i++) {
  var position = distance * easing.linear(progress[i])
  console.log(position);
}

Read through the source of Animator.js if you want to learn more about it.

The Car

I’m a big fan of Raphael.js so at first I tried to use SVG exclusively for the car, animation and path tracking – and it was working, but testing on the first generation iPad the performance was just too slow to have the desired effect for the game. I ended up using SVG for the path & Canvas for the rendering.

Motion paths

SVG paths have the DOM methods getTotalLength() and getPointAtLength(length) which can be used to get specific points along a path.
Those are all we need to move an element along an SVG path with some simple animation timers – I used jQuery’s animate function to do this so I didn’t have to re-invent them. You could pull parts of Animator.js out if you wanted to this yourself.

Rotation

Math.atan2(point2.x-point1.x, point2.y-point1.y) returns the angle between two points in radians.

When drawing an image on a rotated canvas you need to draw relative to the pivot point of the image – In the case of the car that’s the point at the base between the wheels.
ctx.drawImage(image, 0-(width/2), 0-height, width, height);

Canvas’ transformation matrix

It took me a little while to understan Canvas’ translation matrix, the Mozilla Canvas docs helped.

If you’re going to be using rotation in your canvas animations you’ll need to use save() and restore() to save the current transformation matrix so that you can get back to different points in building the frames. I think of it as building a frame on the way up using translate, rotate & draw, then tearing it back down again on the way back.

• clear – entire canvas
• save – untransformed matrix at (0,0)
• translate – point(x,y)
• rotate – radians
• draw – relative to pivot point
• restore – restore untransformed matrix

The code

var game = {
  postion: 1,
  steps: 5,
  halfPi: Math.PI/2,
  initPaper: function() {
    var p = game.paper = Raphael('paper', 1022, 762);
    game.path = p.path('M196.5,117.5L906,118c0,0,27.038,5.5,27,29c-0.039,24.331,0,96,0,96s2,28-23,32s-283,2-283,2s-75.86,11.37-76,91c-0.142,81.018,71,88,71,88h52c0,0,31,6,31,40s1,92,1,92s-8,68-74,67s-264,0.011-264,0.011s-24-2.934-24-29.011c0-22.5,22.913-25.153,22.913-25.153L408,601c0,0,75-17,79-94s-82.742-93.03-82.742-93.03L173,414c0,0-76-6-78-78s0-113,0-113l7-28c0,0,0-39,26-62s60-21,60-21L196.5,117.5z').attr({ 'stroke-width': 0 });
    game.pathPoints = [.96, .01, .1, .176, .247, .31, .42, .5, .570, .645, .71, .81, .882, .999];
    game.pathLength = game.path.getTotalLength();
    game.canvas = document.getElementById('canvas');
    game.ctx = dgame.canvas.getContext("2d");

    var img = new Image();
    img.src = 'img/car-work-horse-small.png';
    game.carImage = img;
    game.animateCar(.95, 1, 1000);
  }
  stepCar: function() {
    if (game.steps == 0) return;
    game.steps--;
    var start = game.position;
    game.position++;
    game.animateCar(game.pathPoints[start], game.pathPoints[game.position], 1000, game.stepCar);
  },
  paintCar: function(point) {
    game.x = point.x;
    game.y = point.y;

    var ctx = game.ctx;
    ctx.clearRect(0, 0, game.canvas.width, game.canvas.height);
    ctx.save();
    ctx.translate(game.x, game.y);
    ctx.rotate(game.rotation);
    ctx.drawImage(game.carImage, 0-(game.carWidth/2), 0-game.carHeight, game.carWidth, game.carHeight);
    ctx.restore();
  },
  animateCar: function(start, end, time, complete) {
    var distance = (end-start)*game.pathLength;
    start = start * game.pathLength;
    var ctx = game.ctx;
    var dy, dx, rotation;
    $canvas.animate({ "progress": 1 }, {
      easing: "linear",
      duration: time,
      step: function(a, obj) {
        var point = game.path.getPointAtLength(start + (obj.state * distance));
        dx = point.x-game.x;
        dy = point.y-game.y;
        var rotation = 0-(Math.atan2(dx,dy) - game.halfPi);
        if (dx == 0 && dy == 0) return; /* same point */
        game.rotation = rotation;
        game.paintCar(point);
      },
      complete: complete || function() {}
    });
  }
}

The Spinner

I started out making the spinner rotate with CSS transitions when a click & drag was detected. That was pretty simple to achieve with CSS transitions for a smooth animation with easing. Sass also helped keep the code nice and simple with math, variables & loops.

#wheel {
  background: url(../img/spinner.png);
  height: 230px;
  width: 230px;
  position: absolute;
  @include transition(all 1.5s ease-out);
  @for $i from 1 through 6 {
    $rotation = 360deg*3 + $i*60;
    &.spin-#{$i} {
      @include transform(rotate($rotation));
    }
    &.reverse.spin-#{$i} {
      @include transform(rotate(0-$rotation));
    }
  }
}

var touching = false;
var down = function(event) {
  touching = true;
  return false;
}
var move = function(event) {
  if (touching && !game.spinning) {
    spin();
    touching = false;
  }
}
var up = function(event) {
  touching = false;
}
if (window.Touch) {
  $spinner.bind('touchstart',down);
  $spinner.bind('touchmove',move);
  $spinner.bind('touchend',up);
}
else {
  $spinner.mousedown(down);
  $spinner.mousemove(move);
  $spinner.mouseup(up);
}

function spin() {
  game.spinning = true;
  var number = Math.floor(Math.random()*6)+1;
  $wheel.addClass('spin-'+number);
  game.steps = 6-number || 6;

  setTimeout(function() {
    $wheel.removeClass();
    game.spinning = false;
  }, 3000);
}

Going both ways

Making the spinner go in the reverse was a little more challenging. I needed to capture two points and then figure out which direction it was moving relative to the center of the spinner.

I ended up finding a pretty easy solution by dividing the spinner into into 4 quadrants and simply checking it was moving in one direction. Not perfect, but it works for real world cases.

e.g. If you touched in q1 it’s spinning in reverse if you move down.

var offset = $wheel.offset();
var pos = null,
quadrant = null,
center = { x: offset.left+115, y: offset.top+115 };

function getPos(event) {
  return {
    x: event.pageX,
    y: event.pageY
  }
}
function getQuadrant() {
  if (pos.x <= center.x && pos.y <= center.y)
    return 1;
  if (pos.x >= center.x && pos.y <= center.y)
    return 2;
  if (pos.x >= center.x && pos.y >= center.y)
    return 3;
  if (pos.x <= center.x && pos.y >= center.y)
    return 4;
  return null;
}
var down = function(event) {
  event = (window.Touch) ? event.originalEvent.touches[0] : event.originalEvent;
  pos = getPos(event);
  q = getQuadrant();
}
var move = function(event) {
  event = (window.Touch) ? event.originalEvent.touches[0] : event.originalEvent;
  var pos2 = getPos(event);
  if ((q == 1 && pos2.y > pos.y)
   || (q == 2 && pos2.x < pos.x)
   || (q == 3 && pos2.y < pos.y)
   || (q == 4 && pos2.x > pos.x)) {
    game.spinReverse = true;
  }
  else {
    game.spinReverse = false;
  }
}
var up = function(event) {
  pos = null;
}

Modals and ornaments

The dialogs are positioned off screen and transitioned in just by adding a class ‘active’. There’s really no need for complex javascript frameworks to achieve these sorts of effects anymore – with CSS3′s transitions it makes it easy.

I’ve started using generated content for ornamental elements that aren’t absolutely necessary for an element to function like the ribbons top & bottom of the dialogs.

<div id="overlay" class="active"></div>
<div id="choose" class="card active">
</div>

#overlay {
  background: rgba(0,0,0,.4);
  position: fixed;
  height: 100%;
  width: 100%;
  opacity: 0;
  @include transition(opacity .3s linear);
  &.active {
    opacity: 1;
  }
}
.card {
  position: absolute;
  top: -800px;
  opacity: 0;
  background: #fff url(../img/texture.jpg);
  @include transition(all .5s ease-in);
  &.active {
    top: 115px;
    opacity: 1;
  }
  &:before {
    content: '';
    height: 11px;
    position: absolute;
    top: -11px;
    left: 0;
    right: 0;
    background: url(../img/ribbon-top.png);
  }
  &:after {
    content: '';
    height: 11px;
    position: absolute;
    bottom: -11px;
    left: 0;
    right: 0;
    background: url(../img/ribbon-bottom.png);
  }
}

These newer CSS properties make the code a lot leaner and easier to change, the way it should be.

And that’s it! I hope some of the code is useful in your own projects.

Ingredients

The Jalapeno mustard / mayo / tomato relish makes this one Tasty Burger.
And, it works out to about $2.50 per burger.

Enter Node

Node takes a .js file and fires up a web server.
It has a heap of uses, in this case we only need it to do a little – serve html, css & js.

Install

cd ~/projects/
git clone https://github.com/joyent/node.git
cd node
git checkout v0.6.7
./configure
make
sudo make install

Write a simple web server that serves html, css & js called.. “front-end-ftw.js” and put it in the directory of your site / app.

var http = require('http');
var fs = require('fs');
var path = require('path');

http.createServer(function (request, response) {

  console.log('request starting...');

  var filePath = '.' + request.url;
  if (filePath == './')
      filePath = './index.htm';

  var extname = path.extname(filePath);
  var contentType = 'text/html';
  switch (extname) {
    case '.js':
    contentType = 'text/javascript';
    break;
    case '.css':
    contentType = 'text/css';
    break;
  }

  path.exists(filePath, function(exists) {
    if (exists) {
      fs.readFile(filePath, function(error, content) {
        if (error) {
          response.writeHead(500);
          response.end();
        }
        else {
          response.writeHead(200, { 'Content-Type': contentType });
          response.end(content, 'utf-8');
        }
      });
    }
    else {
      response.writeHead(404);
      response.end();
    }
  });
}).listen(8125);

console.log('Server running at http://127.0.0.1:8125/');

http://thecodinghumanist.com/blog/archives/2011/5/6/serving-static-files-from-node-js

Run it

cd ~/projects/my-kick-ass-project/
node front-end-ftw

Anywhere

Load http://127.0.0.1:8125/ on an iDevice or test it in your windows vm.

Content types

From there you can add any extra content types you want to serve differently, if you want to be able to load images directly in the browser you can add the extensions.
Making an offline web app? Add a cache manifest MIME type.

case '.jpg':
  contentType = 'image';
  break;
case '.png':
  contentType = 'image';
  break;
case '.json':
  contentType = "application/json";
  break;
case '.manifest':
  contentType = 'text/cache-manifest';
  break;