AdventOfCode 2020 is over 🎄 Here is what I learned  🤓
Tags: adventofcode, learning, vim, javascript
Published: 2020-12-28 18:56:46

[Advent of Code](https://adventofcode.com/) is an Advent calendar of programming puzzles of varying difficulty. For 25 days, starting from December 1st, people solve these challenges in order to earn stars ⭐️ and follow the story arch which is different from year to year. 

In previous years, the reason I participated in AoC was the leaderboard. I used to wake up at 6.00 am, with a high sense of urgency, in order to solve the daily challenges as fast as possible and improve my rank on the leaderboard. 

Competitive programming however is [different from normal programming](https://www.geeksforgeeks.org/competitive-programming-vs-software-development-where-should-i-invest-my-time/). considering I am not a competitive programmer, and my problem-solving skills are not as sharp. I would get frustrated with the challenges fast and give up by the third or fourth day.

Not everyone participating in AoC is interested in the leaderboard. As the [about page](https://adventofcode.com/2020/about) highlights, the Advent of Code challenges can be done for multiple reasons:

> People use them as a speed contest, interview prep, company training, university coursework, practice problems, or to challenge each other.

This year I approached the challenge as a learning opportunity, to sharpen my programming skills, and to improve my work setup. And most importantly, to have fun 🥳 

# Vim ![Vim logo](https://dev-to-uploads.s3.amazonaws.com/i/4ggosxvpk3l7cytma3vn.png)
I used this year's #AdventOfCode as an opportunity to finally learn and properly set up, Vim as my editor of choice.

Before AoC, the things I already knew about Vim:
✅ How to exit Vim ✌🏻 `:q!`, `:q`, `:wq`.
✅ Simple navigation using `h`, `j`, `k`, `l`
✅ Word navigation using w, b, W, B
✅ Changing between the three modes (NORMAL, INSERT, VISUAL)
✅ `d`, `r`, `x`, `c` in combination with word navigation 🤝
✅ Managing Vim plugins using `vim-plug` https://github.com/junegunn/vim-plug

### Setting up proper IDE setup

I have followed this blog post on [How to Set up Vim as an IDE for React and TypeScript](https://techinscribed.com/how-to-set-up-vim-as-an-ide-for-react-and-typescript-in-2020/). At first, I used the set of plugins that were recommended in the article, later, I will be adding/removing plugins as my system evolves.

The experience of working in Vim as an IDE after spending three years working with VsCode was painful at the beginning, especially considering I used to heavily rely on my mouse for code navigation, and the file explorer for file navigation. Here is the list of plugins that I got familiar with during AoC that made the transition bearable 😅

<u>**NERDTree**</u> https://github.com/preservim/nerdtree
A personal favorite of mine 😍 it has made folder navigation within Vim not only manageable but also pleasant 🙌🏻

- You can add it to your list of plugins inside your `~/.vimrc` (or `~/.config/nvim/init.vim` if you're a nVim user 👍🏻) and then run `:PlugInstall`

![EoqDw6aWMAQYBfu](https://dev-to-uploads.s3.amazonaws.com/i/sqa5yud86qg028qw04u5.png)

- To open it to the sidebar, you run the following vim command `:NERDTree`. You'll see the following interface

![EoqEJ_DXIAc-QJb](https://dev-to-uploads.s3.amazonaws.com/i/eegzs2gnexvr6czz6gjj.png)

- To switch between panes (currently open file and the `NERDTree` pane in this instance), you use `ctrl+w <direction>`

- The plugin has an awesome help menu which you can open by typing `?` when the plugin's pane is active.
![EoqEYGAXUAMD-zb](https://dev-to-uploads.s3.amazonaws.com/i/9jdzrro5x7mfkt77q4uy.png)
 
<u>**surround.vim**</u> https://github.com/tpope/vim-surround

Considering I plan to use Vim mostly for code purposes, This plugin is essential for my workflow. From the `README.md` of the repo: 

> Surround.vim is all about "surroundings": parentheses, brackets, quotes, XML tags, and more. The plugin provides mappings to easily delete, change, and add such surroundings in pairs.

- The plugin can be installed the same way as `NerdTree` and also has a nice helpful help interface 
 ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ekdboncfqt2mp5typh14.png)

- Some helpful commands for `surround.vim` 
    - Delete surrounding brackets `ds{`
    - Add surrounding quotes `ysw'`
    - Change surrounding quotes from `'` to `"` `cs'"`