Fronteers — vakvereniging voor front-end developers

Fronteers 2013 sessions

Fronteers 2013 featured 16 sessions on many different subjects within the field of front-end development. HTML, CSS and JS were all covered in some way, with subjects like Web Components, The State of JS and CSS for big websites. There were both theoretical explorations and more practical sessions, including a session dedicated to three case studies.

A developer's guide to rendering performance by Paul Lewis

When we look back over the history of web performance we see a heavy focus on reducing the number of requests and getting files to the browser quickly. Our platform has changed a lot, and while optimizing for network performance remains a crucial part of our jobs, we now have to broaden our performance horizons. Our users also expect smooth scrolling, animations and interactions, even on mobile devices. In short we need to deal with not just how quickly our sites and apps load, but also how quickly they run.

In this session we are going to take a lightning tour of how Chrome converts the DOM into pixels, see how our code affects its workload, and arrive at a modern workflow for finding (and eliminating) rendering bottlenecks.

Faster JavaScript web apps by Alex MacCaw

This talk will demystify some of the FUD surrounding speed and single page JavaScript web applications. We'll focus on faster load times, removing bottlenecks around the server, network and rendering on the client.

How to rewrite your JS app (at least) 10 times by Garann Means

It would be nice if developers could download a JavaScript framework, plug in the custom logic required for their particular problem, and have a functional, scalable, and reliable application. As any who's tried can probably tell you, however, it doesn't work like that. It doesn't matter if your application has 5000 "pages" or less than 50 - it will eventually become a large application in terms of code, because size of code is not just a measure of the complexity of the app itself, but of its maturity. If you've tried taking an app from a minimal set of functionality to something complex enough to cover all the edge cases, you've probably done some rewriting.
If you haven't, it's your lucky day! We'll talk about several of the ways you can almost guarantee a rewrite in your app's future. If, on the other hand, rewrites don't sound like that much fun to you, we'll also talk about how to avoid them or at least minimise the risk they present.

HTML.future - what the web needs next by Bruce Lawson

The Web is everywhere. But will it continue to be so? With the proliferation of locked-down platforms that offer no browser choice, and silo appstores that allow tight integration with the device, what does the web need to continue to be the platform of choice?

On designing typefaces by Luc(as) de Groot

Designing typefaces isn't easy. They generally consist of thousands of glyphs, all of which need to be designed, given kerning and hinting instructions and of course tested. It can, therefore, take years to complete a typeface. Luc(as) will go over what it takes to produce webfonts as well as discuss licensing issues from a type designer's perspective.

On power & responsibility by Robert Jan Verkade

When Fronteers was founded in 2007, front end as a profession was still in its infancy. These days, we can safely say it is a grown-up profession. Although we can always do better!

Professionalism is more than knowing the latest HTML5 elements by heart — you are a vital link in the design process. And with this great power comes great responsibility.

More and more, front-enders are expected to work well with others: managers, marketeers, designers and/or backenders (plus of course other front end-professionals). Your work is going to change, whether you want it to or not. Are you ready?

Practical session

Rijksmuseum by Elaine Oliver

Its works of art are arguably the most valuable objects an art museum owns. The Rijksmuseum is one of the most important museums of the world. Their new website adheres to this: it displays 125.000 art works in high resolution, features innovative filtering and discloses its data in a very 'webby' way. Elaine Oliver from Q42 will dive into Rijksmuseum's CSS.

GOV.UK by Edd Sowden

GOV.UK fundamentally changed the way British government websites are built. Its focus on progressive enhancement, no-nonsense yet stylish interface design and, as it seems, very solid build quality were unheard of. Edd Sowden from the Government Digital Service will get into how they implemented a fully responsive site while still catering for legacy browsers.

9292.nl by Anton Vanhoucke

Public transport information used to be hard to find without the internet. The first online public transport timetables, did not make things much easier. Last year, 9292, a consortium of Dutch public transport providers, launched their new website. It is super accessible, and has an effective design and a clear focus. Anton Vanhoucke of Fabrique will go into detail of the project.

Pre-browsing by Steve Souders

Wouldn't it be great if your browser anticipated what you wanted before you asked for it? Web pages could arrive before you finished typing the URL. Science fiction? Not at all. This talk uncovers several techniques available to browsers and web developers today to move us closer to an instantaneous web experience. Preresolve, prefetch, prerender, preload, and other predictors: What do they all mean? Which browsers support them? How do web developers take advantage of them, and make sure not to break them?

Putting Flexbox into practice by Zoe Mickley Gillenwater

The Flexible Box Layout module, called “flexbox” for short, is the most fully developed and well supported of CSS3’s wide array of new techniques for creating page layouts. Web developers are itching to use it, and with good reason—flexbox allows you to create fluid, responsive layouts without having to worry about crazy percentage grid widths, negative margins, float drop, and all those pesky CSS layout quirks we’ve dealt with for over a decade.

It all sounds great, but how do you actually put it to use in the real world—today? In this session, you’ll learn when to use flexbox, what the browser-specific variants are, and how to use it to build responsive multi-column page layouts without the headache. Plus, for those of us who just want to dip a toe in for now, we’ll look at some practical ideas for how to use flexbox as progressive enhancement, adding it in bits and pieces on individual page components with graceful fallbacks.

Rationalising designs for better quality code by Harry Roberts

It’s hard to deny that websites need to be well designed; a pleasing UI, a seamless and pleasant UX, and a great personality really encourage users to interact and enjoy using your site, product or service. However, the design is only one part of a finished product; your product is built on code, and oftentimes it is necessary to sacrifice certain aspects of a design in order to keep the codebase itself leaner, faster, and more enjoyable to work with. In this talk Harry aims to share some of his die-hard pragmatic approaches that he employs in order to push back on designs to produce far better quality code.

Real-time recompilation of running JavaScript by Peter van der Zee

In this talk Peter will demonstrate step by step how to transform a simple piece of JavaScript to a state where you can change the code while running it. This is particularly handy for visual applications, or applications with continuous data stream processor like a chatbot. This principle is then generalized in a library. He'll explain the basics, how it works, fixes for certain edge cases, and some open issues.

Responsive images: ain't we there yet? by Marcos Caceres

The debate around responsive images has been raging for about two years with seemingly limited traction from browser makers. Like anything Web, turns out that this problem is not as simple to solve as it first appears. To understand the complexities, we need to pop the hood of a browser and see how resources are requested without waiting for layout. Once we understand how a browser's handle image loading, we can then start discussing possible solutions — of which there are many right now on the table. It may turn out that we have most of the bits we need to do responsive images, but a standardised (in-browser) solution may still be needed.

Responsive typography by Oliver Reichenstein

With the chaos of different screen sizes and a new generation of web browsers, the design paradigms of layout and typography have shifted away from static layouts and system fonts to dynamic layouts and custom web fonts. But screens have not just changed in size but also in pixel density. In other words: maybe we do not just need responsive layouts, we might also need responsive typefaces. iA started experimenting with reponsive typefaces in 2012. A short rundown of what we have learned since then.

Return of Inspector Web: Web Components a Year Later by Angelina Fabbro

A little over a year ago at JSConf EU, Angelina tried to inspire developers to take an interest in Web Components, which includes Shadow Dom, HTML Templates, HTML Imports, and Custom Elements. In this talk we'll take a look at how far we've come in a year: what has been implemented, what hasn't, the current state of the relevant specifications, and discuss various frameworks and libraries that have emerged either with patterns similar to web components or embracing the technology completely. We will take a look at these changes, and also dive into some code for a comprehensive overview of 'the state of things' - spoiler: it's still always changing.

The importance of Firefox OS by Sergi Mansilla

Sergi Mansilla will talk about why Firefox OS is more necessary than you think, the technology behind it and about how it will give freedom to users and make developers’ lives much easier. He will also walk through the basics of making Firefox OS apps (hint: you’ve already made some!) and he may or may not give some phones to developers who propose cool projects to build on top of Firefox OS.

The state of JavaScript by Domenic Denicola

Our favorite language is now powering everything from event-driven servers to robots to Git clients to 3D games. The JavaScript package ecosystem has quickly outpaced past that of most other languages, allowing our vibrant community to showcase their talent. The front-end framework war has been taken to the next level, with heavy-hitters like Ember and Angular ushering in the new generation of long-lived, component-based web apps. The extensible web movement, spearheaded by the newly-reformed W3C Technical Architecture Group, has promised to place JavaScript squarely at the foundation of the web platform. Now, the language improvements of ES6 are slowly but surely making their way into the mainstream— witness the recent interest in using generators for async programming. And all the while, whispers of ES7 features are starting to circulate…

JavaScript has grown up. Now it's time to see how far it can go.