We’re all busy designers here, and that means we’d rather not spend more time hacking away than necessary. It is very easy to cut down on development time by collecting, organizing, and using default code snippets. Most of us probably do it already, but are we doing it good enough?
As for me, 95% of every site I design is based on WordPress, one way or the other, which means I’ve got a default WordPress theme for my own usage. This default theme is written by me from scratch, and I’ve made sure that it is easy enough to modify. If you are a WordPress theme designer you could do that too, or pick any of the free open-source themes out there to base your freelance design work on. Some of you might prefer Sandbox, others will modify Kubrick (the default WordPress theme), and so on. It doesn’t matter, as long as it is a theme that you can bend to your will in as little time as possible.
Another area where you can save time by using default code snippets is the various scripts we use to make our sites more bling-bling. There’s a gazillion jQuery tutorials out there, so collect the best of them for your fancy navigation menus, tabbed boxes, and so on. That way, when you need a dynamic element, you can just pull up your favorite jQuery code snippet. 
Or Mootools, or Prototype.js, or whatever’s your poison.
Naturally, this also goes for PHP scripts, ASP.net, and any other programming languages you might use in your web sites and applications.
In essence, here are some tips on how to store these code snippets for easy use:
- Set up a reasonable directory structure on your hard drive. I suggest using one folder for scripts, then have one for jQuery in that one, and so on.
- Store the code snippets in plain text files, using descriptive file names, like tabbed menu or wisiwyg textarea adaption. That makes it searchable.
- Consider setting up some sort of index file containing all your saved code snippets. That way, if you’re not sure wether you want to use this or that to do a specific solution, you can just scan this file for code snippets that do what you wan.
- Index hardcore style: Setup a local WordPress blog and put each code snippet in its own post, then tag accordingly. Would work with a wiki and whatnot as well, the functionality we need is tagging. There are software solutions to do this to files as well.
- Use a text editor that supports storing code snippets. My favorite is Coda.
It is all about saving time, and avoiding doing the same thing twice. If you keep track of all your nifty solutions and fancy hacks, then you’ll produce faster, and that means more time for other things. So, how do you do it?
Author: TDH
Thord Daniel Hedengren is a Swedish freelance designer and often hired blogger, as well as a web consultant. Visit his blog for more: tdhedengren.com
My “sandbox” runs on RadiantCMS with a lot of customization and extensions along with jQuery and a custom css framework. All of this and my growing collection of Radius snippets, makes it a snap to get a fully functional site with backend up in just a few hours.
It took me about a month to get all this together, but the effort I put into all this prep has saved a lot of time.
I agree with you, snippets I’ve written and reuse over time have been very helpful. I utilize Coda mainly for my programming and set up Global and Per Site snippets during a project. An Alternative for some of your readers who may not own Coda or a Mac would be Snippely (http://code.google.com/p/snippely/) which is written to run on Adobe AIR, may be another helpful spot for developers to keep snippets and time saving code blocks.
Great article I had not thoought about using wordpress or a wiki to track the apps. I go one step further and keep the directory tree in subversion making use of the tag feature> This allows me to track multiple versions versions of the code jquerry for example. I also keep them all indexed in snippely (an adobe air app).
Definetly a good point. I think the idea with a wordpress-site storing all the code snippets is pretty good. I guess I will try that one.
Thanks for the kind words all, and thanks for sharing your own setups. Always interesting to hear how other designers solve things like this.
Thanks for the great blog, like Thord Daniel, i’m always interested to hear how other designers solve those kinds of problems.
The idea of a local wordpress site or wiki is great.
I couldn’t agree more – it is something we know we should do, but don’t seem to do. I am going to be more proactive in this area. Thanks for the great article!
I usually get jobs based on WordPress, plain html or Expression Engine. So what I do is keep a working copy of a bare-bones template I’ve created which suits my style for all three of these systems. Then, I just import them into a project and start off from there with all the basic ingredients already added. Saves a few hours, every single time!