Liveweave now supports context-sensitive code-hinting for core JavaScript and jQuery. What this means is that the next time you write JavaScript, it will be simpler…much more simpler! In addition to hinting all the available JavaScript and jQuery functions, there are JavaScript built-in templates that will help you write code even more faster. For example, if you choose the “for” loop keyword, you will see a list of options as to how you can use it in more than one way.

There is also built-in documentation, which shows up when you select a JavaScript (or jQuery) function or a keyword. The documentation is based on Mozilla Development Network, which is probably one of the best managed resources for learning JavaScript.

Unlike code-hinting for HTML and CSS, it is a much more complex setup for JavaScript (and jQuery). Not only there are hundreds of functions (that too can be used in various ways), a proper code-hinting technology needs to be context sensitive. What this means is that if you add a function (or variable) in your JavaScript code, it will start showing up in the code-hinting menu…in real-time. In short, there are several components involved, not just a list of keywords and functions.

A typical auto-complete/code-hinting menu is show below. You will notice several icons along with the definitions. These icons are mostly similar to the ones used in IDEs like Eclipse and others. For JavaScript keywords like do, for, if etc., you will also see something like “This is a KEYWORD…”.

There’s a lot more to talk about this new and rather powerful feature, and we may be adding more information to this blog post later.

So, please try it…and feel free to let us know what you think about it!

Color Lab

For all the color geeks out there, we have a new Color & Palette Lab. It is simple, very simple. Yet, it has pretty much all the colors (hex codes, e.g. #F5F5F5) you will ever need.

The list consists of:

1. Color List – This table includes all the important color names in HTML, e.g. GreenYellow. (#ADFF2F).

2. Secondary Colors – This large table consist of mixed colors (basically, the typical pastel colors).

3. Primary Colors – This table consists of the web-safe colors.

Note: Most computers today typically support at least 24-bit (16,777,216) colors. So any color you pick, should work in all computers.

Palette Lab

Although the Palette Lab initially seems to be a large white box, it actually consists of 14 small white textboxes. Clicking each of them will open up the Palette Editor. Select the colors you want to create the final palette. There are several buttons/controls in the Palette Editor, so you may want to play with it for a while to get a better understanding.

Try it now!

Do you want to check how your weave looks like in full screen every few moments? Well…we have just the right answer! Located at the lower end section of the Preview panel, there is a new “Full-screen toggle” just for this purpose.

Well, of course you can change the panel sizes, just by clicking the “panel tabs” (twice) or dragging the “panel bars”…but this is just…faster!

We have added several new CSS3 properties, as updated by W3. We have also added several example values to some of these properties, so that you can see what kind of different options are possible. Not only would this make it easier to code, it will be fun to do all kinds of stuff  just by changing some of the preset values!

We have also added some new HTML5 (as updated by W3C) tags as well, along with their new attributes!

Default

Originally, when we developed Liveweave, we never really bothered about changing the “light” theme. However, and quite interestingly it turns out that designers and developers actually prefer a darker theme in their editors!

So now, you have the option to toggle between the default (Monokai theme, based on Textmate) and the original “light” theme, without logging in!

Light theme