Malay Ko Ba

Tuesday, December 8, 2015

Configuring git to use winmerge

Using github desktop, open a Git Shell (I have it configured to use Git Bash).
Then these commands to configure merge and diff tools (assuming you have winmerge installed):

git config merge.tool winmerge --global
git config diff.tool winmerge --global

And then to use it, type this in Git Bash:

git mergetool

(reference)

Tuesday, August 4, 2015

Newspaper columns

Quoted from this StackOverflow thread:

Using the column direction for Flexbox requires an explicit height in order for wrapping to work (see:http://codepen.io/cimmanon/pen/oyilE).
If you want to have newspaper style columns without using explicit heights, the multi-column module is what you're looking for.
http://codepen.io/cimmanon/pen/CcGlE

(Compass multicolumn module)

Friday, May 1, 2015

CSS3: apply styles to child nodes based on the number of siblings they have

Quoting this answer by Lübnah to the question can CSS detect the number of children an element has :

Clarification:
Because of a previous phrasing in the original question, a few SO citizens have raised concerns that this answer could be misleading. Note that, in CSS3, styles cannot be applied to a parent node based on the number of children it has. However, styles can be applied to the children nodes based on the number of siblings they have.

Original answer:
Incredibly, this is now possible purely in CSS3.
/* one item */
li:first-child:nth-last-child(1) {
    width: 100%;
}

/* two items */
li:first-child:nth-last-child(2),
li:first-child:nth-last-child(2) ~ li {
    width: 50%;
}

/* three items */
li:first-child:nth-last-child(3),
li:first-child:nth-last-child(3) ~ li {
    width: 33.3333%;
}

/* four items */
li:first-child:nth-last-child(4),
li:first-child:nth-last-child(4) ~ li {
    width: 25%;
}
Credit for this technique goes to André Luís (discovered) & Lea Verou (refined).
Don't you just love CSS3? :)
Sources:

http://andr3.net/blog/post/142 (André Luís)

http://lea.verou.me/2011/01/styling-children-based-on-their-number-with-css3/ (Lea Verou)