Quicker Branch Merging

Assume I’m on the feature/hello branch. I want to checkout to the staging branch, merge feature/hello into that, and checkout back to feature/hello.

Instead of doing this:

$ git checkout staging
$ git merge feature/hello
$ git checkout feature/hello

We can do this:

$ git checkout staging
$ git merge -
$ git checkout -

Basically, - refers to the previous branch.

Tags: git

Opening Files with Conflicts

After a merge, I would usually do git status to see which files have conflicts to be resolved. Then, I would manually open the files listed under unmerged paths one by one with Vim to edit them.

$ git status
On branch develop
Your branch is ahead of 'origin/develop' by 2 commits.
  (use "git push" to publish your local commits)

You have unmerged paths.
  (fix conflicts and run "git commit")
  (use "git merge --abort" to abort the merge)

Unmerged paths:
  (use "git add <file>..." to mark resolution)

    both modified:   package.json
    both modified:   pages/main.js

no changes added to commit (use "git add" and/or "git commit -a")

Actually, we can get that list of files with git diff --name-only --diff-filter=U.

$ git diff --name-only --diff-filter=U
package.json
pages/main.js

To make it easier to edit all conflicted files, you can add a git alias in .gitconfig, so you can do git conflicts.

[alias]
    conflicts = !vim `git diff --name-only --diff-filter=U`

Alternatively, you can also use a shell alias, so you can do conflicts.

alias conflicts='vim $(git diff --name-only --diff-filter=U)'

Tags: git

Opening URLs in Vim

vim https://www.chunkhang.com/

Tags: vim

Using `nth-child` to select every N element in CSS

We know that we can use nth-child to apply specific style targeted elements. For example, to style the .col who is a second child to its parent, we can use the .col:nth-child(2) syntax.

<style>
  .flex { display: flex; flex-wrap: wrap; }
  .col { width: 25%; }
  .col:nth-child(2) { color: red; }
</style>

<div class="flex">
  <div class="col">Col 1</div>
  <div class="col">Col 2</div> <!-- This will be red color -->
  <div class="col">Col 3</div>
  <div class="col">Col 4</div>
  <div class="col">Col 5</div>
  <div class="col">Col 6</div>
  <div class="col">Col 7</div>
  <div class="col">Col 8</div>
</div>

However, nth-child can achieve more. It also accepts keywords and formula as its parameter.

Even and Odd

Using back the same example, we can style the even number children as red by using .col:nth-child(even).

<style>
  ...
  .col:nth-child(even) { color: red; }
</style>

<div class="flex">
  <div class="col">Col 1</div>
  <div class="col">Col 2</div> <!-- This will be red color -->
  <div class="col">Col 3</div>
  <div class="col">Col 4</div> <!-- This will be red color -->
</div>

Formula

What if we need to style every 4th elements, for example, the 4th, 8th, 12th and 4(N)th elements?

nth-child also accepts a formula in the form of nth-child(an + b) where a is the cycle size and n is the counter (starts from 0).

To achieve the example mentioned, you can use nth-child(4n).

<style>
  ...
  .col:nth-child(4n) { color: red; }
</style>

<div class="flex">
  <div class="col">Col 1</div>
  <div class="col">Col 2</div> 
  <div class="col">Col 3</div>
  <div class="col">Col 4</div> <!-- This will be red color -->
  <div class="col">Col 5</div>
  <div class="col">Col 6</div>
  <div class="col">Col 7</div>
  <div class="col">Col 8</div> <!-- This will be red color -->
</div>

Tags: css

History Substitution

Use !! for history substitution in shells like bash and zsh.

$ ag -l apple
a.txt
b.js
c.scss
$ vim $(!!)
-> equivalent to running vim $(ag -l apple)

Tags: shell