View Source 2016

View Source is a conference organised by Mozilla, was held on September 12–14 in Berlin, Germany, for the first time in Europe.

#First day talks

Opening keynote: State of the web by Hadley Beeman. Slides. Video.

The future isn’t built yet.
We don’t all agree what the future should be.
We need you to help create the future.
The rules are fluid, because we make them. We have the ability to shape the web. What should it be?

Design for non-designers by Tracy Osborn. Slides. Video.

Developers can’t escape at least some designing: site for open source project or just a home page.
Fastest way for better looking designs: reduce clutter.
Reduce number of fonts and colors, line things up.
Whitespace is the ultimate clutter reducer.
Make it easy to find and use the most important action.
Content principles: less is more, big paragraphs are a sign of clutter, break into bullets.
Headlines: talk benefits, not details, keep it short, use natural and friendly language.
Good artists copy, great artists steal: use work of others as inspiration. Designing without inspiration is like programming without Stack Overflow.
Colourlovers, Beautiful Web Type, Typewolf.
A Simple Web Developer’s Guide To Color.
Upcoming book about web design.

Inclusive markup: you don’t need a framework for that by Estelle Weyl. Slides. Video.

Original purpose of frameworks is normalization of browser features like addEventListener: not relevant anymore.
Frameworks are good: faster, optimized and readable code.
But you don’t need jQuery to add a class.
Using frameworks developers are not learning basics of web development.
Frameworks don’t guarantee accessibility: you need to understand the output you’re generating.
Semantic markup is one of the core principles of an accessible web. For example, different input types.
Average web page size has grown by 351% since 2010.
Frontend requirements: progressive enhancement, accessibility, performance, security, user experience and design, good taste, social skills, communication and writing, teaching, debate, documentation…
Resume Driven Development (RDD).

You might not need a CSS framework by Belen Albeza from Mozilla. Slides. Video.

Why people use frameworks: they believe it’s quicker and best practice, already implemented design.
Quicker? Not true for most projects with custom design.
Good for back office, prototypes and projects without a designer.
Problems: unsemantic, bloated HTML, unused rules, hard to override styles (too specific), opinionated.
Why use class to disable a button instead of disabled attribute? Why use two classes for a colored label?
Use Flexbox for layouts today. Use CSS Grid for layouts tomorrow.
Don’t include a whole framework if you just need a grid or a few UI components.

Node versions: how do they work? by Myles Borins from IBM. Slides. Video.

Versions are confusing but you don’t have to understand everything to contribute in a meaningful way.
Stop using Node 0.10 and 0.12 because OpenSSL used in these versions will stop updating in December.
Do not use odd versions in production. Use 4.x now. Maybe.
Next month 6.x will become LTS with 30 month support cycle and lots of ECMAScript 2015 goodies.
Smoke testing: run tests for the most popular npm modules to ensure no breaking changes.
Tools: branch-diff, changelog-maker.

Type is your right! Performance and web typography by Helen Holmes from Mozilla. Slides. Video.

You can read about most of these things in Helen’s article What is Beautiful Web Typography.

Use OpenType features in CSS: kerning, ligatures, and so on
Use OpenType Sandbox to check what features are available in a font.
Custom fonts have performance issues that could be fixed.
Prevent the FOIT (flash of invisible text).
Minimize the FOUT (flash of unstyled text).
Minimize FOFT (flash of faux text): choose closest safe font, tweak size to match custom font.
Load regular, italic and bold separately.
Tools: fontfaceonload, utility-opentype, Normalize-OpenType.css.

Things you can do in ES6 that can’t be done in ES5 by Dan Shappir from Wix.com. Slides. Video.

ES6 (ECMAScript 2015) is mostly syntactic sugar: arrow functions, destructuring, default function parameters, template strings, classes, and so on
It’s good: you want the syntax to be friendly.
What ECMAScript 2015 can do is what Babel can do.
Map can be emulated in ES5 but much slower.
WeakMap and Proxy can’t be emulated in ES5.

Closing keynote: Resilience by Jeremy Keith. Slides. Video.

First version of HTML had 21 tag, HTML 5 has 121.
HTML and CSS have loose error handling. Show content, skip tags and properties they don’t understand. Browser doesn’t stop parsing when it finds an error.
The first site still works in modern browsers.
HTML and CSS are declarative and resilient, JavaScript is imperative and fragile.
Make core functionality available using the simplest technology, then enhance.
Developer convenience shouldn’t be more important than user needs.

#Second day talks

Opening keynote: existing in tech by Lena Reinhard from Travis CI. Slides. Video.

The tech industry is not hospitable to humans.
How to survive in tech:
- remember that you matter;
- use the power of language;
- practice self care;
- do only one thing, but do the one thing;
- get professional help;
- set and enforce boundaries;
- learn to recognize warning signs;
- be open about your experiences;
- remember that you’re not alone;
- know there’s a spaceship, you can leave;
- support others.

Laying out the future with Grid and Flexbox by Rachel Andrew. Slides. Video.

CSS wasn’t designed for layouts: floats, inline-block, display: table, absolute and relative positioning, lots of frameworks.
Hopes for the future: Flexbox, CSS Grid Layout, Box Alignment.
Grid by Example.
Separation of source order and display order.
CSS Grid automatic placement: fantastic for a photo gallery, not so good for a form.
On CSS accessibility and drinking tea — Léonie Watson at CSS Day 2016.
It’s 2016. We can finally centre things.
Responsive by default.
Flexbox Tester.
Flexbox is for one-dimensional layout, CSS Grid is for two-dimensional layout.
Vendor prefixes didn’t work because developers used unfinished features in production and got upset when that features changed.
Try unfinished features and give feedback: it can be included in the spec.

Progressive Web Apps is the new Ajax by Chris Wilson from Google. Slides. Video.

The most exciting time in web development.
Average user installs zero app per month.
Like Ajax it’s about users, not technology.
User experience needs to be reliable, fast and engaging.
Reliable: never show a Downasaur.
Fast: 40% of users abandon sites that take longer than 3 seconds to load.
Engaging: full screen theming, orientation, auto-adding to home screen, push notifications.
The offline cookbook.
A promise to the user: works offline, consistent experience, the users is engaged.

Revolutionize your page: real art direction on the web by Jen Simmons from Mozilla. Slides. Video.

Paper magazines use layout to communicate an idea of a story, web articles all look the same.
Many modern sites use same layouts dictated by our tools.
The Experimental Layout Lab of Jen Simmons.
Little pieces: initial letter, viewport units, object fit, clip path, CSS shapes.
Use CSS Feature Queries to check browser support.
Big pieces: Flexbox, CSS Grid Layout, Alignment.
CSS Grid is a framework built-in a browser.
Learn Flexbox by playing a game: Flexbox Defense, Flexbox Froggy.
Tools: Firefox Nightly, where Grid just works, CSS Grid Inspector for Firefox, CSS Shapes Editor for Chrome.
Don’t work — don’t use is a bad approach.
You can use and don’t use enhancements at the same time with CSS.
In one year we will have 60–80% support of CSS Grid.
Start learning Grid now and you’ll understand it when it starts shipping in browsers.

Doing the unstuck: how to make browsers compatible with the web by Mike Taylor from Mozilla. Slides. Video.

New browser features can break existing sites.
Specs are changing to match reality: existing implementations in browsers.
Once we add this garbage pile of hacks, the web is actually usable.
Read standards.
Test in prerelease versions of browsers: Firefox, Edge, Safari, Chrome, Opera.
Report bugs to browsers: Firefox, Edge, Safari, Chrome, Opera or webcompat.com.

I’m offline, cool! What now? by Ola Gasidlo from Styla. Slides. Video.

Network is progressive enhancement.
SVG over IMG, base64 over IMG (but base64 is expensive and heavy).
Save data locally and often, use partial updates.
Define flexible data schema: prevent merge conflicts.
Security: use CORS, encrypt local data, use JSON Web Tokens.
Rethink how to use technology, by thinking about the issue. Not about the tools.
Tools: jakecache, CouchDB, PouchDB.

Web, meet virtual reality by Dominique Hazael-Massieux from W3C. Slides. Video.

VR is not just visual: WebGL, WebVR, Gamepad API, Web Audio, 3D camera and computer vision.
A-Frame: create virtual reality using markup.

Closing keynote: the future of the web — progressive web apps and beyond by Robert Nyman from Google. Slides. Video.

Web declared dead in 2010. Web very much alive in 2016!
800 Million users of mobile Chrome in November 2015 → 1 Billion in May 2016.
Progressive web apps: instant loading, add to home screen, push notifications, fast, secure, responsive.
What about the future?
Automatic sign-in.
Paying for things on the web.
66% of purchases on mobile are on web, 66% fewer conversions on mobile sites vs. desktop.
Checkout forms today: manual, tedious, slow, many taps.
Autofill fills web forms with a single click: 25% increase in conversion rate.
Checkout with Autofill: automatic, simple, still slow, still many taps.
PaymentRequest: a W3C API to eliminate checkout forms for users and standardize payment collection for sites.
Checkout with PaymentRequest: automatic, simple, fast, single tap.
Connecting with hardware: Bluetooth Low Energy (BLE), WebNFC, generic sensors.
Our job isn’t about frameworks or discussions about semicolons, it’s about people.

#Discussion corners

Sustainable Open-Source Projects with Jan Lehnardt.

Based on Jan’s article.

Treat contributors as people.
Have a Code of Conduct.
Always recruit contributors.
Document everything, document decision making process.
Make detailed issues instead of fixing bugs yourself.

New and upcoming Web APIs with Florian Scholz and Jean-Yves Perrier.

APIs: easy to use but limited or harder to use but allow anything?
Any standard is a very long process: making things possible is more important then a nice API.
Browsers have to support all past technologies.
People maintaining documentation (like MDN) have to constantly update documentation to reflect changing specs, but they also have to maintain documentation to all past technologies.

Why developers need to learn Design with Emanuele Libralato.

#Some takeaways

Mobile apps are finally dying: learn how to build progressive web apps.
Learn CSS Grid today: you’ll need it tomorrow.
Learn how your framework works: you might not need it.
Vendor prefixes → prerelease browser channels to test new features.
People finally understood that we’re here not to write code but to help our users.
New words: Downasaur (dinosaur in Chrome when you’re offline), Lie-Fi.

#Some closing notes

I’ve enjoyed the conference very much. I like that it wasn’t about just technology but about how to apply technology and that’s inspiring. Topics were very diverse but not too hardcore.