Update

Alert! Switching between themes has been disabled

night vision

Due to some rendering issues we had to temporarily disable / remove the Night Vision toggle switch. When the user switched to the “lighter theme” (dark text on white background), the scroll bars were disappearing. In addition to that, when the user was switching back to the default theme (light text on dark background), the scroll bars still didn’t show  up.

We will be working on this reported bug, but until then, switching between themes (i.e. the Night Vision toggle) will remain disabled.

We now support Emmet, formerly called Zen Coding!

emmet1

Liveweave now supports Emmet (formerly called Zen Coding). In order to make HTML and CSS coding faster, Emmet is probably the most popular library out there. So choosing it was a no-brainer! So how does it work? Simple.

  1. Write your Emmet code (in the HTML5 or CSS3 panels)
  2. Select your Emmet code
  3. Click [Ctrl] + E in keyboard if you are using Windows, or [Command] + E if you are using Mac OS X.

That’s it! You will see your code automatically becomes “expanded”. Emmet works for both HTML and CSS. And if are interested to learn more about it and how it works, here are a few resources:

  1. Emmet official website
  2. Goodbye, Zen Coding. Hello, Emmet! by Smashing magazine
  3. Zen Coding at Google Code
  4. 7 Awesome Emmet HTML Time-Saving Tips by Designshack

emmet2

Welcome “Tomorrow”, good-bye “Monokai”

comparison

We have, once again, updated our default theme. Our new default theme is Tomorrow. So, what was wrong with our previous theme Monkai then? Well, actually nothing. It is a beautiful by itself. However, at times, we noticed that some of the colors appeared too bright, especially at a higher display brightness. Now, that is fine for most people. However, we wanted to make sure, that all our users have an experience that is relatively more soothing to their eyes, especially since the default background is dark.

The light theme stays the same though. So, if you do not like our new default theme, then just click the Night Vision toggle switch.

Ability to download weave (HTML, CSS and JavaScript) as a ZIP file!

dowload zip

We now have the ability to save weaves as ZIP files. What this means is that you will now be able to download all the files together (HTML, CSS and JS) in a standard zip format, which when “unzipped”, will have a index.html, style.css (inside the css folder) and script.js (inside the js folder)! The downloaded file will be called source.zip.

One thing to keep in mind, in order the HTML to work correctly, make sure you have a <head> tag in your HTML code.

source

New Color & Palette Lab!

colors

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!

palette

1-click full screen Preview

fullscreen

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!

fullscreen toggle

 

Several new CSS3 properties, additional HTML5 elements and more example values

css3 2

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!

 

 

 

Liveweave now supports both light & dark themes!

default

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!

white

Light theme

 

 

Welcome to Liveweave 2013!

new liveweave

Liveweave.com originally started as a demo project, which somehow turned in to something  more comprehensive. Originally, Liveweave only supported HTML5 combined mode i.e. a singular view of HTML5, CSS3 and JavaScript (all in the same window/panel). Now, Liveweave 2013 comes with a new modular design that supports separate coding for HTML5, CSS3 and JavaScript!

With the new (more advanced) quadrant panels, now you can also change the size of the panels depending on your needs.

3 of 3
123