(http://www.sitepoint.

com)

MENU

Web (http://www.sitepoint.com/web/)

6 Tips for Writing Better Code

(http://www.sitepoint.com/author/tevko/)
Tim Evko (http://www.sitepoint.com/author/tevko/)

Published June 30, 2014

Tweet (Https://Twitter.Com/Share?Text=6+Tips+For+Writing+Better+Code&Via=Sitepointdotcom)

Subscribe (Https://Confirmsubscription.Com/H/Y/D46DD8C9BD8A0B5D)

In any given week I can expect to write at least a few hundred lines of code in around four different
languages. I can also expect to edit, review, and collaborate on code written by the other developers I
work with.
Simply put, theres a lot of code flying around all over the place, and things can get very complicated
when its not organized, managed, and most importantly, written well. Lets look at a few different ways
to improve the overall quality of our code.

1. Start Building Modules

One of the best ways to keep code consistent, reusable, and organized, is to group functionality
together. For example, rather than dumping all your JavaScript into one main.js file, consider grouping
it into separate files based on functionality, then concatenating them once you reach your build step. Of

course, theres a lot more to writing modular code, and you can write modular code for more than just
JavaScript.
CSS preprocessors like Sass (http://sass-lang.com/) (our introduction here
(http://www.sitepoint.com/getting-started-with-sass/)) allow you to write individual CSS files, and then
include them into one main file when you compile them. This lets you write individual CSS files for
different components like buttons, lists, and fonts. At the end, theyre all included into one main file, but
maintaining these files becomes a whole lot easier.
New technologies, such as Polymer (http://www.polymer-project.org/) allow you to write custom HTML
elements, so that your HTML, CSS, and javascript can be grouped into individual components based
on functionality. Be sure too look into Browserify (http://browserify.org/) (our introduction here
(http://www.sitepoint.com/getting-started-browserify/)), which allows you to use Node.js-style modules in
the browser.
Brad Frost also gives a great overview on the ideas and methodologies for writing modular code here
(http://bradfrostweb.com/blog/post/atomic-web-design/).

2. Speaking of Preprocessors
Preprocessors dont just help with writing modular code. Theyre great for a lot of other things too!
Preprocessors add extra functionality to your code internally, while outputting the same HTML, CSS,
and Javascript that your browser recognizes. They usually require some extra setup time, but they
make up for it once youre comfortable with using them.
Using a preprocessor can help you save time by eliminating the need to write the same repetitive code
multiple times. They also add helpful functionality like variables, functions, loops, and simplified syntax.
Most preprocessors are highly customizable as well. Several include the option to select your prefered
output style, incorporate plugins and addons, and even create custom notifications when needed. The
most popular preprocessors have large communities, are well maintained, and answers to common
problems are not hard to find.
Heres a video introduction to the most common preprocessors for CSS, HTML and JavaScript: Sass,
Haml and CoffeeScript (http://www.sitepoint.com/introduction-sass-preprocessors/).

If youre interested in Sass, heres a look at how SitePoint author Hugo Giraudel organizes his Sass
projects (http://www.sitepoint.com/architecture-sass-project/), and his favorite tools for doing so
(http://www.sitepoint.com/my-favorite-sass-tools/).
While youre looking at Sass, be sure to check out HAML (http://www.sitepoint.com/an-introduction-tohaml/) and Coffescript (http://www.sitepoint.com/what-is-coffeescript-all-about/) as well.
You dont have to use a preprocessor for every language you write, but many of them are helpful and
can lead to you writing better code.

3. Plan Before You Write

When was the last time you sat down and on paper wrote out exactly how you would approach a
project? What frameworks do you plan to use, how many browsers are you expected to support, do you
plan to use any automated task runners or build systems? Its easy to jump into a project thinking you
know exactly how it should be structured, only to realize halfway through that you need to go back and
rewrite some code.
North (https://github.com/north/north) is an outstanding set of guidelines that outline how to plan a web
project from start to finish. Its a long and comprehensive living document, not all of which has to do with
writing code, but its length and detail goes on to show just how many factors must be considered when
building a website.
Deciding on the right tools and libraries to use can be a challenging task, especially when new tools
and libraries are created every day. I curate this list of tools and resources
(https://github.com/tevko/Resources) to help keep track of the best and most useful, so feel free to use
it when planning your next project.

4. Use Version Control

Version control is a system that records changes to a file or set of files over time, allowing multiple
users to edit, track changes, and host assets. There are plenty of services that enable version control,
including Bitbucket, Assembla, and Github. Github is my personal favorite, as it promotes social
coding, meaning people can share code on Github while improving and learning about code written by
other users.

Version control can be a complicated topic to understand, but there are plenty of tutorials to help get
you started. I recommend taking a look at our introduction to Git (http://www.sitepoint.com/git-forbeginners/) for a basic overview on getting started. We also have a guide to using Git in a team
environment (http://www.sitepoint.com/getting-started-git-team-environment/) and some tips to take
your Git skills to the next level (http://www.sitepoint.com/10-tips-git-next-level/). If youre not sold on Git,
you have other options for version control as well (http://www.sitepoint.com/version-control-software2014-what-options/).
One last tip: use the command line. The command line can be an intimidating interface, but getting
familiar with it will go on to improve your understanding of programming as a whole, while enabling you
to use other great tools like Gulp and Grunt.

5. Start Holding Code Reviews

This is easier to do if you work with a team of developers, but not impossible if you work on your own.
The basic idea of a code review is to present some code youve written to a group of peers (or
superiors) so that you can explain what youve written, learn how to write better, and even teach others
who may be unfamiliar with the technologies youve written.
Its best done weekly, with the goal of learning how to improve what youve already written. Heres an
article on the benefits of code reviews (http://www.sitepoint.com/the-importance-of-code-review/) that
explains how to get the most out of it.
If you dont work on a team, or youre very anti-social, jslint (http://www.jslint.com/) and SCSSlint
(https://github.com/causes/scss-lint) can be helpful. These tools will check your code for errors while
keeping your files neat and clean. No human contact necessary!

6. Take Coding Challenges

There are plenty of free resources online that are aimed towards providing challenges for developers
looking to get better at languages they use every day. Most of these sites come with a large community
willing to help out when needed, so dont worry about getting stuck and being unable to continue.

CodeWars (http://www.codewars.com/) is great for brushing up on your javascript abilities, and The
Practice App (http://tevko.github.io/practice/) will give you random front end challenges to build on
Codepen (http://codepen.io/).

Conclusion
Following some or all of these tips will drastically improve your coding skills, and therefore the quality of
the sites, tools or apps youre building.
Have some more tips and tools for writing better code? Feel free to share in the comments!

(http://www.sitepoint.com/author/tevko/)

Tim Evko (http://www.sitepoint.com/author/tevko/)

Tim Evko is a front end web developer from New York, with a passion for responsive web development,
Sass, and JavaScript. He lives on coffee, CodePen demos and flannel shirts.

(https://twitter.com/tevko) (https://github.com/tevko)
(https://plus.google.com/108904416211598514133/posts)
You might also like:
Write a 3D Soft Engine from Scratch: Part 2
(http://www.sitepoint.com/write-3d-soft-engine-scratch-part-2/)

Course: CSS Troubleshooting in Six Easy Steps

(https://learnable.com/courses/css-troubleshooting-in-six-easysteps-2869?utm_source=sitepoint&utm_medium=relateditems&utm_content=css-troubleshooting)

How to Write Better JavaScript (http://www.sitepoint.com/howto-write-better-javascript/)

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful
new features.
email address

Claim Book

3 Comments

SitePoint

Sort by Best

Login
Share

Favorite

Join the discussion

Purnil Soni

4 days ago

This is a very good list of points, that must be understood and followed by any web developer.
I absolutely agree on each and every point you have covered here.
Especially the "Plan Before You Write" and "Start Holding Code Reviews" points which I have seen
many of them know and also agree upon but don't practice them during real projects.
Also your links to related resources for further exploration is a great add-on benefit.
Thanks Tim, and looking forward to such helpful articles in future as well.
3

Reply Share

James Hibbard

3 days ago

To expand on point 6: helping people in forums (such as SitePoint's) is a great and rewarding way to
practise newly-learned coding skills.
1

Reply Share

HenriHelvetica

26 minutes ago

Man, I need this printed and pinned to my lap as a sticky or something. All of it is total verity. The set
up is essentially the key. Getting all the little bits done, then just enjoying the ride as you enjoy the
fruits of the early labor. I've come to realize that my workflow is all work and no flow right now. Need
to adjust that.
Essentially need to create a massive, searchable master doc with all the info i need - a quasi private
/ internal blog. Great post.
Reply Share

Subscribe

Add Disqus to your site

About
About us (/about-us/)
Advertise (/advertising)
Legals (/legals)
Feedback (mailto:feedback@sitepoint.com)
Write for Us (/write-for-us)

Our Sites

Learnable (https://learnable.com)
Reference (http://reference.sitepoint.com)
Hosting Reviews (/hosting-reviews/)
Web Foundations (/web-foundations/)

Connect

(/feed) (/newsletter) (https://www.facebook.com/sitepoint)

(http://twitter.com/sitepointdotcom) (https://plus.google.com/+sitepoint)
2000 2014 SitePoint Pty. Ltd.