Judy Ngai

code walkthroughs and looking for opportunities

Learning AngularJS From My Experience

Wow I spent three weeks on angular.js and so far it has been an amazing ride ! I really recommend angular.js. Its perfect for prototyping a web application because the client can see it working. Angular.js needs a lot of javascript. You need to know javascript before heading to angular.js. Obviously besides prototyping you can eventually hook up the back side with a framework/database of your choice. It is compatible with almost all server side frameworks like django, rails, sinatra etc.

I really recommend you to get started with the angular seed project. Git clone it down from github and start hacking,

https://github.com/angular/angular-seed

The angular seed project comes with an awesome file structure. You should follow its lead when you are building your angular js app. There is also another project built off from angular seed and its called angular sprout, I did not use it so I can’t comment on it but its another option.

https://github.com/thedigitalself/angular-sprout

The angular seed project comes with karma and jasmine installed to do unit tests (tests for your controllers, services, directives etc)

Here is what Jasmine code looks like, http://pivotal.github.io/jasmine/. You should do this last.When you install Karma you should be really really careful about what you configured in the

karma.conf.js (files paths) !

You should install Protractor for E2E test (browser based testing)

https://github.com/angular/protractor

Be careful with the specs paths in protractor.conf.js

I want to point you to some short 5 minutes lessons at egghead

https://egghead.io/

Egghead is like the railscast of angularjs. You should go through the free videos from video 1 to 25 or so and then start building something in angular js in the seed project with what you know.

I started off with learning from the official tutorial here http://docs.angularjs.org/tutorial. Its a very good tutorial but I think its best for a newbie to learn from egghead first because the phonecat app has a harder learning curve. The documentation for angular.js is not complete at all. You should check out

http://www.thinkster.io/

Chrome developer tool will become your best friend. You should always serve your angular.js web app with a webserver, the angular seed project comes with one or you can always do a

python -mSimpleHTTPServer

I do not recommend angularjs built in router, you should use ui-router instead

https://github.com/angular-ui/ui-router

Instead of using $http to fetch files you should use $resource instead. The official tutorial at angular js use $http.

Also before you start anything that is substantial you should read this first

http://ruoyusun.com/2013/05/25/things-i-wish-i-were-told-about-angular-js.html

just so you will have less headaches down the line.

Some Thoughts on D3

Here is the official doc for d3.

http://d3js.org/

Let’s start with D3. This was how I began picking up d3. Go to the site and head to the basic charts, copy the examples to your text editor. You should change small snippets of the values and watch the data viz change in your browser. Remember what you changed and be careful of breaking anything. You code the visualizations in javascript. You should think like you are drawing something and not coding. The purpose of D3 is to give life to data. The mindset should be on the creative side.

I made a bar chart here comparing milk price in several cities: https://github.com/Jngai/D3Sample/blob/master/barchart.html Please feel free to look at the script while I describe the code. You should git clone it down so you can open the html file with firefox. You should view the source page with firebug.

When the script gets run the output is in svg/html/css. You should see that when you do view source. There is very little html/css code in the actual embedded script in the html. Its almost all in javascript. You only need to know the basic js fundamentals like arrays, objects, and functions to work with d3.

For the bar chart, you need to set the margins, width, and height for your data viz. Here is a very good explaination in the d3 wiki about margins convention. http://bl.ocks.org/mbostock/3019563 You store the margins, width, and height in your variables. You can reuse this code because most examples have margins, width and height too. Then you choose the scale of your data, there are multiple options (linear, time, ordinal) etc. Then you create both your xAxis and your yAxis. The api is relatively small. There are many options to configure your linear scales, time scales, ordinal scale, axises and so on. Right after defining the axis you see a “.”, it is d3’s way of chaining methods.

When you are loading the data into the script with d3.tsv you are exposing every data to the function. You are doing the actual drawings inside the d3.tsv starting line 54. If your script ever breaks when you are loading the data, be sure to make sure your data has the correct json structure with this http://jsonlint.com/

In the beginning before you come up with a substantial project you should design the data structure really well. The viz is data driven after all. I would really recommend this learning material: https://leanpub.com/D3-Tips-and-Tricks. I donated a dollar. You can get it for free but I wish I donated more. I would recommend you go through the above material before heading to the tutorials at the d3 wiki. The guy wrote it in a way that is very simple to understand.

Html and Css are going out of style. If js can generate html and css then we are migrating towards js. Technologies like this and angular js are rapidly replacing the views of web frameworks of your choice.

Rails Deployment

I want to give a quick overview about rails deployment practices and most of the more popular options about deploying a rails app.

1) Heroku – I will say Heroku is currently the most popular cloud hosting platform. It works like git. You push all your work to a github repository and then push all the work to heroku. Heroku is free if its a small app. If its one dyno then its free. I think Heroku can get kind of expensive when you are scaling out your web application. There are tons of add ons. I have used the sendgrid addon, the flying sphinx add on and configured ssl on heroku. You have to pay for all of them. The only good thing about heroku is its the easiest option to launch a web application.

2) Digital Ocean – I am currently hosting my rails app on digital ocean. Digital Ocean received 3 million dollars to compete with heroku and aws. The best thing about Digital Ocean is its price. Its only $5/month. It uses ssd ram. The cloud host simply gives you an empty ubuntu server to configure. You will have to deploy the application yourself. This might as well be the most promising option. You need to install all the dependencies on your server. I would recommend capistrano as a deployment tool. You can also find ready made capistrano recipes.

Here is a rails web application that I deployed to Digital Ocean, http://192.241.241.204/ You can see that the site is wicked fast. I don’t have a domain name, you will be given a server from digital ocean to ssh into.

3) Linode – You can get a 512 mb server from Linode for 20 bucks per month. It is just like Digital Ocean except that they don’t have ssd rams. You can also host your rails app on Amazon and Rackspace. Rackspace is suppose to have excellent customer service. Amazon scales well. Here are the respective links in no particular order.

1) http://digitalocean.com/ 2) http://heroku.com/ 3) https://www.linode.com/ 4) http://aws.amazon.com/ 5) http://www.rackspace.com/

The Ruby on Rails Community in Hong Kong

I am currently helping to translate the action view overview rails guide to chinese for the ruby china community in a coffee shop. If you are chinese and is interested in helping out please jump in, here is the repo https://github.com/ruby-china/rails-guides If you want to see the rails guides in chinese, here you go http://www.railschina.org/

albeit it isn’t complete yet. My room mate is from mainland china. She has a huge language barrier. The meaning from an english content is having a hard time getting to her. This is why I am helping. For all you mainland chinese, here is the ruby china’s community platform http://ruby-china.org/

I found out about Ruby China because I was looking for rails guides in chinese myself. I was looking at the rails guide and I figured out that it may be easier for me to get the ruby on rails meanings across to me faster because it takes a shorter amount of characters to explain a meaning. This is why the Chinese government is so afraid of weibo (microblog of china) because a microblog (or our equivalent of a tweet) is a full story. If you are interested to learn more, go here to watch this TED video http://www.ted.com/talks/michael_anti_behind_the_great_firewall_of_china.html I recently found out that TaoBao has a mirror for gems. If you are located in China I would refer you to pull the gems from taobao instead of rubygems because of the censorship of the Chinese internet, this will be faster to pull the gems down when you run bundle http://ruby.taobao.org/

If you are from Taiwan, here is there community platform http://ruby.tw/ and this is their jobs page http://jobs.ruby.tw/ And if you are in Hong Kong, Cocoon located in Hong Kong is a place where startups rent a space to work on their startup http://www.hkcocoon.org/. I know someone who went through the acceleratorhk program. Turns out there is a railscast china, http://railscasts-china.com/

Understand This and You Will Understand Ruby

After finishing this book http://ruby-doc.com/docs/ProgrammingRuby/ The book is a part of the ruby documentation. If you understand this certain idea then you will understand how ruby works. The idea is ruby’s inheritance structure. The parent of Module, String, Array, and Hash is Object. The parent of Object is BasicObject. String, Array and Hash are classes. Each class has its own internal state and the purpose of this is to seperate the objects from each other. So even though String, Array and Hash inherits from Object they each has its own seperate attributes. Also module contain attributes and if a module is included in a class then that class can access that module’s attributes. Any class with an each method has access to the enumerable module.

You can browse the String class documentation and learn all String methods by practicing in your irb. http://ruby-doc.org/core-2.0.0/String.html It is easier to THINK in simpler terms. When you are working on all the methods in a String class then you are essentially figuring out hundreds of ways to flip a string. Ruby will make more sense in a web application standpoint if you recognized that data returned from the database is in a data structure. The content of an array may be users data such as their names and addresses. The quickest way to access all methods for a class is to do this in your irb

1
String.methods

or this

1
[].methods #an array literal

Go through the doc once and then try the methods without referring to the doc! Note I did not cover numbers but the idea is generally the same. Every object has an unique object id because its an attribute from Object and its inherited from BasicObject. try a variation of

1
2
3
['hello', 'world' ].object_id
1.object_id
'yes'.object_id

Puts is a part of the kernel module which is included in the Object class therefore its methods are globally accessible. New is from BasicObject and this is what makes Array.new possible. If you know C you can dig into the code that makes ruby possible https://github.com/ruby/ruby For the BasicObject doc if you pay attention to the top left hand corner, you can find out the files that made up BasicObject written in C. Get familiar with the core docs and there you go. http://ruby-doc.org/core-2.0.0/ Hope this helps.

A Guide to Getting Involve in the Software Development Community

1) Go to meetup.com and search for all technology related meetup events, with these search terms javascript, html5, ruby on rails, software development, lean startups, women in technology, ‘angular js’, python, and django groups. Join all of the ones that interest you and add the events onto your person calendar.

2) Volunteer at RailsBridge, Railsgirls and try to teach programming to high schoolers

3) There are a lot of project nights going on. Both Pivotal Labs and Thoughtbot have project nights for ruby on rails.

4) Gather a list of venture capitalists in your area and take a look at their portfolio companies.

5) Check out http://www.eventbrite.com/ for technology related events.

6) Go attend hackathons

7) Go make some developer friends in these events above and have these friends let you know if events are coming up

8) Attend Startup Walkabout (Google it)

9) If you are in Boston, check out this guide http://bostonstartupsguide.com/ or if you are in NYC check out this guide instead http://nytm.org/made-in-nyc and if you are in San Francisco just craigslist it

10) Or Finally this was how I started off actually, sign up for an account on quora and follow startup related questions and read high quality and answers only.

An Introduction to Using Mongoid With Rails

Mongoid Documentation Mongoid is a schemaless database that can replace the rails database. It is compatible with active record. I would recommend mongoid for small projects especially if you are just starting out. If you are doing it for pay then you should research in depth if mongoid fits the nature of your data. I would consider the database part to be one of the hardest part when it comes to building a web app. If you use mongoid you don’t need to run migrations and or have a schema. I actually find myself taking a lot of time writing the migrations and waiting for it to run. The logic in mongoid can be changed really quickly as well. The querying and the persistence of data has a lot of similiarities with active record therefore you should find it easy to take the data out to work with in the controller/view. The newest version of mongoid is 3.1.15 as of this writing. It requires activemodel to be at version 3.2. You need to use an earlier version of rails. There is a fix/branch for mongoid to work with rails 4 however you should still use an earlier version of rails because other mongoid compatible gems are not catching up yet. There are less gems compatible with mongoid because mongoid is not the main stream. There are features that mongodb has that mongoid can use, like you can use mongodb search instead of relying on solr/sphinx. Here is the reference http://docs.mongodb.org/manual/ When you create a new rails app remember to skip active record (very important)

1
rails new my_app --skip-active-record

then you add the mongoid gem and generate a config file like this

1
rails g mongoid:config

Once you installed mongoid, creating a model is as easy as creating a modelname.rb file

1
2
3
4
Class User
   include Mongoid::Document #include this for all mongoid models!
   field :first_name, type: String
end

The model is a simple class. Then you start the database server.

1
mongod

If you don’t have mongod, you should install mongodb with homebrew

1
brew install mongodb

Now start creating documents for this specific model. If your field type is string, you shouldn’t specify the type because its STRING BY DEFAULT. It actually takes mongoid longer to process if you specify the type. You can save some memory. so it should just be like this instead

1
2
3
4
Class User
   include Mongoid::Document #include this for all mongoid models!
   field :first_name
end

You are defining your fields and relationships in one ruby file. It is so dynamic you can just change relationships/fields on the fly. I hope this helps give you a quick intro to mongoid. Learn all the commands for querying and persistance. The next step is to actually go practice using this and remember to have fun! You can check out the official documentation here for reference. http://mongoid.org/en/mongoid/

Setting Up Octopress and Deploying to Github Pages

I just finished deploying my blog powered by octopress today. It is this blog that you are looking at. I think the deployment of octopress isn’t that straight forward. I have taken some wrong turns. I want to gather all the materials that I came across while I was searching for a way to deploy this here.

Octopress is a blogging framework for hackers. Most hackers use this to blog about their code.You do need familiarity with the command line, git and have experience installing ruby and rails using a package manager in order to use octopress. I really recommend rvm if you haven’t install ruby yet. Before I begin here is the official documentation for Octopress, please open this on a browser, keep my blog open on another tap and have your shell/terminal ready to begin. http://octopress.org/ Initial Setup

1
2
git clone git@github.com:imathis/octopress.git octopress # you can change octopress to your blog name 
cd octopress

Next, run these commands

1
2
bundle install #if using rvm 
rbenv rehash #if using rbenv
1
rake install

I do not recommend deploying this blog to heroku. Heroku can get kind of expensive even though its easy but dynos cost do add up. Instead I suggest you host this with github pages. You need to create a new repository and name it with this format username.github.io please don’t do username.github.com the second way is outdated. In the future your blog url will be http://username.github.io Now the next step is to tell your blog how to connect to the repository that you just created.

1
rake setup_github_pages

It will prompt for your ssh github repository url.

1
2
rake generate
rake deploy

Its a combination of generating your blog and pushing it to the MASTER branch on github. Quickly generate a test page

1
rake new_post["title"]

Then you are going to add, commit, and push to your source branch of your repository.

1
2
3
git add .
git commit -m 'your message'
git push origin source

Please remember this part ! You will be pushing to your source branch as a backup and your master is the place where people see your blog. Every time you make some new changes do

1
rake deploy

It will commit, add, and push to your MASTER branch. Then open the url to http://username.github.io/ Please note it may take up to 10 minutes for the pages to get updated with github. This should get you started with octopress blogging. I haven’t cover everything like code snippets, configurations, themes, and plugins I will leave it up to the octopress documentation. Here is another quick tip, in the future whenever you made any changes to your posts/config files please don’t forget to

1
rake preview

to see your changes. Also octopress is really annoying when it comes to code snippets they have to be perfect otherwise you will get an error on your terminal.

How to Start Programming and Learning It in 2 Years

Cultivating an Interest in Startups

Read all essays written by Paul Graham at http://www.paulgraham.com/articles.html

Mathematics Fundamentals Here are some thoughts on how to start as a programmer. This is what I did. I have noticed when you google ‘learn ruby on rails’ a lot of the stuff are actually too trivial. Sorry to break it out to you but you really can’t do it in a month, two months or three months. Before you begin to code you need to make up for the computer science fundamentals that you missed out on in college.

1 ) Know some Set Theory http://faculty.atu.edu/mfinan/actuarieshall/Pbook.pdf

2 ) Learn Discrete Mathematics http://faculty.atu.edu/mfinan/main2.pdf A very kind professor outsourced his mathematics textbook. You can find more free textbooks on his site. Most of his textbooks are geared towards preparing for the actuarial examinations. Computer Science Fundamentals

1) Read the Structure and Interpretation of Computer Science Book – all standard first year CS students read this http://deptinfo.unice.fr/~roy/sicp.pdf

2) Go through these courses in order http://www-inst.eecs.berkeley.edu/~cs61a/fa13/ https://www.edx.org/course/mit/6-00x/introduction-computer-science/586 These courses should give you an understanding of data structures, functions and introduces you to classes and objects. For more online courses in cs, check out EDX or google uc berkeley cs 61b, 61c, and 161. Free Workshops

4) If you are a woman and there is one around you, sign up for railsbridge http://www.railsbridge.org/ and subscribe to devchix http://www.devchix.com/ Starting Rails

1) Go through Rails Quick Start Guide http://guides.rubyonrails.org/getting_started.html

2) Be able to tell the difference between gems, bundler, rvm, and your environment google is your best friend

3) Start browsing all the gems at both http://rubygems.org/ https://www.ruby-toolbox.com/

4) Find one gem that interest you and use it on a blank rails app and make sure that people can see it by deploying on heroku.

5) Read Hacker News, use your terminal, and use Github, and refer to stackoverflow.com every day. Stackoverflow.com will be your new best friend.

6) Know Github and understand what it is for – http://git-scm.com/book

7) Subscribed and pay $9 bucks to railscasts, watch all videos dated 2011 and later don’t forget to push code and not just watch it http://railscasts.com/

8) Know one way of deploying a web application, choose heroku https://www.heroku.com/

9) Google python, django, flask, webpy and know that they exist but please don’t dive into them

10) Sign up for learn with thoughtbot https://learn.thoughtbot.com/dashboard

11) Make a blog on your own without using scaffolding

12) Cultivate a habit of browsing other people ruby on rails projects and reading the code on github.

13) Read Getting Real from 37 Signals

14) Read Reworks from 37 Signals

15) Read all the guides at http://guides.rubyonrails.org/

16) Come up with a one month project in the usability view point

17) Rewrite that last project in a better way

18) Continue on to build other projects

Database 1) Buy Head First SQL to learn about tables, sql, and database Head First SQL: Your Brain on SQL — A Learner’s Guide (from amazon) even though rails abstract away from SQL but not understand how tables work is suicide.

2) Install Postgresql with homebrew if you have a mac

3) Refer to the doc here http://www.postgresql.org/ after reading Head First SQL! Ruby

1) Read Programming Ruby to get started on Ruby http://ruby-doc.com/docs/ProgrammingRuby/

2) Try all the methods for string, hash, array, and enumerable in your irb

3) Pay attention to the ruby way of doing things, that everything is an object even the values, strings/arrays/hashes are classes that inherit from a base object and methods have been created for you for these specific classes, try to understand the inheritance structure Misc/Javascript/Linux

1) Get this Javascript book for reference on amazon JavaScript: The Definitive Guide: Activate Your Web Pages (Definitive Guides)

2) Google Angular Js, Ajax

3) Get the Unix Power Tools from Amazon as a reference The key to being good at programming is really to program. You will make mistake and you will be stuck. And when you do make mistakes you should google it but beware of outdated stuff. The programming community is really good at helping other people. Don’t be afraid to ask questions on google groups and mailing list. Updated Nov 19 2013

Also all technologies have documentations. A decent developer should be able to learn and implement new technology from referring to the documentation. Don’t ever sell yourself short! You are not just a ruby on rails developer but a developer ! Please note that I actually went through a 2 months intensive boot camp right after I got through the fundamentals. If you need in class learning I would strongly suggest you to research into this area.