5 Killer Ways to Streamline your Coding Efficiency

Posted in Web Design • Posted on 10 Comments

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!

<div id="page">
<div class="logo"></div>
<ul id="navigation">
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</div>

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.

20 Written ArticlesWebsite

Matt is an 18 year old web designer from Scotland, UK. He loves creating beautiful websites across different platforms. High on his things to learn fully are Jquery and php. He is extremely excited by css3 and html5 and can't wait to see them rolled out fully. To learn more about Matt, follow him @QwibbleDesigns, or check out his portfolio.

10 Comments Best Comments First
  • Blain Smith

    Tuesday, August 31st, 2010 04:29

    1

    I have become a big fan of http://html5reset.org and http://html5boilerplate.com for default frameworks. They were created using standards from some big name people in the web biz.

    0
  • John Alexander

    Tuesday, August 31st, 2010 14:41

    4

    Another good one is code barrel – it keeps your snippets organized and you can revise them, tag etc. And you can give others access as needed. Its different from some other sites in that your snippets are inherently private. A really great tool.

    0
  • Sam Ruston

    Tuesday, August 31st, 2010 13:00

    3

    Are there any free snippet applications for Windows? It would be very useful for my work. I might have to whip up one in C++. Also, that HTML5 Boilerplate framework is awesome. Yay for typography. Thanks for the tips.

    0
  • Antonea Nabors

    Tuesday, August 31st, 2010 01:19

    2

    Great write up. It takes a lot of organization to keep code organized. This is a great start ot organizing your code.

    0
  • Ignas

    Tuesday, August 31st, 2010 09:48

    5

    Nice tips, especially the Zen Coding part ;)

    0
  • Vernon

    Tuesday, August 31st, 2010 13:03

    6

    As far as IDE’s go, I recently started using WebStorm and really like it. I’m using the preview release of WebStorm 2 though because for whatever reason it doesn’t have soft wrapping in the main release.

    However, it’s great to use and has a lot of cool features, like:

    1) Integration with GIT and other subversion tools
    2) Ability to see style applied to an element with a simple keystroke.
    3) Outline view like Aptana
    4) Built-in Zen Coding
    5) Easily create projects just by opening a directory.
    6) Inspection of code for things other than syntax errors (e.g. CSS that may throw a problem in quirks mode in browsers)

    There’s a bunch of cool stuff under the hood, but I’m still getting used to it. It does have a good feel to it though.

    One thing, I made the mistake of buying WebStorm which doesn’t do PHP. They have a PHPStorm product that I’m going to check out today that – I believe – is essentially WebStorm with PHP support added in.

    They have a 50% license discount now on both products so I’m going to get the 45-day free trial and if it’s the same as WebStorm with PHP added I’m probably going to go ahead and get that one.

    Thanks for the great info though! I’m still trying to get myself to make better use of snippets.

    0
  • Bostjan Gajsler

    Monday, October 25th, 2010 18:41

    10

    Great article, thank you for your knowledge and insight, now it will be easy for me to start developing web sites.

    0
  • Kevin Carlson

    Sunday, September 5th, 2010 05:22

    9

    Great tips, for sure. I’d also really recommend learning how to make the most of a version control system like Subversion or Git. (Git is better, I feel). It’s a bit of a learning curve for non-programmers, but it’s actually much easier than you might think. With Git, you can almost instantly switch between two completely different versions of a site build (“branches” in Git terminology), and retrace your steps back to any previous point if you go down an unproductive avenue. It’s just as useful for web design as it is for programming.

    0
  • Sam

    Thursday, September 2nd, 2010 12:41

    8

    I still struggle to using IDE’s.

    I find Scite + Explorer + WinSCP works fine for me. Sometimes I find there are just one or two little features in a rich IDE that annoy me and no way to turn them off. Scite is simple and it works well.

    I’ve just installed Aptana though and working on some client work so looking forward to seeing what features it has (including cloud).

    Maybe I can be converted!

    Good article, bookmarked

    0
  • gerardo Iula

    Tuesday, August 31st, 2010 20:06

    7

    I’m using Snippets for Mac and it is the best snippets organizer I every seen.

    0
  • Bostjan Gajsler

    Monday, October 25th, 2010 18:41

    10

    Great article, thank you for your knowledge and insight, now it will be easy for me to start developing web sites.

    0
  • Kevin Carlson

    Sunday, September 5th, 2010 05:22

    9

    Great tips, for sure. I’d also really recommend learning how to make the most of a version control system like Subversion or Git. (Git is better, I feel). It’s a bit of a learning curve for non-programmers, but it’s actually much easier than you might think. With Git, you can almost instantly switch between two completely different versions of a site build (“branches” in Git terminology), and retrace your steps back to any previous point if you go down an unproductive avenue. It’s just as useful for web design as it is for programming.

    0
  • Sam

    Thursday, September 2nd, 2010 12:41

    8

    I still struggle to using IDE’s.

    I find Scite + Explorer + WinSCP works fine for me. Sometimes I find there are just one or two little features in a rich IDE that annoy me and no way to turn them off. Scite is simple and it works well.

    I’ve just installed Aptana though and working on some client work so looking forward to seeing what features it has (including cloud).

    Maybe I can be converted!

    Good article, bookmarked

    0
  • gerardo Iula

    Tuesday, August 31st, 2010 20:06

    7

    I’m using Snippets for Mac and it is the best snippets organizer I every seen.

    0
  • Vernon

    Tuesday, August 31st, 2010 13:03

    6

    As far as IDE’s go, I recently started using WebStorm and really like it. I’m using the preview release of WebStorm 2 though because for whatever reason it doesn’t have soft wrapping in the main release.

    However, it’s great to use and has a lot of cool features, like:

    1) Integration with GIT and other subversion tools
    2) Ability to see style applied to an element with a simple keystroke.
    3) Outline view like Aptana
    4) Built-in Zen Coding
    5) Easily create projects just by opening a directory.
    6) Inspection of code for things other than syntax errors (e.g. CSS that may throw a problem in quirks mode in browsers)

    There’s a bunch of cool stuff under the hood, but I’m still getting used to it. It does have a good feel to it though.

    One thing, I made the mistake of buying WebStorm which doesn’t do PHP. They have a PHPStorm product that I’m going to check out today that – I believe – is essentially WebStorm with PHP support added in.

    They have a 50% license discount now on both products so I’m going to get the 45-day free trial and if it’s the same as WebStorm with PHP added I’m probably going to go ahead and get that one.

    Thanks for the great info though! I’m still trying to get myself to make better use of snippets.

    0
  • Ignas

    Tuesday, August 31st, 2010 09:48

    5

    Nice tips, especially the Zen Coding part ;)

    0
  • John Alexander

    Tuesday, August 31st, 2010 14:41

    4

    Another good one is code barrel – it keeps your snippets organized and you can revise them, tag etc. And you can give others access as needed. Its different from some other sites in that your snippets are inherently private. A really great tool.

    0
  • Sam Ruston

    Tuesday, August 31st, 2010 13:00

    3

    Are there any free snippet applications for Windows? It would be very useful for my work. I might have to whip up one in C++. Also, that HTML5 Boilerplate framework is awesome. Yay for typography. Thanks for the tips.

    0
  • Antonea Nabors

    Tuesday, August 31st, 2010 01:19

    2

    Great write up. It takes a lot of organization to keep code organized. This is a great start ot organizing your code.

    0
  • Blain Smith

    Tuesday, August 31st, 2010 04:29

    1

    I have become a big fan of http://html5reset.org and http://html5boilerplate.com for default frameworks. They were created using standards from some big name people in the web biz.

    0

Comments are closed.

54.82.140.107 - unknown - unknown - US