My notes from Fluent 2014.

Day 1 – Tutorials

Automate all the frontend things

Grunt.js

image sizing

grunt-contrib-imagemin make smaller for mobile, etc: grunt-responsive-images grunt-grunticon

non images

grunt-contrib-cssmin grunt-csscss grunt-contrib-uglify

reduce number of files

sprites: grunt-montage

SASS

  • http://compass-style.org/

  • Commands:

    gem update –system gem install sass sass –watch –line-numbers –style expanded scss:css compass watch

Books

GUIs:

  • CodeKit incident57.com/
  • Compass app
  • koala-app.com
  • grunt-devtools chrome extensions

PhantomCSS grunt-phantomcss http://tldr.huddle.com/blog/css-testing/

From the beginning

Attacking Web Applications

Effective Collaboration on GitHub

  • http://fluentconf.com/fluent2014/public/schedule/detail/32989
  • push early to communicate that you are working on something
  • Local and remote tracking are local to laptop, GitHub master is remote/cloud

  • credential cache – keychain, need settings?

  • fixed a repo problem: git remote set-url origin https://githubstudent@github.com/githubstudent/example-basic.git

  • Commands:

    git config –global user.name git config –global user.email git config –global color.ui

    git clone https://github.com/githubteacher/example-basic

    git branch jdugan-fluent

    git log –oneline –decorate

    git checkout jdugan-fluent

    git push -u origin jdugan-fluent

    touch jdugan.md git add jdugan.md git commit -m “introducing …”

    $EDITOR jdugan.md git add jdugan.md git commit -m “add more stuff” git status git push -u origin jdugan-fluent

    add a file via web ui merge pull requst via web ui

    this fails: git push

    need to pull:

    git pull git push

    git log –oneline –graph –decorate –all

Day 2 – 3/12/2014

Brendan Eich

Pamela Fox, Khan Academy

JavaScript Virtal Machines and the Cloud; Scott Hanselman, Microsoft

Border Radius, Lea Verou

Performance, Ilya Grigorik

  • Browser Networking, OReilly Book
  • 10ms limits in games, but 10ms no big deal in ecommerce
  • 60 fps is 16ms for video, 1ms jitter in audio is perceptible (but some gaps are ok)
  • perceived performance = f(expected, UX, actual)
  • experience = f(perceived perf, task completion)

Practical Workflows ES6 Modules, Guy Bedford

  • Why use ES6 modules?
    • browserify vs require.js – not compatible, etc
    • try to get to a common place
  • ES6 defines module syntax & module loader
  • Separate browser spec: system browser loader
  • Traceur github.com/google/traceur-compiler
  • (what is aurora.app?)
  • NodeJS Entry Point
    • module.js: export var test = ‘es6’;
    • app.js: import {test} from ‘./module’;
    • example of ES6 classes
    • traceur –dir app app-build –modules=commonjs
  • SystemJS:
  • got lost here somewhere … lots of stuff I have no background for

Interface Design Considerations for Data Visualization, Scott Murray

  • @alignedleft, alignedleft.com
  • kindred britain, kindred.stanford.edu
  • Design process.
    1. Visual Structure
      • Outline the content, as detailed as possible
      • Wireframes to to mockups
      • exploratory mode and explanatory mode
    2. Navigation Structure
      • conistency is important – navigational language 3, Interaction
    3. Color
      • “Position is everything. Color is difficult.”
    4. Authorship: signing your work?
      • read the essays about Kindred Britain on the site

Managing JavaScript Complexity in Teams, Jarrod Overson

WebCL: A Secure Solution for Accelerating Web Applications

Where’’s my straw?

The Perception of Speed

Static Types are Overrated: The Dynamic Duo - Loose Types and Object Extension

Code Risk Management at Twitter

Inside JavaScript Execution

6 Bottles of RUM: Surprising Stories of Mobile Behavior in the Real World

  • http://fluentconf.com/fluent2014/public/schedule/detail/32476
  • Mobile performance
  • lots of people are using mobile devices: phone + table = 50%?
  • 3G to LTE there is a 20x gain in speed
  • load speed is more related to latency than to speed (esp over 3 Mbps)
  • performance patterns vs anti-patterns: eg. CDN doesn’t work if you are localized
  • need to measure in order to optimize
  • Mobile speed, state of the union:
  • Cookies increase the size of the payload:
    • MSS/MTU, slow start and fragmentation
    • 10% performance loss for large cookies; 1% for <= 400 bytes
  • Parallelism to the rescue?
    • 4-6 in modern browsers
    • domain sharding – game the system with multiple names
    • with 4x shards we have 24 simultaneous connections, probably not good
    • gains for sharding are pretty minimal
    • HTTP 2.0 allow multiplexing a single connection – claim to make completely obsolete, I disagree possibly
  • Materializing images
    • sprites are generally faster than dataURIs
  • Conversions & carousels
    • swipe surprisingly low interaction in one study
  • CSS

Feature Branches as an Art

Day 3, 3/13/2014

Delivering the goods, Paul Irish

  • @paul_irish
  • An Engineer’s Gude to Optimization
  • Speed Index
  • http archive
  • not all requests are equal – what part of the UX is impacted?
  • video is bandwidth limited, web browsing is latency limited
  • TCP slow-start, particularly bad for mobile
  • http://www.webpagetest.org/
  • http://www.webpagetest.org/result/140313_CN_Q0Z/1/details/
  • CSS adn the critical path Patrick Hamann
  • Eliminate render-blocking CSS
  • Minimize render-blocking CSS

A Love Letter to HTML, Jen Simmons

  • Podcast: the web ahead
  • Rah Rah

Understing your user’s experience, Christine Sotelo, New Relic

  • JavaScript Error reporting

Beyond Pushing Play, Susan McGregor

  • Johnny Cash Project, collaborative art
  • Epic Rap Battle: Steve Jobs vs. Bill Gates
  • Popcorn mixup?

The Goodness of JavaScript, Aaron Frost and Dave Geddes

Fluent Hardware Showcase, John McKay

  • Beaglebone
  • tessel.io

In Defense of Frameworks, Yehuda Katz and Tom Dale

  • ember.js
  • “You call a library. A framework calls you.” is insufficient
  • Dependency Injection
  • Everyone who builds multiple apps eventually builds there own “framework” to start proejcts with
  • “You’re doing it wrong”
  • Toolkits all have “Best PRactice Guides” to help new developers

ExpressJS

Asynchronous Promises, Kris Kowal

Leaflet, Node.JS, and MongoDB for a easy and fun web mapping experience, Steven Citron-Pousty

Writing Real Time Web Apps, Wesley Hales