productivity 150x150 10 Tips for Productive Web DevelopmentIf you think you are very busy Web developer & running out of time, do follow the tips below, get used to it & see the results. You will find it extremely useful & productive in you daily work schedule. I have filtered out these points from my past 5 years experience.

Productivity is to do things that you were never able to do before…


1. Google Chrome for debugging your web page
If you are not using Google Chrome browser yet, this is the time you think about changing your browser for testing & debugging your Websites seriously. Google Chrome comes with inbuilt set of tools for developers. Just press ctrl+shift+i keys when any website is open in your chrome browser & you will see a box on the bottom of the screen will pop out. Through this tool, you can Inspect all HTML elements, Look at all Resources used on site, Check loading speed of each element on Web page and most interesting, you can use the Console for validating all JS & CSS errors on your web page.
Most performed task by me on Google Chrome : right click anywhere one page & select “Inspect Element” from the menu, you will find it extremely handy.

2. Use code snippet tools
Tired of finding code into your old projects & copy-pasting it into your current code?
Try using Snippet tools like Snippet, Sparkup, Zencoding , Text expander, Code express
or
Try using  online Code Snippet management tools like Snipplr, github, Forrst
For me, Code express for Notepad++ has worked best. Check my other post for this.

3. Take help of browser extensions for most common tasks
There are several tasks that we need to do all the time we develop a Site.
Like inserting dummy text, pickup color from web page, measure different areas on web page,  take screenshot of the full web page & some other. You can take help of Browser extensions & it will increase your development speed for sure.
Here are some extensions I use on Google Chrome.
Lorem Ipsum Generator
Color Picker
Screen Capture
Page Ruler

You can try finding similar extensions for your favorable browsers.

4. Take advantage of online CSS3 generators
As CSS3 is not getting used on almost every website & all browsers have started giving support of it, we require to memorize CSS3 codes like border radius, text shadow, box shadow etc. Some people may think that they could achieve this by storing these code into  code snippets tool. But using CSS3 generators will give one advantage of watching immediate preview of your CSS effects. Try using this CSS3 generator & you will understand my point of view.

5. Create helper functions
While developing big Web sites or Web applications, we always require some code to run so many times. E.g. to redirect on some page, to send email,  trim the string, calculate days between 2 dates
Most of the programming languages gives support of using Functions. Group your code into the different functions & you can call these functions as helpers anywhere in the code.

6. Use MVC frameworks for standardization
Seriously, using framework in web development is hard at first. But once you get used to it, you will be playing in it even while developing big Web Application. Frameworks helps in making your Web Project flexible, stable & error free.
Some of the most used Web development frameworks you should use are jQuery, MooToolsKohana, Zend, Symfony, CodeIgniter960 Grid System
My favourite frameworks are jQuery & Codeigniter.

7. Choose your IDE very carefully
IDE is something you should not keep on changing, so look for all the features of the IDEs you like & compare them, choose one of them & use it forever. Never think of changing it until some extremely better IDEs release. Some of the most popular free IDEs are Notepad++ (my favourite), Geany, Eclipse
and Paid one are TextMate, Coda, Dreamweaver

8. Create & use your own set of boilerplate for each project
Whenever you start working on new project, do you make it from scratch? If the answer is “yes” then I believe that would be a 65% more time consuming. Creating your boilerplate means, you can create set of files which you always create each time a new project comes. That includes a dummy HTML(or HTML5) code page, a JavaScript with all necessary functions you use on most of your projects, images you use on every time, css files like reset.css and a standard css file which is applicable on all projects. And also make sure you arrange all these files in its specific folders so that it remains as a well structured package. And whenever any new project you start working on, just use a copy of that package & that would be much much faster for you.

9. Keep your FTP/CPanel details well-arranged
I was having habit of checking Emails each time I need CPanel or FTP account login details of any website. But later on I started storing it in a document file like notes.txt or cpanel.txt & that did save my lot of time of searching & opening emails & finding domain/hosting details in it. Now I am storing each details in a .doc file & put it into a folder called “documents” inside every projects. This way we can keep every CPanel & FTP details arranged. Another alternative is to use Project management tools & store every details in it.

10. Don’t forget to make improvement
This is the last & the most important tip of all. Even though you keep your productive code well arranged & use it for every project, it is important to keep making updates & improving your code, graphics images or whatever you develop. Otherwise you will get used it with old style work & not be able to upgrade yourself with the latest tools & technologies in Web development.

Hope you like this article. Feel free to suggest your own points & I will be happy to share it with others.