Monthly Archives: July 2013

Day 45, how to set up SublimeLinter

The API is finally up and running. Exciting. We are finally able to test both frontend and backend now.

Spent two hours setting up SublimeLinter. Run into a couple of problems.

The solutions are:

1. Make sure jshint is installed

npm install -g jshint

2. Inside SublimeLinter.sublime-settings. Make sure pointing javascript to the right node path

{
    "sublimelinter": true,
    "javascript_linter": "jshint",
    "sublimelinter_executable_map":
    {
    "javascript": "/Users/shao/.nvm/v0.10.10/bin/node"
    },
    "sublimelinter_mark_style": "fill",
    "sublimelinter_gutter_marks": true,
    "jshint_options":
    {
        "regexdash": true,
        "browser": true,
        "devel":true,
        "sub": true
    },
    "sublimelinter_notes": true
}

3. Patch the linter.js per this bug (this might no longer be necessary):

https://github.com/twolfson/SublimeLinter/commit/6ac7ae2845edb9ea1a27d046fb1da5b1bd1eac08


cd "/Users/shao/Library/Application Support/Sublime Text 2/Packages/SublimeLinter/sublimelinter/modules/libs/jshint/"

// add two lines to the beginning of linter.js

// Define window globally for node to prevent browserify errors

global.window = {};

4.set the color of sublime linter
– Find the theme file. If you are using the default theme on Mac, then the file is located at: /Users/shao/Library/Application Support/Sublime Text 2/Packages/Color Scheme – Default/Monokai.tmTheme

– Copy and paste the highlighting color settings into the theme file. PLEASE put it INSIDE the 

<array></array>

. In other words, please paste color settings just before 

</array>

.

-This is the text used to find the target location to paste into

	</array>
	<key>uuid</key>
	<string>D8D5E82E-3D5B-46B5-B38E-8C841C21347D</string>
</dict>
</plist>

-The highlighting color settings. This is the text to be copied into the target location

<dict>
    <key>name</key>
    <string>SublimeLinter Annotations</string>
    <key>scope</key>
    <string>sublimelinter.annotations</string>
    <key>settings</key>
    <dict>
        <key>background</key>
        <string>#FFFFAA</string>
        <key>foreground</key>
        <string>#FFFFFF</string>
    </dict>
</dict>
<dict>
    <key>name</key>
    <string>SublimeLinter Error Outline</string>
    <key>scope</key>
    <string>sublimelinter.outline.illegal</string>
    <key>settings</key>
    <dict>
        <key>background</key>
        <string>#FF4A52</string>
        <key>foreground</key>
        <string>#FFFFFF</string>
    </dict>
</dict>
<dict>
    <key>name</key>
    <string>SublimeLinter Error Underline</string>
    <key>scope</key>
    <string>sublimelinter.underline.illegal</string>
    <key>settings</key>
    <dict>
        <key>background</key>
        <string>#FF0000</string>
    </dict>
</dict>
<dict>
    <key>name</key>
    <string>SublimeLinter Warning Outline</string>
    <key>scope</key>
    <string>sublimelinter.outline.warning</string>
    <key>settings</key>
    <dict>
        <key>background</key>
        <string>#DF9400</string>
        <key>foreground</key>
        <string>#FFFFFF</string>
    </dict>
</dict>
<dict>
    <key>name</key>
    <string>SublimeLinter Warning Underline</string>
    <key>scope</key>
    <string>sublimelinter.underline.warning</string>
    <key>settings</key>
    <dict>
        <key>background</key>
        <string>#FF0000</string>
    </dict>
</dict>
<dict>
    <key>name</key>
    <string>SublimeLinter Violation Outline</string>
    <key>scope</key>
    <string>sublimelinter.outline.violation</string>
    <key>settings</key>
    <dict>
        <key>background</key>
        <string>#ffffff33</string>
        <key>foreground</key>
        <string>#FFFFFF</string>
    </dict>
</dict>
<dict>
    <key>name</key>
    <string>SublimeLinter Violation Underline</string>
    <key>scope</key>
    <string>sublimelinter.underline.violation</string>
    <key>settings</key>
    <dict>
        <key>background</key>
        <string>#FF0000</string>
    </dict>
</dict>
Standard

Day 44, Thorax.CollectionView

Spent a lot of time on that.

Preliminary findings:

– be careful with filenames. Thorax will load your_collection_view-item.js automatically for each of the item inside the view

Standard

Day 42, coffee surfing again

It is nice to take a short break from the client project and work on the blog backlogs.

Coffee surfing at Awaken Coffee:
1429 Broadway Oakland, CA 94612
(510) 863-1440

The Wifi was good. Music was above average. The house coffee tasted differently from other coffee shops. I didn’t really care but one lady sit next to me was saying how she worked in a coffee shop for several years before, and this house coffee was definitely one of the best.

It was perfect to do coffee surfing at 9am on Sundays. First, parking is free in any metered places on Sundays. Second, the coffee shop is unlikely to be crowded so you can always find a table with outlets.

I talked to an old friend again. He is thinking about doing something similar to what I am doing. I guess that is the power of friends. He might know the possibility of career switching and now he knows that it can’t be that scary because a person he knows well is actually doing it.

Standard

Day 41, graduation for the seniors

How time flies. The current senior class is graduating today, and we, the current junior class, turns into the senior class after midnight. It was funny that Tuhin actually sent out an email in the midnight of night, titling “SENIORSSSSSSSSSSSS”. It is an exciting and scary feeling. It is exciting that it implies that we know something now; it is scary that it implies that we actually know something now.

The senior class spent an afternoon drawing all they have learned on a gigantic whiteboard. It was pretty cool, although it was not as MECE as I wanted it to be. I looked at the whiteboard and said ” you realize this whiteboard worths half a million, right?”. The math is simple, 20 people with $20k = $400k, roughly half a million.

The graduation party is fun. First time we had free beer in the school. Yeah! I spent a lot of time talking to interesting people about interesting ideas. When talking to Andrew from edmodo.com, I was deeply impressed by their growth. The numbers are crazy. Given my passion about the education space, I should definitely follow up with him. Also spent a lot of time talking to the founder of ShowDown. He is a cool guy and the idea is viral by nature. Wish him the best.

The best part of the evening is Felix’s battle deck performance. I guess influenced by Marcus’s prior working experience, we had this tradition of doing battle decks in the graduation night. The basic rule of battle deck is that given a random sequence of pictures and a center topic, the presenter are supposed to tell a coherent story based on those pictures for that topic, without any prior preparation. Felix had “childhood” as the topic and a random sequence of children posing with weird animals. The performance was beyond epic – everything he came up matched the pictures perfectly. People laughed so hard that there were literally tears in people’s eyes and people rolling on the floor. It was awesome!!!!!

Standard

Day 40, Thorax.js sub views

Continue working on the client project.

Made significant progress with my Thorax project.

One cool thing is to have a child-view telling the parent-view to close.

I have a modal view with a sub-modal view. The modal view will have all the basic functions of a modal. The sub-modal view is going to change all the time, showing different content. The concept worked well until I hit the point that I need to: click a button inside the sub-modal view, and ask the modal view to close.

With the help of Victor, I did a couple of things:

1. on click, the sub-modal view triggers an ‘close-modal’ event
2. the modal view listens to the ‘close-modal’ event from the sub-modal view and close itself. The key is using Backbone’s listenTo function.
3. Of course, life is never that easy. In reality, I extended my modal view from the Backbone.bootstrap-modal library, added the “listenTo” in the initialize(), and also called the super class (Backbone.bootstrap-modal)’s initialize() too.

Anyway, I was so happy that it actually worked!!! Yeah….

Oh, Marcus hosted a technical interview meetup in HackReactor tonight. It was very informative.

First, he interviewed Kyle and another guy. Then, we broken into smaller groups to work on four different technical problems. In the end, he was interviewed by another guy.

Nothing is really surprising, but compared to a case interview, there is not enough focus on thinking out out during a technical interview. It makes sense since there are way more interactions between consultants and clients than the interaction between different developers. The other difference is a case interview will likely have many right answers, while a technical interview has at most a couple right answers, with one or two of them being the best.

Marcus asked the question on how to design the architecture of Twitter. I guess this must be a fairly popular question for backend positions. It involves understanding of different pieces of the stack, basic database queries and advanced database operations during scaling. To serve a user’s read request for his own timeline, the user’s timeline was precomputed and stored in the database. You are essentially sacrificing space for speed. The more we talked about Twitter, the more I appreciated the smooth operation of Weibo. Kudos to engineers in Weibo, you guys did an awesome job in scaling it up.

The four technical problems are: hashTable, breadth first / depth first tree traversal, count the frequency of characters and sort them by frequency … (don’t remember the last one)…

I came up with a way to do breadth first tree traversal:

var node_list = [];
node_list.push(root_node); //root_node is the first node in the tree
var i = 0;
while (node_list[i] !== undefined){
  //each node stores all the children in an array called node.children
  for(var j=0; j<node_list[i].children.length; j++){
    node_list.push( node_list[i].children[j] );
  }
  i += 1;
}
Standard

Day 39, Thorax.js and Backbone.js

It kind of make sense for a bio students to study JavaScript. Why? Just look at all those names, from brain.js to backbone to thorax. I am sure sooner or latter we will be running out of names…

Talking about bio students, Peter, CJ and I ran across a UCSF bio phd student in the BART tonight at 10:30pm ish. She was working hard, energetic and in her last year of graduate studies. I have never actually met anyone who are going to UCSF’s bio phd programs. She must be extremely smart! Asked her about what does she do, and she said DNA replication. I said, “old and boring”…. then she went on to defend the field… Sorry about that. I personally like neuro science or developmental biology more than any sub field, because we knew almost nothing in those fields…

Anyway, back to programming….

Ricky and I made solid progress today.

– Now using backbone-bootstrap modal. Since tons of our interactions happen inside the modal, I expect the existing library won’t satisfy our need and we might end up adding more things to the library.

– Now knows how to add new views/models/collections to the project based on Thorax-seed. I tried to manually add them in the beginning. Latter I realized that I was supposed to use “grunt generate”. Totally wasted time because I didn’t read the document line by line.

– Larry spent more time with Joe on the database side. It seems like we are almost there with the final database schema.

Tips on Backbone:

– Add a sub-view.


this.$el.append( (new Backbone.Views.ChildView()).render() );
Standard

How to get a job offer

Based on one hour session with Dylan from the senior class.

Dylan is one of the first in the senior class to receive and accept a job offer. He must have something special.

The employers looked at the following things:
– his personal project.
– his group project
– his personal website.
– his GitHub profile

Personal website:
– His website is fantastic. Hence, whenever the employer wants to see the portfolio, he sends the website to impress them.
– It has to be responsive. Employers would literally resize the window to check.
– A good model is alexpaley.com

Personal projects:
– Working and pretty/presentable
– Not necessarily the most complicated project
– The other extreme is the technical challenging ones, such as building a WebRTC framework or build a REST interface to Mongo(?)

Group projects:
– Understand all the code other people wrote.
– Implement a couple of design patterns such as observer or mediator in the project.
– Make sure the code is nice / clean / presentable to employers

GitHub profile:
– Activities are important. Similar to your undergraduate GPA, it is hard to cheat on your commit activities.
– Showcase a couple of the projects

Other recruiting channels:
– AngelList
– LinkedIn (change your title to software engineer)

High level thoughts:
– 50% technical details
– 50% like-ability

Practical stats:
– all interviews coming from hiring days
– 5+ onsite interviews with more voluntarily declined
– To nail the 5 minutes speed dating in hiring day, be personable, smiling. A lot of conversations end up being non technical. Don’t underestimate the people you meet since he might become your biggest advocate inside the company.

Phone interview:
– 50% tech depth
– 50% personable

Onsite interview:
– 3-4 hours each, one hour per person
– All coding on whiteboard
– Talk through the coding process
– Practice writing code on the whiteboard
– Be proactive. Reach out and not necessarily aggressive.
– When struggling, don’t get frustrated. Ask for help.
– After making a mistake, admitted it.

Other thoughts:
– Meteor.js is cool to know. However, it is so new and so powerful that few companies are using it in production. Also, employers might not take you seriously if you build a project with Meteor. Meteor is definitely the go-to weapon in a Hackathon.
– When asked about the expected salary. First, avoid giving a definitive number, saying “average market rate / what is competitive”. Second, if pressed again, referring to a high anchor point, “Peter in our previous class got an offer of $125k with signing bonus. While I don’t expect your company to offer the same salary, it does give us some range to think about.”

Common interview questions:
– Write SQL to join two tables
– Explain CSS box model
– Promises
– Implement promises in jQuery without using .done() or .success()
– jQuery events
– Make a drag & drop modal without using any library. Hint: mouse_down -> mouse_move -> mouse_up
– Backbone
– Some angularjs

May or may not be true:
– People likes Ruby but don’t like Rails
– CoffeeScript is ok

Example – what is the output for the following program:

var a = 8;
alert(a);
var f1 = function(){
  var a = 7;
  alert(a);
  var f2 = function(){
    alert(a);
    var a = 6;
  }
  f2();
}
f1();
Standard

Day 38, Meteor.js and event systems

Today kicks off the semi optional Meteor sprint. I have used Meteor.js to build my personal project: replay.meteor.com, hence knows the basics. It only took my an hour to finish most the basic requirements and I then moved on the client project.

For the client project, I finished several things today:
– Handlebar templates for the two pages
– Convert the CSS to Stylus (http://learnboost.github.io/stylus/docs/js.html)
– Put some dummy data in and did a proof of concept collection-view binding

Many other things happened today. One is that my college friend Shanshan came over to visit the school. The other is Marcus taught us on how to write an event system. The last one is Dylan taught us on how to prepare for interviews. It seems like they will be separate blog posts.

Standard

Day 37, MySQL it is

After debating for another several hours, MySQL it is.

There was a guest lecture on Angular.js. I don’t know enough about it because I am very invested in Meteor.js 🙂

Why Angular?
– To build single page apps
– It is maintained by Google so it won’t go away (well, Let’s ask some other folks. Can you hear me, Google Reader? Oh, how about Google Wave? Oh….)

Some quick notes:
– ng-app
– ng-model
– ng-repeat
– ng-click
– ng-submit
– It watches variables(?)

<ng-model ="name">
{{name}}

– dependency injection. Sounds like a double-edged sword to me…

Anyway, definitely should give it a try for a small side project.

Standard