Fun with pixels and HTML5 video canvas

HTML5 video pixel manipulation

(Example above tested in Chrome 17, Firefox 10 and Safari 5)

Recently, there has been a lot of hype about the HTML5 video. No wonder why - Google thinks the format is hot enough it is worth encoding thousads of the YouTube videos as webm and make them available through new HTML5 version of youtube:

Tilde or the Floor? Practical use for JavaScript bitwise operators. (#1)

JavaScript bitwise operators are one of these features of JavaScript that we always forget about. It seems like we assume there is no good use for them in a client-side code. Why would we care about ones and zeros if we're not using binary? Why would we ever care for binary AND, OR, XOR or left/right shift?

I am not going to explain how these operators are affecting binary numbers because there are plenty of resources available covering this topic.

Instead, in a series of articles, I will focus on a practical use for few of them showing how to make your JavaScript code faster, more compact and unfortunately often less readable.


HTML5 Mohawk Generator

Note: Jump here to read full article or play with the Mohawk Generator below.

Mohawk Configurator

Number of spikes:
Number of colors:

Share your creation!

Copy the link below:
Or post it directly on Twitter:

Conway's Game of Life in JavaScript


Conway's Game of Life is an example of cellular automation created by British mathematican John Horton Conway in 1970. It is a very specific type of game as it does not involve any players. Game 'plays itself' using the environment configuration that was set up earlier.

For some reason I found the idea of a game that plays itself very interesing, so.. I decided to implement it in JavaScript. (Because everything should be implemented in JavaScript one day, right?)

Excuse me, there's an (HTML5) elephant in the room!


On September 27th I attended cool JavaScript meetup in Brighton called asyncjs. During two sessions (unfortunately I missed the first one so I had loads of catching-up to do) we built an amazing JavaScript Jungle / JavaScript environment.

We were asked to fill this environment with jungle creatures that respond to the occurring changes - sun, rain, time of the day and so on. Creatures could move around, eat grass or even eat each other.

Entire environment was created using jQuery and we were also allowed to use HTML5 canvas support libraries such as paper.js and raphael.js. In addition to that, we used fantastic little library called broadcast.js to create event-driven environment for our jungle.

Firefox 7 bug with CSS border-radius set using JavaScript

While working on my slimScroll plugin I noticed something very weird in the newest release of Firefox - I was unable to set border-radius CSS property from within the JavaScript.

I created a demo page so you can check how the code in question is behaving in your browser.

I used this HTML to test my theory:

jQuery slimScroll

What is slimScroll?

slimScroll is a small (4.6KB) jQuery plugin that transforms any div into a scrollable area with a nice scrollbar - similar to the one Facebook and Google started using in their products recently. slimScroll doesn't occupy any visual space as it only appears on a user initiated mouse-over. User can drag the scrollbar or use mouse-wheel to change the scroll value.


You can download latest stable version in zip (v1.3.0) from here: slimScroll download.

Alternatively, you can also check out latest build at my GitHub repo.

Check out my latest game!

Android app on Google Play