Fronteers Conference 2014

October 15, 2014

On 9 and 10 october was the big event. Two days of inspiring talks and where you meet old friends and make new ones. This article gives a summary of most of the talks. The master of ceremony for this conference was Jake Archibald.

Day 1

The first day Heydon Pickering talked about best practises on developing with html and CSS. It is all about semantics, it is more readable, understandable and maintainable. For example use [role="tab"][aria-selected="true"] instead of .tab-active. He mentioned that the difference in performance is extremely minimal whether using attributes or class names.

Daniel Espeset gave a peak in how they set up their infrastructure for front end development at Etsy.

Arnout Kazemier's talk was about pushing the realtime web forward. He discussed the pro's and cons of the latest technology to use for realtime web. For example, Websockets, it is supported in IE10 Firefox 31, Chrome 37 safari 7.1, iOS Safari 8 and Android 4.4 and has a simple and understandable API. But at this time of writing it has also some serious bugs:

At this stage the newest technology is not really useful in production environment. It is something to keep an eye on, one day we can use the realtime web.

Rachel Nabors gave a visually beautiful styled presentation about the state of web animation. Animation improves adoption rate of new interfaces, change can be more easily comprehended when it’s gradual, especially for the young and elderly. You have 3 kinds of animations:

Interesting animation libraries to check out: Greensock animation platform and Velocityjs

Rachel Nabors - The State of Web Animation

The mini sessions gave us a glance in game development for the web. There are hundreds of frameworks available, Thomas Palef recommended Phaser, a free open source HTML5 framework. If you want to get started with game development he advices to start making a really tiny game like ping, space invader or breakout. Once you have the hang of it, start creating another one with a little more complexity, and so on. Until you ar ready to create a real game you might think people want to play.

Day 2

Day two started with Nicholas Gallagher talking about making the Twitter UI infrastructure. The ui is split up in ui-components like: ui-icon, ui-ProductPage etc. Each component has its own file infrastructure and contains only the code necessary for the component, including tests. For the worksflow they created automatic tasks to test and run the new change: make install, build, test etc. They design for adaptability and define components as the unit of scale.

Dave Olsen shared his experience with optimizing web performance. (Check out slidesearch for the slides). Do you know that 1.8mb is the average weight of a web page today? 78% are images and javascript. RDW sites whose small screen design weighs the same as the large screen design? And 71% of the users expect your mobile site to load as quickly as your desktop site.

Mobile first means performance first - Dave Olsen

You can diagnose web performance issues with pagespeed insights of Google, Chrome dev tools and To optimize for mobile you can reduce asset size, reduce requests and speed up page-render. Try to see if you're caching. Web performance for javascript:

Sara Soueidan gave us a rollercoaster ride through animating SVGs with CSS and HTML. It was a great talk with lot of examples. Things to know about using svg:

Hell, is not understanding my own code - Kyle Simpson

Everyone at the conference has written code that worked without knowing why. First learn the language in depth and you also need better tools. Kyle Simpson gave us a list of handy tools to make your live as JS developer easier. He is working on a configurable two way formatting tool to end the discussion of whether or not using semi colons, whitespace vs tabs. Pick the tools that suits you, but be aware there is no such thing as a holy grail for the right toolset. The tools he recommended are:

Petro Salema closed the conference with an inspiring talk, named "Dream big, think small".