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