HTML5, CSS3 & JavaScript Playground

We now support unlimited “Private” weaves for registered users!

In tile mode, the “Private” toggle button appears below the “weaves”

Over the last few months, we have received several requests to support “Private” weaves. It is basically a feature that allows registered users to keep their weaves completely private!

All weaves by default are “public” and can be viewed by anyone if you share the weave id with them. While they will never be able to “edit” (or “delete”) your weave, they could still see it (considering they know the weave id, e.g. http://liveweave.com/abcxyz).

To change a “public” weave to “private”, simply login to your dashboard and click the toggle button that says “Private”. That’s it!

The best part…Liveweave.com supports unlimited “privates” weaves (or code) for all registered users!

In list mode, the “Private” toggle appears on every row beside the action icons

A new way of saving weaves

Until recently every time the “Save” button was clicked, Liveweave created a new “shareable” URL with a unique weave ID. The reason we originally did this was to ensure that no change or edits get over-written and your original weave/code stays safe.

However, over recent years we realized that doing this opened up a huge security hole, allowing spammers to take advantage of this and spam their content freely. In fact, we had to recently remove well over 450,000 spam weaves collected over the last few years!

Because of this, we have recently made a major change in how the “Save” feature works in Liveweave.

Users with accounts

Going forward if you have saved a weave while staying logged in, you will be able to make an infinite number of edits on the same weave ID! So at the end of the day, all your changes will be made to the same weave, as opposed to what we had before…new weave ID created every time you clicked that “Save” button.

Having said that, only you will be able to make edits to your weaves and no one else. You will still be able to share the weave URL with others, but they will not be able to make any changes. Of course, you can Delete or Rename your weaves as usual as well.

Advantages of registered users with accounts

  1. Keep an eye on all your weaves in a dashboard
  2. Rename or Delete any of your weaves
  3. See how many page views you received on your weaves – in case you decide to share it with your friends and it goes viral in Twitter or Reddit 🙂
  4. Make infinite edits to all your existing weaves.
  5. Keep your weave forever! (unless it is super-large in size or violates our terms & policy)

Anonymous users without accounts

We understand that some folks would like to use Liveweave anonymously without creating an account. And you can actually still do that! But, because of severe spamming in recent years, we will be closely watching these weaves (saved anonymously). If these weaves are never viewed (i.e. if they don’t have any page views) in the last few months (around 180 days), we may be deleting them! So the best option is still to either create an account or Download the weave locally.

You can make any number of edits to the saved weave as long as you are in the same session. The moment you close the browser tab (or session), you will no longer be able to make any further edits to the same weave.

A huge disadvantage of saving weaves anonymously is that unless you take a note of your saved weave ID, you will lose it forever! This means if you accidentally shut down your computer without saving the weave, you will lose all your changes.

If you see a disabled “Save” button

If you see the “Save” button is disabled, it means that the weave you are viewing or editing does not originally belong to you. Basically, you are not the original author. If you really like a weave (belonging to someone else), you can always login and go back (by clicking the “Liveweave” logo), and then click the “Save” button (this is because Liveweave keeps the last weave opened in the session).

Hopefully, these all make sense to you! If not, please feel free to reach out to us at support@liveweave.com

We now support Auto-formatting and code clean up!

This feature was a long time pending…but finally, it is here!

Liveweave now supports auto-formatting and code clean up for HTML, CSS, and JavaScript!

For example, to “tidy” up and auto-format the HTML code, make sure the cursor is inside the HTML window and then select “Tidy and format HTML-only” from the “Tools” menu on the top. To auto-format all HTML, CSS and JS code, simply click the “Tidy All” button on the top (near the “Save”). That’s it!

We now support ECMAScript 6 (ES6) keywords and its built-in functions!

ECMAScript 6 (ES6) or ECMAScript 2015 is the new generation of JavaScript. In the past, while you could have still written ES6 code in Liveweave (since the rendering is dependent on the browser), it did not really have the support for ES6 keywords and its built-in functions as a part of its code-hinting technology.

Now we do!

If you want to learn more about ES6, here is a great tutorial to write object-oriented JavaScript using “classes” (ES6):

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes

A quick example of ES6 code is below (using “class” to build an object):

class Car {
constructor(brand) {
this.carname = brand;
}
present() {
return 'I have a ' + this.carname;
}
}

We are also currently working on a new documentation (or rather a cheatsheet) for JavaScript/ECMAScript 6 in the meantime. So, stay tuned!

Liveweave is now in HTTPS!

Liveweave is now fully served over HTTPS! Basically all content inside Liveweave.com (weaves, content, other apps like Vector Editor, CSS Explorer, Color Explorer), all of them are finally going HTTPS! You will notice the “padlock” sign near the browser’s address bar (see above pic).

So, what does this mean? Well, in short, any data sent over Liveweave is fully secured. And, all requests coming in over HTTP will be automatically re-directed to HTTPS, to enforce the security.

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

 

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.

1 of 4
1234