I just added a small demo to my GitHub showing how you can do image masking by using the canvas element.

All you need to do is add the canvasmask.js script and add a class of mask to each image you want to mask. You also need to provide a PNG file as the mask using the data-mask attribute. For example:

<img src="red-panda.jpg" 
     alt="Red panda" 
     class="mask" 
     data-mask="centerblur.png">

This will take the centerblur.png file and apply it as a mask to red-panda.jpg – in effect taking the alpha of each pixel and change the alpha of the original pixel to that.

You can see it in action here and get the code on GitHub.

Under the hood, all I do is loop through all the pixels of the images (after copying them to two canvas elements) and apply the alpha values (every 4th value in the pixeldata array) of the PNG to the image. Simple, really :)

As mentioned by Jake Archibald on Twitter there is no need to loop over the pixels of the images, all you need is to copy the mask first, then change the canvas compositing to source-atop and add the image. Done. The script does that now, and thus is much faster.

I get a lot of emails regarding my blog and many people offer to write guest posts, give me infographics to publish or blatantly ask for google juice for their services. This can get annoying, especially when it is obvious spam or link farmning or the people sending me mail don’t even bother reading my blog beforehand.

From time to time, you do get some gems though, like the other day when Jack Collins contacted me with this email:

Hi Christian, My name is Jack, and I’m hoping to get in touch with you about a video I helped create that explores the psychology of internet trolls. I saw this post “De-trolling the web – don’t post in anger“, and thought you and your readers might find some value in it. The video highlights the phenomenon of the online disinhibition effect. Let me know if it’s something you’d be interested in seeing or sharing, and I can forward it along. Thanks for your time, Jack Collins

I was intrigued, answered Jack and got a second mail with the link to this video. I love it – it is a great example how to present research information in a short, informative and creative way. Whilst I am utterly tired of rage comics and consider them a massive waste of bandwidth and perceived creativity it makes sense to use them here to show what the research was about. I learned a few things, for example I did not know trolling came from fishing and that there were even trolls on ham radio in the past. The best, however is the advice at the end.

Trolling is not a game of solitaire. Unless we want to actively suppress freedom of speech, the only way to beat a troll is to not play the game.

In other words – don’t feed the troll.

A strange game. The only winning move is not to play. How about a nice game of chess?

You can watch the video and read the transcript of The Psychology of the Internet Troll or use the embed below.

Created by AcademicEarth.org

Creating rollovers is easy. Much easier than it was in the past with the infamous MM_mouseover at least. It gets tricky though when you want to have the rollover only happen on a certain shape and not only in a rectangular area.

There are many solutions to this, like SVG masking or adding lots of rectangular overlays that make up the desired shape, but I wanted to have a simple solution. You can see the solution working here in this GIF:

What I am doing here is adding PNGs (courtesy Game Icons) with transparency to the HTML and give them a class of rollover:

<img 
     src="bottle.png" 
     alt="bottle vapours" 
     class="rollover">
<img src="burning-embers.png" 
     alt="burning embers" 
     class="rollover">

The transparent part of the PNG will be what should not trigger the rollover, and all other pixels should.

The JavaScript is pretty simple and based on the principles used in the letterpaint game I just explained on Mozilla Hacks.

• Loop over all images with the class “rollover”
• Add a mouseover, mouseout and mousemove event to each
• On mouseover, take the image and copy it to an invisible Canvas element
• On mousemove, find out the x and y position of the mouse cursor and read the colour of the pixel at this position from the canvas
• If the pixel has an opacity of 0, it is transparent, which means remove the “over” class from the image.
• If the pixel is not opaque, add the class “over” to the image.

You can try this out here.

The source code is on GitHub.

This seems to be a very simple way to have irregular shaped rollovers. You could enhance the hover() function to also react differently depending of which part of the shape you are on. You can also add touch handlers easily. The only caveat is that the images and the JavaScript need to be on the same domain or the canvas is not allowed to access the pixels of the image.

• They decided they actually really hate you and everything you stand for
• They’ve been abducted by aliens and are busy being probed
• They watched too much Fox News and now receded to the cold war bunker eating tinned apricots until it is safe to come out again
• They never existed, you are actually in a secret government facility strapped to a chair and they keep injecting you with neurochemicals telling you that you are a web designer
• They are but they are wearing false noses, teeth and hairpieces to disguise themselves and really mess with you

^* Hey, I never claimed they are good reasons. I just wanted to do one of those incredibly successful blog posts with a catchy title that get tweeted around a lot.

The last few days I spent in sunny Duesseldorf attending the Beyond Tellerand conference, organised by my good friend and partner in 8-bit crimes, Marc Thiele.

I’ve been saying for quite a while that the success and quality of a conference is incredibly linked to the enthusiasm of the organisers and with Beyond Tellerand, you hit the jack-pot, both as a speaker and attendee. I could wax poetic about how great the conference, how diverse the talks and how funky the location were but my colleague Marco Zehe did a much better job in his conference write-up. Suffice to say, I really enjoyed it and consider Beyond Tellerand one of the best conferences in Europe at the moment. I especially like the intelligent decision not to bother with catering but bring people into an area with lots of restaurants and give them a longer break instead. All in all, the schedule had lots of great breaks to network and there was no sense of rush at all.

I was scared and also very honoured to give the opening keynote on the second day, with my task being to wake the crowd up after the party the night before and to set the tone for the rest of the day.

In my keynote Fixing the Mobile Web, I explained that I am worried that we lack passion for quality in our craft and instead follow a breakneck speed race of releasing more and more and quicker instead. I also pointed out how we got a lot of promises of what HTML5 would mean for us and got let down by the platforms that waved the flag the most and called Flash dead. I then explained how FirefoxOS wants to bridge that gap and fulfill these promises whilst being the first impression millions of new users will get of the web with our work being the first things they use.

I recorded a screencast of the talk with some audio issues, but it still should give you a good idea of what was going on until the organisers release the high-quality video.

After the talk, I also sat down with the German web magazine t3n to record a quick video on my talk and the impressions of the conference (in German). The video is here.

Furthermore there will be a German recording I did with the Workingdraft podcast once they edited it which goes into more detail about FirefoxOS and my presentation.

All in all I want to thank everybody involved. The people who came to see and talk to us, all the other speakers who did a great job, the organisers and sponsors and the crew of the location. It was fun and it will come back soon, so check out Beyond Tellerand.