Things that made me happy this morning:

• Michael Mahemoff on HTML5 for Game Developers
• Fascinating research into the CAPTCHA solving business – getting 1000 cracked will cost you half a dollar!
• Interesting discussion about the merit of awards for designers
• Codinghorror has a good analysis how Firesheep works showing just how broken cookies are
• HTML5 Doctor has a simple introduction to extending HTML5 with Microdata
• A Practical Guide to Designing with data by Brian Suda
• box-shadow:inset can render some very cool designs.
• A paving machine of awesome
• What should a developer know before building a public web site answered comprehensively on Stack Overflow
• Good list of new HTML5 features of Mobile Safari
• Good discussion about the merits of validation
• Videos of the build conference on vimeo – Cederholm, Fisher, Meyer, Budd
• förbind – a collaboration tool using websockets by Remy Sharp
• Wow, I did not know that people managed to smuggle art to the moon
• Why using simple language should be lucrative is an interesting article questioning copy as important
• Zurb has some impressive CSS Box Shadow & Text Shadow Experiments
• Solid design advice in how to design a website that won’t piss everyone off
• Chris Spooner has some pretty rad text effects using CSS3 text-shadow
• Tuning canabalt has some great tips on how to write a mobile game
• Some pretty funny book covers – albeit not planned to be that way
• Great tips on how to move from TextMate to VIM
• Awesome article about using yql to execute JavaScript in the cloud
• Five Usability Challenges of Web-Based Applications by Jared Spool

Things that made me happy this morning:

• 20 Things I Learned About Browsers and the Web is a great eBook style HTML5 presentation
• Nick Halstead on what motivates programmers
• There is background audio on iPhone you can use for text-to-speech
• A step by step tutorial how to mark up a progress bar
• Detailed video of a working CPU in Minecraft – the first CPU with livestock in it
• Interesting write-up on link padding for hashtags for smoother browser scrolling
• Amazing – you can built a touchpad using paper and graphite
• Twitter partnered with Gnip to offer more tailored Firehose feeds for developers
• easyXDM is a library to work around the same origin policy of JavaScript in many different ways
• IE6 fixer is a polyfill to work around the issues of the browser – you can select which things to fix.
• Interesting tip how to track Ajax loads and JS event clicks in Google Analytics
• A call to abandon designs when you like them to much is tough but might yield better results in the long run
• Glenn Jones is always good for interesting concepts. Draggables is an alternative way for users to pass data between web sites.
• Andrew Woolridge has a great writeup on how to create web services with JS and YQL
• YQL Erklaerungen in deutsch
• Chaos invaders – bit confusing but then pretty cool
• 3D Pong in jQuery is quite a lot of fun
• F1 by Mozilla makes social sharing of web sites easy
• Good introduction to the support of HTML5 forms in Firefox4
• A very cool TextMate colour scheme for developers
• Josh Aas talks about the Improvements for Firefox4 on Mac
• Frogdesign built a cool visualisation of where people tweet with live heatmaps.
• A nice live audio analysis of tweets – the more people tweet, chirps you hear

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:

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:

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:

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:

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”:

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.

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:

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

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?