Beginners, Use These Tricks to Accelerate Your Coding

Small changes to pay Big dividends in your productivity

Published in

The Startup

4 min readSep 8, 2020

When you just start out your programming journey, there are so many shiny tools and technologies to explore, you almost don’t know where to start. Fortunately, there are numerous guides on how to get into different fields such as web development, computer systems, data science, and much more. This article is not one of these guides.

In my spare time, I tutor beginner programmers. When I’m working with them, I notice that even though their programming knowledge is solid, they still suffer from a low-efficiency workflow. I introduced the following tips to my students, and each one immediately benefited from knowing and using them. Often times there was even a reactive “Whoa!” upon learning these tips.

Regardless of your background, if you write code often, I urge you to please give these tips a try if you haven’t already. For the beginners I tutor, these were game-changers.

Duplicate Line

We’ve all done this before: triple-click, copy, right arrow, enter, paste.

Not only that, but we have probably done this a thousand times over. The seconds spent executing this string of operations adds up, not to mention the fact that you have to move your hand away from your keyboard and to your mouse.

You can shave off those precious seconds by using the Duplicate Line shortcut for your code editor. The added bonus: you don’t need to leave your keyboard.

Here are the shortcuts for some commonly used code editors:

VSCode: Shift+Option+Down/Up (Mac), Shift+Alt+Down/Up (Windows/Linux)
Atom: Shift+Command+D (Mac), Shift+Ctrl+D (Windows/Linux)
Sublime: Command+Shift+D (Mac), Ctrl+Shift+D (Windows/Linux)
Vim: Y to yank line + p to paste after the current line.

Code Snippets

Wouldn’t it be great if your computer just wrote your code for you? Well, using code snippets is the next best thing. Think of some common code patterns, expressions, or boilerplate that you write on a daily basis. A good snippet set will take care of all that extra typing, letting you skip straight to the meat of the task.

You can find snippets for pretty much any commonly used language or framework. Conduct a search in your editor’s package marketplace and you will probably find something. For instance, to find React JS snippets for VSCode, I would go to the Visual Studio Marketplace and search “React snippets.” The first result is below.

For React/Redux/GraphQL/React Native: https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets

My most used snippet is rafce, which (I think) stands for “React Arrow Function Component, Exported.” If I create a file called MyComponent.jsx and run rafce, it generates the following boilerplate for me:

import React from 'react'const MyComponent = () => {
    return (
        <div>
            
        </div>
    )
}export default MyComponent

This will save you a lot of time, especially when you don’t know the boilerplate by heart.

The next level for web developers would be to learn how to use Emmet. There are many easy-to-follow guides regarding this toolkit.

Bracket Pair Colorizer

Perhaps the toughest thing to do as a beginner is learning to debug. I know that when I started learning to program, there were few things in life that gave me larger headaches than debugging my C programs.

Bracket Colorizer won’t debug for you, but it will save you some headaches. This is simply a tool that, as the name suggests, color coordinates matching pairs of brackets for you.

Now, if you forget to close that if statement or accidentally add too many brackets for your expression, you will see it clear as day. Unfortunately for web developers, this doesn’t yet work for chevrons (these: < >), but our fingers are crossed!

Here are some options for popular code editors:

Bonus: Bracket Highlighters serve a similar purpose, but instead highlight the matching bracket pair your cursor is on. Here are some more links:

VSCode supports this by default.
Atom: https://atom.io/packages/bracket-matcher
Sublime Text: https://packagecontrol.io/packages/BracketHighlighter

Better Comments

Beginners will quickly find out that comments are invaluable. I can think of some project deadlines I would not have met had it not been for my comments. Comments can be used to structure your thoughts before you code. However, comments can be a double-edged sword, as we will discuss later.

Commenting diligently makes you a time traveler within your code. When you leave that expressive comment, you can forget the project for some time and when you come back and read the comment, it's almost like you never left. The more accurately you can capture your train of thought, the smoother your experience of resuming work will be.

Here are some extensions to give more life to your comments:

Unfortunately, misused comments can be disastrous. Imagine you write a comment describing a certain function, but then you must modify the function’s requirements. It is dangerously easy to forget to change your comment along with the function itself. What you are left with is a confusing comment trying to describe a completely different function. As such, many people will argue that writing clear, self-explanatory code is better than leaving comments.

For those who choose to comment, the packages above will provide a more expressive commenting experience.

The duplicate line function, code snippets, Bracket Colorizer, and Better Comments are all tools that I personally use and benefit from. Its little things like these that help make coding an enjoyable, or at least tolerable, endeavor. Hopefully, you picked up a new trick to make your life easier! Happy hacking!