5 Killer Ways to Streamline your Coding Efficiency

Door globecom op zo, 2014-12-28 14:27

I recently read a forum thread about designers and developers, and the hourly rates they charge. One commenter made a great point, saying that you can start to charge more per hour, if you are more efficient, and faster at producing quality work, as long as quality is not compromised for speed. Apart from practice, how can you actually speed up your coding you may be thinking. Well there are plenty options out there to aid you in doing so.

1. Snippets

The first of these is having snippets at your finger tips. Programmers of high-end applications commonly make use of something called a module library; basically a library of pre-written, pre-tested code that can be inserted into their software. The benefits of this isn’t only faster coding, but faster error checking as well, as you know it is already tested to work. Why shouldn’t we, as web developers, also be making use of our own version of a module library?

There are pretty much 3 ways snippets can be organised, and used. The first is online, commonly via a website that will store your snippets as a database for everyone to share and use. Here are a few you might want to check out, while I’m sure there are plenty more quality options out there.

The second way is to have your own local database of useful snippets at your fingertips, instead of them being out there online, and everyone else’s being there too. There are plenty applications and so on to cover this, with this short round-up covering just a few.

2. Text expanders

The third and possibly best way to make use of your snippets is via a text expander. Think of them as a snippets library application on steroids. Basically, you set up your snippets so that you type a few characters, and then without leaving the keyboard, expand it into your full snippet. It will seriously revolutionise, and drastically increase the way, and speed that you code.

This article, and screen cast by Jeffrey Way gives you a visual view of the power a text expander puts at your finger tips, and is well worth a read. Having seen what you can achieve, here are several text expander applications that you may want to try out.

Editor’s Note: I highly suggest you to use Phrase Express instead of Texter. A far better option than its competitor.

3. Integrated Development Enviroment (IDE)

An Integrated Development Environment, or IDE as they are commonly refered to as, is basically like a well-developed environment to code your websites in. They often comes with great perks, which help you improve your coding, such as auto closing tags, code hints, and much more. Lets take Aptana Studios – my favourite IDE – as an example by looking at what features it has to offer.

HTML, CSS, and JavaScript Code Assist – Code Assist helps you author HTML, CSS and JavaScript code more quickly. It supports all HTML elements and properties and generates suggestions and hints for CSS.
JavaScript Debugging – Aptana Studio integrates with Firebug for Firefox and Internet Explorer, offering multiple debugging options including breakpoints, stepping through code, DOM inspection, and more.
JavaScript Libraries – Support for popular JavaScript libraries and frameworks such as jQuery, prototype, scriptaculous, Ext JS and more. For each you get code assist, importable sample projects, and doc links at your fingertips.

DOM Outline View – View and navigate the DOM in this hierarchical outline of your HTML page. Select nodes to jump to that location in the editor. Filter nodes to see collections that match patterns.
File Transfer & Synchronization – Support for one-shot as well as keep-synchronized setups. Multiple protocols including FTP, SFTP and FTPS. Ability to automatically publish your websites to selected ISPs and hosting services.
Live Preview – Quickly switch between a view of your source code and the rendered HTML page in popular web browsers.

Compared to your code editors such as Notepad++ and so on, a web IDE such as this makes coding so much easier, as well as testing and so on. You rarely have to leave your coding environment for anything else! Check out these options below, or ask around to find out about many more, there are plenty out there.

4. Zen Coding

Zen Coding is a text editor plugin for many IDE’s and text editors out there that will seriously change the way you code. Think of it like a text expander, but for any code you want to write. Basically, you write out your blocks of code as css selectors, and then expand them. Zen coding will then swiftly turn this into proper html code! Take this for example.

div#page>div.logo+ul#navigation>li*5>a

This code would be turned into a fully fledged logo and navigation html structure for you to work from. Think of the typing, and tabbing time that can be saved across multiple html documents with this!

Check out Zen Coding v0.5 from Sergey Chikuyonok on Vimeo to see live action of Zen Coding.

Zen Coding, as I’ve already mentioned is available for plenty different applications, including Aptana, Textmate, Coda, Expresso, Komodo Edit, Notepad++ and PSPad, with unofficial support in plenty others. Go get it here!

5. Frameworks

The final way you may want to improve your coding efficiency is via the use of a framework. There are plenty frameworks out there, for a variety of different things, but some of the main usages are for css layouts and a basic set up for you to start coding with. Think of all those things you type up, and repeat every time yo start a new project, or even a new html or css document. What about grid’s and class’s you set up in almost every project you code. Well what if they were already there every-time you started a project, saving you having to type them out again. That’s what so-called frameworks hope to solve. Some aim at css grids, some aim at having a html base, and so on. Check out some of these below to get an idea.

Further Discussion

Know of further ways to improve coding efficiency and speed? Get them down in the comments as always. It’s always great to get some further insight and thought’s on subjects such as these.