Blog Posts

A rainy April Saturday in North Greenwich (London) was the host of this year’s State of the Browser; where a representative from four of the five browser vendors spoke about how their browsers have progressed in the last year and what we have to look forward to going forward.

The day was structured as five talks; followed by a choice of 6 breakout sessions before concluding with a vendor Q&A.

Web vs Native: It Ain’t Over ‘Til It’s Over

Michael Mahemoff began the day with a talk about “Web Vs Native”. Native apps have been very successfully, with Instagram just the latest in a long line of examples; and while the mobile web has progressed somewhat native apps are still prevailing as the most popular.

Web vs. Native

Michael has identified four areas of challenge for the web: User Interface, Device Integration, Offline and Background Processing.

While we do seem to be making good progress with User Interface; Device Integration is still lacking with no ability to provide notifications; or hook in to a single sign on. Offline is a problem as browser support varies, while background processing (scheduling tasks to happen when the web app is closed) is non existent.

From Michael’s talk, it seemed to me as perhaps part of the problem is the phone vendors themselves - by allowing these features they would be removing some of the appeal of the App Store. To me, at least 3 of these issues should be fixable by Boot to Gecko.

Michael had solutions to some of the problems himself. Sites like HTML5Please give direction to developers; tools like Modernizr help us provide progressive enhancement and we can work to make our apps easier to use with simplified login and URLs for sharing.

Michael’s slides are available online, and he provides a rather nice summary of his talk on his blog.

No App is an Island

Paul Kinlan from Google spoke second. Paul began by showing how the web is changing at a pace never seen before giving quick live demos of CSS Regions; CSS filters; the shadow DOM and scoped styles before introducing getUserMedia; WebRTC; Dart and Chrome Frame.

But Paul’s main conversation piece was about tunnels and bridges, and how they are built. Tunnels tend to be bespoke and require lots of engineering; while bridges often follow common patterns and are easier to build and maintain.

The bad news is that we’ve all been building tunnels. The good news is Paul has been working on a bridge solution.

In the web world, our tunnels are our server to server communications and our oAuth handshakes. Every time we wish to support another service or social network, we have to write more code and create another handshake as they are all different; which means we only support the most popular services. Paul and his team have been working on Web Intents - “a framework for client side service discovery and inter-application communication”.

Web Intents works in the same way as Android’s share button. The client describes what they are trying to do (e.g. share, edit or save), and the services that can do these actions make themselves known. They can work across all browsers (IE8+) using a shim.

Web Intents

Web Intents were definitely one of the ideas that provided the most excitement at the conference, and one I’m keen to look in to further.

Paul’s slides are available online.

The Web As It Should Be

Next was Martin Beeby from Microsoft. Martin’s talk was hit by several technical difficulties such as the videos not playing and being unable to connect his PC to the conference system; but he still managed to give a successful and interesting talk and massive props to him for not letting technology defeat him.

Martin began with an update which along with announcing he is going to become a father (congratulations), also covered why text shadows never made it in to IE9. Simply, text shadows were performing badly due to the way Internet Explorer renders fonts with the GPU.

After apologising for IE’s past mistakes (e.g. the long wait between IE6 and 7), Martin focussed on IE10; which was important as we need to look forward not back.

Innovate

With Windows 8, web apps can be fully fledged applications, they can work full screen, and they can work offline with the likes of AppCache. The list of additional features in Internet Explorer 10 was rather impressive - CSS3 transitions, CSS3 animations and Web Sockets to name a few; although it seems like WebGL definitely isn’t coming to the browser this version.

There is a IE10 Compatability Inspector which can be used for ensuring your website is ready for IE10.

Martin also spoke about CSS grids which provide an easy way of laying content out on a grid; and provide a solution to the current layout hacks we currently have to implement. Although with the likes of Flexbox, CSS template and CSS columns I’m not sure how much use there is for yet another layout type.

Martin’s slides are available online.

Broken HTML5 Promises - Are We ‘Appy?

Starting with a semi-colon (just to be safe), Chris Heilmann spoke about “HTML5 promises” - the promises that had been made, and whether they had been kept.

During the last few years, the HTML5 hype machine went in to overdrive and everyone spoke about how amazing HTML5 was and how it was going to kill Flash - yet mobile web programming is a mess. What’s more, everybody has a different definition about what HTML5 is, as shown in this diagram below (source).

SpecGraph

When Chris went to a mobile conference in Barcelona he got to speak with a different audience than normal; an audience that asked different questions like ‘is HTML5 ready yet?’, ‘is it as performant as native?’ and ‘can they protect their code?‘. For all the use cases these users want, HTML5 isn’t ready yet - there are still issues with the solutions proposed, such as offline.

Developers are too busy worrying about semicolons, preprocessors and speed to notice that native apps are providing superior experiences to the mobile web experiences we are producing.

Mozilla are working to fix this with education projects (for young people and above), the MDN, Boot to Gecko; the open web marketplace and of course Firefox and it’s new Developer Tools.

Chris’ slides are available online.

Battle of the Browsers

After lunch, Seb Lee-DeLisle ran a live coding session where he created a demo generating thousands of pixels before running the demo on each of the browsers. It’s clear that Seb knows what he is doing when it comes to coding canvas demos, for a live demo his code was almost without error working first time the majority of the time. The results were a little surprising with most of the audience expecting Chrome to out-perform its competitors. In reality, Firefox was crowned the winner with Safari and Opera taking 2nd and 3rd places respectively.

Battle of the Browsers

Breakouts and Q&A

What followed were a choice of 6 breakout sessions, where we were able to choose 2. I chose to go to Chris Heilmann’s session which included lots of live demos, and Seb Lee-DeLisle’s session on creating particle effects.

As the day came to a close, we concluded with a Q&A session. There were some interesting questions, but no real revelations. It was great to see the representatives playing nice with one another - after all, they all have the same aim - to make the web a better place for us all.

All in all, State of the Browser was a successful conference, amazing value at £10 and worthy of waking up early on a Saturday for!

The Start of Something New

Friday, January 12 2018

After almost 11 years, I am moving on from AKQA to pastures new.

Read more

The Quest for the Perfect Workflow

Friday, May 16 2014

Today I spoke at jQuery UK on my Quest to find the Perfect Workflow. This post provides detailed information; slides and the links to the material mentioned in my talk. Now updated with screencast!

Read more

Creating a List of Posts in Assemble

Thursday, February 27 2014

In the previous post, I showed how to get started with Assemble. Now we have content, let's look at how we can create a list of posts.

Read more

Getting Started With Assemble

Wednesday, February 26 2014

Want to create a static site blog with Assemble? You've come to the right place. This in-depth tutorial will get you started with creating a blog in Assemble!

Read more

Shrinkwrap Your Dependencies

Wednesday, February 5 2014

Front end development has evolved over the last couple of years thanks to `npm` popularised by task runners such as Grunt and Gulp. Thanks to our package.json files, it's easy for another developer to get set up on our project in seconds by typing `npm install`. But what happens when some time has passed and your project dependencies have moved on? A new version of a package may introduce a new bug, or completely change its functionality altogether.

Read more

Beginning Web Development

Tuesday, January 7 2014

There are so many things to learn in web development now that it can feel incredibly overwhelming - but it can also be very rewarding. What fascinated me about web development was the ability to create - I love to create - and when I started out building web pages I found it incredibly easy to express my creativity with HTML and CSS in just a few lines of code. Here's some tips for if you're just starting out!

Read more

jQuery On and Off Namespacing

Tuesday, February 5 2013

Being able to apply and remove events with `on()` and `off()` is great, but sometimes there is a requirement to either trigger or remove a subset of events that have been added to an element. Here's how!

Read more

Sublime Text 2 Cheatsheets

Monday, December 24 2012

As my Christmas present to you, here are 2 cheatsheets (one for Mac, one for Windows) so you can learn and reference those shortcuts to improve yourself and your developer skills.

Read more

Canvas Animated Particles 3D Effect in 5 Minutes

Sunday, December 23 2012

A couple of months ago, I gave a PechaKucha talk about creating a 3D animated particles effect with the canvas element.

Read more

Extending getUserMedia With Canvas

Sunday, July 1 2012

Following on from my previous post which introduced us to getUserMedia, I wanted to share two ways you can extend getUserMedia's video capture using my good friend, the canvas element.

Read more

Introduction to getUserMedia

Saturday, June 30 2012

For a long time in the 'Flash vs HTML5' comparison arguments, one advantage Flash had was the ability to capture audio and video from the users computer. With upcoming browser releases, it is now possible to do this with JavaScript and the HTML5 video element, and its very simple to do.

Read more

CSS3 Flexbox Carousel

Friday, May 25 2012

Carousels are one of the most common components web developer's build. As other trends come and go, carousels tend to stay.

Read more

State of the Browser 2012

Monday, April 30 2012

A rainy April Saturday in North Greenwich (London) was the host of this year's State of the Browser; where a representative from four of the five browser vendors spoke about how their browsers have progressed in the last year and what we have to look forward to going forward.

Read more

Scaring Off Beginners

Friday, April 20 2012

There has already been far too much conversation about whether semicolons are appropriate to use at the end of lines in JavaScript. Serious problems could have been solved in the time JavaScript experts have spent arguing about this. And if the experts can't make a decision on something as simple as semicolons, what chance do beginners have of understanding JavaScript at all?

Read more

Complying With The EU Cookie Law

Thursday, April 19 2012

The cookie law is a new EU privacy legislation that requires websites to provide clear and comprehensive information about the cookies being stored; and obtain consent from visitors in order to store or retrieve any information about the user.

Read more

Thoughts on Implementing Responsive Design

Monday, March 19 2012

Responsive design is the latest buzzword in a long series of web buzzwords which has featured 'XML', 'Web 2.0' and 'HTML5' to name a few; but it's one that shouldn't be dismissed.

Read more

CSS Regions

Tuesday, March 13 2012

Currently if you have a page where content is separated by a drastic change in layout you will need to include part of your content inside one element, and the other part inside another element. If you're using a CMS, this means you need to have two content fields for what is essentially related content. CSS Columns already offers functionality to separate content in to columns but CSS Regions provide greater control and flexibility of content on your page by allowing content to flow through the page structure, whatever that structure is.

Read more

My JS1k 2012 Entry

Monday, February 27 2012

This year I decided to enter the JS1k competition for the first time. The idea behind JS1k is to produce a cool JavaScript application in under 1kb (1024bytes) of code. I had not done any JavaScript golfing before, so I thought it would be a nice little challenge for myself. I didn't realise at the time quite how addictive or time-consuming JavaScript golfing was going to be!

Read more

CSS3 Backgrounds of the Future

Monday, February 13 2012

Whilst we've been busy supporting older versions of Internet Explorer, a few new CSS features for backgrounds have sprung out of the woodwork and in to our browsers.

Read more

jQuery UK 2012 Conference

Saturday, February 11 2012

Yesterday I travelled to Oxford to attend the jQuery UK conference, which the team at White October carefully crafted together. The snow threatened to stop me, but thankfully calmed down by the morning. So a quick hop, skip and jump on to a train and coach; and I found myself in Oxford at the Saïd Business School.

Read more

Modernizr Prefixed

Saturday, February 11 2012

There was a new release of [Modernizr yesterday (2.5.1), and included within this release was some brand new features to the Modernizr Prefixed() API (introduced in 2.0), which can take away some of the pain of vendor prefixes from your JavaScript.

Read more

Keeping It Real Simple

Monday, February 6 2012

Last week I had the opportunity to go on a presentation skills course, and one of the tasks we were set was to explain one aspect of our job role to a group of people who had no experience in our field using the LIONS approach using zero jargon.

Read more

Impress at Presentations with Impress.js

Tuesday, January 31 2012

The other day I mentioned on Twitter that I was playing around with Bartek Szopka's Impress.js library to write a presentation and it seemed to gather some interest. I then gave the presentation, and that gathered some more interest; so I thought I would write a short blog post about how to use Impress.js.

Read more

Writing for the Web

Wednesday, November 30 2011

Today is Blue Beanie Day, an anniversary where developers change their avatars to wear blue beanies to show their support for web standards. Today is also the day a new web initiative has been launched called Move the Web Forward, with a simple goal of making it easy for developers to start contributing to the web platform.

Read more

Using jQuery .on() and .off()

Thursday, November 10 2011

With the release of jQuery 1.7 on November 3rd came two new ways to attach event handlers - .on() and .off(). These two additions unify all types of (good) event handling in jQuery and will help you write tidier and more efficient code in the future.

Read more

Front End Code Etiquette

Wednesday, November 2 2011

One of the most interesting parts of working as a web developer comes from making a decision on how to organise code depending on a particular project or problem. There are multiple ways to do the same thing, and there's not necessarily a wrong or a right answer for every situation.

Read more

Self Executing Anonymous Revealing Module Pattern

Thursday, October 27 2011

I thought as a way to kick this blog off I would share this JavaScript pattern with you which I've started using recently. I can't take any credit for this pattern - I discovered it on my Internet travels, so all thanks and kudos go to Elijah Manor on 'Enterprise jQuery'.

Read more

Welcome

Friday, October 21 2011

If you're reading this, you've reached the first post of my blog. Depending on whether I've written a few or many blog posts at this point, this may be an achievement that you've reached this post, or it may have been a simple slide of the finger.

Read more