This Friday I wanted to learn some more about the new CSS3 viewport units so I decided to create a binary clock. Viewport units allow this clock to scale its size fluidly on any devices screen. Go ahead, try opening it up and resizing your browser, try making your browser window taller than it is wide or wider than it is tall – I’ll be right here waiting for when you get back.
How do you read a binary clock
Want some nerd-cred on how to read a binary clock? You start by looking at all those dots as columns, six columns to be exact. Now, the first two columns represent the hours, the next two columns the minutes, and the last two columns make the seconds.
With me? Now the dots that are lit up represent numbers – the lowest number on each column being 1 and the highest number being 8. All you do now is just sum of each columns numbers. Go ahead and give it a go on the image at the top of this page. You’ll get something like this:
So in this case the time is 04:17:36 when you push the numbers together. There, now you earned some nerd-cred.