Tools and methodologies for better coding

Optimization and organization can mean many things, but what does it mean to you? Doing things faster, better, or more efficient? Does it mean doing things more programmatically, simplistically, or using tools that are more suited to the job?

Well, in all likelihood it means a little bit of all of these. You probably are a person who works as a developer or designer, and are constantly trying to optimize your workflow — and well, these things could certainly be what you are looking for (at least, a bit).

But do keep in mind that however many tips and techniques you embrace, it actually means very little unless you actually do your work. So, with that in mind, I would like to offer some of my favorite workflows and methods for organization and optimization.

Most people assume that they only need to stay organized and efficient if they are working in a team, because after all if you are just one person why not use your own organizational method? Well, there isn’t anything wrong with that per se, but you do need to be using some standardized techniques to make the most of your time. For instance, version control systems.

Also things like language supersets and simplistic language syntax tools can be very helpful. Let’s dive into some of these in a more specific fashion, and be aware near the end of the article I will go over some code supersets and tools that focus on specific languages that I feel like most of us work with. The rest though, will be rather broadly scoped.

Tools

Tools are a great way to increase the speed at which you write and implement code. Sometimes they can be a distraction, but most often they can be very helpful. I will be talking about mainly about the ones that I have grown to love over the years, but there are many more out there that I won’t cover — so don’t feel that this is an exhaustive list but rather a list of possible ideas. Think of this, preferably, as a jumping off point

Text Editors

Text editors are a topic of much controversy. I mean, let’s face it, we spend most of our day inside them, and because of that we often have incredibly biased preferences. I am not outside of this circle of bias, either, so don’t expect a journalistic understanding of all text editors in the world here. But rather, a few of my favorites and why I like them.

As you read this though, keep in mind that I do use more than one text editor and for very specific purposes. I often will keep a few text editors closed with a clients files inside of them. What I mean by that is, in Sublime Text 2 I may be working on a rails project and have like 14 tabs pulled up in there that, whenever I start Sublime, it opens them all up. And then, to not interrupt that, I actually keep a client’s site I may be doing an HTML or CSS design for in TextMate. And with writing I usually keep that in either a separate TextMate directory in Dropbox, or in Scrivener. So I keep everything separate that way. So, naturally, I will be talking about Sublime Text 2 (available for Windows and Mac) and TextMate (available for Mac only).

TextMate

TextMate is one of the best editors out there, for Mac. It has a simplistic design, a beautiful interface, and a powerful feature set. But one of the true identifiers of the quality of the product is the community behind it. It is rampant. They are creating bundles, scripts, and pretty much anything you could imagine.

Though, do keep in mind that MacroMates (the creators) have been really missing in its development. Now, that may be a bit of an exaggeration but it had been years upon years before they created the second version which addressed a lot of people’s concerns and issues. With that being said though, it still remains a beautiful editor and a place I love to go to write Markdown or code of almost any type. I use it for anything I can, when I am not using Sublime Text 2. It also has a beautiful font, and a lot of people have written books, articles, entire web apps all using this beautiful editor — and for good reason. Why don’t you go check out why, and see for yourself.

Sublime Text 2

Sublime Text 2 is a great text editor, but I am not sure what sort of shorthand to refer to it by — so I will just say Sublime. Sublime, as it were, is a great editor. I’ve never used it before version 2, but I will say that it is just lovely. I am not all that sure of the differences — other than the font and default background color — between it and TextMate. I will say though, that I love the font that it uses (I know, seemingly unimportant — but important to me), and I also love the way it does the tabbed browsing execution.

Instead of talking about features, I will instead talk about a few other things. One thing about it that is a bit of a pain, before jumping into the other things, is that you can’t call it from the command line as easily as TextMate. With TextMate, you just type “mate .” and it opens that directory in its little project drawer, it just works perfectly. Though, still find Sublime useful without that feature. I just feel that working in Sublime is a delight. I am not sure why, perhaps that it is working on a dark background is nice, but I just really enjoy working in Sublime. I use it when I need to get a massive amount of work done. That is, a massive rails project — or the like. I think you will find it useful as well, so check it out.

Code organization and methodologies

Organization is a topic around which there is much debate. A lot of people really don’t prefer complicated systems to help them stay organized, but in reality a bit of complication in the short term may help you stay organized in the long term. I know that sounds non-intuitive, but it is very accurate. Especially when it comes to version control systems. Take it from me, someone who relied on FTP, and I still do sometimes, and I’ve never been happier using a version control system.

Using source control is a great way to stay organized. Making sure that you keep backups of your development process is really important, and leaving it up to various folder hierarchies is not really gonna’ cut it in the long run. I mean, it may seem fine when your computer is running but if you have a crash or hard-drive failure you are petty much completed lost.

What can you do to solve this though? Well, you could use a version control system that takes a snapshot of your development directory over the course of the times you are working. Using this is a really great way to have a constant new version and a constant access to backups should there be bugs or some sort of loss. It’s also just good to have period. I mean, think of how many times you were like “I wonder how I did that, or implemented that feature.” Well, now you literally know.

And speaking of version control systems, git is a great way to do this. You don’t even really need any knowledge of systems like Mercurial or Subversion in order to get in touch with the VC system that is Git. In fact, I had no experience with these systems at all, and got up and running with Git pretty fast actually.

You can follow the commands directly from GitHub when you open a Repository, and then just input those into your terminal, and you then literally know almost all you need. Afterwards all you have to do is do the commit command, anytime you want to make a change. Though, do keep in mind if you already have dev files in the folder you can use “git add .”, instead of the example “touch README” to add all of your files in. Very similar concept to opening a TextMate or window in the terminal, where the period denotes such an action.

Now, before I finish up on this section I would like to say that I have never used Mercurial or Subversion but indeed they are possible options and are quite popular among certain crowds. There are even websites that allow you to host your files from such systems like SourceForge, much like GitHub does.

Before I finish also I want to mention one last thing. A Git GUI that will help your process quite a bit. And that is, GitBox. It is a really great program, and basically all you need to do to use it is set up a Repository in the same way you would any other time (from the command line). Then you just open GitBox and add in the directory in question from your computer, and you are literally all set.

Anytime you make a change it will be automatically noticed and displayed in GitBox, and then you can go about leaving a comment to your commit and then Push it. Do keep in mind though, that the method goes: “change -> comments (if needed/any) -> commit -> push”.

Make sure you push only after making your commit, otherwise nothing will happen. And if you are working with a team, make sure you do a pull before doing comments, commits, or anything, to make sure you stay away from any errors you may be having.

Supersets, and code tools

A superset, is often defined by a code syntax or extrapolation that sits on top of the language below it. Examples of this could be CoffeeScript sitting on top of JavaScript – or Node.js sitting on top of Node (although, that could be considered a Library as well). It could also be described as something like SASS or LESS sitting on top of CSS that actually adds functionality and new methods for handling things.

SASS, also, adds a new available syntax to use similar to how CoffeeScript offers to JavaScript. A good example of a Library would be jQuery on JavaScript, of course. It is something we all probably know and love by now, but it is a good reminder that we are using a Library and/or Superset.

Now, I won’t talk about every Library in the world – because simply I haven’t used them all. Nor do I want this article to focus on specific libraries. By way of that, I have chosen to speak about supersets instead, and code tools for certain languages that most of us use. For instance HTML, CSS, and Ruby on Rails specifically.

Instead of jumping right in, let’s take a look at some examples to help understand why you’d use these tools and/or supersets. For instance, let’s say you are working in CSS and HTML in Rail (with your developer perhaps, or while being the developer) and you feel like you are wasting time writing so much ERB (which is the way you add Ruby code into rails you will be writing in rails – more on that here).

Well, a great thing to do would be to use HAML to speed up writing your HTML, and also to speed up implementing your Ruby code into it. HAML is a superset, of sorts, of HTML that allows you to write HTML code without having to worry about closing your tags and it also allows you to use white-space to your advantage — much like Python. Let’s take a look at an example.

#wrapper
%ul
%li This created an unordered list, that is properly semantic.

And that creates:

<div id="wrapper">
<li>Test Li</li>
</div>

You can can certainly see how that would save you a lot of time. It is also really fun, and clean to write. It is a joy, in all honesty.

Now what about that CSS? You could save a lot of time writing that as well! SASS offers a very similar functionality, but without having to learn a new form of Syntax. So with one subset of SASS (one subset of a superset) you can actually use white-space to your advantage. So let’s take a look at what that’s like.

.wrapper {
font-size: 12em;
}

Well, in SASS this would look like:

.wrapper
font-size: 12em

As you can see, in SASS we don’t need the { } or the closing semi-colons. We also are using the white space to denote that font-size is a child element of the “wrapper” class.

withLet’s say you You also assume that only people doing backend dev use versioning control systems, but in fact, we all should know by now that isn’t the case. You can use git and Github to keep a track of each time you do a code commit, and with tools like Gitbox it has never been easier.

Now, of course, not all of you are going to be using Ruby on Rails when writing code – but I imagine a good bit of you work with people using it. Anyway, regardless let’s cover some solutions for a solo person who doesn’t work or use Rails in any way. For CSS LESS is a great solution to that. Zen Coding is also a solution for anyone who isn’t working on Rails, but just wants to speed up the rate at which they type standard HTML tags. It is really very useful for anyone. Zen coding is really easy to start working with. o use things like Zen Coding to ease your HTML tags. For instance typing:

ul > li*6

you get:

<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

You can also still use LESS to get the mixins and variables and such. That is pretty easy to work with.

You also may want to grab a nice tool for working in the terminal called Go2Shell. It is available on the mac app store for free. You can just use that when you need to open the terminal in specific directory which is pretty common. So to use it you want to just navigate to that directory in your finder and simply click the program go2shell and boom your terminal opens to that file. It is amazing. And that will about wrap it up for now, stay tuned till after the summery though for a brief list of places to visit from the article.

Those are some of the most useful supersets and tools that I know of to get some of the best outcomes. I would also though like to mention that this wasn’t an exhaustive or complete list by any means, so please go about finding out more about it. And, as promised, here are some of the links to what we touched on in the article. GitBox, GitHub, Compass, SASS, HAML, LESS, Ruby on Rails. Happy hunting!

Dain Miller

Dain Miller is a former Presidential Innovation Fellow at The White House, and mentor for developers at starthere.fm. He now works to lead engineering teams at a distributed media company. You can find him on Twitter @dainmiller or at his website