5 Good Habits That Will Make You a Better Coder

Jul 8 2010 by Matt Ward | 38 Comments

5 Good Habits That Will Make You a Better Coder

We all want to grow in the things we do, and in the field of web development, one of the main areas that we spend a lot of time on is our code. This could include HTML, CSS, JavaScript, PHP, Python, ActionScript or any other language that you may choose to use for building websites.

In this article, I’ll share some practical steps that you can take to expand your skill set and become a better coder. I would like to propose five different habits that you can adapt in order to help yourself become more excellent at what you do.

1. Focus on One Type of Language at a Time

If you are designing and developing for the web, there are often numerous different languages that you will need to familiarize yourself with, and it can be tempting to try to learn them all at once, especially considering how interconnected they all are.

I suppose that, to some degree, this is inevitable. But if you really want to improve quickly, I recommend focusing on one particular area of expertise. Do you want to get better at using CSS? Put your focus on that. Try using a single HMTL document and creating various layouts using nothing but styles. The CSS Zen Garden is a great example of how incredibly different your web page can become for the same markup. You can also focus your efforts by finding a list of elements and working through them. For instance, if you are comfortable with CSS2, but want to improve your understanding of what is possible with CSS3, you could study CSS3 properties and start working through them one by one. You can read the current CSS3 specifications. You can experiment with each module to see what it can (and cannot) do on what browsers.

You could use a similar approach to scripting languages like JavaScript and PHP, though trying to work through all of their functions methodically might be a little tedious. Another option would be to work through a number of tutorials specifically on these languages, preferably in the specific area that you work in the most.

Do you need to become better at WordPress development? There is a ton of tutorials about that. Want to learn more about server-side image manipulation? There are tutorials for that too. Find them, bookmark them, and work through them — just don’t do it while you are also going through tutorials about CSS, HTML5, or any other web language so that you’re not spreading yourself too thinly.

Pick one and stick to it until you master it, then move on to the next.

2. Write Your Logic through Comments

When it comes to coding, there are many tenets and ideas I stand by. One of this is that code is 95% logic. Another is that logic doesn’t change when translated from human language into a programming language.

What this means is that if you can write it in code, you can write it in a spoken language like English or French.

For example, suppose that I wanted to write a function that would either lock or unlock something based on the time of day (for what reason, I’m not sure). Instead of just jumping into coding the function, I could step back and write the logic in plain English as comments.

Example

// FUNCTION: Lock On Time
// This function will accept two time values, indicating the range through
// which it should return an unlocked status.
   
  // Create a new data object
  
  // Using the data object, get the current time
   
  // IF the current time falls within the range passed to the function
  
    // Return false – meaning that we are currently unlocked
	
  // ELSE
  
    // Return true – meaning that we are currently locked.
	
  // ENDIF

// END FUNCTION

Here, we have the complete logic structure for our function, which is almost analogous to a blueprint in building a house. From here, I can then start adding in the actual code, allowing the comments to guide the process.

Obviously, this is a very simplistic example, but I do use this technique on a regular basis when I need to build a function that is notably more complex. This way, I can think through the full logic and try to iron out the wrinkles before I actually get into writing the code. I’ve found this to be an incredibly valuable habit that tends to result in fewer bugs.

As a bonus, since I will rarely actually delete the comments, writing the logic through comments also means that my code will already be documented, making it easier for others to follow my logic if they ever have to work on it, or even just for myself, if I have to come back to it several months or years down the road!

3. Study Templates, Plugins, and Open Source Code

The web is an incredibly accessible and open place, especially in the design a development communities. This disposition of the web can be a valuable resource for anyone wanting to become a better coder.

For example, if you’re really just getting started with HTML, you could download any of the innumerable free templates that exist out there on the internet, or study your favorite site’s markup. Because these templates are typically just plain HTML (and CSS, and maybe JavaScript), they’re able to work locally, giving you the opportunity to open up the source and start digging around. Play around with tags and structure to understand them better. Move things around. See what happens when you modify a style rule.

Of course, I would highly recommend coupling this experimentation with reading some solid resources about standards and best practices. After all, you don’t want to find yourself getting into bad coding habits.

This technique is probably even more useful for programmatic coding like JavaScript or PHP, which are quite a bit more complex than HTML or CSS in terms of scope and logic.

For instance, a content management system like WordPress is built almost entirely upon a foundation of various PHP scripts that all work together to establish the core functionalities. The publishing platform also supports a vast and powerful architecture for extending that core functionality, allowing you to download and install plugins that do all sorts of cool (and sometimes entirely mundane) things.

The benefit of all this is that WordPress and its plugins are entirely open source, meaning that you have complete access to all the code. So, go ahead and take advantage of this fact by digging into the plugins and poking around the code. Again, this is a great opportunity to try things and experiment.

One last word of advice on this habit: Never take the techniques or structures that you find in other people’s code as definitive (or "gospel") — be sure that you’re also trying to understand what’s going on and not just mimicking someone else’s code. Always ask why things are the way they are. Always try to consider the code as it relates to the accepted processes and standards for that particular language. Again, this will help keep you from slipping into some bad habits.

4. Read Books

While there is a ton of awesome information on various blogs out here on the web (like right here on Six Revisions), there is still nothing quite like reading a good book on a subject. Blogs are great for articles and tutorials on specific subjects and can work wonders for quick tips, but in my view, nothing beats a good book for helping to build a strong foundational understanding of a larger subject.

This has never been made clearer to me than when I finally grew tired of the table-based layouts that I had been creating in the late 90s and into the early 21st century. At that time, I finally realized that it was time for me to switch over to best practices (divs).

However, up to that point, I only had moderate success trying to teach myself how to use proper markup. I didn’t fully understand CSS selector syntax, which is such a huge part of grokking div-based layouts. As such, I really didn’t get pseudo-classes either (such as :hover), and the whole concept of specificity and inheritance meant nothing to me. The same was true of positioning and floats.

Now, I could probably have learned the language slowly, piecing together bits of information from various blogs (of which there were far fewer at the time, I might add) to form a more comprehensive picture of CSS as a whole. That would have taken a lot of time and I had jobs to do, and so I was looking for a more expedient solution.

So, I went out and bought Stylin’ With CSS by Charles Wyke-Smith. It was a revelation. In just a few short chapters, I had the basic concepts of CSS down. All those things that I didn’t even know existed were made known to me in a well-paced and organized fashion, with each chapter building on the one before. In about a day’s worth of reading, I gained the same amount of knowledge that would have taken me weeks and months to pull out of a wide assortment of articles and blog entries.

Stylin CSS

Of course, I’ve learned a lot more since then, but this single book was really the foundation of my CSS knowledge, and I still keep it on my shelf as a reference (it has a really handy appendix).

If you need to dig into a new technology from scratch, a good book is one of the best ways of going about it!

5. Experiment

The last thing that I would suggest you should get in the habit of is to just have fun. Sit down, experiment and see what you can come up with on your own.

Currently, this is a popular trend with CSS3, as different coders try to push the technology and techniques in order to discover what it is truly capable of.

Here are just a few examples of such experiments.

CSS3 Transforms & @font-face Experiment

CSS3 Transforms & @font-face Experiment

This is a really cool experiment that creates a poster-like typographical design using the @font-face CSS property, along with some shadows and the amazing rotate transform, which, when fully supported by all browsers, will open all kinds of amazing new possibilities in web design.

CSS Posters

CSS Posters

In this article over at Design Informer, Jad Limcaco experiments on creating a number of different poster designs using nothing but CSS.

Pure CSS Line Graph

Pure CSS Line Graph

There are tons of different tutorials out there that demonstrate how to create bar graphs using CSS. This one uses a different approach to visualizing data by using an actual line graph. Depending on your point of view, you might not think it’s "pure" CSS since it makes use of a giant sprite, but it’s still pretty darned cool.

CSS3 Leopard-style Stacks

CSS3 Leopard-style Stacks

This article illustrates an excellent attempt at trying to recreate a non-web effect using CSS by visually emulating one behavior from the Mac operating system. It’s pretty well done too, so check it out to be inspired.

Pure CSS Twitter Fail Whale

Pure CSS Twitter Fail Whale

Not all CSS experiments are entirely practical, of course, and this one is probably the least practical of all as it actually recreates the well-known Twitter fail whale illustration using nothing but CSS. Is it time-consuming? Yes. Is it practical? No. But it’s certainly fun and is a proof of concept of how powerful CSS is.

All of these experiments do compelling things with CSS. Some have more real-world applications than others, but I’m sure that all of their creators actually took something away from their exploration of CSS; perhaps a better understanding of the particular CSS properties they were working with or a few techniques that they will be able to apply to actual site designs.

What kind of coding experiment can you undertake? It can be a fun and effective way to learn.

Some Parting Words

So there you have it: five different habits to take on to improve your coding expertise. Not all of these will be relevant to everyone, but I hope that you will be able to find at least one habit that appeals to you.

Remember that this place called the internet is always growing and evolving. Being a great coder means a lifetime of learning and growing.

I hope you enjoy your journey.

What are other good habits to get into as a coder?

Related Content

About the Author

Matt Ward is a digital artist who lances freely under the moniker of Echo Enduring Media, and specializes in graphics design, illustration and writing. Check out his blog to read posts on design. You can follow him on Twitter.

38 Comments

Egzon

July 8th, 2010

Great article, thank you Matt for sharing this with us!

Jordan Walker

July 8th, 2010

Another good habit for coders is to have a personal project.

joddy street

July 8th, 2010

i agree with reading open source code and experimenting, point one is really not necessary.

J Burke

July 8th, 2010

Great article! Some good tips in there (love the Stylin’ with CSS book as well – it’s a great resource).

Joe Valdez

July 8th, 2010

Excellent post on how we can all be better at coding, definitely recommend using comments, they come in handy.

Thanks for sharing

ddeja

July 8th, 2010

As for me logic through comments exists only when i work with other people on the same project. In all other cases it’s just to simply comment the area’s.

Reading books is very helpful if you have a spare time. I don’t so that’s the problem.

I found tutorials to be very addictive, particularly when some language is a weak side of yours.

Cheers.

Emmanuel Medina García

July 8th, 2010

This is a great tutorial very handy for beginners. Just to mention another important aspect, what about the order in which some of the different languages can be learn. For instance I think HTML can be a good starter then CSS and after that some JavasScript or a handy library like jQuery, this set can master a Front-End Developer. For a full Developer I think PHP is a good beginning because of the community and tutorials out there what do you think

Colin Gemmell

July 8th, 2010

Nice article and I agree with most of the appart from number 2. I would swap this for “learn how to write unit tests”. writing test can not only help you break down large problems into manageable chunks but can also indicate intent of the code, used as documentation and, if integrated with some kind of build process can ensure your code continues to function correctly when you are make changes to you code.

Amber Weinberg

July 8th, 2010

Semantics, validation and correct formatting are probably the most important habits of being a great coder ;)

naveen kumar shukla

July 9th, 2010

thankyou sir,

i am just a beginner and these tips really gonna help me in a great way.

Chris Johnson

July 9th, 2010

Nice post with some good approaches to improving coding skills. However, #2 as you’ve detailed it, is a horrible practice.

Comments should only ever exist when they are necessary. Necessary is when a capable programmer cannot quickly deduce what is going on and why it is going on. From your example, if a capable programmer cannot deduce object creation, getting current time (assuming it is being returned from some function akin to date / time), an if condition, an else statement, an end to an if (assuming proper indentation), an end to a function (assuming proper indentation). With those comments removed, if you cannot understand the logic of the example function you have failed at reading code (#3).

Also, do not introduce your own style of commenting function definitions when there is a fairly standard approach already in wide usage. This is especially useful when it comes to interacting with open-source projects. While not absolute, I think the Javadoc style of function definition is a good starting point.

Markus

July 9th, 2010

What about the classics? UML, source-code documentation (like JavaDoc, PhpDoc, …), requirements engineering, unit testing, …

This post is a weird mix up of software engineering and web coding. You might want to skip your second point and and parts of the third an just refer to web coding in the sense of HTML and CSS.

Mixing up programming languages (PHP, Java, Ruby, ..) with markup languages (HTML) or other stuff (CSS) is in most cases no good idea.

Mr No Comment

July 9th, 2010

Comments – these are a good idea when plotting out what you want to do, but too many times the logic changes and the comments are not updated. This leads to issues when developers assume what the code is doing by reading the comments not the code. The written code should be straight forward (as best it can be), logical, and relevant. This leads to code that is self-commenting.

David

July 9th, 2010

Great article here, i really agree with what you say about focusing on one programming language at a time, doing this helps to concentrate on the details and really understand what is going on.

Thanks,

Johan de Jong

July 9th, 2010

I’m missing one major habbit which really make you a better coder: documenting your code.

Not just by writting comments on every line (as in #2) but by writing down the function/method name, description, access level, parameters, output, etc. It isn’t important how it’s done, it’s more important to know what happens if you use a function/class/method. A good coder can read the flow by him-/herself.

Another good habbit is to keep consistent in writing. Allways use tabs or the same amount of spaces to indent, use the same structure of naming (like variables are lowercase with underscore, functions/methods use capitalized words except first letter and classes always use capitalized words) and use the same structure for filenames (eg. name.class.php, name.inc.php, name.func.php, etc).

Just my two cents…

p6ril

July 9th, 2010

These are all very good recommendations. While everybody can actually develop something (the bad way), being a professional developer requires skills and a lot of good practices. I especially like the second advice which is a pretty good way to get used to algorithm and write comment :-). Well done excellent post.

Eko Setiawan

July 9th, 2010

Very useful for me,
especially the tips 1. Focus on One Type of Language at a Time
Thanks..

SueJ

July 9th, 2010

This is a great article – very helpful. Just like Eko Setiawan I especially liked tip 1. Thank you

arnold

July 9th, 2010

Good tip on prioritizing on one language and also in experimenting…

hmm another good tip will be , follow 2 or 3 tutorials around the web then try mixing the concepts and ideas there to create a niche project , just for fun :).

aki

July 9th, 2010

There’s many opinion whether you should commenting your code or not, but it really depends on how you suit yourself with your code. I prefer my code is documented at the same time, so that in the future, if I DO forget this code do what, I already got my info.

Chris Janus

July 9th, 2010

you know, i’m right in the middle of trying to figure out a wacky script and as simple as it is, point #2 makes a WHOLE lot of sense – i’m going to try that right now actually. thanks for the article!

wildanr

July 9th, 2010

I think experiment is the best! But nice tips anyway :)

Vyom

July 10th, 2010

Good Article !! :)

Sasha Baksht

July 10th, 2010

Looks like the author speaks mostly on front-end coding. When you turn to back-end development the spectrum of habits becomes way wider starting. Reading books is fine but I can’t imagine a project developed without habit of using version control system ;)

Ivan Versluis

July 10th, 2010

I am developing for the last three years websites but quite often I run into problems and most of the time it takes me hours to figure out a solution on that. Thanks for the book Stylin tip. I am just ordered this book.

Mike

July 11th, 2010

I think your program logic should be in the documentation of the project, something you keep in secret, far from anonymous users who could view how your program works when they, for ex, hack into your server. Just my idea. Except that, I think your article is great.

BMJ

July 12th, 2010

I really agree with number 2. Writing out pseudocode is one of the first things they teach you in school and for good reason, it really does help.

BrightLoudNoise

July 14th, 2010

Good tips, although I suspect you meant tenets as opposed to tenants.

Anees

July 15th, 2010

Great article, Thanks buddy!

mark

July 16th, 2010

2. Write Your Logic through Comments
You have to be kidding.
Stop writing articles just to for the sake of writing an article.

Bishal Pantha

July 25th, 2010

Great post to get Web-Tech enlightenment …thanks a ton Matt…

Ron

July 28th, 2010

Great tips, with one exception: Number 2:
I agree, that it might be helpful, to use some kind of pseudo-code or natural language to lay out a function at design time, but as soon as i write code, there are no comments anymore!
If you have to say something in your function, express it through code, by using meaningful variable names or good names for (sub)procedures/functions.
This is the only way to get sustainable readable and understandable code. The code is the documentation, no need for code comments.
According to tip 4 (read books), i can only suggest reading “Clean code” by Robert C. Martin.

(Sorry, i am not a Web Developer, but a Java Developer, so my attitude may be a bit biased…)

Youpele

September 10th, 2010

This post has helped me stay some what focused as I’m teaching myself HTML(Late starter I know CS5 out already!). It takes a keen eye yo to study the code of javascript and css with HTML code.(hope I’m making sense:. I’m teaching myself as feel enthused by the prospect of being a home starter.

Great Post

Wonde

June 3rd, 2011

Thanks a lot, great tips

shireesha

July 24th, 2011

thank you…..for great tips

David Litvak

September 27th, 2011

Nice post… though… the comments stuff… is way wrong from an agile point of view… every agile developing method is against comments in code… as code should express itself…
A good technique for avoiding unnecesary comments is good object modeling (which is really possible in Javascript) and good naming conventions

Ryan Miller

October 4th, 2011

I think the concept behind #2 is solid, but perhaps the implementation should be different. I agree that if you can not explain in WORDS what you are trying to accomplish in code, how do you expect to code for it. So being able to describe and explain what you want to do is important, and doing so in comments is an option, I would rather recommend using test-driven development (TDD) as it forces you to think through the problem you are solving as well as test for it as you go.

Leave a Comment

Subscribe to the comments on this article.

Mobify empowers marketers and developers to create amazing mobile web experiences. Tap to learn more

Mobify