Slides of the presentation (if online) are listed at the Fronteers site and at the end of this post (same content, read along). I’ll briefly recap some of the (for me that is) most interesting parts.

Thursday

After a pre-conference meeting tuesday at Mirabeau (Where Chris Heilmann and Peter Paul Koch hinted at what was to come) Thursday started with two talks concentrating on the mobile web. Summarized: Webkit is not webkit (and webkit is just one of the mobile browsers) and mobile devices are more different from each-other than desktop PC’s. So, developing for the mobile web (and not just the iPhone) is challenging.

Next on was the presentation with the most hilarious title of all (and arguably content also) by Chris Heilman: Of Hamsters, Feature Creatures and Missed Opportunities. Some highlights: Be passionate about what you do as a developer or leave that aspect for someone who is. Don’t reinvent the wheel just because you like to apply a (your favorite) technique. The web is information, not sites. The feature creature (just check the slides) and YQL, which basically is querying the web and looks really great (kinda missed out on that one having done a lot of back-end development lately).

After the lunch-break Stephen Hay covered three drafts that exist for CSS layouts that will take away the limitations that exist today: CSS3-Grid (Microsoft), CSS3-Flexbox (Mozilla) and CSS3-Layout (W3C). Very interesting as it makes very clear that, although a vast improvement over tables, today’s CSS capabilities with respect to layout (and thereby the way we work) are far from perfect.
Following Stephen, John Resig went in-depth on javascript testing techniques covering unit testing as well as functional testing. Furthermore an interesting testing concept that can be used for testing JS frameworks was introduced: TestSwarm. Steve Souders, fully aware of being the last barrier between the crowd and the after-party, concluded the day with some interesting techniques that can help speed up websites.

Friday

Douglas Crockford kicked of day 2 with a presentation about javascript security. He explained Object Capapability Design, a security model in which objects can only access objects they have a reference too. I liked the part about using ‘facet objects’ to control whether or not references are maintained or broken. After that Pete LePage showed some HTML5 stuff that’s found it’s way into IE8. The presentation had a (not the only one) funny moment where in Expression Web’s IE6 emulation it showed the fronteers website with the ‘your (IE6) browser is obsolete’ warning. Jonathan Snook then extensively covered the topic of getting fonts on the web. It was very interesting that he addressed the licensing issues involved with using tools like sIFR. Something I think is often overlooked.

After the lunch Robbert Broersma lifted the hood (just slightly) of the engine powering the Xopus editor. He showed some tips with regard to improving and maintaining performance, most notably Google for ‘leak free closures’. Thomas Fuchs took over and explained some of the animation scripting going on in scripty2 and showcased his lightweight animation library emile.js.

Next presentation was by Nicolle Sullivan and the title ‘Object Oriented CSS’ made me quite curious. Rightly so cause I really enjoyed this presentation. OOP concepts like code reuse, encapsulation, singletons and inheritance were put into the perspective of organizing CSS. Quite a different approach really but it addresses problems I think a lot off css-coders can relate to. I found it interesting to realize that OOP thinking, which for me is day-to-day practice when working with PHP, somehow hadn’t made it to my CSS approach. At least not to the extent as shown in this presentation.

The day concluded with Dion Almaer and Ben Galbraith talking about ‘The Future of Web Applications’. Very entertaining presentation covering new technologies like Google Closure Tools (Quoting: ‘If you want to write code that looks like java then it’s a great tool for you’), canvas, web workers and webGL.

Conclusion: Very nice conference with indeed a stellar line-up. As always the hallway sessions are not to be underestimated as I usually (unless I’m tired or need to get things done) find it interesting to talk to other people and pick up some new ideas or approaches. To conclude with the closing presentation’s very fitting last commandments (yes, I wrote those down):

• Thou shalt make thine interfaces responsive
• Thou shalt keep the data of thy users holy

• Twitter: #fronteers09
• Flickr: fronteers09

Presentations

Just to show that YQL literally is ‘querying the web’: The YQL below extracts from the Fronteers 2009 presentations page those elements in the list that have a link. And… it always returns valid xml which makes it ideal for parsing the HTML cruft generated by some applications.

SELECT * FROM html 
WHERE url="http://fronteers.nl/blog/2009/11/presentations-fronteers-2009" 
AND xpath="//ol/li/p/a/ancestor::li"

The T-mobile banner is positioned at the bottom of the viewport and is kept in place by javascript or actionscript. This means that during scrolling the banner shakes because the script reacts to the scroll event. No awards won but not a real problem either. But what is bad is the fact that in the orange area (note the little pun there) no link can be clicked. Something I didn’t notice at first resulting in rapid agitated clicking. See screenshot below:

T-Mobile banner on nu.nl

As a ‘normal’ visitor that is just annoying but as a web-professional it irritates me to a great extend that there seems to be no technical need for this misbehaviour whatsoever. So what goes wrong? On a first glance there seem to be four roles involved:

• Nu.nl: They need adds but it seems unlikely they want banners to block parts of their site and thereby cause user frustration.
• The banner merchant. Doubleclick, adclick or whatever their names are. I’m not really into the advertisement business but I wouldn’t be surprised if different advertisement programs exist that site publishers can use: flashy or not, type of products promoted, sound or not, full page mayhem or not. That sort of differentiations. Normally adds on nu.nl aren’t this annoying so something might have gone wrong there.
• The developer or company developing the banner. Perhaps there’s a tight deadline. Perhaps technical knowledge is lacking. Maybe they just don’t care…
• The advertiser, in this case T-Mobile. Bottom line is: they want to get visitors to their site. But perhaps reputation might be a consideration. I think in most cases that the people reviewing a banner proposol don’t have the knowledge to determine that a banner has these unwanted technical side-effects. Or the prototype presented doesn’t show the problems.

So somewhere in the process things go wrong, be it a lack of knowledge or a lack of interest for the end-user. Sadly the result is a lack of quality having bad usability as a consequence.

To conclude this criticism in a more positive and constructive fashion I’ve made a quick css proof of concept showing that it’s perfectly possible to achieve the layout while preserving click access to the underlying site.

Bottom aligned banner proof of concept

It’s positioning is now done by using css position:absolute but could just as well have been javascript. The demo took about 15 minutes to make while watching tv. I haven’t tested it on IE6 so expect about 2 hours needed for that but even then development time seems reasonable. The advertisment html part is displayed below.

<div id="banner" style="background-color:purple;position:fixed;bottom:0;width:100%;height:80px;">
	<div id="bannerCenter" style="width:760px;height:80px;position:relative;margin:0 auto;background-color:red;">
		<div id="phone" style="position:absolute;width:100px;height:160px;left:660px;top:-100px;background-color:#666;z-index"100;">
		</div>
	</div>
</div>
</body>

Of course the real world is more complicated than can be described in a short article but it’s obvious that the examined banner is sub-par. In my opinion it would be wise, or at least nice, to take the user a bit more seriously.