Friday, March 4, 2016

Tools for Adaptive / Responsive Mobile Web development

Node.js


Install Node.js' package ecosystem, npm, (v5.7.1 stable as of this writing)
https://nodejs.org/en/

Node.js was installed at

   /usr/local/bin/node

npm was installed at

   /usr/local/bin/npm


Make sure that /usr/local/bin is in your $PATH.

$ node -v
v5.7.1


$ node
>
console.log('Hello World');
Hello World
undefined
>
(To exit, press ^C again or type .exit)
>
$

$ npm search
npm WARN Building the local index for the first time, please be patient
▄ ╢░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░╟



Bower

$ npm install -g bower
npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules

$ sudo npm install -g bower

/usr/local/bin/bower -> /usr/local/lib/node_modules/bower/bin/bower
/usr/local/lib
└── bower@1.7.7 


jQuery


$ bower install jquery
bower not-cached    git://github.com/jquery/jquery-dist.git#*
bower resolve       git://github.com/jquery/jquery-dist.git#*
bower download      https://github.com/jquery/jquery-dist/archive/2.2.1.tar.gz
bower extract       jquery#* archive.tar.gz
bower resolved      git://github.com/jquery/jquery-dist.git#2.2.1
bower install       jquery#2.2.1


jquery#2.2.1 bower_components/jquery

Angular Material


$ bower install angular-material -D
bower not-cached    git://github.com/angular/bower-material.git#*
bower resolve       git://github.com/angular/bower-material.git#*
bower download      https://github.com/angular/bower-material/archive/v1.0.6.tar.gz
bower extract       angular-material#* archive.tar.gz
bower resolved      git://github.com/angular/bower-material.git#1.0.6
bower not-cached    git://github.com/angular/bower-angular.git#^1.4.8
bower resolve       git://github.com/angular/bower-angular.git#^1.4.8
bower not-cached    git://github.com/angular/bower-angular-aria.git#^1.4.8
bower resolve       git://github.com/angular/bower-angular-aria.git#^1.4.8
bower not-cached    git://github.com/angular/bower-angular-messages.git#^1.4.8
bower resolve       git://github.com/angular/bower-angular-messages.git#^1.4.8
bower not-cached    git://github.com/angular/bower-angular-animate.git#^1.4.8
bower resolve       git://github.com/angular/bower-angular-animate.git#^1.4.8
bower download      https://github.com/angular/bower-angular-aria/archive/v1.5.0.tar.gz
bower download      https://github.com/angular/bower-angular-messages/archive/v1.5.0.tar.gz
bower download      https://github.com/angular/bower-angular-animate/archive/v1.5.0.tar.gz
bower download      https://github.com/angular/bower-angular/archive/v1.5.0.tar.gz
bower extract       angular-aria#^1.4.8 archive.tar.gz
bower resolved      git://github.com/angular/bower-angular-aria.git#1.5.0
bower extract       angular-messages#^1.4.8 archive.tar.gz
bower resolved      git://github.com/angular/bower-angular-messages.git#1.5.0
bower extract       angular-animate#^1.4.8 archive.tar.gz
bower resolved      git://github.com/angular/bower-angular-animate.git#1.5.0
bower extract       angular#^1.4.8 archive.tar.gz
bower resolved      git://github.com/angular/bower-angular.git#1.5.0
bower install       angular-material#1.0.6
bower install       angular-aria#1.5.0
bower install       angular-messages#1.5.0
bower install       angular-animate#1.5.0
bower install       angular#1.5.0
bower no-json       No bower.json file to save to, use bower init to create one

angular-material#1.0.6 bower_components/angular-material
├── angular#1.5.0
├── angular-animate#1.5.0
├── angular-aria#1.5.0
└── angular-messages#1.5.0

angular-aria#1.5.0 bower_components/angular-aria
└── angular#1.5.0

angular-messages#1.5.0 bower_components/angular-messages
└── angular#1.5.0

angular-animate#1.5.0 bower_components/angular-animate
└── angular#1.5.0

angular#1.5.0 bower_components/angular


Test Angular Imports

I am following this tutorial:
https://github.com/angular/material-start/tree/es5-tutorial

  • Open Brackets editor
  • Try to import all the basic scripts
  • and run log.debug to console






  • Open this HTML in Chrome, 
  • right click to inspect 
  • and select Console





Start Developing







I got KIWI SVG image from here:
https://css-tricks.com/using-svg/




If you like this post, please give me your 2 cents ($0.02 litterally) to show token of appreciation and encourage me to write more:

Donate Bitcoins