Liveweave now supports fullscreen code editing for all the panels, i.e. HTML, CSS, and JavaScript. The best part? It is just a single-click away! So, now in addition to all the flexibility of panel resizing, you now have the ability to write your code in fullscreen, just like your old school desktop editor!
We originally had the option to switch between themes using a toggle, but had to take it down when several users complained about scroll bars acting weirdly. In addition to that, there were several other bugs associated with it. Now, we have finally brought back the “Night Vision” toggle, so that users can enjoy both the worlds!
In addition to that, Liveweave can now save the state of the theme and the layouts. What that means is that, if you save a weave with a specific layout and your theme of choice, say the ‘light theme’, the next time you access the weave, you will see the same layout and theme with which you originally saved it.
We have recently introduced a new horizontal ruler! The purpose for the ruler is mostly to help you create and test responsive designs, although it can also be used for various other features as well. You can easily change the size of the preview area and see how your weave renders accordingly.
The best part? The ruler size supports up to a 4K resolution (i.e. 3840 px horizontally)! Yep, that’s right. You can make use of the ruler even if you are building something for a 4k monitor.
We now have real-time JavaScript validation! What this means is that you can just keep on writing your JavaScript code and Liveweave will auto-matically prompt you the errors and warnings as you type. To get the details of each error (or warning), just hover your mouse over the icons.
So, no more worries that you would write invalid JavaScript code. We got your back!
We have added 3 more layouts. Basically, you can now choose from 4 different layouts for the panels. The default layout allows you to work with HTML5 and CSS3 panels side-by-side and the JavaScript/Preview panels at the bottom. The location of the layout list is at the bottom left of the screen as shown above.
Here’s the list of layouts you can choose from:
Layout 1
Layout 2 (Default)
Layout 3
Layout 4
The best part…the layouts are persistent in nature! What that means is that if you save a weave in a particular layout, the next time you load it, it will retain the same layout. However, the sizes of individual panels are not saved.
We hope you will like this!
We have significantly improved the dashboard. And by that we mean, now you can actually “see” what your weaves look like, and not a list of six letter keys in a table. Basically it looks more like a proper gallery/showcase. Currently, we have it setup to show 4 weaves at a time. Clicking each, would open the weave in “editor” mode. The gallery includes information like when was the weave created and how many page views it has received.
Liveweave now supports full-screen “demo” mode. This mode is completely unobtrusive, so there will not be any Liveweave logos, menus, text etc. So if you want to “demo” your weave, just add the word “demo” at the end of the weave URL. For example, the source for the above example is available at http://liveweave.com/yPuTQa and to see it in full screen just go to http://liveweave.com/yPuTQa/demo. That’s it!
To make development a tad easier, we have recently started supporting drag-and-drop. 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 is connected to the web.
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.
We have a list of new JavaScript libraries and now they are in alphabetical order. A library should be now easier to find. A few more additions and we have to consider putting a search bar specifically for this purpose. Of course, jQuery is without a doubt still the most popular library out there, so we have a rather large hard-to-miss button to make it easier to add.
We will continue to add more JavaScript libraries, so keep an eye on this menu time to time.
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!