10 Tips for Productive Web Development

August 7th, 2015 General 2,506 views

If 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 your daily work schedule. I have filtered out these points from my past 6 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 switching your browser for testing & debugging your Websites seriously. Google Chrome comes with inbuilt set of tools for developers. Just press F12 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. Recently they also introduced another feature for testing mobile compatibility of any website. It’s extremely useful.

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
SparkupZencodingText expanderCode express
Try using online Code Snippet management tools like
Since I have been using Sublime text 2 & Sublime text 3, it has become all in one IDE tool for me. As it contains features like snippet collection, code auto completion, zen coding and biggest feature is package control that allows to install addons for various purpose. I am planning to write a separate article on it 🙂

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 GeneratorColor PickerScreen CapturePage Ruler

You can try finding similar extensions for your favorable browsers.

4. Take advantage of online CSS3 generators

As CSS3 still require separate code for separate browsers e.g. 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. Another modern way to speed up CSS development is to use CSS frameworks like SASS & LESS.

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, MooTools, Kohana, Zend, Symfony, CodeIgniter, 960 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 Sublime Text 3(my personal favourite), Notepad++, 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 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 to it with old style work & not be able to upgrade yourself with the latest tools & technologies.

Hope you like this article. Feel free to suggest your own points in comments below.

Leave your comments: