The concept of self-replication, or the ability for something to create another version of itself has always been rather alluring. We see it everywhere in the organic world, animals give birth to the same animal, plants to the same plant. So it’s genuinely exciting when we find artificial systems capable of such complexity.

Take something like the RepRap, an open source, open hardware design for a 3D printer that has been carefully constructed such that it can print its own parts, and in a sense give birth to another RepRap printer. It goes even a step ahead by being able to print not only its own parts, but also the parts of the next, improved model of the machine. An excellent model for evolution in machine form. Consider this, once you make or buy a RepRap machine, you are set for life, as you can use your machine to create parts for the next and so on. Such a system deserves special appreciation.

This concept extends to the computer world as well, just look at the number of compilers that themselves are written in the language they are built to compile. When a compiler becomes capable of compiling its own source code, or the source code of its successor, it validates the language, as we know it can sustain itself. For computer software, this is known as self-hosting.

As an increasing number of web development tools are now coming out that are themselves written in web development languages. In fact any project that needs a highly mutable or modifiable UI is a good candidate for being written in web languages.

Just recently there have been a number of interesting projects that bring improve development methods, and are based on web technologies. Here are some of the things we have seen crop up recently.

In-browser tools

Do you know what is the best WYSIWYG tool for web content? You will be surprised to know you already have it installed. In fact you are reading this article on it. Yes! It’s the browser.

What You See is What You Get (WYSIWYG), what gives you a better idea of what you will get than the software on which you will be doing all the “getting”. If the browser then has a good set of development tools, it automatically becomes the best tool for development.

As of now, all major browsers include tools for developers. Chrome’s developer tools give you a good picture of how the page loads, and how that impacts the performance of the browser. It includes profiling and auditing tools that let you know how you can trim the fat and optimize the web application or page. Opera includes Dragonfly, which has a similar feature set.

Do you know what both of them have in common? Both are open source tools for web development, more importantly, they are both written in web technologies such as HTML, CSS, and JavaScript!

Now we come to Firefox, which up till a few versions back included no debugging or development tools at all. Those features were delegated to add-ons such as FireBug that did a great job. Of late though Mozilla has been adding a number of great web development tools to the browser, and now what you have is sorts of suite of web development tools included in Firefox. Two important tools that Firefox has are the Style Editor and the Scratchpad which are for testing CSS and JavaScript respectively.

The style editor allows you to enter CSS code, and see it apply instantly. Not only that, it applies a subtle animation between the original and changed page so you can see exactly the impact of your actions. Similarly the Scratchpad allows you to run arbitrary JavaScript code against the current page. A similar tool for HTML is also in development.

Another interesting feature is a 3D view of web pages that highlights the structure of the page visually. Recently Firefox has also added an experimental Responsive Design View tool that lets you see what the current page would look like on a mobile device.

There is still a disconnect between the tools used to write a bulk of the code and the application that actually runs that code. Which brings us to the next set of interesting browser-based tools to crop up recently.

JSFiddle, Dabblet, Thimble, and X-ray Goggles

If you are web developer you much be familiar with JSFiddle. If you aren’t get familiar because it is an amazing tool for quickly testing code, and sharing code snippets or widgets with others.

JSFiddle is simple in concept, you have a an area to enter HTML code, an area for JavaScript, an area for CSS, and finally an area where you can see the end result. As the name might suggest, its main focus is on JavaScript code, where CSS and HTML are just there for the structure and visuals, so you have something to play against. You simply enter the code you wish to test, press run, an you instantly see the result. After that you can save it to the cloud, share with others, or optimise and clean it by running tools such as JSLint on it.

On the surface this might not look very innovative or interesting. There are dozens of such web applications you might say. Well, that is kind of the point. The fact that such a concept is so popular shows that it is a common way for people to experiment with code. People like being able to iterate quickly and see their changes in real time. Most WYSIWYG applications lack the kind of pixel-perfect feedback you get from browser.

Mozilla recently launched Thimble, which is a similar application but is a lot simpler in concept. It features just one area to enter code, which supports code highlighting, and it has a preview area that is constantly updated. That isn’t all Thimble is though. Thimble seems to be designed for those who are just starting to learn web development, especially children, for whom this is more about play than work. There are dozens of sample projects that you can start with and all of them are well documented and clearly oriented towards teaching people HTML.

It is often said that all you need to learn how to make web pages is a simple text editor such as notepad. This might be true, but one unfortunate side effect of the forgiving nature of web standards and browsers is that you do not get good feedback if you are doing something wrong. Web browsers will often forgive bad or incorrect code, and this can make it difficult for people learn HTML code since they can learn from their mistakes. They will often not know if they have made them because their code with just work.

One of the best features of Thimble then is how it highlights errors in HTML code as soon as you make them. Forgot to close a tag or CSS / JavaScript bracket? Thimble will tell you. It still keeps things simple though by not adding much to the interface; you can keep writing code without much interruption. If you stop on a tag or CSS selector or CSS property for a second or two, it will pop up useful information about it, with a link to the Mozilla Developer Network Wiki for more information. The sample projects Thimble offers serve as tutorials and take advantage of this feature of Thimble in helping people learn HTML concepts.

While something like JSFiddle might be a little daunting for starting developers, Thimble keeps things simple. JSFiddle is brilliant, don’t get us wrong, but it immediately shows you the a complex picture of the web where you need to have HTML, JavaScript and CSS separately. Thimble on the other hand can be seen as web developers starting editor.

Now we come to dabblet. Dabblet is to CSS what JSFiddle is to JavaScript. In that it is a tool that allows you to play with CSS code live in the browser while getting instant feedback of the effect it has. It is focussed only on CSS, with a small area to enter the HTML code on which to apply the CSS. There isn’t any facility to enter JavaScript, however the functionality for dealing with CSS is well developed. It offers features such as small popups when you hover over a colour or gradient declaration in CSS.

Finally we come to X-ray Goggles, another project by Mozilla. This tool allows you to take any page apart just by clicking a bookmarklet. When you activate X-Ray Goggles on any page, it will start to reveal the structure of that page, showing that tags that make up different parts of the page. You can then click on any part of the page to edit it in a popup right there on page.

Adobe Brackets

Brackets is a project recently unveiled by Adobe that tries to take a fresh approach towards web development. This is an open source code editor that is itself written in web standards such as HTML, CSS and JavaScript.

The goal of writing this editor in web technologies is that any web developer using the Brackets IDE for developing applications using this IDE is also fully capable of extending, modifying and adapting the IDE itself.

Bracket maintains a simple IDE with just a file browser on the left, and a code editor on the right. But beneath it all are powerful features that are focussed on the kind of challenges web developers face.

One of the challenges of web development is that the code for every page is usually spread of multiple files. You will have a HTML page that includes a number of CSS and JavaScript files. One single button in your HTML code might be calling a JavaScript function, while being styled by a number of CSS declarations, each bit of this single entity is spread across different files. Even though this JavaScript function, and those CSS declarations might be relevant for only this button they are lost among other irrelevant code — to the button — and can be hard to find.

Brackets takes up this challenge of keeping different kinds of codes separate while still making it easy to look up code in the current context. Say you are editing an HTML file, and want to change the CSS styles associated with the current element, you can press a single hotkey (Ctrl + E) and Brackets will bring in all the CSS code that is relevant to that element. You can then edit the code right there, and the changes you make will be reflected in the original files.

In fact, rather than pop up a floating panel for this, and having it hover over your code and obscure it, Brackets shows this widget inline. Brackets can do the same with JavaScript code. Where your HTML code calls a JavaScript function, you can press a button and have that code appear inline. This technique can also be used for documentation or other tools, and since brackets is open source, it could be expanded even further. For example someone could create the ability to edit images inline.

Another interesting aspect of Brackets is that instead of in inbuilt WYSIWYG component, it uses you browser for running code live. Normally with an editor you would have to save the file, open it in the browser, make changes, save again, open the browser again, and continue repeating till you get the desired result. Brackets makes this much simpler. Just press the lightning button on the Brackets UI, and it will open your page in the browser. This is a live preview, which means that it will automatically update as you make changes to you code! Currently this capability is only supported with Google Chrome, and there too only for HTML, however the aim is to have it supported on all browsers, and with HTML and JavaScript as well.

Brackets is open source and extensible, and in fact it already has a large number of extensions such as extensions for automatically adding CSS prefixes for all browsers, integrating with GitHub Gists, integration with CSSLint, JSHint and W3CValidator and many more. The first thing you see when you open Brackets — the default project that is loaded on first lunch — is in fact Bracket’s own source code.

More information about how Brackets came about, how its developed, the shortcoming and the road ahead is available at their website. Brackets and is source code is available for download at GitHub . Information about how to use Brackets is also available on GitHub.

Since Brackets needs to use some features that are currently not available in browsers (file system access for example), it runs in a small Chrome-based browser shim, which also needs to be downloaded. In fact it even includes the Chrome developer tools so you can debug and inspect Brackets itself.

Light Table

Light Table is a multi-language IDE based on a unique concept but has at least one thing in common with Brackets above. That one things is that “Files are not the best representation of code, just a convenient serialization.”

Just like Brackets enables you to work with CSS or JavaScript code inline while you are editing an HTML document, Light Table allows you to edit bundles of relevant code together without worrying about which piece of code is in which file.

Light Table allow you to see how your code flows, and how data flows through different parts of your application code. Say you are evaluating the full impact of a particular piece of code. Normally you would have to follow the chain of functions that are called by that code, and these could be spread across multiple files. IDEs often simplify looking this up, but Light Table makes this tedious job rather simple.

First of all, Light Table makes it easy to write code on the function level rather than on a file level. The functionality of an application is divided into different functions, and it lets you work on each function individually rather that each file. As you open the code for one function, Light Table can also bring up the code for all the functions called by this code.

As you evaluate the result of one function, Light table will actually show you how the data provided to one function passes through different functions and changes in the process. You can see the intermediate results obtained from different functions called in the process of evaluating the function you are working on.

Light Table takes this function many steps further and allows you to play around with the result of your application. An example showcased is the ability to benchmark code within the editor. It compares two different functions by running both pieces of code, and drawing a graph and table of their running times.

If you are developing an application that manipulates an image, you should actually be able to see the resulting image on the canvas, and see how changes to your code impact it. This is a lot better than obscure debugging data. A similar approach can be taken with an application that outputs HTML code, such as a web framework. Light Table could be made to embed a browser in the canvas that shows the real-time output of your web framework. Imagine the same thing with a game. As you play the game you can see the different numbers flowing through your application, changing the state of the game.

Another focus of Light Table is in making it easy to always access the documentation for any code in your project. It makes it really handy to view and search through documentation, and provides easy ways to access context-sensitive documents.

The developer of Light Table believes that the future of development is in having very specific tools for the project we are developing. IDEs that are optimized and built not only for the particular language bring used, but even the very frameworks we are using.

Light Table itself is open source and in heavy development. It received part of its funding for development via a KickStarter campaign. Currently a stripped down version of the Light Table IDE is available for download and testing. This IDE currently only supports the Clojure programming language.

In conclusion

As browsers are becoming increasingly powerful, complex, and capable they are taking over a larger share of the work we do on computers. Web and software development is just a recent trend. Chances are the first thing you launch when you start your computer is the browser, and it is the last thing you close as you shut down.

Some of these might just seem like small tools for testing and playing around with code, but that is not true, they can be essential components to a web development workflow.

Furthermore you even have fully capable web-based IDEs available now, which can handle projects compiling and even running applications on the cloud. Cloud 9 offers advanced web development capabilities with support for GitHub and BitBucket; Mozilla’s Add-on builder is a powerful versioning-capable IDE for developing Firefox add-ons; Compilr can be used to code and even compile desktop apps on the web; and RhoHub is another online IDE that allows coding Ruby-based mobile apps that use the RhoMobile framework, it can even compile your application for different mobile platforms.

Another example is ideone. This handy web service allows you to run all kinds of code online. You merely enter your code in a text area in the browser, and it compiles / interprets and runs the code while giving you the result right there in the browser. As you can see browsers have gone just web development, and now have utility in nearly any kind of development — if GitHub wasn’t proof enough of this.

Even if the next generation of web developers doesn’t develop web applications using browser-based tools, chances are this is how many people will get in to web development in the first place.