1 Use A Decent Code Editor
The very first thing you can do is use at least a half decent code editor, since most code editors worth their salt will have things like snippets and auto-completion.
Sublime Text 2 (Free / $70 Licenced Version)
Possibly the best editor I’ve ever used and it’s also one of the most popular editors out there. Has tons of features such as custom projects where you can keep all your files organised for a specific site or app and you can even include folders inside of projects. (Check out Sublime Text 3, which is in beta).
Intype (Free Trial / $55 Licenced Version)
I used to use this one all the time, however I found that Sublime Text is updated more regularly and has more features overall. Still a great editor. It’s interface for things like snippets and the snippet editor are actually better than the equivalent features in Sublime Text.
Brackets (Free – Still In Beta)
Brackets is actually a great editor even though it’s still in very early development. It already has things like live-reload and is fully open-source. Meaning it’s made by and for the community. It’s a very powerful editor and set to be one of the best you can get.
2 Think Using An OOP Mind-Set
You may be wondering what OOP (object-oriented programming) is, well it’s actually quite a simple concept. It basically describes how writing your code in separate, logical functions, classes, objects etc… can create a much cleaner and more maintainable code-base. Compared to a code-base which is just a load of variables and if-else statements, you can imagine the latter would eventually cause far too many bugs to ever be fixed.
Here’s a small snippet from Wikipedia:
Simple, non-OOP programs may be one “long” list of commands. More complex programs often group smaller sections of these statements into functions or subroutines…
In contrast, the object-oriented approach encourages the programmer to place data where it is not directly accessible by the rest of the program. Instead, the data is accessed by calling specially written functions…
3 Use Code Modules, Don’t interweave Code
This is something I’ve only recently taken up and it actually follows on from the OOP concept but can be applied to basic HTML/CSS as well. It was inspired by a friend and colleague of mine, Ghislaine Guerin, when we were chatting on Skype about coding HTML/CSS mockups that can be added/moved anywhere other than its current placement more easily.
An Example of HTML/CSS Modules
Let me go into that concept further. If you’re working on something complex like an app, it makes sense to create what I like to call layout modules. Say you have a main content area, every page will have this, however every page will have different content.
All you need to do is code each module in its own HTML file, so that way it’ll never conflict with the rest of the layout because when it was created it was separate from everything else. This way all you have to do is style it to the specific surroundings. You’ll always have the base module and will only ever need to update the page/area specific styling.
4 Put Typography & Element Styling Together
As some people may know, I used to put all of my typographic styling into one file and the actual element styling into another. For smaller projects it actually helped, however when the projects got bigger and bigger serious problems regarding maintainability began to rise.
I quickly moved all of my typographical styling into the main layout file. Which over time has actually saved me a lot of work.
The problem isn’t just having the two files, it’s having to maintain both at the same time. You could be really deep in the zone, getting work done faster than usual. A bomb could go off and you wouldn’t realize because it’s just one of those moments when the code is the only thing on your mind. Then you have to break your concentration to delve into the typography file just to change some font sizes. Not good workflow at all.
5 Others Should Be Able To Decipher Your Code
The one thing that you as a developer should know, no matter if you’re working on a small portfolio site or the next Facebook, is that others should be able to read and edit your code.
Being able to read the code is the easy part, knowing where to even begin with editing someone else’s code is a different matter entirely. By nature a lot of people are lazy. That’s just what we’re like. I’ll admit that sometimes I spend more time in front of the TV than not.
When coding you’re creating something beautiful and one the greatest achievements you can get as a creator is the recognition you deserve for the hard work you’ve put in.
The thing to remember: If you’re going to be lazy, don’t let it be with you code.