METAA IDENTITY TOOLS

see the METAA_Identity-Proposal.pdf document beautifully devised by EVERYDAY MON –––

JS

• web
• easier for menus & tooling
• ...

thi-ng umbrella
...

NODE

• packages (via npm, yarn)

Install Node on macOS with Homebrew:

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
brew install node

Homebrew
Node
...

CRA

• use react-scripts without using react itself
• autoconfig (webpack, babel, ...)
• modern js (ES6, import, ...)
• server (> http://), production build
• hot reloading, error logging, css autoprefixing
• ...

npx create-react-app my-app
cd my-app
// start
npm start
// stop
control+c

Create React App
boilerplate example
ES6 ES6 import
...

P5

• we love Processing !
• quick start
• svg export built-in
• use it as a canvas renderer
• ...

npm install --save p5

p5js
the coding train
...

API

Declarative architecture : the system api describes final states, animation comes later.

Try to keep state mutation and rendering functions outside of objects in a functional fashion, as much as possible.

• ui = function(state)
• functional programming
• inside object > get but don't set
• factory functions over classes, thanks romain for pointing this out !
• composition over inheritance, compose objects by what they do rather than by what they are

How to UI in 2018
Mostly adequate guide to FP (in javascript)
Factory Functions in JavaScript
JavaScript Factory Functions with ES6+
Composition over Inheritance
...

IDEAS

• viewport size responsive
• snapshot/state builder
• spring animation
• movement recorder
• ...