Christian Heilmann

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

Archive for February, 2012

Now vendor prefixes have become a problem, want to help fix it?

Thursday, February 9th, 2012

Today is a noisy day in the land of web development and the reason is a meeting of the W3C CSS working group where several people representing browsers discussed and agreed on supporting webkit prefixes in other browsers in order to “not break the web”. Read the notes of the meeting and search for vendor-prefix to get the original information.

This spurred Daniel Glazman, chair of the CSS working group to write a call to action to save the open web. Glazman has been opposed to the concept of vendor prefixes in the past and had some good arguments.

UK Developer and author Remy Sharp has a very detailed post on the subject called vendor prefixes about to go south where he discusses the dangers of supporting alien vendor prefixes in browsers.

Bruce Lawson also chimed in and actually has a quote that very much resonates also my feelings about the issue:

Personally – PERSONALLY – I’m pretty depressed about all this. I’ve spent 10 years – pretty much since IE6 came out – evangelising cross-browser, accessible, standards-based sites. As a development community we chased the Shiny and we caused IE6 to linger around[...] And now we’re doing the same again.

I took the opportunity to release something I already wrote in December, a call to arms to proactively fix browser-specific code on GitHub. Glazman disagreed with this approach but here is what I think:

  • That browser vendors find themselves considering supporting the experimental prefixes of other browsers is sad. Everyone I know working on browsers advocates supporting the competition – it is what keeps us going
  • The idea of vendor prefixes was to allow to try things out and become redundant over time. A try before you buy and a chance to test various approaches and then agree on one way as the non-prefix version. This hasn’t happened in the case of webkit- (or hasn’t happened fast enough)
  • There are many reasons for that, one of them being the amazing success of Apple mobile hardware. Developers were asked to build exclusively for those and had to fight for extra time to test and support other browsers.
  • Regardless of this being a bad thing we have to move forward and think of how we could avoid this issue in the future
  • It is not hard to add at least a fallback to a non-prefixed version of the CSS effect. It is also not hard to replace overly zealous browser sniffing with a sensible feature detection.
  • A lot of the code that gives the impression that webkit- is the only necessary feature to add is available on GitHub. Github by definition is a social network revolving around code and code there is meant to be amended, fixed and added to.
  • So if you have a few minutes of your time, and you see something that is webkit only and can easily work in other browsers (or needs a non-prefix fallback) – why not fork it, do the fix and send a pull request?

This mess has partly been created by developers, the least we can do is help fix it. And it gives people a chance to help who are not planning to build their own massive library or solutions but care about making them work in the wider world of the WWW.

If there is one thing I learned so far is that “the only thing you need to support” on the web is a very fleeting concept. IE6 was the best and most amazing browser to support. WAP was the future, then imode, then XSLT to create HTML from XML… Do not believe the hype.

Superbowl, celebrities, our arrogance and the moneymaking web

Friday, February 3rd, 2012

Here’s a prediction: this weekend, Twitter will go down. I have a lot of friends in Twitter and I am very much trusting their abilities (which I know to be awesome) but there will be a fail whale. I am so convinced about this that if there is no outage and next time I am in the valley I am happy to take them out for dinner and cover the cost.

The reason that Twitter will go down is the thing that kept the all media going for the last few weeks already: the super bowl.

Everybody and their dog (and bots and automated news update feed things) will hammer Twitter giving their remarks, offering blow-by-blow commentary and flood the system. About something that I can safely say I could not care less about.

People get incredibly excited about the bowl. It is probably the most watched bit on the TV. The ad spots are so expensive that advertising creatives bend over backwards to make an impression. This almost makes them an art form and people on Twitter got very into the Ferris Bueller themed one coming this year and shared trailers(!) of the ads coming up.

It is commercialism and media sponsorship at its most blunt and obvious. I am not a fan of spectator sports as a whole and the concept of putting long breaks in a game to be able to show ads in the broadcast is confusing to me. Yes, I am a geek and a dreamer who wants this world to applaud and support achievements without the hype. But this is not the world we live in.

What makes money on the web?

It makes me think about who pays our bills and where the money on the web is. We all stare doe-eyed at the big numbers that technical startup XYZ got acquired for and we hear all the amazing stories of technical talent being poached for thousands of dollars and making millions in shares afterwards. What we forget to think about is the constant flow of dollars on the web that actually go to people who do nothing to the media when it comes to moving it forward. Instead they reap the rewards of a distributed system that makes it dead easy to publish and get people to look at your things – if you give them what they want.

I know people who make thousands a week with web sites that turn my stomach and show “funny pictures and videos” I had in my inbox in 1998. I’ve seen people sell open source templates for WordPress other people did by adding a flashy site and video tutorials around them. I’ve seen people who run blogs linking to pirated materials hosted on Megaupload and Filesonic make a lot of money with that.

We could say these are the bottom-feeders of our world. Or we could admit that their success is much easier to explain to people who do not care about the web than ours will ever be. And we could admit that they are actually very clever by playing a system to their advantage – something we always claim to be doing by using “best practices” and “embracing change”.

Who is most successful in social media?

We pride ourselves of the followers and networks we have on Twitter, but if you look at the people who really have the impressive follower numbers it is not the thinkers, the makers and the drivers of the web and social media. It is the celebrities that people hope to be able to reach directly when they follow them, it is the people with the money to invest in companies and those who big themselves up enough to become celebrities in their own worlds. Or those who simply buy followers (using mechanical turk or other systems) and thus increasing their numbers by proxy (“hey, someone with that many followers must have something cool to say!”).

We are not in control

We think as technical people that we run and forge the web but in essence we are the plumbers. We keep the system going and we are lucky to be listened to from time to time when people do stand knee-deep in, well, you know.

And this makes us go back to our comfort zones over and over again. Instead of trying to change the blatant sell-out web that makes a lot of money and try to get the cash-flow to projects that use the web in a more human fashion (giving those who have no voice a channel to speak, showing the content that gets censored on mainstream media, rejuvenate education and innovate healthcare and solve social problems) we love to argue about minutiae of our job or spout strong words of people needing to upgrade and care more about what we do or they will fall behind.

You know what, they will not, and they do not care. It is up to us to bring our passion, our drive, our care for details to the outside world and show how they can benefit from the things we do. We are in a very comfortable environment. Nobody in IT has problems paying their rent or finding food for tomorrow. We are privileged as we are currently experts people look for. In many cases not because of our ideas and who we are, but because we are the people who can build interfaces that the fans of the superbowl can use. If the creation of those interfaces will be automated, we will have to re-think and re-negotiate our standing. Being an expert as nobody understands what you do is much less sustainable than we think it is.

Knowing our enemies

I think that if we want to fight things like SOPA, ACTA, PIPA and all the other threats to the web as we know it, it is time to take our analytical skills and look at the world outside of our own. See what the big click targets of the web are doing and how we could use that to our advantage. Talk to the people we think our enemies and “outdated”. See how they click and find a way to put our foot in the door. We are not the suave sales people execs of old-school media (who run the world) listen to – we are the crazy-haired socially awkward scientists who are allowed to show their achievements from time to time.

We pride ourselves in saying we care about our end users and want to deliver the best we can for them. Well, let’s face facts that the people who we work for are not us, but might be those who care much more about what the mainstream media advertises them than the great ideals we have.

Hearing the politicians who were to decide about SOPA repeatedly say that they are not “nerds” and don’t understand the internet hurt me. I thought that after over a decade working as a web developer we are further down the line. We don’t seem to be, and this is partly because we are too arrogant to try to understand and reach the people the oldschool media obviously does reach.

Web enabled video at news:rewired

Thursday, February 2nd, 2012

Tomorrow I will be at Microsoft London to make IE10 support classList speak at news:rewired – media in motion on the topic of open web video and what you can do with it. For this, I got 10 minutes and then answer questions (or ask them) in a panel.

Update: The audio is now available on

The slides – for what they are worth – are on Slideshare:

Web enabled video

And here are the notes used in the slides and the story I will tell to the audience with all the links for you to try out:

Web enabled video

Today I have a few minutes to talk to you about online video and why it is an amazing opportunity for journalists.

Video is engaging…

There is no doubt that video is an incredibly engaging format for information, news, entertainment – well, for anything really. A video can much easier explain a complex topic than text could as people can see and repeat what you do. You can show instead of just telling or hoping people read what you painstakingly wrote.

Video is also hard to edit and change

One of the issues with video is that it is much harder to maintain than a text. Editing a video requires more technical expert skill and takes longer than writing a text or changing something in an article. Say you got a number wrong – in a blog post that can be easily remedied. In a video it means a re-edit, in the worst case a re-shoot. In the case of the web it also means re-encoding the video in a format fit for consumption on the web and re-uploading it to the servers where it needs to go.

Video is also a black hole on the web

The other big thing is that whilst your videos are engaging and amazing – for search robots on the web they are actually nothing at all. Video content is not indexed and the information in it doesn’t allow people to find it.

So what can be done about that?

It seems pretty old-school that we still live in a time where videos have to be produced as a fixed package, with names, labels, map overlays, other videos and imagery and extras inside the video. This does not only mean that these things can not be updated, but it also means in a lot of cases when it comes to online video that their quality is impeded by the overall quality of the video.

Separation makes things easier to maintain

On the web we long understood that by separating concerns from each other, we can deliver much better results. How things look is defined and maintained somewhere else than what they are. A text is written without any design to it, the design is defined in the site template or in the overall look and feel of your product. This makes it easy to re-use the text in several places and formats – covering mobile and desktop needs or even as a news subscription in a feed.

Separation allows anyone to enhance

OK this is going into “data hippy territory” but if you separate your content and make your video available, then anyone can help improve the quality of it and provide for example translations of the captions. For this, there is a simple interface called universal subtitles available.

Separation increases accessibility and find-ability

Subtitles and captions are a great example to make video content more available to people. Not only the hard of hearing but anyone. You can for example follow a debate in the gym or in the pub without needing to hear it. The other big thing about it is that a transcript of a video makes it searchable by Google and Bing. And – if it is timed it allows people to to jump to a certain section of a video instantly.

HTML5 video allows for all of that!

HTML5 video is a step forward in interactive video on the web. Its openness allows us to innovate with it and weave video content into the web much like we did with text and images in the past. No need to have a plugin, no need to pay licenses for offering your video in a fast loading and high quality format on the web. By using open formats you can make your videos part of the massive interlinked thing we called the WWW in no time.

Just another page element

In HTML5, multimedia is just another page element I can add into my design. You can make it interactive in parts, you can show only parts of it, you can rotate and style it any way you want. For example I always hated the second sun in Star Wars to show us that Tatooine is not on earth. In this demo I can now drag the sun away.

The timestamp is the glue

The main trick is that I have full control over the video in HTML5 and I can react differently according to the time the video is playing right now. I have many other things I can monitor and react to, showcased here and using HTML5 canvas I can even change the video itself while it is playing.

Tapping into the real-time web

All this allows us to have a video and get information from the web to mix with it. Realtime updates from Twitter, other videos, photos and comments from other sources – all of these can be used easily as we are using video with the web rather than putting already done video on the web for consumption. The 18 days in egypt interactive demo shows for example how you can add all kind of – at that time – real-time web information to the the January 28th speech by Hosni Mubarak.

Lean back, relax, grab some popcorn

And the good news is that Mozilla – the non-for profit for the betterment of the web – is making it easy for you to do that with our Popcorn project. Popcorn is a JavaScript library and tool to add web content to videos and re-distribute the final product on the web.

Some quick demos

Some very cool things have been built with popcorn already:

  • One millionth tower is a unique multi-project documentary from the National Film Board of Canada exploring “vertical living” around the world.
  • History in these streets is a audio documentary about the history of the Black Panther party enhanced with Google Maps, images and other multimedia
  • Buffy slays Twilight is a mashup of “Buffy the vampire slayer” and “Twilight” with information in Pop Up Video style.

Popcorn and its maker

We now need you to help us on our quest to make it easier for people like you to embrace the interactivity of online video. For this, we created popcorn.js as explained earlier, but we also made a tool that allows you to create videos in an interface. It is called popcorn maker, and we want you to kick its tires and tell us what is missing and what could be done better.

Helper functions: Resize images to a variable thumbnail size

Wednesday, February 1st, 2012

As part of the “Creating thumbnails with drag and drop and HTML5 canvas” post on MDN today, I spent some time creating a short and working resizing function that takes an arbitrary image and re-sizes it to fit into a thumbnail of a certain width and height. After a few failed attempts I googled around and actually found one of my old PHP/GD tutorials I thought I had deleted years ago. Well, the function still works :)

Without further ado, here is the resize() function (also available as a gist).

function resize( imagewidth, imageheight, thumbwidth, thumbheight ) {
    var w = 0, h = 0, x = 0, y = 0,
        widthratio  = imagewidth / thumbwidth,
        heightratio = imageheight / thumbheight,
        maxratio    = Math.max( widthratio, heightratio );
    if ( maxratio > 1 ) {
        w = imagewidth / maxratio;
        h = imageheight / maxratio;
    } else {
        w = imagewidth;
        h = imageheight;
    x = ( thumbwidth - w ) / 2;
    y = ( thumbheight - h ) / 2;
    return { w:w, h:h, x:x, y:y };

The returned data is the width and the height of the image and the x and y position in the thumbnail – ready to use in HTML5 canvas.

You can test the function in this Fiddle: