JS Conf Iceland 2018 Talk Summaries

README.md

JS Conf Iceland 2018 Talk Summaries

Hello! I'm at JS Conf Iceland and taking notes on all the talks I go to. They're mostly for my own reference, but you're welcome to use them.

If you're here, say hi -- I'm wearing a blue checked shirt.

If you're on Twitter, I'm @kylehill.

empathy-as-a-service.md

Empathy As A Service - Mental Health In The Tech Workplace — @xiehan

• 20% of adults are living with mental illness at any given time
  • We don’t really talk about it
  • Broad definition of MI (includes autism, “burnout” -- depression from workplace stress)
• Depression is at least 13x more prevalent than schizophrenia
  • Cultural shame around depression
  • Gendered symptoms
• 35-50% of people with mental disorders don’t get/seek treatment
• 15% of people with severe depression die by suicide
• Workplace-related fear of revealing depression
  • “Leave your personal life at home when you come to work..”
• Open Sourcing Mental Illness - organization in the US about MH in tech
  • “I could do so many awesome things if only my own head didn’t get in the way”
• Relocation
  • Pros: much easier to feel part of a team, bring you closer to community of practitioners
  • Cons: generally stressful, takes people away from support structures, hard to make friends
  • As a community: STOP staying we should relocate to SV
  • As a manager: Hire remotely if you can
  • As a colleague: Encourage new relocated employees to make friends
• Remote Work
  • Pros: Flexible hours, easier therapist/medical treatment, quiet and peaceful
  • Cons: Isolation, hard to build rel with colleagues, hard to maintain work-life balance
  • Solutions: co-working spaces, company-wide offsites
• Open Plan Offices
  • Pros: Conducive to collaboration, camaraderie; cheap as hell
  • Cons: Noise, lack of privacy, increased stress/pressure/friction
  • Solutions: Allow employees to work remotely, set aside quiet spaces, noise-cancelling headphones, let employees decorate
  • (Seriously, the decoration thing is shown via research)
• Alcohol at Tech Events
  • Pros: 1/2 drinks can help being social, networking w
  • Cons: Make non-drinkers/recovery people uncomfortable, alcoholism is a huge problem
  • Solution: Offer nice booze alternatives (mocktails, fancy sodas); limited free drinks; other activities besides drinking; alternate dry/wet events; workplace wellness programs on substance abuse
• For managers/leads/senior devs: lead by example
  • Actually have a work-life balance
  • Be receptive to feedback on your own performance
  • Listen
  • Be open/vulnerable to talking about your own MH
  • Make sure employees understand benefits
  • Make sure your hiring practices don’t devalue MH/neurodiversity
  • Make sure employees feel valued, are on fulfilling projects
• Mental Health First Aid
• What must we do together?
  • Always support marginalized people in the tech industry
  • Fully embrace neurodiversity
  • Change tech culture: burnout as a virtue, stigma against talking about feelings, the idea that engineers don’t have empathy

end-to-end-testing.md

End-to-End Testing - @willslab

• Unit testing is generally all sorted, but how do you test your frontend?
• Selenium — Java service to send commands to a virtual browser
  • Many ways for it to go off the rails
  • Lacking confidence in proper operation (flakiness) with highly complex apps
  • Bad tests that fail once in a while — but still worth testing
• cypress.io
  • Formerly closed source, now open/MIT licensed
  • npm install cypress, npm cypress open installs sample files
  • Works with standard BDD (mocha, chai etc)
• cy object interacts with browser, inputs
  • cy.focused().should(…
  • cy.get("selector").type("some text").type("{enter}")
• Creates mp4 recording by default (!!)
• Has electron app..
  • Shows app
  • Time travel through commands for replaying state
  • Extreme inspectability
• Rolls up piecemeal tooling into a single package
• Lots of best practices on website
• Tradeoffs
  • it has a style (lots of chaining)
  • Only Chrome-based browsers for right now (Firefox soon, Edge maybe?)
  • It’s ambitious — an entire development experience — so bugs/issues exist. Early days

firefox-quantum.md

Making A Modern Browser Fast — @teoli2003

• Processors have evolved: more cores/concurrency, less by individual CPU improvement
• Expectations have evolved: used to be pages w/ images, now 60fps video and VR
• Servo: experimental “browser” engine
  • Written in Rust; massive parallelism
• Firefox had problems to solve: Instability, old theme, jank UI
  • Want to make quantum leap in CSS rendering
• New style engine in Firefox 57 (in November), improves performance especially in complex pages
• Browsers have been moving things off the main thread
• Offload composition to the GPU to improve stability (FF 53)
• Offload painting to the GPU (soon, but currently off-thread painting)
• Detailed system perf measurement leads to huge improvements
• Improvements in scrolling UX
• Improvements in garbage collection
• New UI: perceived speed improvements

houdini-what-lies-ahead.md

Houdini - What Lies Ahead — @amdsouza92

• History of CSS
  • 1994: W3C formed, JS and CSS open standards
  • 2010: Polyfills
  • 2013: Extensible Web Manifesto
• Houdini: W3C effort to define lower-level CSS APIs for authors to extend capabilities
• Properties and Values API
  • Extends CSS variables spec — types, initial values, inheritance behavior
  • window.CSS.registerProperty({ name, syntax, initialValue })
• Typed OM API
  • CSS typed values in JS
  • Performant manipulation of property values
  • document.querySelector(".hi").styleMap
• Worklets: worker scripts for Houdini APIs
• Paint API
  • background-image: paint(mypaint);
  • window.CSS.paintWorklet.addModule("checkerboard.js")
  • JS includes a class with a paint method that does canvas-style rendering
  • You can pass property values from CSS to the painter class!
• Layout API
  • display: layout(mylayout), registered in worklet
  • Works on fragments
  • Gonna need to read the actual spec/see examples on this
• Animation API
• Very early stages of development:
  • Parser API
  • Font Metrics API (measureElement, measureText, etc)
• Support: not really, CanIUse chart is all red
  • Paint API in Chrome 65 next week
  • ishoudinireadyyet.com

live-and-machine-learn.md

Live and Machine Learn — @sarah_edo

• We live our lives increasingly online — phone anxiety
• Early internet culture was about representation
• Paradigm shift: Algorithms become part of society
• Tech can be magical, but it also has pitfalls — challenges to democracy from ML
• “ML gives computers to the ability to learn without being explicitly programmed”
• Supervised ML — testing algos against data sets
  • Unsupervised: “what does a stegosaurus bred with a dog look like”
• The road to hell is paved with good intentions…
  • Sample data — PredPol tells cops to only patrol area with high crime, which… causes crime
  • Risk of recidivism is calculated with ML gives higher scores to POC
    • Algorithm is non-transparent, non-adaptive
    • Algorithms are written by people
  • FB uses assumptions about you to drive directed ads, those assumptions are often wrong
• Ordinary developers can and should stand up when there’s a problem
• Good things:
  • Dynamically generated alt text (for twitter memes)
  • ML in medicine — DNA research, finding Ebola outbreaks
• As a developer: always ask questions and make purposeful decisions

node-js-where-are-we-now.md

Node.js: Where are we now, where are we going? — @addaleax

• Originally got into node core to add better error messages
• Majority of her contribution PRs: “make node more helpful”
• Communication of node core team with rest of world is presently not so great
• Node 10 is nearby (prob. released in April)
  • New features: ES Modules, HTTP/2, Promises, WASM, async_hooks
  • Better error systems
  • Updated version of V8
• ES Modules
  • Experimental, but currently available
  • .mjs extension, presently
  • Async loading
• HTTP/2 - No longer experimental in Node 10
• async_hooks
  • What is in the event loop; tracking context
  • Still experimental, API has rough edges
• N-API: native API improvements
• Promises!
  • async/await — you should be using this now, its really nice
  • util.promisify — Node 8+
  • fs/promises — fs but all promisey, Node 10
  • async iterators coming soon
• Errors
  • error.code being standardized
  • Error message changes no longer semver-major
• require("worker") — maybe soon
• V8
  • WebAssembly
  • Native module API: mostly stable
  • Huge perf improvements
• No more new Buffer()
  • Has been deprecated since Node 6; existing security concerns (is that string param a string?)
  • Some kind of runtime deprecation in Node 10, tbd
• Streams
  • Currently: Lot of overhead, obnoxious complexity
  • New low-level streams API might be coming?
  • Large re-work on C++ side, goal is a C++-only fast path
• LTS
  • Node 4 only supported until 4/2018
  • Node 6 until 4/2019
  • Node 8 until 12/2019
  • Node 9 until 6/2018 — odd numbered releases dont get security releases for long
  • Node 10: April…ish?

react-async-rendering.md

React 16 - @dan_abramov

• Things being shown are not prod-ready yet, APIs will change, but uses a real build of React
• With vast differences in computer power and bandwidth, how do we deliver the best UX for everyone?
• Demo #1: React components slow down given sufficient complexity
  • Repaint clock to demonstrate lag
  • Typical solution: debouncing. But UX suffers unnecessarily, doesn’t adapt to performance of computer
  • (CPU throttling illustrates problem)
  • Asynchronous updating — less frequent updates but not as noticeable
  • Debouncing doesn’t help for large mounting/unmounting; blocks interatctions
• “Time slicing”: a generic way to ensure that high-priority updates don’t get blocked by low-priority
  • React doesn’t block thread while rendering
  • Feels synchronous or responsive based on device capability
  • Only final rendered state is displayed
  • Same declarative component model
• Demo #2: createFetcher (name isn’t final)
  • const movieDetailsFetcher = createFetcher(fetchMovieDetails)
  • Potentially fetch data in render; caching very possible
  • New future thing: this.deferSetState
  • New future thing: Placeholder
    • <Placeholder delayMs={1500} fallback={<Spinner />}><Component /></Placeholder>
    • Screen is always interactive — async rendering, non-blocking
  • New future thing: Loading
  • Can we avoid showing the page until an image is ready? Yep — code spliting, fetchers
• “Suspense”
  • Pause any state update until data is ready
  • Add async data to any component with “plumbing”
  • Explicitly design loading states for varying network speeds
  • Both high-level and low-level API
• Combined: “Async Rendering with React”
  • Adapt to user’s device and network
  • Fast interactions feel instant, slow interactions feel responsive

simplifying-with-statecharts.md

Simplifying Complex UIs with Finite Automata and Statecharts - @davidkpiano

• Talk set outside the context of any specific framework
• “music notation” for UIs
• Develop software with more than the “happy path” in mind — MSFT has 1.5 billion customers
• Dealing with increasing complexity for diverse use cases
• The bottom-up approach
  • Do all logic in an event handler; actions modify state
  • Code is difficult to test, difficult to grok, will be buggy (edge cases), difficult to enhance
• Realizations
  • UI components are not independent (at least to the user)
  • Actions are based on event and state — event-action paradigm is too simple
• Solution: finite state machines and statecharts
• FSM:
  • One initial state
  • Finite number of states
  • Finite number of events
  • Map of state transitions, triggered by events
• State machines are good for analytics/feature enhancement
• State machines are useful for integration testing
  • With analytics — learn actual happy paths
  • Use DFS to find/test all possible user flows
  • Race conditions are impossible
• npm install xstate
  • Purely functional
  • Can be used with visualization tools (just paste in JSON)
• Statecharts more useful as application feature complexity grows

webpack-4.md

Webpack 4.0 — @thelarkinn

• Known as “Webpack Legato” — came out this week
• Focus on:
  • Smaller, faster builds
  • Developer experience
• Faster builds:
  • Rebuilt “chunks”
  • UglifyJS out of the box
  • Objects/Arrays turned into Maps/Sets
  • Rewrote Webpack modules system — monomorphic code
  • 98% faster builds in Webpack 4
• Smaller builds
  • JSON tree shaking
  • package authors need can set sideEffects: false
• Developer experience - lower barrier to entry, smarter defaults, zero-config JS
  • Don’t need a config at all to run WB4
  • Production mode by default now
  • RIP CommonsChunkPlugin
• Modernization, re-architecture
  • JSON, WASM are first-class citizens
  • Drop Node 4 support = ES6 everything, optimize for V8