Fabien Benetou's PIM | Tools / JavaScript

General

require('fs').writeFileSync('/tmp/test-sync', repl.repl.lines.join('\n'))
key objects
- document
  - The Document interface represents any web page loaded in the browser and serves as an entry point into the web page's content, which is the DOM tree. The DOM tree includes elements such as <body> and <table>, among many others. It provides functionality global to the document, like how to obtain the page's URL and create new elements in the document.
- Window
  - The window object represents a window containing a DOM document; the document property points to the DOM document loaded in that window. A window for a given document can be obtained using the document.defaultView property.
- Screen
  - The Screen interface represents a screen, usually the one on which the current window is being rendered. Usually it is the one on which the current window is being rendered, obtained using window.screen.
- Navigator
  - The Navigator interface represents the state and the identity of the user agent. It allows scripts to query it and to register themselves to carry on some activities. A Navigator object can be retrieved using the read-only window.navigator property.
map()/reduce()/filter() to work on arrays
- map(Number) as shortcut to map(function (v){ return parseInt(v)} )@@
- grep-like 1-liners
  - urls.filter(url => url.match(/regex/) )
  - lines.filter(line => line.includes('substring') )
... or Spread operator
remove JS debugging vorlonjs.io
(�) donated to JSBin and CodeMirror
_. or lodash.com
Array.prototype.findIndex() on MDN
using Array.prototype.forEach on arrays in order to solve scope problems (also cleaner)
multiple callbacks defined serially
- cf using .load ( url, onLoad, onProgress, onError ) for https://github.com/Utopiah/vAtelier/blob/master/)graph.js

Deep Foundations of Advanced JavaScript

compilation proper reminder with passes
- client side https://developer.mozilla.org/en-US/docs/Mozilla/Projects/SpiderMonkey/JSAPI_User_Guide
- server side https://nodejs.org/api/cli.html#cli_e_eval_script
- packaging http://enclosejs.com/
feature support https://kangax.github.io/compat-table/es6/
- should see the intersection with https://caniuse.com/#search=webvr
scope https://github.com/getify/You-Dont-Know-JS/blob/master/scope%20&%20closures/README.md#you-dont-know-js-scope--closures
strict mode https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode

Vue.js

workshops
- http://aurelien-loyer.fr/handson-vuejs/
  - issues with installation
- https://github.com/jayway/vue-js-workshop
  - tried instead
https://vuejs.org/v2/guide/reactivity.html
- relying on https://developer.mozilla.org/en/docs/Web/API/MutationObserver
example with AFrame (deprecated)
- https://codepen.io/cheapsteak/pen/dGXZjx?editors=101
https://alligator.io/vuejs/rest-api-axios/

WebExtension

Pebble.js

CloudPebble requires an an icon (even sample code fails because of that)
- upload 18x18png then load it in project settings then compile, required even for old projects
chat moved to Discord
own work
- https://github.com/Utopiah/PebblePIM
  - going back main.hide() possibly with setTimeout, Pebble.getWatchToken()
- https://github.com/Utopiah/PebblePIM-Consult
  - ajax(), Pebble.OpenURL(), UI.Menu()
- https://github.com/Utopiah/vAtelier/tree/master/WatchInterface
  - websocket : var ws = new WebSocket('ws://...'); , ws.onopen/ws.onmessage , ws.close()/ws.send()
  - vibration: Vibe.vibrate('long')
  - Accel.on
- ideas
  - gym game where using a smartwatch ones creates more enemy for the other the faster (or more regular) he runs and vice versa
  - cf https://developer.pebble.com/guides/events-and-services/health/ only in C for the moment
See also
- https://developer.getpebble.com/docs/pebblejs/
- https://github.com/pebble-hacks/js-configure-demo/blob/master/src/js/pebble-js-app.js

Node

Personally discovered in 2010 via Ryan Dahl.

to keep the invention on principle short feedback loop going http://nodemon.io
- to keep it running despite crashes https://github.com/foreverjs/forever
organised few private Node brunches in Brussels in late 2015
http://www.nodebeginner.org
WebWorkersCampParis#NodeJS

React

https://facebook.github.io/react-vr/
- with hot reloading capability
- the scene seems to be the camera
- using flexbox for layout
  - ability to layout within a 2D plane
  - details on flexbox https://leanpub.com/learnreactvr/read
- introduction https://facebook.github.io/react-vr/docs/react-vroverview.html
  - props/stats/mounting
- howto make own https://github.com/SpectivOfficial/live-tour-lab#create-new-react-vr-component
- community created components
  - https://github.com/mathdroid/react-vr-with-awareness
  - https://github.com/Centroida/CentroUI
- main dev
  - https://twitter.com/immediatedelay
  - https://twitter.com/amberroyVR but now on OculusGo
- community
  - https://twitter.com/nikgraf
    - his https://github.com/nikgraf/awesome-react-vr#frameworks-and-components
  - own event https://www.meetup.com/VR-LAB-Brussels/events/239406115/
  - chat #react-vr on https://www.reactiflux.com (~1600 persons)
https://www.codecademy.com/articles/react-setup-v
Official tutorial
- ~~Own progresses on the tutorial~~ done
- Wikipedia:Immutable object
react devtools
- https://addons.mozilla.org/en-US/firefox/addon/react-devtools/
Q&A
- vs AngularJS?
- vs default templating system of Django? Flask?

ThreeJS

Motivated by 3DVisualization

WireIt

http://neyric.github.com/wireit/guide.html
- but not working on touch devices
  - using MouseOn and not TouchOn or an abstraction

To explore

https://deno.land
CodeMirror code base
- motivated by SundayGeekBrunch2016InventingOnPrinciple
D3js
- cf http://blockbuilder.org/search#text=webgl;api=layout.force intesting for Wiki found via Navigating the d3 ecosystem
http://console2.mozdev.org
php.js high-level PHP functions to low-level JavaScript platforms
http://jsfiddle.net
- e.g. http://jsfiddle.net/zXZ6x/4/ running the game framework http://enchantjs.com
http://learn.jquery.com/
http://www.codecademy.com/tracks/javascript (appears to be mostly about the basics of programming)
beyond basics with CoffeeScript, Backbone.js and Node.js http://www.codeschool.com/paths/javascript

To do

add notes on frameworks used
- JQuery
- Prototype and Scriptaculous
learn how to efficiently load JSON to handle Processing properly
- splitting datasource/selected data/rendering
- see also BSON
improve bindings for Vimperator
- we for multiple wiki engines (not just PmWiki)
- ww/I cleaning know websites (e.g. Wikipedia transformed to intermap format)
discover toSource();

Note

My notes on Tools gather what I know or want to know. Consequently they are not and will never be complete references. For this, official manuals and online communities provide much better answers.

Java Script {Tools}