Christian Heilmann

You are currently browsing the Christian Heilmann blog archives for November, 2010.

Archive for November, 2010

HTML5 showcases – open and broken by default?

Saturday, November 13th, 2010

As announced earlier I am leaving Yahoo to work in Mozilla as principal evangelist with the focus of HTML5 and the open web. So my job will be to advocate the awesome of HTML5 to the world.

Yay HTML5 and the open web technologies

I love the open web and HTML5 and I strongly believe that they are the future of our work environment. HTML5 brings sanity to the crazy hacking we had to do in the past to run web applications in browsers. I don’t want to change hashes and use iframes to seed browser history, I don’t want to use Flash to allow for uploading several files at a time and I really don’t want to have video that I cannot manipulate from JavaScript.

We’re forging the future happiness of end users here and our main job is to sell HTML5 as the better alternative to what we are doing now. We need showcases to tell the world just how awesome HTML5 is and luckily a lot of people do so.

Be good, be open

The messaging of the leading lights of HTML5 is simple: it is about open technologies and the web. So instead of PDFs and Flash movies a lot of presenters use hand-rolled HTML5 slide systems which are simply documents on the web and anyone can see them with a browser. When Tantek gave his “HTML5 right here, right now” talk at Fronttrends in Poland and YUIConf in Sunnyvale he very much pointed out the graceful degradation of systems like that and their benefits for the web. As HTML slides are on the web people can easily find them and read them.

When it gets weird

The problem that a lot of HTML5 demos have right now though is that they only work in a certain environment. Showcase presentations like Paul Irish’s The State of HTML5: Inaugural Address even need more than one browser to work and Paul switches them during his talk. This is a feat of HTML5 right now – not everything works the same across browsers and you want to show off some of the cool things by sticking to one browser and others in another browser.

A few days ago for example people got very excited about a 3D Tetris implementation by Tobias Schneider which apparently looks like this:

3D Tetris

I went through all my HTML5 browsers and saw this:

I learnt about this demo from Twitter. Whilst the original Tweet by Tobias stated that a Chrome Dev Channel build is needed as the browser to see the demo, retweets and others omitted that piece of information. This is bad. As you can see in the screencast above all I saw was broken implementations – even in Chrome. Only Safari showed it the way it was intended.

The issue is that the slide systems expect environments working without providing a fallback to other environments. I am a geek, I can live with that – if I showed this demo to people who are not geeks they’d get the main impression that HTML5 is just weird and doesn’t work yet.

Tobias more or less agreed to this:

@codepo8 Sorry, but when it isn't working in the browser of your choice, HTML5 seems to be broken right now.

This all in all doesn’t help the cause. If you want to advertise a new book you don’t show a bleached out and unreadable cover. If you want to showcase the reliability of a car you don’t make a video of it not starting.

Using HTML5 demos responsibly

There are a few solutions to these issues:

  • Do not upload demos that only work on your computer and your environment – let people wait for the video of your talk and upload the code to GitHub telling people exactly what is needed to see them.
  • Create a screencast of your demos and offer that one as a fallback for browsers that don’t support your functionality. Test in your live demo for the browser you need to make it work and show the screencast to the others explaining which browser you used to be able to see it live. This also protects you against the very common case of having no connection and conferences. The simplest way to create a screencast is by using Screenr. More tips are available in my Developer Evangelism Handbook.
  • Spend some more time and also support other browsers – this would also allow you to show the differences live.

I know all of this is more work, but nothing that couldn’t be tackled if you distribute the job a bit. Contact others to maybe help you fix your demos for other browsers they are more familiar with and we’ll have great demos to show the world the power and revolution that is HTML5.

Update: and it works! I just wanted to point out that taking Tobias’ example was not about shaming him or anything like that. I loved his presentation and the demo and quoted his tweet to show that tweets will be taken out of context. People not re-tweeting his explanation that the demo only works on Chrome was another good example of how things go wrong right now. To add, following our conversation Tobias did fix a lot of the demo and I am very thankful about this: fixing

Going oldschool with del.icio.us – handing over Techthursday

Friday, November 12th, 2010

For the last few months, I have always collected some links from my reader every Thursday morning and published them on the Yahoo Developer Network blog. Now that I am leaving Yahoo people asked me how that would go on. As I cannot access the blog from outside the company network I said I’d build a system that allows the editor taking over to simply copy and paste the collected links in the morning.

Update: Apparently that wasn’t needed as Tom is taking over Tech Thursday:
sh1mmer taking on TT

Anyways, the script still works :)

Normally I would use YQL to do something like that but I once again found that sometimes the most simple is the best.

I am using del.icio.us to collect my links anyways, so I thought the easiest is to tag the ones I want added with “4ydn”. That took care of the collection. Now to add the description for all the links, I just used the notes field in delicious and a placeholder. For example “{3D Pong in jQuery} is quite a lot of fun”:

Placeholders in delicious notes by photo

All I needed to do then is getting the links as a JSON object and replace the opening brace with the anchor opening tag and the closing brace with the anchor closing tag.

You can get the links as JSON with the tried-and-true delicious feed output http://feeds.delicious.com/v2/json/codepo8/4ydn?count=50&callback=ydntt

The function for display then is very simple indeed:

Putting all together there is now the Techthursday generator.

Slideshare embeds without Flash

Friday, November 12th, 2010

I’ve said it a few times before, but I love Slideshare. For a professional speaker like me it is a great way to share my decks and get feedback from people allowing them to re-use. The thing that some people complained about is that the embed is Flash based and as we all know Flash makes kittens cry and Ninjas visible so we can’t have that.

Don’t fret though as there is a way out. Say you have a presentation on Slideshare at http://www.slideshare.net/cheilmann/reasons-to-be-cheerful-fronteers-2010:
Reasons to be cheerful - Fronteers 2010 by photo

Simply add a /mobile/ before the user name to see the mobile version which is images with a bit of HTML:

Slideshare Mobile by photo

You could just slap this in an iframe but the chrome of the mobile version can be a bit overwhelming. No worries – the open web can fix that. Looking at the source code, you find a JSON object with all the info:

The interesting parts here are the baseSlideUrl and the totalSlides. To get the different images, just add —slide—{n}.jpg to the baseSlideUrl with {n} being the number of the slide.

Putting this together, adding some styling and a dash of YUI3 for functionality I can now present you with the embeddable HTML version:

Go to http://icant.co.uk/slidesharehtml and simply enter the URL of the slides to convert them. The source code of the converter is on GitHub so you can host it yourself.

See the flow in the following screencast:

I love open web technologies and clever converters, don’t you?

Understanding progressive enhancement with yui3 – YUIConf2010

Wednesday, November 10th, 2010

For years I have been advocating the benefits of progressive enhancement as a safeguard to deliver working code to the world. In this – my final public talk as a full-time Yahoo employee – I talk about the why and how of progressive enhancement. I take a look at examples from the real world and point out dangers of repeating mistakes from the past for the sake of showing cool technnology.

There is also a copious amount of swearing if I remember correctly. Enjoy.

The Slides


Understanding progressive enhancement – yuiconf2010

Audio recording of the talk

The audio recording is available on archive.org

Using YQL sensibly – my first talk at YUIConf2010

Tuesday, November 9th, 2010

I am currently at YUIConf in Sunnyvale, California to learn lots about YUI3, Node.js and YQL straight from the horse’s mouth. Yesterday I gave my first talk on using YQL in a sensible manner – coming from using webservices in JavaScript up to using localstorage to speed up your apps and keep state for your end users.

The Slides

The Audio

Now I need to write my second talk for later on – stay tuned for that one.