Repodev.com RSS Feed

Shell: Using "grep" to Extract URLs from Junk Data

Wed, 22 Mar 2023 17:00:00 GMT

credit: @imranparray101

cat file | grep -Eo "(http|https)://[a-zA-Z0-9./?=_-]*"*

curl http://host.xx/file.js | grep -Eo "(http|https)://[a-zA-Z0-9./?=_-]*"*

Setup Typescript for ExpressJS Project

Thu, 30 Sep 2021 17:00:00 GMT

Some of you might already use Typescript on all of your projects, maybe for frontend application or backend application. There're also a few Nodejs frameworks that already support Typescript with no config required. I myself still using ExpresJS with plain Javascript, because some of my coworkers are not using Typescript or familiar with it, so that's the best choice for me. Typescript is really useful for us to prevent bugs in the development phase, yup, Type definitions do their job very well. But, not every Nodejs frameworks support it by default, in this case ExpressJS, we need to configure it to make it work in ExpressJS environment.

There are so many examples we can find in the internet about how to configure or using ExpressJS using Typescript, but in this article I'd like to share mine.

Prerequisite

We will start from scratch. First create a directory and install ExpressJS and Typescript packages for our project.

mkdir express-with-typescript; cd express-with-typescript; npm init -y; npm i express typescript ts-node tslib

The project structure for this project would be like the following example. Ignore it for now, please jump to the next step.

express-with-typescript/
  |__src/
    |controllers/
      |__index.controllers.ts
    |__interfaces/
      |__routes.interfaces.ts
    |__routes/
      |__index.route.ts
    app.ts
    server.ts
  nodemon.json
  package.json
  tsconfig.json

Create a Basic App

We will create a very basic example at the moment. Create 2 files, app.js and server.js.

// app.js =====
const express = require('express');
const app = express();

app.get('/', (req, res) => {
  res.send('hello index');
});

module.exports = app;

// server.js =====
const app = require('./app');
const port = 3000;

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`);
});

We are done here, now let's start to configure Typescript for our simple app.

Configure Typescript

In our root directory, create a file called tsconfig.json. More info about this file, please check Typescript documentation.

{
  "compileOnSave": false,
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "allowJs": true,
    "baseUrl": "src",
    "declaration": true,
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "forceConsistentCasingInFileNames": true,
    "importHelpers": true,
    "lib": ["es2017", "esnext.asynciterable"],
    "moduleResolution": "node",
    "module": "commonjs",
    "noEmit": false,
    "outDir": "./dist",
    "pretty": true,
    "paths": {
      "@/*": ["*"],
      "@routes/*": ["routes/*"],
      "@interfaces/*": ["interfaces/*"],
      "@controllers/*": ["controllers/*"],
      "@utils/*": ["utils/*"]
      [...] more directory here
    },
    "resolveJsonModule": true,
    "sourceMap": true,
    "target": "es2017",
    "typeRoots": ["node_modules/@types"]
  },
  "exclude": ["node_modules"]
}

The compilerOptions is our main configuration. Inside that block, you can configure how the transpile works on our project. See the paths block in this example, you can mapping your modules inside that block, you can read TSConfig page for more detail.

Our project is not ready yet. Next, we need to install @types/node package. This package is used to load in all type definitions when using typescript in node, and we need to install additional packages for our project.

npm i -D @types/node @types/express tsconfig-paths

Now, we need to modify our previous code to become a Typescript files. Change .js to .ts, then update the content with the following code.

// app.ts ===================
import express from 'express';
import Routes from '@interfaces/routes.interface';

class App {
  public app: express.Application;
  public port: string | number;

  constructor(routes: Routes[]) {
    this.app = express();
    this.port = 3000;
    this.initializeMiddlewares();
    this.initializeRoutes(routes);
  }

  public listen() {
    this.app.listen(this.port, () => {
      console.log(`App listening on the port ${this.port}`);
    })
  }

  private initializeMiddlewares() {
    // more middewares here...
    this.app.use(express.json());
  }

  private initializeRoutes(routes: Routes[]) {
    routes.forEach(route => {
      this.app.use('/', route.router);
    });
  }
}

export default App;

// server.ts =====================
import App from '@/app';
import IndexRoute from '@routes/index.route';

const app = new App([new IndexRoute()])

app.listen()

As you can see, I am using mapping for modules, interfaces & routes, because I setup its paths (based on the project structure) inside compilerOptions. You can add more modules if you want, but do not forget to update your compilerOptions configuration. Now create that directories and its file.

mkdir -p express-with-typescript/{controllers/,interfaces/,routes/}
touch express-with-typescript/{controllers/index.controllers.ts,interfaces/routes.interface.ts,routes/index.route.ts}

Then, put these code on each files.

// index.controllers.ts
import { NextFunction, Request, Response } from 'express';

class IndexController {
  public index = (req: Request, res: Response, next: NextFunction): void => {
    try {
      res.send('hello index');
    } catch (error) {
      next(error);
    }
  };
}

export default IndexController;

// routes.interface.ts ==========
import { Router } from 'express';

interface Route {
  path?: string;
  router: Router;
}

export default Route;

// index.route.ts ==============
import { Router } from 'express';
import Route from '@interfaces/routes.interface';

class IndexRoute implements Route {
  public path = '/';
  public router = Router();

  constructor() {
    this.initializeRoutes();
  }

  private initializeRoutes() {
    this.router.get(`${this.path}`, () => {
      console.log('hello index')
    });
  }
}

export default IndexRoute;

We are almost done, before run our application, create nodemon.json file with the following configuration.

{
  "watch": ["src"],
  "ext": "ts,js",
  "exec": "ts-node -r tsconfig-paths/register --transpile-only src/server.ts"
}

And put a start script inside package.json file.

"scripts": {
  "start": "nodemon"
}

You can now run the application by npm run command, and try to access it through port 3000, you will see hello index text as the result. So, that's how I use Typescript in my node projects, I hope it's useful for you. By the way, you might want to consider a framework that's already support Typescript like NestJS, i strongly recommend it.

JavaScript: Check Vowel in a Sentence

Mon, 20 Sep 2021 17:00:00 GMT

function vowels(str) {
  const matchesVowel = str.match(/[aiueo]/gi);
  return matchesVowel?.length || 0;
}

JavaScript: Reverse Integer

Sat, 18 Sep 2021 17:00:00 GMT

function reverseInt(num) {
  if (num < 0) return -reverseIntOpt(-num);
  const reversed = num.toString().split('').reverse().join('');

  return Number(reversed);
}

PostgreSQL Indexes

Sun, 15 Aug 2021 17:00:00 GMT

We know that Index is really important when we develop an app with database. It can improve our query performance to provide a specific result that we want. A little note here, Indexes are entry points for tables and Indexes are stored in storage (stored separately from the table's main storage a.k.a Heap). PostgreSQL has several types of Index System that we can use, also, we need to know and select the best Index system for our query.

In this article, I'm going to describe some of the PostgreSQL Indexes and its examples, so let's start with the basic.

1. Create Index

First, we create a table and an index.

CREATE TABLE foo(id INTEGER, fullname TEXT, birthdate DATE, address TEXT, phone NUMERIC);

I assume you've provided some data in this table, just create a function or coding to generate a data seed maybe 10K records or even bigger. After that run the EXPLAIN ANALYZE clause before and after an Index is set. For example:

EXPLAIN ANALYZE SELECT fullname FROM foo WHERE id = 589;

We'll get the result of the execution time, but what will happen after we set an index on that table and run the same query.

CREATE INDEX foo_idx ON foo(id);

Try to run the same explain ANALYZE query above and you will see the different. That's how an index works. For more info about create an index in PostgreSQL, please refer to the official website and do not forget to select the version based on your PostgreSQL version.

2. More About Index

PostgreSQL index has its own file on disk, as I mentioned above, indexes are stored in storage. We can check that by run the following query and command:

SELECT relfilenode FROM pg_class WHERE relname LIKE 'foo_idx';

ls -lrt $PGDATA/

You can see inside that directory for the result that we get from refilenode value. The same value is the index on the table that we created.

When we create an index, PostgreSQL will lock the table by using CREATE INDEX .... query, but in case we do not want lock the table, we can add an additional option to the query like CREATE INDEX CONCURRENTLY ......

PostgreSQL by default will use BTREE to create an index. There is a HASH, BRIN, and GIN index. To use one of these index, we need to write it in the query.

Hash index

Hash indexes only handles equality operators =. For example:

CREATE INDEX hash_idx ON foo USING HASH (fullname);
EXPLAIN ANALYZE SELECT * FROM foo WHERE fullname = 'Test&';

BRIN index (Block Range Index)

This index contains only 3 items: Max value, Min value of column and Page number. It is useful for query that have some connection or large sequentially data, for example querying date.

CREATE INDEX hash_idx ON foo USING BRIN (birthdate);
EXPLAIN ANALYZE SELECT * FROM foo WHERE birthdate > '1990-01-22' AND birthdate < '2000-10-12';

GIN index (Generalized Inverted Index)

I cannot remember when the last time I used this type of index. As far as I know, when we need to index composite values like jsonb type data (documents and arrays), we use GIN index. For example if you have data:

SELECT name, detail FROM user;
("name": "John Doe", "detail": {"Main Street No. 123", "0888-210-444"}),
....
(50 rows)

And to create an index and anayze it:

CREATE INDEX gin_idx ON user USING GIN (name);
EXPLAIN ANALYZE SELECT * FROM user WHERE name @> '{"name": "John Doe"}';

Please check the official website for more detail.

GiST index (Generalized Search Tree)

This index is preferred text search index type, is it is used for full text search, even if GIN index also can be used to speed up full text searches. I myself never use this index, because I used another full-text search platform instead. But I really want to use this index, I will think of it later :D.

Again, please check the official website for the detail.

Expression index

Querying is not only for id column, sometimes we also querying with some expressions. For example we want to retrieve the fullname column only in Uppercase or Lowercase. This kind of expression are accepted by PostgreSQL to be an index.

EXPLAIN ANALYZE SELECT * FROM foo WHERE UPPER(fullname) LIKE 'Test';
CREATE INDEX exp_idx ON foo (UPPER(fullname));

You can also create an index for more complex expression though.

Partial index

Partial index is really useful for querying a specific number of record that we want to retrieve. For example we want to querying data with id between 500 and 1000.

CREATE INDEX partial_idx ON foo(id) WHERE id >= 500 AND <= 1000;

The index will not selected for id less than 500 and greater than 1000.

Duplicate indexes

Sometimes it happens, we create multiple indexes. I found a query to check how many duplicate indexes in tables.

SELECT indrelid::regclass relname, indexrelid::regclass indexname, indkey
FROM pg_index
GROUP BY relname, indexname, indkey;

SELECT indrelid::regclass relname, indkey, amname,
FROM pg_index i, pg_opclass o, pg_am a
WHERE o.oid = ALL (indclass)
AND a.oid = o.opcmethod
GROUP BY relname, indclass, amname, indkey
HAVING count(*) > 1;

Unused indexes

You've might created an index but end up not using it and forgot to delete it. To see unused indexes, you can simply run the following query:

SELECT relname, indexrelname, idx_scan FROM pg_catalog.pg_stat_user_indexes;

Data types for index

For specific index has their own supported data types. To see that data types that supported by a specific index, run the following query:

SELECT amname, opfname FROM pg_opfamily, pg_am WHERE opfmethod = pg_am.oid AND amname = 'hash';

You can change the name of index on that query to see the list of supported data types for a particular indexes.

Retrieve index status

There's a view that contains information about indexes that we have in our database, check `pg_stat_user_indexes.

That's all of the things about PostgreSQL Indexes that i want to share in this article. I hope it's useful for you to know and can help you to improve your query by using index. And it's important to remember that indexes are very costly operation and takes space on your system.

JavaScript: Get Random Item From an Array

Fri, 23 Jul 2021 17:00:00 GMT

const items = [1, 2, 3, 4, 5, 6, 7, 8, 9];

function getRandomItem(arr) {
  return arr[Math.floor(Math.random() * arr.length)];
}

getRandomItem(items);

JavaScript: Get Random Number

Fri, 23 Jul 2021 17:00:00 GMT

function getRandomNumber(minVal, maxVal) {
  return Math.floor(Math.random() * (maxVal - minVal + 1)) + minVal;
}
getRandomNumber(5, 99);

JavaScript: Intersection of Arrays

Fri, 23 Jul 2021 17:00:00 GMT

const arr1 = ['a', 'b', 'c', 'd', 'e'];
const arr2 = ['b', 'e'];

function intersectionArray(a, b) {
  return a.filter(Set.prototype.has, new Set(b));
}

intersectionArray(arr1, arr2); // ["b", "e"]

JavaScript: Union of Arrays

Fri, 23 Jul 2021 17:00:00 GMT

const arr1 = ['a', 'b', 'c'];
const arr2 = ['a', 'c', 'b', 'd', 'e'];

const unionArr = (a, b) => Array.from(new Set([...a, ...b]));

unionArr(arr1, arr2); // ["a", "b", "c", "d", "e"]

JavaScript: Remove Specific Object Key from Array of Objects

Wed, 21 Jul 2021 17:00:00 GMT

const allUser = [
  {
    id: 1,
    name: 'John',
    password: '1234',
  },
  {
    id: 2,
    name: 'Doe',
    password: 'abcd',
  },
];

// exclude `password` field
const users = allUser.map(({ password, ...rest }) => rest);
return users;

Shell: Docker Stop All Running Containers

Wed, 21 Jul 2021 17:00:00 GMT

docker stop $(docker ps -q)

Shell: rsync Local Files to Server

Wed, 21 Jul 2021 17:00:00 GMT

rsync -arvz -e 'ssh -p 22' \
source_dir/{dir1,dir2} \
username@ip_address:/destination_dir

Shell: SSH Tunnel Server Services to Local

Wed, 21 Jul 2021 17:00:00 GMT

Host docker IP address: 172.17.0.1
Server local IP address: 127.0.0.1
Server private IP address: 192.168.10.111

# direct
ssh username@public_ip -L 3306:server_local_ip:3306 -L 27017:server_local_ip:27017

# to docker
ssh username@public_ip -L docker_host_ip:3306:server_local_ip:3306 -L docker_host_ip:27017:server_local_ip:27017

# with key
ssh -i ~/key.pem username@public_ip -L docker_host_ip:3306:server_private_ip:3306

JavaScript: Chunk an Array

Mon, 12 Jul 2021 17:00:00 GMT

function chunkItems(arr, chunkSize = 4) {
  const chunks = Array.from(
    { length: Math.ceil(arr.length / chunkSize) },
    (_, i) => {
      const start = chunkSize * i;
      return arr.slice(start, start + chunkSize);
    }
  );
}

JavaScript: Get Date

Mon, 12 Jul 2021 17:00:00 GMT

const date = new Date();

// change `default` to a specific TimeZone
const day = date.toLocaleString('default', { weekday: 'long' });
const month = date.toLocaleString('default', { month: 'short' });
const year = date.toLocaleString('default', { year: 'numeric' });

JavaScript: Object Properties

Mon, 12 Jul 2021 17:00:00 GMT

const user = { id: 1, name: 'John Doe' };
const contact = { phone: 4722880, address: 'Akihabara' };

Object.keys(user); // getting the keys => ["id", "name"]
Object.values(user); // getting the values => [1, "John Doe"]
Object.assign(user, contact); // extend objects => {address: "Akihabara", id: 1, name: "John Doe", phone: 4722880}

Install Android SDK Without Android Studio

Tue, 09 Mar 2021 17:00:00 GMT

Android Studio is one of the best development tool to create Android application. But we know that this tool is too heavy for some machines, like mine. In order to develop an Android application, we need to use their SDK which is available to be download separately. So let's get started.

1. Prerequisite Tools

First, we need to download the latest SDK from Android official website and navigate to the Command line tools only then download the file based on your OS, in this case I'm using Linux. Another tool we need to use is Gradle (optional), please download the latest Gradle file.

2. Manual Setup

Since we're not using Android studio bundle system, we need to setup the tools manually. I'm going to use /home/username/bin/ for the installation directory. The installation directory would be like /home/username/bin/android/sdk/cmdline-tools/latest and /home/username/bin/android/gradle. Extract the SDK or cmdlinetool and Gradle file inside our installation directory. The structure is supposed to be the following:

  /home/username/bin/android/sdk/cmdline-tools/latest/
    |_bin/
    |_lib/
    |_NOTICE.txt
    |_source.properties

  /home/username/bin/android/gradle/gradle-x.x.x/
    |_bin/
    |_docs/
    |_init.d/
    |_lib/
    |_src/
    |_LICENSE
    |_NOTICE
    |_README

Before set our environment variable, try to run the cmdline-tools/bin/sdkmanager script from terminal command by running ./sdkmanager --list you'll get a list of available packages.

3. Install Packages

We need to install such packages like system-images;android-x;google_api;x86_64, platform;android-x, platform-tools, build-tools;x.x.x, where x means the version.

  ./sdkmanager "platforms;android-30" "system-images;android-30;google_apis;x86_64" "platform-tools"
  ./sdkmanager --licenses

In order to connect our real device to the application, we need to install an additional packages, please install the following packages: sudo pacman -S libmtp android-tools android-udev (the package name for other Linux Distro might be different).

Now we create new entry in Path environment variable.

  vi ~/.bashrc
    # Android SDK files
    export ANDROID_HOME="$HOME/bin/android/sdk"
    export PATH=$PATH:$ANDROID_HOME/cmdline-tools/latest:$ANDROID_HOME/cmdline-tools/latest/bin:$ANDROID_HOME/platform-tools
    # Gradle
    export PATH=$PATH:$HOME/bin/android/gradle/gradle-x.x/bin

4. Testing and Run

We are ready to create new virtual device.

  avdmanager create avd -n image_v29 -k "system-images;android-29;google_apis;x86_64"
  avdmanager list avd

Go to emulator directory and try to launch the virtual device by running the following command:

  emulator -avd image_v29

But if you want to develop your application from your device, you need to enable developer option and enable USB debugging, since we're already install the packages, we can easily plugged-in the phone to our machine and then allow the permission and we're done. Please refer to the internet, there are so many tutorial about it.

It is a little tricky but now we are done. We don't need to use Android studio to create and develop our application, with those tools, we can still run the application through AVD or even our Android phone.

SSH Keys with Multiple GitHub Accounts On a Single Machine

Tue, 02 Feb 2021 17:00:00 GMT

SSH key is very useful for us if we want to get rid of the need for typing in the username and password every time we make a Git push. But if we have multiple GitHub accounts on the same machine, we need to manage the SSH keys for each account.

1. Generating the SSH Keys

Before generating an SSH key, we need to check our existing SSH Keys by command: ls -la ~/.ssh Our existing public and private key pairs will list out (if exists).

Let's assume ~/.ssh/id_rsa is not available (if it's available we can reuse it). We can create a new SSH key by running: ssh-key -t rsa. Accept the default location by pressing enter when asked for the location to save the keys. We will get a private and public key at the default ssh location ~/.ssh/.

Above step is supposed to be used for our primary GitHub account, but for our another account, maybe our secondary account, we will create different SSH keys with a specific name.

$ ssh-keygen -t rsa -b 4096 -C "secondary@email.com" -f "id_rsa_secondary"
OR
$ ssh-keygen -t ed25519 -C "secondary@email.com" -f "id_rsa_secondary"

We have two different SSH keys created:

~/.ssh/id_rsa
~/.ssh/id_rsa_secondary

2. Add SSH Keys to GitHub

We already have the SSH keys ready. We will ask our GitHub accounts to recognize the keys we have created. You can follow GitHub Doc in case this process changes on GitHub website.

To copy the public key to the clipboard, run the following command, substituting for the correct filename. We will copy the primary key first.

$ xclip -selection clipboard < ~/.ssh/id_rsa.pub

Then log in to your primary GitHub account:

Go to Settings
Select SSH and GPG Keys
Click on New SSH key button, provide a title, and paste the key in the box.
Click Add SSH key and you are done

Repeat the above steps in your secondary GitHub account.

3. Registering the new SSH Keys

New keys need registered before they are useful. We have to register them with the ssh-agent on our machine. make sure it is running by running eval "$(ssh-agent -s)".

Once running, then add our new keys to the ssh-agent like so:

ssh-add ~/.ssh/id_rsa
ssh-add ~/.ssh/id_rsa_secondary

4. Create a Git Config File

This config file is used to tell git to identify which SSH key is to to be used. It lives at ~/.ssh/config, if the config does not yet exist, we can easily create it:

touch ~/.ssh/config

Here is an example from my ~/.ssh/config file.

Host github.com
HostName github.com
User git
PreferredAuthentications publickey
IdentityFile ~/.ssh/id_rsa

Host secondary.github.com
HostName github.com
User git
PreferredAuthentications publickey
IdentityFile ~/.ssh/id_rsa_secondary

Note that:

git URL that uses github.com should use id_rsa (my primary GitHub account)
git URL that uses secondary.github.com should use id_rsa _secondary (my secondary GitHub account)

5. Cloning Repository

Now that the config are in place and ready to use, we can try it by cloning the corresponding repositories. Make a note that when we clone a repo, we use the host names that we used in the SSH config file.

// uses our primary SSH key
$ git clone git@github.com:primary/repoName.git

// uses our secondary SSH key
$ git clone git@secondary.github.com:secondary/repoName.git

It is a little tricky but now we are done it. Just remember to clone the url with the correct Host format depending on which account you want to use.

How to Install Arch Linux

Tue, 26 Jan 2021 17:00:00 GMT

I have an old Laptop, it has 4GB of RAM and low spec CPU. So I decided to put Arch Linux in it. I was a bit struggle with the installation steps (I'm using Manjaro though :D) but I successfully installed it.

The installation steps is actually explained very well on arch linux official website. But in this post, I just want to share what I've done and maybe it'll be usefull for you in case you also want to try to install Arch Linux.

Let's get started

First, you need to download the ISO file from the Download page. I was using USB flash drive, please refer to Pre-installation section for more details. Be sure to disable Secure Boot on your machine, because Arch Linux installation images do not support Secure Boot.

Installation

I assume you've already logged in on the live environment. You need to connect to the internet to be able to install the packages, check set up a network connection in the live environment for the details.

For example you might want to use iwctl to connect to your WiFi network.

# ip addr                                        <== check your WiFi interface name
# iwctl
    [iwd]# station wlan0 scan                    <== `wlan0` is an example of WiFi interface name
    [iwd]# station wlan0 connect SSID_NAME
    [iwd]# exit
# ping archlinux.org

Through the virtual console, set up the system time and date by typing timedatectl set-ntp true. Then we need to set up our Partitions. I'm using LVM in this example, so feel free to choose your own Partition type.

Partition the disks

Select the block device, in this case X is an example like /dev/sdb, /dev/sdc, it might be different on your system.
```
# lsblk              <== to identify a block device

# fdisk /dev/sdX     <== don't forget to change the X
n (to add a new partition)
p (for primary partition)
1 (default partition number)
(accept default start)
(accept default end)
t (to change partition type)
8e (for LVM partition when using MBR)
i (to verify)
w (save and quit)
```
Alternatively, you can use cfdisk, for example cfdisk /dev/sdX, then select gpt label. Please remember, if you have an EFI System partition, you'll need to install efibootmgr for your machine, we'll do it later. To verify if your machine support EFI System or not, please run: ls /sys/firmware/efi/efivars, if there's an output from that command, you're absolutely need an EFI System partition, if not, then you need a BIOS Boot partition, create 512M size partition with one of those type.

Create LVM partition

After you finished set up the partition, we need to create our LVM disk layout. I have 500GB of storage available, I'll use all of it as a single boot (Linux only). Run the following command step by step. (Again, don't forget to change the X)

# pvcreate /dev/sdX1               <== create physical volumes

# vgcreate vg1 /dev/sdX1           <== create volume groups (vg1 is my group name, you can change it)

== Create logical volumes ==
# lvcreate -L 100G -n root vg1     <== 100GB of /root system
# lvcreate -L 4G -n swap vg1       <== 4GB of swap
# lvcreate -l 100%FREE -n home vg1 <== the rest of available storage after allocation as /home partition

== Format the partitions ==
# mkfs.ext4 /dev/vg1/root
# mkfs.ext4 /dev/vg1/home
# mkswap /dev/vg1/swap
# swapon /dev/vg1/swap

== Mount the file systems ==
# mount /dev/vg1/root /mnt
# mkdir /mnt/home
# mount /dev/vg1/home /mnt/home

If you have EFI System partition, please format the partition with the following command:

# mkfs.fat -F32 /dev/sdX1              <==  change `1` depends on your `EFI System` partition number
# mkdir /mnt/efi
# mount /dev/sdX1 /mnt/efi

Install packages

We're ready to install our essential packages. Since we're still in the virtual console of the live boot environment, pacstrap is the only tool we have to install packages. Run the following command and wait until it finished.
```
# pacstrap /mnt base base-devel vi lvm2 dhclient dhcp dhcpcd linux linux-firmware mkinitcpio git iwd iw wpa_supplicant dialog netctl ifplugd nano networkmanager sudo
```

Configure the system

We're almost finished, next step is go through the following steps and you'll safe.

# genfstab -U /mnt >> /mnt/etc/fstab

# arch-chroot /mnt /bin/bash

# locale-gen

# vi /etc/locale.gen
LANG=en_US.UTF-8      <== uncomment this

# tzselect
# ln -s /usr/share/zoneinfo/Zone/SubZone /etc/localtime   <== change your zone

# hwclock --systohc --utc

# vi /etc/mkinitcpio.conf
HOOKS="...lvm2 filesystems..."    <== put lvm2 inside HOOKS

# mkinitcpio -p linux

# vi etc/hostname

# vi /etc/hosts
127.0.0.1       localhost
::1             localhost
127.0.1.1       your_hostname.localdomain       your_hostname

# useradd -G wheel,audio,video -m your_username
# passwd your_username

# passwd     <== to create `root` password

# EDITOR=vi visudo
%wheel ALL=(ALL) ALL     <== uncomment this

# pacman -S grub                <== Only for BIOS Boot
# pacman -S grub efibootmgr     <== Only for EFI System

# grub-install --target=i386-pc /dev/sdX   <== change the X, Only for BIOS Boot
# grub-install --target=x86_64-efi --efi-directory=/efi/ --bootloader-id=arch_grub     <== Only if you use efi boot mode

# grub-mkconfig -o /boot/grub/grub.cfg

# systemctl enable dhcpcd
# systemctl enable NetworkManager

# exit (from `chroot`)

# reboot

Finally, we're successully installed Arch Linux. The next step is choose your Graphical user interface maybe like GNOME, KDE, etc. If you have problems with the installation steps, feel free to hit me up or refer to Arch Linux installation guide.

How to Switch From Vundle to Vim-Plug the Easy Way

Fri, 10 Apr 2020 17:00:00 GMT

Recently i just switched to vim-plug. I've searched on the internet for better alternatives, and end up with vim-plug. There is no important reason why i switched over from Vundle to vim-plug.

Installing vim-plug is quite easy (see documentation), since i've already installed some plugins with Vundle, there is a useful tips to retrieve the installed plugins on Vundle directory and copying them to vim-plug directory, so i don't need to install all plugins over internet again.

Update .vimrc file

Before doing it, i recommend you to backup it first. Open your .vimrc file and find Vundle setup, like the following example:

    [...]
    " set the runtime path to include VUndle and initialize
    set rtp+=~/.vim/bundle/Vundle.vim
    call vundle#begin()

    " let Vundle manage Vundle, required
    Plugin 'VundleVim/Vundle.vim'

    call vundle#end()
    [...]

Then you need to replace it with:

    [...]
    " Install vim-plug if we don't already have it
    if empty(glob('~/.vim/autoload/plug.vim'))
    silent !curl -fLo ~/.vim/autoload/plug.vim --create-dirs
        \ https://raw.githubusercontent.com/junegunn/vim-plug/master/plug.vim
    autocmd VimEnter * PlugInstall --sync | source $MYVIMRC
    endif

    call plug#begin('~/.vim/plugged')

    call plug#end()
    [...]

We're not done yet, there is one more thing we need to do, we need to change our plugin list with Plug.

    Plugin 'preservim/nerdtree'    " <= this is for Vundle
    Plug 'preservim/nerdtree'      " <= this is for vim-plug

Save it, and restart your vim. After that, you can simply run :PlugInstall and it will automatically copying all the installed plugins from Vundle directory to vim-plug directory.

How To Setup PostgreSQL and PGAdmin4 on Docker

Mon, 13 Jan 2020 17:00:00 GMT

I use docker almost every day (for my development environment) but i don't know why i installed PostgreSQL on my own laptop and not in docker like on my office computer :D. Just for your information, i use Archlinux on my laptop, and i usually got some problems with the regular system update for my PostgreSQL, it tooks me a few hours to fix it that's why i decide to use PostgreSQL database inside docker.

But, i found that by using it on docker is bit different, especially for accessing the PostgreSQL commands since it's being use inside a docker container, so we can't directly use the command through terminal.

I assume you guys already know how to work with docker, and in this article i'll share the basic setup for PostgreSQL database and its tools like PgAdmin through our favorite tool docker compose and terminal. I won't cover any security tips or best configurations since it's only for development, but if you still want to know how to hardening your docker environment for PostgreSQL, please read the documentation.

First step, make sure you have docker and docker compose installed on your machine, then you can pull the PostgreSQL image from docker hub (feel free to choose your own PostgreSQL version), i'm gonna use PostgreSQL 11 and the latest pgadmin4, run docker pull postgres:11-alpine then docker pull dpage/pgadmin4.

Quick setup

You can run the following commands in you terminal:

  $ mkdir postgres-docker && cd postgres-docker

  # Create docker volume for docker
  $ docker volume create --driver local --name=postgrevolume
  $ docker volume create --driver local --name=pgadminvolume

  # Create docker network for docker
  $ docker network create --driver bridge postgrenetwork

  # Create postgre environment files
  $ nano postgre-env.list
  POSTGRES_USER=your_pg_username
  POSTGRES_PASSWORD=your_pg_password

  $ nano pgadmin-env.list
  PGADMIN_DEFAULT_EMAIL=your_pgadmin_email@yourdomain.com
  PGADMIN_DEFAULT_PASSWORD=your_pgadmin_password

  docker run --publish 5432:5432 \
    --volume=postgrevolume:/pgdata \
    --env-file=postgre-env.list \
    --name="postgres" \
    --hostname="postgres" \
    --network="postgrenetwork" \
    --detach \
  postgres:11-alpine

  docker run --publish 8088:80 \
    --volume=pgadminvolume:/var/lib/pgadmin \
    --env-file=pgadmin-env.list \
    --name="pgadmin4" \
    --hostname="pgadmin4" \
    --network="postgrenetwork" \
    --detach \
  dpage/pgadmin4:latest

Open your browser to localhost:8088 and input your pgadmin email and password. Add new server then set the postgres container IP address as host, you can check the IP address through this command docker container inspect postgres or you can just set postgres as host since we've run our docker with --hostname="postgres" option.

Docker Compose

We can also use docker compose to wrapped up our services in one file. Create docker-compose.yml file inside postgres-docker directory with the following configurations:

version: '3.7'
services:
  database:
    image: postgres:11-alpine
    container_name: postgres
    hostname: postgres
    env_file:
      - ./postgre-env.list
    volumes:
      - postgresvolume:/pgdata
    ports:
      - '5432:5432'
    networks:
      - postgrenetwork

  pgadmin4:
    image: dpage/pgadmin4:latest
    container_name: pgadmin4
    hostname: pgadmin4
    env_file:
      - ./pgadmin-env.list
    volumes:
      - pgadminvolume:/var/lib/pgadmin
    ports:
      - '8088:80'
    networks:
      - postgrenetwork

networks:
  postgrenetwork:

volumes:
  postgresvolume:
  pgadminvolume:

Save it and run docker-compose up -d, it'll work as well as you run directly through docker run command on terminal.

With this, there will be no problems anymore if i update/upgrade my linux system, i can completely remove PostgreSQL package from my laptop and just using it through docker container.

Set Up VIM as An IDE - Part 2

Sat, 02 Nov 2019 17:00:00 GMT

Now, in this article i'll continue to setup Vim based on the article part 1. The first thing to do is to add a plugin managers, there are a few plugin manager that you can choose, you can search on google and pick which one do you want to use, but for me, i'm gonna use Vundle. Please see the installation instructions for the plugin manager that you choose.

Theming

Okay, let's assume that you've already installed the plugin manager, then we'll add the following setup inside .vimrc file.

  " PLUGINS
  " ************************************************************************
  " set the runtime path to include VUndle and initialize
  set rtp+=~/.vim/bundle/Vundle.vim
  call vundle#begin()

  " let Vundle manage Vundle, required
  Plugin 'VundleVim/Vundle.vim'

  " Brief help
  " :PluginList       - lists configured plugins
  " :PluginInstall    - installs plugins; append `!` to update or just :PluginUpdate
  " :PluginSearch foo - searches for foo; append `!` to refresh local cache
  " :PluginClean      - confirms removal of unused plugins; append `!` to auto-approve removal

  Plugin 'flazz/vim-colorschemes'
  Plugin 'elzr/vim-json'
  Plugin 'plasticboy/vim-markdown'
  Plugin 'severin-lemaignan/vim-minimap'
  Plugin 'airblade/vim-gitgutter'

  " Icon files
  Plugin 'tiagofumo/vim-nerdtree-syntax-highlight'
  Plugin 'ryanoasis/vim-devicons'
  " Airline
  Plugin 'vim-airline/vim-airline'
  Plugin 'vim-airline/vim-airline-themes'

  " theme plugins
  Plugin 'nightsense/office'
  Plugin 'fatih/molokai'
  Plugin 'nightsense/cosmic_latte'
  Plugin 'ErichDonGubler/vim-sublime-monokai'
  Plugin 'Nequo/vim-allomancer'

  " All of your Plugins must be added before the following line
  call vundle#end()

  try
    " Choose colorscheme
    " *********************************************
    if strftime('%H') >= 7 && strftime('%H') < 20
        colorscheme sublimemonokai
    else
        " colorscheme office-dark
        colorscheme allomancer
        let g:airline_theme='cosmic_latte_dark'
    endif
  catch
  endtry

After you add those setup in you .vimrc file, try to open your Vim and then install all the plugins we've set by using vundle command :PluginInstall. It'll take a few seconds then re-open your Vim and you'll see a theme (color scheme) has been applied on our Vim. Okay, it's cool, but there's one more thing you need to do before going further, since i use vim-devicons, this plugin will adds file type icons for our files inside Vim, so you need to follow the instructions here to make it work.

Let's add some more plugins for our Vim. NOTES: the following plugins are just for my own used, you might not need it, so you can uninstall it later. Please put the following plugin list right above call vundle#end().

  Plugin 'scrooloose/nerdtree'                                                " Better file browser
  Plugin 'scrooloose/nerdcommenter'                                           " Code commenter
  Plugin 'majutsushi/tagbar'                                                  " Class/module browser
  Plugin 'ctrlpvim/ctrlp.vim'                                                 " Code and files fuzzy finder
  Plugin 'mattn/emmet-vim'                                                    " emmet, you know what it is
  Plugin 'kien/tabman.vim'                                                    " Tab list panel
  Plugin 'Townk/vim-autoclose'                                                " Autoclose chars
  Plugin 'fisadev/dragvisuals.vim'                                            " Drag visual blocks arround (it is like Ctrl+d arrow up/down on sublime)
  Plugin 't9md/vim-choosewin'                                                 " Land on window like tmux's 'display-pane'
  Plugin 'tpope/vim-fugitive'                                                 " Git integration
  Plugin 'google/vim-searchindex'                                             " display number of search matches & index of a current match
  Plugin 'ap/vim-css-color'                                                   " Paint css colors with the real color
  Plugin 'tpope/vim-surround'                                                 " Surround
  Plugin 'vim-scripts/matchit.zip'                                            " XML/HTML tags navigation
  Plugin 'vim-scripts/YankRing.vim'                                           " Yank history navigation
  Plugin 'pangloss/vim-javascript'                                            " Javascript indentation and syntax support
  Plugin 'w0rp/ale'                                                           " Check syntax in Vim asynchronously and fix files
  Plugin 'MaxMEllon/vim-jsx-pretty'                                           " JSX syntax pretty highlighting
  Plugin 'styled-components/vim-styled-components'

Save it, and install again by using vundle command :PluginInstall. Cool, we're are done with the plugins setup. But we're not done yet, we need to configure our installed plugins. All the plugins are configurable, which mean you can configure it base on your needs, that's why Vim is powerful. So here is my plugins setup, just put it in the very bottom of .vimrc file:

Plugin Tweak

  " PLUGINS SETUP
  " ********************************************************************************

  " NERDTree -----------------------------
  map <C-b> :NERDTreeToggle<CR>
  let g:NERDTreeDirArrowExpandable = '▸'" Prettier
  " open nerdtree with the current file selected
  nmap <leader>t :NERDTreeFind<CR>
  let g:NERDTreeDirArrowCollapsible = '▾'
  let g:NERDTreeMouseMode = 3
  let NERDTreeShowLineNumbers = 1
  let NERDTreeShowHidden = 1
  let NERDTreeMinimalUI = 1
  let NERDTreeIgnore=['\.pyc$', '\~$']         "ignore files in NERDTree

  " Tagbar -----------------------------
  " toggle tagbar display
  map <F4> :TagbarToggle<CR>
  " autofocus on tagbar open
  let g:tagbar_autofocus = 1

  " Airline -----------------------------
  let g:airline_powerline_fonts = 1
  let g:airline_theme = 'distinguished'
  let g:airline#extensions#ale#enabled = 1
  let g:airline#extensions#tabline#enabled = 1
  let g:airline#extensions#whitespace#enabled = 0
  let g:Powerline_symbols = "fancy"
  let g:Powerline_dividers_override = ["\Ue0b0","\Ue0b1","\Ue0b2","\Ue0b3"]
  let g:Powerline_symbols_override = {'BRANCH': "\Ue0a0", 'LINE': "\Ue0a1", 'RO': "\Ue0a2"}

  " to use fancy symbols for airline
  if !exists('g:airline_symbols')
      let g:airline_symbols = {}
  endif

  " Airline unicode symbols
  let g:airline_left_sep = '»'
  let g:airline_right_sep = '«'
  let g:airline_left_alt_sep = ''
  let g:airline_right_alt_sep = ''

  let g:airline_symbols.branch = ''
  let g:airline_symbols.readonly = ''
  let g:airline_symbols.linenr = ''
  let g:airline_symbols.paste = 'ρ'
  let g:airline_symbols.whitespace = 'Ξ'

  " vim-minimap -----------------------------
  let g:minimap_highlight='Visual'
  let g:minimap_show='<leader>ms'
  let g:minimap_update='<leader>mu'
  let g:minimap_close='<leader>gc'
  let g:minimap_toggle='<leader>gt'

  " CtrlP -----------------------------
  " file finder mapping
  let g:ctrlp_map = '<leader>ee'
  " tags (symbols) in current file finder mapping
  nmap <leader>g :CtrlPBufTag<CR>
  " tags (symbols) in all files finder mapping
  nmap <leader>G :CtrlPBufTagAll<CR>
  " general code finder in all files mapping
  nmap <leader>f :CtrlPLine<CR>
  " recent files finder mapping
  nmap <leader>m :CtrlPMRUFiles<CR>
  " commands finder mapping
  nmap <leader>c :CtrlPCmdPalette<CR>
  " to be able to call CtrlP with default search text
  function! CtrlPWithSearchText(search_text, ctrlp_command_end)
      execute ':CtrlP' . a:ctrlp_command_end
      call feedkeys(a:search_text)
  endfunction
  " same as previous mappings, but calling with current word as default text
  nmap <leader>wg :call CtrlPWithSearchText(expand('<cword>'), 'BufTag')<CR>
  nmap <leader>wG :call CtrlPWithSearchText(expand('<cword>'), 'BufTagAll')<CR>
  nmap <leader>wf :call CtrlPWithSearchText(expand('<cword>'), 'Line')<CR>
  nmap <leader>we :call CtrlPWithSearchText(expand('<cword>'), '')<CR>
  nmap <leader>pe :call CtrlPWithSearchText(expand('<cfile>'), '')<CR>
  nmap <leader>wm :call CtrlPWithSearchText(expand('<cword>'), 'MRUFiles')<CR>
  nmap <leader>wc :call CtrlPWithSearchText(expand('<cword>'), 'CmdPalette')<CR>
  " don't change working directory
  let g:ctrlp_working_path_mode = 0
  " ignore these files and folders on file finder
  let g:ctrlp_custom_ignore = {
              \ 'dir':  '\v[\/](\.git|\.hg|\.svn|node_modules|vendor)$',
              \ 'file': '\.pyc$\|\.pyo$\|\.sh$\|\.so$',
              \ }

  " vim emmet trigger key, prest ctrl + e + comma -----------------------------
  let g:user_emmet_leader_key='<C-E>'

  " TabMan ------------------------------
  " mappings to toggle display, and to focus on it
  let g:tabman_toggle = 'tl'
  let g:tabman_focus  = 'tf'

  " Autoclose ------------------------------
  " Fix to let ESC work as espected with Autoclose plugin
  let g:AutoClosePumvisible = {"ENTER": "\<C-Y>", "ESC": "\<ESC>"}

  " DragVisuals ------------------------------
  " mappings to move blocks in 4 directions
  vmap <expr> <S-M-LEFT> DVB_Drag('left')
  vmap <expr> <S-M-RIGHT> DVB_Drag('right')
  vmap <expr> <S-M-DOWN> DVB_Drag('down')
  vmap <expr> <S-M-UP> DVB_Drag('up')
  " mapping to duplicate block
  vmap <expr> D DVB_Duplicate()

  " choosewin  ------------------------------
  " mapping
  nmap  -  <Plug>(choosewin)
  " show big letters
  let g:choosewin_overlay_enable = 1

  " vim-javascript --------------------------
  " set conceallevel=1
  map <leader>co :exec &conceallevel ? "set conceallevel=0" : "set conceallevel=1"<CR>
  let g:javascript_conceal_function             = "ƒ"
  let g:javascript_conceal_null                 = "ø"
  let g:javascript_conceal_this                 = "@"
  let g:javascript_conceal_return               = "⇚"
  let g:javascript_conceal_undefined            = "¿"
  let g:javascript_conceal_NaN                  = "ℕ"
  let g:javascript_conceal_prototype            = "¶"
  let g:javascript_conceal_static               = "•"
  let g:javascript_conceal_super                = "Ω"
  let g:javascript_conceal_arrow_function       = "⇒"
  let g:javascript_conceal_noarg_arrow_function = "🞅"
  let g:javascript_conceal_underscore_arrow_function = "🞅"

  " ALE (eslint)  -------------------------
  map <C-t> :ALEDetail<CR>
  let g:ale_fix_on_save = 1
  let g:ale_sign_error = '✗'
  let g:ale_sign_warning = '⚠'
  let g:ale_open_list = 1
  let g:ale_set_loclist = 0
  let g:ale_lint_on_enter = 0
  let g:ale_set_quickfix = 1
  let g:ale_keep_list_window_open = 0
  let g:ale_lint_delay = 960000                 " 16 minutes
  let g:ale_lint_on_text_changed= "never"
  let g:ale_list_window_size = 5                " Show 5 lines of errors (default: 10)
  nmap <silent> <Leader>k <Plug>(ale_previous_wrap)
  nmap <silent> <Leader>j <Plug>(ale_next_wrap)
  let g:ale_linters = {
    \  'sh': ['shell'],
    \  'javascript': ['eslint'],
    \}
  let g:ale_fixers = {
    \  'sh': ['shfmt'],
    \  'javascript': ['prettier', 'eslint'],
    \  'json': ['prettier'],
    \  'markdown': ['prettier'],
    \  'yaml': ['prettier'],
    \  'css': ['prettier'],
    \}

  " vim jsx pretty -----------------------
  let g:vim_jsx_pretty_colorful_config = 1

  let g:coc_node_path = '/home/your_username/.nvm/versions/node/v12.13.0/bin/node'

After you added it, you need to install some javascript packages globally like eslint and prettier because i want my Vim to automatically detect syntax error and format my code. To install it, run this command through your terminal npm install -g eslint prettier.

Cool, we're almost done. The last thing you need to do is to install Intellisense engine for Vim. I'm gonna use coc.nvim so please follow the instructions here to install it. After you install it, re-open again your Vim and install the following coc extensions:

coc-tsserver
coc-yank
coc-styled-components
coc-sql
coc-snippets
coc-python
coc-pairs
coc-markdownlint
coc-json
coc-import-cost
coc-html
coc-highlight
coc-docker
coc-css

To install it, use this command through you Vim: :CocInstall coc-tsserver coc-yank etc. Oh i forgot to mention that you need to change your_username inside the config to your user, please change it now and save it again :D.

Okay, we're done with the setup, let's try to edit a javascript file, if it works, it should behave like an IDE, automatically detect built-in functions.

This setup is mean to be use for Javascript environment, i know it's not the good or even best setup for javascript environment but it's quite useful for me. By the way, coc it's not just for javascript, you can even use it for another programming languages, just read on coc.nvim documentations for more details.

Okay our setup is completed. You might be ask, why do i need Vim and set it up to be like an IDE? Why don't just use a modern text editor like VSCode, Sublime or even a powerfull IDE like Netbeans or WebStorm. Well, these tools are not quite suitable for low-end laptop/PC, that's why Vim is the best choice.

I actually not use Vim regularily, but it is fun to use it and get a new exprience for trying a cool stuff with it. Just try it by yourself, i'm sure you will love it.

For the complete setup, you can grab it here or from my github for the updated config.

Set Up VIM as An IDE - Part 1

Fri, 01 Nov 2019 17:00:00 GMT

Have you ever heard about Vim before? Many people say that it's a powerfull text editor. I started to use this tool couple months ago and i enjoy it. I'm not a hardcore Vim user that knows all commands or good setup, but i just want to share how do i setup my Vim.

The Basic Tweak

I assume you guys already know (at least) about how to use Vim, like navigation, searching, etc, you can googling "Vim cheat sheet" to get an overview of all the commands. Here is the very basic setup:

  set autoread                                                                " Set to auto read when a file is changed from the outside
  set backspace=indent,eol,start                                              " more powerful backspacing
  set clipboard=unnamed                                                       " access your system clipboard
  set cmdheight=2                                                             " Height of the command bar
  syntax enable                                                               " enable syntax highlighting and plugin (for netrw)
  set encoding=utf8                                                           " Set utf8 as standard encoding and en_US as the standard language
  set expandtab                                                               " convert tabs into spaces
  set ffs=unix,dos,mac                                                        " Use Unix as the standard file type
  set foldmethod=indent                                                       " Code folding
  set foldlevel=99
  set history=500                                                             " Sets how many lines of history VIM has to remember
  set incsearch                                                               " incremental search
  set laststatus=2                                                            " Always show the status line
  set list                                                                    " Show trailing white space
  set listchars=tab:>·,trail:~,extends:>,precedes:<,space:.                   " eol:¬,tab:>·,trail:~,extends:>,precedes:<,space:.
  set mouse=nicr
  set magic                                                                   " For regular expressions turn magic on
  set nocompatible                                                            " enter the current millenium
  set number                                                                  " always show line numbers
  set hidden
  set ruler                                                                   " Always show current position
  set scrolloff=3                                                             " when scrolling, keep cursor 3 lines away from screen border
  set shiftwidth=2                                                            " amount of block indenting
  set smarttab                                                                " uses the shiftwidth instead of tabstop to delete indented line
  set synmaxcol=200                                                           " performance ???
  set tabstop=2                                                               " press tab, 2 spaces forward, 1 tab == 2 spaces
  set wrap                                                                    " Wrap lines
  filetype plugin indent on

As you can see, there are a bunch of set command for each configuration settings, you can read the notes for each settings i set or you can check on Vim website for more details about the settings.

Try to copy and paste in your empty .vimrc file if you're on *nix system or _vimrc on Windows, then try re-open your vim and edit a file, you'll see (at least) there's color on the text and dots for each spaces. It actually does a lot than you think since i just mention about color and dots, that's why i write a note for each settings so you can read it :D.

Let's move to the next phase, we'll set some shortcuts to interact inside Vim.

  let mapleader = ","
  let maplocalleader = ","
  set termguicolors
  nnoremap <leader>N :setlocal number!<cr>            " Toggle line numbers

  " comma+s to save, comma+q to quit (does not save!), quit all without saving
  nnoremap <leader>ss :w<cr>
  nnoremap <leader>q :q!<cr>
  nnoremap <leader>qa :qa!<cr>

  let $MYVIMRC="/home/you_username/.vimrc"
  nnoremap <leader>rv :source<Space>$MYVIMRC<cr>       " Reload vimrc
  nnoremap <leader>ev :tabnew $MYVIMRC<cr>             " Edit vimrc

  " Copy & paste to clipboard
  noremap <Leader>Y "+y
  noremap <Leader>P "+p

  " change Escape key behaviour
  imap <leader>q <Esc>
  inoremap jj <Esc>

  nnoremap <leader> z                                  " Enable folding with the z

  " Buffer key mappings
  nnoremap <leader>l :bn<cr>
  nnoremap <leader>h :bp<cr>
  nnoremap <leader>0 :bf<cr>
  nnoremap <leader>9 :bl<cr>
  nnoremap <leader>dd :bd<cr>

  " Managing tabs
  nnoremap tn :tabnew<Space>
  nnoremap tk :tabnext<CR>
  nnoremap tj :tabprev<CR>
  nnoremap th :tabfirst<CR>
  nnoremap tl :tablast<CR>
  nnoremap tc :tabclose<CR>

  " :W sudo saves the file
  " (useful for handling the permission-denied error)
  command W w !sudo tee % > /dev/null

  " navigate split screens easily
  nmap <silent> <c-k> :wincmd k<CR>
  nmap <silent> <c-j> :wincmd j<CR>
  nmap <silent> <c-h> :wincmd h<CR>
  nmap <silent> <c-l> :wincmd l<CR>

  " Pressing Shift < or Shift > will let you indent/unident selected lines
  vnoremap < <gv
  vnoremap > >gv

  " comma-1 insert "!" commenting
  nnoremap <leader>1 :norm i!<cr>
  vnoremap <leader>1 :norm i!<cr>

  " comma-' insert """ commenting
  nnoremap <leader>' :norm i"<cr>
  vnoremap <leader>' :norm i"<cr>

  " comma-3 insert "#" commenting
  nnoremap <leader>3 :norm i#<cr>
  vnoremap <leader>3 :norm i#<cr>

  " comma-- insert "--" commenting
  nnoremap <leader>- :norm i--<cr>
  vnoremap <leader>- :norm i--<cr>

  " comma-6 uncomment
  nnoremap <leader>6 :norm ^x<cr>
  vnoremap <leader>6 :norm ^x<cr>

  " Make Y yank everything from the cursor to the end of the line. This makes Y
  " act more like C or D because by default, Y yanks the current line (i.e. the
  " same as yy).
  noremap Y y$

I set mapleader with commad ( , ), you can change it if you want. So, those shortcuts help me a lot to interact inside Vim, for example, i can press , + ev to directly edit my .vimrc file on new buffer and press , + ss to save a file. It's easy right? But you might want to use :verbose imap <your_key> to check is there a conflict for each key-mappings that has been set.

And the last phase for the basic setup is just a miscellaneous setup, you can read the notes for a little information.

  " Ignore compiled files
  set wildignore=*.o,*~,*.pyc
  if has("win16") || has("win32")
      set wildignore+=.git\*,.hg\*,.svn\*
  else
      set wildignore+=*/.git/*,*/.hg/*,*/.svn/*,*/.DS_Store
  endif

  " autocompletion of files and commands behaves like shell
  " (complete only the common part, list the options that match)
  set wildmode=list:longest

  " FINDING FILES: **********************************************************
  " search down into subfolders
  " provides tab-completion for all file-related tasks
  set path+=**

  " display all matching files when we tab complete
   set wildmenu
   set wildmode=list:longest,full
   set lazyredraw

  " NOW WE CAN:
  " - hit tab to :find by partial match
  " - use * to make it fuzzy
  " THINGS TO CONSIDER:
  " - :b lets you autocomplete any open buffer
  " END FINDING FILES: **********************************************************

  " FILE BROWSING: *********************************************************
  " tweaks for browsing
   let g:netrw_banner=0                                    " disable annoying banner
   let g:netrw_browse_split=4                              " open in prior window
   let g:netrw_altv=1                                      " open splits to the right
   let g:netrw_liststyle=3                                 " tree view
   let g:netrw_list_hide=netrw_gitignore#Hide()
   let g:netrw_list_hide.=',\(^\|\s\s\)\zs\.\S\+'

  " NOW WE CAN:
  " - :edit a folder to open a file browser
  " - <CR>/v/t to open in an h-split/v-split/tab
  " - check |netrw-browse-maps| for more mappings
  " END FILE BROWSING: *********************************************************

  " Enable 256 colors palette in Gnome Terminal
  if $COLORTERM == 'gnome-terminal'
      set t_Co=256
  endif

  set background=dark

  " Set extra options when running in GUI mode
  if has("gui_running")
      set guioptions-=T
      set guioptions-=e
      set t_Co=256
      set guitablabel=%M\ %t
      set cursorcolumn!

      " Set up the gui cursor to look nice
      set guicursor=n-v-c:block-Cursor-blinkon0
      set guicursor+=ve:ver35-Cursor
      set guicursor+=o:hor50-Cursor
      set guicursor+=i-ci:ver25-Cursor
      set guicursor+=r-cr:hor20-Cursor
      set guicursor+=sm:block-Cursor-blinkwait175-blinkoff150-blinkon175
  endif

  " better backup, swap and undos storage
  set directory=~/.vim/dirs/tmp     " directory to place swap files in
  set backup                        " make backup files
  set backupdir=~/.vim/dirs/backups " where to put backup files
  set undofile                      " persistent undos - undo after you re-open the file
  set undodir=~/.vim/dirs/undos
  set viminfo+=n~/.vim/dirs/viminfo

  " create needed directories if they don't exist
  if !isdirectory(&backupdir)
      call mkdir(&backupdir, "p")
  endif
  if !isdirectory(&directory)
      call mkdir(&directory, "p")
  endif
  if !isdirectory(&undodir)
      call mkdir(&undodir, "p")
  endif

This setup is actually not from my own experiment, but i do a lot of searching and pick one by one setup that i found and combine it. For now, let's stop here just for the basic setup, i'll continue on part 2 article for the complete setup.

I hope it is useful for you, and you can grab all phase configs from here.

How to Easily Setup Webpack Configuration

Tue, 22 Oct 2019 17:00:00 GMT

When a developer start to learn a framework or library like ReactJS or VueJS we usually found an example project bundled with webpack. Since we're a newcomer in this kind of tool, we don't know how it work. Each articles on the internet has a different configuration on this webpack thing.

Some people might be say just use create-react-app. I know this tool is awesome (i use it a lot though), with just one command, our project is ready to use. But it might be important to know how this thing work, so we should try to setup our own config from scratch. We need to jump to webpack official website to find out how it work, i myself already read all of its content, it is easy to follow, you should try by yourself.

But, here is the important thing in this article. I have found a website (some of you might be already know about this website), like an interactive website to generate a webpack config file. It is support transpiler, styling, image, utilities, linting and optimization. It's called createapp.dev. Of course you should read the webpack concepts first to understand those things work, but if you already know about those things and you're a bit lazy to create your own config, may be you can try to use this website to generate your webpack config.

I know this is not the best config and/or may be not suit with your need, there are so many webpack config that you can find on google. Through this article, i hope it will help you to easily setting up your webpack config.

Running PostgreSQL in Power Saving Mode

Tue, 15 Oct 2019 17:00:00 GMT

Have you heard about it? Running in power saving mode, is it a feature? Actually, it is only for for laptop though. Why for laptop? Let say if your PostgreSQL is only used very sporadically or has periods of total inactivity, like when you're developing an application on your laptop or computer.

Just for your information, i found this tips from a book but i forgot the title.

How to do it?

We all know that a database server mostly does nothing at all if there are no active clients. So, to minimize server activity, set the following paramaters in the postgresql.conf file:

autovacuum = off
wal_writer_delay = 10000 # milliseconds
bgwriter_delay = 10000 # milliseconds

NOTE: please backup your default or current configuration before doing it.

As you can see, we turned off the autovacuum, but why? PostgreSQL has so many awesome features and autovacuum is one of them. I do recommend to use it in production only, and for development, we usually not doing heavy activity or even having a large data on our database, so it should be okay to turn it off.

The WAL writer process wakes up by default every 200 milliseconds. The maximum setting is also 10 seconds. This setting cannot be disable though, if there's no write activity then no work will be performed.

It is actually just a tunning, not a feature. It won't impact the performance while you're doing a development. I'm still using this setting on my laptop though.

Well, i hope this article is useful for you, and i highly recommend you guys to read the PostgreSQL Official Documentation: Config Settings for more details.

The Official Introduction to My Blog

Mon, 14 Oct 2019 17:00:00 GMT

My blog just spawned!!!

Hello my readers, here I am from Indonesia. I want to introduce myself to you, my name is Muh Ibnu Habil Hanafi (my friends call me Bill). Currently i work as a Developer at Arkadia Digital Media (one of Indonesia's Digital Media Group). Some of our core technologies that we use are Opensource. I am feel most comfortable in the backend development, but i do like playing around with Javascript for the frontend. Just for your information, English is not my first language, so you might found incorrect sentences or grammar in this blog (sorry for any mistakes), I am still working on my English.

What can i expect in this blog?

I'll put everything in this blog about tips and technical topics, i'll share my personal knowledge, this also includes useful tips that I found around the internet and hopefully it'll be useful for developers out there.

I know this blog still lack of features, but don't worry, it's just about time and i'll add more features so it can be a complete blog. Finally, don't forget to comeback or you can bookmark now for future content.