Weekly Learn Log: history.pushstate(), Vim, Flexbox, CSS, Bash ...

A quick rundown of things I learned during the work week.

3/17/15

http://www.dribbble.com for community design feedback.
window.history.pushState({id: 'SOME ID'}, '', 'myurl.html');
- Part of the HTML5 History API
- Changes the path of the URL that appears in the user’s address bar.
- Does not make server request,
- Need to add addEventListener('popstate', function(){}) to listen for nav buttons (browser back and forward).
- short article here
Delete empty or blank lines in file in vi :g/^$/d
- g tells vi to execute a command on lines that match a regex
- d is the command to delete.
- Other commands are s to substitute, co to copy and w to write.
- More info here: http://vimregex.com/#global
When piping color coded output to less, use the -R flag. e.g.: ionic start --help | less -R Otherwise, less will show all the color codes and not the colors

3/18/15

Bash command line
- Press [Esc]+B to move back one word.
- Press [Esc]+F to move forward one word.
Bootstrap: Yes, I know it. Grid systems suck. Learn proper responsive design.

3/19/15

git commit --amend
- Change the note of the most recent commit.
- Add more staged changes to the most recent commit.
- Don’t do this on public repos.
locale
- Check the current locale settings of the machine.
<script src="..." [async | defer]>
- async: script executes while page continues to load
- defer: script is executed when page is finished being parsed.
- none: script is executed before page parsing contiues.
- IE >= 10
CSS combinators: The characters between selectors that no one ever remembers
what they do. e.g.: +, >, ~
- div > p: selects all p that are immediate children of div
- div + p: selects the p that is adjacent (immediately following) a div. Must have same parent.
- div ~ p: selects all p that are siblings of div. Not necessarily
  immediate.

Flexbox:

A fantastic article here

.some-box {
    display: flex;
    flex-direction: row; /* Default. all children stack horizontally */
    flex-direction: column; /* All children stack vertically */
    min-height: 100%;  /* used for 'flex: 1;' below */
}

.some-box {
    flex: 1; /* fill all possible height, equally */
}