LayerVault 2 In-depth: The Tools
The idea for LayerVault 2 really centered around the idea of the Wormhole. Allan deliriously sent me an email late one night describing it. Things clicked immediately and we began sketching it out.
After playing with the idea a bit, it became obvious that it might be worth adding a few more things to the designer’s tool belt. LayerVault stays open on our users’ desktops the whole day, so we needed to make sure we were providing as much value as possible.
To do this though, we had to face a limiting problem: we had to operate within the confines of the browser. This post details some of the more technical trials and tribulations we dealt with while developing our new Tools.
Canvas, canvas, and then more canvas
We wanted to make sure the Tools we built were reflective of our values. We wanted them to be fast, easy to use and fun. We knew we’d have to use the HTML5 canvas element and some finely tuned JavaScript.
Oftentimes when using a tool, we will be manipulating two or three different canvas elements. We found that in certain cases, it was better to work with transparent canvas elements than to manipulate the image data itself. Such a method also makes it easier to save state.
In the end, we pushed the canvas element to its limit and then some. We’ve never seen anything like our Eyedropper or Smart Ruler tool on the web. They’re fast and a pleasure to use.
Cross-origin Resource Sharing, Oh my!
It should be no surprise that LayerVault uses Amazon S3 as our storage mechanism. It allows us to not worry about feverishly feeding machines with new hard drives. (And at just having crossed 30,000 files tracked, we’re talking a lot of hard drives.)
Unfortunately, it can also be a headache when it comes to Cross-origin resource sharing (CORS). Pulling images off of another domain and manipulating them using the HTML5 canvas element is not as straight-forward as one would like. Because security is a top concern among browsers, manipulating data from other domains is difficult and often prohibited. We obviously found a way around it, also using some other HTML5 APIs.
Our basic methodology for this problem is as follows:
- Have the File Page inject an iframe onto the page. This iframe’s source shares the same domain as the image.
- The iframe is a simple web page that executes some JavaScript, namely a script that…
- Pulls down the proper image, loads it into a string, then transmits the image data as a base64-encoded string out to File Page using the postMessage API.
- The File Page receives the message and swaps it into the canvas elements appropriately.
- The File Page has no knowledge of the origin domain of the data, so it doesn’t complain when we try to do fancy things with it.
It’s quite the workaround, but it provides for a seamless experience when using the LayerVault File Page.
That about wraps up this post. You can see all of the new LayerVault features on our Tour Page. If you have any questions, don’t hesitate to send us an email.
Announcing LayerVault 2
Allan and I are happy to announce the release of LayerVault 2 today. This release represents several months of work. We focused on our core product even better along with new great features.
What you’ll see at layervault.com now is something we’re proud of. We went through dozens of possible designs before landing on the one you’ll see now.
Let’s dig into what’s new.
(Any press requests can be directed to press@layervault.com. Full resolution logos can be found at layervault.com/about.)
Big Things in Store
We’ve been quiet for a little while.
On April 24, that changes. We’re finally ready to show you what we’ve been working on for the last few months. Please join us for the announcement at 11am PST.
We’re really proud of what we’ve created. We hope you like it.
Better filtering with jquery.data.filter.js
We’re trying to get better about open-sourcing some of the great code that we write. Our first foray into open-sourcing the cool stuff behind LayerVault is the simple yet effective jquery.data.filter.js.
It’s a simple jQuery plugin that makes it easier to filter DOM elements by data-* attributes.
So now something like:
var versions = $('.Revision')
.filter('[data-project-id="' + projectId + '"]');
Can be simplified to:
var versions = $('.Revision').dfilter('project-id', projectId);
Enjoy and let us know what you think!
No One Said Scaling Was Easy
Over the past week and a half, LayerVault hasn’t gone down, but it’s been noticeably slow for a few users. We have tools in place that allow us to monitor the individual experience of each customer to the service. If anything looks amiss, we recreate the problems and tighten the screws. We’ve been experiencing some great growth over the past few weeks, and with growth comes growing pains.
For now, it seems like we can see the edge of this forest. I wanted to write a blog post to talk about scaling past that initial machine and scaling Rails. As always: if you’re having issues with the service, please send us an email right away at support@layervault.com. Chances are, we’re already working on a solution.
Here we go.
While we’re heads down over here working on some great performance improvements and few other things up our sleeves, we still need to get out sometimes.
Last night, our very own Allan won the basketball competition at the Dribbble NYC meetup. Hidden talents. The image here is a basketball signed by the Dribbble founders, Dan Cederholm and Rich Thornett. It was great to come out and meet some fellow NYC designers.
Special thanks to Squarespace for hosting the meetup. See you next time!
Announcing Unlimited Storage and 60-Day Trials
Let’s get right to the point — We’re building some pretty amazing stuff here at LayerVault. We’ve iterated on nearly every aspect of the product, made huge improvements to things like user experience and reliability. Today, we’re releasing the next iteration of the LayerVault pricing.
We’re doing away with account storage limits. As of today, all LayerVault plans will receive unlimited storage. If you’re an existing customer, worry not. Your account has been upgraded.
If you were on the fence about trying us out, now’s a great time. We’re also offering 60-day risk-free trials for all of our plans. Give LayerVault a try for 60 days and if you cancel before your trial’s up, no big deal.
The last few months have been really great. LayerVault has big plans for 2012 and we’re more excited than ever about what’s in store. Stay tuned.
