This is my first post written for my new blog! How exciting!

At the start of 2020, I was done with national service and waiting for university to start in August. I did not want to waste the eight-month period doing nothing, so I applied for advanced credit modules(Programming intro course) at NUS and also did a lot of learning on my own.

I had already taken one or two python introductory courses on Coursera back in 2017 - 2018, during school term breaks. However, I did not really pick things up because I wasn't doing any projects, and learning to code without practicing was a disaster in the making. I could understand the concepts taught in the video lectures but I simply forget most of the syntax over time. At the start of 2020, I began watching Youtube videos in the tech space that was mainly filled with Youtubers like "Joma", "TechLead" etc. While Youtube videos may not be that educational or even of any practical value, the "developer" Youtubers often talked about similar topics such as "how to get better at coding" or "how to get a tech internship". From those videos and my past experiences, I knew I had to commit to doing side projects and practice coding more frequently. Funny enough, I picked web development as an area to focus on (and later found internships doing that stuff) because of a Youtube video.

So the reason why I picked web development was due to a video made by the now controversial Youtuber "TechLead" (who has 913K subscribers by the way, interesting...). Basically, it was a video in which he talked about how web development is a good way to prototype and have a visual appreciation of your work immediately. It's easy to show your work to others and you get a sense of achievement fairly quickly. Points were made and I agreed to most of them. What I also learned from this was that learning can take place anywhere, even while mindlessly surfing the web or succuming to the Youtube algorithm.

So earlier this year, I worked on getting better at web development in general. And I also had two goals in mind:

I had to learn enough to apply for an internship. And I would like to be knowledgeable enough to write articles related to tech. The goal of getting an internship before I embarked on my computer science undergraduate journey was challenging. I spent most of my time learning from tutorials and doing Leetcode questions. I created my very first resume and started to build projects to fill the void. I applied to a few companies where they seemed not to expect too much in their job posts. For a month or two, I was out of luck. The few that replied did not proceed further with me. Fortunately enough I managed to obtain an internship working for a startup and it was honestly a good ride. So long story short, I accomplished goal No.1 before the half-year mark.

It was goal No.2 that I wanted to talk about in this post. Besides the Imposter syndrome, writing a blog seemed to be really difficult to begin with and hard to follow through. I procrastinated and finally in September, I started writing on the platform "Dev.to". And I continued to do so with the aim to publish one article per week, till the end of this year. Happy to say that I generated over 30 posts and that amounted to over 16 weeks of writing streak.

I am satisfied with the amount of time I put into this and the learning in that process. Writing and also editing the pieces were very time-consuming. I had to spend many hours before I could publish an article. I would need to generate code examples and explain things in (hopefully) a clear and concise manner. I learned a lot from the research and the poking around in the writing process.

So I did manage to do the tasks set for 2020. I am grateful for the opportunities and also the new people that I met in 2020. I will continue to write and also explore interesting job opportunities next year. The good thing is that things that are harder to begin with tend to be slightly "easier" to continue.

Coming to the end of 2020, I should write down my school/work-related goals for 2021.

• Secure one summer internship (or NUS'CVWO)
• Continue to write CS & web dev related stuff (at least on a Bi-weekly basis)
• Be great at one module each semester (aim to TA for it)
• Put in efforts to develop one of my ideas to fruition
• Do one open-source project
• Be wholesome and happy while doing the above:)

The end.

The initial struggle with Vim is very real, speaking from the perspective of a VScode user. However, after using Vim for a few months, I definitely feel much better and more comfortable with Vim.

Especially for shorter Java programs, one will come to appreciate the simplicity and power of Vim in no time. I won't be making Vim my main code editor in the near future, but I definitely do not hate it anymore.

In this article, I hope to note down the absolutely necessary commands needed to use Vim as a programming "IDE". Nothing fancy 😂

P.S There are far comprehensive/detailed tutorials out there, such as vimtutor(if you have Vim installed, simply type vimtutor in the command line, it will bring you through some basic lessons). What I hope to achieve here is to share my most helpful commands. I won't be explaining much for this is more of a reference that sieves out the essential commands than to introduce them formally.

---

Super Basic Understanding Of Vim​

When we start with something like vim Sample.java and open up the standard Vim editing window, we are going to be in the Command mode where the keys we type/press are supposed to be commands that Vim can understand. This is like a control center where we speak jargon that Vim is listening out for.

The other very important mode that we need to know about is the Insert Mode. This is where we type the text that is meant to be in the body of our program. This is the mode that we are in when we open up a typical text editor such as Notepad or Microsoft Word.

When you are done with your changes in insert mode, you have to return to command mode before you can issue a quit command.

I prefer using Ctrl + c to return to command mode from insert mode because the Esc key can be quite far from the normal typing position and Ctrl + c is within reach.

---

Basics

Key	For
vim filename	Create/open a file with given filename
i	Enter insert mode
Esc /Ctrl + c	Quit insert mode and return to command mode
:wq	Save and quit Vim
:q!	Discard changes and quit Vim

Code Related

Key	For
gg=G	Fix code indentation
ctrl + n	Auto word completion
:!javac *.java	Compile code without quitting Vim

Navigation

Key	For
hjkl	the equivalent arrow keys
gg	Go to top of screen
shift + g	Go to the bottom of screen
0	Go to start of line
$	Go to end of line
Ctrl + f	Page down
Ctrl + b	Page up

Edit

Key	For
r	replace a single character
o	add newline above and enter insert mode
O	add newline below and enter insert mode
yy	Copy line
p	Paste
dd	Delete/cut line
dw	Delete/cut word
d$	Delete/cut from cursor to end of line
x	Delete/cut a character

For copying a block of code:

• press shift + v to start selecting visually by navigating up or down. The block of code will be selected, then press y to copy. Afterward, simply press p to paste.

Common Tasks

Key	For
u	Undo
Ctrl + r	Redo
:s/foo/bar/g	Find and replace "foo" with "bar" for all "foo"

Multiple tabs To open a new file in another tab:

• use :tabe filename
• e.g. :tabe test.java

To navigate between tabs:

• use gt to go to next tab
• use 1gt, 2gt, 3gt to go to different tab by number
• e.g. 1gt goes to the first tab from the left

To get out of Vim for a while:

• use ctrl + z to suspend activity
• use fg (foreground) to come back to Vim

Common UNIX commands

Key	For
ls	list files in current folder
cd <directory>	enter this folder
cd ..	go out of current folder
rm <file>	delete this file
mkdir <directory>	make new folder
mv <file1> <file2>	Rename file1 as file2
cp <file1> <file2>	copy file1 to file2
tab	for auto completion of possible commands

---

The End​

I will be updating this article to add/reflect my latest list of frequently used commands. Bye now!

*5/12/2020 P.S. I have updated pretty much whatever I found useful, will continue to update this list in the future as this list also serves as my own notes.

Motivation​

Although I did go through a lot of tutorials and courses on the fundamentals of HTML, CSS & JavaScript when I started learning web development last year, my familiarity with the front end essentials is not at the level that I wish to be. I would like to think that with practice it will only get better. And what better to do than building projects that I think is cool.

I have always wanted to build a pathfinding visualizer that animates algorithms (I made a sorting visualizer some time ago). Recently, I have just started my Data structure & Algorithm class as a computer science student. So today, after watching this YouTube video on Dijkstra's algorithm, I decided to wait no longer and just start building a simple version of the pathfinding visualization.

Process​

In the process I was able to revisit the following concepts:

1. CSS & HTML

• CSS flexbox (for centering stuff)
• CSS grid (to create the 10x10 grid)

2. JavaScript

• querySelector & querySelectorAll (for selecting DOM elements)
• setTimeout (to create animation effect)
• createElement, getAttribute, setAttribute, appendChild (for modifying the DOM)

3. Algo

• I wrote the code based on the video explanation of Dijkstra's algorithm, I am not 100% sure it is doing the right thing.

End Product​

After some polishing to make it look better (in fact it took me quite some time 😂 to add in relevant CSS for this to be mobile friendly), you can see it in action on Codepen. Feel free to check out the codebase in my Github Repo.

Further Improvements​

There are many things to be done for this. Just to name a few:

• Allow users to pick start/end points.
• Better visuals to convey the weight/difficulty between two nodes.
• Add in more algorithms (DFS, BFS, etc). I might do a part two for this when I am done with some of the above.

If you like reading this, please give it a like so that more people can see it.😄