Yesterday I went to London to deliver the opening Keynote at the Future of Web Apps. In it, I reminded people of using the web to build apps on the web, why it makes sense to build with open technologies and showed off some of the new technologies.

The presentation slides are available here

The audio recording of the talk is available on archive.org.

In the afternoon we also had a browser panel with participants from Mozilla, Google, Microsoft and Opera. My colleague Dan Horner was busy taking notes (impressive, thanks!):

Panel:

Alex Russell – Google (JS standards commitee)
Giorgio Sardo – Microsoft
Patrick Lauke – Opera
Chris Heilmann – Mozilla

1. Question: How do you choose standards and prioritise them

A – Google – Extolling getting together rather than 1st mover disadvantage. Chrome’s goal is to understand what web developers need, and try to get vendors to join them; either by implementing and shipping first, or taking and pushing standards forward.
A – Microsoft – Iteration is key – pushing a standard out, and iterating to prioritise.

2. Question: If someone wants to lobby; who do they talk to?

A – Microsoft – We want feedback; incredibly important, whether enterprise or individual feedback. Discussed community groups; allows users / developers to participate. By getting a minimum of 5 people together, which allows a proposal to be considered by the W3C board. Join W3C community groups.
A – Opera – Looking at what other browsers are doing / WebKit as an example – they follow what’s going on in the WK community; and prioritise it. Large section of Opera team in developer relations, and attend (or speak at) many conferences. Get a feel for what the other browsers are doing, but try to prioritise what their end users and developers want.
A – Mozilla – Bugs is the fastest way to do it. Best way to do it – and better than using Twitter / Social media. Security is very key in testing: raised example of a full screen UI, that could potentially trick you into entering information under false pretences.

3. Question – Desktop versus mobile

A – Microsoft – Have been in desktop and mobile for a while ( quote: could debate how successful we’ve been). WIndows Phone 7 – Mango update – they’re now shipping IE9 mobile with every client. Have started sending out 1-2 weeks ago. 50% have updated to 7.5, and are planning to have everyone updated by the end of the month. IE9 is exactly the same engine on desktop as on mobile. They think that the expectation for developers is that it should be equal.
A – Opera – Have been in the mobile space for a while: mentioned Opera mini, how it precluded Amazon by a long way. Opera mobile also exists. Core rendering engine is identical between the two. Pretty much on par with desktop and mobile (Opera mini is updated automatically as it’s processed through a server).

3b. Question – Are there any Opera features which aren’t supported on mobile that are there on desktop

A – Opera – They think they’re pretty close between the two (although could be a delay of a couple of weeks to have parity with each update.
A – Google – Chrome is not the Android browser. The Android browser has a lot of the same technology that WebKit / ChromeKit have. Chrome is the same for every platform it’s supported on (Windows, Mac, Linux, Chrome OS).

4. Question – Any frustrations (initially asked about Chrome)?

A – Google – Bandwidth caps; no server rendering available.
A – Mozilla – Firefox comes out every 6 weeks; cool new features all the time. Mobile Firefox is being taken very seriously – kicking and screaming and on par with desktop now. However different devices have different challenges. On mobile we’re concentrating on performance, as well as sync – user experience between desktop and mobile.

5. Question – How fast is Microsoft updating IE?

A – Microsoft – In two years since IE 8 - have updated release cycle. They want to ship a new developer version every 8-10 weeks. Want to show prototyping as it’s happening with risky experiments. Have new environment HTML5 labs – where they prototype and iterate; they prototype, test, and then push successful features into the main release.

5b Google Q to Msoft – Thinks there’s problems with lag in updates. Creates a limiting factor with new features – what’s with the half life of IE when Windows Phone is auto-updated.

A – Microsoft – Microsoft has a support in place that lasts 10 years; that’s why they still support IE6.

6. Question – Testing: How do you recommend folks in the room test your browser

A – Mozilla – suggests having the latest stable build, have the next beta – to make sure the next 3 months will work. Make sure you know the OS / browser split of your audience and test that. Chris holds testers in high regard. In mobile devices; thinks it’s very important to test on the device itself. Has a separate laptop for testing. Ftp.mozilla.org – is where you can test for old versions.
A – Google – hopes that there aren’t old versions of Chrome. Would like admins to let them know if there are older versions out there (there shouldn’t be). Suggests checking current version and beta.
A – Opera – there are older users out there. Recommends you should test the current and beta version (Opera Next). They also have Opera Labs, that allow users to test APIs like the camera in your device. Can also test through TVs as well (although some TV OEMs block this). Reinforced Christians view that developers should get 1-2 devices and test directly on them (although there is an emulator that helps).
A – Microsoft – they have builds for all old versions of IE - dev.windows.com. Mentioned Expression Web Super Preview – tool that allows you to test every single version of every browser (including non IE): submits to the cloud and sends back not only the image but also the DOM. Allows you to test graphical issues for all operating systems and browsers.

Last 10 minutes – talking about the future

7. Question – What do you think will be happening in the next 10 years to browsers (in particular TVs)

A – Opera: Excited by ubiquity through platformisation. Excited about giving even more power to the browser; e.g tilt sensor, camera. Have browsers that can interact with the hardware. Being able to run almost native app experiences in the browser itself. Using canvas, user media, geolocation to build Alternative Reality Apps. Opera believe that sticking points of giving access to Camera (e.g security) need to be fixed.
A – Mozilla: Identity is the big thing. Not having to log in using separate accounts. Wants passwords to die – brought up lifehacker password steal. Wants browsers to own the identity, and have different personas for different web uses, and not tracked (or tracked differently) when looking at Cats, or looking at serious work. Then brought up example of Wii, PS3, Kinnect – how these sort of UX changes could be the future.
A – Microsoft: Applications, Games and Marketplaces – will be the new freshness for Consumers. For developers; responsive design will be very important – building from a smartphone to a large television; sees CSS3 introducing a lot more here.

8. Question – About Chrome: Thinks confusion of building Chrome App v. Native App is not good

A – Chrome – You can use Chrome packaging format, but a lot of developers are using metadata – really no more than a redirect to the website and App-Caching – high res icon and description, and that’s all that takes to build a Chrome App. They have more than 140 million users; nearly all of them have used a web App

9. Question – Are you building an App-store?

A – Microsoft: No comment on App stores
A – Mozilla – working on a store, but most important thing is distribution. Mentioned that Chrome should be doing this [Google – A – working on this]

I just got back from the Future of Web Apps in London where I was asked to fill in a talk quickly. The topic I picked was progressive enhancement and HTML5 as a re-boot of web development as we know it. Here are the slides, the audio recording and the links mentioned in the deck for you to check out. I really think that the concept of rendering JS server-side with node and re-using the same widgets client-side is an amazing step forward in not blocking out users whilst maintaining a single code base.

The slides

The Slides are available on Slideshare:

Audio recording

You can find the audio recording on archive.org.

Links mentioned in the talk

• Seven rules of unobtrusive Javascript and Chinese translation
• Easy YouTube and its effects Video 1 and Video 2
• London Tube strike map
• Petition to the government to upgrade from IE6 and respons
• Modernizr to test for browser support of HTML5 and CSS3 features and has.js to test for JavaScript features
• Geomaker and source
• UK House Prices
• Yahoo Firehose research
• Rendering YUI widgets server and client side and video of Dav Glass explaining the details
• YUI supporting capability-based loading and CSS transitions
• Problems of scaling web sites and redesigns
• Douglas Crockford: Loopage

Last Friday I was up in Dublin at the Future of Web apps and gave my talk “Powerful Tools that You Need (and Probably Don’t Know About)”. I took FOWA as an opportunity to (re-)introduce the audience to some of the tools Yahoo offers and to brand the drive of developers to do everything by themselves instead of using already built solutions as ineffective.

The slides of my talk are available on SlideShare:

The audio of the talk is on Archive.org:

• FOWA - Things that you need and might not be aware of

The video of the talk is available on Ustream:

Here are the resources I talked about as links:

• YQL Geo Javascript library – (YQLGeo source on Github)
• Yahoo Placemaker
• Yahoo GeoPlanet
• JSON IP
• IP location tools
• W3C Geo location
• Flickr.places.findByLatLon
• YQL console
• Around you – a Geo hack
• GeoPlanet Explorer
• GooHooBi – (GooHooBi screencast)
• Winterolympics Medals
• Guardian Datablog on Winter Olympics
• CSV to Webservice
• YQL Open Table repository on GitHub
• Yahoo Design Patterns library – (and wireframes for it)
• CSS Grids Builder
• YUI
• Building quick web applications with YUI and YQL - Video

Also check the YDN blog in the next few days for a full FOWA report.

After my talk at FOWA in Cambridge yesterday I showed off that http://icant.co.uk is fully driven by YUI and YQL and maintained elsewhere. I’ve recorded a screencast about this earlier which is also available for download as a M4V but hadn’t released the code yet.

So here goes – this is the PHP source of icant.co.uk (without the HTML which is more or less done with YUI grids builder

// get all the feeds to grab the data

$feeds = array(

‘http://feeds2.feedburner.com/wait-till-i/gwZf’,

‘http://feeds.delicious.com/v2/rss/codepo8/myvideos?count=15’,

‘http://feeds.delicious.com/v2/rss/codepo8/sandbox’,

‘http://feeds.delicious.com/v2/rss/codepo8/icantarticles’,

‘http://www.slideshare.net/rss/user/cheilmann’

);


	
// assemble the YQL statement

$yql = ‘select meta.views,content.thumbnail,content.description,title,’.

‘link,description from rss where url in ‘;

$yql .= “(‘” . join($feeds,”’,’”) . “’)”;

	
// assemble the request url

$root = ‘http://query.yahooapis.com/v1/public/yql?q=’;

$url = $root . urlencode($yql) . ‘&format=json’;

	
// get the feeds and populate the data to echo out in the HTML

$feeds = renderFeeds($url);

$blog = $feeds[‘blog’];

$videos = $feeds[‘videos’];

$articles = $feeds[‘articles’];

$presentations = $feeds[‘slides’];

	
// this function loads all the feeds and turns them into HTML

function renderFeeds($url){

	
// grab the content from YQL via cURL

$c = getStuff($url);

	
// as the content comes back as JSON, turn it into PHP objects

$x = json_decode($c);

	
// reset counter for videos and presentations

$count = 0;

$vidcount = 0;

	
// start new array to return

$out = array();

	
// loop over YQL results, if they exist.

if($x->query->results->item){

foreach($x->query->results->item as $i){

	
// if the link comes from the blog, add to the blog HTML

if(strstr($i->link,’wait-till-i’)){

$out[‘blog’] .= ‘
link . ‘”>’ . $i->title .

‘
’ . html_entity_decode($i->description) .

‘
‘;

$vidcount++;

}

	
// for interviews and articles, add to the articles section

if(strstr($i->title,’Interview’) ||

strstr($i->title,’Article:’)){

$out[‘articles’].= ‘
link . ‘”>’ . $i->title .

‘
YQL doesn’t send a diagnostics part


	
// grab the books from my blog

$yql = ‘select * from html where url=’.

‘”http://wait-till-i.com/books/”’.

’ and xpath=”//div[@class=’entry’]”’;

$books = renderHTML($root.urlencode($yql).’&format=xml&diagnostics=false’);

	
// this is a quick and dirty solution for the HTML output

function renderHTML($url){

// pull the information from YQL

$c = getStuff($url);

// check that something came back

if(strstr($c,’<’)){

// remove all the XML parts

$c = preg_replace(“/.*|.*/”,’‘,$c);

$c = preg_replace(“/
” encoding=”UTF-8”?>/”,’‘,$c);

// remove all comments

$c = preg_replace(“//”,’‘,$c);

}
	
// send it back

return $c;

}

	
// a simple cURL function to get information

function getstuff($url){

$curl_handle = curl_init();

curl_setopt($curl_handle, CURLOPT_URL, $url);

curl_setopt($curl_handle, CURLOPT_CONNECTTIMEOUT, 2);

curl_setopt($curl_handle, CURLOPT_RETURNTRANSFER, 1);

$buffer = curl_exec($curl_handle);

curl_close($curl_handle);

if (empty($buffer)){

return ‘Error retrieving data, please try later.’;

} else {

return $buffer;

}
	
}

Things that made me happy this morning:

First up a definition of design:

Design is 70% dealing with people, 3% the idea, 2% selling the idea, 2% the brief, 2% being pig headed, 1% printing, 3% eye for detail, .6% invoices, 2% coffee, .7% tracking, .1% warm glow, .6% panic, 1% 4am, .6% staring, .2% checking, 1% letting go, .8% keeping hold, .7% estimates, .3% checking, .4% proofs, .1% colour, .9% understanding, .4% marketing, 1% checking, .8% beach ball, .5% mice, .3% keynotes, .4% persuasion, .2% bragging, .5% smiling, 2% knowing when to stop.

• Cheer up the chatbot is an Eliza style experiment to simulate human intelligence. Or is it? Play with it a bit and you find there is a difference. Then click the ????
• Vodaphone have a hero shot on their homepage that shows the same idea as my geek tattoo
• The future of web apps 2009 UK tour schedule is out – I will be speaking about YQL in Cambridge
• My Little Pony gets a hollywood makeover, I find the Princess Leia Pony especially disturbing.
• eCSStender is a scripting solution by Aaron Gustafson that promises to fix CSS support and allow us to extend CSS. I will have a play with that
• People are now using Twitter to share recipes who’d have thought you can do that in 140 characters?
• URIPlay is an interesting idea to make playing, finding and annotating media on the web much easier
• You can now make paper from wombat poo.
• Malwarebytes has some good information how to keep your OS challenged computer clean – think conficker
• I want one of those awesome wine cellars in my floor – and maybe turn it into a missile silo