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.

You may have engaged in the God vs Science debates yourself as I have. Personally, I didn’t find them to be at odds with one another primarily because Science observes nature and God doesn’t inhabit that natural world. How God does inhabit the world is open to debate and criticism. It is true that scientific discoveries are explaining things that previously were used as arguments for God, this is the “God of the gaps” argument for atheism.

I welcome this argument and it’s a great reminder that a mystery in itself isn’t evidence for anything. As new evidences arise my understanding grows and I get a more complete picture of how things came to be. The scientific & historical claims of Christianity should be questioned, things like creation and how God intervenes in the world.

I welcome hearing about both religion and science. I generally find listening to people is a good way to learn and grow, I also find the opposite to be true.

There is a principle which is a bar against all information, which cannot fail to keep a man in everlasting ignorance — that principle is contempt prior to investigation.

Character & personal accounts

I’ve been fortunate to grow up with some intelligent Christian friends who have demonstrated what life as a Christian with some integrity looks like. I realize that those I grew up with is a small sample size and doesn’t represent the entire church.

I’m interested in reading Religion for Atheists by Alain de Botton, at a glance the book seems to highlight certain virtues that I have grown to appreciate and respect about my Christian friends – Community, respect, humility & honesty. This book is a healthy break from the Dawkins crowd of celebrity atheists. The character traits most easily identifiable in the influential atheists is arrogance and ego. No doubt these are smart people, but they’re still jerks who encourage people to think themselves better than believers.

Don’t get me wrong, I am not calling Christians virtuous and atheists arrogant jerks.
I am recalling from personal accounts the effect that Christianity has had on the characters of many of my friends. I think many aspects of Christianity have encouraged these character traits in my friends and these are not evidences for God.
Church has encouraged people to come together regularly, church encourages study & reflection on morality and ethics regularly, the study of Jesus’ character, a deep respect for all people as we’re all brothers/sisters, personal reflection and solitude through prayer and quietness, an emphasis that true value is in not in material possessions – I could go on.

I am also referring to the character traits that some atheist friends have adopted when listening to the Dawkins breed of popular atheist, a general militant opposition. This is understandable – regardless of the topic, it makes people feel good to believe they know more than others. I don’t want to be militarily opposed to anyone, especially my friends. Let’s talk, reason, grow and learn together but let us all respect how little we actually know.

Character and integrity are extremely important topics, from my perspective the message and practices of Christianity are making a more positive contribution to the world than the messages and practices of those waving the atheism banner.

Biblical critique

I normally find myself disagreeing with the arguments for atheism when they attack biblical passages because they cherry pick and make big issues out of the things that are actually small issues from the standpoint of the entire bible.
Some of the most obvious issues are creation, homosexuality & hell – These topics are written about in the bible but they are only covered in a handful of verses. These handful of verses are not things that make huge impact on character.

I read the bible from start to finish and have studied the new testament & Jesus’ teaching a little more. I you haven’t read the bible before you would probably be quite surprised with what’s inside – it’s not a rule book or condemning. It is a collection of 66 books written by many different authors, 39 before of the time of Jesus in the “old testament” which make up the Hebrew bible of Judaism. The different books were written over a long period of time from 2150 B.C. to about 100 A.D
My favorite books are the Wisdom books, Ecclesiastes and Proverbs in particular.
A lot of the bible is historical accounts, songs, prayers, prophecy or letters(that were only intended to be read and shared by those receiving them)

I’m no expert but I would summarize the bible as a collection of writings about God written by many authors over a time span of over 2000 years. It’s the story of the Jewish people trying to understand Him, the life of Jesus and the early church.

The arguments

I will say that I do find the arguments on the atheist side of most debates more compelling.
This is to be expected though as God can’t be proven or disproven by argument, he is said to reveal himself through personal/spiritual means and only to those who earnestly seek him.

Without the experience of growing up with Christians I would most probably be waving the banner alongside the others at the Global Atheist Convention. As it turns out I might just listen in and take The Good Parts.

I’ve found myself quite bored with the debate over the last year though and haven’t engaged as much. People just seemed to love rehashing old arguments and there’s not actually all that much new interesting content. I value original thought.

My persuasion

Let’s all be reasonable, yet humble.
Don’t adopt others views quickly and rehash arguments, think and test stuff.
Don’t slander the bible or Christianity if you don’t understand it, ask questions.
Acknowledge the good that the message of Christ is doing in the world.

I’m in Desmond’s corner.

My humanity is bound up in yours, for we can only be human together.

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;

Developers should stop coding vendor prefixes by hand

During development you can use prefix-free and for production pre-compile your css. Compass’ CSS3 module makes short work of this. Just include the feature and use it.

@import "compass/css3";
div { @include border-radius(10px) }

This centralisation of vendor-prefixing is what is needed. As support is added in browsers Compass can be updated to include new prefixes all without you having to change source code plugging in all the holes.

Vendors shouldn’t add any more prefixes into production releases.
“Non-production ready browsers should support experimental prefixes, production ready releases should not.” – @rem

The prefixes should be kept to nightly / beta builds for testing purposes only. That was the intention for them anyway, those really interested in testing the features and giving feedback will and we won’t have this problem going forward.
This means the CSS working group will need to standardize these properties fast so they can hit the stable releases.

Install

• Install the compass gem
• Create a site
• Watch for changes

This will sit in the background and compile your CSS whenever you make changes to any of the files. Awesome.

gem update --system
gem install compass
compass create test-app
mate test-app
compass watch test-app

sprites

@import "icon/*.png";
@include all-icon-sprites;

And, you’re done.

That’s right. Those two lines will generate the sprite image and styles automagically for you.
I also like to include a sprite class which makes an element behave line a normal image.

.sprite {
  display: inline-block;
  vertical-align: middle;
  height: 16px;
  width: 16px;
  overflow: hidden;
  text-indent: -9999px;
}

<b class="sprite icon-tick">Save</b>

There’s another include for spriting regular, hover & active states as well.

@import "selectors/*.png";
@include all-selectors-sprites;

• selectors/comment.png
• selectors/comment_hover.png
• selectors/comment_active.png

Compass features

I’ve only played with the css3 & reset utilities so far, a reset stylesheet is included by default. There are many more utilities though which I’ll be playing with.

One of the best features in my opinion of the whole compass piece is the color utilities like lighten(color, amount) & darken(color, amount).
When you’re tweaking a design you’re often just tweaking contrasts, this is where these two utilities shine.

@import "compass/reset";
@import "compass/css3";
$link-color: #0084B4;

a {
  color: $link-color;
}
a:hover {
  color: darken($link-color, 15%);
}

Using variables for things makes a lot of sense.

You could define gutter widths for a design and then set widths & margins in your layout using simple maths meaning you can change the spacing globally.

css3 mixins

There’s a background function which will generate vendor prefixes and supports multiple background images. You can even mix colors into rbga() if you don’t know the specific RGB values, a color is a color.

#header {
  @include background(
    linear-gradient(top, rgba(black,0) 50%, rgba(black,.3)),
    image-url("textures/tartan.png")
  );
}
#wrapper {
  @include border-radius(10px);
}

Deploy!

When you’re ready to deploy combine and minify your assets

compass compile -e production --force

Easy as pie.

The LOLivator works pretty hard and requires a rest often. If you push this hard worker over the edge on a Friday the lights will go out. The door isn’t too heavy though so can claw your way out.

It’s got a bit of charm, don’t you think?

I’m still finding my way around the new office but it’s filled with friendly, intelligent people making interesting things for the web. It looks and feels like a great place to build things with a good mix of skills and expertise.

I did manage to find one PC in the office. I can only assume it’s there for testing things in Internet Explorer, what else would it be used for?

Sights & sounds

• The local coffee is quite good.
• It’s just 10 minutes from home, I might even borrow one of my house mates twelve bikes and ride in.
• Good taste in music, though I can’t help visualizing The Lonely Boy whenever I hear the iconic Black Keys song.
• A MakerBot was delivered to the office.

Business

I’m not flippant with work if I’ve made a commitment to it, but business is all secondary to that other stuff for me at the moment.
Right now, I’m optimizing my life for happiness, health & study.

I did manage to pick up two small jobs this week after recommendations from earlier work – which I am very thankful for.

Coda

I’ve got a few leads to follow up on, and it looks like some work done this week will lead to some more. I realise it’s very early days still, but, going out and walking my own path hasn’t been all that scary and I have zero regrets so far.

Carpe Diem baby.

I poked around until I figured out how Lea created them and I wanted to share because that’s what we web developers do.

The bubble itself is made up of 1 element plus two extra pseudo elements for the tick & an overlay with the border and inset shadow.

<div id="color" class="previewer"></div>

/* Cute little value previewers */
.previewer {
  position: absolute;
  border-radius: 8px;
  box-shadow: 1px 1px 8px rgba(0,0,0,.7);
}
/* tick */
.previewer:before {
  content: '';
  position: absolute;
  bottom: -6px; /* move half the width left to center */
  left: 50%; /* left edge at center */
  width: 12px;
  height: 12px;
  border: inherit;
  margin-left: -6px; /* drag left 6px (half the width) to center */
  background: white;
  transform: rotate(45deg); /* make a square a triangle */
  box-shadow: inherit;
}
/* content canvas of the previewer */
.previewer:after {
  content: '';
  position: absolute;
  /* make edges touch parent elements, match dimensions */
  top: 0; right: 0; bottom: 0; left: 0;
  border: 5px solid white;
  border-radius: inherit;
  box-shadow: 1px 1px 5px rgba(0,0,0,.5) inset;
}

I’m only going to break down two of the previewers that were particularly interesting to me.

#abslength

This little ruler is created with a devilish combination of gradients, Lea explained how to create CSS3 patterns recently in her 24ways article which explains it all better than I can.

There’s two main repeating gradients used to create the effect, one 20px wide, the other 5px which overlap and give the effect of the measuring stick. The background-size property sets the height of the ticks in the ruler.

<div id="abslength" class="previewer"></div>

#abslength {
  max-width: 100%;
  height: 20px;
  border: 1px solid white;
  border-radius: 0;
  transition: .3s;
  transition-property: width;
}
#abslength:before {
  bottom: -7px;
  background:
    url(noise.png),
    linear-gradient(-45deg,
      hsla(200, 10%, 20%, 0) 47%,
      hsl(200, 10%, 20%) 48%);
}
#abslength:after {
  border: 0;
  background:
    repeating-linear-gradient(left,
      transparent,
      transparent 19px,
      rgba(255,255,255,.6) 19px,
      rgba(255,255,255,.6) 20px)
      left top no-repeat,
    repeating-linear-gradient(left,
      transparent,
      transparent 4px,
      rgba(255,255,255,.4) 4px,
      rgba(255,255,255,.4) 5px)
      left top no-repeat,
    url(noise.png),
    linear-gradient(
      hsla(200, 10%, 20%, .8),
      hsl(200, 10%, 20%));
  background-size: 100% 10px, 100% 5px, auto, auto;
  box-shadow: none;
}

#time

This little guy took the cake for me. The same old previewer is used but the border-radius is bumped right up to make a circle, the animated timer itself is pure SVG with animated values. I love seeing a mix of SVG & CSS to create something simple, easily readable and flexible.

The pie shapes can be created with a combination of the stroke-dasharray & stroke-dashoffset properties on the <circle> element. After a bit of trial and error I was able to find a combination that produced the desired effect.

<div id="time" class="previewer">
  <svg>
    <circle r="15.9" cy="32" cx="32" stroke-dasharray="100" transform="rotate(-90) translate(-64 0)">
      <animate repeatCount="indefinite" dur="2s" values="-100;-300" attributeName="stroke-dashoffset" />
    </circle>
  </svg>
</div>

#time {
  width: 74px;
  height: 74px;
  margin-left: -37px;
  background: linear-gradient(right,
    hsla(24, 20%, 95%, .4),
    hsl(24, 20%, 95%) 95%);
  /* half the width/height for a perfect circle */
  border-radius: 37px;
}
#time:before {
  bottom: -4px;
}
#time:after {
  background: url(noise.png);
  z-index: 2;
}
.previewer > svg {
  display: block;
  z-index: 1;
  position: relative;
}
#time > svg {
  margin: 5px;
  width: 64px;
  height: 64px;
  border-radius: 32px;
  background: inherit;
  transform: rotate(-90deg);
}
#time circle {
  stroke: hsl(200, 10%, 20%);
  stroke-opacity: .9;
  fill: transparent;
  /* just shy of width to prevent clipping */
  stroke-width: 31.8;
}

I’ve always been a big fan of Raphael.js for creating SVG / VML making it work all the way down to IE6. Seeing how SVG has been adopted in IE9 now and this is being heavily pushed it makes sense to figure out how to write SVG directly without a js abstraction.

SVG is certainly a useful tool in the box when needed. Javascript only plays the role of the puppeteer for these previewers in Dabblet, tweaking the values and making it come to life.
In this production, the mix of CSS3 properties (gradients, shadows, generated content, transitions) & SVG are the real stars.

Other things I’ve borrowed

Apart from learning some cool new uses of CSS gradients and more about SVG I’ve also copied and hacked code-highlight.js & prefix-free.js for use on this site. This is why I love open source.

That’s all for now

I hope you found something in there that you can use in your own projects, I know I did.

Thanks Lea!