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, there’s a lot of code flying around all over the place, and things can get very complicated when it’s not organized, managed, and most importantly, written well. Let’s 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, there’s a lot more to writing modular code, and you can write modular code for more than just JavaScript.
CSS preprocessors like Sass (our introduction here) 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, they’re all included into one main file, but maintaining these files becomes a whole lot easier.
New technologies, such as Polymer 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 (our introduction here), 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.
2. Speaking of Preprocessors…
Preprocessors don’t just help with writing modular code. They’re 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 you’re 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.
Here’s a video introduction to the most common preprocessors for CSS, HTML and JavaScript: Sass, Haml and CoffeeScript.
If you’re interested in Sass, here’s a look at how SitePoint author Hugo Giraudel organizes his Sass projects, and his favorite tools for doing so.
While you’re looking at Sass, be sure to check out HAML and Coffescript as well.
You don’t 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? It’s 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 is an outstanding set of guidelines that outline how to plan a web project from start to finish. It’s 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 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 for a basic overview on getting started. We also have a guide to using Git in a team environment and some tips to take your Git skills to the next level. If you’re not sold on Git, you have other options for version control as well.
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 you’ve written to a group of peers (or superiors) so that you can explain what you’ve written, learn how to write better, and even teach others who may be unfamiliar with the technologies you’ve written.
It’s best done weekly, with the goal of learning how to improve what you’ve already written. Here’s an article on the benefits of code reviews that explains how to get the most out of it.
If you don’t work on a team, or you’re very anti-social, jslint and SCSSlint 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 don’t worry about getting stuck and being unable to continue.
CodeWars is great for brushing up on your javascript abilities, and The Practice App will give you random front end challenges to build on Codepen.
Conclusion
Following some or all of these tips will drastically improve your coding skills, and therefore the quality of the sites, tools or apps you’re building.
Have some more tips and tools for writing better code? Feel free to share in the comments!
Tim EvkoTim 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.
