GitHub: How to cherry-pick within a pull-request?

Source & Credits: https://gist.github.com/ozh/cbce675ba35e0d336cff

1. Create new branch:

git checkout -b otherrepo-master master

2. Get the contents of the PR

git pull https://github.com/otherrepo/my-repo-name.git master

3. Change back to master

git checkout master

4. Now DO NOT merge the whole branch, BUT cherry-pick exactly the commits from the other branch.

The hash uniquely defines the commit - regardless of the branch it is in.

git cherry-pick abc0123

5. Check, remove the temp branch, push

git log
git branch -D otherrepo-master
git push origin master

GIT: useful commands

Checkout and start tracking remote branch:

git checkout --track origin/branchname

Publish and create tracking connection for new local branch:

git push -u <remote> <branch>

Revert changes made to your working copy:

git checkout .

Revert changes made to the index: (i.e., that you have added). Warning this will reset all of your unpushed commits to master!

git reset

Revert a change that you have committed:

git revert <commit 1> <commit 2>

Remove untracked files (e.g., new files, generated files):

git clean -f

Remove untracked directories (e.g., new or automatically generated directories):

git clean -fd

Remove ignored files (e.g., IDE configuration):

git clean -fX

Remove ignored directories (e.g., IDE configuration, target dir)
git clean -fdX

Rebase develop branch to master. (Develop will be checked out):

git rebase master develop

Delete branch with all its commits:

git branch -D <branch-name>

Create patch file of staged changes (ignore whitespace differences, like line endings):

git diff --cached --ignore-space-change >> patch.diff

Clean up list of remote branches

git remote prune <origin>

sources:

• https://stackoverflow.com/questions/1146973/how-do-i-revert-all-local-changes-in-git-managed-project-to-previous-state
• https://stackoverflow.com/questions/7726949/remove-tracking-branches-no-longer-on-remote
• https://git-scm.com/docs/git-diff
• https://git-scm.com/docs/git-rebase

Vagrant: frequently used commands

In everyday life you'll probably use the following two commands the most: vagrant halt to shutdown your machine, and vagrant up --provision to turn it on again.

vagrant up

This command creates and configures guest machines according to your Vagrantfile.

vagrant halt

This command shuts down the running machine Vagrant is managing.

vagrant destroy

This command stops the running machine Vagrant is managing and destroys all resources that were created during the machine creation process. After running this command, your computer should be left at a clean state, as if you never created the guest machine in the first place.

vagrant up --provision

Same as vagrant up, but with forcing the provisioners to run.

source: Vagrant CLI documentation

Vue.js Component options

I wanted to collect in one place, what are all the script options that I could use within a Vue Component.

Source documentation:

• Vue.js API documentation
• Vue.js Guide
• Vue.js repo

Let's go with a component template first:

.....
<template>
  <div></div>
</template>

<script>
export default {

  // Options -- Data
  data() {},
  props: {},
  computed: {},
  methods: {},
  watch: {},

  // Options -- Lifecycle Hooks
  beforeCreate() {},
  created() {},
  beforeMount() {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  activated() {},
  deactivated() {},
  beforeDestroy() {},
  destroyed() {},

  // Options -- Assets
  directives: {
    // custom directives
  },
  filters: {},
  components: {},

  // Options -- Misc
  name: "", // only to be used as component option.
  model: { prop: "", event: ""},
}
</script>

<style>
</style>
....

There are some more options that are not available on Component templates:

.....
new Vue({
  el: '#some-element',
  template: '<div v-show="someChildProperty">Child</div>',
  render: function (createElement) {
    return createElement(
      'h' + this.level,   // tag name
      this.$slots.default // array of children
    )
  }
})
....

Note: Windows environmental variables

I ran into this problem today:
My JAVA_HOME environmental variable was defined on the user level, but I wanted to use it in Path on the system level. Well, this just does not work.
I had to define JAVA_HOME on the system level, to be able to include %JAVA_HOME%\bin in the Path.

Getting Started with Semantic UI

Whichever way you choose to work with Semantic UI, do not forget to import jQuery too, and don't forget to add it before Semantic UI.

In most cases you'll end up using a semantic.js and a semantic.css file in your website.

There are more ways to get your hand on the ones that fulfill your needs:

Default Theme

To use Semantic UI's default theme from a precompiled resource these are your options:

• Reference the files from an online source, i.e. cdnjs.com: semantic.min.js, semantic.min.css.
• Download your copy of the Semantic UI source. (You'll get the lightweight semantic-ui-css package this way)
• Add semantic-ui-css to your node project as a dependency.
  Alternately you can add semantic-ui as a node project dependency too, in this case the precompiled resources will be in the dist folder.

Non-default Theme

To use a different theme than the default, you'll have to compile your resources yourself.

Using semantic-ui repository

Build your themed semantic-ui resources with the tools of the main repo:
(for more information and installing the prerequisites see the official guide)

1. git clone or download the Semantic-UI repo
2. run npm install
3. in your /src/theme.config file, change the 'default' theme name to the theme you want to use in the components you want to use. (you can browse the /themes folder to review the possible choices)
4. run gulp build
5. your themed compiled resources will land in the /dist folder

Using semantic-ui-less repository

Building your themed semantic-ui resources using the lightweight semantic-ui-less repo is much more complicated than one would expect.
Follow this guide to make it work: Artem Butusov Blog Webpack + Customizable Semantic UI 2.x (LESS) (I found the guide in this issue of semantic-ui-less)

A day at batch scripting

Documentation: An A-Z Index of the Windows CMD command line
Tutorial: Batch Script Tutorial

• string comparison in IF is by default case sensitive. To make it case insensitive, use the /i switch. (source)
• if the last line of your code before a closing parentheses is a ::comment, like this:
  

  @echo off
  IF 1==1 (
   echo 1
   echo 2
   ::echo 3
  )

  then you'll get this error:
  

  ) was unexpected at this time.

• if the script stops after executing a command to a command line tool (i.e. npm install ), you're probably calling it without CALL. You should call it with CALL (i.e. CALL npm install). (source)
• hidden files and folders do not get detected with FOR %%a in (*) or in FOR /D %%a in (*). Here's how to query for hidden fires/folders.
• Use @echo off to avoid printing every executed line.
• if you do a SETLOCAL make sure to use ENDLOCAL at the end
• variables (source):
• SET foo=1 --> set environmental variable
  %foo% --> refer to environmental variable
  !foo! --> refer to environmental variable with delayed expansion
• %%a --> FOR loop variable referred to in batch script
  %a --> FOR loop variable referred to in command line
• variable declaration and spaces and quotes -- pay attention to these.
• delayed expansion: (source and example) --> use it if you need to create and modify variables within loops.
  

  @echo off
  setlocal enabledelayedexpansion
  set searchfor=a c
  for %%a in (a b c d) do (
      set item="%%a"
   set found=0
   ( for %%b in (%searchfor%) do (
    set candidate="%%b"
    if "!item!"=="!candidate!" (
     set found=1
    )
   )
   )
   if "!found!"=="0" (
    echo "!item!" did not match any of the search terms
   ) else (
    echo "!item!" was a match
   )
  )
  endlocal

• functions
• documentation: read here. 
• maximum length of a label is not 8 characters anymore
• execution order: (source)
  it is very important to do the navigation with goto :eof and goto :end. If these navigations are left out it can cause code segments to run multiple times
  

  @echo off
  call :foo
  call :foo2
  goto end
  
  :foo
   echo foo
   goto :eof
  :foo2
   echo foo2
   goto :eof
  :end
   echo done

• processing input arguments (source for foo; source for foo2)
  

  @echo off
  call :foo 1 2 3
  call :foo2 a b c
  goto end
  
  :foo
   for %%a in (%*) do (
    echo %%a
   )
   goto :eof
  :foo2
   echo %~1
   echo %~2
   echo %~3
   goto :eof
  :end

IntelliJ IDEA - frequently used keyboard shortcuts

Ctrl+Shift+A

Find action by name.

Shift+Shift

Search everywhere.

Alt+Enter

Show the list of available intention actions .

Ctrl+Space

Invoke code completion.

Ctrl+H

Type Hierarchy

Ctrl+P

Parameter Info

Ctrl+Q

Quick Documentation

Ctrl+F
Ctrl+R

Find/replace text string in the current file.

Ctrl+Shift+F
Ctrl+Shift+R

Find/replace text in the project or in the specified directory.

Ctrl+Alt+L

Reformat Code

Ctrl+Alt+O

Optimize Imports

Ctrl+Alt+I

Auto-Indent Lines

Shift+F6 

Refactor - Rename...

Ctrl+F6 

Refactor - Change Signature...

Ctrl+Alt+V

Refactor - Extract Variable...

Ctrl+Alt+C 

Refactor - Extract Constant...

Ctrl+Alt+F 

Refactor - Extract Field...

Ctrl+Alt+P 

Refactor - Extract Parameter...

Ctrl+Alt+M 

Refactor - Extract Method...

Ctrl+Alt+N 

Refactor - Inline...

Ctrl+D

Edit - Duplicate Line or Selection

Ctrl+Y

Edit - Delete Line

Ctrl+Shift+J

Edit - Join Lines

Tab
Shift+Tab

Edit - Indent/Unindent  Selection

Ctrl+/

Code Folding - Comment/Uncomment with Line Comment

Ctrl+Shift+/

Code Folding - Comment/Uncomment with Block Comment

Ctrl+W
Ctrl+Shift+W

Selection - Extend/Shrink  Selection

Alt+Shift+Insert OR Mouse Middle Click

Selection - Column Selection Mode (multi line editing)

Alt+Insert

Insert Live Template (see more here)

Changing author and committer info in Git histroy

The script can be found on the Git official help pages.

I added the -f argument to the command to force rewrite existing backups, which would otherwise fail the script run.

#!/bin/sh

git filter-branch -f --env-filter '
OLD_EMAIL="your-old-email@example.com"
CORRECT_NAME="Your Correct Name"
CORRECT_EMAIL="your-correct-email@example.com"
if [ "$GIT_COMMITTER_EMAIL" = "$OLD_EMAIL" ]
then
    export GIT_COMMITTER_NAME="$CORRECT_NAME"
    export GIT_COMMITTER_EMAIL="$CORRECT_EMAIL"
fi
if [ "$GIT_AUTHOR_EMAIL" = "$OLD_EMAIL" ]
then
    export GIT_AUTHOR_NAME="$CORRECT_NAME"
    export GIT_AUTHOR_EMAIL="$CORRECT_EMAIL"
fi
' --tag-name-filter cat -- --branches --tags

DO NOT REWRITE THE HISTORY OF YOUR GIT REPOSITORY IF IT WAS ALREADY PUSHED AND IS AVAILABLE FOR COLLABORATORS! 

IDEs for editing LESS files / Semantic UI Themes

The thing I'm searching for is:

Code Intelligence for LESS files with the following features:

• Go to definition across files
• Find usages across files

I started my search for an appropriate tool from the Less reference for tools.

Stuff that does that:

• IntelliJ WebStorm

Stuff that does not do that:

• Microsoft Visual Studio Code (aka. VSCode)
• Supports navigation only within file
• Sublime Text 3 + SublimeCodeIntel
• does not recognizes the LESS variables as variables at all.
• I did not try it out in ST2.
• otherwise it should work like this
• Komodo
• Development of feature in progress
• Crunch2
• Does nothing and does not even allow proper try out.
• Brackets
• does not recognizes the LESS variables as variables at all.
• Atom
• they have some nice navigation plugins, called hyperclick with extensions js-hyperclick, and file-hyperclick which are useful, but not working for less variables.

CSS: box-sizing: content-box vs border-box

Sources: http://www.w3schools.com/cssref/css3_pr_box-sizing.asp | https://css-tricks.com/box-sizing/ | http://www.binvisions.com/articles/box-sizing-property-difference-content-border/

Box-sizing

• content-box
• Default. 
• Width or height = content's width or height. Border, padding, or margin are not included

• border-box
• Width or height = content + padding + border width or height. Margin is not included.

• initial
• Sets this property to its default value.
• inherit
• Inherits this property from its parent element.

CSS position: static, relative, absolute and fixed

Sources: W3Schools CSS Layout - The position Property | CSS Tricks Absolute, Relative, Fixed Positioning: How Do They Differ?

• Static
• The default. Positioned according to the normal flow of the page.
• Not affected by the top, bottom, left, and right or z-index properties.
• It is useful when you forcefully want to remove some other positioning that was applied to the element outside of your control.
• Relative
• "Relative to itself". Relative to as if it were positioned as static.
• Affected by the top, bottom, left, right and z-index properties.
• Other content will not be adjusted to fit into any gap left by the element.
• Limits the scope of absolutely positioned child elements.
• 
  
• Absolute
• Positioned relative to the nearest non-static positioned ancestor, or the body if there are no such ancestors. 
• Affected by the top, bottom, left, right and z-index properties. 
• Does not leave a gap in the page where it would normally have been located.
• Does not affect the position of any other same-level element
• 
  
• Fixed
• Positioned relative to the viewport (or window), which means it always stays in the same place even if the page is scrolled.
• Affected by the top, bottom, left, right and z-index properties. 
• Does not leave a gap in the page where it would normally have been located.
• The downside of this element is the usability on different screen-sizes. It does not scroll, so if it does not fit the screen, the content is cropped and unreachable.
• 
  

GIT: the difference between HEAD~1 and HEAD^1

Source: Stackoverflow --> git-rev-parse manual page

^N: Nth parent of the tip of the current branch.
~N: Nth generation first parent of the tip of the current branch.

Here is an illustration, by Jon Loeliger. Both commit nodes B and C are parents of commit node A. Parent commits are ordered left-to-right.

G   H   I   J
 \ /     \ /
  D   E   F
   \  |  / \
    \ | /   |
     \|/    |
      B     C
       \   /
        \ /
         A
A =      = A^0
B = A^   = A^1     = A~1
C = A^2  = A^2
D = A^^  = A^1^1   = A~2
E = B^2  = A^^2
F = B^3  = A^^3
G = A^^^ = A^1^1^1 = A~3
H = D^2  = B^^2    = A^^^2  = A~2^2
I = F^   = B^3^    = A^^3^
J = F^2  = B^3^2   = A^^3^2

(emphasis by me)

Force LF line endings on Windows with GIT

The possible git settings for line endings are:

• Checkout Windows-style, commit Unix-style
  Git will convert LF to CRLF when checking out text files. When committing text files, CRLF will be converted to LF.
  Git will not perform any conversion when checking out text files. When committing text files, CRLF will be converted to LF.
  Git will not perform any conversions when checking out or committing text files. 

  git config --global core.autocrlf true

• Checkout as-is, commit Unix-style

  git config --global core.autocrlf input

• Checkout as-is, commit as-is

  git config --global core.autocrlf false

Solution on Stackoverflow:

The proper way to get LF endings in Windows is to first set core.autocrlf to false:

git config --global core.autocrlf false

Now git won’t do any line ending normalization.
If you want files you check in to be normalized, do this:
Set text=auto in your .gitattributes for all files:

* text=auto

And set core.eol to lf:

git config --global core.eol lf

Now you can also switch single repos to crlf (in the working directory!) by running

git config core.eol crlf

After you have done the configuration, you might want git to normalize all the files in the repo. To do this, go to to the root of your repo and run these commands:

git rm --cached -rf .
git diff --cached --name-only -z | xargs -n 50 -0 git add -f

If you now wano also normalize the files in your working directory, run these commands:

git ls-files -z | xargs -0 rm
git checkout .

Personal opinion: 
I set core.autocrlf to input, to make sure that the repo gets LF line endings always.