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
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.
- Continually completing projects which deal with templates? Save time by creating a master template from which to build off-of. This is something that I work with when creating WordPress based sites. TextMate users may want to check out the WordPress Theme Bundle.
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.
Nice tips. Another tip; unplug your internet source. Nothing can be more distracting than the internet. :/
Good stuff! Thanks….
This is helpful, along with the other article you wrote.
Any suggestions for ColdFusion?
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?
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.
It’s working actually but I meant that it isn’t really my kind of thing to add in my code
Off-topic:
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.
The links at the bottom of posts are called Feedlfares. They’re options that publishes can add to their feeds via Feedburner.com.
Don’t forget about ultraedit!! now with ftp accounts built in… What do you use that has the black background?
Running TextMate in the background. I’ve heard of UltraEdit. Can’t say that I have ever tried it though.
[quote comment="41674"]The links at the bottom of posts are called Feedlfares. They’re options that publishes can add to their feeds via Feedburner.com.[/quote]
Thanks mate.
The refresh tag is a good idea for offline edit working. Thanks Derek, good tips.
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!
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.
I love EasyEclipse for PHP as my environment of choice:
http://www.easyeclipse.org/site/home/
It’s available for all major OS!
Hi Derek,
Know how to get the live preview with Textmate working? Been trying to figure it out for a while now…
Thanks
Live Preview in TextMate is accessed from the Window menu option – titled ‘Show Web Preview’. Keyboard shortcut control + option + command + p.