View Source 2016
View Source is a conference organised by Mozilla, was held on September
First day talks
- 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?
- Developers can’t escape at least some designing: site for open source project or just a home page.
- Fastest way for better looking designs: cut down on 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.
- 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
- 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).
- 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
disabledattribute? 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.
- 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 ES6 goodies.
- Smoke testing: run tests for the most popular npm modules to ensure no breaking changes.
- Tools: branch-diff, changelog-maker.
You can read about most of these things in Helen’s article What is Beautiful Web Typography.
- Use OpenType features in CSS: kerning, ligatures, etc.
- 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.
- ES6 is mostly syntactic sugar: arrow functions, destructuring, default function parameters, template strings, classes, etc.
- It’s good: you want the syntax to be friendly.
- What ES6 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.
- 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.
- Make core functionality available using the simplest technology, then enhance.
- Developer convenience shouldn’t be more important than user needs.
Second day talks
- 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. —
- CSS wasn’t designed for layouts: floats,
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.
- 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.
- 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 use is a bad approach. work —
- You can use and don’t use enhancements at the same time with CSS.
- In one year we will have
80% support of CSS Grid. 60 —
- Start learning Grid now and you’ll understand it when it starts shipping in browsers.
- 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 pre-release versions of browsers: Firefox, Edge, Safari, Chrome, Opera.
- Report bugs to browsers: Firefox, Edge, Safari, Chrome, Opera or webcompat.com.
- Network is progressive enhancement.
- SVG over IMG, base64 over IMG (but base64 is expensive and heavy).
- Save data locally and frequently, 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.
- VR is not just visual: WebGL, WebVR, Gamepad API, Web Audio, 3D camera and computer vision.
A-Frame: create virtual reality using markup.
- 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?
- 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.
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.
- 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 → pre-release 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),
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.