Computing Magazine

11 Tools to Code Faster

Posted on the 22 April 2012 by In7rud3r
<a href="">affiliate marketing</a>

There are a variety of tools and a considerable improvement in the speed with which code. Especially for time-critical settings, also save you a few seconds for each iteration, up significantly during the month.

1. Zen Coding

Combines the efficiency and specificity of selectors CSS with HTML mark-up, and you get Zen Coding.

  1. div#container>div#contents>ul#nav>li*4

…convert into:

  • <div id=”container”>
  •   <div id=”contents”>
  •   <ul id=”nav”>
  •   <li></li>
  •   <li></li>
  •   <li></li>
  •   <li></li>
  •   </ul>
  •   </div>
  • </div>

The Zen Coding Combines the efficiency and specificity of selectors CSS with HTML mark-up, and you get Zen Coding. Sure, I’m not the only one whose jaw was my first time he saw them fall behind:

“Zen Coding is an editor plugin for high-speed HTML, XML, XSL (or other structured format code) coding and editing. The core of this plugin is a powerful engine, the code-like expressions expand selectors in CSS, HTML allowed.”

  • Download Zen Coding

2. Split Windows

For many, a simple form-based coding experience more than enough, however, others prefer a more integrated approach. Unfortunately, the ability to split the window not available everywhere in the code editor. Fortunately, a handful of them are not supported at different levels of flexibility (the king being Vim).

11 Tools to Code Faster

3. Embrace Social Coding

In the last two years especially, the idea of ??social coding has gained considerable popularity – and why not? If it’s fun to share photos is on Flickr, the same will be true, of course, for the encoding. With the spot like the Envato recently bought Snipplr, Github, or Forrst, you can not only manage your own snippets for future use, but you can also take advantage of multiple brain by receiving community feedback on your coding techniques and possibilities .

11 Tools to Code Faster

4. Code Management Tools

Online networks like Github and Snipplr Forrst are fantastic, you can take a long time to access, and (assuming it is not already part of a package) is a particular piece of code reuse should be. The solution is one of several queues management applications installed around the web.

Personally, as a Mac user, I prefer the non-free app fragments.

11 Tools to Code Faster

With this tool, if you work on the code, I can simply press Command + F12 on the Mac to my snippet of code you want in my project. Even better, integrates a “Export to Snipplr / This example vi / Pastie” feature that is very useful.

11 Tools to Code Faster



What Sorts of Snippets Should I Save?

Anything you can think of! As a general rule, if you tilt the blocks of code to write more than once, save it. We are sending a clear, in the production of a new website, how often do you give the three lines or so to create rounded corners in modern browsers?

  • #box {
  •  -moz-border-radius: 3px;
  •  -webkit-border-radius: 3px;
  •  border-radius: 3px;
  • }


5. Choose a Proper Editor

The Holy Grail of efficient coding, your code editor of choice is the biggest influence on encoding speed. Unfortunately there is no definitive answer. Your decision will largely depend on:

  •    What languages ??do you code in the
  •    Your OS
  •    The type of interface you prefer
  •    Comfortable with the command line (or lack thereof)

An example would be someone who generates HTML topics for a site like ThemeForest unwise to use a full IDE like Aptana. It is simply unnecessary and too slow. However, this is not a true server-side development.


Questions before deciding on a theme editor

  •    How important is speed? If the editor to open almost immediately?
  •    Do I need debugging tools integrated?
  •    It is this editor provides a form of beam functional?
  •    How easy is it to remember the keyboard shortcuts are there?
  •    They are my favorite extensions and plug-in (like Zen Coding) code for this editor?
  •    I need the Git integrated recording?
  •    I agree with the GUI interface?
  •    I do not prefer the speed of the images … Vim or tail?

When I asked these questions, I decided that the speed and performance were of primary importance. As such, I currently use 2 Sublime and Vim. This is very discouraging, but it offers an unprecedented level of flexibility and speed, due to the fact that even cross your part is a kind of language. But for large projects that require debugging, I use Netbeans.


6. Use Bundles

Bundles are available: learn to play … they use. Editors like Textmate – text editor, and later the popular e-beam, but are widely available from Notepad editor.
What is great about them?

How many times have you found yourself entering the same piece of generic markup or code, if this could be a feature, or the structure of a new jQuery plugin. How long you will lose every time you repeat this process? This is where bands come into play.

For example, downloading the package CodeIgniter TextMate, we can take advantage of a wide range of methods and fragments. Remember – less typing is always a good thing!


11 Tools to Code Faster

Included with this package, we only need to enter the link provided, and then press the tab key (in most editors). In this way, then expand the links to the required code. What a bunch of other than a fragment of code is that you can have multiple cards to further accelerate the speed of encoding.

7. Use a CSS Preprocessor

Tools like LESS.js Sass and can dramatically increase the speed of coding. With regard to those who choose to be one of them: they are both very good. These days, I tend to prefer, Sass, because the compass is built on the framework, and offers an unprecedented number of convenient features. It also seems to be to use what the cool kids. :)
How does it work?

With these tools, all the functions you want the CSS has been – 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;
  •   }
  • }


LESS Compiler

Many would argue that it is safe to use a solution based on JavaScript. But that’s okay, there are a handful of compilers are available around the web. The best solution I found is
11 Tools to Code Faster
Once you find (free) download, simply drag the project folder in the app, everything. Watch less file instructs. At this point you can continue working on the project, as usual. Each time you save, the compiler is running, updates / style.css automatically generates a file that is created. If you’re ready to develop your application, you just change the references in the stylesheet from style.css style.less accordingly. Easy! Now there’s no reason not to take the advantage of not – unless you have another solution, as they are Sass.

8. Prototype Early with Firebug

You know the drill: you write a bit ‘of JavaScript, turn and refresh the browser, an error message to the editor … and rinse and repeat. Even if all they do, sometimes there are far more efficient alternatives, such as early prototyping with tools such as Firebug. Working directly in the browser cut, it says the average man.


9. Use Prefixr

11 Tools to Code Faster

Extras, like a compass or even a TextMate bundle is enormously useful – I use them often, actually. But for many projects, are not available. As a result, we are able to copy and paste on the left, and … and over again.

I built Prefixr to do this tedious job for me. Just plug in your style sheet, Prefixize press (or press Ctrl + Enter) and filtered by the applicable Prefixr CSS3 and update dynamically.

I can not remember if Opera has a version prefix, for example, the properties of transition (or transition)? Do not worry that is already encoded in Prefixr!

With Prefixr only code style sheets using the official W3C recommended markup. If you are ready for use, run the stylesheet through Prefixr, and be done!


10. Find an Editor that Offers Multi-Select

I warn you first that provide very little code editor, multi-select feature. The editor who currently use, Sublime 2, he does. Even better is for both Windows and Mac users

So what exactly is multi-selection? Well, have editors like TextMate long vertical selection, which is fairly decent offer. But, with multi-selection you can have multiple sliders on the side. This can drastically reduce the need for use of regular expressions, and advanced search and query replacement. Perhaps a brief visual demonstration is in order …


11. Don’t Reinvent the Wheel

When you first start in this area has begun, I always had problem with comments like: This is not a reinvention of “do not reinvent the wheel.” It’s about understanding how the bike functions. However, once you know the inner workings of the wheel, this argument is certainly correct: Do not Repeat Yourself.

Encoding of each new project from scratch is incredibly time consuming.




<a href="">affiliate marketing</a>

Back to Featured Articles on Logo Paperblog

Paperblog Hot Topics