15 Tips for Productive Web Development – Save your Time as well as Money!

Magazine 25 Sep , 2013  


Want to get more done in your day? Of course you do. To stay competitive in any industry, from digital marketing to software development, in many cases it comes down to one thing: productivity. I have filtered out these points from my past 3 years experience. Here is 15 Productive Web Development Tips I have for you.

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, SparkupZencoding , Text expanderCode express
Try using  online Code Snippet management tools like SnipplrgithubForrst
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,MooToolsKohanaZendSymfonyCodeIgniter960 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),GeanyEclipse
and Paid one are TextMateCodaDreamweaver

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.

11. Take Breaks

The most important part of sprint-based working is the break. It’s crucial to let your mind rest. Use these breaks to separate yourself from your workspace — go outside and stretch, or if you’re lucky enough to be a freelancer working from home, go to the kitchen and fix a little snack.

Again, don’t bother with tracking your time if you don’t have to. Your sprints don’t have to be exactly 15 minutes, and your breaks don’t have to be exactly 5 minutes. Work until you’re at a good stopping point, then take a comfortably timed break. Micromanaging time, in my experience, has only led to further procrastination.

However, some developers may be better served with more structure. If this is you, check out the Pomodoro Technique.

12. Invest Time in Learning

In the short term, constantly learning, keeping up with industry news and staying ahead of the curve is time-consuming.

However, the idea is that by investing your time in self-improvement, you can save time in the long run, increase your output and improve the quality of your work.

13. Don’t Make Things Complicated

This is probably the most important one of them all: Don’t overcomplicate your job. Don’t do more than you have to, and don’t set yourself up for too much work in a given time period.

I’m not advocating delivering to your customer the minimum deliverable every time, but you certainly don’t need to deliver the maximum.

There aren’t any clear guidelines here, so you’ll have to judge it on a case-by-case basis. Give the client what they need. No more, no less.

Also, don’t overcomplicated your productivity strategy. Keep things simple. I tried using a “Getting Things Done” application to organize my life for a while, and it didn’t work.

I moved on to using sticky notes and finally TeuxDeux, a loveably minimal to-do list.

14. Work in Sprints

Working in sprints can greatly improve productivity. For example, I wrote this article in short sprints, writing two or three bullet points at a time, taking a very long break from it to work on something else, and then returning later in the day.

Working in 10- to 20-minute blocks allows your brain time to generate new ideas and keeps it from burning out.

Don’t work for hours at a time — your pace will slowly decrease and your work will decline in quality over time.

Working on a project in short bursts means you’re always coming back fresh.

15. Don’t Just Jump In Head First

This is the opposite extreme of over-planning. Although you shouldn’t over-plan, you can’t under-plan either.

Jumping in without knowing what you’re supposed to do can lead to disastrous website projects.

Whenever you begin work on a project, make sure you know what’s expected of you. In a web design project, this can be anything from knowing what the site is supposed to do, having the content of the landing page, having a set of colors from your client to work with, etc.

Before I start work on a client’s site, I always have the following:

  • Color scheme
  • Goal of the website
  • Any content they can provide
  • Any design ideas they already have

I don’t advise you to follow exactly in my footsteps when figuring out how to be most productive; everyone is different and requires their own processes for getting things done.

But keep the above tips in mind, and hopefully your workflow will be a little more streamlined than it was before.

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