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.
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.
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)
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
It turns out done accepts err as arguments, so it is straightforward to throw an error by
done( new Error("Unexpected error") );
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
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
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));
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;
}
});
