Christian Heilmann

Author Archive

WebmaKey MaKey? – here is something to start from

Sunday, September 23rd, 2012

MaKey MaKey is amazingly cool. It is a very simple Arduino based board with a USB cable and Alligator Clips to simulate keys pressed by touching a cable and closing the circuit by holding the other cable. This would be boring though, so you can connect the second clip to anything that can transmit a current – fruit, play-doh, graphite pen drawings, you name it. Check out the video to see the idea behind it and some examples.

More than a toy

On first glance this is cool, but seems like a toy for children to do their first steps with computing. And yes, it is magic for that as the Night Zoo teacher experiment shows. But there is more to this.

A great accessibility opportunity

I’ve almost given up on trying to get the accessibility web world excited about affordable and open solutions, but using a MaKey MaKey you could create switch interfaces for people who can not handle a keyboard on a shoestring and have fun at the same time as it can be customised in any way you want to. The beachball interface for Flabbyphysics is a great example of that.

There is a whole section on the MaKey MaKey forums dedicated to accessibility called Hackcess. In general it is a good idea to check the forums for inspiration as people build a lot of wonderfully crazy things with it.

WebmaKey?

The thing I was missing a bit on the site was the web component, as a lot of the demos used Flash or native code of sorts. As I thought it a good idea to mix MaKey MaKey with Webmaking I put together a very simple blueprint to use MaKey MaKey input in an HTML page called Testy Testy.

All it is are event handlers for the right keys showing and hiding different sections in the page. There is also a demo for moving a Foxkeh around with the cursor keys.

Here’s what the README explains:

As MaKey MaKey simulates various keystrokes and click events you can interact with the computer. Testy Testy is a simple start for doing something with this.
The HTML contains sections linked to the keys simulated by MaKey MaKey. When you activate one, the appropriate section is shown, when you release the key (or the cable) it gets hidden.

<section id="right" class="reactors">
  <p>Right</p>		
</section>

So, if you want to for example connect your MaKey MaKey to a Banana and show a picture of a banana, all you need to do is alter the HTML:

<section id="right" class="reactors">
  <a href="http://www.flickr.com/photos/robin24/5129712590/" 
     title="Banana - Isolated by robin_24, on Flickr">
    <img 
      src="http://farm5.staticflickr.com/4059/5129712590_98642c5ebf_n.jpg"
      width="320" 
      height="213" 
      alt="Banana - Isolated">
  </a>		
</section>

Hopefully this will get some people started to mix HTML learning and MaKey MaKey hacking.

Mozilla Festival

At this year’s Mozilla Festival we’ll have a MaKey MaKey session. and I am actually working on a hug/kiss/high-five camera booth using MaKey MaKey and WebRTC. Let’s see how that works out :)

In any case I can only recommend to get a kit yourself as it is incredibly fun to play with!

The discussion happens on Google+ (maybe).

That was Smashingconf 2012 – well, for me, at least…

Friday, September 21st, 2012

The last few days I spent in Freiburg, Germany at the first Smashingconf. All the things I did there have been released as slides, screencast and a long article (my notes, actually) on Smashingmag. The video should be out soon, too. So this is about my impressions of the conference.

The organisation

The success of a conference stands and falls with the passion of the organisers and Marc Thiele and Vitaly Friedmann are two guys that are 100% behind what they are doing. I know Marc for years (we’ve done stuff in the C64 demoscene together) and I got to know Vitaly a few years ago when I complained that Smashingmag has terrible quality and he asked me to write and become an editor there.

The organisation was incredible, as speakers you got your travels booked, got picked up at the airport, and put up in the hotel where a welcome basket full of cute little edible and non-edible things waited for you together with your badge, wireless information and how to get to the venue:

Speaker goodies in the room

Not that the latter was needed, as most of the speakers walked there as a group as it was a 5 minute walk down the road.

The conference itself worked well, the tech was fitting (the wireless was a bit hit and miss but that was partly due to the building and the speakers got Mi-Fi backups), timing worked out, there was always enough nibbles, coffee and drinks and the space was easy to navigate. Light and sound conditions in the room weren’t ideal, but there was nothing the conference organisers could have done about that.

Instead of catering lunch and endless queues there was a 2 hour break to get something to eat outside which made the tickets cheaper and also allowed people to form smaller groups to go out to hunt for food. With a market just outside the building this was not hard at all.

The afterparty was in a club which was a tad loud and people smoked inside which didn’t quite do it for me but the attendees were happy, and that is the most important.

The online coverage of the event was superb, with the team live-blogging and tweeting and the lanyrd page getting constantly updated.

I can’t think of much that could be improved, and the venue gave the conference a cute touch others lack which makes you forgive not having a bullet proof connectivity throughout.

The location

If you haven’t been to Freiburg yet, let me just tell you that it is so sweet it must be fattening just to look at it. It is a very quaint little town full of narrow streets, shops with cute things and cobblestones throughout. Arriving at the Airport means you can leave for Switzerland or Germany via France – how cool is that?

The conference venue itself was a very old and posh building complete with red velvet chairs and chandeliers:

Smashingconf building

All over were also old oil paintings of statesmen and kings and queens including Lord Cameltoe (as I christened him – seriously it was disturbing to look at):

Lord Cameltoe

Space was scarce and before we opened the windows it got quite hot in the room. After opening the windows the nearby church bells were audible at times during the talk but sitting in such an amazing building made up for these small niggles.

Audience

The talks

I didn’t see all the talks, but here are my quick reviews of the ones I followed.

  • Stephen Hay’s “Style Guides are the new Photoshop” had some very good advice how to automatically generate style guides from your prototypes and products using scripting. A designer not scared of the command line was unique to the audience and Stephen did a great job breaking down initial fears and animosities. Stephen has been around for donkey’s years (talking about donkeys, check the awesome magazine in the hotel room) and really knows his stuff. At the same time he is very humble about it. Top lad, and well done.
  • Nicole Sullivan’s “OOCSS and preprocessors in a tree, k-i-s-s-i-n-g” was all about her adventure into SASS land and how it relates to the OOCSS work she has done before. I found it a very good reminder not to fall for the siren song of preprocessors without analysing the final code that gets generated. It was also very good to see that Nicole wasn’t going into it with a “this is it, you all should do exactly what I do now” attitude, but instead took a “here is what worked for me after I did it wrong” approach.
  • Jake Archibald’s “Application Cache: Douchebag” was the third time for me (as we spoke at the same conferences) but it is a very worth-while talk with a truckload of research going into it. It is also a very important topic as the success of HTML5 apps stands and falls with our ability to store content offline. Check this out for all the hacks Jake had to do to build Lanyrd mobile. It is also incredibly funny.
  • Lea Verou’s “10 more CSS secrets” was not announced but she replaced her regular expressions talk with that one in the last moment. Lea is incredibly knowledgeable about CSS and showed a lot of cool tricks with modern CSS. Some of them were very useful, others more edge-case. What I love about Lea’s solutions is that they do not only show you how to do this in the coolest and newest browsers but also how to degrade gracefully. The whole talk was live-coded, which meant that she got 15 minutes over the allocated time, but I am sure the audience didn’t mind. I always want Lea’s CSS talks as an article afterwards as it is too much to take in by just watching.
  • Josh Brewer’s “Responsive is as responsive does” explained his journey towards finding a solution to have a perfect measure in line-length in responsive designs. I really liked the talk and the way Josh explained how he got far too obsessed with finding the perfect formula. Good ideas, lots of research and entertaining to watch
  • Tim Ahren’s “Web fonts backstage and on stage” taught us all there is to know about font formats on the web and how rendering of them works. Lots to take in and quite some in-depth information there.
  • Jonathan Snook’s “Your CSS is a mess” explained the rationale behind his SMACSS approach to writing CSS and had quite a lot of handy tips how to organise your style sheets. Jonathan is a very down-to-earth guy and it shows in his talk. Facts and some dry humour, I like.
  • Brad Frost’s “Beyond media queries (and a lot more words I am too lazy to type now)” on the other hand was a whirlwind experience of knowledge about responsive design and how to use it for the benefit of our users rather than because it is cool. I am a bit of a fanboy of Brad and I think we can expect great things from him (wow, I sound like Mr. Ollivander here) and he didn’t disappoint. A very funny and impeccably timed talk. Go and watch it when it is out.

All in all I think Smashingconf was very much worth our while and the audience should have gotten a lot for their money. It is a conference to watch as if they keep the quality up it can be the new Fronteers or @media.

Keeping it dry

Thursday, September 20th, 2012

If you thought this post is about scripting patterns and methodologies I have to disappoint you – it is about a personal matter. As a rule, I do not post personal life things here as this started as a professional scratchpad and will remain that way. However, as this personal matter does in a roundabout way affect my work life, I thought it a good idea to disclose the information.

Losing my touch

So here goes: the other day I woke up and couldn’t feel my ring finger and pinky. Well, I could, sort of, but it was as if they are asleep and just tickled a bit. That makes you wonder. When a day later it didn’t get much better I wondered if it got better or I just got used to it (I am very good at adapting to annoying things when they happen continuously). So I went to the doctor and had myself checked over.

My doctor rocks. He is this wonderful crazy scientist type who speaks three languages (at the same time) and practices a variety of different medical methods. He also has a very dark sense of humour – we go along very well.

Turns out I couldn’t feel my fingers as coming back from Campus Party Berlin I feel asleep on the plane with my Nexus 7 in my hand. I had pinched a nerve and it was damaged. Now, a normal doctor of the NHS ilk would have given me a paracetamol and sent me on my merry way but mine thought it better to see why a simple tablet in my hand can cause such distress to my nerve system. If you think about it – our brains are mostly nerves and when they get damaged that would mean worse things.

So we did a blood test and when the results came back they looked like some kid on sugar rush had a go at a chemistry set and mixed everything that wasn’t meant to me mixed. It also showed that apart from the gingerism I also inherited another thing from my mother: a deficiency in my nerve system.

So to counteract this and lengthen my happy life on this planet I am changing my lifestyle. More vitamins, more iron, zinc and other bits and bobs and above all less caffeine and less alcohol. Whilst I didn’t drink excessively my blood picture showed a lot or as my doctor put it “you drink like a Londoner”. In essence the deficiency I have means that whatever bad thing I do to my body has a tenfold effect.

Shaken and stirred

So here is the thing that could change my professional life: I am not drinking any alcohol at the moment and will most likely not do that for quite a while.

As someone who lives at conferences and meetups the temptation to have a drink is high but I really will not. So if you meet me don’t be surprised when I go for a lime and soda or water when the rounds come in. I will not judge you for drinking and I am also still happy to buy a round, so no worries.

Is this the end of my socialising at conferences?

Here comes the interesting part though. You might remember the Twitter storm in April when Ryan Funduk’s “Our Culture of Exclusion” complained about the culture of drinking at conferences and thus excluding people who do not partake. The Twitters more or less painted IT conferences as Frat House parties where people who do not do the keg stand get hazed out and much more nonsense.

Now, ever since my doctor scared the living daylights out of me, I attended Reasons to be Creative in Brighton, England, Mozcamp in Warsaw, Poland, went to an all inclusive Robinson Club in Mallorca, Spain and the Smashing Conference in Freiburg Germany.

All of these had free drinks and I didn’t have any. I also didn’t get any grief for it or felt left out. I actually had a great time and found it interesting to see other people who are not the social type come out more and talk to me and have very interesting things to say.

Yes, this might be because I am a speaker and people know me, or, as Lea Verou put it “you do and say things sober that other people need to be drunk for” (whatever that means). All in all I have to say though that even as one not drinking I find conferences and after parties a great thing to go to and having chats with people. In most cases I didn’t even have to explain why I don’t want a drink when people offered, and in the few that I had to explaining that I am trying to live healthier was all that was needed.

So, no, our market is not full of brogrammers and you have to be the one to drink others under the table. And seriously, I have much more reasons not to hang out or socialise with people who’d fit the brogrammer stereotype than the drinking.

So cheers to all of you who I met and to the ones I will meet soon :) If you got something to say about this, let’s have a chat on Google+

To be announced – the closing keynote at Smashingconf 2012

Thursday, September 20th, 2012

I just got back from having an amazing time at the Smashing Conference in Freiburg, Germany (report to follow soon). I was lucky to be asked to be the closing keynote speaker, and the talk was great fun to give and seems to have pleased the audience if Twitter can be trusted.

The slides of the talk “To be announced” are available and here is a screencast of the talk with the live sound from the conference on Youtube.

A recording of the talk will come out soon, and the original notes in article form on Smashingmag in the coming week, so stay tuned!

Mozcamp Europe 2012 and Evangelism Reps Trainings

Thursday, September 13th, 2012

I spent the last weekend in Warsaw, Poland to attend the Mozcamp 2012 meeting with Mozillians from around the world to see where the project is going and how we can best use the resources we have.

In essence: it was a blast. You can see at the very packed schedule that we covered a lot of topics and got each other up to speed on the things we are doing for Mozilla.

All attendees of Mozcamp were asked to set themselves a mission for the weekend to use our time the most effectively. Mine was the following:

Meet 10 already existing or new Evangelism Reps and deliver a great training to get them started.

I easily achieved that mission but I was a bit disappointed when I saw that we only had an hour of training rather than the originally planned 2 hours. I partnered with the man who got me excited about Mozilla in the first place, Tristan Nitot, to introduce the attendees of our training to the Mozilla mission and get them excited about presenting and producing posts, screencasts and code examples.

When I plan trainings, I have something for every minute of it and the main trick is to make the attendees do the work. This is not because I am lazy, but as humans we tend to retain information we found out by ourselves much better than things we just listened to. The plan for this session was:

  • 00.00 – 05.00 – Introduction and aim of the course
    “By the end of this training you know where to find information to promote Mozilla in person and on the Internet”
  • 05.00 – 10.00 – Introduction of different ways to promote Mozilla:
    • Blogging
    • Creating demos
    • Videos / Screencasts
    • Speaking
  • 10.00 – 26:00 Walkaround with four whiteboards
  • 26:00 – 36:00 Preparing group presentations
  • 36:00 – 52:00 Group presentations on all the results
  • 52:00 – 60:00 Joint presentation Chris/Tristan on the resources we have.

The idea is to have four groups and make them each for 4 minutes collect information on the topic and then shift around, so in the end each group has their own findings and those of others to use in their presentations.

So much for the theory – 10 people had signed up for our session which is a good size. When our session started though, about 45 showed up and we had neither the whiteboards in place or enough chairs, so we had to get them from other rooms.

The beauty of the 4 group training is that it scales so in the end we had groups of 12 people which made for longer discussions and appointing speakers but it worked out. Incredibly well, actually – I am always amazed how you can make a group of people work very concentrated together when you set a simple goal and a fixed time frame.

mozcamp training session 1

See the full intensity of it in this video (fox hat included):

As there was a lot more interest in evangelism training Shezmeen Prasad and me thought it a good idea to offer another, after-mozcamp session in the hotel. We set it on Sunday at 8 – 10pm after two days of a packed schedule and again wondered if anyone would show up. They did, 35 of them this time.

mozcamp training session 1

As the room layout did not really lend itself to a training in the style of the other we spent the two hours with open Q&A about speaker tips and tricks and watching a few talks analysing how the speakers made them great – again in a group information gathering and presenting session.

As a follow-up (and as this was a common request) I cleaned up the HTML5 slide deck we have for evangelism reps and created two screencasts on how to get the slide deck and present in it and how to write your own slides.

How to get the Mozilla slide deck and present it on YouTube.

Creating slides in shower on YouTube.

You can find out more about what the reps do on the Evangelism Reps Wiki or by visiting us on Facebook.

It was exhausting, but very much worth it! I had a lot of fun meeting all the reps and look forward to all the material we’ll create together.