Day 86, how to mimic closure

Question: how to mimic closure without using closure?

Answer: use bind.

The following code will work, inspired by the “Functional JavaScript”.

/* closure */
var multiply = function (byN) {
  return function(arg) {
    console.log('always multiply by ' + byN + ' because of closure. Result is: ', arg * byN);
  };

};

var finalFunc = multiply(5);
finalFunc(10);

In the code above, byN belongs to the scope of multiply(). In other words, byN is used by the anonymous function, and byN is outside the scope of that anonymous function. Hence, it is using closure.

/* mimicking using bind */
var _ = require('underscore');

var multiply = function (byN) {
  return function(arg) {
    var captures = {'byN': byN};

    var bindFn = _.bind(function(){
      console.log('always multiply by ' + this['byN'] + ' because of closure. Result is: ', arg * this['byN']);
    }, captures);
    bindFn();
  };

};

var finalFunc = multiply(5);
finalFunc(10);

In the code above, byN belongs to the anonymous function. Hence, we are not using anything outside of the scope of the anonymous function.

Standard

Day 85, closure

More interviews. I guess having interview shouldn’t be news. If there were one day without an interview, that should be news.

Closure, closure, closure

Definition:
Closure is a function that captures the external bindings (i.e. not its own arguments) contained in the scope, in which it was defined for later use (even after that scope has completed).

var outFn = function(){
  var closureVar = 'test';
  var inFn = function(arg){
    console.log('this is ' + closureVar + ' with ' + arg);
  };
  return inFn;
};

var closureFn = outFn();
closureFn(' more args');

This is super basic sample. An nice StackOverflow article to read: http://stackoverflow.com/questions/111102/how-do-javascript-closures-work

An even better one:
http://javascriptweblog.wordpress.com/2010/10/25/understanding-javascript-closures/

Standard

Day 84, techcrunch disrupt

Even though I was supposed to prepare for job interviews, I spent a lot of time watching the techcrunch disrupt. It is amazing. There were so many cool ideas.

I especially liked apps using APIs from cars. Tesla++ was amazing – if Tesla is parked and undercharged and not plugged in, it will send you a text to remind you. Wakey Wakey is also cool – if you are sleepy and begin to drift away, it will alert you “wakey, wakey”, and find the next coffee shop or hotel for you. Amazing!!!

Other cool ones are:
AdFree – use a JS to do map/reduce in visitors’ browser when visitors are visiting your blog. So the blogger can make money from computing instead of ads.

Standard

N ways to vertically center elements

First way with line-height (not sure about cross-browser)

HTML:

<div id="header"><div class="center">header</div></div>

CSS:

#header {
  height: 100px;
  background: gray;
  text-align: center;
  line-height: 100px;
}

Second way, negative margins

#header {
  background: gray;
  position: relative;
  height: 100px;
  text-align: center;
}

.center {
  background: pink;
  position: absolute;
  width: 20px;
  height: 20px;
  top: 50%;
  left: 50%;
  margin-left: -10px;
  margin-top: -10px;
}

Third way, display:table with display:table-cell.

#header {
  display: table;
  height: 100px;
}

.center {
  display: table-cell;
  vertical-align: middle;
}

Third way to align both vertically and horizontally.

#header {
  display: table;
  height: 100px;
  width: 100%;
}

.center {
  display: table-cell;
  vertical-align: middle;
  width: 100%;
  text-align: center;
}

Further read: http://www.vanseodesign.com/css/vertical-centering/

Standard

N ways to make a two-column layout

Our html content:

<div id="sidebar">sidebar</div>
<div id="content">
This is the beginning of content div.

 <img class="cat-img" alt="" src="http://eofdreams.com/data_images/dreams/cat/cat-08.jpg" />

This is a very large page of content.

I mean. Really.

Really really large.</div>

First way (not sure about cross-browser):

#sidebar {
background: pink;
float: left;
}

#content {
background: yellow;
overflow: hidden;
}

First way, complete version. Note both html and body needs to have height:100%

html {
  height: 100%;
}

body {
  margin: 0;
  height: 100%;
}

#sidebar {
  background: pink;
  float: left;
  height: 100%;
}

#content {
  background: yellow;
  overflow: hidden;
  height: 100%;
}

Second way, use display:table, and display:table-cell. Bonus point: now you can use vertical-align:middle to vertical-align text in #sidebar.
Note:

  • Vertical-align on a display:table-cell means where to display INNER content relative to the height of the table-cell.
  • Vertical-align on a display:inline-block means where to display NEIGHBOURS relative to the height of the inline-block.
body {
  display: table;
  margin: 0;
}

#sidebar {
  display: table-cell;
  background: yellow;
}

#content {
  display: table-cell;
  background: gray;
}

Third way, use flex. Only available in modern browsers. But allow each children to distribute according to flex-ratios
. Check compatibility with http://caniuse.com/


#page {
 display: -webkit-flex;
 -webkit-flex-direction: row;
}

#sidebar {
 background: pink;
 -webkit-flex: 1;
}

#content {
 background: gray;
 -webkit-flex: 2;
}

Add this awesome reference: http://www.boutell.com/newfaq/creating/threecolumnlayout.html

Standard

The idea to build an open source desktop client for Flickr

This was a pitch I gave during Hack Reactor’s group idea phases. It didn’t materialize but I liked the idea a lot.

Basically, it is a dropbox-like client for Flickr, built with HTML/CSS/JS, wrapped in node-webkit to make it available in all three platforms – Windows / Mac / Linux

What it does

  • Monitor a folder
  • Upload with multi-thread
  • De-duplicate pics and resume syncing

Why?

  • Flickr has 1TB space
  • Their desktop app was lastly updated in 2009!!!
Standard

Group project reflection

Finally has time to sit down and reflect on the group project – PreLinked.

Good:

  • Best team ever. Stephen, Barry, Hao and I were just almost the best team I ever worked in. Nobody was a free rider and everybody was willing to help once he was done with his part. The skills were complementary too. I think some startup should hire four of us to be their entire frontend department.
  • Tech stack was solid. Backbone.js / MongoDB / Express.js were all main stream enough that there were enough documents on most problems we encountered.
  • “Promise” was good. I tried my best to teach everyone promises in the beginning of the project and by the end of the project, everyone was very comfortable with promises. Because of that, the asyn code was very readable.

Bad:

  • Not enough time to reach out and publicize the project.
  • Could have been more aggressive in terms of scope.
  • Not enough testing.

Ugly:

  • Nothing really.
Standard

Day 83, more CSS

Larry was kind enough to go over some basic CSS with us again.

CSS reminds me of all the bio / medical sciences. The rules are complex and exceptions are common. I guess a good starting point is memorization.

On the data structure front, did more coding on paper. It is a much harder thing than actually writing the code in editor, because you can’t reply on debugger for certain edge cases.

Oh, some people are actually getting offers now. That is crazy consider we are only a week into the job search.

More css resources to read:
https://developer.mozilla.org/en-US/docs/Web/CSS/Visual_formatting_model
http://css-tricks.com/

Standard

Day 82, first on-site

Talked to another startup today. Enjoyed the conversation a lot.

Did some more toy problems today. Some interesting ones are:

  • Give a JSON representing a binary tree, build a html menu with JavaScript
  • A dangerous way to break out of the inner loop of two nested loops in JavaScript
  • What happens when user enters “www.google.com” inside the address bar and hit enter
  • Differences between inner join and outer joins
Standard

Day 81, the real startup

Finally have an opportunity to visit a real startup. Very legit, tons of cash, impressive engineers, bleeding edge technology.

On our way back, Gary and I were saying, “I can’t believe we are actually in the game right now. We are actually in the start-up world in SF. Awesome…”

Standard