Category Archives: Uncategorized

React Router in a Flux App

Pretty annoyed by the dramatic changes in different version of React Router. Have already updated my app like three times due to breaking API changes…

Still struggling to get Flux to work with ReactRouter. The only thing I found useful is this article.

Maybe the question is: do we need a router and a Flux store? It seems like we only need one of them.

Standard

On the responsibility of engineering blog

A recent Netflix engineering blog titled ‘Node.js in Flames‘ stirred quite a discussion. People are saying it is misleading to say at least, like this response.

I was initially shocked by how ‘naive’ the Express.js was in terms of dealing with routes. After initial shock, I wasn’t sure whether there is an easy alternative. So I went through the comments of the original blog, and realized it is indeed a deliberate choice made by the framework.

However, the damage has been done to the Express framework. I imagine this article would be brought-up many times in the future. The conversation would go like ‘No. We shouldn’t use Express. Didn’t you see how Netflix was ditching Express?’. Quite similar to when Facebook ditched HTML and went for native, maybe at a much smaller scale.

I used to have a lot of respect for engineering blogs from different companies. After all, you are supposed to demonstrate the technical leadership. But this article serves as a friendly reminder that things are not so simple as it seems.

Standard

Flexbox notes

Flexbox is very powerful, yet still not popular enough.

Look at this

flex
This is the shorthand for flex-grow, flex-shrink and flex-basis combined. The second and third parameters (flex-shrink and flex-basis) are optional. Default is 0 1 auto.

Guess what does this mean?
– flex: 1 auto;

How about this
– flex: 2 0px;

The first one means

flex-grow:1;
flex-shrink: 1;
flex-basis:auto;

The second one means

flex-grow:2;
flex-shrink: 1;
flex-basis:0px;

Is auto the same as 0px? No.

StackOverflow says “flex-basis allows you to specify the initial/starting size of the element, before anything else is computed. It can either be a percentage or an absolute value.”

But why would a box’s final size depends on its starting size though? I thought that was the whole point of having flex-grow… Need to meditate on this one…

Maybe because of this ‘flex-basis establishes the base width of the element prior to redistributing remaining space along the (main?) axis, either by justify-content or flex-grow/shrink values’. (also from StackOverflow)

Standard

Center a div in the page

Not a CSS guru, but flexbox make it really easy

Method 1:

container use display:flex, and item use margin:auto

Method 2:

container use display:flex, justify-content:center, align-items:center. Here justify-content positions items in the main-axis of the flex(default in the row direction), and align-items positions items in the axis that is orthogonal to the main-axis

Standard

Style placeholder

I have learned so many useless tricks about CSS, like this one.

You have to use different rules to style placeholder, otherwise, they will be ignored. Also reported by treehouse.

A stylus example to hide the placeholder when the learner class exists

  .learner
    &::-webkit-input-placeholder
      color white
    &:-moz-placeholder
      color white
    &::-moz-placeholder
      color white
    &:-ms-input-placeholder
      color white
Standard

git patch

Useful commands:

git format-patch master --stdout > fix_empty_poster.patch
git apply --stat fix_empty_poster.patch
git apply --check fix_empty_poster.patch
git am --signoff < fix_empty_poster.patch
git apply --reject --whitespace=fix fix_empty_poster.patch
Standard

CKEditor target=_blank by default

  this.editor.on('instanceReady', function(){
      // Note nested arrays
      // http://docs.ckeditor.com/#!/api/CKEDITOR.filter-method-addTransformations
      // This rule will add the target="_blank" attribute to all links that
      // do not have it.
      this.editor.filter.addTransformations([
        [{
          element: 'a',
          left: function( el ) {
            return el.target !== '_blank';
          },
          right: function( el, tools ) {
            el.attributes.target = '_blank';
          }
        }]
      ]);
    }.bind(this));
Standard

JavaScript getter and setters

When using web components, a common task is to read attributes from the element.

The naive way is:

var Proto = Object.create(HTMLElement.prototype);
_.extend(Proto, {
  attachedCallback: function(){
    if(this.readAttributeAsJson('config-ready')){
      //do something
    }
  },
  readAttributeAsJson : function(name) {
    if(!this.hasAttribute(name)) { return false; }
    return JSON.parse(this.getAttribute(name));
  }
});
document.registerElement('vs-text', {
  prototype: Proto
});

The better way is:

var Proto = Object.create(HTMLElement.prototype, {
  configReady: {
    get: function(){ return this.readAttributeAsJson('config-ready'); }
  }
});
_.extend(Proto, {
  attachedCallback: function(){
    if(this.configReady){
      //do something
    }
  },
  readAttributeAsJson : function(name) {
    if(!this.hasAttribute(name)) { return false; }
    return JSON.parse(this.getAttribute(name));
  }
});
document.registerElement('vs-text', {
  prototype: Proto
});

Here we are using object getter and setters.

 

Another example where if you do a.id = 1, and then try to read a.id, you get 2

var _id = null;

var a = {};
Object.defineProperty(a, "id", {
 get: function() {
 console.log("get!");
 return _id;
 },
 set: function(value) {
 console.log("set!");
 _id = 2 * value; 
 } 
});
Standard