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!
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.
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!
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.
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.
- Write your Emmet code (in the HTML5 or CSS3 panels)
- Select your Emmet code
- 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:
- Emmet official website
- Goodbye, Zen Coding. Hello, Emmet! by Smashing magazine
- Zen Coding at Google Code
- 7 Awesome Emmet HTML Time-Saving Tips by Designshack
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.
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.
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.
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.