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
- <div id="container">
- <div id="contents">
- <ul id="nav">
- <li>li>
- <li>li>
- <li>li>
- <li>li>
- ul>
- div>
- div>
“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
- Sparkup
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 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.
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;
- }
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)
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?
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!
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. 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;
- }
- }
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.
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
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!
- 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).
No comments:
Post a Comment