Saturday, October 8, 2016

A Really Small Flexbox Grid:Fukol

Found the reference in Web Development Reading List #153 on Smashing Magazine:
Heydon Pickering wrote the probably shortest and smallest CSS grid framework possible: Fukol, a Flexbox grid that weighs in at only 93 bytes.

Wednesday, August 17, 2016

TinyPNG: Smart PNG and JPEG compression

TinyPNG:
"TinyPNG uses smart lossy compression techniques to reduce the file size of your PNG files. By selectively decreasing the number of colors in the image, fewer bytes are required to store the data. The effect is nearly invisible but it makes a very large difference in file size!"

Monday, May 30, 2016

SP2013 master page notes

Webparts in rich edit fields
  • need AjaxDelta around editable area in order to insert webparts in them (see thread: Why do my Web Part properties not show up?)
  • sometimes you just need to insert another webpartzone to be able to insert webparts in some placeholders
  • not all the html editor controls could have webparts inserted; has to do with the hidden webpartzone used for those being in PlaceHolderMain (see http://sharepoint.stackexchange.com/questions/59423/cannt-add-web-part-to-publishingwebcontrolsrichhtmlfield)

If added/removed contentplaceholders in master:
  • if you add/remove a contentplaceholder, you need to create a temporary page layout using that master page and see what changed in the head section and compare that with your existing page layouts and make similar changes;

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:

Monday, April 13, 2015

Exposing functions that are inside a closure

Learned a lot from response in this thread:
You expose functions or properties of a closure by internally declaring them in this scope (which can change depending on invocation).