The Little Things
Improving Your Coding Experience by Customizing Your Environment
Coding is all about breaking big problems down into little ones, and solving them one by one, but what about all the little things you could do before you even write your first line of code? Whether you are new to coding, or just looking for things you can do to improve the way you practice your craft, the tips in this article are designed to improve your efficiency and make you happier.
Assumptions
Ok, let’s start by making some assumptions. I’m going to assume you’re working on a Mac. If you’re using a PC, some of these tips may still be useful, but just know, that isn’t the focus of this article. I’m also going to assume that your text editor of choice is Atom. Why? Because that’s what I use. If you prefer a different editor, continue reading. Most of this article will still apply. If you would like to install Atom, you can get it for free here.
Screen Layout
When I write code, I like to be able to see all of my tools at once, and I do this by dividing my screen into three sections, each dedicated to one of the three tools I use most. In the bottom right, I make a short, wide window for my terminal. Above that, the rest of the right side of my screen is for my text editor. Then the left side is for my browser, where I can view resource material, sample my work, or perform my Google searches. All of that looks a little something like this:
If you find yourself needing more space for something just give it a |⌃+⌘+f| to go full screen. When you’re done, |⌃+⌘+f| again to put the window back where it was.
Advanced
Realistically, you’ll often need to use more than just these three tools. If you’d like to be able preset these positions so you can drag and snap windows into them, there are tools that can do that. I use BetterTouchTool because it can do this as well as some other cool things, which I’ll talk more about later.
Colors
As a coder, you’ll spend a lot of time looking at a screen. Be kind to your eyes; make their already difficult job just a little bit easier. One way to do that is to choose colors that strain your eyes as little as possible. Personal preference is a factor here, but I like a dark background to reduce the overall amount of light coming at me, and light text for a good contrast.
In your terminal you can change your color scheme by going to Terminal > Preferences… > Profiles. As for Atom, I’m actually a fan of the default theme, but you can change it by going to Atom > Preferences… > Themes.
Fonts
Another solid way to help out your eyes is to use a font that is tolerable to look at for hours at a time. You can choose from one of the many fonts already available on your computer. If you do, I strongly suggest choosing a sans serif one as they are much easier to view on a screen. If you’re like me, however, the default options aren’t good enough for you, and you’ll want to find a better one. My personal favorite is Inconsolata.
Remember, size matters. If your font is too small, it will strain your eyes unnecessarily — too big, and it will take up too much screen. With Inconsolata, I like 18pt, but play around with it and find what works best for you with your font of choice.
In Terminal you can set your font by going to Terminal > Preferences… > Profiles. In Atom go to Atom > Preferences… > Editor.
BASH Profile Shortcuts
In your home directory, there is a file called .bash_profile. This file is run every time you open Terminal, so you can put commands in here to do a number of cool things, but for this article I’m going to show you how to make a shortcut command using alias.
Let’s say you have a directory that you work in often. Rather than typing cd ~/path/to/my/directory every time you open your terminal, you can just edit your .bash_profile file and add the line alias mydir="cd ~/path/to/my/directory". Now, every time you type mydir in terminal it will put you in that directory.
Note: When you make changes to your BASH profile you will need to close and reopen Terminal for the changes to take effect.
Atom Packages and Settings
One of the things I love about Atom is that it’s quite customizable. There are several settings you can change by going to Atom > Preferences… > Editor, but your choices don’t end there. You can customize further by adding, or editing packages. In Atom, packages are little plug-ins that make it easier to do the things you have to do when writing and editing code. Many come already installed, but there are others you can install to add functionality. Most packages come with settings that allow you to customize the way it works. If you find yourself wishing Atom could do a thing, Google it! You might just find a package that will get you there. You can also search for packages, installed or not, from within Atom by going to Atom > Preferences… > Packages.
Here’s a list of packages and settings that I find useful:
Atom Settings (Atom > Preferences… > Editor)
- Show Indent Guide: Enable to show indentation indicators in the editor.
autocomplete-plus
- Keymap For Confirming A Suggestion: I set this to tab only because I can’t stand it when I try to press enter to go to the next line and instead it gives me an autocompletion I didn’t want.
- Use Core Movement Commands: I hate it when pressing up or down key cycles through autocomplete options instead of moving my cursor to a different line. Disabling this setting solves that problem.
autosave
- Enabled: Enabling this causes a file to automatically save as soon as you click somewhere else. This is a huge time saver when making changes and testing them in terminal.
language-html
- Soft Wrap: Enabling this causes text to wrap in html files. You can do the same for any language by going to the language-(insert language here) package. You can also set this for all file types by going to editor options, but I prefer to set it on a per-language basis.
todo-show
This package allows you to find all TODOs, FIXMEs, etc. in your project with a keystroke. That is, if you add a comment to yourself like # TODO: add another loop here todo-show will show you the note, and allow you to go to its location in your code by clicking it.
ruby-block-converter
If you code in ruby, this package allows you to convert between do-end style blocks and {} style blocks with a keystroke.
Bonus: BetterTouchTool
As promised, I’m going to finish up by talking briefly about some of the other things BetterTouchTool can do. It’s great for setting up keyboard shortcuts and magic mouse/trackpad gestures to do things quickly. For example, I’ve set a keyboard shortcut to do a Google search on whatever text I have highlighted by pressing |⌃+⌘+g|, and I’ve created trackpad shortcuts to copy with a three-finger click, and paste with a four-finger click. If you have a touch bar on your Macbook, you can also use BetterTouchTool set up custom touch bar menus. It’s great stuff. Try it out.
The Moral of the Story
“It has long been an axiom of mine that the little things are infinitely the most important. “
Arthur Conan Doyle
That’s right, this coding-themed blog article comes with a moral message, and it is this: If you want to do a big thing well, make sure you are doing well the little things that lead to it.
Thanks for reading. I encourage you to respond with any tricks you’ve used to improve your coding experience. Happy coding, and don’t forget the little things!
