Tips and Tricks For Web Development – Some Useful Tools!

We are by-and-large, Mac users but most of these tools are cross platform and available on Windows and Linux with the exception of CSSEdit.

Netbeans. This is a fantastic IDE and when used with Xdebug it provides a superb PHP development environment with line-by-line debugging and all that the competition (Zend Studio) offers but it’s free!. BTW we are fans of Zend Studio just not the price tag!

This brings us onto Xdebug. This is a great php module/addon that when used with Netbeans provided great debugging facilities.

CVSDude. What’s that dude? CVSDude.com! this is a really great SVN hosting solution. We tried running our own SVN we tried other SVN providers and finally started using CVSDude for our Subversion Requirements. Most developers will know how important SVN is for team collaboration and without SVN it’s pretty much impossible to collaborate with a team working on a large project. CVSDude offer a cost effective SVN project hosting solution with many extras such as integrated Trac and Bugzilla. Support is great and it can all be managed via their web-based console.

SyncroSVNClient So this brings us onto Subversion clients, there’s allot out there but our favorite is SyncroSVNClient, easy to use, cost effective and reliable.

Safari and Web Inspector . We have experience of Firefox and Firebug and these are excellent tools but if you are a JS developer and have a Mac take a look at Safari’s JS debugger. On our Macs we found it took much less memory resources than Firebug and offers syntax highlighting in the JS code than makes it easier to ready and instantly see bugs in the code. While Firefox and Firebug do a great job Safari and Web Inspector do a top notch job at JS debugging. To enable the Safari Develop menu and Web Inspector, just close Safari and type (or copy/paste) the following command into Terminal.app (/Applications/Utilities): defaults write com.apple.Safari WebKitDeveloperExtras -bool true.

CSSEdit . Unfortunately only available on the Mac CSSEdit is a top notch CSS tool. Firebug for Firefox and Safari Web Inspector do a great job of CSS debugging class inspection and style over-riding so they are great for finding a CSS issue. However a tool we have found priceless on many occasions is CSSEdit by MacRabbit. This CSS editor allows you to browse any styles and override these much the same as FB and Web Inspector but with much more ease. The controls and interface are easy to use. New style attributes can be easily defined by using the GUI without the need to remember the syntax or have to go off hunting for a sample on Google. More information can be found here: http://macrabbit.com/cssedit/.

We hope this information helps!

There are many development tools out there and it’s never a case of one tool does all but our collection of tools certainly seem to be pretty definitive for building a large web-based application.

Creating a Website Outline For Web Development

Creating a website outline can be a very simple and quick pre-production step that a developer, designer or any type of person can take. An outline can be in all different types of formats. Bullet points, small paragraphs, some even use their sitemaps. It really matters on the type of person and what their work flow. Having a website content outline gives you can idea of where your website is heading after the homepage.

How to Start

There really isn’t a how to outline a website, you can be as creative as you want. If you’ve done your brainstorming you know what niche or idea you want to portray. And if you’ve thought of a site map in your storyboarding process then you have even more information. You have your main category, sub categories and a page structure for you site.

Your Structure Can Be Anything

Most website content outlines start with your main category at the top of the list. Then follow down into the different sub categories and pages from there. Usually you have a bullet point structure for the outline, with indents for the different categories, subcategories and pages. Your website design outline layout can be anyway you want. Just focus on what works for you and what you will understand.

Website Outline Example

  • HomePage
    • Category 1
      • Sub Category 1
        • Page 1
        • Page 2
        • Page 3
      • Sub Category 2
        • Page 1
        • Page 2
        • Page 3
      • Sub Category 3
        • Page 1
        • Page 2
        • Page 3
    • Category 2
      • Page 1
      • Page 2
      • Page 3
    • Category 3
      • Sub Category 1
        • Page 1
        • Page 2
        • Page 3
      • Sub Category 2
        • Page 1
        • Page 2
        • Page 3
    • Site Map
    • Contact Page

Used to Help You Keep Track

There isn’t a set way to do it or a standard way to create an outline. The purpose of a website outline is to keep track as you build your different pages for your website. It also can help you visually see how your categories and subcategories are set up. Maybe you’ll see something that won’t work. Or you find yourself with have extra categories or you could add more categories. Either way it’s a good exercise to do before jumping into development.

Economize Your Web Development Effort

If you’ve locked yourself away in a dark room, subsisting on coffee and pizza while you develop the website that’s going to allow your business or idea to revolutionize the world, then stop right now, open the curtains, take a break and read this.

First off, it’s likely that whatever your trying to design or create has already been done in one form or another – even if your application is completely unique, the vast majority of your website will still have attributes that are common to other websites. For example, it may still need to manage users, have an about us page and so on.

Before you write a single line of code, it’s far more valuable to research what can be done with the minimum amount of cost. When I say cost, I actually mean any combination of time, effort, or monetary cost – in other words, the actual cost to you as a person.

What you’ll find is that it’s far more efficient to:

  • start with a well-tested, reliable platform such as a prebuilt website (based on Drupal) to cater for 80% – 100% of what you need
  • research whether any additional functionality you require is already available and can be easily added (remember that prebuilt sites are modular and can easily be extended in this way)
  • lock yourself in a dark room and write the remaining code (or pay someone to do it for you)

Instead of slaving away re-inventing the wheel, you are able to focus specifically on anything that is truly unique, safe in the knowledge that the rest of your prebuilt website is going to do a bang-up job.

Ta-dah…