## 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 VSCode

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.

Blog