Home

Deploy to GitHub Pages

To deploy to GitHub Pages run npm run deploy. It uses the small useful script L33T-KR3W/push-dir: Push the contents of a directory to a remote branch.

Road Map

• Work on system design. How to separate different functionalities into different classes etc.
• Have an oscilloscope class
• Have a spectrogram class
• .
• For pitch tracker visualization: Start from right side. Shift towards left with each new window.

Done

• Trigger based on zero-crossing
• Try Google's material view css and materialize and bootstrap material design
• Import Web Audio API
• Get sound via microphone. navigator.getUserMedia()
• Play that sound
• Look at AnalyserNode - Web APIs | MDN. I guess that's the way of having a buffer to visualize and do FFT etc.

Development Resources

• Examples
  • Audio Visualisation with the Web Audio API
  • Web Audio tuner - Microsoft Edge Development
  • Record, Play, Download Microphone Sound With HTML5 - Subin's Blog
  • Microphone - Microsoft Edge Development !
    • Demos/microphone at master · MicrosoftEdge/Demos
• Web Audio API (WAA)
  • Web Audio API - Web APIs | MDN
  • Web Audio API (W3C Editor's Draft)
• CSS
  • Material Design Lite
    • MEYVN-digital/mdl-selectfield: Material Design Lite selectfield component (https://github.com/google/material-design-lite)
    • CreativeIT/getmdl-select: Select for material-design-lite
  • Documentation - Materialize
  • Material Design for Bootstrap
  • .
  • Metro UI CSS - The front-end framework for developing projects on the web in Windows Metro Style Microsoft's style
  • Welcome - Polymer 1.0 Google's advanced component framework
  • HTML KickStart HTML Elements & Documentation
  • Pure
  • .
  • Comparison between Bootstrap and Material Design frameworks - User Experience Stack Exchange
• Development tools
  • Browserify
  • Babel · The compiler for writing next generation JavaScript
• NPM, Node, Browserify, project structure
  • Using npm on the client side
  • Book of Modern frontend tooling I got the main idea for project folder tree from this article.
  • Starting the frameworkless JS project
  • Using browserify and watchify to improve your client-side-javascript workflow — /var/ Great explanation of browserify, uglify pipeline.
  • NPM is an amazing build tool | Lucas Reis' Blog Information about browserification of html and css files too.

Random wisdom:

- Babel needs a preset to be installed `npm install --save-dev babel-preset-es2015`
- [uglify\-js](https://www.npmjs.com/package/uglify-js) can't process es6. In release build the order of node development scripts should be `browserify > babel > uglify`.
- .babelrc is not working when babel is piped in between. Instead use `--presets es2015` option.
- When using watchify if you want to have some global variables in browser's developer console use `global` keyword(?) `global.global_variable_name = a_variable;`.
- [Material Design Lite](https://getmdl.io/styles/index.html) Font sizes for headers
- [kirupa\.com \- Resizing the HTML Canvas Element](https://www.kirupa.com/html5/resizing_html_canvas_element.htm)
- Deploy to `gh-pages` from a `dist` folder on the master branch. Useful for use with [yeoman](http://yeoman.io). https://gist.github.com/cobyism/4730490
- [L33T\-KR3W/push\-dir: Push the contents of a directory to a remote branch](https://github.com/L33T-KR3W/push-dir)

Misc

• ECMAScript 6 in WebStorm: Transpiling | WebStorm Blog File Watcher, Babel stuff for Pycharm.
• for...in - JavaScript | MDN
• Boolean - JavaScript | MDN
• Google JavaScript Style Guide
• Canvas API - Web APIs | MDN

Old Home