This is the instant notes of the conference flow
Some details are missing (and so do Caps), others just dropped for the sake of brevity
Or in favor of some more important details
If you have something to share - links, pics - comments at your disposal!
cool link or something important to take away (or just google it)
[... demo or background story that can't be expressed in text form]
npm has 4 million users
and billion(s) of downloads every week
npm != github
20% users not aware of the local cache
install npm and init project
npm i npm@lts -g
npm init --yes
don't write package.json manually, it's a bad practice
scopes
npm init --scope=username
for the big team
overriding npm init procedure
~/.npm-init.js
npm init can be re-run
install without dev dependencies
npm i --production
time-saver
npm i --save --save-bundle
offline installs
default is 10s
npm i --cache-min 999999
default scripts
npm
start
stop
restart
test
don't force users to install global tools
don't get conflicts over global tools versions
publishing
npm publish
--access=restricted
semVer
npm version
major
minor
patch
creates git tag at the same time
... -m "bump to the next version"
npm shrinkwrap
npm will install the exact versions
there is a replacement for this, since it is buggy...
clingwrap?
multiple users
(payed feature)
npm team
npm access
useful to work on big projects
npm link
multiple current versions apply at publish time
npm publish --tag
npm dist-tag
npm install pkg@tag
remove tag
npm dist-tag rm pckg tag
list tags
npm dist-tag ls pckg
apply tag on publish
npm dist-tag add pckg@ver tag
npm unpublish
unpublishing after 24 hours via support only!
alternative:
npm deprecate
still available for install, but user will get a message
npm outdated
npm update
.npmrc files
- per-project / per-user
- global
- built-in
it holds auth token, that used in CI for instance
babel - transpile all the things
webpack and browserify
greenkeeper.io - npm outdated in the cloud (as a service)
node security project check for vulnarable projects as deps
npm i nsp -g
nsp check
j.mp/js-mem-live
memory
- forces to be more inventive programmers
- memory is scarce
- it helps exercise our empathy muscles
manual memory management in C
huge cognitive load on the engineers
v8 allocates memory into 6 chunks or spaces
- new space (allocate on creation)
- old pointer
- old data space
- large object space
- code space (contains executable memory)
- map space
all about so forth - new and old spaces
GC traverses the memory
things that are not accesible is garbage
one of techniques for allocating garbage:
- halt the program
- short GC cycle
collecting in the new space is the scavenging
mark and sweep (blah-blah-blah)
applying things
- how much memory the application uses? - no certain answer
- how often GC runs in the application - check dev tools for that
dev tools
- heap allocation profiler - snapshots
npm install heapdump
heapdump
allows taking snapshot at your instance of the app
and load into dev tools for analysis
netflix will soon use https to secure video streams
2016 netflix over https and chill
TLS can be faster saving 1 request
motivation for http/2
its like http/1.1. on adderall
- binary instead of textual
- header compression
- servers can push responses
multiplexing!
does not have to wait for respond
- GET index.html
- GET styles.css, app.js, ...
how upgrade to http/2 - two ways
- plaintext http
- http only (chrome and firefox only)
setting up https is kinda painful
CSP - upgrading insecure request (fix the headers)
another way:
Certificate Authority
- created by: eff, mozilla, michigun university
- financed: cisco, akamai
- CA cross-signature IdenTrust
started in November 2015
3 millions certs issued
if you don't have a shell (bulk hosting)
- integration with akamai, wordpress
- get a cert old-fashioned way via the browser
hot to build encrypt interface
github/certbot ... interfaces.py
DIY:
git clone letsencrypt
cd letsencrypt
letsencrypt-auto --help
walmart:
1 second performance improvement - 2% of $482 billion increase in revenue
financial times:
- 2s longer loading -
-5.4% - 3s longer loading -
-7.9%
users click, buy and download more
gizmodo.com example - webperftest - ~20 seconds
but really about 1-2 seconds
weber-fechner law
Just Noticeable Difference
at least 20% faster makes a difference for the user perception
noticeable !== meaningful
[... audio-visual sync example]
180ms is not noticeable (controversial to 600ms), resolved by brain
preemptive start technique
- [... for the 916-th time ... baggage handling line in Houston airport...]
- another example - top hit feature on iOS
- background preload in Safari
early completion
- youtube (downloading example)
industry standards for optimization
- async
rel=prefetch- service workers
- etc...
can it be other way to do it?
we type we click we touch
what's next?
- gestures
- speech
interfaces evolve
- cli
- gui
- nui
- direct
- intuitive
human computer interaction - more natural and intuitive
NUI + JS = NUIJS
JS dominates the web today
[... augmented reality vr interfaces techonology evo]
advanced technology == magic (kinda Arthur C. Clarke)
architecture
- usb controller reads sensor data
- data is stored in local memory
- data is streamed to the sdk
links:
webacm-swiper js-objectdetect
there are 2 options two connect the device
- tcp protocol
- websockets
[...long demo that finally worked yay! thanks the stage lights!]
zalando is hiring!
these samples will basically apply to any js application
kickstarter link bit.ly/the-react-tutorial
simple db
db - crud - server - http - browser + react
react component for displaying data
command query
/ read - query service - http \
db browser + react
\ update - command service - http /
all we got is the current state
event sourcing comes in - to answer the question how the things got the way they are
idea of storing events and not the data transactions contain all needed info
[... henceforth follow complex flow diagrams]
projector service - projections db - read - query service - http - browser + react
- command service - update - events db - projector service
update the scheme with event pushing
events db - push service - web socket - browser + react
[... explanation how redux basically works in terms of reducers, stores and connecting state to the component]
[... mostly inspirational and engaging demo]
[... code of conduct, github harassment - revised]
[... rocking demo time]
hangover slot#1
accidental programmer, not caring about semicolon wars;;
book: Carl Sagan - contact
what does sound look like?
how we can visualize that?
find out via art (and web audio API)
recording sounds of NY subway
PCM is:
- raw audio data
- samples range from -1 to +1
- wav aiff au l16 pcm
audio data - hue - hsl to rgb - canvas
now we can see the sound
the problem is the simplest picture is 300k pixels
how to reduce that? what if we made a song?
average value of the 19000 samples
link to the demo of subway synth - haven't found :( - post in comments plz
composition:
- svg
- markup
- css animation
[... demo with adruino programmed speaker]
ok. but it's art
creative coding gets you out of the comfort zone
art is about exploration
you deserve a break from being judged
make some art
throw it away
it's just code
noopokat.github.io meow.noopkat.com
hangover slot#2
web vs native
native
- content is cached
- offline content remains
- poor or good connection - stale while revalidate
website
- offline - nothing
- server down - nothing
- poor connection - white screen
- goood connection - content
[... how it works on guardian.com]
service workers:
- run in a background
- no user interaction
- listen to push events
- intercept network requests
- future
- background sync
- geofencing
- alarms
- progressive enhancement
- chrome opera and ff supported
service-worker can be seen in dev tools section
prime the cache:
- install event
- cache the assets
- version the cache
handle requests with fetch
- default - just fetch
- override default
- intercept network request
- fetch from network
- read the cache
custom response: use templating to construct a html with json data
2 types of content:
- mutable: html
- immutable (sort of): css / js
network first, then cache
for the assets
if it's not html
- get them from the cache
- if it's not there try the network
versioning:
- check if cache is updated
- update the cache
- delete old cache
future plans for the guardian.com
- extend the experience - stale content, personalized content
- offline-first
improves the experience for the poor connection
problems
- bugs in chrome and firefox
- interleaving of versions in CDN cache
solution for the versioning bugs:
offline-page.json service worker manifest
github/slightlyoff
making the site load faster on the first run
1st step - measure what's going on
- dev tools audit
- pagespeed insights
webpagetest.org
makes it easier to spot FOIT
also calculates speedindex - how quickly the content is painted (viewable to the user)
- inspects TCP traffic
- identifies bottlenecks
- visualizes progress
recommendation is to automate measurement
not only one-time thing
via gulp
npm i psi -g
more data
npm i webpagetest-api underscore-api
and some more
npm i -D grunt-yslow
set a performance budget
what should I track?
timkadlec // performance-budget-metrics
- milestone time to first tweet
- speedindex
- request count...
- rule based metrics like yslow etc.
beyond minification
Ilya Grigorik high performance browser networking book
- optimize TCP - latest version of the OS!
- disable slow-start restart (SSR)
- optimize http
- keep-alive
- gzip all the text
- add expires and etag
- use a CDN
- https/2 & SPDY features
render server-side!
become a SPA later
css
- defer non-critical assets loading
- a11ble via
ARIA - inline critical CSS
- be responsive, avoid m.site
- follow a style guide
fonts
- load fallback fonts
- prevent FOIT using JS
- use fewer fonts
- cache fonts aggressively
images
- defer images below the fold
- spritesheets
- inlining tiny images
- css for simple icons
JS
- defer all js
- use small modules
- cache it all!
how???
- nginx
- set up a CDN
- shared rendering
- defer assets
- remove unused CSS
- inline critical CSS (leave only what is seen)
- use a font loader (
npm i fontfaceonload) - optimize images (
imagemin) spritesmithfor spritesheets- inline small images (
datauri) - module system (
babel,browserify)
perfschool
bevacqua.io/bf
nvisium company
white-side hacker
senior application consultant
best defense is offence
XSS - cross site scripting
- attacks users
- client-side injections
- bad exploits...
how does it work
- request from the hacker
- victim clicks the link
- scripts executing
relotnek/medcellar
[... demo with the localhost app]
how we attack apps on private networks?
CSRF attacks!
cross site request forgery
- "session riding"
- attacker send url to submit a form to a 3d party domain
- victim is tricked to use malicious link
[... demo with the published site]
but the whole logic is handled by the JSON requests, so this is not the issue
JSON POST is not completely safe
because if it's not specified the json format
it can accept other formats too
Browser exploitation framework
[... another demo of CSRF attack using exploitation]
when you come to a coffeeshop and see someone using kali linux pack your stuff and run away
how to fix this
- CSRF token
- Origin Header
- CSP Header
random !== cryptographically secure
problem with CSRF token - it's exposed as GET param
CORS vulnerability:
Access-Control-Allow-Origin: * <- BAD
useful links for different servers:
koajs/csrf
hapijs/crumb
expressjs/csurf
creating effects using JS
step 1 - get guitar sound into the browser
audioContext = new AudioContext()
navigator.mediaDevices.getUserMedia({ ... })
inputNode - audioContext.createMediaStreamSource(stream)
inputNode.connect(...)
step 2 - add effect to the guitar
volume
gainNode(0...1);
distortion
node = audioContext.createWaveShaper()
node.oversample = '4x';
node.curve = math
delay
node = audioContext.createDelay()
node.delayTime.value = 1
flanger
dynamic time of delay
node = audioContext.createOscillator()
node.type = 'sine'
node.frequency.value = 1000 // Hz
reverb
audioContext.createConvolver()
load the data and work with the buffer
There is a bunch of other nodes
- analyzer
- biquadFilter
- channelSplitter
- pannerNode
- compression
- ...
github/sambego/audio-effects
github/sambego/pedalboard
github/sambego/pedalboard-presentation
[... rocking demo time]
IBM research
Science backend (PhD stuff), then Ruby on Rails, later Angular...
anyrhyme.com
86 bln neurons in our brains
neuromorpho.org
build a simple tool to visualize how neurons look like > consume the text data
what do neurons do?
[... demo time with the application that illustrates neuron in 3D]
web is changing science in general
- visualizations
- cloud-based applications
[... weather application demo]
the best request is the request not being made
do as few requests as possible
- 1 js file, 1 css file
- sprites
- inlining stuff
http/2 removes multiple TCP connection, thus contracting the summary time of loading
2 is faster than 1.1
and is 2x faster on mobile, since it doesn't fight for latency multiple times
do not block rendering!
http/2 is an Engineering Opportunity
- get what you really need (only needed js files, only needed icons not the whole sprite)
- avoid excessive requests
consider frequency of change
- modules - frequent
- libs and libraries - time to time
but if the lib is a dependency, it makes more sense to update it as well
consider tree-shaking
import function instead of lib
- create components
- create small bundles
- code duplication is ok if the file stay on the client
- think about frequency of change and long lasting applications
use tools not rules
conference announcements:
@stahlstadtjs @scriptconf
collection of oddities
NaN
0/0 // NaN
typeof NaN // number
in fact it is a failure Number
NaN === NaN // false
there are many NaNs (> 16 millions)
null
type of null // object
be aware of different kinds of errors
Array.sort
lexicographical order
numbers = [80, 9]
number.sort() // [80, 9]
what is missing is a sorting function
~ - operator
is basically doing
-( N + 1 )
mainly used in ~myArray.indexOf(...)
for loops
for(;;){} === while(true){}
undefined
you can redefine undefined in old browsers
fixed in modern ones
undefined = 123;
console.log(undefined); // ?
non alphanumeric js
![] // false
!![] // true
+![] // 0
+!![] // 1
...
+{} // NaN
js scrabble
"false"[0] // "f"
jsfuck.com
jQuery Screwed
this creates vulnerability when used in client forms for instance (ebay as an example)
why?
knowledge is power, you should be aware
playing is learning
recommendation: If Hemingway wrote Javascript
[... didn't attend]
================================================================================
Thanks for reading!
https://github.com/XOP
================================================================================
- keep calm, read docs and wait for shrinkwrap to be fixed
- be aware of memory leaks, since GC is auto in JS; use devTools and heapdump for analysis
- while preparing for HTTP/2 get a free HTTPS certificate from here
- perceivable and meaningful performance is over 20% (of time) value, it's the law
- catch the high-speed train of VR and NUI today - leapmotion is a good start
- you can use events storing principle on different platforms, but for JS - redux is a way to go
- nodebots are pretty cool and feeding your cat over web even cooler
- please re-read this and contact Nick
- ?
- creative coding (and js-programmed hardware) gets you out of the comfort zone
- building an offline-first page is fun and a good place to start
- follow performance best practices, read a book, graduate from perfschool
- get to know XSS, CSRF and CORS good parts already
- grab a guitar, download these cool js-developed effects and insult your neighbors (or pet)
- web is changing science in general, thanks IBM
- consider http/2 an engineer opportunity, unbundle responsibly, best request is the one not being made
- encrypt web for $0 (this time for real)
- ?