## What is Vim?

Vim is a text editor that runs in the Terminal on systems like Linux. You can use Vim with the command `vim (filename)` in Linux, or you can also use WSL in the Windows Terminal. But in this article, we will discuss Vim as a shortcut rather than as a text editor as a whole, because we can also use Vim shortcuts in Visual Studio Code. We will learn the basics of Vim shortcuts and how you as a programmer can navigate 
through code and become faster and more productive.

![Vim Logo](https://cdn-images-1.medium.com/max/1000/1*sWHADDYd4p6fuUxLLxfhvg.png)

## Why Vim?

Reasons why people use Vim:

-   Its very useful shortcuts
-   Reduces movement of hands from keyboard to mouse
-   Faster navigation in code

![VIM memes](https://cdn-images-1.medium.com/max/1000/0*rhCO6LMoqncOddAO)

## Vim Shortcuts

![Vim Shortcuts](https://cdn-images-1.medium.com/max/1000/0*OUqR4ux0K04g8WXe)

The above image is a summary of the shortcuts available in Vim, it looks like a lot, but one of the cool things about Vim is that you can start thinking inside Vim.

Vim is set up to function like a language, consisting of verbs, adjectives, and nouns.
![Vim summary](https://i.imgur.com/uNeDuK4.png)

For example, we can change the contents of an HTML tag by "changing inside tag" or `c i t`.

![change inside tag](https://cdn-images-1.medium.com/max/1000/0*mDWvI5a56dNLSX_l)

## Starting to Use Vim

One of the reasons people don't use Vim is because they don't get the features in VScode. We can get the benefits of VSCode & Vim Shortcuts with the Vim extension in Visual Studio Code.

![Vim extension](https://cdn-images-1.medium.com/max/1000/0*LdlxSlLGSP5BKvK_)

To learn Vim shortcuts, we can use vimtutor. If we use Linux we can use the `vimtutor` command to open it. Or we can just copy the text from [here](http://www2.geog.ucl.ac.uk/~plewis/teaching/unix/vimtutor) and open it in Visual Studio Code.

![Vim tutor](https://cdn-images-1.medium.com/max/1000/0*aCvbfCj0WoZplnEW)

Above is the image of the contents of vimtutor, it's just a text file that contains the basics of Vim shortcuts, we can navigate through this vimtutor file until the end in about 25-30 minutes.

It takes a little practice to feel confident in using Vim shortcuts, but later on, you will be able to code faster and more accurately than before, go and try it!

Never leave your hands on your keyboard again.

Code Faster with Vim Shortcuts!

## What is Code Snippet?

A code snippet is basically a small portion of a highly reusable code, so if you have a repeating code around your codebase like *library imports*, or a *boilerplate* in your app that you find yourself typing over and over again, that's where *code snippets* comes in 😉

## So, How do I get started? 

Cool, so to get started with code snippets, you can do it without any setup at all, you can just download an extension that fits your liking.

### Using an Extension

![](https://i.imgur.com/BLGMHOu.png)

For example, one of the popular ones is *React Snippets*, after you get the extension you can have a list of snippets in your React project!

![](https://i.imgur.com/H4d63vR.gif)

But it doesn't stop there, to maximize your productivity, you can create a custom code snippet in your project!

### Custom Code Snippet
Let's say you have some thing very specific in your project that you repeat over and over again, 

In my case, inside my React Native project all my screens have this design.

![](https://i.imgur.com/lrfUKUF.png)

So, I have to repeat this code everytime I create a new screen.

```jsx
import React from 'react'
import PageContainer from 'components/PageContainer'
import NavHeader from 'components/NavHeader'

import { Text } from 'native-base'

export default function Homepage() {
  return (
    <PageContainer header={<NavHeader title="Homepage" />}>
      <Text>Hello World</Text>
    </PageContainer>
  )
}
```

We can create a custom snippet for that!

Creating a custom code snippet is very easy, you can go to https://snippet-generator.app/, give the *description*, *tab trigger*, and your code!

![](https://i.imgur.com/goP1aQX.png)

One thing to note here is I used `${1:${TM_FILENAME_BASE}}`, which returns the current file name! It's one of the most common [snippets variable](https://code.visualstudio.com/docs/editor/userdefinedsnippets#_variables) in VSCode.

#### Where do I put the snippets?

You can do `CTRL + SHIFT + P` and search for *User Snippet*, then choose *Preferences: Configure User Snippets*.

![](https://i.imgur.com/1GV4z0m.png)

Then, you'll see an options to where your code snippets lives on, you can choose whether your code snippet lives globally, project only, or language specific.

![](https://i.imgur.com/OruUjM3.png)

In this case we'll choose *New Snippets file for 'my-project'*, give the snippet a name, and copy the snippet from the *snippets generator* inside the object.

```json
{
  "common page": {
    "prefix": "rfpage",
    "body": [
      "import React from 'react'",
      "import PageContainer from 'components/PageContainer'",
      "import NavHeader from 'components/NavHeader'",
      "",
      "import { Text } from 'native-base'",
      "",
      "export default function ${1:${TM_FILENAME_BASE}} () {",
      "",
      "  return (",
      "  <PageContainer header={<NavHeader title=\"${1:${TM_FILENAME_BASE}}\"/>}>",
      "    <Text>Hello World</Text>",
      "  </PageContainer>",
      "  )",
      "}"
    ],
    "description": "common page"
  }
}
```

That's it,
Now you can use it throughout your project!

![](https://i.imgur.com/Pw06m0G.gif)


No more typing the same thing over and over again with Code Snippets!

Easily Boost Your Productivity With Code Snippets

In this article, I will explain in detail how I (finally) made changes to an Open-source project and my thought process behind it.

![](https://media.giphy.com/media/ORiw3L43P6vctTWXT2/giphy.gif)

## Background
I was interested in *competitive programming* at the time and looking to practice some coding problems. There's this site called [A2 Online Judge (A2OJ)](https://a2oj.com/) that have a *ladder* of problem that we can follow based on difficulty and *Codeforces Rating*, It also has a feature that tracks the problem that we solved, but after some time of using it, **the site is permanently shutdown.**

As any programmers, my first instinct was to build it myself.., but I choose to not reinvent the wheel this time and lookup if anyone has made this yet.

Fortunately, I found a [web app on Github](https://github.com/subodhk01/a2oj) that clones the original site. And many people already used it (It has 81 stars! 😲). Still, it doesn't have the *ladder* of problems based on the *Codeforces Rating* that I've enjoyed using before. 

## It started with an Issue
Since it doesn't have those feature I wanted, I start by creating a new issue on Github.

![](https://i.imgur.com/VQU56bn.png)

After some time thinking, I think it's better to contribute since many people already use that, and I think it will be helpful to other people as well. 

## Scoping out the codebase
Since I will add new data, I can just use existing code and figure those out, so I search where the problem list is located in the code and where the data is called in the front-end.

```js
// ladder.py
div_a = [
    [1, 'Watermelon', '4', 'A'] ,
    [2, 'Way Too Long Words', '71', 'A'] ,
    [3, 'String Task', '118', 'A'] ,
    [4, 'Petya and Strings', '112', 'A'] ,
	....
```

I found out it's stored in an array like this, so I have to collect the data from the problem archive and just copy-paste it! Simple enough, right? 😅

![](https://i.imgur.com/sUnAIP1.png)

![](https://i.imgur.com/mbKa8Hm.png)

There are 11 *ladders*, and every ladder has 100 problems. In total **there's about 1100 Problem sets**, so there's no way I'm going to do it manually... Luckily there's just the solution!

![](https://i.imgur.com/RyMN1h5.png)

## Web Scraping

So I learned how to do web scraping with a Node.js library called Cheerio in a quick youtube tutorial, it turns out to be straightforward, this code fetch the A2OJ archive and format it just like the array in the repo that I've looked before.

```js
const axios = require("axios")
const cheerio = require("cheerio")

// Fetch html function
async function fetchHTML(url) {
  const { data } = await axios.get(url)
  return cheerio.load(data)
}

(async () => {
const $ = await fetchHTML("https://a2oj.com/Ladder11.html")

let div = [];

// Get title to array
$('a').each(function (i,elem) {
  let title = $(this).text()
  let url = $(this).attr('href')
  let splitted = url.substr(41).split("/")
  div.push([i+1,title,splitted[0],splitted[1]]);
});

console.log(div);

})();

```

![](https://i.imgur.com/oDOGS5I.png)

Perfect!, the array is formatted just like in the codebase. Now I can just add those array into the code.

## Diving into the codebase
### Adding the Problems

I go back to the code that saves all the problems and follow the naming pattern of the variable, it was named `div_a`, `div_b` ..etc., so I called every ladder to be `rating_1`, `rating_2` ..etc.

```python
rating_1 = [
  [ 1, 'Young Physicist', '69', 'A' ],
  [ 2, 'Beautiful Matrix', '263', 'A' ],
  [ 3, 'Queue at the School', '266', 'B' ],
  [ 4, 'Borze', '32', 'B' ],
  [ 5, 'Beautiful Year', '271', 'A' ],
	..
	..
rating_11 = ..
```

### Link it into the front-end
I imitate the code styling and do as minimum changes as I can.
```diff
	try:
		handle = request.GET['handle']
		div = request.GET['div']
+		rating = request.GET['rating']
...
	div = int(div)
+	rating = int(rating)
...
	elif div == 7:
		division = div_a
		div_head = "DIV 1.E"
	...
+	elif rating == 1:
+		division = rating_1
+		div_head = "Codeforces Rating < 1300"
...
```

And it turns out to be working!

![](https://i.imgur.com/0uqLifc.png)

So I pushed the code and created a pull request.

![](https://i.imgur.com/cY2N5nV.png)

I was sooo satisfied after it's done and finally hitting the pull request button.

![](https://media.giphy.com/media/1d5U0OaCqfC0DQpriC/giphy.gif)

## Things that I learned
1. We don't have to understand the entire codebase. Just focus on the changes you're gonna make and the connection between those. After we broke it into these tiny pieces, it's gonna be so much easier.

2. We just have to imitate the existing code and extend it from there. This way, we can make minimum changes to the code and do it effectively.

3. We don't necessarily know what library/frameworks the codebase is using. We can learn it along the way.

This contribution really 'exposes' me to the world of Open-source and how awesome it is to make changes to a public project that many people use.

---

![](https://media.giphy.com/media/l4JySAWfMaY7w88sU/giphy.gif)

Yay! you made it this far! I hope this post can spark your interest and encourage you to dive into the world of open-source!

How I contributed to open-source and my thought process behind it.

How I Make My First (real) Open Source Contribution

Feel free to get in touch and talk more about your projects.

I'm currently specializing in

Exploring opportunities and side projects.

A website that provides roadmap for various fields in Programming and help people learn to code for free.

creative@home

A web app to analyze whether an opinion on specific topic is positive or negative based on recent tweets using Natural Language Processing concept called Sentiment Analysis.

Opiniometer

It's an easy to use API to get today's (and tomorrow!) prayer time in any city in the world, based on Muslim Pro.

Abdul Rahman.

Software Engineer. A self-taught developer with an interest in Computer Science.

⚡ About Me

All Creative Works.

📰 Latest Article.