Researching something on the web can be pretty annoying. Search engines get better every year, but there is a whole world of social sites that are not indexed. For example if I search for a nice photo of a red panda I use Google image search. If I want to use this photo later on I am better off using Flickr or Picasa and see what license the photo is.

Yahoo’s researchers had the same problem which is why they assembled all the social updates in one XML feed – the Yahoo! Firehose. This, in contrast to other Yahoo APIs also comes with commercial terms and conditions and is available through YQL. In terms of data, the Firehose aggregates a lot of different sources:

Yahoo! 360, AOL, Bebo, Blogger, Bloglines, Digg, Diigo, Goodreads, Google, Google Reader, Last.fm, Ma.gnolia, Movable Type, Netflix, Pandora, Picasa, Pownce, Seesmic, Slideshare, SmugMug, StumbleUpon, ThisNext, TravelPod, Tumblr, Twitter, TypePad, Vimeo, Vox, Webshots, Xanga, Yelp, YouTube, Zooomr, Yahoo! Avatars, Yahoo! Buzz, Yahoo! Profiles, Wisteria, Yahoo! Answers, Yahoo! Shopping, Yahoo! Autos, Bix for Yahoo!, Yahoo! Bookmarks, Yahoo! Briefcase, Yahoo! Calendar, Yahoo! Classifieds, Delicious, Yahoo! Family, Yahoo! Sports, Yahoo! Finance, Flickr, Yahoo! Food, Yahoo! Games, Yahoo! Geocities, Yahoo! Green, Yahoo! Greetings, Yahoo! Groups, Yahoo! Health, Yahoo! Hotjobs, Yahoo! Kids, Yahoo! Local, Yahoo! Movies, Yahoo! Music, MyBlogLog, Yahoo! News, OMG! from Yahoo!, Yahoo! Personals, Yahoo! Pets, Yahoo! Status Updates, Yahoo! Guestbook Comments, SearchMonkey from Yahoo!, Yahoo! Shopping, Yahoo! Sports, Yahoo! Tech, Yahoo! Travel, Yahoo! TV, Yahoo! Video.

You can do the data junkie part and use it in the YQL console:

This can be annoying though, especially as you cannot see the photos and videos. This is why I put together a research interface on top of the Yahoo Firehose:

You can see the research interface in action here but more importantly, the source code of the interface is available on GitHub which means that you can host it yourself – for example behind a firewall or make it part of your Intranet.

For a local install you need to sign up for a developer key, edit the keys.php file, put all the files up on your PHP enabled server and you are done. If you get stuck you can get help on the YDN Forums.

Notice that I am keeping the state of your last search by storing it in local storage when your browser supports it – this can be useful for larger searches.

There were some interesting conversations around the lettering.js jQuery plugin on Twitter today. The thing that lettering.js does for you is to turn a text into a series of SPANS with automatically numbered classes to give you a handle to style them:

Some Title

S

o

m

e



T

i

t

l

e

Now there are a few questions I have about this:

• Would you write that by hand?
• Would that be your first idea of marking up a piece of text to add to an HTML document?
• Is it worth to add that many classes to be able to fix kerning and styling?
• How would you use that with several replacements?

To style this you’d either use h1.char#{} for each character or .fancy-title.char1{} the latter not being supported by IE6. Simply using .char#{} would mean that if you use the lettering.js again you need to override it for another element or up the specificity in other ways – in essence adding more and more to your CSS file.

The answer I got to the first question was that no, people would not write that by hand and this is why this plugin is awesome as it does this thankless task for you. The question though remains – is this a sensible use of HTML or is this painting with HTML?

When we use tables for layout this is considered inefficient, outdated and not intelligent web development. We limit ourselves to a defined look and feel – we mix presentation with structure. If we add a SPAN around each character of a word we mix presentation with content. Even worse, if the text changes, the numbering changes and the kerning fixes will be applied to the wrong characters.

To me, text on the web should be editable. We don’t use an image for headlines as we want to make it easy for people to edit them, translate them or add to them. Maintenance is why we opt for HTML over other techniques to add a headline to a document – techniques that would give us full control over the look and feel.

Using something like lettering.js is not more sensible, clever or logical than writing the SPANs by hand – it is just less work. In the end, the browser will get the same questionable HTML construct – we just make it dependent on a technology that might not be available and write it out after the page has already loaded. So in essence it is less reliable and slower than writing the SPANs by hand but fulfills the same premise. And the premise is that we want control over something that we chose to create in a technology we like using as it gives us flexibility. In essence we’re un-doing what the browser and HTML does for us for the sake of simulating a stricter environment.

Yes, CSS has not enough typographical handles. Yes, a trick like that gives us more control. But it also means that we fix the state of the headline by mixing content with presentation. If you edit the text – you need to edit the CSS. It is the same mistake that developers make when they make functionality dependent on the text value of a button rather than its class or ID - if an editor changes that text in the future your application breaks.

Typography in the granularity of what lettering.js promises comes at the cost of fixing the visual state of an HTML element. We use HTML instead of creating an image as we want people to be able to edit it. It is a proper Catch-22.

Lanyrd is a cool new web site to organise the events you go to and speak at. The thing that is missing right now is a badge to show off your upcoming events on your own web site as requested by Dan Rubin:

The team is working on it but in the meantime you can easily use YQL to do that. In YQL you can get any HTML of a page and scrape it. You then can get it back as XML and if you provide a callback method name it returns it as JSON-P-X which is HTML as a string inside a JSON callback.

The first thing you need to do is to find the HTML you want. If I look at my own Lanyrd page then I can do that in Firebug:

What I want is the DIV that contains the H2 element with the word “Future” in it. In the utterly painfulincredibly flexible and elegant XPATH syntax this is //h2[contains(.,'Future')]/.. or “get all the h2 elements where the text node contains the word Future and then go up one level in the DOM hierarchy”.

In YQL this means you can get the content in the following format:

select * from html where

url=”http://lanyrd.com/people/codepo8/” and xpath=”//h2[contains(.,’Future’)]/..”

You can Try this in the YQL console or see the results as XML.

To turn this into a badge, all you have to do is to enhance a link to the profile with a JSON-P call to YQL. The JavaScript for that is very easy:

You test if there is an element with the ID “lanyrd” and if it is a link. If it is, you add a loading message to its text and read its URL. You then assemble the URL to the YQL command shown above and create a new SCRIPT element pointing to it. Once this has been executed it will call the method lanyrdbadge.seed(). All the seed message needs to do is to replace the class of the DIV with the ID of “lanyrd” and remove the “speaking at” message. This then allows you to write some CSS to style the badge:

The HTML is a link to the profile and a SCRIPT node pointing to the JavaScript:

You can see the result here.

If JavaScript is not supported all you have in your document is a link to your profile on Lanyrd. If JavaScript is supported you can style the badge any way you want. The full code is on GitHub.

Today I spoke at the ThinkVitamin JavaScript online conference alongside Simon Willison, Stuart Landgridge and Drew McLellan.

Topic and slides

My topic was “Maintainable JavaScript” and I managed to pack 150 slides into the 50 minutes of my talk. The Slides are available on Slideshare.

Maintainable Javascript carsonified

View more presentations from Christian Heilmann.

What I covered

I went through a few of the tricks you should apply when you want to write maintainable JavaScript:

• Using, not abusing libraries
• Separation of concerns
• Building for extensibility
• Documenting your work
• Planning for performance
• Avoiding double maintenance
• Live code vs. development code

A few of the topics got repeated by the other speakers but frankly I am always fascinated just how many people do not know about the X-requested-with header JavaScript libraries add to Ajax requests and how you can use it to render different content for Ajax requests and for include() requests. This allows you to maintain your whole content and HTML on the server and have all the Ajax goodness rendering out a simple HTML string.

The code example for the validation is available on GitHub.

Another thing that is missing a lot in people’s approach to JS is a proper build process. That’s why a lot of people try to optimise for performance during development and leave hard to maintain, specialist code behind.

In essence, I showed that by building logical backend code you can save yourself a lot of JavaScript and you build things that work instead of things you hope will work.

The conference experience

Speaking at pure online conferences is weird. For starters we had to change the order as Simon Willison is on his honeymoon world-tour and currently in Marrakesh, which meant his connection was flaky. The audio during his talk was not the best and he didn’t even bother with video.

It is a strange experience to sit there with a headset and talking to your desktop as you cannot see the audience. Talks get much better when you can interact with the audience, ask questions, see them falling asleep or seething with rage – that kind of thing. In an online conference this is missing and you cannot read the chat whilst you present as this is too distracting. Drew was suffering the most from this lack of interaction and I had my audio drop out once which meant I had to repeat some slides.

All in all I find these things work better when there is a discussion going on – like a moderator interviewing a speaker over Skype and people asking questions. The other option of course would be to record the talks beforehand and play them instead of hoping all works out fine live – it never does. Recording the talks and then having a pure Q&A session with the speaker on skype afterwards seems to me a better way to work with these issues.

The benefits of these conferences are quite cool. People do not have to travel, you can pay one ticket and let a whole office watch, speakers don’t need to wear trousers and the liver of the speakers doesn’t need to suffer as much as it does at normal conferences. I am not quite convinced about the “green” argument of these events as they do use up energy, too but hey, at least it helps people thinking “green”.

Online conferences are a good idea as an add-on but I don’t think they’ll replace conferences as the networking and “meeting in the flesh” aspect is lost and that makes them feel a bit clinical and cold. That said, Carsonified are doing a good job with these right now and are lovely people when you interact with them as a speaker.

The Google UK logo today is a mass of bouncing colourful balls that flee the mouse (screencast):

This is another example how Google are happy to play with their brand to show off some cool new browser technology (the other of course being the Pac Man logo a few weeks back). This, and the Pac Man is meant to show off what you can do with JavaScript and HTML5 and how smooth it can look on Chrome. My screenshot was taken with Firefox, so there is no racism in this code either – another plus in my book.

If you reverse engineer the code you will find that the bubbles are actually DIV elements that have a huge border radius. You can find the whole code of the effect in the source code when you look for google.doodle() or in this gist (beautified):

As you can see there is not much magic to it. The CSS is even easier:

Yes, all of this is pointless bells and whistles, but I have to say I like it that a company puts technology and showing it off just for a day on their agenda.

Update: the fact that the DOCTYPE of the site is HTML5 does not make this effect HTML5 though. It is simply a JavaScript that moves DIVs around and resizes them. This could be done in HTML4 and for IE6, too. The upgrade from classic DHTML animation is that it uses CSS3 to create the round bubbles and that nowadays this animation looks smooth on faster computers. In the time when IE6 was hot this would have looked terrible. Notice Google blocks IE from getting the effect (and sadly enough Opera, too, although it would work just fine with their JS engine).

Another Update: Rob Hawkes used the code here to port the effect to Canvas to make it HTML5 (well Canvas) driven.

Last update Robin Berjon ported the code to SVG as another open technology in the new stack.