Techniques for More Efficient Coding

by Matt Ward

on April 7, 2011

in design Resources

There is an old saying that “time is money”. It may seem somewhat cliched to read, but there remains definite truth to the statement, even in the world of the web. Whether you’re designing or developing (or, as is often the case, doing both), there is an element of time involved and, as a professional, that time comes with a certain price tag. That price may be something that you the pass on directly to the client through hourly billings, or something you may absorb yourself when working on a flat rate project, but the simple fact of the matter is that the is a direct connection between the amount of time you spend on a project and the amount of money that you can ultimately bill on that project.

If you’re anything like me, one of the things that seems to take the most time on many web projects is the coding side. It’s just so easy to spend hours and hours coding away, and then wondering if you’ve actually accomplished anything because you may not all that much that can be shown or interacted with a tangible manner.

Personally, I find this to be especially true in the more functional stages of a project. Coding up plain HTML and CSS can move pretty quickly, but sometimes coding the more complex, programmatic aspects of a site can be a long, laborious process.

In this article, I would like to offer some simple techniques for coding more quickly and efficiently.

Functions

Most programming and/or scripting languages, like PHP or JavaScript, contain a series of built-in functions and methods that allow you to perform certain basic (and sometimes not so basic) actions over the course of execution. In addition to these built-in functions, most of these same languages also generally allow for the creation of custom functions and methods.

Now, just for the sake of simplicity, I will be talking mostly about functions in this section, while recognizing that many of the same concepts are also applicable to methods, which tend to differ from functions in terms of scope and syntax. While these differences are extremely important, they have little bearing of what I want to point to in this article.

And that is reusability.

In many of the common web programming languages, which find their origins in the C language, custom functions can be created using the following syntax (or some variation thereof):

function myFunction(param1, param2){
   statements
}

We basically name our function, optionally define the parameters that it accepts or requires, and then proceed to write the statements that comprise the function. Then, whenever we need the function, we can simply call it in our code:

myFunction();

Chances are that most readers will be familiar with this concept. Even so, its worth asking ourselves if we are making the best possible use out them as a means of writing leaner, more efficient code. Because custom functions are reusable, they are ideally suited to housing blocks of logic that need to be used and reused in multiple locations within a coded structure such as a CMS, a web app or even a theme.

For instance, one common bit of logic that I have commonly required in a number of different projects is the need to ensure that single digit numbers actually appear or render with leading 0′s. This could be a matter of working with date values, or it may just be a design-based formatting decision. Either way, I tend to find myself needing to add these leading 0′s in a number of places, and while the logic to do it is relatively straightforward, I don’t necessarily want to be continuously re-writing the exact same two or three lines over and over again.

So, I have written a simple function, whereby I pass a number, examine whether it requires a leading 0 and then return the value accordingly. If it does, I append the 0, and if it doesn’t I simply return the raw number. In some more complex cases, I have even added a second parameter to the function, which allows me to dictate the number of leading 0′s that may be required, making the function even more flexible and reusable.

And remember, this doesn’t just apply to writing programs or web apps. Custom functions are also relevant to theming. WordPress is a great example, as it automatically looks for the functions.php file in your theme folder. If it finds it, its contents are automatically included, which means you can call any function defined therein, just like you would call any of the numerous template tags—which, strictly speaking, are actually custom defined functions themselves.

Regardless, functions are an incredibly simple and easy way to code more effectively and efficiently, by simply recycling and reusing the same basic logic from one centralized location.

Clips or Snippets

If you’ve been working at designing or developing websites for any significant amount of time, I’m sure that you’ve come to realize the very simple truth we tend to do the same things over and over and over again. For instance, all HTML documents will generally start off with a doctype. While HTML5 really simplifies this, if you’re still writing primarly in HTML 4.01 or XHTML 1.0, then remembering the complete doctype can be a challenge.

That’s where the concept of clips or snippets can come in really handy.

This is something that I was first introduced to when I started using the Coda app for all of my development needs. Basically, what it means is that I have a collection of different bits of code that I tend to use over and over again, and which I can easily access through Coda’s native interface. Thus, continuing with our doctype example, instead of having to remember each of the different doctypes, such as strict, transitional or frameset, I can simply open up the Clips library and select the appropriate code from the listing (these are built into Code by default).

I also find clips to be an extremely useful tool when it comes to creating and developing WordPress themes. There are a number techniques and blocks of logic that I find myself repeating over and over again, either within the same site or even across multiple themes. One prime example would be the basic structure for querying posts from the database and then looping through the results.

This is an extremely common requirement, and by creating a clip or snippet, I can save that basic logic structure into my library. Then, whenever I need to use that block of code, I just open up the library and copy out what I need. Not having to re-key the entire block of code can be a real time saver!

Similarly, not having to recreate the logic is also hugely beneficial. While creating a query/loop block for WordPress is common, it’s not common enough for me to have naturally memorized exactly how to do it. Without clips, this means that I’m always having to make my way back to the Codex to look it up. I don’t know about you, but I spend enough time there as it is. Saving a simple clip or snippet means that I don’t have to be constantly looking up these kinds of basic techniques, and allows me to focus my time in the Codex on more advanced types of functionality.

If you’re the sort of person who likes to code in an extremely simple environment, even as basic as Notepad (I used to code that way myself), or if the software package that you use doesn’t contain a native clip or snippets functionality, you can still make use of this technique by creating a single or series of text files that you use to store these blocks of reusable code. When you need them, just open up the corresponding file, copy out the code and paste it in where required. It may not be quite as efficient as working from a built-in library, but it certainly beats having to recode the same things over and over and over again with every new project.

Frameworks

Another technique that can really save you a lot of time as a designer or developer is the use of various types of frameworks, which are basically pre-fabricated packages of code (CSS, HTML, PHP, JavaScript etc) that are either included in or linked to your existing code base, and which provide some useful functionality or features right out of the box (so to speak).

The beauty of frameworks of various types is that they can significantly reduce development time through the simple replication of commonly used concepts and techniques. CSS frameworks are probably one of the most common examples. There are all sorts of them, such as the 960.gs and 1KB grid systems, which provide a series of classes for quickly and easily deploying grids on your websites. There are also frameworks for better web typography and even for creating media query-based responsive design!

CSS isn’t the only place where you’ll find frameworks, though. There are a number of popular JavaScript frameworks too. jQuery, is undoubtedly the most prevalent, along with MooTools and a plethora of others. Again, these frameworks essentially bring another layer of functionality to a site, through what are essentially custom methods and functions that become available whenever the framework in question is loaded (see, functions really are useful).

Even something like WordPress is a framework of sorts, allowing you to build rich sites on top of its extensive content management/blogging architecture. It’s not just a matter of defining a content area or iterating over the loop. Through its complex evolution, WordPress presents us with a wide range of hooks and access points that we can use in our themes to retrieve both the managed content, as well as all kinds of useful information about that content.

Whether it’s CSS, JavaScript or PHP-based, these kinds of frameworks can really make coding and develping go so much faster on multiple levels. They can provide a wide range of useful functionality that you may not have been able to create on your own—I can promise you that I don’t have the skill to create something like jQuery or WordPress on my own, though I could likely replicate parts of them.

Frameworks also provide the wonderful benefit of not having to manually write or key mundane and repetitive code. In this way, they are very similar to the concept of clips or snippets that we discussed above, generally just on a much larger scale (though I have created clips from some smaller CSS frameworks)

Now, I do recognize that the use of frameworks can be a hotly debated topic. A few weeks ago, I authored an article about why I do CSS frameworks. Some readers agreed with my sentiments, some disagreed and others more or less fell into a sort of middle ground on the subject. Ultimately, using or not using frameworks is realy a matter of personal taste. If you don’t feel comfortable using a particular framework, then just don’t use it!

But, before anyone rejects the use of frameworks entirely, remember that using a framework doesn’t necessarily mean that you have to be using someone else’s code. There are plenty of designers and developers out there who have developed their own, personal frameworks, which are uniquely tailored to their own tastes and coding styles. In some cases, this can be a matter of a simple reset/typographic stylesheet. In other cases, it can be vastly more complex.

For instance, I have a WordPress theme that I have developed for my own use. Whenever I need to being working on a new theme, I start with that basic theme, which already contains a number of the required elements, without too much in terms of actual design getting in the way. Using the custom built framework, I am able to easily create the basic foundation for an entire theme, usually in less than an hour. And, whenever I find a bit of extra time, I keep adding new little bits and pieces to the framework, making it even more useful for me and the way I like to work.

Conclusion

As stated t the opening of this article, time really is money, and its certainly worth looking into anything that we can do to expedite the coding process, by making it just that much more efficient. In this article, I aimed to provide a series of different techniques that can help in this area. I hope they are useful for you.

Powered by Shutterstock

About Matt Ward