Personal tips for local development

Here are a few tips for local web development which, for the most part, are applicable for both OS X and Windows users. Simple little steps which can be implemented in order to “automate” the creation of web documents.

Local development requires a development environment

Simplicity is the name of the game. With less time worrying about completing installations by hand – checking libraries, installing multiple packages, etc – I say go for the drag ‘n drop approach.

  • Windows users can setup a full development environment using Apache Friends XAMPP packages for Windows.
  • OS X users see Living-e AG’s MAMP (MySQL, Apache, and PHP) previously mentioned here.

Once you’ve created a suitable development environment, you’ll need a plain text editor like Notepad++ (Windows), e Editor (Windows), Smultron (OS X), or TextMate (OX S).

Meta refresh – Reload page in IE, Firefox, Safari, Opera

TextMate meta refresh

Meta refresh is an HTML meta tag used to specify a time-interval after which a web browser should automatically refresh the current webpage #. By adding the following snippet somewhere within the <head> of your “static” web document(s), any browser which loads the page will refresh at 5 second intervals.

<meta http-equiv="refresh" content="5">

Remember to remove the meta tag prior to uploading your final project to a public server. Alternatively, you could simply rely on the ReloadEvery Firefox extension to refresh your local pages (if you choose to develop in Firefox only).

Make use of shortcuts, snippets, or automated commands

If there’s one tip that everyone should consider implementing – new or old – it’s making use of shortcuts, snippets, bundles, or anything else designed to improve your workflow. Many of todays applications offer a variety of “features” created to enhance and simplify the use of redundant code snippets or commands. Check out some of the following links for pertinent information or resources created to improve productivity.

  • TextMate shortcuts desktop wallpaper – Basic TextMate shortcuts on an appealing desktop wallpaper for easy access using Expose.
  • Repetitive steps are time consuming. Before beginning your next project, peruse the net for add-ons or plugins which may increase productivity.

Pre-contructed “templates” – not the kind you purchase

Redundant tasks such as consistent HTML document structure or stylesheets are time-consuming to create if done by hand time and time again. Saving time during the early steps of your development process by re-using a consistent “master” template which outlines general structure.

You control your work environment, you know your habits, you know the exact steps you follow during development. You may already have created a master template for documents without even knowing. Look back at archived projects and try to identify which aspects are consistent throughout. Naturally, we are all creature of habit. Our habits are consistent and predictable – harness that knowledge and identify which phases of your development process can be used as opportunities to save time. Note: Do not cut corners.

Minimizing redundant steps will increase your productivity

The single most important tip is identifying what steps you repeat which can be streamlined and decreased improving your productivity.

Discuss - 16 Comments

  1. Andre says:

    Nice tips. Another tip; unplug your internet source. Nothing can be more distracting than the internet. :/

  2. Dennis says:

    Good stuff! Thanks….

  3. Taylor says:

    This is helpful, along with the other article you wrote.
    Any suggestions for ColdFusion?

  4. Derek says:

    I’m surprised that the meta refresh trick isn’t working. Have you added it to the head of your documents? What browsers are you using?

  5. Auke says:

    Usefull tips Derek. Although the refresh “trick” won’t work for me i guess. Where is your sidebar.php in you base folder btw? In my experience, I’m almost everytime in need of that one aswell.

  6. Auke says:

    It’s working actually but I meant that it isn’t really my kind of thing to add in my code 😀

    By the way, the links (E-mail this, add to delicious, add comments and digg this) shown in your feed at the bottom of each post, how did you do that? Is it WordPress plugin? I think it’s a really cool extra feature.

  7. Derek says:

    The links at the bottom of posts are called Feedlfares. They’re options that publishes can add to their feeds via

  8. Lamp says:

    Don’t forget about ultraedit!! now with ftp accounts built in… What do you use that has the black background?

  9. Derek says:

    Running TextMate in the background. I’ve heard of UltraEdit. Can’t say that I have ever tried it though.

  10. Auke says:

    The links at the bottom of posts are called Feedlfares. They’re options that publishes can add to their feeds via

    Thanks mate.

  11. The refresh tag is a good idea for offline edit working. Thanks Derek, good tips.

  12. Uence says:

    Thanks so much for the Refresh tip! Typically I would go back and forth between Textmate, Brower and Photoshop. Now I can focus on just Textmate and Photoshop.

    Over my years of development I’m sure that would have saved me 1 month or so of refreshs! Since I work with 3 monitors I already have window shuffling down and now wrist flicks and clicks are down too.

    Derek you genius!

  13. Derek says:

    There is actually a live preview option available from within TextMate. I think the meta refresh is a better idea though. Especially if you do run multiple monitors – you can keep your pages open in Safari, Firefox, and IE while spreading them across multiple monitors to get a broad view of changes.

  14. David says:

    I love EasyEclipse for PHP as my environment of choice:

    It’s available for all major OS!

  15. Saurabh says:

    Hi Derek,

    Know how to get the live preview with Textmate working? Been trying to figure it out for a while now…


  16. Derek says:

    Live Preview in TextMate is accessed from the Window menu option – titled ‘Show Web Preview’. Keyboard shortcut control + option + command + p.