Christian Heilmann

You are currently browsing the Christian Heilmann blog archives for August, 2012.

Archive for August, 2012

How to disable Java in all your browsers on OSX (screencast)

Wednesday, August 29th, 2012

disable java

OK, once again we have a massive security hole in browsers based on Java. As there are luckily not many things on the web that still need Java (and I pity you if you have to use applets still) here is a screencast how to turn it off in all your browsers on OSX. You can follow the screencast on YouTube:

Here are the quick instructions:

  • Chrome – enter “chrome://plugins/” in the URL bar, hit enter. You’ll see all the plugins enabled, disable the Java one.
  • Firefox – go to Tools > Add-Ons. In the page click Plugins and disable the Java one.
  • Safari – go to Safari > Preferences. Go to Security and uncheck “Enable Java”. This is the easiest, but Safari is also the most dangerous browser as it reaches deep into the OS
  • Opera – go to Opera > Preferences, select Advanced and uncheck “Enable plugins”. This will also kill Flash, but it seems there is no simple way to avoid this in Opera
  • Opera – type “about:plugins” in the URL bar and disable the Java one

Be safe out there, kids!

Mozilla, the web and you at Campus Party Europe

Saturday, August 25th, 2012

I just got to edit and upload the slides and screencast of my talk at campusparty europe, so here you go:

Campusparty are live streaming and recording the talks. Here is mine but sadly enough there is quite a chunk of audio missing and it seems To be out of sync later on.

I also recorded my own screencast on YouTube with audio that is a bit on the loud side so turn down your headphones:

The slides are available on SlideShare:

There is also a slide version with notes available on Slideshare.

Being a better web citizen: complain where things get fixed

Monday, August 20th, 2012

We like to complain. It feels good, it feels like we are doing something that will make things better. The problem is though, if we don’t complain where things can be changed we are not making things better. In a lot of cases we make them worse. In almost all cases where we don’t complain at the source we actually make people feel worse and share our frustration rather than initiate change.

The right to complain

I remember when that volcano in Iceland erupted and messed with all the flights in Europe. I was scheduled to come back from San Francisco and got sent to 3 different airports in the US. I was in Chicago in a totally rammed airport and queueing up to get a new ticket with about fifty people before me and two hundred or more behind me. A group of three people in front of me had their tickets already and yet were in the queue for the ticket counter. I asked them what they are doing here as they do have their tickets, wondering if I was in the right queue. I was. Their answer was “yeah, we want to complain about the delays!”. I handed them my phone to write an email to the airline and explained that complaining to the person behind the ticket counter about a thing that is incredibly obvious doesn’t help them or the already freaking out person who is faced with a line of 200+ people they probably can not help easily. I was unlucky. Logic doesn’t count when there is exercising the right to complain to be done. It is just another sense of entitlement people seem to need to excercise or else they don’t feel like they are being appreciated. Or something.

Complain where work is being done

In any case, on the web and when it comes to web development or web technology issues it is ridiculously easy to complain where a complaint makes sense and will result in a change that makes things better for everybody. If there is a GitHub repository and you have a problem with the code, file an issue. If you have something that bothers you with browsers, file a bug.

This is the only place where you should bring your worries. In a lot of cases you will find that other people had the same gripes and they have been fixed or need a certain trick to work. Anything else you do is add to the noise of the internet without causing any change. Actually, you might expect others to do work for you.

This is one thing I changed in my behaviour on Twitter and elsewhere lately – and so far it did me only good. We do not need conversations about seemingly broken issues of products without the people who create and maintain the product being involved. If they are hard to reach, then this is what should be fixed. Complaining about details to people who might be able to tell the people who should fix the issues doesn’t mean they will get them – it just means you frustrate even more people.

So next time you find yourself feeling the need to exercise the right to complain – or just feel like venting – spend some time finding the right person to complain to. A lot of times you find your anger is less than you initially think it is and many a time you will find that you did something wrong in the first place.

Got a comment? Add to the thread on Google+

Datatable to barchart without images, libraries or plugins

Thursday, August 16th, 2012

Following the results of a survey on library use by developers I was asked to make it easier to do a head to head comparison of the data of one of the questions. I thought it’d be interesting to start a dynamic bar chart from scratch and it is incredible just how easy these things are nowadays.

Animated barchart from datatable example

Here is the final result:

The code is available on GitHub and you can see it in action there, too.

Check the code comments to see what I did – there is no magic in there, just using what browsers give us these days.

There is a bit more to it as I explain in this Screencast on YouTube:

If you don’t want the barcharts to show up but check if meter or progress is supported instead, add a parameter to the URL:

This is an interesting little demo as you’d probably be tempted to use meter from the get-go, but thinking about the data here makes a data table the best starting point.

Browsers have a presenter mode: console info!

Wednesday, August 15th, 2012

Working on creating a re-usable slide deck for the Mozilla Evangelism Reps I played with HTML slides, this time using Shower as I like the list view of it. And once again as explained in the past I found myself in the pickle of adding presenter notes to the slides that presenters could look up when rehearsing the slides and whilst presenting. This is a use case that HTML is not quite meant to cover – especially multi-screen.

Paul Rouget and Anthony Ricaud’s DZSlides solve that problem by embedding the slide deck in a “presenter” page that sends post messages from one window to another. This is totally sexy from a JS geek point of view but I found it tough to set up.

Analysing what we use to present I realised that there is no need for any extras, really, as browsers these days come with an amazing thing called console.

You can use the console of browsers to have messages on a second screen not visible to the audience as debuggers can be in own windows. It is as simple as that :)

So I extended shower a bit. Every slide now gets a footer with notes:

<div id="morethanfirefox" class="slide"><div>
      <h2>Ongoing work&hellip;</h2>
    <img src="pictures/mozillamore.png" class="middle" alt="Mozilla is more than Firefox">
    <footer class="notes">
      Mozilla is much more than Firefox though. We are a not-for-profit organisation to 
      promote the open web. This means we educate people on how to publish content and 
      we protect people's privacy and identity and choice on the web.

I hide the notes in full mode and for rehearsal in list mode I just added a hover state:

/* Notes */		
.full .notes {
.list .notes {
	background: #fff;
	padding: 5px 10px;
	z-index: 10;
	display: block;
	position: absolute;
	bottom: -500px;
	left: 50px;
	right: 50px;
	-webkit-transition: bottom .5s;
	-moz-transition: bottom .5s;
	-ms-transition: bottom .5s;
	-o-transition: bottom .5s;
	transition: bottom .5s;
.list .slide:hover .notes {
	bottom: 15px;

During viewing the script then reads the notes and adds them to the console as an info. As an extra I also read the next heading as a “coming up”:

function lognotes(slideNumber) {
  if (window.console && slideList[slideNumber]) {
    var notes = document.querySelector('#'+
                slideList[slideNumber].id + 
                ' .notes');
    if (notes) {\n\s+/g,'\n'))
    if (slideList[slideNumber+1]) {
      var next = document.querySelector('#'+
                 slideList[slideNumber + 1].id + 
                 ' header');
      if (next) {
        next = next.innerHTML.replace(/^\s+|<[^>]+>/g,'');'NEXT: ' + next);

During presenting you can now just open the console and move it to the other screen. As the main screen will be the one you show on the wall you also have no issue recording the session (something that keynote gets wrong).

(Ab)using developer tools as presenter view

This trick could be used for any of your scripts – just add the infos and have the debugger open on your laptop while your boss marvels at you presenting the product. You can read the hints you add on every click in the interface.

The revelation to me in this case was that the console and debugger are exactly the other screen we need for presenting and a very easy way to keep the interaction in the main window and get information in the other. You got to love browsers these days.

Check it out in action in this screencast: