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.
Getting Nowhere with CSS best practices
(Heydon Pickering - @heydonworks, Oct 9, 0900-0950)
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
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
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
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
- UI components & automatic gallery
- Hmmmmm?
index.soy, IconView.scala
- Karma for unit tests
- „The intern“ for e2e tests = Webdriver API
- webpack module bundler
- [http://webpack.github.io/]
- from modules with dependencies to static assets
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
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
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)
- gov.uk Content Style Guide
- book: talent is overrated
- [http://xprogramming.com/articles/refactoring-not-on-the-backlog]
- do retros rather than post mortems (something has to die first)
Choose your own JS adventure
(Kyle Simpson - @getify, Oct 10, 1440-1530)
Hell is not understanding my own code
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.