Earlier this morning, someone out of nowhere deployed some ridiculously shady website under my domain name.

And here's how it went.

## GitHub pages

[GitHub pages](https://pages.GitHub.com/) lets us deploy our repositories as websites for free, which then hosted under GitHub's URL `<username>.GitHub.io/<repository>` , in other word, it is [Vercel](https://vercel.com) but for old men with only static sites.

By default, the URL will include `repository` name as the pathname, but we can create a special repository with a particular name `<username>.GitHub.io` to deploy the website to the root path, let's just call it the _root repository_.

Moreover, we can also use custom domain name, which includes adding some records in the DNS configuration.

## Domain takeover issue

I was in the middle of revamping my old blog website to the new one, which I didn't plan if not because of the issue I encountered when running it locally due to broken dependency, which I was too lazy to fix.

Initially, I created a new repository to hold the new website to work on the new layout and some testing.

Before I proceed to merge the changes to the old blog repository, I had an idea to put other stuff besides blog posts in this new website, so I planned to use the _root repository_ so I can deploy it at the root path.

The _root repository_ has the old content as well, but since I don't need it anymore I proceed to nuke it out of existence with the delete button, planning to create a new one for the new website.

Little did I know, that repository was holding the only thing that tied my domain to my GitHub repository: the **Custom Domain** section in the repository configuration.

![custom domain section](./custom-domain-config-section.png)

Right after that, before I had the chance to finish the setup for the new repository, I went away to check on my website and I was humiliated with what I saw.

Behold: a poorly crafted gambling website targeted for people with poor judgement!

![silly](./shady-gambling-website.jpeg)

I believe that was done using some automated bot or something similar, because it happened not long after I deleted my GitHub repository that has the custom domain configuration.

Naturally, I tried to regain control over my domain name by configuring custom domain in my repository, but to my surprise, GitHub displays an error message saying that the domain has already been taken.

It was at this moment I realized that apparently my blog has been hosted without domain verification.

So I went to update my DNS configuration and finally I regain back my domain name.

## Securing custom domain

I will admit that part of this embarrassment is no doubt a mistake on my end.

They have indeed [warned](https://docs.GitHub.com/en/pages/configuring-a-custom-domain-for-your-GitHub-pages-site/managing-a-custom-domain-for-your-GitHub-pages-site#securing-your-custom-domain) the users to secure their domain.

I'm quite surprised because the process to _secure_ my domain is actually as simple as adding a `TXT` record in the DNS configuration.

I am by no means a security expert, but I don't understand why they even let users proceed to use the domain without ensuring domain ownership.

If they assumed the users are familiar with DNS configuration security, why didn't they just just skip the warning and enforce the domain ownership verification?

Or, if they assume otherwise, why didn't they enforce it anyway since the process is quick and easy! (I guess?)

Earlier this morning, someone out of nowhere deployed some ridiculously shady website under my domain name.
And here's how it went.
<h2>GitHub pages</h2>
<a href="https://pages.GitHub.com/">GitHub pages</a> lets us deploy our repositories as websites for free, which then hosted under GitHub's URL <code>&#x3C;username>.GitHub.io/&#x3C;repository></code> , in other word, it is <a href="https://vercel.com">Vercel</a> but for old men with only static sites.
By default, the URL will include <code>repository</code> name as the pathname, but we can create a special repository with a particular name <code>&#x3C;username>.GitHub.io</code> to deploy the website to the root path, let's just call it the root repository.
Moreover, we can also use custom domain name, which includes adding some records in the DNS configuration.
<h2>Domain takeover issue</h2>
I was in the middle of revamping my old blog website to the new one, which I didn't plan if not because of the issue I encountered when running it locally due to broken dependency, which I was too lazy to fix.
Initially, I created a new repository to hold the new website to work on the new layout and some testing.
Before I proceed to merge the changes to the old blog repository, I had an idea to put other stuff besides blog posts in this new website, so I planned to use the root repository so I can deploy it at the root path.
The root repository has the old content as well, but since I don't need it anymore I proceed to nuke it out of existence with the delete button, planning to create a new one for the new website.
Little did I know, that repository was holding the only thing that tied my domain to my GitHub repository: the Custom Domain section in the repository configuration.
<img src="/assets/blog/github-pages-domain-takeover/custom-domain-config-section.png" alt="custom domain section">
Right after that, before I had the chance to finish the setup for the new repository, I went away to check on my website and I was humiliated with what I saw.
Behold: a poorly crafted gambling website targeted for people with poor judgement!
<img src="/assets/blog/github-pages-domain-takeover/shady-gambling-website.jpeg" alt="silly">
I believe that was done using some automated bot or something similar, because it happened not long after I deleted my GitHub repository that has the custom domain configuration.
Naturally, I tried to regain control over my domain name by configuring custom domain in my repository, but to my surprise, GitHub displays an error message saying that the domain has already been taken.
It was at this moment I realized that apparently my blog has been hosted without domain verification.
So I went to update my DNS configuration and finally I regain back my domain name.
<h2>Securing custom domain</h2>
I will admit that part of this embarrassment is no doubt a mistake on my end.
They have indeed <a href="https://docs.GitHub.com/en/pages/configuring-a-custom-domain-for-your-GitHub-pages-site/managing-a-custom-domain-for-your-GitHub-pages-site#securing-your-custom-domain">warned</a> the users to secure their domain.
I'm quite surprised because the process to secure my domain is actually as simple as adding a <code>TXT</code> record in the DNS configuration.
I am by no means a security expert, but I don't understand why they even let users proceed to use the domain without ensuring domain ownership.
If they assumed the users are familiar with DNS configuration security, why didn't they just just skip the warning and enforce the domain ownership verification?
Or, if they assume otherwise, why didn't they enforce it anyway since the process is quick and easy! (I guess?)

The most notable change is in version 4, Tailwind CSS no longer use `tailwind.config.ts` configuration file.

To add custom color or other customisation, we define variables under `@theme` directive inside CSS file.

```css
/* index.css */
import "tailwindcss";

@theme {
 --color-prime-teal: #008080;
 --font-poppins: Poppins, sans-serif;
}
```

There are set of predefined variable prefixes which they call [theme variable namespace](https://tailwindcss.com/docs/theme#theme-variable-namespaces).

```css
--color-*
--font-*
--text-*
...
```

Each prefix will generate its corresponding utility classes.

```html
Prime Teal
```

The most notable change is in version 4, Tailwind CSS no longer use <code>tailwind.config.ts</code> configuration file.
To add custom color or other customisation, we define variables under <code>@theme</code> directive inside CSS file.
<pre><code class="hljs language-css">/* index.css */
import "tailwindcss";

@theme {
 --color-prime-teal: #008080;
 --font-poppins: Poppins, sans-serif;
}
</code></pre>
There are set of predefined variable prefixes which they call <a href="https://tailwindcss.com/docs/theme#theme-variable-namespaces">theme variable namespace</a>.
<pre><code class="hljs language-css">--color-*
--font-*
--text-*
...
</code></pre>
Each prefix will generate its corresponding utility classes.
<pre><code class="hljs language-html">&#x3C;p class="color-prime-teal font-poppins">Prime Teal&#x3C;/p>
</code></pre>


## Motivation

I'm using [folke's lazyvim](https://www.lazyvim.org/) and the default lualine setup looks like the following.

![default lualine setup](default-lualine.png)

I want to have a statusline that is similar to that in VS Code.
It is simple, yet provide useful informations.

![vscode status bar](vscode-status-bar.png)

## Configuration options

The first step is to reset the options.

```lua
local colors = require("tokyonight.colors").moon()
local config = {
  options = {
    -- Disable sections and component separators
    component_separators = "",
    section_separators = "",
    theme = {
      normal = { c = { fg = colors.fg, bg = colors.bg } },
      inactive = { c = { fg = colors.fg, bg = colors.bg } },
    },
  },
  sections = {
    -- these are to remove the defaults
    lualine_a = {},
    lualine_b = {},
    lualine_y = {},
    lualine_z = {},
    -- These will be filled later
    lualine_c = {},
    lualine_x = {},
  },
  inactive_sections = {
    -- these are to remove the defaults
    lualine_a = {},
    lualine_b = {},
    lualine_y = {},
    lualine_z = {},
    lualine_c = {},
    lualine_x = {},
  },
}

```

Notice that my setup depends on the `tokyonight` colorscheme, but it can be adjusted accordingly.
The Idea is to setup a baseline options for lualine.

Next, we create a helper function to insert component to the left and right side of the statusline.

```lua
local function insert_left(component)
  table.insert(config.sections.lualine_c, component)
end

local function insert_right(component)
  table.insert(config.sections.lualine_x, component)
end
```

We can start using the function to add desired component accordingly.

Here's the components on the left side.

```lua
insert_left({
  "branch",
  icon = "",
  color = { fg = colors.fg, bg = colors.bg, gui = "bold" },
})

insert_left({
  "diff",
  symbols = { added = " ", modified = " ", removed = " " },
  diff_color = {
    added = { fg = colors.green },
    modified = { fg = colors.orange },
    removed = { fg = colors.red },
  },
  cond = conditions.hide_in_width,
})

insert_left({
  "diagnostics",
  sources = { "nvim_diagnostic" },
  symbols = { error = " ", warn = " ", info = " " },
  diagnostics_color = {
    color_error = { fg = colors.red },
    color_warn = { fg = colors.yellow },
    color_info = { fg = colors.cyan },
  },
})

insert_left({
  function()
    return "%="
  end,
})
```

And here's the components on the right side.

```lua
insert_right({
  "location",
  color = { fg = colors.fg_dark },
  cond = conditions.buffer_not_empty,
})

insert_right({
  "encoding",
})

insert_right({
  "filetype",
})
```

Easy enough.

And here's the result.

![the result](the-result.png)

## Appendix

Most of neovim statusline setup displays the filename on the statusline.
I intentionally omit the filename because I personally think it is unnecessary.
But I do still want to know which file I'm currently working on.

The lazyvim's comes with a plugin called [bufferline.nvim](https://github.com/akinsho/bufferline.nvim) to display buffers along with its filename.

Additionally, I also use another plugin called [barbeque.nvim](https://github.com/utilyre/barbecue.nvim) to display _breadcrumb_, inspired by VS Code.

And here's the final result.

![the final result](the-final-result.png)

Find my full neovim configuration in [the repo](https://github.com/pirey/nvim).


<h2>Motivation</h2>
I'm using <a href="https://www.lazyvim.org/">folke's lazyvim</a> and the default lualine setup looks like the following.
<img src="/assets/blog/customizing-nvim-lualine/default-lualine.png" alt="default lualine setup">
I want to have a statusline that is similar to that in VS Code.
It is simple, yet provide useful informations.
<img src="/assets/blog/customizing-nvim-lualine/vscode-status-bar.png" alt="vscode status bar">
<h2>Configuration options</h2>
The first step is to reset the options.
<pre><code class="hljs language-lua">local colors = require("tokyonight.colors").moon()
local config = {
 options = {
 -- Disable sections and component separators
 component_separators = "",
 section_separators = "",
 theme = {
 normal = { c = { fg = colors.fg, bg = colors.bg } },
 inactive = { c = { fg = colors.fg, bg = colors.bg } },
 },
 },
 sections = {
 -- these are to remove the defaults
 lualine_a = {},
 lualine_b = {},
 lualine_y = {},
 lualine_z = {},
 -- These will be filled later
 lualine_c = {},
 lualine_x = {},
 },
 inactive_sections = {
 -- these are to remove the defaults
 lualine_a = {},
 lualine_b = {},
 lualine_y = {},
 lualine_z = {},
 lualine_c = {},
 lualine_x = {},
 },
}

</code></pre>
Notice that my setup depends on the <code>tokyonight</code> colorscheme, but it can be adjusted accordingly.
The Idea is to setup a baseline options for lualine.
Next, we create a helper function to insert component to the left and right side of the statusline.
<pre><code class="hljs language-lua">local function insert_left(component)
 table.insert(config.sections.lualine_c, component)
end

local function insert_right(component)
 table.insert(config.sections.lualine_x, component)
end
</code></pre>
We can start using the function to add desired component accordingly.
Here's the components on the left side.
<pre><code class="hljs language-lua">insert_left({
 "branch",
 icon = "",
 color = { fg = colors.fg, bg = colors.bg, gui = "bold" },
})

insert_left({
 "diff",
 symbols = { added = " ", modified = " ", removed = " " },
 diff_color = {
 added = { fg = colors.green },
 modified = { fg = colors.orange },
 removed = { fg = colors.red },
 },
 cond = conditions.hide_in_width,
})

insert_left({
 "diagnostics",
 sources = { "nvim_diagnostic" },
 symbols = { error = " ", warn = " ", info = " " },
 diagnostics_color = {
 color_error = { fg = colors.red },
 color_warn = { fg = colors.yellow },
 color_info = { fg = colors.cyan },
 },
})

insert_left({
 function()
 return "%="
 end,
})
</code></pre>
And here's the components on the right side.
<pre><code class="hljs language-lua">insert_right({
 "location",
 color = { fg = colors.fg_dark },
 cond = conditions.buffer_not_empty,
})

insert_right({
 "encoding",
})

insert_right({
 "filetype",
})
</code></pre>
Easy enough.
And here's the result.
<img src="/assets/blog/customizing-nvim-lualine/the-result.png" alt="the result">
<h2>Appendix</h2>
Most of neovim statusline setup displays the filename on the statusline.
I intentionally omit the filename because I personally think it is unnecessary.
But I do still want to know which file I'm currently working on.
The lazyvim's comes with a plugin called <a href="https://github.com/akinsho/bufferline.nvim">bufferline.nvim</a> to display buffers along with its filename.
Additionally, I also use another plugin called <a href="https://github.com/utilyre/barbecue.nvim">barbeque.nvim</a> to display breadcrumb, inspired by VS Code.
And here's the final result.
<img src="/assets/blog/customizing-nvim-lualine/the-final-result.png" alt="the final result">
Find my full neovim configuration in <a href="https://github.com/pirey/nvim">the repo</a>.

In TypeScript, we can run multiple async promises concurrently using the
[`Promise.all()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all) and [`Promise.allSettled()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/allSettled) function.

With `Promise.all()` we might _lose_ the results if any
of the promises reject.

```typescript
const ps = [
 Promise.resolve(1),
 Promise.reject("error for some reason"),
 Promise.resolve(2),
];

Promise.all(ps).then(console.log).catch(console.error);
// .. will print out "error for some reason"
```

On the other hand, `Promise.allSettled()` is usually a better option if we want
to get all the results regardless of wheter promise is resolved or rejected.

```typescript
const ps = [
 Promise.resolve(1),
 Promise.reject("error for some reason"),
 Promise.resolve(2),
];

Promise.all(ps).then(console.log).catch(console.error);
// [
// { status: 'fulfilled', value: 1 },
// { status: 'rejected', reason: 'some reason' },
// { status: 'fulfilled', value: 2 }
// ]
```

To retrieve all the resolved promises only, we can filter the results.

```typescript
const promises = [
 Promise.resolve(1),
 Promise.resolve(2),
 Promise.reject("error for some reason"),
 Promise.resolve(4),
 Promise.resolve(5),
];
const results = await Promise.allSettled(promises);
const resolvedPromises = results
 .filter((resulve) => result.status === "fulfilled")
 .map((result) => result.value);
// .. [1, 2, 4, 5]
```

However, when we have many promises, we might face high memory consumption.
Imagine we have a list of namespaces, then we want to retrieve all users for each of those namespaces.

```typescript
function getUserByNamespace(namespace) {
 return fetch(`namespace/${namespace}/users`) // each namespace might have hundreds if not thousands of users
}

const namespaces = ['namespace1', 'namespace2', ..., 'namespace896'] // suppose we have hundreds of namespaces
const users = await Promise.allSettled(namespaces.map(getUserByNamespaces))
 .filter(resulve => result.status === 'fulfilled')
 .map(result => result.value)
// .. [user1, user2, user3, ..., userN]
```

In this case, one simple solution is to divide the promises into multiple smaller ones, then process them sequentially.

First, we divide the list of namespaces into chunks of namespaces.

```typescript
function chunkArray<T>(array: T[], chunkSize: number): T[][] {
 return Array.from(
 { length: Math.ceil(array.length / chunkSize) },
 (_, index) => array.slice(index * chunkSize, (index + 1) * chunkSize),
 );
}

const namespaces = [
 "namespace1",
 "namespace2",
 "namespac3",
 "namespace4",
 "namespace5",
 "namespace6",
];
const namespaceChunks = chunkArray(namespaces, 2);
// [
// ['namespace1', 'namespace2'],
// ['namespace3', 'namespace4'],
// ['namespace5', 'namespace6'],
// ]
```

Then we loop the chunks and handle the promises sequentially.
Also, we use the `Map()` data type to store the results to avoid redundancy.

```typescript
const users = new Map();
for (const namespaceChunk of namespaceChunks) {
 const namespaceUsers = await Promise.allSettled(
 namespaceChunk.map(getUserByNamespace),
 );

 namespaceUsers.forEach((result) => {
 if (result.status === "fulfilled") {
 const user = result.value;
 users.set(user.id, user);
 }
 });
}

console.log(Array.from(users.values()));
// .. [user1, user2, user3, ..., userN]
```

In TypeScript, we can run multiple async promises concurrently using the
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all"><code>Promise.all()</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/allSettled"><code>Promise.allSettled()</code></a> function.
With <code>Promise.all()</code> we might lose the results if any
of the promises reject.
<pre><code class="hljs language-typescript">const ps = [
 Promise.resolve(1),
 Promise.reject("error for some reason"),
 Promise.resolve(2),
];

Promise.all(ps).then(console.log).catch(console.error);
// .. will print out "error for some reason"
</code></pre>
On the other hand, <code>Promise.allSettled()</code> is usually a better option if we want
to get all the results regardless of wheter promise is resolved or rejected.
<pre><code class="hljs language-typescript">const ps = [
 Promise.resolve(1),
 Promise.reject("error for some reason"),
 Promise.resolve(2),
];

Promise.all(ps).then(console.log).catch(console.error);
// [
// { status: 'fulfilled', value: 1 },
// { status: 'rejected', reason: 'some reason' },
// { status: 'fulfilled', value: 2 }
// ]
</code></pre>
To retrieve all the resolved promises only, we can filter the results.
<pre><code class="hljs language-typescript">const promises = [
 Promise.resolve(1),
 Promise.resolve(2),
 Promise.reject("error for some reason"),
 Promise.resolve(4),
 Promise.resolve(5),
];
const results = await Promise.allSettled(promises);
const resolvedPromises = results
 .filter((resulve) => result.status === "fulfilled")
 .map((result) => result.value);
// .. [1, 2, 4, 5]
</code></pre>
However, when we have many promises, we might face high memory consumption.
Imagine we have a list of namespaces, then we want to retrieve all users for each of those namespaces.
<pre><code class="hljs language-typescript">function getUserByNamespace(namespace) {
 return fetch(`namespace/${namespace}/users`) // each namespace might have hundreds if not thousands of users
}

const namespaces = ['namespace1', 'namespace2', ..., 'namespace896'] // suppose we have hundreds of namespaces
const users = await Promise.allSettled(namespaces.map(getUserByNamespaces))
 .filter(resulve => result.status === 'fulfilled')
 .map(result => result.value)
// .. [user1, user2, user3, ..., userN]
</code></pre>
In this case, one simple solution is to divide the promises into multiple smaller ones, then process them sequentially.
First, we divide the list of namespaces into chunks of namespaces.
<pre><code class="hljs language-typescript">function chunkArray&#x3C;T>(array: T[], chunkSize: number): T[][] {
 return Array.from(
 { length: Math.ceil(array.length / chunkSize) },
 (_, index) => array.slice(index * chunkSize, (index + 1) * chunkSize),
 );
}

const namespaces = [
 "namespace1",
 "namespace2",
 "namespac3",
 "namespace4",
 "namespace5",
 "namespace6",
];
const namespaceChunks = chunkArray(namespaces, 2);
// [
// ['namespace1', 'namespace2'],
// ['namespace3', 'namespace4'],
// ['namespace5', 'namespace6'],
// ]
</code></pre>
Then we loop the chunks and handle the promises sequentially.
Also, we use the <code>Map()</code> data type to store the results to avoid redundancy.
<pre><code class="hljs language-typescript">const users = new Map();
for (const namespaceChunk of namespaceChunks) {
 const namespaceUsers = await Promise.allSettled(
 namespaceChunk.map(getUserByNamespace),
 );

 namespaceUsers.forEach((result) => {
 if (result.status === "fulfilled") {
 const user = result.value;
 users.set(user.id, user);
 }
 });
}

console.log(Array.from(users.values()));
// .. [user1, user2, user3, ..., userN]
</code></pre>

## Prerequisites

The customization relies on the following plugins.

- [lazy.nvim](https://github.com/folke/lazy.nvim) plugin manager, to define telescope setup options
- [tokyonight](https://github.com/folke/tokyonight.nvim) colorscheme, to define color highlight

## Motivation

I don't like the default layout configuration because I consider it _not clean_.

![Initial](./0-initial.png)

I really appreciate the preview feature even though I'm not rely heavily on it, but sometimes I can't see them clear enough.

As you can see, the preview width is narrower than the width of the result list.

I can adjust the preview width to be larger, but then I need to reduce the width of the result list, which will make it hard to look if I have files with long name. The worse thing than that is the layout will look weird.

Then why don't we leverage the full size of our screen?

So here's what I did.

![Final](./final.png)

## Remove border

![Remove Border](./1-remove-border.png)

Technically, I just changed the color highlight or the border to match the color of the background.

As I mention in the prerequisites section above, I'm using tokyonight theme, and it provides a configuration option to override the highlight of a highlight group.

```lua
local function highlight_telescope(hl, c)
 local prompt = c.bg
 hl.TelescopeNormal = {
 bg = c.bg,
 fg = c.fg,
 }
 hl.TelescopeBorder = {
 bg = c.bg,
 fg = c.bg,
 }
 hl.TelescopePromptNormal = {
 bg = prompt,
 }
 hl.TelescopePromptBorder = {
 bg = prompt,
 fg = prompt,
 }
 hl.TelescopePromptTitle = {
 bg = c.bg_highlight,
 fg = c.fg,
 }
 hl.TelescopePreviewTitle = {
 bg = c.bg,
 fg = c.bg,
 }
 hl.TelescopeResultsTitle = {
 bg = c.bg,
 fg = c.bg,
 }
 hl.NoiceCmdlinePopupBorder = {
 bg = c.bg,
 fg = c.bg,
 }
end

return {
 {
 "folke/tokyonight.nvim",
 opts = {
 on_highlights = function(hl, c)
 highlight_telescope(hl, c)
 end,
 },
 },
}

```

## Maximize width and height

The next step is to determine how to maximize the width and height.

The `width` and `height` option can be specified using percentage values (>= 0 and < 1) or fixed values (>= 1).

In other words, we can't specify the width to have 100% width (unless we calculate the screen width manually).

Luckily, telescope provides an easy way to make it happen, even though it's unclear at first glance.

Instead of specifying fixed or percentage values for the `width` and `height`, we can instead specify the padding, so we can just set the padding to 0.

See `:h telescope.resolve.resolve_width()`

```lua
return {
 {
 "nvim-telescope/telescope.nvim",
 opts = {
 defaults = {
 layout_strategy = "horizontal",
 layout_config = {
 horizontal = {
 prompt_position = "top",
 width = { padding = 0 },
 height = { padding = 0 },
 preview_width = 0.5,
 },
 },
 sorting_strategy = "ascending",
 },
 },
 },
}
```

 

![Max Width](./2-fullscreen.png)

## Full screen

The maximized height does not take up the `statusline` and `tabline` space, so it still show up.

We can make it cleaner and make the telescope real full screen.

There's no option provided by telescope to do it, but we can always use vim's auto command.

The idea is to hide the `statusline` and `tabline` each time we open telescope.

```lua
 -- keeps track of current `tabline` and `statusline`, so we can restore it after closing telescope
local temp_showtabline
local temp_laststatus

function _G.global_telescope_find_pre()
 temp_showtabline = vim.o.showtabline
 temp_laststatus = vim.o.laststatus
 vim.o.showtabline = 0
 vim.o.laststatus = 0
end

function _G.global_telescope_leave_prompt()
 vim.o.laststatus = temp_laststatus
 vim.o.showtabline = temp_showtabline
end

vim.cmd([[
 augroup MyAutocmds
 autocmd!
 autocmd User TelescopeFindPre lua global_telescope_find_pre()
 autocmd FileType TelescopePrompt autocmd BufLeave <buffer> lua global_telescope_leave_prompt()
 augroup END
]])
```

 

![Full Screen](./2-fullscreen.png)

## Customize path display

> **Update**: telescope.nvim now support this option out of the box (with better highlighting) after this [commit](https://github.com/nvim-telescope/telescope.nvim/commit/a4432dfb9b0b960c4cbc8765a42dc4fe2e029e8f).
>
> Just need to enable it like so:

```lua
path_display = {
 "filename_first",
},
```

---

By default, telescope will display full or relative file name with its directory name.

It makes it hard to scan the file name that I want to open.

I want it to show the file name and its directory name separately.

```
filename.ext ~ path/to/parent/directory
```

Telescope provide an option to format the path display.

```lua
local function normalize_path(path)
 return path:gsub("\\", "/")
end

local function normalize_cwd()
 return normalize_path(vim.loop.cwd()) .. "/"
end

local function is_subdirectory(cwd, path)
 return string.lower(path:sub(1, #cwd)) == string.lower(cwd)
end

local function split_filepath(path)
 local normalized_path = normalize_path(path)
 local normalized_cwd = normalize_cwd()
 local filename = normalized_path:match("[^/]+$")

 if is_subdirectory(normalized_cwd, normalized_path) then
 local stripped_path = normalized_path:sub(#normalized_cwd + 1, -(#filename + 1))
 return stripped_path, filename
 else
 local stripped_path = normalized_path:sub(1, -(#filename + 1))
 return stripped_path, filename
 end
end

local function path_display(_, path)
 local stripped_path, filename = split_filepath(path)
 if filename == stripped_path or stripped_path == "" then
 return filename
 end
 return string.format("%s ~ %s", filename, stripped_path)
end

return {
 {
 "nvim-telescope/telescope.nvim",
 opts = {
 defaults = {
 --
 --
 -- specify the formatter here
 path_display = path_display,
 },
 },
 },
}
```

 

![Path Display](./4-path-display.png)

<h2>Prerequisites</h2>
The customization relies on the following plugins.
<ul>
<li><a href="https://github.com/folke/lazy.nvim">lazy.nvim</a> plugin manager, to define telescope setup options</li>
<li><a href="https://github.com/folke/tokyonight.nvim">tokyonight</a> colorscheme, to define color highlight</li>
</ul>
<h2>Motivation</h2>
I don't like the default layout configuration because I consider it not clean.
<img src="/assets/blog/customizing-nvim-telescope/0-initial.png" alt="Initial">
I really appreciate the preview feature even though I'm not rely heavily on it, but sometimes I can't see them clear enough.
As you can see, the preview width is narrower than the width of the result list.
I can adjust the preview width to be larger, but then I need to reduce the width of the result list, which will make it hard to look if I have files with long name. The worse thing than that is the layout will look weird.
Then why don't we leverage the full size of our screen?
So here's what I did.
<img src="/assets/blog/customizing-nvim-telescope/final.png" alt="Final">
<h2>Remove border</h2>
<img src="/assets/blog/customizing-nvim-telescope/1-remove-border.png" alt="Remove Border">
Technically, I just changed the color highlight or the border to match the color of the background.
As I mention in the prerequisites section above, I'm using tokyonight theme, and it provides a configuration option to override the highlight of a highlight group.
<pre><code class="hljs language-lua">local function highlight_telescope(hl, c)
 local prompt = c.bg
 hl.TelescopeNormal = {
 bg = c.bg,
 fg = c.fg,
 }
 hl.TelescopeBorder = {
 bg = c.bg,
 fg = c.bg,
 }
 hl.TelescopePromptNormal = {
 bg = prompt,
 }
 hl.TelescopePromptBorder = {
 bg = prompt,
 fg = prompt,
 }
 hl.TelescopePromptTitle = {
 bg = c.bg_highlight,
 fg = c.fg,
 }
 hl.TelescopePreviewTitle = {
 bg = c.bg,
 fg = c.bg,
 }
 hl.TelescopeResultsTitle = {
 bg = c.bg,
 fg = c.bg,
 }
 hl.NoiceCmdlinePopupBorder = {
 bg = c.bg,
 fg = c.bg,
 }
end

return {
 {
 "folke/tokyonight.nvim",
 opts = {
 on_highlights = function(hl, c)
 highlight_telescope(hl, c)
 end,
 },
 },
}

</code></pre>
<h2>Maximize width and height</h2>
The next step is to determine how to maximize the width and height.
The <code>width</code> and <code>height</code> option can be specified using percentage values (>= 0 and &#x3C; 1) or fixed values (>= 1).
In other words, we can't specify the width to have 100% width (unless we calculate the screen width manually).
Luckily, telescope provides an easy way to make it happen, even though it's unclear at first glance.
Instead of specifying fixed or percentage values for the <code>width</code> and <code>height</code>, we can instead specify the padding, so we can just set the padding to 0.
See <code>:h telescope.resolve.resolve_width()</code>
<pre><code class="hljs language-lua">return {
 {
 "nvim-telescope/telescope.nvim",
 opts = {
 defaults = {
 layout_strategy = "horizontal",
 layout_config = {
 horizontal = {
 prompt_position = "top",
 width = { padding = 0 },
 height = { padding = 0 },
 preview_width = 0.5,
 },
 },
 sorting_strategy = "ascending",
 },
 },
 },
}
</code></pre>
<img src="/assets/blog/customizing-nvim-telescope/2-fullscreen.png" alt="Max Width">
<h2>Full screen</h2>
The maximized height does not take up the <code>statusline</code> and <code>tabline</code> space, so it still show up.
We can make it cleaner and make the telescope real full screen.
There's no option provided by telescope to do it, but we can always use vim's auto command.
The idea is to hide the <code>statusline</code> and <code>tabline</code> each time we open telescope.
<pre><code class="hljs language-lua"> -- keeps track of current `tabline` and `statusline`, so we can restore it after closing telescope
local temp_showtabline
local temp_laststatus

function _G.global_telescope_find_pre()
 temp_showtabline = vim.o.showtabline
 temp_laststatus = vim.o.laststatus
 vim.o.showtabline = 0
 vim.o.laststatus = 0
end

function _G.global_telescope_leave_prompt()
 vim.o.laststatus = temp_laststatus
 vim.o.showtabline = temp_showtabline
end

vim.cmd([[
 augroup MyAutocmds
 autocmd!
 autocmd User TelescopeFindPre lua global_telescope_find_pre()
 autocmd FileType TelescopePrompt autocmd BufLeave &#x3C;buffer> lua global_telescope_leave_prompt()
 augroup END
]])
</code></pre>
<img src="/assets/blog/customizing-nvim-telescope/2-fullscreen.png" alt="Full Screen">
<h2>Customize path display</h2>
<blockquote>
Update: telescope.nvim now support this option out of the box (with better highlighting) after this <a href="https://github.com/nvim-telescope/telescope.nvim/commit/a4432dfb9b0b960c4cbc8765a42dc4fe2e029e8f">commit</a>.
Just need to enable it like so:
</blockquote>
<pre><code class="hljs language-lua">path_display = {
 "filename_first",
},
</code></pre>
<hr>
By default, telescope will display full or relative file name with its directory name.
It makes it hard to scan the file name that I want to open.
I want it to show the file name and its directory name separately.
<pre><code>filename.ext ~ path/to/parent/directory
</code></pre>
Telescope provide an option to format the path display.
<pre><code class="hljs language-lua">local function normalize_path(path)
 return path:gsub("\\", "/")
end

local function normalize_cwd()
 return normalize_path(vim.loop.cwd()) .. "/"
end

local function is_subdirectory(cwd, path)
 return string.lower(path:sub(1, #cwd)) == string.lower(cwd)
end

local function split_filepath(path)
 local normalized_path = normalize_path(path)
 local normalized_cwd = normalize_cwd()
 local filename = normalized_path:match("[^/]+$")

 if is_subdirectory(normalized_cwd, normalized_path) then
 local stripped_path = normalized_path:sub(#normalized_cwd + 1, -(#filename + 1))
 return stripped_path, filename
 else
 local stripped_path = normalized_path:sub(1, -(#filename + 1))
 return stripped_path, filename
 end
end

local function path_display(_, path)
 local stripped_path, filename = split_filepath(path)
 if filename == stripped_path or stripped_path == "" then
 return filename
 end
 return string.format("%s ~ %s", filename, stripped_path)
end

return {
 {
 "nvim-telescope/telescope.nvim",
 opts = {
 defaults = {
 --
 --
 -- specify the formatter here
 path_display = path_display,
 },
 },
 },
}
</code></pre>
<img src="/assets/blog/customizing-nvim-telescope/4-path-display.png" alt="Path Display">

Previously I've been using neovim alongside tmux for spinning up quick terminal session. But when I open new tmux pane or window, the layout of my screen is changed and it is kinda break my state of focus when writing code. I find it more pleasant to open terminal inside neovim directly as it doesn't change my current focus. I feel that I don't loose control of the things I'm working on.

The basic command to open built-in terminal is `:terminal`, but it just open it on current buffer, which drags my attention away from the code I'm working, which is a no.

I want to open new terminal in a new split. I tried to mimic the behavior of vscode built-in terminal, that is to open new terminal at the bottom of the screen.

Basically I need to open new split, at the bottom of the screen, and call the terminal command. I also choose to create new command to do the thing.

```vim
command! Term :bot sp | term
```

I can also make new mapping for quicker action, but thinking about which key to use to trigger the thing is kinda time consuming and I don't wanna think too much about it right now, so I'll just use the command for a while.

Also, when opening a new terminal, the default mode is `normal` mode, but when I open a terminal usually I want to just run a one time command, e.g. I need to run a test, or starting dev server, etc.

So I create new autocommand to automatically start insert mode when I open new terminal.

```vim
autocmd TermOpen term://* startinsert
```

The last thing I want to mention is, to scroll output of the terminal, I need to enter the `normal` mode of the terminal, the default keymap is `<c-\><c-n>` which is definitely awkward, so I came up with more sane adjustment.

```vim
tnoremap <Esc> <C-\><C-n>
```
But because I also use fzf, I don't want to remap the escape key when I'm opening fzf buffer. So I tweak it a little bit.

```vim
tnoremap <expr> <Esc> &ft == 'fzf' ? '<Esc>' : '<C-\><C-n>'
```

Now I can move around pretty easily.

Nice.

Previously I've been using neovim alongside tmux for spinning up quick terminal session. But when I open new tmux pane or window, the layout of my screen is changed and it is kinda break my state of focus when writing code. I find it more pleasant to open terminal inside neovim directly as it doesn't change my current focus. I feel that I don't loose control of the things I'm working on.
The basic command to open built-in terminal is <code>:terminal</code>, but it just open it on current buffer, which drags my attention away from the code I'm working, which is a no.
I want to open new terminal in a new split. I tried to mimic the behavior of vscode built-in terminal, that is to open new terminal at the bottom of the screen.
Basically I need to open new split, at the bottom of the screen, and call the terminal command. I also choose to create new command to do the thing.
<pre><code class="hljs language-vim">command! Term :bot sp | term
</code></pre>
I can also make new mapping for quicker action, but thinking about which key to use to trigger the thing is kinda time consuming and I don't wanna think too much about it right now, so I'll just use the command for a while.
Also, when opening a new terminal, the default mode is <code>normal</code> mode, but when I open a terminal usually I want to just run a one time command, e.g. I need to run a test, or starting dev server, etc.
So I create new autocommand to automatically start insert mode when I open new terminal.
<pre><code class="hljs language-vim">autocmd TermOpen term://* startinsert
</code></pre>
The last thing I want to mention is, to scroll output of the terminal, I need to enter the <code>normal</code> mode of the terminal, the default keymap is <code>&#x3C;c-\>&#x3C;c-n></code> which is definitely awkward, so I came up with more sane adjustment.
<pre><code class="hljs language-vim">tnoremap &#x3C;Esc> &#x3C;C-\>&#x3C;C-n>
</code></pre>
But because I also use fzf, I don't want to remap the escape key when I'm opening fzf buffer. So I tweak it a little bit.
<pre><code class="hljs language-vim">tnoremap &#x3C;expr> &#x3C;Esc> &#x26;ft == 'fzf' ? '&#x3C;Esc>' : '&#x3C;C-\>&#x3C;C-n>'
</code></pre>
Now I can move around pretty easily.
Nice.


Imagine we're building an app, (for example) using laravel php framework. Like most of the framework to build apps, laravel has some [requirements](https://laravel.com/docs/8.x#installation).

If you want to develop apps with laravel, you (or your team) have setup specific version of php with some extensions enabled, a web server, a database system, etc.

When it comes the time to deploy your application to production, you have to setup the each one of the requirements again on your production server, and then you can deploy your app to the server. In other word, the application and the required environment are separated.

The difference when using docker is, it let us deploy our app along with its required environment to run together. The app, web server, database, etc can be bundled together.

We can let docker know how our app (along with its required environment) should be bundled, via series of instructions we write to a file, usually called [Dockerfile](https://docs.docker.com/engine/reference/builder/). For example, the instructions to install packages, prepare some pre-made config files, or run any needed commands.

Then we tell docker using those instructions to build our app (along with its required environment) as a bundle. The resulting bundle is what we call `docker image`. This image is what we can deploy. Because the image already contains required environment for the app to run, we don't need to setup the environment and deploy our app in separate steps.

After we deploy our `docker image`, we can then "run" it using the [docker engine](https://docs.docker.com/get-started/overview/#docker-engine) installed on production server. When we run our images, docker will create special executable that "contains" our image, called [container](https://www.docker.com/resources/what-container). Each container is isolated from one or another, but docker provides a way to communiate between them. Docker image can be "run" multiple times at the same time, and docker will create multiple containers for the image.

While we can ship our app along with all of its dependencies in one big image that manage everything, we can also leverage multiple docker images for "running one app".

The idea is to keep each image focused on one service. For example, we can have one image containing our app, another image for database, another image for cache driver, etc. Then we can connect them together using [networking](https://docs.docker.com/network/) provided by docker.

Another thing to note is, since each container is isolated, it cannot access filesystem on host machine directly (without being told so). Each container has its own isolated "filesystem". The content of the filesystem is "discarded" each time we restart the container.

So, if our app need to persist some data, for example to store data for database, we need to tell docker how we would like to [connect the host filesystem to the containers](https://docs.docker.com/storage/).

## .

If you reach here, you can safely assume that you have learned the basic concepts of using docker. My hope is that after this, at least you can navigate its [official docs](https://docs.docker.com/) with less confusion.


Imagine we're building an app, (for example) using laravel php framework. Like most of the framework to build apps, laravel has some <a href="https://laravel.com/docs/8.x#installation">requirements</a>.
If you want to develop apps with laravel, you (or your team) have setup specific version of php with some extensions enabled, a web server, a database system, etc.
When it comes the time to deploy your application to production, you have to setup the each one of the requirements again on your production server, and then you can deploy your app to the server. In other word, the application and the required environment are separated.
The difference when using docker is, it let us deploy our app along with its required environment to run together. The app, web server, database, etc can be bundled together.
We can let docker know how our app (along with its required environment) should be bundled, via series of instructions we write to a file, usually called <a href="https://docs.docker.com/engine/reference/builder/">Dockerfile</a>. For example, the instructions to install packages, prepare some pre-made config files, or run any needed commands.
Then we tell docker using those instructions to build our app (along with its required environment) as a bundle. The resulting bundle is what we call <code>docker image</code>. This image is what we can deploy. Because the image already contains required environment for the app to run, we don't need to setup the environment and deploy our app in separate steps.
After we deploy our <code>docker image</code>, we can then "run" it using the <a href="https://docs.docker.com/get-started/overview/#docker-engine">docker engine</a> installed on production server. When we run our images, docker will create special executable that "contains" our image, called <a href="https://www.docker.com/resources/what-container">container</a>. Each container is isolated from one or another, but docker provides a way to communiate between them. Docker image can be "run" multiple times at the same time, and docker will create multiple containers for the image.
While we can ship our app along with all of its dependencies in one big image that manage everything, we can also leverage multiple docker images for "running one app".
The idea is to keep each image focused on one service. For example, we can have one image containing our app, another image for database, another image for cache driver, etc. Then we can connect them together using <a href="https://docs.docker.com/network/">networking</a> provided by docker.
Another thing to note is, since each container is isolated, it cannot access filesystem on host machine directly (without being told so). Each container has its own isolated "filesystem". The content of the filesystem is "discarded" each time we restart the container.
So, if our app need to persist some data, for example to store data for database, we need to tell docker how we would like to <a href="https://docs.docker.com/storage/">connect the host filesystem to the containers</a>.
<h2>.</h2>
If you reach here, you can safely assume that you have learned the basic concepts of using docker. My hope is that after this, at least you can navigate its <a href="https://docs.docker.com/">official docs</a> with less confusion.


[Coc explorer](https://github.com/weirongxu/coc-explorer) is a [coc.nvim](https://github.com/neoclide/coc.nvim/wiki/Using-coc-extensions) extension that tries to mimic the file explorer feature of vscode.

Here's how it looks by default.

![Initial looks](./initial.png)

To make adjustment, we can open coc config file using `:CocConfig` command and specify config option within `explorer` field.

The first thing I want to change is the explorer width, I think its too wide.

```vim
"explorer.width": 30
```

The next thing is to tell it to display hidden files, because I work with a lot of dotfiles.

```vim
"explorer.file.showHiddenFiles": true
```

When we open coc explorer, by default it will navigate to currently opened file in the tree.

![auto reveal by default](./coc-explorer-auto-reveal.gif)

I'm not really like the behaviour, so I disable it.

```vim
"explorer.file.autoReveal": false
```

The popup window is also distracting rather than helpful, so I disable it also.

```vim
"explorer.previewAction.onHover": false
```

I'd like to display some nice font icon, I'm using both nerdfont and devicons.

```vim
"explorer.icon.enableVimDevicons": true
"explorer.icon.enableNerdfont": true
```

![with icon](./with-icon.png)

By default, coc explorer render ridiculous amount of whitespace after filename, of course I'm getting rid of that.

```vim
"explorer.file.child.template": "[git | 2] [selection | clip | 1] [indent][icon | 1] [diagnosticError & 1][filename omitCenter 1][modified][readonly] [linkIcon & 1][link growRight 1 omitCenter 5]"
```

Next, I tidy up the label a bit.

```vim
"explorer.buffer.root.template": "[icon & 1] OPEN EDITORS"
"explorer.file.root.template": "[icon & 1] PROJECT ([root])"
```

I also still use some mappings that I use in nerdtree.

```vim
"explorer.keyMappings": {
    "s": "open:vsplit",
    "mm": "rename",
    "mc": "copyFile",
    "C": "copyFile",
    "md": "delete",
    "D": "delete",
    "ma": "addFile",
    "mA": "addDirectory"
}
```

## Final result

![final result](./final.png)

[Full config](https://github.com/pirey/dotfiles/blob/master/home/.config/nvim/coc-settings.json):

```vim
"explorer.width": 30,
"explorer.buffer.root.template": "[icon & 1] OPEN EDITORS",
"explorer.file.root.template": "[icon & 1] PROJECT ([root])",
"explorer.file.child.template": "[git | 2] [selection | clip | 1] [indent][icon | 1] [diagnosticError & 1][filename omitCenter 1][modified][readonly] [linkIcon & 1][link growRight 1 omitCenter 5]",
"explorer.file.showHiddenFiles": true,
"explorer.file.autoReveal": false,
"explorer.icon.enableVimDevicons": true,
"explorer.icon.enableNerdfont": true,
"explorer.previewAction.onHover": false,
"explorer.keyMappings": {
  "s": "open:vsplit",
  "mm": "rename",
  "mc": "copyFile",
  "C": "copyFile",
  "md": "delete",
  "D": "delete",
  "ma": "addFile",
  "mA": "addDirectory"
}
```


<a href="https://github.com/weirongxu/coc-explorer">Coc explorer</a> is a <a href="https://github.com/neoclide/coc.nvim/wiki/Using-coc-extensions">coc.nvim</a> extension that tries to mimic the file explorer feature of vscode.
Here's how it looks by default.
<img src="/assets/blog/customizing-coc-explorer/initial.png" alt="Initial looks">
To make adjustment, we can open coc config file using <code>:CocConfig</code> command and specify config option within <code>explorer</code> field.
The first thing I want to change is the explorer width, I think its too wide.
<pre><code class="hljs language-vim">"explorer.width": 30
</code></pre>
The next thing is to tell it to display hidden files, because I work with a lot of dotfiles.
<pre><code class="hljs language-vim">"explorer.file.showHiddenFiles": true
</code></pre>
When we open coc explorer, by default it will navigate to currently opened file in the tree.
<img src="/assets/blog/customizing-coc-explorer/coc-explorer-auto-reveal.gif" alt="auto reveal by default">
I'm not really like the behaviour, so I disable it.
<pre><code class="hljs language-vim">"explorer.file.autoReveal": false
</code></pre>
The popup window is also distracting rather than helpful, so I disable it also.
<pre><code class="hljs language-vim">"explorer.previewAction.onHover": false
</code></pre>
I'd like to display some nice font icon, I'm using both nerdfont and devicons.
<pre><code class="hljs language-vim">"explorer.icon.enableVimDevicons": true
"explorer.icon.enableNerdfont": true
</code></pre>
<img src="/assets/blog/customizing-coc-explorer/with-icon.png" alt="with icon">
By default, coc explorer render ridiculous amount of whitespace after filename, of course I'm getting rid of that.
<pre><code class="hljs language-vim">"explorer.file.child.template": "[git | 2] [selection | clip | 1] [indent][icon | 1] [diagnosticError &#x26; 1][filename omitCenter 1][modified][readonly] [linkIcon &#x26; 1][link growRight 1 omitCenter 5]"
</code></pre>
Next, I tidy up the label a bit.
<pre><code class="hljs language-vim">"explorer.buffer.root.template": "[icon &#x26; 1] OPEN EDITORS"
"explorer.file.root.template": "[icon &#x26; 1] PROJECT ([root])"
</code></pre>
I also still use some mappings that I use in nerdtree.
<pre><code class="hljs language-vim">"explorer.keyMappings": {
 "s": "open:vsplit",
 "mm": "rename",
 "mc": "copyFile",
 "C": "copyFile",
 "md": "delete",
 "D": "delete",
 "ma": "addFile",
 "mA": "addDirectory"
}
</code></pre>
<h2>Final result</h2>
<img src="/assets/blog/customizing-coc-explorer/final.png" alt="final result">
<a href="https://github.com/pirey/dotfiles/blob/master/home/.config/nvim/coc-settings.json">Full config</a>:
<pre><code class="hljs language-vim">"explorer.width": 30,
"explorer.buffer.root.template": "[icon &#x26; 1] OPEN EDITORS",
"explorer.file.root.template": "[icon &#x26; 1] PROJECT ([root])",
"explorer.file.child.template": "[git | 2] [selection | clip | 1] [indent][icon | 1] [diagnosticError &#x26; 1][filename omitCenter 1][modified][readonly] [linkIcon &#x26; 1][link growRight 1 omitCenter 5]",
"explorer.file.showHiddenFiles": true,
"explorer.file.autoReveal": false,
"explorer.icon.enableVimDevicons": true,
"explorer.icon.enableNerdfont": true,
"explorer.previewAction.onHover": false,
"explorer.keyMappings": {
 "s": "open:vsplit",
 "mm": "rename",
 "mc": "copyFile",
 "C": "copyFile",
 "md": "delete",
 "D": "delete",
 "ma": "addFile",
 "mA": "addDirectory"
}
</code></pre>

Here's a summary of how I customize vim lightline plugin to match my needs.

The idea is to have statusline that is nice, simple, and still useful.

So I come up with this setup.

## Full window, full feature

![Full](./full.png)

The left part only have two sections.

```vim
" left part
[[ 'mode', 'paste' ], [ 'readonly', 'filename', 'modified' ]]
```

While the right part is simpler with only one section.

```vim
" right part
[[ 'filetype', 'percent', 'lineinfo' ]]
```

I use [nord]() colorscheme, but doesn't really like the built-in nord theme for lightline, so I customize it to look more subtle.

```vim
let s:p.normal.left = [[ s:nord4, s:nord3, 'bold' ], [ s:nord4, s:nord1 ]]
let s:p.normal.middle = [[ s:nord4, s:nord1 ]]
let s:p.normal.right = [[ s:nord4, s:nord3 ]]
```

In the colorscheme file, I define colors extracted from the official nord color pallete, so I don't need to use the hex value directly.
Each variable is a list containing hex value and their respective value for term color, but I only use terminal with gui colors, so I use default values from built-int nord lightline theme.

```vim
let s:nord0 = ["#2E3440", "NONE"]
let s:nord1 = ["#3B4252", 0]
let s:nord2 = ["#434C5E", "NONE"]
let s:nord3 = ["#4C566A", 8]
let s:nord4 = ["#D8DEE9", "NONE"]
let s:nord5 = ["#E5E9F0", 7]
let s:nord6 = ["#ECEFF4", 15]
let s:nord7 = ["#8FBCBB", 14]
let s:nord8 = ["#88C0D0", 6]
let s:nord9 = ["#81A1C1", 4]
let s:nord10 = ["#5E81AC", 12]
let s:nord11 = ["#BF616A", 1]
let s:nord12 = ["#D08770", 11]
let s:nord13 = ["#EBCB8B", 3]
let s:nord14 = ["#A3BE8C", 2]
let s:nord15 = ["#B48EAD", 5]

" additional color for accent
let s:nord3_bright = ["#616E88", 8]
```

## Split window, simplified

![Split](./split.png)

I like the statusline to display full path (relative path) for current file, but when using split the space is limited, so I adjust the filename component to only show the filename. Moreover, I set the lineinfo and filetype component to "dissapear" on specific window width.

The way to do that is by using custom component and bind it to a function we define. For example, this is how I setup the lineinfo component.

```vim
let g:lightline.component_function = { 'lineinfo': 'LightlineLineinfo' }

function! LightlineLineinfo() abort
 if winwidth(0) < 86
 return ''
 endif

 let l:current_line = printf('%-3s', line('.'))
 let l:max_line = printf('%-3s', line('$'))
 let l:lineinfo = ' ' . l:current_line . '/' . l:max_line
 return l:lineinfo
endfunction
```

Also, if you notice, the inactive window only display filename with dimmed highlight, so I can focus on current window but can still see other files opened. I do that by setting the highlight of foreground for inactive window to match the background for each section.

```vim
let s:p.inactive.left = [[ s:nord3, s:nord1 ], [ s:nord1, s:nord1 ]]
let s:p.inactive.middle = [[ s:nord1, s:nord1 ]]
let s:p.inactive.right = [[ s:nord1, s:nord1 ], [ s:nord1, s:nord1 ]]
```

## Narrow window, even more simplified

![explorer window](./explorer.png)

You can see that when the window is too small, I just hide other components except the `mode`, by using the same method as lineinfo above, but with different window width breakpoint.

Also, since I consider the explorer a special window, I give it special treatment by customizing the `mode` string. I can also specify another strings for additional plugins I want to customize later.

```vim
let g:lightline.component_function = { 'mode': 'LightlineMode' }

function! LightlineMode() abort
 let ftmap = {
 \ 'coc-explorer': 'EXPLORER',
 \ 'fugitive': 'FUGITIVE'
 \ }
 return get(ftmap, &filetype, lightline#mode())
endfunction
```

## Tabline / Bufferline

Since lightline doesn't handle the tabline the way I expected, [I use separate plugin for it](https://github.com/mengelbrecht/lightline-bufferline), and use the default setup they provide on the readme.

The only customization is of course the color highlighting.

```vim
let s:p.tabline.left = [[ s:nord2, s:nord0 ], [ s:nord4, s:nord1, 'bold' ]]
let s:p.tabline.middle = [[ s:nord0, s:nord0 ]]
let s:p.tabline.right = [[ s:nord3_bright, s:nord0, 'bold' ]]
let s:p.tabline.tabsel = [[ s:nord4, s:nord3, 'bold' ]]
```

Additionally, I use some tricks for the tabline which I will explain in another post.

## Credit

I grab most of the configuration from [bandithijo](https://github.com/bandithijo/nvimrc/blob/master/plugin/config/config-lightline.vim), and tweak it further according to my needs.

## P.S.

You can find full configuration on my [dotfiles](https://github.com/pirey/dotfiles).

- [lightline colorscheme](https://github.com/pirey/dotfiles/blob/master/home/.config/nvim/autoload/lightline/colorscheme/nord_subtle.vim)
- [lightline configuration](https://github.com/pirey/dotfiles/blob/master/home/.config/nvim/plugin-options/lightline.vim)
- [lightline-bufferline configuration](https://github.com/pirey/dotfiles/blob/master/home/.config/nvim/plugin-options/lightline-bufferline.vim)

Here's a summary of how I customize vim lightline plugin to match my needs.
The idea is to have statusline that is nice, simple, and still useful.
So I come up with this setup.
<h2>Full window, full feature</h2>
<img src="/assets/blog/customizing-vim-lightline/full.png" alt="Full">
The left part only have two sections.
<pre><code class="hljs language-vim">" left part
[[ 'mode', 'paste' ], [ 'readonly', 'filename', 'modified' ]]
</code></pre>
While the right part is simpler with only one section.
<pre><code class="hljs language-vim">" right part
[[ 'filetype', 'percent', 'lineinfo' ]]
</code></pre>
I use <a href="">nord</a> colorscheme, but doesn't really like the built-in nord theme for lightline, so I customize it to look more subtle.
<pre><code class="hljs language-vim">let s:p.normal.left = [[ s:nord4, s:nord3, 'bold' ], [ s:nord4, s:nord1 ]]
let s:p.normal.middle = [[ s:nord4, s:nord1 ]]
let s:p.normal.right = [[ s:nord4, s:nord3 ]]
</code></pre>
In the colorscheme file, I define colors extracted from the official nord color pallete, so I don't need to use the hex value directly.
Each variable is a list containing hex value and their respective value for term color, but I only use terminal with gui colors, so I use default values from built-int nord lightline theme.
<pre><code class="hljs language-vim">let s:nord0 = ["#2E3440", "NONE"]
let s:nord1 = ["#3B4252", 0]
let s:nord2 = ["#434C5E", "NONE"]
let s:nord3 = ["#4C566A", 8]
let s:nord4 = ["#D8DEE9", "NONE"]
let s:nord5 = ["#E5E9F0", 7]
let s:nord6 = ["#ECEFF4", 15]
let s:nord7 = ["#8FBCBB", 14]
let s:nord8 = ["#88C0D0", 6]
let s:nord9 = ["#81A1C1", 4]
let s:nord10 = ["#5E81AC", 12]
let s:nord11 = ["#BF616A", 1]
let s:nord12 = ["#D08770", 11]
let s:nord13 = ["#EBCB8B", 3]
let s:nord14 = ["#A3BE8C", 2]
let s:nord15 = ["#B48EAD", 5]

" additional color for accent
let s:nord3_bright = ["#616E88", 8]
</code></pre>
<h2>Split window, simplified</h2>
<img src="/assets/blog/customizing-vim-lightline/split.png" alt="Split">
I like the statusline to display full path (relative path) for current file, but when using split the space is limited, so I adjust the filename component to only show the filename. Moreover, I set the lineinfo and filetype component to "dissapear" on specific window width.
The way to do that is by using custom component and bind it to a function we define. For example, this is how I setup the lineinfo component.
<pre><code class="hljs language-vim">let g:lightline.component_function = { 'lineinfo': 'LightlineLineinfo' }

function! LightlineLineinfo() abort
 if winwidth(0) &#x3C; 86
 return ''
 endif

 let l:current_line = printf('%-3s', line('.'))
 let l:max_line = printf('%-3s', line('$'))
 let l:lineinfo = ' ' . l:current_line . '/' . l:max_line
 return l:lineinfo
endfunction
</code></pre>
Also, if you notice, the inactive window only display filename with dimmed highlight, so I can focus on current window but can still see other files opened. I do that by setting the highlight of foreground for inactive window to match the background for each section.
<pre><code class="hljs language-vim">let s:p.inactive.left = [[ s:nord3, s:nord1 ], [ s:nord1, s:nord1 ]]
let s:p.inactive.middle = [[ s:nord1, s:nord1 ]]
let s:p.inactive.right = [[ s:nord1, s:nord1 ], [ s:nord1, s:nord1 ]]
</code></pre>
<h2>Narrow window, even more simplified</h2>
<img src="/assets/blog/customizing-vim-lightline/explorer.png" alt="explorer window">
You can see that when the window is too small, I just hide other components except the <code>mode</code>, by using the same method as lineinfo above, but with different window width breakpoint.
Also, since I consider the explorer a special window, I give it special treatment by customizing the <code>mode</code> string. I can also specify another strings for additional plugins I want to customize later.
<pre><code class="hljs language-vim">let g:lightline.component_function = { 'mode': 'LightlineMode' }

function! LightlineMode() abort
 let ftmap = {
 \ 'coc-explorer': 'EXPLORER',
 \ 'fugitive': 'FUGITIVE'
 \ }
 return get(ftmap, &#x26;filetype, lightline#mode())
endfunction
</code></pre>
<h2>Tabline / Bufferline</h2>
Since lightline doesn't handle the tabline the way I expected, <a href="https://github.com/mengelbrecht/lightline-bufferline">I use separate plugin for it</a>, and use the default setup they provide on the readme.
The only customization is of course the color highlighting.
<pre><code class="hljs language-vim">let s:p.tabline.left = [[ s:nord2, s:nord0 ], [ s:nord4, s:nord1, 'bold' ]]
let s:p.tabline.middle = [[ s:nord0, s:nord0 ]]
let s:p.tabline.right = [[ s:nord3_bright, s:nord0, 'bold' ]]
let s:p.tabline.tabsel = [[ s:nord4, s:nord3, 'bold' ]]
</code></pre>
Additionally, I use some tricks for the tabline which I will explain in another post.
<h2>Credit</h2>
I grab most of the configuration from <a href="https://github.com/bandithijo/nvimrc/blob/master/plugin/config/config-lightline.vim">bandithijo</a>, and tweak it further according to my needs.
<h2>P.S.</h2>
You can find full configuration on my <a href="https://github.com/pirey/dotfiles">dotfiles</a>.
<ul>
<li><a href="https://github.com/pirey/dotfiles/blob/master/home/.config/nvim/autoload/lightline/colorscheme/nord_subtle.vim">lightline colorscheme</a></li>
<li><a href="https://github.com/pirey/dotfiles/blob/master/home/.config/nvim/plugin-options/lightline.vim">lightline configuration</a></li>
<li><a href="https://github.com/pirey/dotfiles/blob/master/home/.config/nvim/plugin-options/lightline-bufferline.vim">lightline-bufferline configuration</a></li>
</ul>

## List transformation

Suppose we have this list of people:

```javascript
const people = [
 {
 name: 'Jotaro Kujo',
 stand: 'Star Platinum',
 age: 17
 },
 {
 name: 'Kakyoin Noriaki',
 stand: 'Hierophant',
 age: 17
 },
 {
 name: 'Joseph Joestar',
 stand: 'Hermit Purple',
 age: 69
 },
 {
 name: 'Muhammad Avdol',
 stand: 'Magician Red',
 age: 30
 },
 {
 name: 'Jean Pierre Polnareff',
 stand: 'Silver Chariot',
 age: 22
 }
]
```

Now we want to extract only the names of those people.

With imperative `for` loop:

```javascript
const names = []
for (let i = 0; i < people.length; i++) {
 names.push(people[i].name)
}

console.log(names)
// ['Jotaro Kujo', 'Kakyoin Noriaki', 'Joseph Joestar', 'Muhammad Avdol', 'Jean Pierre Polnareff']
```

We can think the process of _extracting_ the names as transforming a list of people into a list of names.

In the example above, our intention is only to get the names of each person, that is the line where we `.push()` each person's name into the `names` variable. Instead we ended up expressed several unrelated things in the loop operation.

We can use more clean way to express our intent, using `.forEach()` method of an array.

```javascript
const names = []
people.forEach(function (person) {
 names.push(person.name)
})

console.log(names)
// ['Jotaro Kujo', 'Kakyoin Noriaki', 'Joseph Joestar', 'Muhammad Avdol', 'Jean Pierre Polnareff']
```

This is better than using `for` loop, because we only express the operation that we care, `names.push(person.name)`.

However, this method have drawback, the function inside `forEach` is tied to the `names` variable.

Instead, we can have data transformation as a single operation, using `.map()`:

```javascript
const names = people.map(function (person) {
 return person.name
})

console.log(names)
// ['Jotaro Kujo', 'Kakyoin Noriaki', 'Joseph Joestar', 'Muhammad Avdol', 'Jean Pierre Polnareff']
```

We can go further by extracting the callback into a separate function:

```javascript
function getName(person) {
 return person.name
}
const names = people.map(getName)

console.log(names)
// ['Jotaro Kujo', 'Kakyoin Noriaki', 'Joseph Joestar', 'Muhammad Avdol', 'Jean Pierre Polnareff']
```

Now we have even cleaner way to express our intent, to transform list of people into list of people's names. With idea of data transformation, working with list will be simpler.

## List filtering

Suppose we want to make a new list of people with age under 30.

With `for` loop:

```javascript
const youngsters = []
for (let i = 0; i < people.length; i++) {
 if (people[i].age < 30) {
 youngsters.push(people[i])
 }
}
```

We can also use `.filter()` method for that:

```javascript
function under30(person) {
 return person.age < 30
}
const youngsters = people.filter(under30).map(getName)

console.log(youngsters)
// ['Jotaro Kujo', 'Kakyoin Noriaki', 'Jean Pierre Polnareff']
```

## Finding item

Using list of people in the previous section, suppose we want to find a person in the list by their name.

With `for` loop, we can see that the operation is burreid inside the loop. We can define additional function to wrap the operation to find a person by their name, to make it reusable.

```javascript
function findByName(name, people) {
 let result = null
 for (let i = 0; i < people.length; i++) {
 if (people[i].name === name) {
 result = people[i]
 break
 }
 }
 return result
}

const jotaro = findByName('Jotaro Kujo', people)
console.log(jotaro.name) // Jotaro Kujo

const notFound = findByName('Not Found', people)
console.log(notFound) // null
```

In the above function, our primary intention is to compare each person's name with the given name, but we ended up declaring mostly unrelated stuff.

We can use `.find()` method instead:

```javascript
const jotaro = people.find(function(person) {
 // if this person's name equals 'Jotaro Kujo' then this person is who we're looking for
 return person.name === 'Jotaro Kujo'
})

console.log(jotaro.name) // Jotaro Kujo
```

The `.find()` method takes a function that returns a `boolean` indicating if the item match what we want to find.

We can make our function reusable by make it a separate function:

```javascript
function hasName(name) {
 return function(person) {
 return person.name === name
 }
}
```

We can use the function like so:

```javascript
const jotaro = people.find(hasName('Jotaro Kujo'))

console.log(jotaro.name) // Jotaro Kujo
```

This is definitely more expressive than previous example that use `for` loop, and we can clearly see what is the intention of the program.

## Notes

The [.map()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map), [.filter()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter), and [.find()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find) are all native method of `Array` in javascript.

<h2>List transformation</h2>
Suppose we have this list of people:
<pre><code class="hljs language-javascript">const people = [
 {
 name: 'Jotaro Kujo',
 stand: 'Star Platinum',
 age: 17
 },
 {
 name: 'Kakyoin Noriaki',
 stand: 'Hierophant',
 age: 17
 },
 {
 name: 'Joseph Joestar',
 stand: 'Hermit Purple',
 age: 69
 },
 {
 name: 'Muhammad Avdol',
 stand: 'Magician Red',
 age: 30
 },
 {
 name: 'Jean Pierre Polnareff',
 stand: 'Silver Chariot',
 age: 22
 }
]
</code></pre>
Now we want to extract only the names of those people.
With imperative <code>for</code> loop:
<pre><code class="hljs language-javascript">const names = []
for (let i = 0; i &#x3C; people.length; i++) {
 names.push(people[i].name)
}

console.log(names)
// ['Jotaro Kujo', 'Kakyoin Noriaki', 'Joseph Joestar', 'Muhammad Avdol', 'Jean Pierre Polnareff']
</code></pre>
We can think the process of extracting the names as transforming a list of people into a list of names.
In the example above, our intention is only to get the names of each person, that is the line where we <code>.push()</code> each person's name into the <code>names</code> variable. Instead we ended up expressed several unrelated things in the loop operation.
We can use more clean way to express our intent, using <code>.forEach()</code> method of an array.
<pre><code class="hljs language-javascript">const names = []
people.forEach(function (person) {
 names.push(person.name)
})

console.log(names)
// ['Jotaro Kujo', 'Kakyoin Noriaki', 'Joseph Joestar', 'Muhammad Avdol', 'Jean Pierre Polnareff']
</code></pre>
This is better than using <code>for</code> loop, because we only express the operation that we care, <code>names.push(person.name)</code>.
However, this method have drawback, the function inside <code>forEach</code> is tied to the <code>names</code> variable.
Instead, we can have data transformation as a single operation, using <code>.map()</code>:
<pre><code class="hljs language-javascript">const names = people.map(function (person) {
 return person.name
})

console.log(names)
// ['Jotaro Kujo', 'Kakyoin Noriaki', 'Joseph Joestar', 'Muhammad Avdol', 'Jean Pierre Polnareff']
</code></pre>
We can go further by extracting the callback into a separate function:
<pre><code class="hljs language-javascript">function getName(person) {
 return person.name
}
const names = people.map(getName)

console.log(names)
// ['Jotaro Kujo', 'Kakyoin Noriaki', 'Joseph Joestar', 'Muhammad Avdol', 'Jean Pierre Polnareff']
</code></pre>
Now we have even cleaner way to express our intent, to transform list of people into list of people's names. With idea of data transformation, working with list will be simpler.
<h2>List filtering</h2>
Suppose we want to make a new list of people with age under 30.
With <code>for</code> loop:
<pre><code class="hljs language-javascript">const youngsters = []
for (let i = 0; i &#x3C; people.length; i++) {
 if (people[i].age &#x3C; 30) {
 youngsters.push(people[i])
 }
}
</code></pre>
We can also use <code>.filter()</code> method for that:
<pre><code class="hljs language-javascript">function under30(person) {
 return person.age &#x3C; 30
}
const youngsters = people.filter(under30).map(getName)

console.log(youngsters)
// ['Jotaro Kujo', 'Kakyoin Noriaki', 'Jean Pierre Polnareff']
</code></pre>
<h2>Finding item</h2>
Using list of people in the previous section, suppose we want to find a person in the list by their name.
With <code>for</code> loop, we can see that the operation is burreid inside the loop. We can define additional function to wrap the operation to find a person by their name, to make it reusable.
<pre><code class="hljs language-javascript">function findByName(name, people) {
 let result = null
 for (let i = 0; i &#x3C; people.length; i++) {
 if (people[i].name === name) {
 result = people[i]
 break
 }
 }
 return result
}

const jotaro = findByName('Jotaro Kujo', people)
console.log(jotaro.name) // Jotaro Kujo

const notFound = findByName('Not Found', people)
console.log(notFound) // null
</code></pre>
In the above function, our primary intention is to compare each person's name with the given name, but we ended up declaring mostly unrelated stuff.
We can use <code>.find()</code> method instead:
<pre><code class="hljs language-javascript">const jotaro = people.find(function(person) {
 // if this person's name equals 'Jotaro Kujo' then this person is who we're looking for
 return person.name === 'Jotaro Kujo'
})

console.log(jotaro.name) // Jotaro Kujo
</code></pre>
The <code>.find()</code> method takes a function that returns a <code>boolean</code> indicating if the item match what we want to find.
We can make our function reusable by make it a separate function:
<pre><code class="hljs language-javascript">function hasName(name) {
 return function(person) {
 return person.name === name
 }
}
</code></pre>
We can use the function like so:
<pre><code class="hljs language-javascript">const jotaro = people.find(hasName('Jotaro Kujo'))

console.log(jotaro.name) // Jotaro Kujo
</code></pre>
This is definitely more expressive than previous example that use <code>for</code> loop, and we can clearly see what is the intention of the program.
<h2>Notes</h2>
The <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map">.map()</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter">.filter()</a>, and <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find">.find()</a> are all native method of <code>Array</code> in javascript.


Don't use vim. Really. I'm not even joking. Once you go in, there's no coming back. I wish I don't know vim. I wish [all that time](https://github.com/pirey/dotfiles/commits/master) that I spend on tweaking it can be used on other stuff that matter.

![](vim-no-coming-back.png)

## But . . . why?

If you heard a lot of cool stuff about vim, and want to try it, you better be ready to love it, or you're gonna get lost in it.

Forget about what have been told to you about vim. Forget it, or embrace it. Because those stories, either good or bad, are only one side of the coin.

Its like how [people in my place](https://www.google.com/maps/place/Indonesia/@-2.3200067,99.4329861,4z/data=!3m1!4b1!4m5!3m4!1s0x2c4c07d7496404b7:0xe37b4de71badf485!8m2!3d-0.789275!4d113.921327) tells story about how lovely it is, a life after marriage. They don't tell you that you have to be committed. Did they tell you that you have to sold your soul to master it? Well, neither did I. But regardless of whether its true or not, you still have to offer something as a tribute.

Vim is free (to use), but that doesn't mean it is cost free. Just like any other precious things in the world, if you want it, you have to put an effort to get it.

The truth is, vim may or may not suits you. Meanwhile, you still have many other things that you want to do. Humans are small creatures, with ridiculously huge expectation.

You can always use many other text editors or "IDE" that you're currently using. That's fine. Really. We have to get the jobs done in the end of the day.

That, or you can try using vim. It has many benefits. Its not really [good for your health, but its not bad for education](https://en.wikipedia.org/wiki/Akira_(1988_film\)).


## Anyway . . .
After all that, I use vim anyway. And I'm not joking. As I learn more about it along the way, I fell in love with it. I wish I don't know vim, but I glad I did, it really changed my life. I spend hell a lot of time tinkering with it, yet I always learn something new, I grow along with my knowledge.


Don't use vim. Really. I'm not even joking. Once you go in, there's no coming back. I wish I don't know vim. I wish <a href="https://github.com/pirey/dotfiles/commits/master">all that time</a> that I spend on tweaking it can be used on other stuff that matter.
<img src="/assets/blog/dont-use-vim/vim-no-coming-back.png" alt="">
<h2>But . . . why?</h2>
If you heard a lot of cool stuff about vim, and want to try it, you better be ready to love it, or you're gonna get lost in it.
Forget about what have been told to you about vim. Forget it, or embrace it. Because those stories, either good or bad, are only one side of the coin.
Its like how <a href="https://www.google.com/maps/place/Indonesia/@-2.3200067,99.4329861,4z/data=!3m1!4b1!4m5!3m4!1s0x2c4c07d7496404b7:0xe37b4de71badf485!8m2!3d-0.789275!4d113.921327">people in my place</a> tells story about how lovely it is, a life after marriage. They don't tell you that you have to be committed. Did they tell you that you have to sold your soul to master it? Well, neither did I. But regardless of whether its true or not, you still have to offer something as a tribute.
Vim is free (to use), but that doesn't mean it is cost free. Just like any other precious things in the world, if you want it, you have to put an effort to get it.
The truth is, vim may or may not suits you. Meanwhile, you still have many other things that you want to do. Humans are small creatures, with ridiculously huge expectation.
You can always use many other text editors or "IDE" that you're currently using. That's fine. Really. We have to get the jobs done in the end of the day.
That, or you can try using vim. It has many benefits. Its not really [good for your health, but its not bad for education](https://en.wikipedia.org/wiki/Akira_(1988_film)).
<h2>Anyway . . .</h2>
After all that, I use vim anyway. And I'm not joking. As I learn more about it along the way, I fell in love with it. I wish I don't know vim, but I glad I did, it really changed my life. I spend hell a lot of time tinkering with it, yet I always learn something new, I grow along with my knowledge.


This is how I setup my vim to be simpler. And here's some of the things that I try to simplify, or even get rid of it entirely.

## Statusline

One of the popular vim plugin for statusline is [vim-airline](https://github.com/vim-airline/vim-airline). I once like how it display neat info and stuff that I can admire while I'm writing code.

Then I realized that not only I don't needed most of the information, it also makes my vim slower. I mean, I want to use CLI app to work more efficiently, not slowly.

So I get rid of it. My statusline became simpler, but I still think that it somehow get in my way. I need (want) to focus on the code. So I ended up get rid of the built-in statusline as well.

```vim
" use this to always hide the statusline
set laststatus=0
```

And from this, I realized that I don't really need many other UI fancyness when I'm writing code.

## Line Number

Now I know lots of people will think I'm nuts. How can we comfortably write code without looking at the line number?

But again, if we really think about it, when we write code, how often do we need to see the line number? For me, I usually only need to see the line number when there's error that I need to fix. And in vim I can easily go to any line using colon `:` followed by the line number. So, what gives?

So I get it of it also.

```vim
set nonumber
```

However, there's a little issue with this. Basically I need to add a little padding in the left side of the screen so that I can let my eyes breathe. Vim has something called `signcolumn`, to display little flag in beside line number. So I set it to always be displayed to act as padding.

```vim
set signcolumn=yes
```

## Vertical Split

For me, the way vim display vertical split separator between windowsis just not feels right. Its too bulky. I found a way to make it simple, that is just get rid of it.

```vim
" use single space as vertsplit separator

set fillchars+=vert:\ " here I put comment so that vim capture the space

```

This however, make it harder to differentiate content of horizontally split windows. But I mostly only use vertical split, and never really open more than two windows for a long period, so this is not a problem for me.

## Smuggle that squiggle

I always hate how vim display that funny squiggles in the beginning of every empty lines.

```
This is some content in a file.
Then comes tons of squiggles after this.
~
~
~
~
~
~
~
~
~
~
~
```

I mean, wth is even that? Let's get rid of it. Well, unfortunately there's no option to completely remove it, but we can workaround that, we software developer are good in doing it, aren't we?

Instead of removing it, because of course its not possible, we can change the highlight color for the squiggles `~`, by setting the highlight of `EndOfBuffer` highlight group.

```
hi EndOfBuffer ctermfg=0
```

Basically we change the foreground color to `0`, this usually matches with the color of the background, so we can somehow make it dissapear.

## Fold

Vim built-in fold highlight is plain ugly. But we can change it using `'foldtext'` option in vim. You can read more about it using `:h foldtext`.

```vim
function! NeatFoldText()
    let line = getline(v:foldstart)

    let nucolwidth = &fdc + &number * &numberwidth
    let windowwidth = winwidth(0) - nucolwidth - 3
    let foldedlinecount = v:foldend - v:foldstart

    " expand tabs into spaces
    let onetab = strpart('          ', 0, &tabstop)
    let line = substitute(line, '\t', onetab, 'g')

    let line = strpart(line, 0, windowwidth - 2 -len(foldedlinecount))
    let fillcharcount = windowwidth - len(line) - len(foldedlinecount)
    return line . '…' . repeat(" ",fillcharcount) . foldedlinecount . '…' . ' '
endfunction

set foldtext=NeatFoldText()
```

**NOTE:** I found the script to modify the foldtext on the internet, but I forget where did I found it. If you feel that you're the one made it, thank you! And let me know about it, I'll update this post with proper credit.

## Nerdtree

No, I'm not saying I'm getting rid of nerdtree. For this, I only get rid of the (▸) symbol for directory prefix. It also has a 'MinimalUI' option, so I use that.

```vim
let NERDTreeDirArrowExpandable = ' '
let NERDTreeDirArrowCollapsible = ' '
let NERDTreeMinimalUI = 1
```

## FZF

By default fzf comes with its own highlight colors, so I need to adjust it to match my setup.

```vim
let $FZF_DEFAULT_OPTS = '--color=16,fg:8,bg:-1,fg+:7,bg+:-1,gutter:-1,pointer:4,info:-1,border:-1,prompt:-1,header:-1'
```

## Screenshots

![](vim-no-frills.png)

![](vim-no-frills-fold.png)

Nice.

**NOTE:** We can also use this nice plugin called [goyo](https://github.com/junegunn/goyo.vim) by [junegunn](https://github.com/junegunn) (the same author that writes fzf and some other nice stuff, go check him out) to achieve similar functionality as I mentioned above. It is a plugin that let you go into _zen_ mode in vim, without UI distractions. In fact, I was inspired by it, but unlike that plugin, I want to be in the zen mode all the time.


This is how I setup my vim to be simpler. And here's some of the things that I try to simplify, or even get rid of it entirely.
<h2>Statusline</h2>
One of the popular vim plugin for statusline is <a href="https://github.com/vim-airline/vim-airline">vim-airline</a>. I once like how it display neat info and stuff that I can admire while I'm writing code.
Then I realized that not only I don't needed most of the information, it also makes my vim slower. I mean, I want to use CLI app to work more efficiently, not slowly.
So I get rid of it. My statusline became simpler, but I still think that it somehow get in my way. I need (want) to focus on the code. So I ended up get rid of the built-in statusline as well.
<pre><code class="hljs language-vim">" use this to always hide the statusline
set laststatus=0
</code></pre>
And from this, I realized that I don't really need many other UI fancyness when I'm writing code.
<h2>Line Number</h2>
Now I know lots of people will think I'm nuts. How can we comfortably write code without looking at the line number?
But again, if we really think about it, when we write code, how often do we need to see the line number? For me, I usually only need to see the line number when there's error that I need to fix. And in vim I can easily go to any line using colon <code>:</code> followed by the line number. So, what gives?
So I get it of it also.
<pre><code class="hljs language-vim">set nonumber
</code></pre>
However, there's a little issue with this. Basically I need to add a little padding in the left side of the screen so that I can let my eyes breathe. Vim has something called <code>signcolumn</code>, to display little flag in beside line number. So I set it to always be displayed to act as padding.
<pre><code class="hljs language-vim">set signcolumn=yes
</code></pre>
<h2>Vertical Split</h2>
For me, the way vim display vertical split separator between windowsis just not feels right. Its too bulky. I found a way to make it simple, that is just get rid of it.
<pre><code class="hljs language-vim">" use single space as vertsplit separator

set fillchars+=vert:\ " here I put comment so that vim capture the space

</code></pre>
This however, make it harder to differentiate content of horizontally split windows. But I mostly only use vertical split, and never really open more than two windows for a long period, so this is not a problem for me.
<h2>Smuggle that squiggle</h2>
I always hate how vim display that funny squiggles in the beginning of every empty lines.
<pre><code>This is some content in a file.
Then comes tons of squiggles after this.
~
~
~
~
~
~
~
~
~
~
~
</code></pre>
I mean, wth is even that? Let's get rid of it. Well, unfortunately there's no option to completely remove it, but we can workaround that, we software developer are good in doing it, aren't we?
Instead of removing it, because of course its not possible, we can change the highlight color for the squiggles <code>~</code>, by setting the highlight of <code>EndOfBuffer</code> highlight group.
<pre><code>hi EndOfBuffer ctermfg=0
</code></pre>
Basically we change the foreground color to <code>0</code>, this usually matches with the color of the background, so we can somehow make it dissapear.
<h2>Fold</h2>
Vim built-in fold highlight is plain ugly. But we can change it using <code>'foldtext'</code> option in vim. You can read more about it using <code>:h foldtext</code>.
<pre><code class="hljs language-vim">function! NeatFoldText()
 let line = getline(v:foldstart)

 let nucolwidth = &#x26;fdc + &#x26;number * &#x26;numberwidth
 let windowwidth = winwidth(0) - nucolwidth - 3
 let foldedlinecount = v:foldend - v:foldstart

 " expand tabs into spaces
 let onetab = strpart(' ', 0, &#x26;tabstop)
 let line = substitute(line, '\t', onetab, 'g')

 let line = strpart(line, 0, windowwidth - 2 -len(foldedlinecount))
 let fillcharcount = windowwidth - len(line) - len(foldedlinecount)
 return line . '…' . repeat(" ",fillcharcount) . foldedlinecount . '…' . ' '
endfunction

set foldtext=NeatFoldText()
</code></pre>
NOTE: I found the script to modify the foldtext on the internet, but I forget where did I found it. If you feel that you're the one made it, thank you! And let me know about it, I'll update this post with proper credit.
<h2>Nerdtree</h2>
No, I'm not saying I'm getting rid of nerdtree. For this, I only get rid of the (▸) symbol for directory prefix. It also has a 'MinimalUI' option, so I use that.
<pre><code class="hljs language-vim">let NERDTreeDirArrowExpandable = ' '
let NERDTreeDirArrowCollapsible = ' '
let NERDTreeMinimalUI = 1
</code></pre>
<h2>FZF</h2>
By default fzf comes with its own highlight colors, so I need to adjust it to match my setup.
<pre><code class="hljs language-vim">let $FZF_DEFAULT_OPTS = '--color=16,fg:8,bg:-1,fg+:7,bg+:-1,gutter:-1,pointer:4,info:-1,border:-1,prompt:-1,header:-1'
</code></pre>
<h2>Screenshots</h2>
<img src="/assets/blog/vim-no-frills/vim-no-frills.png" alt="">
<img src="/assets/blog/vim-no-frills/vim-no-frills-fold.png" alt="">
Nice.
NOTE: We can also use this nice plugin called <a href="https://github.com/junegunn/goyo.vim">goyo</a> by <a href="https://github.com/junegunn">junegunn</a> (the same author that writes fzf and some other nice stuff, go check him out) to achieve similar functionality as I mentioned above. It is a plugin that let you go into zen mode in vim, without UI distractions. In fact, I was inspired by it, but unlike that plugin, I want to be in the zen mode all the time.


The point of [dotfiles](https://dotfiles.github.io/) repository is basically to store configuration of any program that we use.

For example, if we're using vim, the configuration is just a plain text, usually called `.vimrc`. Notice the dot `.` in the filename. The dot prefix is so common for configuration files that there are so many application store its configuration using the same semantic.

We can regularly backup our configs and place it somewhere safe, but we can take advantage of git to manage our configs. I personally hosted [my dotfiles](https://github.com/pirey/dotfiles) on github. The reason is that its easy for me if I want to switch computer, I'll just fetch my configs and ready to go. Another benefit of using git is that we can keep track of what we're doing along the way.

However, there are some problem if we want to immediately store our configs in git repo.

First, the config files is usually placed in `$HOME` directory. But its not a good idea to init our git directly in `$HOME` directory. Because that is usually we place our other files or documents, like photos, videos, or other big sized files that is unappropriate since we are only interested in storing config files.

We can easily resolve it by initializing our git repo in new directory and put our config files inside it. We can place the dotfiles directory anywhere we want.

But since dotfiles are meant to be placed in specific directory (usually under `$HOME` directory), we need a way to somehow place them in their respective place.

For example, if we're managing our `.vimrc` file, we can manually copy and paste it from our dotfiles directory to `$HOME` directory EVERYTIME we make a change. Now this is not only tiresome, its also error prone. Now if we're doing it like this and we're managing a lot of dotfiles, it will not be good for our health.

One simple way to handle this is by creating symlinks of our dotfiles into their respective place.

```sh
ln -sf /path/to/our/dotfiles/.vimrc $HOME/.vimrc
```

With symlinks, we don't have to manually copy our files everytime we make a changes, instead we can work on original files inside our dotfiles repo and the change is automatically reflected in the symlinked files.

We have solved our problem but don't worry, we still have another one. The location of config files doesn't always reside under `$HOME`, it can be scattered across multiple places depending on the application that we use. For example if you're using `i3`, the config is placed inside `$HOME/.config/i3/config`. So if we're creating each symlink manually, it would be more or less the same as copying each file one by one.

Luckily we can write a script for that.

For example we can create a new file called `setup.sh`

```sh
#!/bin/sh

ln -sf /path/to/dotfiles/.tmux.conf                $HOME/.tmux.conf
ln -sf /path/to/dotfiles/.agignore                 $HOME/.agignore
ln -sf /path/to/dotfiles/.ctags                    $HOME/.ctags
ln -sf /path/to/dotfiles/.gitconfig                $HOME/.gitconfig

ln -sf /path/to/dotfiles/.editorconfig             $HOME/.editorconfig
ln -sf /path/to/dotfiles/.npmrc                    $HOME/.npmrc
ln -sf /path/to/dotfiles/.prettierrc               $HOME/.prettierrc

ln -sf /path/to/dotfiles/.aliases                  $HOME/.aliases
ln -sf /path/to/dotfiles/.zshrc                    $HOME/.zshrc

ln -sf /path/to/dotfiles/.config/i3/config         $HOME/.config/i3/config
ln -sf /path/to/dotfiles/.config/i3status/config   $HOME/.config/i3status/config
ln -sf /path/to/dotfiles/.config/volumeicon/config $HOME/.config/volumeicon/config
ln -sf /path/to/dotfiles/.config/rofi/config       $HOME/.config/rofi/config
```

We only need to run the scripts once when we clone our repo. Or whenever we like, that doesn't make any difference anyway. Like this:

```sh
./setup.sh
```

With this setup, at least our config files become more manageable.



The point of <a href="https://dotfiles.github.io/">dotfiles</a> repository is basically to store configuration of any program that we use.
For example, if we're using vim, the configuration is just a plain text, usually called <code>.vimrc</code>. Notice the dot <code>.</code> in the filename. The dot prefix is so common for configuration files that there are so many application store its configuration using the same semantic.
We can regularly backup our configs and place it somewhere safe, but we can take advantage of git to manage our configs. I personally hosted <a href="https://github.com/pirey/dotfiles">my dotfiles</a> on github. The reason is that its easy for me if I want to switch computer, I'll just fetch my configs and ready to go. Another benefit of using git is that we can keep track of what we're doing along the way.
However, there are some problem if we want to immediately store our configs in git repo.
First, the config files is usually placed in <code>$HOME</code> directory. But its not a good idea to init our git directly in <code>$HOME</code> directory. Because that is usually we place our other files or documents, like photos, videos, or other big sized files that is unappropriate since we are only interested in storing config files.
We can easily resolve it by initializing our git repo in new directory and put our config files inside it. We can place the dotfiles directory anywhere we want.
But since dotfiles are meant to be placed in specific directory (usually under <code>$HOME</code> directory), we need a way to somehow place them in their respective place.
For example, if we're managing our <code>.vimrc</code> file, we can manually copy and paste it from our dotfiles directory to <code>$HOME</code> directory EVERYTIME we make a change. Now this is not only tiresome, its also error prone. Now if we're doing it like this and we're managing a lot of dotfiles, it will not be good for our health.
One simple way to handle this is by creating symlinks of our dotfiles into their respective place.
<pre><code class="hljs language-sh">ln -sf /path/to/our/dotfiles/.vimrc $HOME/.vimrc
</code></pre>
With symlinks, we don't have to manually copy our files everytime we make a changes, instead we can work on original files inside our dotfiles repo and the change is automatically reflected in the symlinked files.
We have solved our problem but don't worry, we still have another one. The location of config files doesn't always reside under <code>$HOME</code>, it can be scattered across multiple places depending on the application that we use. For example if you're using <code>i3</code>, the config is placed inside <code>$HOME/.config/i3/config</code>. So if we're creating each symlink manually, it would be more or less the same as copying each file one by one.
Luckily we can write a script for that.
For example we can create a new file called <code>setup.sh</code>
<pre><code class="hljs language-sh">#!/bin/sh

ln -sf /path/to/dotfiles/.tmux.conf $HOME/.tmux.conf
ln -sf /path/to/dotfiles/.agignore $HOME/.agignore
ln -sf /path/to/dotfiles/.ctags $HOME/.ctags
ln -sf /path/to/dotfiles/.gitconfig $HOME/.gitconfig

ln -sf /path/to/dotfiles/.editorconfig $HOME/.editorconfig
ln -sf /path/to/dotfiles/.npmrc $HOME/.npmrc
ln -sf /path/to/dotfiles/.prettierrc $HOME/.prettierrc

ln -sf /path/to/dotfiles/.aliases $HOME/.aliases
ln -sf /path/to/dotfiles/.zshrc $HOME/.zshrc

ln -sf /path/to/dotfiles/.config/i3/config $HOME/.config/i3/config
ln -sf /path/to/dotfiles/.config/i3status/config $HOME/.config/i3status/config
ln -sf /path/to/dotfiles/.config/volumeicon/config $HOME/.config/volumeicon/config
ln -sf /path/to/dotfiles/.config/rofi/config $HOME/.config/rofi/config
</code></pre>
We only need to run the scripts once when we clone our repo. Or whenever we like, that doesn't make any difference anyway. Like this:
<pre><code class="hljs language-sh">./setup.sh
</code></pre>
With this setup, at least our config files become more manageable.


I have a [beautiful vim setup](https://github.com/pirey/dotfiles). It suited my needs very well, everything was perfect. Until someday it can't keep up with my typing speed.

No, I'm not saying that I'm the fastest typist in the world. What I mean by that is, my vim became really slow when I work on 1000 LOC or so.

So I tried to disable and enable some of my plugins to figure out what caused the issue. But, before I came to this point, I always suspicious with the syntax highlighting feature in vim. This is not the first time that I came across this slow syntax highlight issue.

Previously, I have done some research and found some workarounds.

For example, I used this snippet to limit the syntax highlighting to only specified column.

```vim
syntax sync minlines=256
syntax sync maxlines=256
set synmaxcol=250
```

I have also tried to minimize some other burden for vim, like disabling the `cursorline`, and disabling `matchparen` plugin.

Also I found someone mentioned that we can use `set regexpengine=1` to solve the issue, which is not, and my vim hangs when I opened a typescript project.

All the solution above doesn't give the kind of result I expected. Vim performance is still relatively the same.

My conclusion (for now) is that either vim is slow (the syntax highlight) or it is my laptop that is too slow.

Once I saw a [talk by some dude](https://www.youtube.com/watch?v=aHm36-na4-4) where he demonstrate some cool vim tricks and stuff. Then suddenly from [out of nowhere](https://youtu.be/aHm36-na4-4?t=620) he mentioned that he don't like syntax colouring. I was like, _whut?_ I mean, how can we write code and keep being sane without using syntax highlight? Furthermore, I even found [a compilation of articles](https://dev.to/huytd/turning-off-the-syntax-highlighter-8af) giving advice to disable syntax highlighting. I don't get it. And I still don't understand it untill now.

Looking at my issue right now, I think I will give it a spin and disable syntax highlight. But I the other side, I still rely on the syntax highlighting. Its just too helpful to be entirely thrown away.

So I came up the idea to create a custom function in vim to toggle syntax highlight. So I can keep using highlight when I'm editing simple file with relatively small content.

The function is something like this:

```vim
function! SynToggle()
    if exists('g:syntax_on')
        syntax off
    else
        syntax enable
    endif
endfunction
```

To make it easier for me to invoke the function, I created a command to call it:

```vim
command! SynToggle :call SynToggle()
```


But the problem is, I use custom highlight rules in my setup, and when I toggle the highlighting that way, my custom highlight broke.

![Illust](syntoggle-err.gif "Syntax highlighting toggle error")

That is because vim reset the highlight rules everytime we turned on / off the syntax highlight.

Luckily, I have my custom highlight setup separated on its own file, `highlight.vim`, so I can easily `source` it everytime I toggle the highlight. Like this:

```vim
function! SynToggle()
    if exists('g:syntax_on')
        syntax off
    else
        syntax enable
        source my_custom_highlight.vim
    endif
endfunction
```

![Illust](syntoggle-ok.gif "Syntax highlighting toggle ok")

Nice.


I have a <a href="https://github.com/pirey/dotfiles">beautiful vim setup</a>. It suited my needs very well, everything was perfect. Until someday it can't keep up with my typing speed.
No, I'm not saying that I'm the fastest typist in the world. What I mean by that is, my vim became really slow when I work on 1000 LOC or so.
So I tried to disable and enable some of my plugins to figure out what caused the issue. But, before I came to this point, I always suspicious with the syntax highlighting feature in vim. This is not the first time that I came across this slow syntax highlight issue.
Previously, I have done some research and found some workarounds.
For example, I used this snippet to limit the syntax highlighting to only specified column.
<pre><code class="hljs language-vim">syntax sync minlines=256
syntax sync maxlines=256
set synmaxcol=250
</code></pre>
I have also tried to minimize some other burden for vim, like disabling the <code>cursorline</code>, and disabling <code>matchparen</code> plugin.
Also I found someone mentioned that we can use <code>set regexpengine=1</code> to solve the issue, which is not, and my vim hangs when I opened a typescript project.
All the solution above doesn't give the kind of result I expected. Vim performance is still relatively the same.
My conclusion (for now) is that either vim is slow (the syntax highlight) or it is my laptop that is too slow.
Once I saw a <a href="https://www.youtube.com/watch?v=aHm36-na4-4">talk by some dude</a> where he demonstrate some cool vim tricks and stuff. Then suddenly from <a href="https://youtu.be/aHm36-na4-4?t=620">out of nowhere</a> he mentioned that he don't like syntax colouring. I was like, whut? I mean, how can we write code and keep being sane without using syntax highlight? Furthermore, I even found <a href="https://dev.to/huytd/turning-off-the-syntax-highlighter-8af">a compilation of articles</a> giving advice to disable syntax highlighting. I don't get it. And I still don't understand it untill now.
Looking at my issue right now, I think I will give it a spin and disable syntax highlight. But I the other side, I still rely on the syntax highlighting. Its just too helpful to be entirely thrown away.
So I came up the idea to create a custom function in vim to toggle syntax highlight. So I can keep using highlight when I'm editing simple file with relatively small content.
The function is something like this:
<pre><code class="hljs language-vim">function! SynToggle()
 if exists('g:syntax_on')
 syntax off
 else
 syntax enable
 endif
endfunction
</code></pre>
To make it easier for me to invoke the function, I created a command to call it:
<pre><code class="hljs language-vim">command! SynToggle :call SynToggle()
</code></pre>
But the problem is, I use custom highlight rules in my setup, and when I toggle the highlighting that way, my custom highlight broke.
<img src="/assets/blog/disabling-syntax-highlight-but-not-really/syntoggle-err.gif" alt="Illust" title="Syntax highlighting toggle error">
That is because vim reset the highlight rules everytime we turned on / off the syntax highlight.
Luckily, I have my custom highlight setup separated on its own file, <code>highlight.vim</code>, so I can easily <code>source</code> it everytime I toggle the highlight. Like this:
<pre><code class="hljs language-vim">function! SynToggle()
 if exists('g:syntax_on')
 syntax off
 else
 syntax enable
 source my_custom_highlight.vim
 endif
endfunction
</code></pre>
<img src="/assets/blog/disabling-syntax-highlight-but-not-really/syntoggle-ok.gif" alt="Illust" title="Syntax highlighting toggle ok">
Nice.


Javascript doesn't have built-in method for catching different types of exception.

But, first of all, I should mention that javascript do have some [built-in exception types](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error#Error_types). And we can [check for its instance type](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error#Handling_a_specific_error) to handle different case of errors. If we need custom error for our app, we can also [define our own error type](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error#Custom_Error_Types).

That being said, there is another way we can workaround this, using union type. Union type is a way to represent a type that can hold several different value at a time. Its like enum in some other language (javascript doesn't have enum keyword), but simply better, because each type can hold additional value (or not).

We will use a library called [`union-type`](https://github.com/paldepind/union-type) to demonstrate this.

First, we create our custom error type.

```javascript
const Type = require('union-type')

const Err = Type({
  InvalidParam: [String],
  ValidationError: [String, Object],
  UnknownError: [],
})
```

We created `Err` custom error type. It has three possible value, the error can be either `InvalidParam`, `ValidationError`, or `UnknownError`.

Each one of them can hold additional value, for example the `InvalidParam` can hold one additional value of type `String`, that we can use to pass in the error message.

The `ValidationError` has two values, first is of type `String` to pass in error message and the second is of type `Object` to pass in the validation error details.

Let say the `UnknownError` is a generic error and doesn't have additional info, so we pass empty array `[]`.

To create one of those errors, we use the constructor function provided by `union-type` library inside the `Err` object.

The name of the constructor function is the same as the error type. The function can also receive argument or not, depending whether the error type has additional value attached to it.

For example we have a function for updating user profile.

```javascript
async function updateProfile(userId, payload) {
  if (!validId(userId)) {
    throw Err.InvalidParam('Invalid param')
  }

  if (!validPayload(payload)) {
    throw Err.ValidationError('Validation Error', {
      name: 'Name is required',
      email: 'Email format is invalid',
    })
  }

  return await db.updateProfile(userId, payload).catch(_ => {
    // whoops, we don't know what caused the error
    throw Err.UnknownError()
  })
}
```

In javascript we can throw any object to raise an exception, so we just throw our custom error. So, the `updateProfile` will either throw `InvalidParam`, `ValidationError`, `UnknownError` if any error occurs, or returns the updated profile if success.

Now we need a way to act on the result of `updateProfile` accordingly. The `Err` have a method called `case`, used to kind of `switch..case` all the possible values.

For example, we can use the function like so:

```javascript
async function routeHandler(req, res) {
  try {
    const userId = req.params.userId
    const payload = req.body
    const updated = await updateProfile(userId, payload)

    res.status(200).json(updated)
  } catch (error) {
    // handle different errors appropriately
    Err.case({
      InvalidParam: message => res.status(400).json({message}),
      ValidationError: (message, errors) =>
        res.status(422).json({message, errors}),
      UnknownError: () => res.status(500).json({message: 'Unknown Error'}),
    })(error)
  }
}
```

Nice and clean!

Also, be sure to check out the documentation of [`union-type`](https://github.com/paldepind/union-type) for more info.


Javascript doesn't have built-in method for catching different types of exception.
But, first of all, I should mention that javascript do have some <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error#Error_types">built-in exception types</a>. And we can <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error#Handling_a_specific_error">check for its instance type</a> to handle different case of errors. If we need custom error for our app, we can also <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error#Custom_Error_Types">define our own error type</a>.
That being said, there is another way we can workaround this, using union type. Union type is a way to represent a type that can hold several different value at a time. Its like enum in some other language (javascript doesn't have enum keyword), but simply better, because each type can hold additional value (or not).
We will use a library called <a href="https://github.com/paldepind/union-type"><code>union-type</code></a> to demonstrate this.
First, we create our custom error type.
<pre><code class="hljs language-javascript">const Type = require('union-type')

const Err = Type({
 InvalidParam: [String],
 ValidationError: [String, Object],
 UnknownError: [],
})
</code></pre>
We created <code>Err</code> custom error type. It has three possible value, the error can be either <code>InvalidParam</code>, <code>ValidationError</code>, or <code>UnknownError</code>.
Each one of them can hold additional value, for example the <code>InvalidParam</code> can hold one additional value of type <code>String</code>, that we can use to pass in the error message.
The <code>ValidationError</code> has two values, first is of type <code>String</code> to pass in error message and the second is of type <code>Object</code> to pass in the validation error details.
Let say the <code>UnknownError</code> is a generic error and doesn't have additional info, so we pass empty array <code>[]</code>.
To create one of those errors, we use the constructor function provided by <code>union-type</code> library inside the <code>Err</code> object.
The name of the constructor function is the same as the error type. The function can also receive argument or not, depending whether the error type has additional value attached to it.
For example we have a function for updating user profile.
<pre><code class="hljs language-javascript">async function updateProfile(userId, payload) {
 if (!validId(userId)) {
 throw Err.InvalidParam('Invalid param')
 }

 if (!validPayload(payload)) {
 throw Err.ValidationError('Validation Error', {
 name: 'Name is required',
 email: 'Email format is invalid',
 })
 }

 return await db.updateProfile(userId, payload).catch(_ => {
 // whoops, we don't know what caused the error
 throw Err.UnknownError()
 })
}
</code></pre>
In javascript we can throw any object to raise an exception, so we just throw our custom error. So, the <code>updateProfile</code> will either throw <code>InvalidParam</code>, <code>ValidationError</code>, <code>UnknownError</code> if any error occurs, or returns the updated profile if success.
Now we need a way to act on the result of <code>updateProfile</code> accordingly. The <code>Err</code> have a method called <code>case</code>, used to kind of <code>switch..case</code> all the possible values.
For example, we can use the function like so:
<pre><code class="hljs language-javascript">async function routeHandler(req, res) {
 try {
 const userId = req.params.userId
 const payload = req.body
 const updated = await updateProfile(userId, payload)

 res.status(200).json(updated)
 } catch (error) {
 // handle different errors appropriately
 Err.case({
 InvalidParam: message => res.status(400).json({message}),
 ValidationError: (message, errors) =>
 res.status(422).json({message, errors}),
 UnknownError: () => res.status(500).json({message: 'Unknown Error'}),
 })(error)
 }
}
</code></pre>
Nice and clean!
Also, be sure to check out the documentation of <a href="https://github.com/paldepind/union-type"><code>union-type</code></a> for more info.

## Keep track of our works (man git)

Git is a command line application, meaning it's an application that we run in the terminal / command prompt.

The purpose of git is to keep track of our works. As a programmer, what we usually do at work is write code. With git, we can see what are the things that we added, edited, or removed from our project's source code.

By default, git doesn't just track everything we do to our source code. Therefore we need to tell git which changes we made to the source code that we want to keep track later, as we discuss later.

## Get a repo (git init, clone)

A repository (or repo) is basically a project containing source codes that is tracked by git.

There's two main way to get a git repo. First, we can create our brand new project and tell git to keep track of it. Or, we can grab other people's project that is already tracked by git somewhere.

To use the first method:

- We can create new project or we can use any existing project which hasn't been tracked by git
- Navigate to project directory via terminal / command prompt, `cd <project_dir>`
- Run `git init`

To use the second method:

- Search for any git project, e.g from github
- And then run `git clone <repo_url>`
- This will download the project into our local machine

## Introduce yourself (git config)

Because, beside keeping track of changes in a repo, git also keep track of who did the changes.

Therefore, before we make any changes to the project, we have to introduce ourselves, well, at least we tell our name and email so git can identify us.

To do that we can run this command

```bash
git config --global user.name="Your Name"
git config --global user.email="your.email@somewhere.com"
```

## Pick and keep (git status, add, commit)

There are at least 3 kinds of changes that we usually do to when we write code: creating, editing, or deleting files.

For illustration, let say we create some new files in our repo: `file_a.txt`, `file_b.txt`, and `file_c.txt`. After we created those files, however, git still doesn't know a thing about them. If we want git to keep track of the new files, we have to tell git to 'record' it.

The basic flow is:

- We made changes (add, edit, or delete)
- We 'pick' which changes we want git to 'record', using `git add` command
- Finally we tell git to `record` the changes, using `git commit -m "<commit message>"` command

Continuing the illustration, let say we only want to keep track of `file_a.txt`, so the steps is:

- Run `git add file_a.txt`
- Then run `git commit -m "add file_a to the repo"`

A commit is set of changes that git record, and the commit message can be used to add remarks of what we do in a commit.

So what happens to `file_b.txt` and `file_c.txt`? Well, they're fine and they're still in our repo, but git still doesn't know a thing about them.

One way to know the status of changes in our repo is to use the `git status` command. It will output current changes that happen, whether we add new files, edit some existing files (that is already tracked by git), or delete some files.

If we run `git status`, git will tell us that `file_b.txt` and `file_c.txt` is 'untracked', meaning git doesn't know about it yet.

If we run `git add file_b.txt`, and then run `git status` again, now git will tell that `file_b.txt` is 'ready to be committed', meaning we have 'picked' which changes that we want git to record.

Then, if we run `git commit -m "add file_b"`, and then run `git status` again, `file_b.txt` is now dissapear from the output, just like `file_a.txt` previously. Because `git status` only tells us about what are the current changes that happens in the repo, and since `file_a.txt` and `file_b.txt` has now tracked by git, it doesn't appear in the output.

Right now, if we edit the content of `file_c.txt`, and then run `git status` git will always tells us it is 'unstaged', because there's no information about the file whatsoever. However, if we edit `file_a.txt` or `file_b.txt`, and then run `git status`, git will tell us that its 'modified', because git has a way to compare the file content with the content from latest commit.

## Reading history (git log)

The essentials of using git is to create a series of commits. For a reminder, a commit contain information of a change that we made.

To see commits in a repo, we run `git log` command. It will display list of commits so far in the repo.

As we can see, each commit contain additional information, like the commit `hash` or commit id, the commit message, the commit date, and the author. It also contain other stuff that we don't need to focus right now. Later we can use this information to further manipulate our repo.

Tips: we can use `git log --oneline` to display each commit in one line, so we can have a better view when we have a lot of commits.

## Another place to keep (git remote)

Another purpose of git is to make collaboration with other people easier. So far, we only work alone, in our local machine, but we need to share our work with others. For that purpose, git let us 'copy' our repo to other location with the concept of `remote`.

A remote can be thought as a place where the 'copy' of our local repo is kept. The idea is, it contains all commits from our local repo and can be located anywhere on the internet, so that other people can have access to it. Since other people can have access to it, it means they can do their work and create their commits and then we can collaborate.

We can setup our own server to host the remote repo, or we can just use third party service. One of the most popular service is github.com.

To 'connect' our repo to a remote, first we need to create a pointer to a remote.

```bash
git remote add origin <url>
```

The `<url>` is where the remote repo is, and `origin` is the name of the pointer that points to that `<url>`. The `origin` can be thought as 'nickname' for a remote, so later if we want to refer to that url we can refer to the 'nickname' instead.

We can have more than one remote repo, for example if we want to 'connect' our repo to another remote repo, we can run:

```bash
git remote add other_remote <url>
```

We can give nickname to the remote as we want, as long as it doesn't clash with other remote name. The term `origin` in the first example is conventional, indicating that it is the 'main' remote.

Now that we have a remote repo, we can 'upload' our changes to the remote repo. To do so, we use the `git push` command, for example:

```bash
git push origin master
```

Again, the `origin` is the name of the remote, while `master` is the name of the target branch we want to upload to.

After we 'upload' our changes to remote repo, other people who want to collaborate with us can download the latest changes by 'downloading' it from the repo.

To get latest changes from remote repo, we can use `git pull` command, for example:

```bash
git pull origin master
```

## Time travel (HEAD)

We have learned previously that we can view history of commits using `git log`. What if I told you that we can also 'go back' to any of those commits?

For illustration, we run `git log --oneline` and these are the commits that we have:

```bash
1234d commit 4
1234c commit 3
1234b commit 2
1234a commit 1
```

This tells us that the latest commit `hash` is `1234d` with the message `commit 4`. The latest commit when we run `git log` is the current structure or content of our repo.

Let say we want to 'undo' the changes in `commit 4`, and 'go back' to `commit 3`, what we can do is run this command:

```bash
git reset --hard 1234c
```

This command will make `commit 3` the latest commit, and if we run `git log --oneline` again, the `commit 4` is now dissapear:

```bash
1234c commit 3
1234b commit 2
1234a commit 1
```

Git has a pointer called `HEAD`. The purpose of `HEAD` is to indicate what is the current structure of our project. We can think of our repo as a series of commits and by default `HEAD` is always pointing to the latest commit.

In the previous example, we can also think of what we have done as 'moving' the `HEAD` to points to the previous commit, so that the previous commit became the 'latest' commit.

We can tell git to display where the `HEAD` is using this command:

```bash
git log --oneline --decorate
```

The `--oneline` will output one commit per line, and the `--decorate` will display the `HEAD` and some other information.

## Alternate reality (git branch)

When we build an application, sometimes we need to add features, or maybe fixing bugs. When we make changes, we tend to also make mistakes. We don't want the changes that we made to break the current application. We need a way to make changes and test the changes afterward in 'isolation', and then combine the changes back.

We can think of series of commits that we made so far as a 'timeline'. What we need to do is to create separate 'timeline'. This concept of separate path to make changes is called `branch` in git. With `branch` we can create multiple series of commits where each timeline has its own set of changes.

By default, when we create new project using `git init` we only have one `branch` with the name of `master`. That is where we previosly create our commits. To make a new `branch`, we use `git branch` command, for example:

```bash
git branch develop
```

Now we have a new `branch` called `develop`.

Previously, we only have one branch, `master`, and everytime we make changes, the commit will be added to the `master` branch timeline. Now that we have more than one `branch`, every changes will be added to whichever `branch` is currently 'active'. And right now the active branch is still the `master` branch, because the previous command only create the `develop` branch but not yet activating it.

If you still remember our discussion about `HEAD` in the previous section, the `HEAD` is pointing to the latest commit. But previously, since we only have one branch, the `HEAD` is pointing to the latest commit on the `master` branch. The active branch is determined by where the `HEAD` points to. Because the `HEAD` still points to `master`, that means `master` is the 'active' branch. We can move the `HEAD` to points to another branch by using `git checkout` command. For example if we want to activate `develop` branch, we can use this command:

```bash
git checkout develop
```

From now on, if we create new commits, it will be added to the `develop` branch and the `master` branch will not know any changes we made in `develop` branch.

For example, the `master` branch have:

```bash
file_a.txt
file_b.txt
file_c.txt
```

If we `checkout` the `develop` branch and add new files to our project and commit the changes:

```bash
file_a.txt
file_b.txt
file_c.txt

file_x.txt
file_y.txt
file_z.txt
```

Now, if we `checkout` the `master` branch again using `git checkout master`, we won't see the newly added files. The files in the `master` branch is still the following:

```bash
file_a.txt
file_b.txt
file_c.txt
```

This is because `master` and `develop` each have their own 'version' of project structure and contents.

When we finish the development in the `develop` branch, after testing it and feeling confident about the changes, we can combine the two branch together. We do so by first checking out the target branch, which is the branch that we want to receive the changes, and then run `git merge <source_branch>` command.

For example, if we want to merge all the changes from `develop` branch back to our `master` branch, first we checkout `master` branch

```bash
git checkout master
```

And then we run:

```bash
git merge develop
```

Now the structure of our project become:

```bash
file_a.txt
file_b.txt
file_c.txt

file_x.txt
file_y.txt
file_z.txt
```

Git is smart enough to detect any duplicate files, therefore if two branches contains files with same name, if the content of those files is the same, git will think its safe to ignore it and leave the file as it is.

If the two branches contain files with same name but different content, git can detect the difference and automatically combine the content of the file properly if it can.

Now that we have more than one branch, we can also `push` to or `pull` from specified branch. For example `git pull origin develop` will get any changes from `origin` remote, from `develop` branch in the remote. Or `git push origin develop` to push our local changes to `develop` branch in the remote.

<h2>Keep track of our works (man git)</h2>
Git is a command line application, meaning it's an application that we run in the terminal / command prompt.
The purpose of git is to keep track of our works. As a programmer, what we usually do at work is write code. With git, we can see what are the things that we added, edited, or removed from our project's source code.
By default, git doesn't just track everything we do to our source code. Therefore we need to tell git which changes we made to the source code that we want to keep track later, as we discuss later.
<h2>Get a repo (git init, clone)</h2>
A repository (or repo) is basically a project containing source codes that is tracked by git.
There's two main way to get a git repo. First, we can create our brand new project and tell git to keep track of it. Or, we can grab other people's project that is already tracked by git somewhere.
To use the first method:
<ul>
<li>We can create new project or we can use any existing project which hasn't been tracked by git</li>
<li>Navigate to project directory via terminal / command prompt, <code>cd &#x3C;project_dir></code></li>
<li>Run <code>git init</code></li>
</ul>
To use the second method:
<ul>
<li>Search for any git project, e.g from github</li>
<li>And then run <code>git clone &#x3C;repo_url></code></li>
<li>This will download the project into our local machine</li>
</ul>
<h2>Introduce yourself (git config)</h2>
Because, beside keeping track of changes in a repo, git also keep track of who did the changes.
Therefore, before we make any changes to the project, we have to introduce ourselves, well, at least we tell our name and email so git can identify us.
To do that we can run this command
<pre><code class="hljs language-bash">git config --global user.name="Your Name"
git config --global user.email="your.email@somewhere.com"
</code></pre>
<h2>Pick and keep (git status, add, commit)</h2>
There are at least 3 kinds of changes that we usually do to when we write code: creating, editing, or deleting files.
For illustration, let say we create some new files in our repo: <code>file_a.txt</code>, <code>file_b.txt</code>, and <code>file_c.txt</code>. After we created those files, however, git still doesn't know a thing about them. If we want git to keep track of the new files, we have to tell git to 'record' it.
The basic flow is:
<ul>
<li>We made changes (add, edit, or delete)</li>
<li>We 'pick' which changes we want git to 'record', using <code>git add</code> command</li>
<li>Finally we tell git to <code>record</code> the changes, using <code>git commit -m "&#x3C;commit message>"</code> command</li>
</ul>
Continuing the illustration, let say we only want to keep track of <code>file_a.txt</code>, so the steps is:
<ul>
<li>Run <code>git add file_a.txt</code></li>
<li>Then run <code>git commit -m "add file_a to the repo"</code></li>
</ul>
A commit is set of changes that git record, and the commit message can be used to add remarks of what we do in a commit.
So what happens to <code>file_b.txt</code> and <code>file_c.txt</code>? Well, they're fine and they're still in our repo, but git still doesn't know a thing about them.
One way to know the status of changes in our repo is to use the <code>git status</code> command. It will output current changes that happen, whether we add new files, edit some existing files (that is already tracked by git), or delete some files.
If we run <code>git status</code>, git will tell us that <code>file_b.txt</code> and <code>file_c.txt</code> is 'untracked', meaning git doesn't know about it yet.
If we run <code>git add file_b.txt</code>, and then run <code>git status</code> again, now git will tell that <code>file_b.txt</code> is 'ready to be committed', meaning we have 'picked' which changes that we want git to record.
Then, if we run <code>git commit -m "add file_b"</code>, and then run <code>git status</code> again, <code>file_b.txt</code> is now dissapear from the output, just like <code>file_a.txt</code> previously. Because <code>git status</code> only tells us about what are the current changes that happens in the repo, and since <code>file_a.txt</code> and <code>file_b.txt</code> has now tracked by git, it doesn't appear in the output.
Right now, if we edit the content of <code>file_c.txt</code>, and then run <code>git status</code> git will always tells us it is 'unstaged', because there's no information about the file whatsoever. However, if we edit <code>file_a.txt</code> or <code>file_b.txt</code>, and then run <code>git status</code>, git will tell us that its 'modified', because git has a way to compare the file content with the content from latest commit.
<h2>Reading history (git log)</h2>
The essentials of using git is to create a series of commits. For a reminder, a commit contain information of a change that we made.
To see commits in a repo, we run <code>git log</code> command. It will display list of commits so far in the repo.
As we can see, each commit contain additional information, like the commit <code>hash</code> or commit id, the commit message, the commit date, and the author. It also contain other stuff that we don't need to focus right now. Later we can use this information to further manipulate our repo.
Tips: we can use <code>git log --oneline</code> to display each commit in one line, so we can have a better view when we have a lot of commits.
<h2>Another place to keep (git remote)</h2>
Another purpose of git is to make collaboration with other people easier. So far, we only work alone, in our local machine, but we need to share our work with others. For that purpose, git let us 'copy' our repo to other location with the concept of <code>remote</code>.
A remote can be thought as a place where the 'copy' of our local repo is kept. The idea is, it contains all commits from our local repo and can be located anywhere on the internet, so that other people can have access to it. Since other people can have access to it, it means they can do their work and create their commits and then we can collaborate.
We can setup our own server to host the remote repo, or we can just use third party service. One of the most popular service is github.com.
To 'connect' our repo to a remote, first we need to create a pointer to a remote.
<pre><code class="hljs language-bash">git remote add origin &#x3C;url>
</code></pre>
The <code>&#x3C;url></code> is where the remote repo is, and <code>origin</code> is the name of the pointer that points to that <code>&#x3C;url></code>. The <code>origin</code> can be thought as 'nickname' for a remote, so later if we want to refer to that url we can refer to the 'nickname' instead.
We can have more than one remote repo, for example if we want to 'connect' our repo to another remote repo, we can run:
<pre><code class="hljs language-bash">git remote add other_remote &#x3C;url>
</code></pre>
We can give nickname to the remote as we want, as long as it doesn't clash with other remote name. The term <code>origin</code> in the first example is conventional, indicating that it is the 'main' remote.
Now that we have a remote repo, we can 'upload' our changes to the remote repo. To do so, we use the <code>git push</code> command, for example:
<pre><code class="hljs language-bash">git push origin master
</code></pre>
Again, the <code>origin</code> is the name of the remote, while <code>master</code> is the name of the target branch we want to upload to.
After we 'upload' our changes to remote repo, other people who want to collaborate with us can download the latest changes by 'downloading' it from the repo.
To get latest changes from remote repo, we can use <code>git pull</code> command, for example:
<pre><code class="hljs language-bash">git pull origin master
</code></pre>
<h2>Time travel (HEAD)</h2>
We have learned previously that we can view history of commits using <code>git log</code>. What if I told you that we can also 'go back' to any of those commits?
For illustration, we run <code>git log --oneline</code> and these are the commits that we have:
<pre><code class="hljs language-bash">1234d commit 4
1234c commit 3
1234b commit 2
1234a commit 1
</code></pre>
This tells us that the latest commit <code>hash</code> is <code>1234d</code> with the message <code>commit 4</code>. The latest commit when we run <code>git log</code> is the current structure or content of our repo.
Let say we want to 'undo' the changes in <code>commit 4</code>, and 'go back' to <code>commit 3</code>, what we can do is run this command:
<pre><code class="hljs language-bash">git reset --hard 1234c
</code></pre>
This command will make <code>commit 3</code> the latest commit, and if we run <code>git log --oneline</code> again, the <code>commit 4</code> is now dissapear:
<pre><code class="hljs language-bash">1234c commit 3
1234b commit 2
1234a commit 1
</code></pre>
Git has a pointer called <code>HEAD</code>. The purpose of <code>HEAD</code> is to indicate what is the current structure of our project. We can think of our repo as a series of commits and by default <code>HEAD</code> is always pointing to the latest commit.
In the previous example, we can also think of what we have done as 'moving' the <code>HEAD</code> to points to the previous commit, so that the previous commit became the 'latest' commit.
We can tell git to display where the <code>HEAD</code> is using this command:
<pre><code class="hljs language-bash">git log --oneline --decorate
</code></pre>
The <code>--oneline</code> will output one commit per line, and the <code>--decorate</code> will display the <code>HEAD</code> and some other information.
<h2>Alternate reality (git branch)</h2>
When we build an application, sometimes we need to add features, or maybe fixing bugs. When we make changes, we tend to also make mistakes. We don't want the changes that we made to break the current application. We need a way to make changes and test the changes afterward in 'isolation', and then combine the changes back.
We can think of series of commits that we made so far as a 'timeline'. What we need to do is to create separate 'timeline'. This concept of separate path to make changes is called <code>branch</code> in git. With <code>branch</code> we can create multiple series of commits where each timeline has its own set of changes.
By default, when we create new project using <code>git init</code> we only have one <code>branch</code> with the name of <code>master</code>. That is where we previosly create our commits. To make a new <code>branch</code>, we use <code>git branch</code> command, for example:
<pre><code class="hljs language-bash">git branch develop
</code></pre>
Now we have a new <code>branch</code> called <code>develop</code>.
Previously, we only have one branch, <code>master</code>, and everytime we make changes, the commit will be added to the <code>master</code> branch timeline. Now that we have more than one <code>branch</code>, every changes will be added to whichever <code>branch</code> is currently 'active'. And right now the active branch is still the <code>master</code> branch, because the previous command only create the <code>develop</code> branch but not yet activating it.
If you still remember our discussion about <code>HEAD</code> in the previous section, the <code>HEAD</code> is pointing to the latest commit. But previously, since we only have one branch, the <code>HEAD</code> is pointing to the latest commit on the <code>master</code> branch. The active branch is determined by where the <code>HEAD</code> points to. Because the <code>HEAD</code> still points to <code>master</code>, that means <code>master</code> is the 'active' branch. We can move the <code>HEAD</code> to points to another branch by using <code>git checkout</code> command. For example if we want to activate <code>develop</code> branch, we can use this command:
<pre><code class="hljs language-bash">git checkout develop
</code></pre>
From now on, if we create new commits, it will be added to the <code>develop</code> branch and the <code>master</code> branch will not know any changes we made in <code>develop</code> branch.
For example, the <code>master</code> branch have:
<pre><code class="hljs language-bash">file_a.txt
file_b.txt
file_c.txt
</code></pre>
If we <code>checkout</code> the <code>develop</code> branch and add new files to our project and commit the changes:
<pre><code class="hljs language-bash">file_a.txt
file_b.txt
file_c.txt

file_x.txt
file_y.txt
file_z.txt
</code></pre>
Now, if we <code>checkout</code> the <code>master</code> branch again using <code>git checkout master</code>, we won't see the newly added files. The files in the <code>master</code> branch is still the following:
<pre><code class="hljs language-bash">file_a.txt
file_b.txt
file_c.txt
</code></pre>
This is because <code>master</code> and <code>develop</code> each have their own 'version' of project structure and contents.
When we finish the development in the <code>develop</code> branch, after testing it and feeling confident about the changes, we can combine the two branch together. We do so by first checking out the target branch, which is the branch that we want to receive the changes, and then run <code>git merge &#x3C;source_branch></code> command.
For example, if we want to merge all the changes from <code>develop</code> branch back to our <code>master</code> branch, first we checkout <code>master</code> branch
<pre><code class="hljs language-bash">git checkout master
</code></pre>
And then we run:
<pre><code class="hljs language-bash">git merge develop
</code></pre>
Now the structure of our project become:
<pre><code class="hljs language-bash">file_a.txt
file_b.txt
file_c.txt

file_x.txt
file_y.txt
file_z.txt
</code></pre>
Git is smart enough to detect any duplicate files, therefore if two branches contains files with same name, if the content of those files is the same, git will think its safe to ignore it and leave the file as it is.
If the two branches contain files with same name but different content, git can detect the difference and automatically combine the content of the file properly if it can.
Now that we have more than one branch, we can also <code>push</code> to or <code>pull</code> from specified branch. For example <code>git pull origin develop</code> will get any changes from <code>origin</code> remote, from <code>develop</code> branch in the remote. Or <code>git push origin develop</code> to push our local changes to <code>develop</code> branch in the remote.

"Smooth" Scrolling
------------------

Vim default scrolling behaviour is terrible. `<c-f>` to scroll one page down, `<c-b>` to scroll one page down, these feature is just not right. I get lost easily. It makes me dizzy. It also has another pair of commands, `<c-d>` and `<c-u>` to scroll up and down half page, but is no better than the previous.

![badmove.gif](https://yeripratama.files.wordpress.com/2017/11/badmove.gif)

wtf. So I made my own version of _smooth scrolling._ I came out with these pairs of mapping `nnoremap J 10gj` `nnoremap K 10gk` `vnoremap J 10gj` `vnoremap K 10gk`

![muchbetter.gif](https://yeripratama.files.wordpress.com/2017/11/muchbetter.gif)

Much better.

Horizontal jump
---------------

We use `w` or `e` and `b` to leap one word. Why don't we give it a boost? `nnoremap E 20l` `nnoremap B 20h` `vnoremap E 20l` `vnoremap B 20h` Now watch, I can jump around like a ninja!

![horizontal.gif](https://yeripratama.files.wordpress.com/2017/11/horizontal.gif)

How cool is that?

Crazy fast window movement
--------------------------

This is a classic tips but extremely useful, you'll love it soon or later. `nnoremap <C-h> <C-w>h` `nnoremap <C-j> <C-w>j` `nnoremap <C-k> <C-w>k` `nnoremap <C-l> <C-w>l`

![windo.gif](https://yeripratama.files.wordpress.com/2017/11/windo.gif)

<h2>"Smooth" Scrolling</h2>
Vim default scrolling behaviour is terrible. <code>&#x3C;c-f></code> to scroll one page down, <code>&#x3C;c-b></code> to scroll one page down, these feature is just not right. I get lost easily. It makes me dizzy. It also has another pair of commands, <code>&#x3C;c-d></code> and <code>&#x3C;c-u></code> to scroll up and down half page, but is no better than the previous.
<img src="https://yeripratama.files.wordpress.com/2017/11/badmove.gif" alt="badmove.gif">
wtf. So I made my own version of smooth scrolling. I came out with these pairs of mapping <code>nnoremap J 10gj</code> <code>nnoremap K 10gk</code> <code>vnoremap J 10gj</code> <code>vnoremap K 10gk</code>
<img src="https://yeripratama.files.wordpress.com/2017/11/muchbetter.gif" alt="muchbetter.gif">
Much better.
<h2>Horizontal jump</h2>
We use <code>w</code> or <code>e</code> and <code>b</code> to leap one word. Why don't we give it a boost? <code>nnoremap E 20l</code> <code>nnoremap B 20h</code> <code>vnoremap E 20l</code> <code>vnoremap B 20h</code> Now watch, I can jump around like a ninja!
<img src="https://yeripratama.files.wordpress.com/2017/11/horizontal.gif" alt="horizontal.gif">
How cool is that?
<h2>Crazy fast window movement</h2>
This is a classic tips but extremely useful, you'll love it soon or later. <code>nnoremap &#x3C;C-h> &#x3C;C-w>h</code> <code>nnoremap &#x3C;C-j> &#x3C;C-w>j</code> <code>nnoremap &#x3C;C-k> &#x3C;C-w>k</code> <code>nnoremap &#x3C;C-l> &#x3C;C-w>l</code>
<img src="https://yeripratama.files.wordpress.com/2017/11/windo.gif" alt="windo.gif">

## Update

I'm now using fzf for fuzzy finding and no longer using CtrlP, but it was (and still) a great plugin to get started.

## Intro

Sublime Text (or other editor) has a fuzzy finder feature that let us search for files within our project directory.

Imagine if we want to open specific file but we don't know where it is located, or if we know where the file located but it is buried too deep inside folder directory (for example `app/very/long/namespace/controller/domestic.controller.js`), it may be hard to find it.

That's why this is a really powerful feature. And since we love vim (aren't we?), we want this feature in our favorite editor too. Vim doesn't have this feature out of the box, but don't worry because there's a plugin for that. Actually, [there's already vim plugin for (almost) every feature we need](http://vimawesome.com). For this task, there's several option we can choose, and I personally have used [Ctrl-P](https://github.com/ctrlpvim/ctrlp.vim) for almost a year. It's simple and straightforward.

## Installation

Installation guide can be found on its [documentation](https://github.com/ctrlpvim/ctrlp.vim).

## Configuration

By default, whenever we invoke Ctrl-P, it scans our project directory, entirely. It works fine when our directory is relatively small. But when we work with large codebase with over thousands of files, we're most likely will find it quiet annoying. One way to workaround this problem is to utilize its caching mechanism. According to one of it's plugin configuration option, it turns out that cache is already enabled by default, but it's cleared every time we exit vim. We can keep the cache with this option; add this to vimrc

```vim
let g:ctrlp_clear_cache_on_exit = 0
```

Note that this automatically make our directory out of sync with Ctrl-P. So if we have new files, or rename any existing file, it will not appear immediately in Ctrl-P. To refresh or rescan our directory, we can use <F5> inside Ctrl-P window. This is a way much better behavior than rescan  entire codebase every time we enter vim. Also, Ctrl-P by default ignores all hidden files, e.g filename begin with dot: .gitignore, .jshint, .htaccess, etc. To show hidden files, we can add this to our .vimrc

```vim
let g:ctrlp_show_hidden = 1
```

## Usage

To open Ctrl-P window we use, well, `ctrl-p`. A new window will appear at the bottom, and there are by default three modes visible, and these are what we'll use frequently. Use `ctrl-f` and `ctrl-b` to cycle between modes.

- `files` search for all files within project directory
- `buffer` search for files that's already open in buffer.
- `mru` search for most recently used files.

<h2>Update</h2>
I'm now using fzf for fuzzy finding and no longer using CtrlP, but it was (and still) a great plugin to get started.
<h2>Intro</h2>
Sublime Text (or other editor) has a fuzzy finder feature that let us search for files within our project directory.
Imagine if we want to open specific file but we don't know where it is located, or if we know where the file located but it is buried too deep inside folder directory (for example <code>app/very/long/namespace/controller/domestic.controller.js</code>), it may be hard to find it.
That's why this is a really powerful feature. And since we love vim (aren't we?), we want this feature in our favorite editor too. Vim doesn't have this feature out of the box, but don't worry because there's a plugin for that. Actually, <a href="http://vimawesome.com">there's already vim plugin for (almost) every feature we need</a>. For this task, there's several option we can choose, and I personally have used <a href="https://github.com/ctrlpvim/ctrlp.vim">Ctrl-P</a> for almost a year. It's simple and straightforward.
<h2>Installation</h2>
Installation guide can be found on its <a href="https://github.com/ctrlpvim/ctrlp.vim">documentation</a>.
<h2>Configuration</h2>
By default, whenever we invoke Ctrl-P, it scans our project directory, entirely. It works fine when our directory is relatively small. But when we work with large codebase with over thousands of files, we're most likely will find it quiet annoying. One way to workaround this problem is to utilize its caching mechanism. According to one of it's plugin configuration option, it turns out that cache is already enabled by default, but it's cleared every time we exit vim. We can keep the cache with this option; add this to vimrc
<pre><code class="hljs language-vim">let g:ctrlp_clear_cache_on_exit = 0
</code></pre>
Note that this automatically make our directory out of sync with Ctrl-P. So if we have new files, or rename any existing file, it will not appear immediately in Ctrl-P. To refresh or rescan our directory, we can use inside Ctrl-P window. This is a way much better behavior than rescan  entire codebase every time we enter vim. Also, Ctrl-P by default ignores all hidden files, e.g filename begin with dot: .gitignore, .jshint, .htaccess, etc. To show hidden files, we can add this to our .vimrc
<pre><code class="hljs language-vim">let g:ctrlp_show_hidden = 1
</code></pre>
<h2>Usage</h2>
To open Ctrl-P window we use, well, <code>ctrl-p</code>. A new window will appear at the bottom, and there are by default three modes visible, and these are what we'll use frequently. Use <code>ctrl-f</code> and <code>ctrl-b</code> to cycle between modes.
<ul>
<li><code>files</code> search for all files within project directory</li>
<li><code>buffer</code> search for files that's already open in buffer.</li>
<li><code>mru</code> search for most recently used files.</li>
</ul>


This is a quick overview of the workflow when we want to publish our iOS app. This post is intended to get you through the needed steps, and hopefully give you a quick and solid grasp of how all the things works and connected. We will not cover the app development process here. Before you start, please note that you can also read the fully documented guide about how to distribute your iOS app [here](https://developer.apple.com/library/ios/documentation/IDEs/Conceptual/AppDistributionGuide/Introduction/Introduction.html#//apple_ref/doc/uid/TP40012582).

## Enroll

Since distributing our iOS app is not free, make sure that you have enrolled for **apple developer program** [here](https://developer.apple.com/programs)

## **Certificates, IDs & Profiles**

After login to developer account, go to **Certificates, IDs & Profiles. **There are basically 3 kind of things we need to setup here:

##### Certificates

This thing identifies you as the developer / publisher who develop the app. We need to download the certificate and then install it in our local machine, by double clicking on the file.

##### **App ID**

This is the ID of your app (e.g `com.vendorname.app`)

##### **Provisioning profile**

To make it simple, this thing associates your certificate and the App ID you want to publish, so that they (Apple and your customers) will know who was publishing an App. As we all know, Apple treats this kind of things seriously. Just like the certificate, we need to download the provisioning profile and install it in our local machine, so that it can be recognized later in Xcode.

## iTunes Connect

Sign in to [iTunes connect](https://itunesconnect.apple.com/). There you can register an app record for the App ID you just create before. **App record** is basically the meta data of your App, e.g app title, app description, price, etc. iTunes connect is the place where our app will be uploaded.

## Prepare & Upload

I personally use [ionic framework](http://ionicframework.com/) to develop my app. When the app is ready to production or testing, we need to build it:

ionic build ios

There will be an `.xcodeproj` file inside `platforms/ios/` directory. And we can open it with Xcode by double clicking on it. After that, make sure that we associate the app with the correct provisioning profile, that is the one we create earlier. We need to build it, yes..again, but this time we do it in Xcode (I use Xcode version 7.3). Click on **Product > Build**. Then we need to archive the app. Click on **Product > Archive**. **NOTE**: In order to build and archive our app, we need to target a real device or generic build only device in xcode. See figure below

![targetxcode](https://yeripratama.files.wordpress.com/2016/04/targetxcode.png)

After that open **Window > Organizer** where you can see a list of your archives. There, you can choose the options to validate, export, or upload your app to the iTunes Connect. And finally from the iTunes Connect, we can submit the app to the app store.

## Summary

Distributing my iOS app to the app store for the first time is an exhausting experience. We need some couple of separate steps and I, personally spent hours to gather information I needed. I was wondering why they create such protocol and scatter all the process in different places? Hmm, what do you think? Maybe you can help me answer it in the comment section below. Anyway, that is why this post is written. I hope that you got something useful from here, and thanks for reading.


This is a quick overview of the workflow when we want to publish our iOS app. This post is intended to get you through the needed steps, and hopefully give you a quick and solid grasp of how all the things works and connected. We will not cover the app development process here. Before you start, please note that you can also read the fully documented guide about how to distribute your iOS app <a href="https://developer.apple.com/library/ios/documentation/IDEs/Conceptual/AppDistributionGuide/Introduction/Introduction.html#//apple_ref/doc/uid/TP40012582">here</a>.
<h2>Enroll</h2>
Since distributing our iOS app is not free, make sure that you have enrolled for apple developer program <a href="https://developer.apple.com/programs">here</a>
<h2>Certificates, IDs &#x26; Profiles</h2>
After login to developer account, go to **Certificates, IDs &#x26; Profiles. **There are basically 3 kind of things we need to setup here:
<h5>Certificates</h5>
This thing identifies you as the developer / publisher who develop the app. We need to download the certificate and then install it in our local machine, by double clicking on the file.
<h5>App ID</h5>
This is the ID of your app (e.g <code>com.vendorname.app</code>)
<h5>Provisioning profile</h5>
To make it simple, this thing associates your certificate and the App ID you want to publish, so that they (Apple and your customers) will know who was publishing an App. As we all know, Apple treats this kind of things seriously. Just like the certificate, we need to download the provisioning profile and install it in our local machine, so that it can be recognized later in Xcode.
<h2>iTunes Connect</h2>
Sign in to <a href="https://itunesconnect.apple.com/">iTunes connect</a>. There you can register an app record for the App ID you just create before. App record is basically the meta data of your App, e.g app title, app description, price, etc. iTunes connect is the place where our app will be uploaded.
<h2>Prepare &#x26; Upload</h2>
I personally use <a href="http://ionicframework.com/">ionic framework</a> to develop my app. When the app is ready to production or testing, we need to build it:
ionic build ios
There will be an <code>.xcodeproj</code> file inside <code>platforms/ios/</code> directory. And we can open it with Xcode by double clicking on it. After that, make sure that we associate the app with the correct provisioning profile, that is the one we create earlier. We need to build it, yes..again, but this time we do it in Xcode (I use Xcode version 7.3). Click on Product > Build. Then we need to archive the app. Click on Product > Archive. NOTE: In order to build and archive our app, we need to target a real device or generic build only device in xcode. See figure below
<img src="https://yeripratama.files.wordpress.com/2016/04/targetxcode.png" alt="targetxcode">
After that open Window > Organizer where you can see a list of your archives. There, you can choose the options to validate, export, or upload your app to the iTunes Connect. And finally from the iTunes Connect, we can submit the app to the app store.
<h2>Summary</h2>
Distributing my iOS app to the app store for the first time is an exhausting experience. We need some couple of separate steps and I, personally spent hours to gather information I needed. I was wondering why they create such protocol and scatter all the process in different places? Hmm, what do you think? Maybe you can help me answer it in the comment section below. Anyway, that is why this post is written. I hope that you got something useful from here, and thanks for reading.

A few days ago I need to implement a feature where the user can save some displayed image in ionic app to the device image gallery. In my case, it was an image displayed using html img tag with external source url. So all I need was some method to download that file. Though the task is simple, it's been a-lot-of-browsing activity since it was my first time dealing with cordova plugin. Then I decided to write this post, to explain the steps needed and wrap it all up. Let's begin. First we create an ionic project, and move to that directory

```bash
ionic start saveimage blank
cd saveimage
```

Then make sure we add appropriate platform **Note:** this tutorial is intended to work with android platform, since I have not successfully make it works on iOS.

```bash
# for android
ionic platform add android
```

In this project we will use ngCordova for easier use of cordova plugin within ionic. To set it up you can download the source files from [their website](http://ngcordova.com) or you can simply download it via bower:

```bash
bower install ngCordova
```

If you don't have bower installed just type the following command to install it.

```bash
npm install -g bower
```

And then include it in `www/index.html`. If you installed it via bower, you can find the source file in `www/lib/` directory. Or include the appropriate file if you donwload the source files from the ngcordova website.

```html
<script src="lib/ngCordova/dist/ng-cordova.js"></script>
<script src="cordova.js"></script>
```

Next we need to include the ngCordova into our module. Open `www/js/app.js` and add the following

```javascript
angular.module("myApp", ["ngCordova"]);
```

For the actual action to download the file, we need to install the [cordova file transfer plugin](http://ngcordova.com/docs/plugins/fileTransfer/).

```bash
ionic plugin add cordova-plugin-file-transfer
```

The file transfer plugin does not automatically add the downloaded file to the gallery, so we need additional plugin to do it. Install plugin to refresh gallery.

```bash
ionic plugin add https://github.com/lotterfriends/refreshgallery
```

Note that without this plugin, we can still download the image file, but to make it available in the gallery, we have to reboot our device, and that's kind of..inefficient. Ok, setup clear. Let's make a test button to download the file. Don't forget to associate the template with our controller. Put this in `www/index.html` 

```html
<ion-content class="padding" ng-controller="HomeCtrl">
 <button
 ng-click="downloadImage()"
 class="button button-block button-positive"
 >
 Download
 </button>
</ion-content>
```

Now create the controller, and make a scope function. Add the following code in the `www/js/app.js`

```javascript
.controller('HomeCtrl', function($scope, $cordovaFileTransfer) {
 $scope.downloadImage = function() {
 var url = "http://ngcordova.com/img/ngcordova-logo.png",
 filename = url.split("/").pop(),
 targetPath = cordova.file.externalRootDirectory \+ filename,
 options = {},
 trustHosts = true;

 $cordovaFileTransfer.download(url, targetPath, options, trustHosts)
 .then(
 function(result) {
 alert('Download success');
 refreshMedia.refresh(targetPath);
 },
 function(err) {
 alert('Error: ' + JSON.stringify(err));
 },
 function(progress) {
 // progressing download...
 }
 );
 };
});
```

We add `$cordovaFileTransfer` as dependency to our controller. This is the service ngCordova provide to us. Then we call the `$cordovaFileTransfer.download()` method to download the file. The url parameter is the path to the file we want to download, and targetPath is the directory in the device to save our downloaded file.

And..here is the part where I get lost I tried using `cordova.file.dataDirectory` but I can't find the downloaded file anywhere on my device's file browser let alone in the gallery, because apparently it points to private directory where the app is installed. Took me some times to realize it after exploring my android's directories using `adb shell` command. Then, I finally found out that `cordova.file.externalRootDirectory` actually points to the root of **internal storage** of my android device! So I used it instead. Notice that the `cordova.file` is actually provided by [cordova file plugin](http://ngcordova.com/docs/plugins/file/), however we can still access it with the file transfer plugin. You can get full list of provided paths [here](https://github.com/apache/cordova-plugin-file#where-to-store-files).

Note for iOS, I think you can use the `cordova.file.dataDirectory` path, but I haven't tested it yet. Back to our download method. It returns a promise that we can pass some callback function on it. The first one is success callback, second is error callback, and the last is the callback that is called when the download is still progressing. And if you haven't already noticed the `refreshMedia`, it is provided by 'refresh gallery plugin'. The `refreshMedia.refresh()` method makes the file available in the gallery, immediately after downloaded.

**Important:** currently, we have to test the app on device and we can not test it in the browser via 'ionic serve'... Well, you guess what? I think actually we can! But maybe that will be a discussion for another post.

## Conclusion

Congratulations! We have learn how to download external image directly through ionic, moreover, we have also learn how to deal with cordova plugin. Well, thanks for reading! I hope you found something useful from here.

A few days ago I need to implement a feature where the user can save some displayed image in ionic app to the device image gallery. In my case, it was an image displayed using html img tag with external source url. So all I need was some method to download that file. Though the task is simple, it's been a-lot-of-browsing activity since it was my first time dealing with cordova plugin. Then I decided to write this post, to explain the steps needed and wrap it all up. Let's begin. First we create an ionic project, and move to that directory
<pre><code class="hljs language-bash">ionic start saveimage blank
cd saveimage
</code></pre>
Then make sure we add appropriate platform Note: this tutorial is intended to work with android platform, since I have not successfully make it works on iOS.
<pre><code class="hljs language-bash"># for android
ionic platform add android
</code></pre>
In this project we will use ngCordova for easier use of cordova plugin within ionic. To set it up you can download the source files from <a href="http://ngcordova.com">their website</a> or you can simply download it via bower:
<pre><code class="hljs language-bash">bower install ngCordova
</code></pre>
If you don't have bower installed just type the following command to install it.
<pre><code class="hljs language-bash">npm install -g bower
</code></pre>
And then include it in <code>www/index.html</code>. If you installed it via bower, you can find the source file in <code>www/lib/</code> directory. Or include the appropriate file if you donwload the source files from the ngcordova website.
<pre><code class="hljs language-html">&#x3C;script src="lib/ngCordova/dist/ng-cordova.js">&#x3C;/script>
&#x3C;script src="cordova.js">&#x3C;/script>
</code></pre>
Next we need to include the ngCordova into our module. Open <code>www/js/app.js</code> and add the following
<pre><code class="hljs language-javascript">angular.module("myApp", ["ngCordova"]);
</code></pre>
For the actual action to download the file, we need to install the <a href="http://ngcordova.com/docs/plugins/fileTransfer/">cordova file transfer plugin</a>.
<pre><code class="hljs language-bash">ionic plugin add cordova-plugin-file-transfer
</code></pre>
The file transfer plugin does not automatically add the downloaded file to the gallery, so we need additional plugin to do it. Install plugin to refresh gallery.
<pre><code class="hljs language-bash">ionic plugin add https://github.com/lotterfriends/refreshgallery
</code></pre>
Note that without this plugin, we can still download the image file, but to make it available in the gallery, we have to reboot our device, and that's kind of..inefficient. Ok, setup clear. Let's make a test button to download the file. Don't forget to associate the template with our controller. Put this in <code>www/index.html</code> 
<pre><code class="hljs language-html">&#x3C;ion-content class="padding" ng-controller="HomeCtrl">
 &#x3C;button
 ng-click="downloadImage()"
 class="button button-block button-positive"
 >
 Download
 &#x3C;/button>
&#x3C;/ion-content>
</code></pre>
Now create the controller, and make a scope function. Add the following code in the <code>www/js/app.js</code>
<pre><code class="hljs language-javascript">.controller('HomeCtrl', function($scope, $cordovaFileTransfer) {
 $scope.downloadImage = function() {
 var url = "http://ngcordova.com/img/ngcordova-logo.png",
 filename = url.split("/").pop(),
 targetPath = cordova.file.externalRootDirectory \+ filename,
 options = {},
 trustHosts = true;

 $cordovaFileTransfer.download(url, targetPath, options, trustHosts)
 .then(
 function(result) {
 alert('Download success');
 refreshMedia.refresh(targetPath);
 },
 function(err) {
 alert('Error: ' + JSON.stringify(err));
 },
 function(progress) {
 // progressing download...
 }
 );
 };
});
</code></pre>
We add <code>$cordovaFileTransfer</code> as dependency to our controller. This is the service ngCordova provide to us. Then we call the <code>$cordovaFileTransfer.download()</code> method to download the file. The url parameter is the path to the file we want to download, and targetPath is the directory in the device to save our downloaded file.
And..here is the part where I get lost I tried using <code>cordova.file.dataDirectory</code> but I can't find the downloaded file anywhere on my device's file browser let alone in the gallery, because apparently it points to private directory where the app is installed. Took me some times to realize it after exploring my android's directories using <code>adb shell</code> command. Then, I finally found out that <code>cordova.file.externalRootDirectory</code> actually points to the root of internal storage of my android device! So I used it instead. Notice that the <code>cordova.file</code> is actually provided by <a href="http://ngcordova.com/docs/plugins/file/">cordova file plugin</a>, however we can still access it with the file transfer plugin. You can get full list of provided paths <a href="https://github.com/apache/cordova-plugin-file#where-to-store-files">here</a>.
Note for iOS, I think you can use the <code>cordova.file.dataDirectory</code> path, but I haven't tested it yet. Back to our download method. It returns a promise that we can pass some callback function on it. The first one is success callback, second is error callback, and the last is the callback that is called when the download is still progressing. And if you haven't already noticed the <code>refreshMedia</code>, it is provided by 'refresh gallery plugin'. The <code>refreshMedia.refresh()</code> method makes the file available in the gallery, immediately after downloaded.
Important: currently, we have to test the app on device and we can not test it in the browser via 'ionic serve'... Well, you guess what? I think actually we can! But maybe that will be a discussion for another post.
<h2>Conclusion</h2>
Congratulations! We have learn how to download external image directly through ionic, moreover, we have also learn how to deal with cordova plugin. Well, thanks for reading! I hope you found something useful from here.

Latest Post

GitHub pages domain takeover

02 Mar 2025

Tailwind CSS v4 summary

01 Mar 2025

Customizing nvim lualine

31 Dec 2023

Latest Works

Viapulsa Customer Chat Panel

Frontend Developer — 2025

MitraGamers Client Website

Frontend Developer — 2025

Maviapulsa

Fullstack Developer — 2024