Hakim.se

Recap 2011

It's that time of the year again! In late 2010, having spent five great years working at Fi, I was determined to change up my professional life. After interviewing with Qwiki and accepting the position of Lead Interactive Developer it was decided; I was moving to San Francisco! It took a good few months ofhard work to sort out all of the practicalities but it was definitely worth it now that I'm here.

DOM Tree

Happy holidays! I didn't get a pine tree for Christmas this year so I decided to compensate by creating a digital counterpart out of HTML form elements.

zoom.js

zoom.js is a small proof of concept JavaScript library for zooming in on DOM elements or points in a document. It uses CSS3 transitions and 2D transforms (scaling, translation, transform origin) on the element to achieve animated magnification.

reveal.js

Reveal.js, formerly CSS 3D Slideshow, is a tool which allows you to quickly create good looking HTML presentations. Beyond the changed name, the updated slideshow includes a fair amount of new features:New and improved style.Added controls in bottom right which indicate where you can navigate.Reveal views in iteratively by giving them the .fragment class.Code sample syntax highlighting thanks to highlight.js.Transition themes (available via init options) default/concave/linear.Initialization options (toggling controls, toggling rolling links, transition theme).

Sphere: Revisited

The next js1k is still ways off but I felt like crunching someJavaScript so I revisited my Sphere experiment.I was able to squeeze it down into 309 bytes and that includes the code for creating and appending the

Rolling Links

Decided to spice up the text links throughout my site by reviving an old Flash classic – the 3D roll! You'll only be able to see the new style if your browser supports CSS 3D transforms, at the time of writing that means Firefox Nightly, Chrome or Safari.

Origami

Simply a colorful folding doodle on

Interview: TechRant

I was interviewed by Ben Hutton of TechRant and shared some of my thoughts about the open web, personal projects and professional life.

404

The folks over at .net magazine have decided to spruce up their 404 page with the help of a few guest artists. For my slot I decided to go for a creepy theme inspired by one of my earlier experiments. The animation is entirely code generated and drawn on an HTML5 canvas element.

Sphere

When bored, I sometimes open a blank JavaScript file and start writing without any clear objective of where I want to take it. This is the result of one such coding session.

AppView

AppView was created to help iOS app developers track recent reviews in all markets of the App Store without having to use iTunes Connect's cumbersome UI. Reviews can be sorted on date, rating or store and are automatically translated to English via the Google Translate API.

Textify.it for iOS

I was really happy with how the Textify.it web app turned out and decided it was worthwhile creating a version targeted at iOS. I've been curious about the potential of building iOS apps using the standard array of open web technologies.

Textify.it

Browser for or drag an image onto the page and watch it be reconstructed purely out of text. The markup for the resulting textual image can be copied and used elsewhere.

WebGL Particles

Was curious about how to efficiently render particles with WebGL soI built a tiny demo. Move your mouse to generate particles.

Canvas Optimization

Building Coil presented me with a few interesting technical challenges. Primarily I had a hard time making the game operate at a reasonable framerate since it uses both 2D Canvas and WebGL. Double whammy. Even though I am still not fully satisfied with how the game performs, I wanted to share some of the optimization techniques used.

Coil

While working on Sinuous I had an idea for a gameplay feature that involved drawing circles around your enemies to destroy them. Trying not to add too many features in one game I decided not to implement it at that point and instead revisit it as a separate game.

CSS3 3D Hologram

After seeing a video demonstration of a holographic effect created with HTML/CSS I was inspired to build something similar. I ended up creating a 3D box which alters perspective depending on device orientation.

WebGL Shaders

WebGL's introduction is very exciting due to the powerful graphical capabilities it enables in the browser context. This power originates from the ability to run highly optimized programs on the GPU via shaders written in the OpenGL Shading Language – or GLSL for short.

CSS3 3D Slideshow

While preparing a presentation on SVG for an upcoming Stockholm Web Monkeys meetup I needed to construct a simple slideshow. Since this would only ever be presented in a controlled environment, I decided to take the opportunity and experiment with CSS 3D transforms.

BreakDOM

Ever wondered what it would feel like to attack a bunch of checkboxeswith a radio button that's being steered by a scrollbar?

Meru Logo Animation

In early 2011 I collaborated with Canadian media production company Meru on a small but very interesting project. The objective was to "...produce a code generated logo that reacts to various inputs..." and works on all platforms. Having looked at the fluid shape in the logo design I felt this would be a lot of fun to take on – and so I did.

Spring Cleaning

Out with the old, in with the new! I finally got around to creating a new site for myself.

I Joined the Qwiki team!

Translating information from a format aimed at computers into a presentation tailored for human beings is an incredibly powerful concept. That is what Qwiki does. And does incredibly well. After first discovering the product late last year I couldn't stop playing around with it. Coincidentally I received an email a few weeks late from Doug Imbruce, founder and CEO of Qwiki, asking for a meeting. After that meeting – and many interviews – I was offered a job and accepted straight away.

20 Things - Page Flip

Following the launch of 20 Things I Learned About Browsers And The Web there was a lot of interest regarding some of the HTML5 techniques empowering the site. In particular, the page flip transition was a hot topic.

Sketch

Remember those old cartoons where hand drawn lines appeared to vibrate because of differences between frames? That's what this experiment simulates. It also adds a third dimension to your drawings by allowing you to rotate the canvas.

Where To Find Me

Pool

This is my first experiment with WebGL. Even though I am very much for the idea of usinglibrares to abstract away some of the rudimentary work involved in programming, Ibelieve it is crucial to understand what happens behind the curtains. With thatreasoning in mind, I set off to create this very basic example only so that I wouldgain an understanding of what makes WebGL tick.

HTML5 Canvas Tips

As the HTML5 spec is slowly making its way from working draft to recommendation and browser implementations are solidifying – the urge to make use of these new features grows strong.

Sinuous on the Google Chrome Web Store

Preceding the release of the Chrome Web Store (CWS) I collaborated with Google to prepare Sinuous as a launch title app. Following the launch in early December 2010, Sinuous saw a major increase in activity and players. In fact, sinuousgame.com has seen over 900,000 visits since its launch and traffic is now resting at about 5k visits/day.

Bacterium

An interactive experiment with bacteria in a playful and dynamic physics world.

20 Things I Learned About Browsers and the Web / Fi

An online book that aims to better people's understanding about the inner workings of browsers and the web. This project was created for the Google Chrome Team while I was working at Fi and my primary responsibility was building the HTML5 front end.

Core

Sinuous' sibling game. More evil red dots!

Sinuous Won 10k Apart

The 10k Apart competition, organized by MIX Online together with An Event Apart, challenged developers to build web apps in HTML5 using less than 10kb.

Sinuous

A game built on the HTMLCanvas element which will test your mouse pointer reflexes. The objective is to stay clear of the evil red dots and stay alive as long as possible. Eventhough the game play is linear sinusoidal and the graphics are minimalist it can get quite addictive.

Bakemono

A little monster that I brought to life with JavaScript. Bakemono is Japanese for monster.

Keylight

A playhead travels between keys which resonate in sound depending on where they are placed in the room.

Blob

Soft blobby physics. It's like, you know... jelly?

Magnetic

Control and create currents of particles which react to magnetic nodes.

Trail

Particle movement patterns that generate smooth trails.

Particle Depth

Particle positioning patterns using depth.

Wave

A wave with bubbles floating on the surface, the bubbles each represent a tweet with the word "water" in it.

Particles

Particles slide across the screen and grow as they get close to the mouse.