Twice a month, we revisit or update some of our readers’ favorite posts and sessions from throughout the history of Nettuts+. This tutorial was first published last September.
Doesn’t the title say it all? There are a wide variety of tools and techniques which can drastically improve the speed at which we code. Particularly during time-sensitive settings, even a savings of a few seconds per iteration can add up substantially over the course of the month. I’ll show you eleven of my favorite tools in this article.
1. Zen Coding
Combine the power and specificity of CSS selectors with HTML mark-up, and you get Zen Coding. Certainly, I wasn’t the only one whose jaw dropped the first time he saw:
div#container>div#contents>ul#nav>li*4
…convert to:
<div id="container"> <div id="contents"> <ul id="nav"> <li></li> <li></li> <li></li> <li></li> </ul> </div> </div>
In this last year, the Zen Coding project has gained considerable attention, and has been expanded to support a wide variety of code editors, including Espresso, Vim, Netbeans, TextMate, and Komodo Edit.
“Zen Coding is an editor plugin for high-speed HTML, XML, XSL (or any other structured code format) coding and editing. The core of this plugin is a powerful abbreviation engine which allows you to expand expressions—similar to CSS selectors—into HTML code.”
Alternatives
2. Split Windows
For many, a simple tab-based coding experience is more than adequate; however, others prefer a more integrated approach. Unfortunately, the ability to split windows is not widely available across code editors. Luckily, though, a handful of them do support it at varying levels of flexibility (the king being Vim).
The excellent Vim editor offers an unprecedented level of window combinations. Use :sp and :vsp to create new windows from within normal mode.
Alternatives
3. Embrace Social Coding
In the last two years particularly, the idea of social coding has gained considerable popularity – and why wouldn’t it? If it’s fun to share photos on Flickr, the same will of course be true for coding. With site likes Envato’s recently purchased Snipplr, Github, or Forrst, not only can you manage your own snippets for future use, but you can also take advantage of multiple brains by receiving community feedback on your coding techniques and choices.
Envato recently purchased the popular Snipplr.com
Another social networking site? Yes, that is true; but, I must admit: it’s fun. Plus, it’s educational!
4. Code Management Tools
Online networks like Github, Snipplr, and Forrst are fantastic, however, they can be time consuming to access, when you need to reuse a specific piece of code (assuming it’s not already part of a bundle). The solution is to install one of the various code management applications available around the web.
Personally, as a Mac user, I prefer the not-free Snippets app.
With this tool, when I’m working on code, I can simply press, on the Mac, Command + F12 to insert my desired code snippet into my project. Even better, it integrates an “Export to Snipplr/Snipt/Pastie” feature that’s extremely useful.
While many editors offer an integrated snippets utility, I’d recommend embracing a third party tool instead. This way, your snippets aren’t limited to a single editor.
Pro Tip
If you want to sync your snippets across all your computers, via Dropbox, you can create a symlink.
- Step 1: Browse to
~/Library/Application Support/Snippets. - Step 2: Copy the entire folder to Dropbox.
- Step 3: Create a symlink. In the Terminal, type:
ln -s ~/Dropbox/Snippets ~/Library/Application Support/Snippets. - Step 4: Rinse and repeat for all of your computers.
What Sorts of Snippets Should I Save?
Everything you can think of! As a rule of thumb, if you tend to type some block of code more than once, save it. Let’s do an obvious one together; when producing a new website, how often do you type out the three lines or so to create rounded corners in the modern browsers?
#box {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
This takes around ten seconds to type each time. What a waste! Instead, create a new snippet, and reduce your coding time by 90%.
Alternate Options
- Snippley : I used this one up until recently.
- Code Collector Pro : For Mac
- Snippet App
5. Choose a Proper Editor
The Holy Grail of efficient coding; your choice of code editor will have the largest effect on your coding speed. Unfortunately, there isn’t a definitive answer. Your decision will largely be dependent upon:
- Which languages you code in
- Your OS
- The type of UI you prefer
- Comfort with the command line (or lack of)
As an example, someone who predominantly creates HTML themes for a site like ThemeForest would be unwise to use a full IDE like Aptana. It’s simply unnecessary and too slow. However, the same is not true for a server-side developer.
Questions to Ask Before Deciding on an Editor
- How important is speed? Should the editor open nearly instantly?
- Do I require integrated debugging tools?
- Does this editor offer some form of bundle functionality?
- How easy to memorize are the keyboard shortcuts?
- Are my favorite extensions and plugins (like Zen Coding) available for this code editor?
- Do I require integrated Git logging?
- Am I okay with a GUI interface?
- Do I prefer speed over visuals…or Vim over Coda?
When I asked myself these questions, I determined that speed and performance were paramount. As such, I currently use Sublime 2 and Vim. The latter is significantly daunting at first, but provides an unprecedented level of flexibility and speed, due to the fact that even traversing your page requires a language, of sorts. However, for larger projects, which require debugging, I use Netbeans.
6. Use Bundles
Bundles: learn them…use them. Editors, like TextMate — and, subsequently E Text Editor — popularized bundles; however, they’re widely available from editor to editor.
What’s So Great About Them?
How many times have you found yourself typing the same generic piece of mark-up or code, whether that might be a new function, or the structure of a new jQuery plugin. How much time are you wasting each time you repeat this process? This is where bundles come into play.
For example, by downloading the TextMate CodeIgniter bundle, we can take advantage of a wide array of methods and snippets. Remember – less typing is always a good thing!
With this bundle installed, we only need to type the designated shortcut, and then press tab (in most editors). This will then expand the shortcut into the requested code. What separates a bundle from a snippet is that you can specify multiple tab stops to further expedite your coding speed.
Vim Users: if you miss/envy the TextMate bundle feature, check out the SnipMate plugin.
7. Use a CSS Preprocessor
Tools like LESS.js and Sass can drastically increase your coding speed. In terms of which one to choose: they’re both excellent. These days, I tend to prefer Sass, since the Compass framework is built on top of it, and provides an unparalleled number of convenience functions. It also seems to be what the cool kids use. :)
How Does it Work?
These tools allow for all of the features that you wish CSS had — such as variables and functions.
/*
Variables!
*/
@primary_color: green;
/*
Mix-ins are like functions for commonly used operations,
such as apply borders. We create variables by prepending
the @ symbol.
*/
.rounded(@radius: 5px) {
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
border-radius: @radius;
}
#container {
/* References the variable we created above. */
background: @primary_color;
/* Calls the .rounded mix-in (function) that we created, and overrides the default value. */
.rounded(20px);
/* Nested selectors inherit their parent's selector as well. This allows for shorter code. */
a {
color: red;
}
}
Pro Tip: To make your browser update every time you save a file (very handy feature), use the watch method. Place the following at the bottom of your project. Of course, this assume that you’ve already setup LESS.js.
less.env = 'development'; less.watch();
LESS Compiler
Many might argue that it’s unsafe to use a JavaScript-based solution. But that’s okay; there are a handful of compilers available around the web. The best solution I was able to find is called LESS.app.
After you download it (free), you simply drag your project folder into the app, which instructs it to watch all .LESS files. At this point, you can continue working on your project, per usual. Every time you save, the compiler will run, which generates/updates an automatically created style.css file. When you’re finished developing your app, you only need to change your stylesheet references from style.less to style.css, accordingly. Easy! Now there’s no reason not to take advantage of LESS — unless you’re using a different solution, like Sass.
Take our mini-series to learn exactly how to work with Sass.
8. Prototype Early with Firebug
You know the drill: write a bit of JavaScript, switch and refresh your browser, receive an error, return to the editor…and rinse and repeat. Though we all do it, sometimes, there are far more efficient alternatives, such as protoyping early with tools like Firebug. By working directly in the browser, you cut out the middle man, so to speak.
The uber-talented Dave Ward recommended this tip, and has even created a screencast demonstrating this method.
9. Use Prefixr
Tools like Compass, or even a TextMate bundle are tremendously helpful – I use them often, actually. But, for many projects, they aren’t available. As a result, we’re left in the position of having to copy and paste over, and over…and over.
I built Prefixr to do all this tedious work for me. Simply paste in your stylesheet, press Prefixize (or hit Control + Enter), and Prefixr will filter through the applicable CSS3 properties and dynamically update them.
Can’t remember if Opera provides a prefixed version of, say, the transition property (o-transition)? Don’t worry about it; that’s already coded into Prefixr!
With Prefixr, you only code your stylesheets using the official W3C-recommended markup. When ready for deployment, run the stylesheet through Prefixr, and be done with it!
10. Find an Editor that Offers Multi-Select
I’ll first warn you that very few code editors offer a multi-select feature. The editor that I currently use, Sublime 2, does though. Even better, it’s available for both Windows and Mac users.
So what exactly is multi-selection? Well, editors like TextMate have long offered vertical selection, which is quite neat. But, with multi-selection, you can have multiple cursors on the page. This can drastically reduce the need for using regular expressions, and advanced search and replace queries. Perhaps a quick visual demonstration is in order…
11. Don’t Reinvent the Wheel
When first getting started in this field, I always took issue with comments like “Don’t reinvent the wheel.” It’s not about reinvention; it’s about understanding how the wheel functions. However, once you know the inner workings of the wheel, this argument certainly is true: Don’t Repeat Yourself.
Coding each new project from scratch is incredibly time consuming.
If you want to complete new projects as quickly as possible (and who doesn’t), save yourself some time, and take advantage of the various levels of abstractions that are available around the web. A handful of my favorites include:
- HTML5 Boilerplate – Whether you choose to use this template in its entirety, or in bits and pieces, it doesn’t matter. Just use it! And while you’re at it, split the sections of code into snippets for reuse! Watch the official guide to Boilerplate on Nettuts+
- CodeIgniter (PHP Framework) – For higher level PHP applications, the CodeIgniter framework is a fantastic choice. Even better, the community support is second to none. If you happen to be a visual learner, our CodeIgniter from Scratch series is, also, second to none. :)
- 960 (CSS Framework) – If you require grid-like structures, both the 960 and Blueprint CSS frameworks are fantastic choices. They easily turn hours of work into a two minute process; and, if you’re worried about file bloat, you needn’t. That’s a ridiculous argument. Let us teach you how to use 960!
- jQuery (JavaScript Library) – Does this one really require explanation at this point? Save yourself the headaches, and use it (that is, unless you’ve developed your own awesome library).
Conclusion
I’ll show you mine if you show me yours. Which tools and resources do you use to code faster?
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Jeffrey Way
Join our newsletter!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
Nice list. I’ve been really getting into Zen Coding which is built into Espresso (what I use at work) and the bundle for Textmate (what I use at home).
I also set up a Snipplr which I sometimes find handy, but I rarely use snippets when coding.
awesome tips…thanks ^^
how is it someone can apparently write an authoritative article on editors and not mention emacs? im preeeetty certain emacs is more flexible than vim
This is a OLD war… both editors have space in the developers market, he did not mention Eclipse, NetBeans and many other editors. Its impossible to know every editor/IDE, the author just wrote about the onew he knew, it that simple.
If you know how to use some of these helpful advices in emacs, you should just comment explaing it, or pointing to a link that teach user how to use it.
Try to be colaborative, so everyone can enjoy.
Just for the record:
“However, for larger projects, which require debugging, I use Netbeans. “
Thanks Handrus,
I appreciate your proactive comment and insight. It is a great blog. Thanks for adding to it by encouraging contribution rather than “my dad can beat up your dad” type reactions. It is people like you who make the web better.
Thanks for the Post. I agree with almost everything, but CSS Frameworks are definetely NOT a way to code faster – for our german readers, i wrote an article about the disadvantages on CSS Frameworks: http://www.shiftedwork.de/blog/2010/09/09/uber-den-unsinn-von-css-frameworks/
Thanks for this post, I was /really/ happy that. The FireBug console video is very handy also, Ive always been pretty quick at editing CSS and HTML to mock but Ive always been stuck hacking up the script elements or link elements to get jQ or js to change any. I never really knew what the Firebug console was, or what I could do with it. Also, never really understood templates for property snippets!
As an addendum to your opinions with SASS or LESS — SASS/SCSS is, in my opinion, one of the greatest things that I have ever used. When developing multiple site colors, or developing slightly unique styles for similar elements across a site map; interpolation, mixins and variables are priceless. I can change the entire color palette of roughly 15 template pages with PS actions and SASS variables in roughly 10 minutes. Thats including the code commit and production push.
Thanks for all the details here; Ive used all of these things but never really understood some of the features.
Thanks for this post, I was /really/ happy that. The FireBug make the programmer/Designer works so easy .in ie its difficult to trace out html and CSS part and debugging . which is too east due to Firebug
Use “IE Developer Toolbar” – built into IE8 and downloadable for IE6 and IE7
Yes, that works. Though compared to Firebug its a pain in the *** :P
Any LESS.js compiler, like Less.app, for Windows?
SimpLESS is just like LESS.app but multi-platform. Crunch App is an Adobe Air editor for LESS that saves in CSS.
The title should be “9 ways to be more productive in web development”
Yeah, its a pretty silly article. But i’ll even go so far as to say the article should rather be called “4 Ways to be more productive in web scripting if you’re using a mac” cos lets be honest, theres no development going on here, its all scripting. And most of these tips are pretty useless anyway and totally biased towards Mac.
Seriously…wtf.
Of course they’re tool/performance based. And, I just checked again, every single item (except 1) has a PC alternative option.
If you were unaware, this website is implicitly based (albeit somewhat loosely) around web design and development.
Please try and be less pedantic and more constructive.
About item 1… I use ZenCoding on PSPad, and there are plug-ins for other Win editors (vim for Win, i.e., ou Edit+). Aptana’s winversion accepts the zenCoding add-on… Just go visit the site.
What about coding tips for regular AS3?
Very useful article, thanks!
Some good tips here, just taking a look at snipplr now, cos it looks pretty cool.
Some of these are very, very cool; I’ve seen Zen Coding mentioned before, but never such a clear example of it.
Split windows? Very 3270ish; how about a large-enough screen that you can display good chunks of files in separate windows? I’ve been doing that since oh, about 1988, with truly usable screen sizes only in the last few years (the 24″ display on my ageing iMac is glorious for this).
Social coding is a good thing; the logical offshoot of XP’s pair programming. It would be much better if sites claiming to support it (I’m looking at *you*, forrst) worked properly with popular, standards-aware browsers (Chrome/Mac tab thread got killed thrice before I gave up).
And why GitHub without highlighting sites oriented towards more mature DVCS packages, like BitBucket (using Mercurial)?
As great as Zen is, the “Don’t Reinvent the Wheel” item should have been #1 (and #2-27). Just about every single reasonably-sized code base I’ve seen has this problem, with bugs to match. If you have the same snippet of code (from your bundle, perhaps) repeated in 27 different places, and you fix bugs in 25 of those, you’ve still got two known-or-should-be defects in your code. Better to refactor so your 27 different places that use the code call one method/function, which is much easier to find and fix, yes?
And when are sites going to recognise that just because you’re publishing on the Web doesn’t mean you have no need for a copy editor? Your choice of code editor will have the largest effect on your coding speed, and using the correct word will affect how seriously your readers take you.
Copy editor? Correct words? What do you mean by that?
Very nice and useful post. I have bookmarked this post for future references. Thanks Jeffrey Way
dsasds
Hi,
Nice list you have here.
You could also add a point to it : build code generators.
Indeed, if in your application you have something that have to be done multiple time, for example build model classes, it may be less time consuming to make a code generator that will generate theses classes based on a schema instead of updating it by hand after each change.
Really Nice Tips. Thanks for sharing..
Some useful tips, Not Bad.
No matter how you look at it Microsoft Visual Studio is still be the best IDE on the market. Even the free Express edition is a market leader. Supports .Net only, sure but is that really so bad? Horses for courses I guess. No matter how deep your anti Micro$ / .net prejudice they have nailed the IDE, and Visual Sudio 2010 sets the bar even higher. Although their 2010 express edition excludes many features that may reignite that old anti Micro$ sentiment.
Disagree completely, have to use visual studio in college, use netbeans in my spare time.
Netbeans by far better for me, built in manual etc, syntax highlighting, on the fly errors.
“Don’t reinvent the wheel”
Is that a line form “C++ by Bjarne Stroutstrup” xD *wink*
Let’s not forget the importance of two displays (monitors) :).
My sites have been using this already for a while now. Once you make the change to CSS your whole site behaves and reacts like a 2011 website vs something old and antequated and yesterday. The we moves fast and if you dont adjust with the times you’ll find your traffic base getting smaller.
TextExpander is a pretty amazing resource for using code snippets and the newest version allows you to set up dialog boxes. So for example, I set up my border radius css to the text “borad”. It then pops up a little box, I enter my radii, and bam, done. It’s the fastest way I’ve found as it requires no extra effort outside of typing.
Download a small collection of text expander snippets at my blog. http://blog.mezzomind.com/post/1261212571/css-snippets
I use Notepad++ for EVERYTHING I code. Thank You Jeffrey for showing me the way of Texter and other text expanders as well as making me a CSS Ninja!
The title should really be “A few webdev productivity tips you already knew”. Not everyone is so unlucky to only code in HTML, CSS and jQuery/JS. The only thing I like about this article was the inclusion of LESS.
Oh, more ways to code much faster for free:
- Have a dedicated keyboard. Don’t use your ugly notebook keyboard.
- Buy more monitors. Instead of using vim to split the editor view, you can then just code of different monitors. If you’re lucky enough to even have three monitors, you can code on two of them and use your usual desktop for filesystem stuff, IM, email and such. In Eclipse for example you can do Window –> new Window and have multiple eclipses … if you want to say so ;-)
- And backup you stuff every day :-p
Appreciate the time and effort the Envato sites take to try and help improve people’s knowledge, and it still amazes me how often people criticise and try to outsmart the people offering their ideas. It’s not a pissing contest – if you don’t like it, go somewhere else!
Sadly I haven’t read of jedit in this post. I think jedit is the firefox of coding programs. Beside themes, tabbed or multicolumned (split-windowed) coding, thousands of useful plugins and uber – configurabilty, it has rectangular selection which totally totally rocks. Its free, its fast and it even is portable if you need that. Of course, I admit, you need to get into it to customize this little diamond the way you want it and that will take time up front. But I did it and it TOTALLY paid.
Too bad there is no ZEN coding plugin as far as i know.
agreed. jedit ist truly one of the most sophisticated editors there is.
Anyone using Notepad++, Its fast light and runs awesomly on Windows OS…on the other hand,on Linux i prefer to stick with GEdit loaded with plugins
yes , i use notepad++ for my development and also i use firebug :)
great tips – thanks !!!
Nice list. Bookmarked ;)
Great List! Will have to check out the LESS.js engine you mentioned. Nice idea – I would like to see the value while coding though.
nice article. I get a bit tired of people that talk about javascript as scripting. I must say that together with Codeigniter and Extjs, we creating software for our customers that leave quite a lot of other options far behind. Javascript is a strong as the developer that uses it. And is it safe? Depends also on what you are using it for. Don’t let the frontend Js do things that are unwise and don’t let the server accept things that are unwise. Javascript is graet to optimize the presentation of your software, don’t use it for your business logic. I use netbeans by the way. Just because it knows me too and we are good friends. It’s about taste.
Great article! Heaps of really useful tips here.
Being fairly new to serious web design and development, I havent used a whole lot of these techniques before. In fact, this is only the second time Ive heard Zen Coding mentioned, but from how its described here, I’m really eager to try it! At the moment, I use Crimson Editor (I like its speed and simplicity) but I might start using Notepad++ so I can give Zen Coding a go. Not only does it look like it could dramatically increase the speed of writing HTML, I can also see it being valuable in reducing small syntax errors – just by making coding simpler and less repetitive.
I’m also really liking the idea of social coding. What better way to motivate myself to try new and interesting things with code than to have a network to share and discuss snippets with? :) But to avoid joining a whole bunch of sites and ending up abandoning them: which is more a more valuable/open community – Snipplr or Github?
Also,
Use Instant CSS Code – http://instantcsscode.com for making framework ;)
This article is about web development, not coding, as I first hoped (from the title). :( Still a nice article, and thanks for sharing.
Another fantastic article – keep it going guys
This website is so helpful
very nice and fantastic work…
Nice article, but more for web development than regular coding..
Fantastic article, congrats! Gonna try Zen Coding.
Great tutorial.
Hmm, need some help to the zen coding.
I’m using Espresso for mac..
Is there a way where you can write:
Lorem ipsum
in one line? because it would be pretty nice to just write a bunch of code in 1 line.. like all the html, head, body, nav, header, content, wrapper divs and so..
If somebody know, please tell me! thank you
Excellent tips and tricks, Jeffrey. I’m definitely going to explore Zen Coding a bit more, looks promising! Thanks for the roundup!
Resources such as the 1 you mentioned here will be very useful to me! I am going to post a hyperlink to this page on my blog. I am sure my visitors will find that very useful.
keep up the good work on the site. I love it. Could use some more frequent updates, but i am quite sure you have got better or other stuff to do like we all do. =p
Undeniably believe that which you said. Your favorite reason appeared to be on the web the easiest thing to be aware of. I say to you, I certainly get irked while people consider worries that they plainly do not know about. You managed to hit the nail upon the top as well as defined out the whole thing without having side effect , people could take a signal. Will likely be back to get more. Thanks
what I use ofteh:
PHP framework: codeigniter
text editor: komodo edit / textmate
js framework: jquery, backbone.js
css framework: columnal
debugging : firebug
Awesome! I would like to see a tutorial about Sublime 2 if possible.
for developers I recommend Eclipse because it’s the only IDE I know which can be used in a professional environment. (SVN, OOP, autocomplete, debugging, documentation, and so on …)
Great some of the things mentioned are for MAC….I dont use MAC
Very useful tips. Thanks a lot for sharing :)
It’s awesome!
Impossible survive without that tips ;)