Essential Open Source Tools for Web Developers

by Ostatic Staff - Jul. 06, 2012

If you are a web developer or are aiming to become one, you're probably very aware of many of the tools from the open standards and open source arenas that can make your work easier. Still, these are spreading out at a fast clip and there are some applications and tools that are rarely discussed. Here at OStatic, we try to regularly update our collections focused on them. In this post, you'll find numerous free resources for web development that range from complete online courses available for free to unsung applications.

Most web development environments cater especially to developers who favor certain languages and environments. Kompozer, seen at left, is a huge favorite with developers who are into CSS (cascading style sheets). Kompozer's rendering engine uses Gecko, the same layout engine in Mozilla's Firefox. It stands out for its very easy-to-use CSS editor, and strong WYSIWYG features. You also don't have to be very experienced with HTML or other web development langauges to use Kompozer. Windows, Mac and Linux users can get going with it.

Open source developers and proprietary developers alike can benefit from Opera Web Standards Curriculum and W3 Schools. Both sites are extremely rich in resources for building best-of-breed online applications.

Opera Web Standards Curriculum was produced by the folks behind the Opera browser in association with the Yahoo! Developer Network. It's designed as a complete course to teach standards-based web development, including HTML, CSS, web design, and JavaScript. It's a work in progress consisting of many articles. The articles are very in-depth, and cover esoteric topics and more basic topics such as HTML5. Check out this detailed lesson on working with HTML5 video.

W3Schools has a very exhaustive set of free, hands-on tutorials on both mainstream and esoteric web development topics. You can brush up on CSS, publishing your experiments to actual pages, or walk through examples of how to use everything from AJAX to PHP. Take a gander down the left rail of the home page for how complete the lesson coverage is.

If you work with graphics and images online, or want to become good at doing so, investigate GIMP, one of the best open source graphics applications there is. We've done a number of posts on free tutorials and online guides to the applications that will get you going quickly. Here, you can find a free online book about GIMP, and we discussed some other useful, free graphics and image editing applications here.

Piwik, at left, is open source web analytics software, and I've written once before about it--highly recommended. When it comes to doing web analytics, it's beneficial to get as many views of your data as possible, so you can use Piwik in conjunction with a tool like Google Analytics or on its own.

Piwik's features are built inside plug-ins, and a community of developers contributes interesting plug-ins. It also has a very customizable interface where you can drag and drop the types of widgets you would like to keep an eye on regarding site metrics.

Quanta Plus is a very rich, open source web development environment, especially popular with those who concentrate on PHP for building sites and applications. It's based on KDE, so it appeals to those in the Linux community most. It does a good job of letting you work with multiple pages at once, and has very complete PHP debugging.

Notepad++ has been a very popular open source code editor and text editor for a long time. Licensed under the GPL and available for Windows, many people use it as a replacement for Windows Notepad, and as an editor to write blog posts in, where it won't introduce the same formatting problems that some word processors do (which can throw off a blog engine).

Of course, one of the most beloved tools for web developers is the Firebug extension for Firefox. If you're deep into development for the web, you probably already use it. In this post, Reuven points out that: "[With Firebug], experimenting with CSS changes no longer requires that you reload a page dozens of times; using Firebug, you can dynamically edit an HTML element's styling, looking at the effects as you change each variable value. Similarly, Firebug's JavaScript console makes it easy to work with JavaScript interactively."

And Firebug is hardly the only useful development tool for use in the Firefox browser.  The Web Developer Extension for Firefox can put an array of great resources at your fingertips, and you can find a good discussion of it here.