10 Ways to Be a More Productive Web Developer

Sep 22 2011 by Delwin Campbell | 32 Comments

10 Ways to Be a More Productive Web Developer

We could all be more productive. There are many things we can do — some big, some small — that will enhance the way we work and improve the outcomes of our activities.

Although I can’t promise that I’ll be able to help you cure all your productivity ailments, I do hope that I can provide you with a few useful, solid tips on streamlining your web development workflow and making every part of the development cycle move quickly and smoothly.

Follow each one of these tips and I can almost guarantee you that you’ll save time, be able to create more and/or better work and be a more productive developer, ready to tackle that next task in half the time it would’ve taken you before.

1. Use a Web Development Framework

I used to refuse frameworks for web development because they can be bloated with excess stuff. But ever since I’ve adopted one, I’ve loved it.

Good web development frameworks:

  • Have features that provide solutions to common web development problems (e.g. standard web page layouts, functions for dealing with web forms, and browser compatibility fixes).
  • Are tested by many other web developers for bugs, security and performance.
  • Make code reuse easier because of a consistent API.
  • Have community-developed extensions and tools that further enhance development (for example, jQuery has plenty of plugins that deal with things like UI, images and web typography).
  • Often force you to follow coding best practices and great programming design patterns without even thinking about it.
  • Have a development community of supporters and users you can reach out to for help and collaboration.
  • Typically are easier for beginners to start using.

All these benefits save you time and improve the quality of your deliverables.

There are many types of web development frameworks you can adopt.

An often-cited downside to using web development frameworks is that they will invariably come with extra things that you won’t use. This extra stuff can slow down website speed and performance due to code bloat, so you have to make sure that the benefits of using them outweigh the potential performance hit.

More often than not — and this applies especially to those just starting out — the code of frameworks are written using the best coding practices and design patterns and are reviewed by many brilliant and passionate developers, which often translates to better, faster and more secure code compared to what an average web developer can produce by himself.

2. Create a Library of Code Snippets

There’s no reason to reinvent the wheel. Recycle your code! Create a collection of your favorite and often-used snippets and make sure that it’s easily searchable and well organized.

At the simplest level, you can have a folder/directory of source code and text files in your hard drive. However, this may not be the most efficient technique.

A step up to that is using a source code editor or IDE that allows you to save snippets. For example, Notepad++ has a plugin called SnippetPlus and Dreamweaver has the built-in Snippets Panel that even has prepackaged code snippets ready to use.

Adobe Dreamweaver’s Snippets Panel.

Another solution is to use a dedicated snippet tool like Snippet or Snipplr.

Here’s an idea: You can even use a private code repository/version control system like Git for finer control over your source code. This additionally allows you to revert to older versions of your snippets and see how they’ve evolved over your career.

My collection of code snippets spans several different languages and is employed all the time for repetitive tasks like inserting new CSS3 rules with browser prefixes. It’s also handy for oft-used functions that are easily forgotten, like how to display Custom Fields in a WordPress loop.

When choosing a tool or method for collecting snippets, consider making sure that it has these time-saving features:

  • Search
  • Hierarchical organization so you can easily categorize snippets
  • Syntax highlighting for enhanced readability
  • In a perfect world, it’s integrated (or can be integrated) with your source code editor to reduce application-switching

Remember to regularly review, improve and update your existing snippets.

3. Use the Right Tools

This should be a no-brainer: Make sure you’re equipped with good tools and that you know how to use them effectively.

If you’re a web designer, you probably need Photoshop and Illustrator. If you’re a developer, you need a good set of web development apps to help you get the job done.

Of course, toolsets differ between professions and between people. Not everyone will need the Coda web development suite to build their websites — some just need a terminal.

What matters is that your tools should help you get the job done as efficiently as possible.

4. Collect and Organize Free Design Resources

There are many sites on the Web that give away free design resources. Add these sites to your RSS reader, and every time they post a freebie you can potentially use, grab it.

I’ve been doing this for months and now have a massive library of icons, PSD templates, vector illustrations, Creative Commons-licensed images and artwork, buttons, GUI elements, Photoshop brushes, @font-face kits, and all kinds of miscellaneous design elements.

Having such a huge library makes it incredibly easy to put together mockups in Photoshop, or get a quick sketch ready to show a client.

My icon and button library has been integral to putting finishing touches on websites I’ve nearly finished. This collection of little details is super handy — instantly sprucing up a design.

Here are some links to check out:

5. 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.

6. 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.

7. 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.

8. Don’t Over-Plan

There was a time in my life when I used to schedule out my day. I planned out everything in little 30- or 60-minute increments, stacking them up neatly in iCal.

I thought I was being productive, but I was only really setting myself up for failure.

You shouldn’t make your day any more rigid than it has to be — your mind needs to have some flexibility, some time to breathe and fully think.

Make sure to keep your schedule open to changes. I found that by over-planning my day, I only procrastinated more, and despaired watching those neat little chunks of productivity pass by.

9. 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

Knowing certain things about your project can lead you in the right direction without requiring you to take shots in the dark about what your customer wants.

10. 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.

Wrapping Up

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.

If you have any productivity tips, share them in the comments below!

Related Content

About the Author

Delwin Campbell is a web developer (among other things) at No Enemies, based in Austin, Texas. He is a crazy person with too many hobbies; right now he’s learning Swedish! Check out his personal site.

32 Comments

Jitendra Vyas

September 22nd, 2011

Link for Snippet and Snipplr is same

Vincent

September 22nd, 2011

I really like this article. Thanks for sharing

Nathan Leigh Davis

September 22nd, 2011

Great productivity tips. Cannot swear by your second point enough. I use TextMate partly due to the way in which it allows you to create custom bundles. Awesome time saver.

This functionality is great for individuals, but invaluable for teams as well. A library of snippets allows new staff to get up to speed quickly and keeps code consistent across large projects.

Great read! Cheers.

Paul Adam Davis

September 22nd, 2011

Shameless plug, but if you want a simple way or storing code privately, maybe share with your team, I built Kodery.com.

Also, thanks for the tips & links here, always good to re-think the work-flow.

Randy Caruso

September 22nd, 2011

Thanks for putting a spotlight on snippets and some curation methods, I’ve been handling it too roughly. One of your screenshots shows a very smooth interface – but what is it? (It’s the second screen shot in that section – mostly black)

SL

September 22nd, 2011

I’ve started using a Google Doc as my snippit tool. The table of contents acts as a quick “jump-to” or overview and yet’s it’s private, owned by me, and accessible from anywhere.

Also, when looking at the “goal of the website” I look at persona’s (the people/demographic that will be using the website) and 10 sites the client loves and 10 they hate. By looking at other sites they love and hate they’re more likely to be happy with the outcome rather than requesting changes.

Just my $0.02,

Niraj

September 22nd, 2011

Nicely written. Among all ways listed above, most challenging for me is to correctly organize my resource library. It becomes such a huge task at a times if you keep adding links ignoring in which folder they are going.

elron8

September 22nd, 2011

thanks doctor!

Anna

September 22nd, 2011

Thanks Delwin for sharing thoughts. Please add to your list #11 “Use a simple task-planning tool” for mange tasks and development sprints in milestones. I recommend the Swedish (!) project tool http://www.projify.com with support for free plans in small teams.

Abhimanyu Rana

September 22nd, 2011

I think this is one of the most significant info for me. And i’m glad reading your article.

Justin

September 22nd, 2011

Great tips delwin, especially no. 9, it’s so easy to jump straight into a project head first but spending time planning things out will deffinately save time later on!

Jacob Gube

September 22nd, 2011

Just wanted to say real quickly that you folks are awesome! Thanks for the additional tips.

Please keep the tips coming!

@Paul Adam Davis: No worries, it’s a relevant and useful link.

@SL: Very interesting. That’s one application of Google Docs I haven’t heard of before. It’s perfect since it’s browser-based and has the table of contents. To piggy-back off your tip, Evernote would also be a great candidate for doing something similar to what you’ve set up.

The personas and 10 sites they love/hate is a good tip as well. In addition to helping you with the design brief, it’s also a more casual, practical and client-friendly approach to conducting a competitor analysis and market research. I actually used to do that too way back in the day, when I did freelance design gigs, just to get an idea of what the client is looking for in terms of look-and-feel.

WD Automaton

September 22nd, 2011

Ahh how many times has number 10 got in the way? How about a million thanks for the reminder to stay on track with your our design work. Got to stay on track. :)

WD Automaton

September 22nd, 2011

… I meant our design work and also put a period behind million. Geez i messed that one up.

Claudio

September 23rd, 2011

Thanks for the tips Delwin.
It’s always about a smart management of your time and resources and it can become pretty tricky when you have tons of stuff to check and organize.

Enstine Muki

September 23rd, 2011

Interesting article there. Webmasters these days have to work hard to build compelling designs

vikram

September 23rd, 2011

This has been good strategic article. For me the frameworks are awesome thing, saves lot of time. And developing good practice will eventually reduce time wastage. Thanks for the post.

Amr

September 23rd, 2011

Really useful article. Thanks

Snarky

September 23rd, 2011

One of the first things I ever did as a VB contractor (VB4) was get my company to buy me software that came with a pile of code snippets that I could add code snippets of my own to over time. That was almost 14 years ago. Some rules are timeless.

Pixelbox Design

September 23rd, 2011

Good stuff, excellent, many thanks.

Mark Simchock

September 23rd, 2011

Very helpful, thanks Delwin.

While I’m not a developer’s developer I would like to share a couple of thoughts.

0) Shouldn’t you have started numbering from zero? ;)

9.5) Anticipate where flexibility might be needed, or worst case ask for clarification. For example (that is quick but admittedly probably lacking a bit), deciding to hardcode variable over using an array.

Yes, the user might have said, “We only have one of those,” but that doesn’t mean it’s always going to be that way. Nor do they understand what you need to know to do your job to your full potential. Architecting for growing and/or evolving business needs – change is constant is the way of the world, yes? – doesn’t have to mean complicated if your think before you leap.

Daquan Wright

September 23rd, 2011

Good stuff!

I can agree with frameworks. I actually stick with Notepad++/E – TextEditor/Aptana Studio 3.0 for web development, but I have adopted MooTools as my JS framework of choice.

I always learn the raw technology before taking on a framework, just because I need the understanding. Although it currently is my only framework, I plan on learning CodeIgnitor something in the future.

“You shouldn’t make your day any more rigid than it has to be — your mind needs to have some flexibility, some time to breathe and fully think.” – I agree here so much. Before I was trying to list everything I’d do in blocks of every 3 hours or so. Never worked.

Now I just have a simple sticky note, listing things like computer usage/sleep/freetime+eating+bathing, lol. I know that within each block, I’m supposed to perform something specific: such as eating (eat pizza) or computer usage (work on HTML5 for the base of a web project). I just prefer simplicity.

youyouk

September 24th, 2011

Just a perfect post. Thanks

Pitch

September 24th, 2011

Thanks for writing this article Delwin. It’s just what I needed!

coderbay

September 24th, 2011

good article. nice information and nice presentation.

Reyna

September 24th, 2011

I agree with you whole heartily. One of my co-workers wrote a similar article recently.
http://www.back40design.com/news/m.blog/22/5-tips-for-a-better-workflow

Ritcher

September 25th, 2011

Awesome! Thanks Delwin.

Swamykant

September 26th, 2011

An excellent post. Thanks

AceeBaBa

September 26th, 2011

Nice article, it will give a good effect at my development flow.

David

October 16th, 2011

Great post. I find using snipply and texter quite helpful and speeds up my developments.

John

October 20th, 2011

This is a great thorough look at what web designers and developers should be doing to improve their skills. One of the frameworks I’ve been impressed with is Django, it’s definitely worth checking out. And while you are at it, take a look at Intervals for managing workflow.

Thanks again for the great post!

Airtonix

August 28th, 2012

Thunderbird, tomboy, django, lesscss/scss, bootstrap/foundation, gnome-terminal, chrome, virtualbox, Gimp, inkscape & sublime text.

These are the tools I use.

Leave a Comment

Subscribe to the comments on this article.

Mobify empowers marketers and developers to create amazing mobile web experiences.

Mobify