Liveweave docs, resources, updates, tutorials & more

We now support Auto-save in browser

auto-save

We now support auto-save in browser. What this means is that, every 5 secs, Liveweave will save a copy of the current weave you are working on (and settings like theme and panel layout), in your browser’s local storage. So, the next time you visit Liveweave again, you will automatically come back to exactly where you left off the previous day. Great, right?

What this also means is that if you accidentally close the browser or if your computer suddenly “hangs up“, there is a high chance your work is not lost! However, if you want to store and access the same weave from a different computer or a different browser, you will have to save it to the cloud or download the weave.

Note: You can only have one browser session active in order to use this feature. If you have multiple sessions of Liveweave running at the same time, the application will save the content of the last browser session you close.

Feel feel to email us if you have any questions.

 

Introducing the Liveweave CSS3 Code Generator

CSS3_code_generator

Liveweave now feature a CSS3 Code Generator! While CSS3 has been around a while, it is still hard to remember all the CSS3 tags.  So after much thought, we decided to introduce a CSS3 Generator to make a designer’s/developer’s life easier. You can now experiment with CSS3 gradients, text shadows, box shadows, transforms, rotate, skews, border radius and a whole lot more!

Think the CSS3 Code Generator as a lab. You can change several CSS3 parameters in real-time using just sliders, drop-downs and buttons. Once you are done, just click the “copy” icon to the right to copy your code. Click the “Back to Editor” (on top-right) to go back to the editor mode and paste the CSS code into your class or id. That’s it!

To use this feature, go to:

1. Tools menu > Generate CSS code using CSS3 Code Generator

OR

2. Click the gear icon as show below.

CSS3 gen icon

We have introduced a real-time CSS validator (CSS lint)!

css-lint

Liveweave already has an awesome real-time JavaScript validation (lint) service, for a long time. This is very useful if you want to write a 100% valid JavaScript code. And now to make things even better, we have introduced CSS lint as well.

So here’s your chance to write (and share) a fully validated CSS code. And again, everything is in real-time, so no need to click a Validate button. The warnings and errors will show up in the code/panel gutter while you write your CSS.

We now support collaborative real-time programming and screen sharing

team up 1

We have recently introduced a new feature, Team Up, a collaborative real-time programming and editing service! With the help of Mozilla’s TogetherJS integration, you can now use Liveweave to remotely teach, share, review and help other programmers and designers…completely in real-time!

Not only can you do screen sharing, you can chat with your fellow team mates as well. Team Up currently supports Chrome, Firefox, Safari and Opera, but not IE.

If you have questions about this new feature, please send your emails to support@liveweave.com or use our feedback form.

Note: The collaboration feature does not work for the JavaScript panel. This is a known bug, and unfortunately we do not currently have a solution for it.

team up 2

We now support keyboard shortcuts

shortcut

Update (06/21/2014): We have temporarily disabled the “Save” shortcut feature because of some server-side issues. In the meantime, please click the “Save” button in order to save your weaves.

We have finally introduced keyboard shortcuts, a feature that has been long time coming!

For example, you can now save your weaves just by pressing Command ⌘ + S (in Mac) or Ctrl ^ + S (in PC). Another example: if you have switched off the Live Mode (especially when you are doing extensive JavaScript programming), you can now use Command ⌘ + R (in Mac) or Ctrl  ^ + R (in PC) to run your code/weave manually.

We will continue expanding the keyboard shortcuts to make Liveweave feel more like a traditional desktop-based source code editor.

Single-click full screen option for all panels!

fullscreen

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 have brought back the Night Vision

night vision toggle

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.

A horizontal ‘ruler’ for responsive design

ruler

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 support multiple layouts

layout

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-example

 

Layout 2 (Default)

layout-example-2

 

Layout 3  

layout-example-3

 

Layout 4  

layout-example-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 improved the dashboard

updated-dashboard

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.

1 of 3
123