There are many web development tools available today to suit a range of needs, from full-fledged website construction, to simply creating and testing a new module or code snippet without jeopardizing a production site.
Based in San Francisco, LiveWeave.com is an HTML5, CSS3 and JavaScript playground and real-time editor for web designers and developers created by Amit Sen who made the tool to allow coders to test, practice and share their skills. In use, LiveWeave offers a resizable quadrant panel-based interface that allows users to adjust their individual HTML5, CSS3 and JavaScript window sizes, according to their needs, easing the way they write code (or “weave” it, as the publisher calls it). An unlimited number of these weaves can be freely stored in the Cloud, allowing users to share their project’s URL across websites including Facebook and Reddit, StackOverflow, Twitter and more, for easy peer review.
LiveWeave allows users to write HTML5, CSS3 and JavaScript and to test their coding visually and in real-time
Weaves are also downloadable as a single HTML file.
According to its publisher, LiveWeave provides two ways to write your code: You can either write everything together (i.e. HTML5 + CSS3 + JS) in the HTML5 panel for a combined view, or separately in their own respective panels — so it works the way you work for maximum flexibility.
LiveWeave allows users to write HTML5, CSS3 and JavaScript and to test their coding visually and in real-time, with an advanced context-sensitive code-hinting feature for core JavaScript and jQuery calls, plus HTML5 and CSS3 tags and attributes, to guide developers in writing the proper syntax for their code and to help users learn JavaScript much faster and easier.
LiveWeave supports a variety of JavaScript libraries including jQuery, jQuery UI, jQuery Mobile and YUI, etc., selectable from the JavaScript menu, or any others, as long as the libraries are included in the website’s HTML <head> tag. Color palette tools and utilities for tidying and reformatting HTML, statistics on how many views your weaves receive, plus a full screen demo mode and intelligent dragand-drop tools round out the current feature set.
“For example, if you have a HTML/CSS or JavaScript file in your computer, you can just drag and drop it in the respective panels (i.e. HTML file into the HTML panel, CSS file into the CSS panel, and so on), and just save it as a weave. You can then continue working on it from anywhere as long as that computer connects to the web,” a LiveWeave rep reports. “Once, you are done you can download the weave anytime later. Of course, you can always use the traditional way of copying the contents of the files and pasting them into the panels, but drag-and-drop is definitely faster.”
LiveWeave is compatible with IE10 or above (although partial support is available to IE9 users), as well as top all newer versions of Chrome, Firefox, Opera and Safari. Partial support is also extended to certain mobile platforms, including iOS (iPad) — although features such as auto-completion seem “very glitchy” in these applications.
Although you may not want to use LiveWeave as your primary development platform, it serves as a quick and easy entry point, learning experience and scratch pad for coders in the cloud.