Habe ich die JAM Session versucht mitzuzeichnen, ist mein übliches Vorgehen doch die Mitschrift mit Markdown. Praktisch, dass dies das native Format der von mir gewählten Plattform Ghost ist. Hier also meine Notizen zur Fronteers 2014 in Amsterdam.

badge

Getting Nowhere with CSS best practices

(Heydon Pickering - @heydonworks, Oct 9, 0900-0950)

bestpractise

Markup

  • no ids
  • no class concat
  • no .left and .right but .main and .sidebar
  • semantic classes for the dev
  • semantic markup for the user

States

  • role="navigation"
  • [role="tab"][aria-selected]
  • W3C: WAI-ARIA Authoring Practises

Maintainability

  • manage complexity
  • don’t make me think
  • Developer: HOW should I do this?
  • Designer: SHOULD I do this?

Do not forget

  • Accessability
  • focusable links

client

Making Maps, the role of frontend infrastructure at Etsy

(Daniel Espeset - @danielespeset, Oct 9, 0950-1040)
[Slides]

  • VMs of complete codebase
  • Every developer has access to every VM
  • Continous Deployment
  • Button „Deploy to Production“
  • IRC channel with bots
  • 25-50 Pushes a day (to production)
  • Smallest possible change should be pushed
  • rarely work on branches
  • ramp up new features for a limited user base

Continous Experimentation

  • Tool: Ranger for dependency graphs
    • JS graph
    • CSS graph
    • Render graph
    • Ranges plugin for devtools
    • Not yet open source, needs to generified
  • Tool: Shrinkray for CSS
    • usage statistics for selectors and rules
  • SCSS rules
    • no @extends
    • no @mixins (for now)
    • limits on nesting levels
    • scss-linting
  • all is aimed at throwing code away

Frontend Operations

Do we need to write markup

(Nathan Ford, Oct 9, 1110-1200)

Can we optimize HTML?
HTML is pretty damn good already.

  • Markup
    • is not code
    • is design (and design is problem solving)
    • unforgiving
    • is for everyone
  • Book: Steven Johnson: „Where good ideas come from“

Pushing the real-time web forward

(Arnout Kazemier - @3rdeden, Oct 9, 1200-1250)

The past

  • AJAX polling
  • XMLHttpRequest
  • XDomainRequest
  • window.addEventListener("load", connect, false);
  • Caching is a major problem (esp. back-forward cache)

Now, we have webs(o/u)ckets

  • crashes on buggy implementations
  • setTimeout as a workaround
  • esc in FF closes connection (fixed in v20)
  • FF can create ghost connections
  • proxies do not support websockets, they do not understand the protocols
  • virus scanners block websockets
  • firewalls do not understand websockets
  • out of date load balancers

websock

EVENTSOURCE

  • human readable protocol
  • simple and understandable API
  • widely supported, but not on IE
  • not cross domain cabable (yet)
    • workaround: iframes, cross document communication
  • problems:
    • anti-virus
    • firewalls
    • reconnect
    • inactive connections

General

  • implement your own reconnect (random timeout) to not flood the server
  • monitor
  • connection limit
  • HTTPS:// and WSS:// is your only option

State of the Animation 2014

(Rachel Nabors - @RachelNabors, Oct 9, 1350-1440)

  • animation guides users through interactions
  • animation is coming

Types of animation

  • Static Animations (Start to Finish)
  • Stateful Animations (Reacts on events)
  • Dynamic Animations (Factors and events)
    • factors?
    • CrowdStrike Demo

Declarative versus Reactive

  • CSS is declarative
  • angular is declarative

Animation Frameworks

  • GreenSock Animation Platform (gsap)
  • Velocity.js (replaces jQuery animate())
  • W3C: Web Animation API
    • there is a polyfill

actors

The art challenges the technology, and the technology inspires the art. - John Lasseter

[http://rachelnabors.com/waapi]

Games - Lightning Talks

(Oct 9, 1440-1530)

How to start making games - @thomaspalef

  • lessmilk.com
  • ebook „Discover Phaser“
  • Pick a framework
    • Phaser: HTML5 framework
  • Make a really tiny game
    • yes: pong, space invader, Breakout
  • Make more games

HTML5 Games @luciebloom

  • cross platform
  • no installation
  • large potential reach
  • concerns
    • learning curve
    • performance
    • security, piracy, cheating
    • ROI
  • WebGL and Canvas
  • Phaser + PIXI.js
  • Findings
    • performance below expectations
    • create a low quality version
    • missing: asset configuration

IMPACT Game Engine @phoboslab

  • 2D Games
  • Sprites
  • 7DFPS (Build a first person shooter in 7 days)
  • Waldmeister = Level Editor
  • actually 2D with a 3D viewport
  • Plugin: Two Point Five (WebGL)
  • [phoboslab.org/fronteers2014]

WebRTC from a frontend perspective

(Shwetank Dixit - @shwetank, Oct 9, 1600-1650)

User Media

  • video filters on the fly
  • speech recognition API
  • navigator.mediaDevices.getUserMedia(constraints)
  • cannot control cam: focus, flash, zoom missing
  • new spec: Mediastream Image-Capture

RTCPeerConnection

  • [webrtcglossary.com]
  • ICE, FreeICE - what is my IP
  • Libs: simpleWebRTC, peer.js ..
  • Debugging
    • chrome://webrtc-internals
    • about:webrtc
    • getStats() method
    • callstats.io

Data Channels

  • High Performance
  • Low Latency
  • P2P
  • most innovations are here

Offline First

(Alex Feyerke - @espylaub, Oct 9, 1650-1740)

  • a lot of marketing vids that either expect bandwith or must work offline
  • „Experience plastc“
  • Google Glass Promo

Offline is not an error. Treat the network as an enhancement.

Offline First Architecture

What needs to be offline:

  • app
  • assets
  • app’s data

How:

  • hoodie.store -> localstorage (soon: pouchdb, too)
  • sync to CouchDB through REST (Hoodie Sync)
  • hoodie CLI tools can generate an example app

Interesting:

  • js git
  • polarr (looks like LR)

Problems:

  • Trust, availability, reliability

Opportunity:

  • always available personal data on your personal device
  • smart offline maps
  • RSS reader with data in it

Challenges:

  • save vs sync
  • save locally and sync later
  • inform user about sync outcomes

Offline-First Advantages

  • Performance, zero latency
  • Robustness, server down, i don’t care
  • Better experiences, save all the time

Making Twitter UI Infrastructure

(Nicholas Gallagher - @necolas, Oct 10, 0900-0950)

Guidelines

  • solve known problems
  • focus on outcomes and process, not tools
  • design for adaptability, not perfection
  • components are the primary unit of scale
  • ready-made, not tailor-made
  • make skillful use of what is at hand
  • documentation & ownership over institutional knowledge

System overview

scientific and technical work is made invisible by it’s own success

Optimizing web performance

(Dave Olson, Oct 10, 0950-1040)

  • Average HP today: 1.8MB
    • 78% Images + JS
  • RWD sites for small screens weights the same as the large screen design
  • Mobile first means performance first

iceberg

Issues

  • DL and hide (dont show on small screen)
  • DL and shrink (resize on mobile screen)
  • DL and ignore (not needed, not used)

Tools

  • Google Pagespeed Insights
  • DevTools: Network, Timeline
    • [udacity.com/course/ud884] = chrome dev tools course
  • WebPagetest !!!
    • slideshare: Web Page Test Beyond the basics @aaronpeters
  • [https://redbot.org] checks browser caching
  • kraken.io, smushit.com, spriteme.org, imigix.com
  • microjs.com
  • grunt-google-cdn (changes existing libs to the cdn reference)
  • Penthouse service to find critical CSS
  • [http://perf-tooling.today/]
  • perfmap on github (heatmap on performance)
  • mod_pagespeed
  • Slow things down
    • Charles Proxy on Windows
    • Mac: NLC Network Link Conditioner
    • Chrome 38 let's you simulate slow bandwidths as well

Mobile Optimization tenets

  • reduce requests
  • reduce assets size
  • speed up page-render

js
render
summary

Animating SVGs with CSS and SMIL

(Sara Soueidan from Lebanon - @SaraSoueidan, Oct 10, 1110-1200)

  • SVG and CSS have some shared attributes
    • SVG has much more
    • they won’t be accessible from css
  • transform origin is different
    • css: 50% 50%
    • svg: 0 0

Why SMIL

  • can animate attributes CSS can’t
  • event handling
  • synchronisation
  • SVG SMIL works in most browsers

This is the web platform

(Paul Kinlan - @paul_kinlan, Oct 10, 1200-1250)

  • app cache is dead (because it was too complicated)
  • ServiceWorker
  • Every app should have a lifecycle
  • Every developer should have control over the app stack
  • You should be able to build higher level API’s on lower level primitives
  • Raise your prices for IE8

Tools

  • caniuse/edit/master/data.json
  • iwanttouse.com
    • enter features
    • the tool tells you, how much people can actually use it
  • w3.org: mobile-web-app-state
  • mobilewebappsftw.tumbl.com
  • caniuse-cli based on data.json

Browser support

  • N-2 Good
  • N-1 Better

10 deadly sins of mobile web apps

  • lack of focus
  • not mobile
  • no discovery
  • not interconnected
  • monolithic
  • authentication
  • slow and ugly
  • white screens
  • everything is ephemeral
  • the platform has a lot of features, just not the right ones

Baking in Accessibility with agile

(Meri Williams - @Geek_Manager, Oct 10, 1350-1440)

xtreme
summary

Choose your own JS adventure

(Kyle Simpson - @getify, Oct 10, 1440-1530)

Hell is not understanding my own code
hell

sweetjs.org (JS macros)

  • nullity(x.y.z) macro in examples
  • block scoping
  • this binding
    • promiscous
    • hard
    • soft
  • conditional catch clauses

JS - have it your way

two way traffic

  • developer writes his code
  • tool transforms it to common sense

Talks

  • the-future-of-javascript-tooling
  • building-javascript-tools-talk

Tools

  • restrictmode.org
  • github.com/getify/foilscript
    • statement of what is wrong in JS
  • github.com/getify/esre
    • two way code formatting

Evolving your testing strategies

(Pete Hunt, Oct 10, 1600-1650)

What is quality

  • functional quality (correctly performs)
  • structural quality (code)
  • process quality (value received by users)

%% Most boring task of the whole conference

Dream big. Think small.

(Petro Salema, Oct 10, 1650-1740)

DEATH: the mother of all usability problems

  • plane with bullet holes in some parts (analytics, based on returned planes)
  • task: put an armor on some parts, but not on all because of weight issues
    • version 1: protect these parts
    • version 2: protect all the other parts (because a plane with bulletholes in the mentioned parts still can fly)

The best way to predict the future is to invent it (Alan Kay)

  • BEEPING - a protocol
  • Features for superpower rather than products
  • attribute ‚content editable‘
  • caret placement

UX

  • Accessibility
  • Usability
  • Capability

Don’t start the revolution, enable a revolution to start.