COLDFRONT 2015
This year’s ColdFront conference invited a star line up of high-profile front-enders from the international front-end community. Speakers included the editor and founder of Smashing Magazine, an expert from CSS Working Group and one of the developers from the Sparta project, better known today as Microsoft Edge. On the agenda were issues ranging from HTML5 and CSS3/4 to internet speeds and the ethical dimensions of internet use.
This year, ColdFront was held at the Grand Theater on an intimate side street close to the main pedestrian area in Copenhagen. ‘All Inclusive’ was printed on the tickets, which meant that tanking up on coffee and croissants was the first order of business for the day. However, neither the venue nor the catering were the real draw for the 300 participants – but rather the extraordinary list of speakers. All are major presences on social media, with a total of over a million followers on Twitter, and all were hand-picked to share their insight at ColdFront. In short: expectations were high.
By 9 am, everyone was seated in the main auditorium of the Grand Theater. Kenneth Auchenberg and Daniel Frost, the founders of ColdFront, welcomed participants, and Kenneth explained that ColdFront was established to held expand the existing front-end community in Denmark, while at the same time inspiring participants through exclusive presentations by hand-picked speakers – which meant that there was no WIFI in the auditorium.
”Lean back, relax, and enjoy good content!”
Each talk lasted 45 minutes, which turned out to be the perfect length. There was enough time to explore each topic thoroughly, and you really felt inspired to go home and continue exploring on your own. There was a lot of variation in how concrete the individual speakers were, which helped keep the participants’ attention despite of the soft lighting and the cushy theater seats.
The participants were presented with a broad spectrum of new knowledge. For example, we were given a taste of CSS4, and Vitaly Friedman gave us an ‘aha’ experience in relation to alternative ways of presenting and filling out web forms: it doesn’t have to be boring.
The conference didn’t just satisfy our mental hunger. The food and refreshments were also out of the ordinary. ColdFront teamed up with Copenhagen Street Food, who served everything from gourmet sandwiches to organic hot dogs.
The unifying theme
Despite the wide variety of topics the speakers took up, you left the auditorium at the end of the day with an impression that the conference had a clear unifying theme. It gave us a lot of food for thought and exciting alternative ways of doing things that participants can draw on in their upcoming projects.
In keeping with the spirit of the conference, a number of speakers referred to online communities and encouraged the participants to get involved in them. Lea Verou of CSS Working Group presented a simple way of creating a pie chart written with a line of CSS. But the problem is that no browsers can or will support the code because of a lack of demand from the individual communities.
Lea wasn’t the only speaker to point out how we can use communities to get help. We saw several examples of what happens when, for example, someone invents a hack that provides a simple work-around solution, posts it on a forum and then gets feedback from community ‘colleagues’ who start playing with the code themselves.
All in all, ColdFront 2015 was a great success. As an app developer named Morten said during the lunch break:
“It’s hard to find a conference or workshop that’s exciting, but ColdFront is.”
If you didn’t have the good luck to attend the conference, you can read more about the individual talks here:
Vitali Friedman
– Responsive web design
Some view the design process as an extremely messy business involving a lot of going around in circles. But as Vitaly Friedman explains, the process can also be visualized as a tree. Some branches have dead ends – experiments which don’t work out. Other branches cross – two solutions which support one another to create an effect.
Design patterns for responsive UI design can teach us what solutions work, and what solutions are dead ends, which allows us to achieve a good design more quickly. And Vitaly shared a steady stream of design patterns: from web form designs that are a pleasure to fill out, to elements that cause problems on mobile platforms, such as images that are opened in a dialogue where they are shown at a smaller scale than on the website. From very general challenges to solutions to completely unique problems.
Vitali encouraged the conference participants to study standard responsive solutions instead of trying to reinvent the wheel.
Alex Feyerke
– Offline first
It’s fashionable to produce utopian visions of the future in advertisements, where everyone is into extreme sports, and no one has problems with network connectivity. But reality is another matter entirely. And older advertisements didn’t shy away from presenting how easily errors can be dealt with, and how new technologies are used by ordinary people. People don’t want perfection. They want flexibility.
Our target audience isn’t developers. We need to build for real people with bad internet connections. ‘Offline’ is not an error – it’s reality when your user finds himself in an elevator, on the light rail, etc. And users expect the content they were just looking at to still be accessible when they return to a page or an app. They expect their own data to always be accessible, not for their data to be stuck in the cloud.
Alex Feyerke demonstrated how hood.ie could be used to solve this problem – a JavaScript API that reads/saves data locally and synchronizes with the internet when it becomes available. In other words, it’s ‘offline first’.
But to create confidence in data, the UI also has to show very clearly whether the user is accessing synchronized data or data that needs to be synchronized.
Feross Aboukhadijeh
– Web apps of the future
In the battle between native apps and web apps, what would it take for web to win?
The strength of web apps is that they don’t require installation, and that users can link to content without limitations. But at the same time, it’s possible to make apps that can be saved locally in the browser so that they’re available offline as apps.
Feross Aboukhadijeh is a strong advocate of thinking in terms of local, peer-to-peer solutions without a central server, go-between or intermediary – and this is possible today. He demonstrated an example of this kind of web app. Users are free to select an older version or an older design, and no one is forced to update to a newer version, as well as peer-to-peer offline authentication with Keyboot.
Patrick Hamann
– Embracing the network
We have no control over what’s accessible on the net right now, and we should learn to embrace that reality. It’s not just a question of whether or not there’s internet accessibility, but some services may be down, and we should know whether or not our websites can survive that.
For example, the double-click ad network was down one day, and a lot of news sites simply displayed an empty screen while the browser waited for JavaScript, which never arrived. But that can be avoided. The Financial Times website didn’t crash that day, and there are tools like ttp://requestmap.webperf.tools that can be used to identify dependencies, as well as tools to simulate high latency, slow connections and entire domains/services that do not respond.
Netflix is an example of extreme professionalism in relation to handling network errors elegantly: they have a ‘chaos monkey’ that pulls production systems down at random, and all programs are expected to be able to handle the situation so well that users never realize it’s happening.
Patrick Hamann also reviewed a number of new technologies that can help safeguard us against errors and improve both online speed and user experience, such as a ‘service worker’ that manages caches, ignores domains that aren’t responding temporarily and provides quick fall-back strategies instead of waiting for browser time-outs.
David Rousset
– Microsoft Edge
In each new version, the old Internet Explorer (IE) offered the option of emulating earlier versions. However, a consequence of this was that by IE11, it included eight different internal browsers, all of which needed to be maintained and which were a burden to keep developing as a consequence.
So Microsoft Edge started from scratch. It no longer contains compatibility modes – just the newest HTML and CSS standards, which means that keeping up with and implementing new features in Edge is much easier for Microsoft.
However, a lot of website still use the browser’s ‘UserAgent’ name to determine what content they’re sending, and these have not been updated to the new IE versions which can display standard HTML. So now Microsoft handles their UserAgent in the same way as Chrome and Safari: Edge identifies itself to all of the other (earlier browsers), and as a result, the old websites now show the same gorgeous responsive content to Edge as the website gives to Safari.
And because some Mac developers forget standard CSS variants, Edge now identifies some ‘webkit’ prefixes as its own. Though not all, so developers still need to test their websites in all browsers.
Developers can write ‘about:flags’ to test experimental features in Edge, which makes it possible to test new features that aren’t yet available to ordinary users. At http://status.modern.ie, you’ll find a roadmap for the future and what is supported. Stem for the features you’d like to see implemented in Microsoft Edge.
Lea Verou
– The missing slice
Lea Verou demonstrated how CSS can be used to create effects, an excellent example of ‘out of the box’ thinking She demonstrated how to create a pie chart using nothing more than CSS styling of an HTML element. The process involved a total of four hacks that gradually got better and better as the code became cleaner and cleaner.
The final solution , a conic gradient, is not yet available, but it has been submitted as a proposal for the next CSS standard for CSS4!
However, a polyfill is available at http://leaverou.github.io/conic-gradient/which enables all of the currently popular browsers to display this effect now.
There is not guarantee that the effect will be included in the next CSS standard – unless there are enough votes in favor of the implementation of this new type of CSS gradient fill. Lea’s example showed both how ideas for the standards of the future can be developed, and how anyone can participate in that development by contributing ideas. We can all help shape the building blocks of the next generation of browsers.
Paul Kinlan
– The headless web and the future of the web on mobile
There is a trend towards apps attempting to keep users within the app: for example on Facebook, where users follows links to websites within the app instead of opening a browser. As a consequence, Poul Kinlan predicts, new users will no longer know what a browser is in five years.
But that doesn’t mean that websites are on a path to extinction. On the contrary, it even more important that they are web-friendly, that their content can be indexed by search engines, and that they present their content immediately. Because making content accessible without installation is the internet’s great strength. For ever extra step you ask a user to take, 20% will opt out. For this reason, ‘Install our app’ shouldn’t be the first thing a visitor encounters on your website.
Present the information your users are interested in first, and only then offer to deliver it through an app.
With ‘service workers’ (on Android and Desktop Chrome), websites can now act like native apps. Creating a shortcut that caches the website/app for offline use takes just a single click. This means that the website can receive push messages, show notifications and run background synchronization. All the functions normally associated with a native app, but performed by a cached website which is opened in a browser. Without users being able to tell the difference.
Jeremy Keith
– Resilience
Resilience is the ability of a system to handle change, and it’s the fundamental principle in declarative languages such as HTML and CSS which has enabled us to expand HTML from 21 elements to 121 – without generating errors in old browsers. Because browsers know how to display or ignore unknown content – and while the result may not necessarily beautiful, the page will always be displayed without error messages.
JavaScript, on the other hand, is an imperative language, and as such is intrinsically fragile: An error in a random place will stop all JavaScript on a page from executing – and errors happen! If not in our own code, then in some of the many megabytes of JavaScript libraries, tracking code and ad code included on some websites.
To ensure that our own websites are resilient and resistant to errors, it’s necessary to perform ‘crash tests’. What happens to the site if a referred domain – such as a CDN or ads – is blocked or down?
Jeremy Keith shared his recipe for a three-phrase process to ensure resilient websites:
- Identify the core functionality.
- Make the core functionality accessible with the simplest possible technology so that it works even if JavaScript fails.
- Improve!
In phase three, you get to go a little nuts with cool new features. Don’t attempt to forced advanced elements that don’t support core functionality into phase two. Instead, make a conscious choice about what has to function in a crash test situation.
