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.
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.
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.
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?
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.
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?
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.
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?
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.
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.
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.
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.
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.
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.