Award Confetti logo-bs logo-dxn logo-odl Magento Piggy Bank 09AEAE68-D07E-4D40-8D42-8F832C1A04EC 79C8C7E9-0D9D-48AB-B03B-2589EFEE9380 1A734D92-E752-46DD-AA03-14CE6F5DAD57 E622E2D4-3B9C-4211-8FC3-A1CE90B7DFB2 Group 19

Report: UpFront Conference 2015

Chris Bailey

Two of the day’s speakers explored the theme of using play to challenge the way we interact with technology. Soledad Penadés and Ben Foxall both bravely used live demos of their web tech’ toys and experiments to inspire the audience.

Soledad’s talk The Disconnected Ensemble: Scattered Clouds, Underground discussed how she was exploring the concept of a P2P web and how this could be applied to mobile platforms like Firefox OS. She talked about her love of technology and music and how she has combined the two to create ‘musical toys’. These toys use the Web Audio API and Web Components to play audio and then share them over a local network. Soledad’s demo used two smartphones that she ‘touched’ to join so the two devices could jam together in a virtual band. This demonstrated how apps can run their own web servers and share addresses using NFC (near field communication) which is present in an increasing number of devices.

She’s went on to explain that we don’t always need the App Store or Play Store to create interactions between devices or to play games and have fun. Soledad is currently working at Mozilla and their ethos — ‘putting individuals in control online’ — certainly came across in her talk.

Secondly, Ben demonstrated the tech’ he is currently ‘playing with’ in his talk The Internet of Browsers. The talk comprised of several demos which asked for audience participation. In these interactions he gathered browser metadata from the participants devices via common Web API’s such as geolocation, orientation, proximity, ambient light, touch and sound.

In the first demo he used geolocation to build a visual representation of the connected devices on the screen behind him. In this relatively simple demo he showed how existing web tech’ could be used in a different way and encouraged us all to be creative with ‘the internet of things’. He went on to show several more demos manipulating the gathered metadata. In the final demo, which was my favourite, he used the audio of a raven’s call with a time delay to simulate a flock of birds swooping around the room. The demo was not only impressive but also powerful in the possibilities of its application. I could imagine this being used at concerts for example to create musical and visual effects to compliment the overall performance.

Both talks explored the theme of existing web technology and hinted that we currently don’t use it to their full potential. Next they suggested ways to use existing web APIs and demonstrated some of the possibilities through play. The experiments were all engaging, inspiring and fun and were designed to make us think and questioning how we use the current tech’ we already have today. The talks didn’t suggest any practical application however their purpose was to explore and inspire and not find solutions at this point.

Oliver Chenery

An overall theme of the day was web performance. With an increasing percentage (40%) of the population accessing the Internet exclusively via their smartphone, how sites perform under these conditions is having a larger effect for online business, from transactions to user satisfaction. Therefore the need for site optimisation is growing.

Dean Hume tackled the subject directly with his talk Faster mobile websites. He started by explaining the effects of slow website and the request time being used before anything is rendered on the page, It was interesting to hear how poor performance could affect your brand, creating user frustration and SEO, ultimately leading to users leaving you for competitors, losing you money.

He gave a great example of this: a 100ms delay may only cost you a tiny percentage of profits, but that percentage applied to a billion pound turnover is a lot of money to miss out on.

Having made the case for optimisation, he began to give some nice examples of solutions. The one I found most interesting was critical CSS. where elements at the top of the page have their styles inlined in the <head>, thereby avoiding the time taken to request the CSS file. This may not speed up the overall load, but allows something to render as soon as possible therefore giving the impression that the site is loading faster which will please the user.

The last talk of the day was by Yesenia Perez-Cruz with her talk Design decisions through the lens of performance. This explored the battle of client expectations and goals vs site performance. The key to her approach was getting the client on board at the very start of a project and educating them on the impact performance has on brand, users, sales and (indirectly) competitors.

However clients pay for ‘beautiful’ web design and will probably want a carousel stuffed with images, so how do you do this without page load times skyrocketing?.

Yesenia suggested that if the client was on board, she would create a load time budget working with a developer to set a realistic limit. Design decisions can then be made based on this budget. Now when the client requests another carousel, you could say “well that will take up X amount of your budget”. This should not become a weapon to use against your client to avoid work, it’s your job to explore alternatives and suggest compromises.

Dean and Yesenia’s talks explained some good performance techniques and a nice approach to getting the client involved to make better design decisions. It starts in the design stages of your project not the end.

Shane Osbourne

Presented by Alicia Sedlock, the second talk of the day covered a topic close to my own heart: testing for front-end developers.

Although often viewed as an engineering task more suited to developers handling server-side code; unit and integration testing, Alicia argued, can also be extremely useful for front-end developers too.

Given that the audience consisted of front-end developers *and* designers, the recurring theme throughout the talk — “it’s not as scary as it sounds” — seemed a wise approach to a topic that many will have actually heard of, but have little or no experience with.

The ability to automatically verify that your code does what you expect it to, without having to manually perform the actions yourself, is the primary purpose of writing Unit and Integration tests. It can be anything from isolated function-level testing that ensures given some inputs, the expected output is returned, all the way up to automated browser interactions that test how your project loads, how it reacts to form entry, what happens when you click a button etc.

In addition to covering those code-related testing techniques (unit and integration), Alicia also detailed a fairly new addition to the world of testing that is perhaps more suited to a typical front-end developer: CSS regression testing.

CSS regression testing differs from the unit/integration testing model by instead making assertions based on how the page actually renders using automated screenshots. Allowing us to ‘diff’ either an entire page layout or individual components, this technique helps to ensure that changes to one element do not adversely affect another.

Alicia advised on all these testing topics by first giving an overview of each, showing relevant, although abstract, code examples and then summarising each section by listing the most popular tools and projects for each. Refraining from advocating any one particular approach or tool over another, was an appropriate way to address the vast landscape of terminology, tools and personal tastes present in such a fast-moving and always evolving eco-system.

Whilst convincing to some, Alicia’s overview and advocation of testing could’ve had a larger impact, I believe, had some of her code examples and snippets been replaced with a deeper explanation of exactly *why* the result of writing tests is the production of more correct, stable and predictable code.

An example showing how the presence of unit or integration tests in a project actually helped catch a bug *before* it went live, or, how adding tests to an existing project following a bug report stopped that bug from re-occurring in the future, would’ve helped the sceptics and inexperienced understand the benefits more concretely.

Showing actual tests in code, to a mostly lay audience, was the only area in which I think the otherwise flawless talk could’ve been improved.

Conclusion

Overall the day was a success and we’re looking forward to seeing who’s speaking at next years event.

The three main themes of the day were, performance, testing and being creative through play. Some of the speakers suggested practical solutions to the subjects discussed and others gave thought provoking examples of the work they are currently playing and experimenting with.

Here at JH we pride ourselves on having our finger on the pulse, a lot of what was being said we’d either read, heard or have already implemented. We all agreed it was a good day however we’d like to hear more future predictions, cutting edge ideas and emerging themes as we’re all hungry to explore what’s happening next on the web.