Christian Heilmann

Author Archive

Screencast: Building an online profile of distributed data with YQL

Wednesday, April 15th, 2009

Distributing your information all over the web has become a common practice over the last few years and it makes a lot of sense. By covering lots of distribution channels you can reach various audiences and get comments and feedback from them.

You also make yourself independent of a single online resource – if your server is unavailable your data is still around. I could go on with the benefits of distribution (after all I’ve written a book on the subject) but let’s take a look on the flipside: by spreading your data all over the web you also spread yourself thin and you want a single resource to act as your main URL.

People have been telling me for a while that they don’t have time to find all the things I leave across the web and that they are wondering if there’s a single entry point. One Solution is FriendFeed but you want to be able to style your “online profile” more than that.

This is where YQL comes into the equation. Using YQL, a YUI CSS grid, a few dozen lines of PHP and a bit of CSS I managed to pull together My online portfolio http://icant.co.uk and you can do this as easily. The following screencast shows you how it is done:

You can also download a readable version of the screencast for ipods.

Since I put together the screencast (which was a bit hurried as I needed to catch a flight) I’ve updated the idea with yet another script that scrapes the resulting HTML document to create an RSS feed of all my data on the web.

Using YQL has a few more benefits than reading all the different sources yourself and mixing them up: the results are cached for you, YQL’s connection to the web is very much likely to be faster than yours which makes the fetching process easier and you have full control over what’s happening as YQL output gives you diagnostics information.

I’ll talk more about in YQL in various talks in the nearer future, and there are even more interesting changes to the system itself around the corner. Stay alert for awesome updates.

TTMMHTM: Tweenbots, mostly, but also Wall-E casemod and Disney templates

Sunday, April 12th, 2009

Here’s something that put a smile on my face this morning that needs to be jackhammered off: Tweenbots. Kacie Kinzer wondered if people are ready to help a friendly, but dumb robot and build a small robot with a smile and a little flag saying where it needs to go. All the robot can do is move forwards.

Tweenbots are human-dependent robots that navigate the city with the help of pedestrians they encounter. Rolling at a constant speed, in a straight line, Tweenbots have a destination displayed on a flag, and rely on people they meet to read this flag and to aim them in the right direction to reach their goal.

The results are shown in this wonderful video:

The results were unexpected. Over the course of the following months, throughout numerous missions, the Tweenbots were successful in rolling from their start point to their far-away destination assisted only by strangers. Every time the robot got caught under a park bench, ground futilely against a curb, or became trapped in a pothole, some passerby would always rescue it and send it toward its goal. Never once was a Tweenbot lost or damaged. Often, people would ignore the instructions to aim the Tweenbot in the “right” direction, if that direction meant sending the robot into a perilous situation. One man turned the robot back in the direction from which it had just come, saying out loud to the Tweenbot, “You can’t go that way, it’s toward the road.”

Now all we need to do is deal the same way with other human beings! The other thing it proves is that cute beats smart.

Other things that made me happy this morning:

Is it getting harder and harder to show very easy examples?

Tuesday, April 7th, 2009

I am right now teaching a four day class of DOM and Ajax in Sunnyvale, California and also do some tech editing for Scriptin with JavaScript and Ajax by Charles Wyke-Smith and I find one thing that is pretty worrying: easy examples of web development practices are dangerous to show these days.

I’m talking about practices that make it easy to get quick results and give readers and attendees “I am getting this – this is easy” fuzzy warm feelings.

One very obvious example is form validation and re-rendering of a form using PHP_SELF and displaying user data using $_GET or $_POST. Unfiltered they are a free invitation for any XSS attack and will turn your server into a spam-hub or bot-net drone. Explaining countermeasures of XSS normally is out of scope for an example that only shows how a form would work that you enhance progressively.

The same applies to simply outdated ideas like onevent handlers. It is easy to show an example that uses a few onclick handlers, but explaining event handling really well takes a bit of time. Again, this is something that really does not fit in the scope of a DOM course.

I do however think that it is important to get it in there, as there is no such thing as knowing one technology in the web development stack and being able to use it. There’s a lot of overlap with other areas and in order to be a good developer and play well with others you need to be aware of your effects and areas of overlap with your colleagues’ skill-sets.

The other extreme I find myself doing is being too over-cautious. I went through the tough times of the first browser wars and got a deep-rooted mistrust towards anything some browser tells me is OK to do and use. However, I get the feeling that it doesn’t really matter any more if Internet Explorer has a problem with name vs. ID or whatever other shenanigans we have to be aware of when we build things from scratch.

I do get the distinct feeling that not building on top of a good client-side library is simply a waste of time these days. Libraries allow us to write code, not to work around bugs and wonder what other safety measure we have to put in.

That’s why I started asking people in my courses to use Firefox with Firebug and use a good text editor to code along. Today I managed to breeze through how to write HTML that is ready for internationalisation and works with assistive technology, over simple DOM access to the document and at the end writing a validation script for a form using generated DOM content. By concentrating on how things are meant to work instead of debugging random issues I managed to get the students to reach far into the matter in a day – even those who never touched JavaScript before.

Maybe it is time to get beginners accustomed to a market that builds on working solutions and benefits from browser abstraction via libraries than teaching developing from total scratch – bad browsers and bad people taking advantage of any technology to gain access or spam us seem to have made this way of working redundant.

TTMMHTM: 100% male, resumes, tuning Google Adsense, communication skills

Sunday, April 5th, 2009

Must-See-Videos: Nate Koechley on Professional Front-End engineering

Saturday, April 4th, 2009

I’ve just finished watching Nate Koechley’s talk on professional Front-End Engineering on the YDN Theater:


Nate Koechley: "Professional Frontend Engineering" @ Yahoo! Video

You can download the m4v for your ipod and read the transcription on Eric Miraglia’s blog.

I’ve seen Nate give this talk before in a shorter version at @media in London, but this version has the whole story from what frontend engineering is, over technologies and methodologies to use and avoid up to a very compelling argument why it all matters.

So if you can spare an hour and a half (or chunk it over two workout sessions in the gym like I did) go and watch this video before you start flaming on mailing lists, forums or flat out tell people that it doesn’t matter when something is incomprehensible or works by magic – as long as it works.

Thanks Nate for a great encapsulation of the whole frontend matter in one video.