rhumlover/feops 2014.md

## feops 2014.md

      
    Raw
  

              feops 2014.md
            
          
    FeOps 2014, Day One

Misc


https://www.flowdock.com/

Continuous Experimentation

Seth Walker, Etsy, @sethwalker

Tool: Supergrep

Slides: continuous-experimentation
Blog post
To Read


link prefetching: on safari iOS, pretech link make the top and bottom bar appears


Cache-Control: private

Indicates that all or part of the response message is intended for a single user and MUST NOT be cached by a shared cache, such as a proxy server.

Source

Beginner's guide to HTTP headers

Does Mobile Web Performance Optimization Still Matter?

Try this analogy: Imagine you're shipping goods from your warehouse across a highway using trucks to be delievered to customers. Bandwidth is like the number of lanes on the highway. Transfer usage would be the volume (counted number) of goods your trucks took across that highway. Disk space would be the size of your warehouse (sort of, explained below).

Source

_ _

But there is a big problem with this. Bandwidth and volume are not the same. Bandwidth is typically measured in bits per second. Data volume is typically measured in bytes. To provide an analogy, a network’s bandwidth is equivalent to the number of lanes on a road. Data volume is equivalent to the number of miles an individual car travels along a road over a certain period of time.

Source


Continuous Interation with Git

Sarah Goff-Dupont, Atlassian, @DevToolSuperFan

Real-time vote
Kick-ass CI on dev branches


Tool: Bamboo
CI is triggered automatically on prod, stable releases branches, but manually on dev branches
Jenkins plugin for Jira or Git hooks

Disable vs. delete.


Rebase before merging
pre release hooks

Build a fortress for master


let dev branches do the dirty work
all your branches are belong to CI
kindergarten rules: share and help clean up
git hooks == ninja powers


FlickR & Node.JS

Bertrand Fan, FlickR, @bertrandom


Express
[tool] Yahoo Manhattan - express service hosting (url?)
[tool] Reboot
Allow user to opt-in and opt-out
[tool] httperf, request/ seconds, latency -- stress test
They can deploy via irc :)
feature flags + uglifyJS
Express YUI


The Glitch In The Game

Sebastian Golash, @asciidisco

Visual Regression


pixel test: take a screenshot from before, one after, and compare pixel by pixel

but what of only text changes: false negative
do I have to valid every change: yes


[tool] Photobox (take screenshots of any site and compare them. A/B visual comparison). Problem, can be too noisy if differences are multiple and big, results as a lot of noise
[tool] Siteeffects, combine screenshots with knowledge of the dom

Performance Regression


Load perf, layout perf, scroll perf

waterfall charts
take max parallels requests in account !
yslow -f xml xx.har
phantomas ! + grunt plugin
Chrome Telemetry

python framework that collects a lot of data of a browser, perf
like devtools, but CI side


Monkey Testing


Art of knowing how to break your app
Gremlin.js

:( does not trigger the entire complete event cascade


CSS regression testing


CSS is a declarative language
Hardy - on top of selenium / Checks the computed style / gherkin syntax

use it for critical components


Fearless Browser Test Automation

John-David Dalton, @jdalton

Tools


Travic-CI
QUnit (Jasmine, Mocha)
Grunt (optional)
Sauce Labs account
coveralls.io

The Checklist

npm deps

chalk
ecstatic
request
sauce-tunnel
grunt-saucelabs


Performance testing for Android Web Apps

Jonathan Lipps, Sauce Labs, @jlipps

Slides

Appium

Automation Orchestra


Apple Instruments & UIAutomations for iOS
Google UIAutomator for Android (4.2.1+)
Selendroid for older android
Chromedriver for Android web & Hybrid
WebDriver interface


Adding Rendering Metrics to Browser Performance

Parashuram Narasimhan, Microsoft Open Technologies, @nparashuram

Slides
Rules


Shard the domains to increase the number of parallel requests
Enclose expensive javascript inside requestAnimationFrames
Minize JS, Images and CSS, always zip over the wire
Runtime performance checklist
Pray to the demo gods before your presentation

Tools


Perfjankie: CouchApp that saves the data, displays the graphs
Phantomas: Runs tests on PhantomJS


Customers love the products. Let's keep it that way

Dusty Jewett, Simply Measured, @dustyjewett


imagediff (npm): terrible :/
high charts
Scylla


Akamai web performance engineer

Tobias Baldauf, Akamai, @tbaldauf

Slides

A SEO expert walks into a bar, bars, pub, public house, irish pub, drinks, beer, wine, liquor, grey goose, cristal...
from waterfall to HAR
when doing agile, all have to pull together
scrum masters own the agile process
an entire company must live webperf culture
we own performance as cultural good
we cannot own performance as responsibility
we consult, create visibility & tools
ideally, we'd make ourselves redundant

Perfculture antipatterns


it's front-end's / back-end's, QA's job
it's a gimmic
it's an impediment
it's not transcending all department

Works fine in dev, ops problem now

A web performance engineer enables & guards webperf culture and this facilitates change.
Performance is everyone's business. Get all on board & be the helpful engineer you want to see


FeOps 2014, Day Two

Delivering the goods under 1000ms

Paul Irish, Google, @paul_irish

Slides

Measure
Calculate light speed
Approach the speed of light

Speed Index


Correlation of speed index: time to visually rendered
Not all requestss are made equal

where are they initiated
what part of the UX do they block


How requests work on the TCP layer
critical path

Bandwith + latency =~ performance


Single digit % perf after 5 Mbps == smaller resources
Linear imprivement with latency == fewer resources to load

Wireless "last mile" is painful


Video streaming is bandwidth limited
Web browsing is latency limited
TCP slow start

Critical path


tap -> image comes in
[tool] webpagetest
PageSpeed insights


The rise of Front-End tooling

Mikeal Rogers, DigitalOcean, @mikeal


npm pouuuuuutre tout. Others: pypi, rubygems (stable), maven central, pearl, hackage (haskell), cpan, nuget (.net), clojars (clojure) (==> declin)


Reducing the complexity with web components

Ian Feathers, Lonely Planet, @ianfeather

Slides

Style guide
Components are reusable but must follow an API style for i/o
Reduce the technical debt

Slides are really focus on experience at Lonely Planet, but worth a watch.

Everything Is a Polyfill: Automating a Maintainable Front End

Rachel Myers & Emily Nakashima, @rachelmyers & @eanakashima

Slides

1 file per polyfill. Comments are put to help maintenance: @support IE8, so you can remove the file when you drop the support of IE8
check our browser analytics on these dates
sunset tests
[tool] dom-prof
know what browsers you support
enforce expiration dates in code


Continuous Translation: i18n in agile projects

Burak Yiğit Kaya, Disqus, @madbyk


language matters


git diff --shortstat "{@month...}"


Advantages of using a SaaS for translations

solves the storage problem: where & how
solves the UI problem


marking translates: gettext


variables: translations["Hello %(name)%"]


extracting: jsxgettext]


[tool] grunt-i18n-abide


Considerations:

detect RTL

detect if language is rtl
use Transifex "rtl": true
maintain your own list: arabic, persian...
set dir="rtl" on 
set dir="auto" on all user content
R2 a CSS LTR ∞ RTL converter for i18 friendly layouts


translate dates and times

moment.js


Automate: TravisCI, Jenkins, ...


SaaS for translations


Task runner


Use case BBC news Sass implementation of RTL


The Dark Side

Martin Kleppe, Ubilabs, aem1k.com, slides


jsfuck.com
js1k.com

false       =>  ![]
true        =>  !![]
undefined   =>  [][[]]
NaN         =>  +[![]]
0           =>  +[]
1           =>  +!+[]
2           =>  !+[]+!+[]
10          =>  [+!+[]]+[+[]]
Array       =>  []
Number      =>  +[]
String      =>  []+[]
Boolean     =>  ![]
Function    =>  []["filter"]
eval        =>  []["filter"]["constructor"]( CODE )()
window      =>  []["filter"]["constructor"]("return this")()


Introducing RequireJS Into a Large Codebase. Delicately.

Dan Lee @DanielEricLee & Chris Chen @chennney, Yammer


build.json => asset pipeline => application.js => CDN


Isolation
Iteration
Minimize disruption
'Code in transition' is ok


It's About People

Dustan Kasten, Skookum Digital Works, @iamdustan

Feedback


Disseminating knowledge
Be transparent

Culture


Trust & vulnerability
"In order to have mutual trust, you need to be vulnerable" - Patrick Lencioni
Human relationships are the most important valuable, worthwhile, painful, difficult, wonderful, part of life.

Pro-creation


Active mentality of creating, really taking steps to improve creativity, productivity


The Responsibilities of a Front End Operations Engineer

Rodney Rehm, Deutsche Telekom, @rodneyrehm


Tools are categorized:

^ Analysis (user)
| Test (user)
| Build (dev)
| Development (dev)


Anything invented before you're 15 is normal and along the natural order of things.

Anything invented between you're 15 and 35 is exciting and revolutionary, and you could probably make a career on it.

Anything invented after you're 35 is against the natural order of things.


Start with something small, but something with impact:

convincing the team:

graphic designers
UX designers
QA engineers
Ops, DevOps


Blind refactoring is not your friend


Start small. Build prototypes. Follow through.