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.
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.
Opera's Dragonfly developer tools in action
Videos about Google Chrome's Developer Tools
Firefox developer features added in Firefox 11
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.
Developer tools coming Firefox 15
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.
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.
Mozilla Thimble showing documentation about iframes
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.
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.
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.
Brackets introduction video
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 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.”
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.
Light Table introduction video
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.
Light Table as a domain-specific IDE
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.
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.
To discuss this article visit its forum entry here