epiphanymachine

[epiphanymachine]

Learning Angular - Resources

In order to learn more about Angular I decided to use it in my current project. Until I created my seed rep I had never used angular before. In order to learn it I went through some tutorials like Angular's Phone Categories Application as well as reading a lot of random information on the web. I came across a few resources that I found to be the best and decided to share them with you.

The first is always the docs

Stack-Overflow for questions as always

ng-newsletter is a weekly newsletter all about angular. It included material for beginners and the more advanced alike. Example: How to get started

egghead.io is a great set of videos, especially if you are a beginner.

I have also heard from Ari Lerner one of the writers of the ng-newsletter that they are going to release some tutorials soon. The weekly newsletter shows the authors' in-depth knowledge of Angular. In addition it is well written and formatted, contains easy to follow sample code, and is generally helpful to people with all levels of knowledge. If the tutorials match the bar set by the newsletter they will be my first recommendation for anyone trying to learn Angular.

I have extensively used all of the resources mentioned above as well as a lot of other resources found from google and stackOverflow searches. Angular has a different way of doing things that will take some adjustment, I would recommend not using jQuery when you learn it as you should not do much DOM manipulation manually. Angular includes jQuery lite more info here. Additionally if something seems difficult or repetitive do a little research to make sure you are doing it "The Angular Way."

[epiphanymachine]

Seed Repo: Angular, Bootstrap, Coffee-Script, D3, Express, Grunt, Karma, Node, Stylus!

I was working on a larger personal project and decided to share my work, it is available on github. Grunt automates the tasks of compiling, watching, running the server. It integrates with LiveReload and uses Karma for unit and end-to-end tests which are also automated using grunt.

Original Repo Readme

I just found an awesome tutorial on Grunt for anyone interested.

Summary

I created this project because I wanted to use Angular with Coffee-Script and Bootstrap and I could not find a good seed project. I structured the directory in such a way that all files requiring compiling are stored in /src. Grunt is included to automate a lot of the tasks such as compiling. I also included an Express server that servers the static files from /app on http://localhost:4000.

This project combines into a prebuilt package:

Angular - MVW - lets you write client-side web applications as if you had a smarter browser.

Bootstrap - Sleek, intuitive, and powerful front-end framework for faster and easier web development.

Coffee-Script - a little language that compiles into JavaScript.

D3 - a JavaScript library for manipulating documents based on data.

Express - a minimal and flexible node.js web application framework.

Grunt - The JavaScript Task Runner

Karma - Spectacular Test Runner for JavaScript

Node - a platform built on Chrome's JavaScript runtime for easily building fast, scalable network applications.

Stylus - Expressive, dynamic, robust CSS

Quick Start

This will compile all required files to view the basic app page (from the angular seed project) and start a web server to view the app. If you run into problems visit the section about globally required node packages.

git clone https://github.com/EpiphanyMachine/seed.git

install global node dependencies npm install -g <package> for each: grunt-cli coffee-script karma stylus

cd seed

npm install - this will install all local dependencies as listed package.json file

grunt - this will run the default grunt task (compile, start server, watch for changes)

Navigate to http://localhost:4000 and if using livereload activate the extension

DO NOT EDIT ANY .JS or .CSS FILES!

These files should be written in Coffee-Script or Stylus.

All coffee and stylus files are stored in the /src folder. Grunt will compile these for you!

Included Libraries and Frameworks

Client

All packages have been minified, bootstrap is in .css not .less format.

Angular v1.0.7 from the Angular Seed Project

Bootstrap v2.3.2 ported into Bootstrap-Stylus

D3 v3

Node

Included Local Packages

To install the local packages run npm install in seed directory after cloning.

Express v~3.3.4

Grunt v~0.4.1

grunt-contrib-coffee v~0.7.0

grunt-contrib-stylus v~0.6.0

grunt-contrib-watch v~0.5.1

grunt-karma v~0.4.5

grunt-concurrent v~0.3.0

grunt-nodemon v~0.0.8

grunt-exec v~0.4.2

Required Global Node Packages (not included)

Coffee-Script

Grunt-CLI

Karma

Stylus

These can be installed globally using:

npm install -g [package]

How to auto compile live reload changes

See the browser extension how-to here Shortcuts Chrome Firefox

From the /seed directory run grunt this starts the default task (compile, start server, watch for changes)

Karma Overview

Karma can run unit and end-to-end tests. Please check out the information available on their site.

App code testing is done with Karma's unit tests. You will find multiple files in the testing directory related Angular here: seed/test/unit/*.

End-to-end (e2e) testing can also be done by Karma to test front end interactions with your application. You will find this testing file located in seed/test/e2e/scenarios.js

Both of these tests can be run automatically using grunt, see the section below for more information.

How to run karma tests

From the /seed directory run grunt test this starts the test task (compile, start test server, run karma once)

The included web servers

These are automatically started by grunt when needed, you do not need to manually run either of these servers.

The seed/scripts/web-server.js serves the seed directory which includes files required for testing. It can be accessed from http://localhost:8000.

The included express server seed/server.js only servers the seed/app which can be used to serve the application. It can be access from http://localhost:4000.

[epiphanymachine]

How to learn Machine Learning in 4 days.

This is an absurd task, I am aware of that. Why I know its possible is because myself along with some other exception students Hack Reactor spent 12-16 hours day for 4 days to accomplish this. Below is a basic plan we came up with in order to help anyone else start what we did.

I would not have been able to do this by myself, and I would recommend at least 4 people try this together. You will need to motivate each other, split up the learning and teach each other along the way.

One of the harder things to get this up and running is the environment with all the tools you need. I have a post on how to Set up a Machine Learning environment.

The H/R team: Me, Andrew Spade, Kyle Geppert, Felix Trippier, Max Malin, Zak Zibrat, Guy Morita, Tuhin Chakraborty, Bill Shelton

Introduction

How does your spam filter predict what emails to mark as spam? How does Google guess the traffic to the Giant’s game next week? How does Netflix make you movie recommendations? Machine learning is the art of using data to make predictions.

In this sprint you will be using records of survivors from the Titanic disaster and machine learning to create an algorithmic model capable of predicting whether a passenger lived or died, and what kind of things about a person would make them more or less likely to have survived ( for example, as women and children were given priority seating among the ship’s scarce lifeboats, they were much more likely to survive than other demographics).

Getting familiar with ML - Titanic survival prediction

What ML is & is not

is: using algorithms to analyze and train a large set of data to make predictions

is not: writing sentient AI which teaches itself

Understanding the basic concepts

Titanic Assignment

In this assignment, you’ll learn how to apply machine learning to predict who will lived and died on Titanic voyage. You will start using simple pivot tables and regression in excel. Then using Python to apply regressions and implementing one of the random forest algorithms.

Getting Started

Watch Introduction to ML video

Watch the videos in the Introduction section of the coursera ML course

Learn basic terminology (and make sure to look up any other words you don’t know along the way)

CSV

Dependent Variable

Model

Features

Training / Validation / Testing Data

R (data analysis, stats, graphics, machine learning prototyping)

Rattle (a GUI library for machine learning in R)

Problem Analysis

Understand the data by using excel, google spreadsheet or a similar tool (pivot tables can be used for this). Determine:

Percent of people who survived by sex

Percent of people who survived by class

Percent of people who survived by age

Any other information you think may be relevant or that will help you understand the data

Load rattle and get comfortable with its interface, choose a model

Load the data into rattle

Import the csv

partition the data into training / validation / test sets

choose the target column (data you want to predict)

Visualize the data using rattle’s tools on the explore tab

Explore the options for each section

at a minimum use the Explore → Interactive → Latticist

Try to find a view to support the conclusions you came up with during the problem analysis section above

Explore the models available in rattle

Why are there different types of models?

When would you use each type?

Run multiple models and look at the data

understand what AUC (area under the curve) means

compare different model’s AUCs to see which may be better for your data

Choose a model to evaluate your data with

Once you have chosen a model, evaluate how well the model works on your validation data

Become familiar with the Evaluate Tab

In the Data section, choose validation. This will run your model on the validation data

Evaluate the testing data using the model you chose above

Choose type: Score, Data type: csv: test.csv

this will output a file in CSV format.

compare this to the answer.csv file to check the accuracy of your model.

Higher Level Concepts:

Watch the coursera ML Regularization (week 3) - The problem of overfitting (10 min)

you can ignore the mathematical equations in the video, but you should understand the high level concept of overfitting and how to fix it

Watch the coursera ML Advice for Applying Machine Learning (week 6) - Model Selection and Train / Validation / Test sets (12 min)

understand why you need train / validation / and test data sets and how they help solve the overfitting problem

Getting more advanced

Coursera Course

Kaggle TItanic - all the tutorials

Research a layout of the Titanic and use it to engineer at least two completely unique features

Go through the Scikit-learn tutorial

Check out NLTK - Natural Language Toolkit

[epiphanymachine]

How To: Setup a Machine Learning Environment

This can be hard to do on both windows and osx so I would recommend a linux distribution such as Ubuntu running in a virtual machine such as VirtualBox

Once you are at a competency level where the degraded performance of virtual system is inhibiting your ML code then install it natively or better yet switch to Linux Mint as your main OS!

Download a virtual machine

Download ubuntu 64 bit iso

Create a new VM and install ubuntu

Install from Ubuntu Software Center (GUI or CLI or PIP**)

* python * python-scipy * python-numpy * python-sklearn * python-nltk * python-pandas * python-matplotlib

install Rstudio, R, Rattle

Install from Ubuntu Software Center (GUI or CLI)

wajig

from commad line run: wajig install libgtk2.0-dev libxml2-dev

r-recommended

r-base-dev

rstudio (or from http://www.rstudio.com/ide/download/)

spyder

Open Rstudio

install.packages("rattle")

library("rattle")

rattle()

if you need more info on getting rattle to work: http://rattle.togaware.com/rattle-install-ubuntu.html

** Python PIP - A python package manager from Ubuntu's package manager python-pip

[epiphanymachine]

debugging Node.js App with Chrome dev tools!

Aug 26th 2013 Updates****

the main branch is the most current again as of Aug 20th 2013

there are also updates to the readme that include a lot what I wrote below:

1. install node-inspector

npm install -g node-inspector

2. don't use port 8080 in your node app (this port is used by node-inspector)***

3. start your app using

node --debug-brk app.js

this starts node in debugging mode with a break at line 1

4. start node inspector

node-inspector

this will output a url, open that url in your browser

5. use chrome debugging tools!!

notes:

you can use debugger or breakpoints as normal

no jasmine-node support...

this main app is no longer supported, and I suggest using the fork linked to above

autorestart node-inspector when you hit an error using these commands:

until node-inspector; sleep 1; done

*** if you want to use port 8080 for your node server you can change the port that node-inspector uses

--web-port=[port] port to host the inspector (default 8080)

**** Updated from:

as of july 2013 this fork is the best: strongloop/node-inspector

Thanks to Jake for posting this code in the comments!

[epiphanymachine]

Learning Hash Tables

This is my writing ^

Today I learned about hash tables and how to implement them! Its only my fifth day at HackReactor and I learned something taught in 201: Data Structures… I’d say I’m making good progress.

Basic Constraints: Reduce is under 25% of indices used, expand if over 75%

Starting with 4 (larges before you have to reduce by above rules) here are the steps I plan write in my code:

dog: happy

car: red

bike: fast

cat: furry

snake: brown

1. store(dog, happy)

hash (dog, 4) - returns 2

check storage[2] for items

if no items store and iterate storage count

- if storage count is over 75% of storage.length expand table

if item array is stored check for the key in the array at index 2

 - if found, overwrite value

 - if not found store key and value as an array 

2. store(car, red) (hash = 0)

3. store(bike, fast) (hash = 2) - this is the second element in index 2

4. store(cat, funny) (hash = 1)

this stores item at index 1 and makes the count go over 75%

** need to expand hash table

set storageTemp = storage;

set storage = new array with double the length (8)

iterate over storageTemp for every key, value pair

 - rehash with new limit (8)

 - store at new index given

set storageTemp = undefined (to garbage collect the array)

I know there are tons of ways to optimize hash tables and I plan to research these, but seeing as how I just learned what a Hash Table was today, that will be an adventure for another time.

[epiphanymachine]

wtf is 'THIS' and how do I use it in JavaScript?

So the keyword this is used everywhere in javascript.  It is confusing and people that have used it for years can't articulate well what it refers to all the time.

Here is a simple rule to learn:

'this' refers to what is left of the dot AT CALL TIME

Here are some examples of different invoaction methods. They all follow the 'this' rule!

Method Invocation

'this' - The object to the left of the dot AT CALL TIME of the function referencing 'this' obj.fn = function() { console.log(this); } obj.fn() obj foo.bar.fn() =bar - only obj to the left of the dot at call time which is the last dot var x = {fn: obj.fn}; x.fn() = x - always item to the left AT CALL TIME

Free Function Invocation

'this' - global execution will bind to window var fn = obj.fn; fn() = window - fn() is the same as window.fn() setTimeout(obj.fn, 0); = window - this gets passed in as a variable so there is nothing left of the dot inside setTimeout so this refers to window console.log(this) = window

Constructor Invocation

'this' - A brand new object created to be an instance var inst = new fn() .call or .apply Invocation 'this' - first argmument fn.call({}); {} - call binds "this" to the first argument passed into call fn.apply({name: 'bob'}) = {name: 'bob'}

[epiphanymachine]

To add syntax highlighting to your Tumblr blog easily, use Google’s prettify script. Edit your blog settings and click on the Edit HTML link. Then add this line of code to the HEAD section.

<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>

Then...