Scaffold an AngularJS App with Yeoman

Notes from this morning's scaffolding an AngularJS with Yeoman demo at AngularJS training session at Development Innovations in Phnom Penh. It follows the fantastic Let's Scaffold a Web App with Yeoman code lab tutorial.

Yeoman makes web developers productive by generating basic application directories and writing various configuration files. Grunt and Bower are used for build and package management.

Yeoman is installed using Node package manager (npm). In this post I install Node.js using Node version manager (NVM) tool . You can also install npm via package manager of your operating system.



# Run the Node.js version manager(NVM) Installation script 
$ curl https://raw.githubusercontent.com/creationix/nvm/v0.17.3/install.sh | bash

# Active the Node.js version manager (NVM) 
$ source ~/.nvm/nvm.sh

# Install the stable version of Node.js 
$ nvm install v0.10.32

# Install Yeoman 
$ npm install -g yo 

# Install the AngularJS generator.
$ npm install install -g generator-angular


# Let's create a directory for our TODO AngularJS app and change directory into it.
$ mkdir todo 
$ cd todo 

# Scafold AngularJS  App
$ yo angular 

# The AngularJS generator following directory structure 

$ tree -L 1 -a 
.
├── app
├── bower_components/
├── bower.json
├── .bowerrc
├── .editorconfig
├── .gitattributes
├── .gitignore
├── Gruntfile.js
├── .jshintrc
├── node_modules/
├── package.json
├── test
└── .travis.yml

# Start the development server. 
$ grunt serve  

# Additional packages can be fetched and installed using bower.
$ bower install --save jquery-ui

# Let's build your code 
$ grunt 

# One final check before deployment. Serve the production server. 
$ grunt serve:dist




3D scanning with mobile phone

You got a 3D scanner in your pocket right now. It's your mobile phone. The innovative 123D Catch application let's you turn ordinary photos into 3D models. You can edit these 3D models and print it with a 3D printer. The 123D Catch is available for iPhone, Android, Windows PC and web app (Works only in Google Chrome).



Go forth and 3D capture the world around you.


Troubleshooting

Looks the services was down during the weekend. Login page spewed the following error. Now the service is back online.


{"CODE":100,"STATUS":500,"MESSAGE":"Internal server error | URL Parameters:afc=PA1ON1&locale=en-US&ssl=true&relative_redirect_path=/login-redirect","DATA":{},"ERROR_ID":"175e100e-e932-4e37-81aa-bab52ec0ae5c"}


Node.js Version Manager (nvm) Alternative Node.js installation on gnu/Linux

The Node.js packages distributed by gnu/Linux distributions tends to be out of date. If you looking for an alternative method for installing Node.js on gnu/Linux. Then Node Version Manager (nvm) is a good choice. This simple bash script lets you install and manage multiple active node.js versions.

You can download Node Version Manager(nvm) from the projects github page. Digital Ocean community site has a good getting started tutorial for Node Version Manager (nvm).

Installing Node.js Version Manager (nvm)


# Download and the installation script
$ curl https://raw.githubusercontent.com/creationix/nvm/v0.17.2/install.sh | bash

# Activate nvm (You might want to add this line to your .bashrc or .profile file)

$ source ~/.nvm/nvm.sh 

# Discover other installable versions of Node.js 
$ nvm ls-remote 

# Install the stable version of Node.js 
$ nvm install v0.10.31

# Install another version of Node.js
$ nvm install v0.11.13

# Check the installed versions of Node.js 

$ nvm ls 
->  v0.10.31
    v0.11.13
      system

# Use v0.10.32 version of npm 
$ nvm use v0.10.31 

# Run using particular version Node.js 

$ nvm run 0.11.13 

# Alternatively use Node.js installed by your package manager 
$ nvm use system 

Micro SIM card adapter

Eating your own dog food or Dogfooding in technical parlance means the software maker uses their own software thus appreciate its strengths and weaknesses (and hopefully improve on those.)

Usually I dogfood multiple mobile phones running early releases of Cyanogenmod and Firefox OS. Doing this is easy when you have multiple SIM cards. But if you have to swap your SIM card between Nexus 4 (micro-SIM) and Firefox OS device (mini-SIM) then you'll love this inexpensive Nano SIM adapter from NooSY.



Noto Fonts Update

Google Internationalization team released new update of Noto Fonts this week. The update brings numerous new features enhancements. Please read the project release notes for the full list of changes.

You can preview the fonts and download them at google.com/get/noto.

Google Noto project logo

Testing fonts on Firefox OS device

It is very simple to test the Noto fonts on a Firefox OS device. Just copy the the font files into /system/fonts folder and reboot the device. Don't forget to back-up the existing fonts on device first.

Am writing this blog post in Bangkok, So I am going to use Thai Noto fonts in these instructions. Connect your Firefox OS device to the computer with a USB cable. Make sure to turn on developer settings to enable debugging via USB.


# Backup the existing Thai font
$ adb pull /system/fonts/DroidSansThai.ttf  

# Remount the /system partition as read-write
$ adb remount /system 

# Remove the font on the device
$ adb shell rm  /system/fonts/DroidSansThai

# Unzip the previously downloaded Thai font package
$ unzip NotoSansThai-hinted.zip 

# Push to Firefox OS device 
$ adb push NotoSansThai-Regular.ttf /system/fonts

# Reboot the phone. Test your localization by selecting your language 
#in Language settings menu or navigating to local language webpage with browser app.
$ adb reboot


Wait, All I see is Tofu?

If you see square blocks (lovingly referred as Tofu) instead of characters, that means the font file for your language is missing. Please double check the steps, if everything fails restore the previously copy of your font file.

What is Font Tofo, firefox OS screenshot

Happy Hacking!