Skip to content

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

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


  • 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:
  • 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


  • 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.


  • 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
  • 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 */
  • PHPStorm has a BASH language extension. Don’t forget to restart after installation.


Published inWeb Development

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *