The web-developer today is increasingly faced with so many open source tools to choose from in producing a final piece of software that it can almost seem daunting. What we aim to do here is to simplify the process by describing 5 key (and free!) open-source sites that every developer should include in their toolkit. Think of these 5 resources as part and parcel of the basic development cycle for designing and implementing a new website or application. The bottom line is that for every project you should plan to:

• wireframe it
• develop it
• track it
• debug it
• upload it

Let’s describe these elements in further detail . . .

1. Wireframing or prototyping a project

A wireframe is a screen blueprint or schematic of a website that provides a layout of the planned website or app so that the developer can construct the site most effectively and efficiently. Fortunately, there are plenty of online resources for developing wireframes. One important program to consider is MockFlow.

MockFlow provides an entire wireframing suite of online/offline collaboration tools that provides the creative developer with a first-rate set of tools to build prototypes in no time. You can organize your mockup with actual sitemaps and define links in the wireframe in order to present your co-designers and clients with a clickable prototype.

2. Developing & testing the code

The LAMP acronym is ubiquitous and closely associated with the most important open-source tools for supporting a development environment, namely Linux, Apache, MySQL and one of PHP, Perl or Python.  For those who prefer to stick with development in a Windows environment, WampServer provides a great alternative. WampServer is quite simply a Windows web development environment. It gives you all the power of a LAMP environment by allowing you to create web applications with Apache2, PHP and a MySQL database. The download and setup of WampServer is quick and straightforward, and one can easily be writing code within 10 minutes. PhpMyAdmin is also included in the stack and allows you to easily manage your databases.

3. Tracking your code

Working on a team development project requires the ability to efficiently upload, share, and track the latest revisions of your code. This process is taken care of seamlessly through GitHub, the world’s most popular open source code repository site.

GitHub offers a web-based hosting service for software development projects that uses the Git revision control system. The site offers both paid plans for private repositories and free accounts for open source projects.

In a nutshell, the GitHub site combines the ability to upload the latest versions of code for access to members of a project team, along with displaying employ feeds, followers, and the network graph to showcase how developers work on their versions of a code repository.

4. Debugging your site

Once a website has been developed, the next step involves a process of testing and debugging the traffic to your site. One of the most popular resources for this is Fiddler, an HTTP debugging proxy server application that logs all HTTP(S) traffic between your computer and the Internet. This package can be used for…

• Debugging and profiling traffic from any application.
• Troubleshooting and tracing a network.
• Performance testing Web applications.
• Logging all HTTP(S) traffic between a computer and the Internet.

5. Upload your code

Finally, after many long hours of prototyping, developing, debugging, and retesting, your project code has reached the milestone where it’s ready to be uploaded to your production site. One of the most accessible and easiest tools to use for this process is the free and open source FTP software package called FileZilla. The download process is quick and setting up a new account in the Site Manager is painless as long as one has the webhost login credentials available.

Once you’re logged into the FTP client, simply go to the code repository on your local computer and upload these files and directories to the public_html folder on your website.

Your project is now viewable and accessible to the rest of the world!

As we’ve reviewed, whenever you wish to build and scale a software project there are 5 key steps that are central to the process; they are:

• wireframing
• development
• version tracking & sharing
• debugging
• uploading

MockFlow, WampServer, GitHub, Fiddler, and FileZilla are 5 key (and free!) open-source sites that web developers should have in their toolkit in order to plan, develop, test, debug, and deploy software applications in the most effective and efficient manner possible.