ohanhi/JSConf Budapest 2015 raw notes

## JSConf Budapest 2015 raw notes
# Day 1

## Andre
## What if the user was a function?

## Martin Kleppe @aemkei
## Invisible Code

- ASCII map, Mandelcode
- jswtf stuff

- Crazy minification stuff
  -> <body id=b onload="alert(1)">
  -> <body onload="alert(1)"id=b>

- M4TR1X

- Having fun!


## Soledad Penades @supersole
## The disconnected ensemble

- Firefox OS 2 years later

- Brainstorming
  - streamline builds
  - rethink code structure
  - smarter phones, less intrusions
  - offline sharing updates <- no connectivity
  - context-awareness
  - ...P2P web
    - no necessary round-trip to cloud
    - WiFi direct in JS on phones

- P2P === SOCIAL

- Making Musical toys
  - Web Audio audio node
  - Web Components based UI
  - AudioNode works as a JS object
  - Custom Element attaches to AudioNode

- FXOS apps can do web servers
- mozWifiManager
  - get IP, status of network
- NFC solves the problem with typing IPs

https://github.com/sole/the-p2p-web


## Matthew Podwysocki @mattpodwysocki
## Async Javascript at Netflix
gh.com/mattpodwysocki/jsconfbp-2015

- Open Sourcerer @ Microsoft
- Works ~full-time on Reactive Extensions

### Netflix
- 1/3 of US broadband usage
- BIG async problems
  - Mem leaks
  - Race conds
  - Callback hell
  - Complex state machines
  - Disjointed error handling

- Callbacks make it hard to figure out where the program is going
- Events are just as hard to handle

- You can't cancel a Promise

- Observables make these things trivial


## Mikael Brevik @mikaelbrevik
## Functional UIs and unidirectional dataflow

- Olden days: We had complete static models of HTML
- Now we do updates of content on browser

- Referentially transparent functions
  - can be replaced by the result of the function
  - are predictable
  - sequence of ~ can be executed in any order (can be thought of as single func)
    -> composability
- Pure functions
  - don't change referential values (= accidental shared state)
- Immutability
  - setting returns _new obj_
  - reference check is enough for deep equality
- Composable components
  - stateless pieces of code
  - simple components can be composed together for more complex
- System as a function of state
  - all updates go through the "top of the tree"
  - state over time (going to a state thru serialization)
  - diffing -> do only changes that you need to


## Stephan Boennemann @boennemann
## 148,247 packages on npm

- "A package is a _solved_ problem"

- Dependency hell - updating breaks stuff

### SemVer
- x.y.z
- major.minor.patch

- patch - bugfix
- minor - new functionality
- major - breaking changes

- breaking.feature.patch

We fail to follow SemVer.

0.x.y
- Anything may change at any time
- Version number should not convey stability
- npm: use for exp. tag "next" for unstable vs. "latest"

- Emotional attachment to version numbers

- Versions are not for humans - names are.
- You should rename the project altogether rather than refrain going for 1.0 or 2.0 or ...

git.io/semantic-release


## Sebastiano Armeli @sebarmeli
## Enforcing code standards in JS projects

- Enforcing =/= negative
- Standards are good

- Automate - follow the rules _defined by your team_

### Ad
- Editor config
  - indents
  - eol
  - charset
  - trailing whitespace
  - newline at eof
- Lint
  - leaking vars, static checks, code style
  - JSLint: quality
  - JSCS: style -  max line length etc.
  - ESLint: quality and style - also custom rules
  - JSinspect
- Git commits
  - Angular commit standards
  - changelog automation
- Build tool
  - integrate tools into build
- Plato
  - on Jenkins build
  - complexity analysis
  - maintainability
  - LOC
- Automated release flow
- Setup script
  - pre-commit hook, post-merge hoook
- Documentation
  - Readme + contributing -> should be enough to start working
  - /doc - general advice (avoid var, use let/const)


## Julian Cheal
## Dancing with robots

- Cylon.js
- Johnny-Five

- Blinking a LED
  - or multiple LEDs
  - or an __array of LEDs__!!
- Sphero with socket.io
- Leap Motion: Harder Faster Stronger
- Parrot AR Drone using a PS3
  - or a DANCE MAT......
- __Angry Drones__
  - with Smart Pigs
- Drinkiebot
  - IoT drink serving


# Day 2

## Phil Nash @philnash
## The Web is getting pushy

- Web can do
  - geoloc
  - accelerometer
  - p2p video chat
  - perf?
  - push notification

- Live demo
  - Twitter api express app
  - Basic jQuery prepend stuff (real-time)

- Live demo 2
  - Notification.requestPermission()
  - new Notification (title, message)

- Service Worker
  - the application cache is a douche
  - not just for offline

```
self.addEventListener('push', (event) => {
  event.waitUntil(fetch())
})
self.addEventListener('notificationclick', (event) => {
  event.waitUntil(/* open page on click */)
})
```


## Pascal Precht @PascalPrecht
## Dependency Injection for future generations

"25 dollar term for 5 cent concept"

- Design pattern
  - object constructor: get all deps as params
  - can get unmaintainable soonish
- Framework
  - using an Injector to get deps
  - problems:
    - deps are served as singletons
    - sychronous by default
    - namespace collisions
    - built into the framework (Angular)

- DI in Angular 2
- _Injector  ->  Binding  ->  Object_

```
var injector = Injector.resolveAndCreate([
  Car, // bind(Car).toClass(Car)
  Engine, // bind(Engine).toClass(OtherEngine)
  Tires
])
var car = injector.get(Car)
```

```
bind(Engine).toAsyncFactory(/**/)
```

- both sync and async work
- no namespace collisions
- can be used standalone


## Liv Eriksen @misslivirose
## JS for Virtual Reality

- VR today
  - head mounted displays
  - Desktop: in essence you're attached to a table
  - Mobile: put your phone in a case, get a headset
  - Unity, Unreal Engine, _JS_

- WebVR
  - experimental API
  - specific Chromium builds & Firefox Nightly
  - Scene: Environment rendered thru WebGL
  - VRControls: listen for position changes -> camera
  - VREffect/-Polyfill: render for two side-by-side cameras
  - VRManager: device things
  - LIVE DEMO in ~ 20 LOC!
- VRManager.js
  - provides helpers for dealing with devices
- VREffect.js
  - create correct camera effect for certain device
- RiftSketch
  - Code Web VR while in VR mode
  - http://brianpeiris.github.io/RiftSketch
http://create.vizor.io

http://bit.ly/jsconfvr


## Fedor Indutny @indutny
## Diving into C++ internals of IO.js

http://jsconfbp.indutny.com

### A history on Git Blame

- JS Optimization
  - avoid "hidden classes"
  - avoid "polymorphism"
  - manual allocation

- Initial node.js
  - 1 file to setup V8 and cli args
  - HTTP server

- Next up
  - cpp separated from js for soc
  - ObjectWrap
  - move to CommonJS

(too fast slides to take notes)


## Sufian Rhazi @sufianrhazi
## Transform your code without breaking a sweat

- 1 million LOC of JS
- Code helps customers
  - how can we help our code?
- Asset pipeline
- Mental framework
  - Identify the change
  - Automate the transformation
  - Verify behavior
  - Clean up instrumented code

- Automate
  - Impossible with RegEx
  - Abstract syntax trees
    - Esprima can provide that
    - escodegen used for generating
- Verify
  - In test suites: create intentional errors
  - In prod: send beacons to server
  - Deploy two sets of code -> slow rollout
- Clean up
  - leave codebase in better state than you found it
  - make deprecation warnings for old behaviors

- Code must evolve
- Polyfills are better than shims
- Parsing and transforming is _easy and powerful_
- Test before prod
- Monitor production


## Jaume Sanches @thespite
## Getting -started- things done with three.js and WebGL

- Building 3D experiences
  - WebGL
    - based on OpenGL ES
  - three.js
    - threejs.org


## James Halliday @substack
## Anyone can edit

- What if anyone could edit anything?
- wikis as a data model
- tech features
  - activity feeds
- wikidb
  - non-conflicting data model
  - replication through websockets
  - studio.substack.net
  - ship.substack.net
- services
  - can be shut down / hacked
- How can we build services that nobody can own?
  - identity: you are your key
  - content-addressable data: integrity checking for free, links can't change
  - replication is easy: concatenate logs to replicate, allow several HEADs for each key
  - distributed hash tables
  - WebRTC
    - peer to peer connections in browser/node
    - peer introductions are tricky
  - peernet: gossip


## Anika Lindtner @langziehohr
## How to fix your community in one day

- the world is diverse
- diverse teams are more creative, innovative and productive than others
- capture greater share of market
- closed captioning for deaf people -> much more markets
- 50% of women leave tech
  - hostile work env
  - isolation
- women have to perform 2.5x better to be considered equal

What can we do?
- have empathy
- learn to give feedback

1.
- accept
- make bias conscious
- counteract

2.
- recognize
- mentor
- be a role model
- take a friend

3.
- cause disruption
- break stereotypes
	# Day 1

	## Andre
	## What if the user was a function?

	## Martin Kleppe @aemkei
	## Invisible Code

	- ASCII map, Mandelcode
	- jswtf stuff

	- Crazy minification stuff
	-> <body id=b onload="alert(1)">
	-> <body onload="alert(1)"id=b>

	- M4TR1X

	- Having fun!


	## Soledad Penades @supersole
	## The disconnected ensemble

	- Firefox OS 2 years later

	- Brainstorming
	- streamline builds
	- rethink code structure
	- smarter phones, less intrusions
	- offline sharing updates <- no connectivity
	- context-awareness
	- ...P2P web
	- no necessary round-trip to cloud
	- WiFi direct in JS on phones

	- P2P === SOCIAL

	- Making Musical toys
	- Web Audio audio node
	- Web Components based UI
	- AudioNode works as a JS object
	- Custom Element attaches to AudioNode

	- FXOS apps can do web servers
	- mozWifiManager
	- get IP, status of network
	- NFC solves the problem with typing IPs

	https://github.com/sole/the-p2p-web


	## Matthew Podwysocki @mattpodwysocki
	## Async Javascript at Netflix
	gh.com/mattpodwysocki/jsconfbp-2015

	- Open Sourcerer @ Microsoft
	- Works ~full-time on Reactive Extensions

	### Netflix
	- 1/3 of US broadband usage
	- BIG async problems
	- Mem leaks
	- Race conds
	- Callback hell
	- Complex state machines
	- Disjointed error handling

	- Callbacks make it hard to figure out where the program is going
	- Events are just as hard to handle

	- You can't cancel a Promise

	- Observables make these things trivial


	## Mikael Brevik @mikaelbrevik
	## Functional UIs and unidirectional dataflow

	- Olden days: We had complete static models of HTML
	- Now we do updates of content on browser

	- Referentially transparent functions
	- can be replaced by the result of the function
	- are predictable
	- sequence of ~ can be executed in any order (can be thought of as single func)
	-> composability
	- Pure functions
	- don't change referential values (= accidental shared state)
	- Immutability
	- setting returns _new obj_
	- reference check is enough for deep equality
	- Composable components
	- stateless pieces of code
	- simple components can be composed together for more complex
	- System as a function of state
	- all updates go through the "top of the tree"
	- state over time (going to a state thru serialization)
	- diffing -> do only changes that you need to


	## Stephan Boennemann @boennemann
	## 148,247 packages on npm

	- "A package is a _solved_ problem"

	- Dependency hell - updating breaks stuff

	### SemVer
	- x.y.z
	- major.minor.patch

	- patch - bugfix
	- minor - new functionality
	- major - breaking changes

	- breaking.feature.patch

	We fail to follow SemVer.

	0.x.y
	- Anything may change at any time
	- Version number should not convey stability
	- npm: use for exp. tag "next" for unstable vs. "latest"

	- Emotional attachment to version numbers

	- Versions are not for humans - names are.
	- You should rename the project altogether rather than refrain going for 1.0 or 2.0 or ...

	git.io/semantic-release


	## Sebastiano Armeli @sebarmeli
	## Enforcing code standards in JS projects

	- Enforcing =/= negative
	- Standards are good

	- Automate - follow the rules _defined by your team_

	### Ad
	- Editor config
	- indents
	- eol
	- charset
	- trailing whitespace
	- newline at eof
	- Lint
	- leaking vars, static checks, code style
	- JSLint: quality
	- JSCS: style - max line length etc.
	- ESLint: quality and style - also custom rules
	- JSinspect
	- Git commits
	- Angular commit standards
	- changelog automation
	- Build tool
	- integrate tools into build
	- Plato
	- on Jenkins build
	- complexity analysis
	- maintainability
	- LOC
	- Automated release flow
	- Setup script
	- pre-commit hook, post-merge hoook
	- Documentation
	- Readme + contributing -> should be enough to start working
	- /doc - general advice (avoid var, use let/const)


	## Julian Cheal
	## Dancing with robots

	- Cylon.js
	- Johnny-Five

	- Blinking a LED
	- or multiple LEDs
	- or an __array of LEDs__!!
	- Sphero with socket.io
	- Leap Motion: Harder Faster Stronger
	- Parrot AR Drone using a PS3
	- or a DANCE MAT......
	- __Angry Drones__
	- with Smart Pigs
	- Drinkiebot
	- IoT drink serving


	# Day 2

	## Phil Nash @philnash
	## The Web is getting pushy

	- Web can do
	- geoloc
	- accelerometer
	- p2p video chat
	- perf?
	- push notification

	- Live demo
	- Twitter api express app
	- Basic jQuery prepend stuff (real-time)

	- Live demo 2
	- Notification.requestPermission()
	- new Notification (title, message)

	- Service Worker
	- the application cache is a douche
	- not just for offline

	```
	self.addEventListener('push', (event) => {
	event.waitUntil(fetch())
	})
	self.addEventListener('notificationclick', (event) => {
	event.waitUntil(/* open page on click */)
	})
	```


	## Pascal Precht @PascalPrecht
	## Dependency Injection for future generations

	"25 dollar term for 5 cent concept"

	- Design pattern
	- object constructor: get all deps as params
	- can get unmaintainable soonish
	- Framework
	- using an Injector to get deps
	- problems:
	- deps are served as singletons
	- sychronous by default
	- namespace collisions
	- built into the framework (Angular)

	- DI in Angular 2
	- _Injector -> Binding -> Object_

	```
	var injector = Injector.resolveAndCreate([
	Car, // bind(Car).toClass(Car)
	Engine, // bind(Engine).toClass(OtherEngine)
	Tires
	])
	var car = injector.get(Car)
	```

	```
	bind(Engine).toAsyncFactory(/**/)
	```

	- both sync and async work
	- no namespace collisions
	- can be used standalone


	## Liv Eriksen @misslivirose
	## JS for Virtual Reality

	- VR today
	- head mounted displays
	- Desktop: in essence you're attached to a table
	- Mobile: put your phone in a case, get a headset
	- Unity, Unreal Engine, _JS_

	- WebVR
	- experimental API
	- specific Chromium builds & Firefox Nightly
	- Scene: Environment rendered thru WebGL
	- VRControls: listen for position changes -> camera
	- VREffect/-Polyfill: render for two side-by-side cameras
	- VRManager: device things
	- LIVE DEMO in ~ 20 LOC!
	- VRManager.js
	- provides helpers for dealing with devices
	- VREffect.js
	- create correct camera effect for certain device
	- RiftSketch
	- Code Web VR while in VR mode
	- http://brianpeiris.github.io/RiftSketch
	http://create.vizor.io

	http://bit.ly/jsconfvr


	## Fedor Indutny @indutny
	## Diving into C++ internals of IO.js

	http://jsconfbp.indutny.com

	### A history on Git Blame

	- JS Optimization
	- avoid "hidden classes"
	- avoid "polymorphism"
	- manual allocation

	- Initial node.js
	- 1 file to setup V8 and cli args
	- HTTP server

	- Next up
	- cpp separated from js for soc
	- ObjectWrap
	- move to CommonJS

	(too fast slides to take notes)


	## Sufian Rhazi @sufianrhazi
	## Transform your code without breaking a sweat

	- 1 million LOC of JS
	- Code helps customers
	- how can we help our code?
	- Asset pipeline
	- Mental framework
	- Identify the change
	- Automate the transformation
	- Verify behavior
	- Clean up instrumented code

	- Automate
	- Impossible with RegEx
	- Abstract syntax trees
	- Esprima can provide that
	- escodegen used for generating
	- Verify
	- In test suites: create intentional errors
	- In prod: send beacons to server
	- Deploy two sets of code -> slow rollout
	- Clean up
	- leave codebase in better state than you found it
	- make deprecation warnings for old behaviors

	- Code must evolve
	- Polyfills are better than shims
	- Parsing and transforming is _easy and powerful_
	- Test before prod
	- Monitor production


	## Jaume Sanches @thespite
	## Getting -started- things done with three.js and WebGL

	- Building 3D experiences
	- WebGL
	- based on OpenGL ES
	- three.js
	- threejs.org


	## James Halliday @substack
	## Anyone can edit

	- What if anyone could edit anything?
	- wikis as a data model
	- tech features
	- activity feeds
	- wikidb
	- non-conflicting data model
	- replication through websockets
	- studio.substack.net
	- ship.substack.net
	- services
	- can be shut down / hacked
	- How can we build services that nobody can own?
	- identity: you are your key
	- content-addressable data: integrity checking for free, links can't change
	- replication is easy: concatenate logs to replicate, allow several HEADs for each key
	- distributed hash tables
	- WebRTC
	- peer to peer connections in browser/node
	- peer introductions are tricky
	- peernet: gossip


	## Anika Lindtner @langziehohr
	## How to fix your community in one day

	- the world is diverse
	- diverse teams are more creative, innovative and productive than others
	- capture greater share of market
	- closed captioning for deaf people -> much more markets
	- 50% of women leave tech
	- hostile work env
	- isolation
	- women have to perform 2.5x better to be considered equal

	What can we do?
	- have empathy
	- learn to give feedback

	1.
	- accept
	- make bias conscious
	- counteract

	2.
	- recognize
	- mentor
	- be a role model
	- take a friend

	3.
	- cause disruption
	- break stereotypes