DesignBombs

10 Best Open Source Tools for Web Developers

By Jeff

Web developers have a fond love for open source tools not only because these tools are generally free of cost, but they can be modified in any way the developer sees fit. That is actually where the free in free/open source software comes from.

While .NET and other paid technologies and tools do have their place on the Web, it really is open source tools and applications that power it. There are thousands of great open source applications and picking the best among them is really hard since so many people have their own personal favorites. The list prepared for you represents 10 open source tools almost any Web developer can use every day:

1. KompoZer

All the fans of Dreamweaver might consider KompoZer the poor man’s choice but actually this isn’t so. KompoZer, the former Nvu, is a WISYWIG HTML editor that, unlike Dreamweaver, doesn’t require an ultra powerful PC just to open a file. KompoZer is a light-weight application but it is a good choice even for advanced programming tasks.

2. Eclipse

Java developers do have a lot of IDEs to choose from. Many of them choose Eclipse because it is convenient to work with. Additionally, it has a PHP plug-in so if you have occasional PHP programming tasks, you can still work in Eclipse.

3. Komodo Edit

Komodo Edit is an editor for Perl, Python, Tcl, PHP, Ruby, Javascript, etc. It is the little brother of their paid Komodo IDE, but even this kind of limited edition has all the perks you will need in your daily work.

4. Apache

Apache is the Web server that no Web developer can go without. Apache is fast and reliable but mastering it can be a bit hard, especially for a beginner.

5. XAMPP

If you want to write Web applications, a Web server is only the foundation. You need other tools, such as the relational MySQL database and the PHP language framework. Installing and configuring them one by one is not rocket science but it is much easier when you get XAMPP – a bundle with Apache, PHP, and MySQL. XAMPP is very easy to install.

6. PostgreSQL

MySQL is a good choice for a relational DB but if you have some reasons not to use it, you could consider an alternative, such as PostgreSQL.

7. phpMyAdmin

phpMyAdmin is another open source application many Web developers can’t live without. It is a GUI  used to administer MySQL databases and it makes the entire  process much easier.

8. Firefox Web Developer Toolbar

Firebug is cute, but if you want something really big and powerful then you should try the Firefox web developer toolbar. It has even more functions than the Firebug plug-in and with it you can literally dissect any Web page to see what’s inside its code.

And for you Chrome addicts out there, there is a version available for you as well.

9. OpenSTA

Once you finish coding your application you are not done yet. You need to test it. While there are tons of tests you can (and should) do, one of the tests you shouldn’t skip under any circumstances is load testing. With the help of OpenSTA you can perform the necessary tests to make sure that your application doesn’t misbehave under stress.

10. Browsershots.org

Unlike the other tools and applications on the list, this one isn’t an application/tool but rather a free service. However, since it is a great helper, I have included it in the list. Browsershots.org allows to you see how your site is viewed in any possible browser. The list of browsers includes almost any browser you can imagine and this saves you the hassle to manually test your site for browser compatibility.

Of course, if I left your favorite tool off this list please share it with our readers in the comment section below!

By Jeff
Jeff is a freelance writer and the editor of Developer Drive. He writes on web development topics with a focus on web application security. In his spare time he coaches youth football and works as a technology coordinator for the Palm Beach County school district. More articles by Jeff
DesignBombs

How to build your own theme for Grav CMS

By Angie Vella
Grav is an open source flat-file CMS platform, built by the RocketTheme Team. While there are plenty of great CMS platforms available, they are all mostly database-driven, which can be overkill for smaller websites. Instead of a database, Grav uses folders and a basic file structure, it is focused on speed, simplicity, and flexibility. After reading all of the documentation and spending some time trying Grav out, I’m definitely sold and will be using the platform. I hope you will too. What We’ll...
DesignBombs

2 Ways to Create the Holy Grail Layout with Flexbox

By DeveloperDrive Staff
Before the flexbox layout module was introduced, it had been a challenge to create the holy grail layout. We had to use all kinds of tweaks to achieve this kind of layout loved both by marketers and website owners, as it allows us to use two sidebars at the same time — one on the left and one on the right side. Thanks to flexbox, now we can build it in just a few lines of code. So, in this tutorial, we will look into how to create the holy grail layout with flexbox — in two different ways. First, we will use one huge...
DesignBombs

How to Create a JavaScript Chart with Chart.js

By DeveloperDrive Staff
If you have an information-rich website or application, you might want to visualize your data so that users can better make sense of it. Although tables can be quite useful in certain cases such as pricing and feature comparison tables, other kind of information is easier to process with the help of some kind of data visualization. JavaScript libraries such as Chart.js let you generate different types of HTML5 charts such as line, bar, pie, doughnut, and area charts. Chart.js is a versatile library...
DesignBombs

How to Create a Collapsing Header Effect with Pure CSS

By DeveloperDrive Staff
Collapsing headers are an excellent solution to show important information to users, such as special offers and key notifications. Many developers rely on JavaScript when they create such effects, however, it's perfectly possible to create a simpler collapsing header effect with pure CSS, too. Collapsing headers work similar to parallax effects. The background of the collapsing header stays fixed so that the content below it can flow on top of it when the user scrolls down the page. In this tutorial,...
CSS

How to Create a Responsive Image Gallery with Flexbox

By DeveloperDrive Staff
Flexbox is a CSS layout module that makes the creation of fully flexible user interfaces possible. It offers an easy-to-use alternative to floats and a couple of jQuery plugins such as image gallery libraries as well. Flexbox is an ideal choice for several typical CSS tasks and fits especially well with one-dimensional layouts. In this article, we will look into how to use flexbox to create a responsive image gallery that looks well at every viewport size. 1. Create the HTML ... First, let's create the...
CSS

A Step-by-Step Guide to Dark Mode in CSS

By DeveloperDrive Staff
Enabling dark mode in CSS allows website visitors to switch to an eye-friendly and resource-saving design whenever they want. There are a couple of UX patterns you can use to add a dark theme to your site. In this tutorial, we will show you how to add a simple jQuery toggle to the top of the page so that users can easily switch dark mode on and off. Our demo will be responsive as well, so it will look good on all device sizes, from smartphones to desktops to large screens. Here is how the light mode will finally look...
DesignBombs

25 must read HTML, CSS and jQuery books

By DeveloperDrive Staff
Everyone knows that in order to create the best websites you need to be up-to-date with the latest trends and developments. We asked experts and long timer designers and developers to share with us their favorite books, and the result is a selection of the very best books that everyone should read. Our list includes 25 books that all developers must read if they want to create great web sites. We cover everything from HTML to CSS, JavaScript and jQuery books. 1. Introducing HTML5 ...    ...
DesignBombs

How to Password Protect Content on Your WordPress Site

By Rafay Ansari
For a popular content management system like WordPress, security is of paramount importance. Millions of people use WordPress to share information with people all over the world. And since WordPress makes this so easy and gives you complete control over your content, there might be cases where you’d like to share your content with a select few people. Perhaps you want to share a wedding photography album with your guests or share selected articles with only your subscribers. Whether you need to...
Home CSS Deals DesignBombs HTML HTML5 JavaScript jQuery Miscellaneous Mobile MySQL News PHP Resources Security Snippet Tools Tutorial Web Development Web Services WordPress