Thursday, 22 November 2012

Some tools to instantly code faster...


I thought it would be great if I share the knowledge that I have with you. This  is my attempt to share my knowledge that can help you code in a better way and it would be great if you also share the tools you have in your arsenal. 
  1. Let us take a demo. If I ask you create this piece of html,
<div id="page">
    <div class="logo"></div>
    <ul id="navigation">
        <li><a href="">Item 1</a></li>
        <li><a href="">Item 2</a></li>
        <li><a href="">Item 3</a></li>
        <li><a href="">Item 4</a></li>
        <li><a href="">Item 5</a></li>
    </ul>
</div>

I am sure you will go on create element by element and will type a lot. Ever wondered how you can boost your coding skills?

Well, I can create the above mark-up by following code:
#page>div.logo+ul#navigation>li*5>a{Item $} and this will expand to the above mark-up! Cool. Right?

Just imagine, you will be able to create a whole basic webpage structure with in seconds. You can do many such stuff just by going through here: http://docs.emmet.io

  1. I also save all my projects on github through which I can access it from anywhere I go. https://github.com/
  2. I find myself writing the same piece of code many times and yeah, it is sometimes odd to remember the code that I discovered few days back. Thus, I use tools like https://gist.github.com/ to save all my snippets which I can access it anywhere.
  3. There is no need to create a page and add html, css, js etc in your pages and creating a project structure. Just go to http://jsfiddle.net/ and http://codepen.io/ and start writing your code and share it with your team members anywhere on the globe!
  4. You may find yourself very productive if you start using a CSS pre-processor like LESS, SCSS or SASS. They extends CSS with dynamic behaviour such as variables, mixins, operations and functions. LESS runs on both the client-side (Chrome, Safari, Firefox) and server-side, with Node.js and Rhino.
  5. Choose a good code editor. Visual Studio (for those who work with Microsoft technologies) is very good but sometimes there are more better alternatives if you love working with HTML, CSS, JavaScript.
  6. Expertise in the web developer tools either the Firebug or Chrome developer tools or the one in IE or Safari. 

I will keep extending this list of tools that can help you to be more productive and I am sure you will like the tools that I have listed above and you might remember me :) if you are totally new to these tools. 

No comments:

Post a Comment

Search...