Swap Ctrl and Caps Lock in KDE Plasma

Untuk mereka yang terbiasa menggunakan tmux atau vim / neovim mungkin sudah tidak asing lagi dengan metode swap ini. Tmux menggunakan Ctrl + b sebagai default leader key, tapi karena posisi tombol b jauh dari Ctrl, banyak yang kemudian mengubah leader key untuk tmux menjadi Ctrl + a.

Meskipun demikian, tombol Ctrl dan a juga masih terasa berjauhan, sehingga menukar Ctrl dengan Caps lock sangat membantu dalam hal ini. Adapun, untuk menukar fungsi tombol Ctrl dan Caps Lock di KDE Plasma dapat dilakukan dengan cara sebagai berikut:

  1. Buka System Settings
  2. Pilih Input Devices di bagian Hardware
  3. Pilih Keyboard
  4. Pilih Advanced tab di sebelah kanan
  5. Aktifkan pilihan / checkbox Configure keyboard options
  6. Di bagian Ctrl position, aktifkan opsi Swap Ctrl and Caps Lock
  7. Simpan dengan klik tombol Apply

itu saja, mudah bukan? mudah-mudahan informasi ini bermanfaat.

Happy Coding !

[OSX] Add Visual Studio Code to your zsh terminal PATH

To add the Visual Studio Code to your zsh terminal PATH, run this command and restart your terminal.

% cat << EOF >> ~/.zprofile
# Add Visual Studio Code (code)
export PATH="\$PATH:/Applications/Visual Studio Code.app/Contents/Resources/app/bin"
EOF

Then, you can open your Visual Studio Code from your terminal using command

almatins@remoteworker project % code .

The Visual Studio Code will open the current folder for you. 🙂

[Git] Merge and Delete branch

When using git on you daily development routine. You might want to merge and delete branch after you merge on. This is will be automatically taking care by git flow by the way. But, here are the manual way just in case you are curious.

$ git branch
$ git checkout -b new-branch

Makes some changes, commit them. Then, it is time to merge new-branch to the master branch.

$ git merge new-branch

If you want to delete new-branch branch from the local git repository, you can do that using this command.

$ git branch -d new-branch

Then, if you also want to delete the new-branch from the remote repository (if they are pushed to it before), you can use this command.

$ git push origin :new-branch

Thats it ! I hope you will find this useful.

[Docker] Connect to mongodb inside docker container

Here are ways to connect to mongodb that deployed inside a docker container from another docker container in the same docker-compose file.

Here is the Dockerfile

FROM node:14

# Create app directory
WORKDIR /usr/src/app

# Install app dependencies
# A wildcard is used to ensure both package.json AND package-lock.json are copied
# where available (npm@5+)
COPY package*.json ./

RUN npm install
# If you are building your code for production
# RUN npm ci --only=production

RUN npm install --global nodemon

# Bundle app source
COPY . .

## Add the wait script to the image
ADD https://github.com/ufoscout/docker-compose-wait/releases/download/2.8.0/wait /wait
RUN chmod +x /wait

## Launch the wait tool and then your application
EXPOSE 3000
CMD /wait && npm run dev

As you might notice that we use docker-compose script to wait for the mongodb to be ready for connection. This will prevent the error connection because the the script will make sure that the mongodb was ready then start the express server. here is the docker-compose.yml

version: "3.1"

services:
  mongo-docker:
    image: mongo
    container_name: mongo-docker
    restart: always
    environment:
      MONGO_INITDB_ROOT_USERNAME: almatins
      MONGO_INITDB_ROOT_PASSWORD: 4nG3lfr0mh34v3n!

  express:
    build: .
    container_name: express
    restart: always
    ports:
      - 3000:3000
    depends_on:
      - mongo-docker
    environment:
      WAIT_HOSTS: mongo-docker:27017

and finally, the index.js for testing the connection to the mongodb

const express = require("express");
const app = express();
const port = 3000;
const debug = require("debug")("ws");

var MongoClient = require("mongodb").MongoClient;

app.get("/", (req, res) => {
  MongoClient.connect(
    "mongodb://almatins:4nG3lfr0mh34v3n!@mongo-docker:27017/test?ssl=false&authSource=admin",
    function(err, client) {
      if (err) throw err;

      debug("Connected to database");

      var db = client.db("test");

      db.collection("test")
        .find()
        .toArray(function(err, result) {
          if (err) throw err;

          console.log(result);
        });
    }
  );
  res.send("Hello World!");
});

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

You can found the full repository here.

I hope you will find this useful. 🙂

[Docker] Couldn’t connect to Docker daemon

So, I was setup a brand new ubuntu 20.04 server few days ago. When installing, I was offered to install other supported application such as docker, DigitalOcean, AWS etc. Then, I give the docker a checkmark then continue. After the installation process was done, I pull my application source then try to build them using docker-compose command. But, I got thise error message.

ERROR: Couldn't connect to Docker daemon - you might need to ...

Then, I try to get docker status using command

$ sudo systemctl status docker

and it says that Docker.service not found. hmmm.

Then I try to get info from the docker using command

$ docker info

And I got the output that says there is a permission denied on docker.sock. Then, I try to solve the permission issue with this command

$ sudo chown $USER /var/run/docker.sock

Then, I try to build my application once more time and it was build successfully.

I hope you will find this useful. 🙂

[VIM] Disable JavaScript suggestion on Coc-TSServer

I am using vim as my primary code editor. When I work on my JavaScript project ( edit a .js file), coc-tsserver keep warning me about the typescript related warning. Somehow, it is just kind of annoying for me. So, after doing some research, I try to disable the JavaScript suggestion when I am working on a .js file.

First, I use the :CocConfig command to open the ~/.vim/coc-settings.json file. Then, add this line to the file.

{
  "javascript.suggestionActions.enabled": false
}

Save the file, and update using :CocUpdate command.

Now, I don’t get the warning anymore. Yess!

[TMUX] Sessions

We can have multiple sessions on TMUX and in a session, we can have multiple windows, and in a window we can have multiple panes. So cool, isn’t it?

To see the list sessions of TMUX, use this command

$ tmux ls
or
$ tmux list-sessions

If you already have existing session/s of TMUX, then you can attach one of them, so when you open TMUX again, it will be the default session opened by TMUX. This is the command to attach session.

# in terminal
$ tmux attach-session -t sessionName

If you are in the other session of TMUX, you can attach other session and move to them using the leader key combination and the s key. <ctrl + b> s. TMUX will display all the sessions available and you can use one of them using the arrow key or the j, k key.

To start TMUX with a new session from the terminal, use this command

$ tmux
or
$ tmux new
or 
$ tmux new-session

To start TMUX new session in the existing TMUX session, use this command

# press ctrl + b ( or your own mapping keys for the leader keys
:new
or 
:new -s sessionName

To kill the current session ( the one with attached word when you display list sessions ) using this command

# press leader key combination <ctrl + b>
:kill-session

Warning, this will kill the attached session and exit the TMUX session.

Summary

Ok, here are the summary

# New Session
$ tmux
$ tmux new
$ tmux new -s sessionName
or, if you are in one of the TMUX session, use this command
:new
:new -s sessionName

# List Sessions
$ tmux ls
$ tmux list-sessions
or, if you are in one of the TMUX session, use this command
<ctrl + b> s, then choose the session from the sessions list

# Attach Session
$ tmux attach-session -t sessionName
or, if you are in one of the TMUX session, use this command
:attach -t sessionName

# Kill Session
# tmux kill-session -t sessionName
or, if you are in one of the TMUX session, use this command
:kill-session -t sessionName

Hope you will found this useful. Cheers 🙂

[TMUX] Switch Caps lock and Control key for good.

If you are using tmux and vim in your daily basis work, then maybe you want to switch caps lock key and control ( swap them to be precise ) for your own good. Why? because caps lock + a is much more easy to access then the default ctrl + a keys. Of course you will have to train your brain and hand after doing that.

I personally re-map my caps lock and ctrl key (swap them), and use re-map the ctrl + a as the tmux leader key instead of the default ctrl + b. You can do the same too. If you are using linux, try to open the settings window and open the keyboard settings. Usually, on behaviour tab, you will found the option to swap caps lock key with ctrl key. Check the option and save. Then you are good to go.

Here is the screenshot of my KDE settings.

You will able to find similar setting on Gnome, or OSX settings.

Now, it is time to get practices using the new keyboard mapping and have fun !

[TS] Quick add dotenv to your typescript project

Here is a super quick way to add and use dotenv package into your typescript project. If you want to use environment configuration file such as .env in your project, then you can use dotenv package yo read .env configuration file for your application.

First, add the dotenv package to your package.json using command

$ yarn add dotenv

Then, in your typescript file, you can import it using the following command

...
import * as dotenv from "dotenv"
...

// run the dotenv config
dotenv.config()

After that, you can read the content of the .env file using the following syntax

// if the BASE_URL key exist in the .env file, it will be used
// otherwise, it will use the http://localhost as the default base url
const baseURL = process.env.BASE_URL || "http://localhost"

And, your .env file should be look like this

BASE_URL=http://localhost:8002

That’s it, super quick ! Hopefully you find this useful. 🙂