Posts Tagged ‘fowa’

FOWA London – Get excited and build things (and a browser panel)

Wednesday, October 5th, 2011

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]

Practical Progressive Enhancement – my talk at the Future of Web Apps London 2010

Tuesday, October 5th, 2010

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

FOWA Dublin – Powerful Tools that You Need (and Probably Don’t Know About)

Sunday, May 16th, 2010

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:

The video of the talk is available on Ustream:

Here are the resources I talked about as links:

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

How I built icant.co.uk – source code

Wednesday, June 3rd, 2009

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'] .= '<li><h3><a href="' . $i->link . '">' . $i->title .
'</a></h3></li>';
}

// if the description contains an embed code, add to videos
// (I use delicious for video bookmarks and add the embed code
// as a description, check here:
//         http://feeds.delicious.com/v2/rss/codepo8/myvideos)
if(strstr($i->description,'<embed') && $vidcount < 4){
$out['videos'] .= '<li><h3><a href="' . $i->link . '">' . $i->title .
'</a></h3><p>' . html_entity_decode($i->description) .
'</p></li>';
$vidcount++;
}
// for interviews and articles, add to the articles section
if(strstr($i->title,'Interview') ||
strstr($i->title,'Article:')){
$out['articles'].= '<li><h4><a href="' .$i->link . '">' .$i->title .
'</a></h4><p>'.html_entity_decode($i->description).
'</p></li>';
}

// for slideshare, add to slides element.
if(strstr($i->link,'slideshare') && $count < 4){
$out['slides'] .= '<li><h3><a href="' . $i->link . '">' . $i->title .
'</a></h3><p><a href="' . $i->link .
'"><img src="' . $i->content->thumbnail->url .
'"></a>' . $i->content->description->content .
'</p></li>';
$count++;
}
}
}
// return back the array :)
return $out;
}

// Grab the conference agenda from my blog
$yql = 'select * from html where url='.
'"http://wait-till-i.com/talks-and-conference-participation/"'.
' and xpath="//ul" limit 1';
$travels = renderHTML($root.urlencode($yql).'&format=xml&diagnostics=false');
// btw, diagnostics=false means 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("/.*<results>|</results>.*/",'',$c);
$c = preg_replace("/<?xml version="1.0"".
" 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;
}
}

TTMMHTM: Design definition, my little pony, uriplay and a hidden wine cellar full of win

Tuesday, March 31st, 2009

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.