Un-block an IP address on your server

Like so:

$ iptables -I INPUT -s "your_home_ip" -j ACCEPT

Posted in Musings | Leave a comment

One-liner to add .gitignore to all sub-directories

Git tracks files, not folders. So if you have a project with empty folders they won’t come with the repo when you clone a project. Run this in terminal to add a .gitignore file to all sub-directories of a project:

$ find . -type d -empty -exec touch {}/.gitignore \;

Posted in Musings | Leave a comment

FYI, You Can’t Store Objects in HTML5 Web Storage

The following won’t work, because sessionStorage and localStorage will only store strings:

var myObject = { bar: 'baz' };

sessionStorage.setItem('foo', myObject);
sessionStorage.getItem('foo'); // Returns '[object Object]'

localStorage.setItem('foo', myObject);
localStorage.getItem('foo'); // Returns '[object Object]'

Solution = JSON.stringify()

The solution is to stringify your object:

var myObject = { bar: 'baz' };

sessionStorage.setItem('foo', JSON.stringify(myObject));
JSON.parse(sessionStorage.getItem('foo'));
// Returns Object {bar: "baz"}

localStorage.setItem('foo', JSON.stringify(myObject));
JSON.parse(localStorage.getItem('foo'));
// Returns Object {bar: "baz"}

Posted in JavaScript | Leave a comment

Use Font Awesome on Yeoman AngularJS Projects

By default, the bootstrap-sass package uses a glyphicons png file for icons. This is a limited set of icons and I usually need more. Here’s how:

The 4.x.x Way

Updated 11/08/2013

  1. Bootstrap your project: $ yo angular myApp
  2. Install Font Awesome: $ bower install font-awesome --save
  3. Add Bootstrap to the top of main.scss
    • @import "bootstrap-sass/lib/bootstrap";
  4. Change the font path and add the Font Awesome CSS
    • $fa-font-path: "/bower_components/font-awesome/fonts";
    • @import "font-awesome/scss/font-awesome";

To summarize, here’s what the top of my main.css file looks like now:
@import "bootstrap-sass/lib/bootstrap";
$fa-font-path: "/bower_components/font-awesome/fonts";
@import "font-awesome/scss/font-awesome";

Things have changed a bit with the 4.0.3 release of Font Awesome. Along with slightly different file names, the biggest difference is in the html classes. You now have to include the “fa” class along with the name of the icon, like this:

<i class="fa fa-anchor"></i>

The 3.x.x Way

  1. Bootstrap your project: $ yo angular myApp
  2. Install Font Awesome: $ bower install font-awesome --save
  3. Add Bootstrap to the top of main.scss
    • @import "bootstrap-sass/lib/bootstrap";
    • @import "bootstrap-sass/lib/responsive";
  4. Change the font path and add the Font Awesome CSS
    • $FontAwesomePath: "/bower_components/font-awesome/font";
    • @import "font-awesome/scss/font-awesome";

To summarize, here’s what the top of my main.css file looks like now:

@import "bootstrap-sass/lib/bootstrap";
@import "bootstrap-sass/lib/responsive";

$FontAwesomePath: "/bower_components/font-awesome/font";
@import "font-awesome/scss/font-awesome";

Bonus!

If you just want the included glyphicons to work (which is broken out of the box currently fixed as of Generator Angular v0.4.0), you need to change the sprite path.

  1. Bootstrap your project with $ yo angular myApp
  2. Create an images directory in the app/ folder: $ mkdir app/images
  3. Download Twitter Bootstrap from here: http://twitter.github.io/bootstrap/
  4. Unzip the Twitter Bootstrap file you just downloaded and copy bootstrap/img/glyphicons-halflings.png and bootstrap/img/glyphicons-halflings-white.png to your project’s myApp/app/images/ directory
  5. Add these lines to the top of main.scss to change the sprite path:
    • $iconSpritePath: "/images/glyphicons-halflings.png";
    • $iconWhiteSpritePath: "/images/glyphicons-halflings-white.png";
  6. Then import bootstrap:
    • @import "bootstrap-sass/lib/bootstrap";
    • @import "bootstrap-sass/lib/responsive";

So the top of your main.scss file now looks like this:

$iconSpritePath: "/images/glyphicons-halflings.png";
$iconWhiteSpritePath: "/images/glyphicons-halflings-white.png";

@import "bootstrap-sass/lib/bootstrap";
@import "bootstrap-sass/lib/responsive";

Posted in Musings | Tagged | 6 Comments

Install Latest Unstable AngularJS Using Bower

By default, Yeoman’s Generator Angular sets up your app to install the stable version of AngularJS and it’s dependencies. But if you want the latest and greatest you have to use one of the many separate repos that nice people have created to store the unstable branches. Here’s a working bower.js file that fetches AngularJS version 1.1.5, along with some other useful unstable packages:

Updated 10/14/2013 thanks you Uri in the comments:

{
  "name": "myApp",
  "version": "0.0.0",
  "dependencies": {
    "angular": "~1.2.0-rc.2",
    "json3": "~3.2.4",
    "bootstrap-sass": "~2.3.1",
    "es5-shim": "~2.0.8",
    "angular-resource": "~1.2.0-rc.2",
    "angular-cookies": "~1.2.0-rc.2",
    "angular-sanitize": "~1.2.0-rc.2"
  },
  "devDependencies": {
    "angular-mocks": "~1.2.0-rc.2",
    "angular-scenario": "~1.2.0-rc.2"
  }
}

Save that file and run $ bower install to automagically update your app to AngularJS 1.1.5.

We’re not done just yet!

Added 10/14/2013

ngRoute is no longer bundled with Angular 1.2.x. So if you perform the above changes you will get an error like this:

Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to: Error: [$injector:unpr] Unknown provider: $routeProvider

To fix it, add angular-route to your project like this:

  1. Add the angular-route module to your project: $ bower install --save angular-route
  2. Include the script in your index.html file like this: <script src="bower_components/angular-route/angular-route.js"></script>
  3. Add the dependency to your project in app.js like this: angular.module('evaApp', ['ngRoute'])
  4. Add the angular-route.js script to the “files” array in karma.conf.js: 'app/bower_components/angular-route/angular-route.js',

Special thanks to Scotty.NET’s answer to this Stack Overflow question: http://stackoverflow.com/questions/18481863/failed-to-instantiate-module-injectorunpr-unknown-provider-routeprovider

Posted in Musings | Tagged | 8 Comments

Enable e2e Testing with Yeoman Generator Angular

The speed of development on all these tools is going so fast that this post is bound to be obsolete by the time I’m done typing, but end-to-end testing in AngularJS is too important to ignore. I want it now! And this how I got it:

1. Create a /test/e2e/ directory

I’m running two separate Karma instances, one for unit tests and one for e2e tests. Unit tests go in /test/spec/foo/myTest.js (and are automatically put there when you use commands like $ yo  angular:directive myDirective). Keeping the different types of tests separate seems like a good idea, so put your e2e tests in /test/e2e/myTest.js.

2. Configure karma.conf.js

I’m just gonna post the whole thing. Changes to default settings are in red:

// Karma configuration

// base path, that will be used to resolve files and exclude
basePath = '';

// list of files / patterns to load in the browser
files = [
  JASMINE,
  JASMINE_ADAPTER,
  'app/bower_components/angular/angular.js',
  'app/bower_components/angular-mocks/angular-mocks.js',
  'app/scripts/*.js',
  'app/scripts/**/*.js',
  'test/mock/**/*.js',
  'test/spec/**/*.js'
];

// list of files to exclude
exclude = [];

// test results reporter to use
// possible values: dots || progress || growl
reporters = ['progress'];

// web server port
port = 8080;

// cli runner port
runnerPort = 9100;

// enable / disable colors in the output (reporters and logs)
colors = true;

// level of logging
// possible values: LOG_DISABLE || LOG_ERROR || LOG_WARN || LOG_INFO || LOG_DEBUG
logLevel = LOG_INFO;

// enable / disable watching file and executing tests whenever any file changes
autoWatch = true;

// Start these browsers, currently available:
// - Chrome
// - ChromeCanary
// - Firefox
// - Opera
// - Safari (only Mac)
// - PhantomJS
// - IE (only Windows)
browsers = ['PhantomJS'];

// If browser does not capture in given timeout [ms], kill it
captureTimeout = 5000;

// Continuous Integration mode
// if true, it capture browsers, run tests and exit
singleRun = false;

3. Configure karma-e2e.conf.js

// Karma E2E configuration

// base path, that will be used to resolve files and exclude
basePath = '';

// list of files / patterns to load in the browser
files = [
  ANGULAR_SCENARIO,
  ANGULAR_SCENARIO_ADAPTER,
  'test/e2e/**/*.js'
];

// list of files to exclude
exclude = [];

// test results reporter to use
// possible values: dots || progress || growl
reporters = ['progress'];

// web server port
port = 9876;

// cli runner port
runnerPort = 9100;

// enable / disable colors in the output (reporters and logs)
colors = true;

// level of logging
// possible values: LOG_DISABLE || LOG_ERROR || LOG_WARN || LOG_INFO || LOG_DEBUG
logLevel = LOG_INFO;

// enable / disable watching file and executing tests whenever any file changes
autoWatch = true;

// Start these browsers, currently available:
// - Chrome
// - ChromeCanary
// - Firefox
// - Opera
// - Safari (only Mac)
// - PhantomJS
// - IE (only Windows)
browsers = ['PhantomJS'];

// If browser does not capture in given timeout [ms], kill it
captureTimeout = 5000;

// Continuous Integration mode
// if true, it capture browsers, run tests and exit
singleRun = false;

proxies = { '/': 'http://localhost:9000' };

urlRoot = '/__karma/';

 

4. Spool It up!

  1. Start your app in one terminal window: $ grunt server
  2. Start unit testing in another terminal window: $ karma start
  3. Start e2e testing in a third terminal window: $ karma start karma-e2e.conf.js
  4. Profit!
The three processes are watching for changes to your files; every time you save a file they will automatically run your test again and/or reload your browser. Pretty awesome!

 

References

http://docs.angularjs.org/guide/dev_guide.e2e-testing

https://github.com/meskallito/angular-yeoman-e2e-test-demo/blob/master/testacular-e2e.conf.js

Posted in AngularJS | Tagged | 2 Comments

Find the Size of Files and Directories in Terminal

du (Disk Usage) is a super handy command line tool to list file sizes.  Common usage goes something like this:

du -h /path/to/directory

Which recursively lists all files in the directory in human readable forms. These are the switches I find most useful:

du -skhc /path/to/directory

- c, –total
Produce a grand total
-h, –human-readable
Print sizes in human readable format (e.g., 1K 234M 2G)
-k
Use SIZE-byte blocks, equavalent to –block-size=1K
-s, –summarize
Display only a total for each argument
Posted in Musings | Tagged , | Leave a comment

Change Permissions Recursively

Change permissions on all directories, starting with folders contained in the current directory:

find . -type d -exec chmod 755 {} \;

Change permissions on all files, starting with files in the current directory:

find . -type f -exec chmod 644 {} \;

Posted in Musings | Tagged , | Leave a comment

Install Node on Ubuntu 12.10 as User

Update 7/31/2014: The good news is I can confirm this method still works on a fresh Linux Mint 17 “Qiana” install. However, you need to install the following dependencies first:

$ sudo apt-get install build-essential openssl libssl-dev pkg-config

OMG, this could be the first time I’ve ever been able to post a link to a how-to without a list of comments and addendums:

Node.js HOWTO: Install Node+NPM as user (not root) under Unix OSes

These instructions worked perfectly to install NodeJS and NPM on Ubuntu as a non-root user.  Huge props to Tom Novelli.  Respect.

Posted in Musings, Node.js | 1 Comment

Install Node.js v0.8.17 on Webfaction

First follow the instructions for “Installing the latest version of tar” and “Save the new PATH” here : http://dstvns.com/setting-up-nodejs-on-webfaction-revised/

When I followed those instructions, installing tar went fine, but installing Node failed.  Here’s how I made it work:

Install Node.js v0.8.17

  1. cd $HOME/src
  2. wget http://nodejs.org/dist/v0.8.17/node-v0.8.17.tar.gz
  3. tar -xvf node-v0.8.17.tar.gz
  4. cd node-v0.8.17
  5. Using your favorite editor, open the files configure and tools/install.py from the node-v0.8.17 directory. Change the first line #!/usr/bin/env python to #!/usr/bin/env python2.7
  6. alias python=python2.7 (Note: you can check your current version of python with python -V)
  7. ./configure --prefix=$HOME
  8. make
  9. python tools/install.py install

Win!

(Credit for step 9 goes to: http://orion98mc.blogspot.com/2012/08/two-hours-ill-never-get-back.html)

Uninstall Node.js

  1. rm -r ~/lib/node
  2. rm -r ~/bin/node
Posted in Node.js, Solutions, Webfaction | 1 Comment