Old notes from an EpicFEL past

14 lines of JS that saved the BBC millions - @JamieKnight

  • The brief: fix search, like Google, by Friday?
  • Solr, great but it would cost “Millions”
  • dumb idea: massive client-side whitelist
  • Quick-fixes only hide the problem
  • Learned
    • scale when needed
      • but not an excuse to do bad work
    • culture
      • the way we do stuff
      • prototype in production behind a flag
      • dependencies are hard
    • process
      • go with the flow
      • don’t force agile
      • some value is better than no value
      • Mandolin for AB deploying
        • use with caution
  • “The value of the coder is not the code they write, but the problem they solve”

Performance + Optimisation - @grudelsud

  • How to save 250,000,000 seconds in 6 months
  • AngularJS - gulp - browserify - boilerplate
  • GAE webapp2 is fine for most cases
  • Optimise the model to maximise data throughput
  • simple CSS transitions / models
  • speakerdeck.com/jaffathecake/rendering-without-lumps
  • dynamic images, only request the size you need
  • do your own load-testing if you can
    • try to create meaningful tests to simulate users’ behavior
  • POST-optimisation lets you optimise against real-world situations
  • UNIT9 and B-Reel Meetups

Burn your select tags

  • gov.uk
    • open, agile, multi-disciplinary
    • have to cater to a very wide range of users
    • often users are doing something that isn’t enjoyable
  • select issues (dates)
    • confusing focus / highlight with selection
    • trying to type into select boxes
    • unable to close select
    • can’t pinch-zoom select options
  • text inputs are much easier
  • don’t use select for dates
  • “dropdowns should be the UI of last resort” - @lukew
  • options
    • will text input suffice
    • small discrete sets -> radio buttons
  • select is good for long list where “you would know when you see it”
  • but consider custom widget
  • Steve Faulkner has good accessibility checklist
  • We do the hard work to make things simple
  • design with data!

iOS Development with JS and COrdova, is it time to swift? - @arnaudbernard

  • Cordova - exposes native capabilities through JS APIs
  • lots of plugins, both officially and 3rd party
  • rise in AngularJS Ionic apps
  • can reuse lots of JS that already exists
  • simulate app in browser with Ripple chrome extension
  • assets size doesn’t matter
  • less compatibility worries
  • Mapps
    • google maps can be slow
    • map kit is limited
  • Images aren’t cached without plugins
    • File Transfer plugin
  • could pass computation-heavy tasks to Native C
  • you lose some of the nice built-in native goodness
  • speakerdeck.com/jpsim/swift-for-javascript-developers
  • swift will make plugin development easier

Making custom widgets accessible with ARIA - @LeonieWatson

  • “Accessibility shouldn’t stifle creativity and motivation, it should be part of it”
  • role can give purpose to semantically-neutral elements
  • Native properties such as alt
  • aria-label can differentiate nav (or other) elements
  • tabindex="0" for focus
  • role such as button for interaction
  • role="button" should capture space and enter
  • basket summary aria-live="assertive" aria-atomic="true"
    • atomic reads whole content, not just the change
  • Tabs
    • `role=”tablist”
    • role="presentation" ignores element

ES6: JavaScript Grown Up - @Jack_Franklin

  • Arrow functions
    • function (x) { return x * 2; } (x) => x * 2;
    • arrow functions maintain scope of parent (this)
    • can use {} with arrow functions
  • Classes
    • sort of
    • constructors, parents via a super
  • prop: function() { ... } prop() { ... }
  • Multi-line strings with '\n'
  • ${name} in strings
  • var [a, b, c] = [1, 2, 3]
  • var {name, age} = getPerson()
  • default values function (val: default) { ... }
  • total(... [1, 2, 3]) === total.call(null, [1, 2, 3])
  • block scope using let foo = 2 within {}
  • modules
    • export {foo, bar}
    • import {foo} from 'app'
  • Generators, pause execution and wait for a value
  • yield async code that reads sync
  • Traceur compiles ES6 to ES5
  • esnext / es6-module-transpiler