Preparing for my upcoming workshops on public speaking for Mozillians, I just collected a few tips and tricks when being on stage and thought it might be fun to share them here.

Stage attire/clothing

You will read a lot of things by clever people about “dressing better than the audience to give you a position of authority” and other – possibly true in some environments but so not in all – tips and tricks, but here are some things I found work very well for me:

• Take off your lanyard/badge – it’ll reflect in the light of a stage and look odd on photos. Furthermore, if you use a lapel mic the lanyard will keep banging against it making clicking sounds or muffling your recording. I tend to put my name tag on my hip, threading the lanyard as a loop through the hoops of my trousers (I know, not possible when you wear a dress – just take the badge off before you get mic-ed up).
• Provide a space to clip the mic to – this is why button down shirts and polos are better than T-Shirts. You can clip the mic on them without having to thread the cable through the whole shirt, out of the neck and back to the middle of your chest where it should be
• Avoid stripes or loud patterns – they take away people’s attention to a degree but more importantly look terrible on photos and video as they cause a Moiré pattern effect. A great example of that is the Hugo Boss site, where it is impossible to see the texture of some shirts even in zoom because of this effect.
• Dark is good – you will probably sweat on stage, either because of the heat from the lamps or because you are nervous. Dark shirts don’t show sweat stains. Remember Developers, Developers, Developers? The other way to deal with this is to wear a hoodie/jacket/blazer to cover up
• Keep a bit of space – very tight fitting clothing might show your perfect figure but it can also be distracting or in the case of largely built men intimidating. This is not a date, you are here to deliver some great content.
• Empty your pockets – you will need them to put the wireless transmitter of the lapel mic, it looks better to have no unsightly bulges and there won’t be the sound of clinking coins or keys in your pocket.
• Leave your mobile behind – a call or message during your talk can really change the flow of your talk. Furthermore, the buzz of the phone trying to find a connection will be audible on your microphone. An exception to this is of course when you want to show stuff on the phone or bring it up as a surprise. Even then turn it into flight mode. Some people also use the phone and alarms to tell them when there is only 10 minutes left in your talk. That could cause issues with the audio, too, so leave that to a friend in the audience or ask the organisers to have a clock on stage.

Audio equipment/microphones

In some rooms you can make do without a microphone at all, but that is not always the case and you need to be a trained speaker to be loud but not detrimental to your vocal cords. Here are some things to be aware of when it comes to microphone technology:

• Wireless lapel microphones – these are awesome and by far my favourite. As mentioned earlier, make sure they don’t end up next to anything that could cause click sounds, like buttons, tie-clips or your lanyard. Other than that, having those is the best thing you can get as they give you the most mobility on stage and are very simple to put on and take off. Try to get mic-ed up as soon as possible, as wiring them under your shirt is a bit intrusive and you might want to check your looks afterwards again (if that is important to you). Make sure they are muted when you are not on stage yet and that you turn them on just before. As my colleague Robert Nyman put it “You just don’t know what weird sounds your body is capable of until you get wired up”. Also you don’t want conversations you have with people before your talk be transmitted or recorded (well other than by the NSA)
• Behind the ear microphones – these are a bit trickier, but yield very good sound results. Make sure that the mic doesn’t scratch against your beard stubbles, do not wear large ear-rings that might clink against them and take off your glasses, put the mic on and then put the glasses on top of them. I always found these microphones to be not really comfortable as they can cut into the back of your ear and limit your head movement a bit. Be aware of that.
• Handheld microphones – these seem intrusive as one of your hands needs always to be close to your mouth and effectively covering your chest – thus not allowing for large, inviting open gestures with both arms – but they can be great. If you are not too comfortable a speaker yet, they are something to hold onto on stage and keep your hands from randomly moving around or shaking. Also, they just work without people having to fiddle with your hair, glasses or other attire.

As a strong rule of thumb – show love to the audio folk of the venue you speak at. They know their stuff and it is up to them for you to be audible by the audience. Follow their advice and make their life easier and you’ll give a great talk.

Available stage tech

Last but not least, here are some things on technology available for you on stage.

• Bring your own power cables and adapters – not every venue or conference is equipped with all the things you need
• Do not expect audio or video playback to be available – many a time I saw speakers building up to “a great video” just to be forced to show a blank rectangle or something without sound
• You will be offline – just give up on the promise of connectivity on stage. A good speaker does not need it and there is nothing more discouraging than seeing someone who is there to inspire you about the awesomeness of cloud services struggling with the wireless crapping out
• Plan for low resolution – 1024*768 at 60hz is normally possible, higher, not so much. So plan your demos and slides to be readable and usable on that resolution
• Bring your own remote/clicker – these are awesome. First of all it means you will not be glued to and hidden behind your computer. Secondly you have something in your hand (see handheld microphone above for the benefits of that). Thirdly they have laser pointers which is great to get rid of stray cats that may enter the stage

Hope that was helpful, there is more to come :)

Photo by Andreas Dantz

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.