    
|
|
|
Angela Craven and SuAnne Hall with thoughts, interviews, and research into introversion can be an asset to the UX field. Like the majority of folks in the world of computers, I am introverted and a fairly full-tilt one at that. My own thoughts. And a funny reminder not to be too obnoxious about it.
Direct Link to Article — Permalink
Introversion and UX is a post from CSS-Tricks
]]>If you apply a transition on an element for a particular supported property, and that property ever changes, it will use that transition. If a class name on that element changes and the new class changes that property, it will transition (assuming what that class does isn't remove the transition). If JavaScript literally changes the that style property, it will transition.
Likewise, if a new media query takes affect, and that media query has something in it that changes that property on that element, it will transition. As such, there really isn't a such thing as an "animated media query" so much as elements that just transition as expected when a new media query starts affecting the page.
.thing-that-moves {
position: absolute;
width: 100px;
height: 100px;
background: red;
top: 0;
left: 0;
transition: left 0.5s; /* BYO prefixes */
}
@media (min-width: 400px) {
left: 50px;
}
@media (min-width: 600px) {
left: 100px;
}If you were to resize your browser window across those breakpoints, you'd see a red square moving around in response.
A few versions ago on CSS-Tricks, I had a search form that would slowly float into position using this exact technique. I've recreated that here in a somewhat simple layout, in which a few other things transition as well:
See the Pen Animated Media Queries by Chris Coyier (@chriscoyier) on CodePen
You might have the best luck checking it out in Full Page View.
Animated GIF of it working:
p.s. LICEcap is very useful for creating GIF's like that.
They sky is the limit here. It's just CSS. Change and transition whatever you want. In another version of CSS-Tricks, I drew Mike the Frog from Treehouse out of simple CSS shapes. When different media queries hit, Mike would change shape, color, expression, and position - slowly morphing into the next state through transitions. It was well liked!
IE 9+ on the media queries. IE 10+ on the transitions. I wouldn't sweat the transitions as they are strictly funcandy only (if they don't transition, it doesn't matter, they still move). If you need deeper media query support, there is always Respond.js.
Poops and giggles, yo. This is purely for fun. It can be a little touch just to give your site some spirit. It would be hard to make a business case, but if your performance budget doesn't have a few bytes for funzies, I feel bad for you son.
If the stylesheet is parsed fast enough and the transitions get applied to an element while the page is still being laid out, those transitions might be kinda obnoxious. You might want to apply them only after the page is loaded.
Animated Media Queries is a post from CSS-Tricks
]]>
All creatives have great ideas, it’s what we live for; that moment of inspiration at 4am that sees you leaping from bed and rushing to your desk is the excitement that makes life worthwhile.
Sadly, by the cold light of day, the idea that seemed so revolutionary in the early hours, rarely holds the same appeal. Do you really want to quit your job and travel round lapland photographing reindeer? Do you really want give up your day job to manufacture iPhone cases shaped like beagles? By the time we’ve showered, grabbed a coffee and headed out the door the idea has been consigned to the back of a sketchbook, usually for good.
Of course, sometimes an idea won’t let go of you, and this collection of Kickstarter projects just shows what we can do if we commit to making the dream a reality.
Some of these ideas will inspire you, some might even make you want to kick in a buck or two. Personally, I’m just glad there are people out there with the perseverance to get this far.
Macaw is, in the developers’ words, a next generation web design tool. If you’re sick of the Adobe subscription charges maybe this one’s for you.
Looking for a good icon set? You’d have to go a long way to beat Iconic. Help them turn this project into a commercial venture and you can get the full set of over 200 icons at 50% off, bargain!
Looking for a way to brighten your desktop? Then this minimal Lemonade Lamp could be just the ticket. For around $207 you’ll get a metal and oak frame lamp with a choice of cord; but I’m seriously considering the $304 for the copper and walnut edition, exclusive to Kickstarter funders.
Struggle with grammar, or with punctuation? Even the most visual designers have to write copy sometimes. Alphonso Jordan’s goal is to help with his swiss army knife for grammar.
Kickstarter is filled with photographic projects. But if you’re feeling philanthropic, this is a great one to support. James Singwald is documenting streets in Baltimore and this is an incredible record of a great America city as it changes. Look closely and you might see McNulty in one of those photos.
If you’re in or near Fort Wayne, Indiana then you want to jump on this. On Novemeber 14th Aaron Draplin will be delivering a lecture on graphic design. With clients including the Obama administration, Nike, Adobe and Wired magazine, he’s someone worth listening to.
Sometimes we all need to step away from the screen and work on paper, but where’s that pen you like to draw with? It could be in one of these cool hard-wearing pen cases if you back this project.
Love Helvetica? Then this project is for you. A collection of designers being interviewed about one of the world’s most popular fonts.
A backpack that packs like a suitcase. Perfect for your morning commute and sure to keep your camera, laptop and other precious possessions safe.
Idiotic co-workers making a mess of the office? Maybe you need a passive aggressive notepad.
An elegant solution to too many cables, the Spool Dock is a beautifully simple idea that would look good realized on any desk.
Who doesn’t love letterpress? If you’ve got a blank space on your office wall then a letterpress poster of the iconic Brooklyn bridge designed entirely in type, is the perfect way to fill it.
With audio design becoming and increasingly important, you’re going to want to make sure that you have some great speakers to work with. This innovative design not only sounds great, it looks great too.
Every once in a while an idea of unadulterated genius is delivered unto us. This is one such idea. Use the panoramic software on your camera phone? Absolutely not, what you need is a curved mirror. Brilliant.
If you’re anything like me, the top drawer of your desk is overflowing with cables of all kinds. This tasty solution is the perfect way to solve the problem. Why is it tasty? All of the solutions are named after Mexican food, delicious!
Weighing less than an iPhone, this fantastic tripod solution is ideal for securing your camera in the great outdoors, helping you get those pictures you would otherwise miss.
More letterpress, this time a lovely calendar for 2014, perfect as a Christmas gift (it’s closer than you think), or just to keep on your desk for next year.
Looking to master Photoshop? Then look no further than this video course by Michael Cameneti, a tutor at Santa Monica college.
Looking for an alternative to those expensive Pantone color references? Check out this great project aiming to catalogue 20,736 tints.
There are iPhone cases on every shopping mall, but very few are as attractive as these gems by Lauren Simkin Berke.
This ingenious design allows you to position a tablet alongside a laptop screen for dual-screen productivity.
Maybe you’re looking to move into iOS development, and if you are, there’s no better way to learn than by example. This series of videos will give you a flying start.
Another ingenious device, this pen is made from 10 separate magnetic parts, providing an incredible set of options.
Beastgrip is a sensational adapter that allows you to add real quality lenses directly to your camera phone, turning it into a professional photo solution.
MultiMod Consoles are the ideal solution for anyone struggling to keep their desk organized. This great scaffolding will handle just about any setup.
Of course, maybe your problem isn’t acting on your dreams, maybe you have the vision and the determination; the problem is that you don’t remember those ideas when you wake. If so, then you’ll want to back Shadow, and maybe your ideas will be up on Kickstarter next.
Will you think about backing any of these projects? Do you have your own Kickstarter project in the works? Let us know in the comments.
| 100 Colorful Grunge Textures from Florin Gorgin – only $12! |  |
|
|
 |
One day I discovered that I needed to design an API that would upload files from a client to a server. I work on the Russian Web mail provider at Mail.Ru and deal with JavaScript in all its aspects. A basic feature of any Web mail service is of course attaching a file to an email.
Mail.ru is no exception: We used to have a Flash uploader, which was rather good, but still had some problems. HTML markup, graphics, business logic and even localization were all built into it, and it made the uploader pretty bloated. Furthermore, only a Flash developer could make any changes to it. We realized that we needed to build something new and different. This article covers all of our steps in creating what we consider to be a better tool for the job.
Anyone who has ever written a Flash uploader knows what problems it always brings:
So, we decided that it was the right time for a change. Here’s a list of features that we wanted to have with a new approach to this problem:
Over the last four years, we’ve all read heated debates about various features and options of HTML5, including the File API. Many publications touch on this API, and we have a few functioning examples of it. One would think, “Here’s a tool that solves the problem.” But is it as easy as it looks?
Well, let’s look at the browser statistics for Mail.Ru. We have selected only browser versions that support the File API, although in some cases these browsers do not provide full support for the API.
The diagram shows that a bit more than a whopping 87% of browsers indeed support the File API:
Also, we shouldn’t forget about mobile browsers, which are becoming more popular by the day. Take iOS 6+, for example, which already supports the File API. However, 87% is not 100% and in our case it wasn’t feasible to entirely abandon Flash at this point.
So, our task evolved to building a tool that combines two techniques (File API and Flash) and that lets the developer kind of… ignore the way files are actually uploaded. During the development process we decided to combine all preliminary development into a separate library (a unified API) that would work independent of the environment and could be used wherever you like, not only in our service.
So let’s go into detail on a few specifics of the development process and see what we’ve built, how we built it and what we’ve learned along the way.
Basics first. Here is how files are received in HTML5. Very simple.
<input id="file" type="file" multiple="multiple" />
<script>
var input = document.getElementById("file");
input.addEventListener("change", function (){
var files = input.files;
}, false);
</script>
But what do you do if you have only Flash support and no File API? The basic idea that we had for users with Flash support was to make all interactions go through Flash. You couldn’t simply call up a file-selection dialog. Due to the security policy, the dialog would open only after the Flash object has been clicked.
This is why the Flash object would be positioned above your target input. Then, you would attach a mouseover event handler to the document, and put the Flash object into the input’s parent element when the user hovers over it.
The user would click the Flash object, open the file-selection dialog and select a file. Data would be transferred from Flash to JavaScript using ExternalInterface. The JavaScript would bind the data received with the input element and emulate the change event.
[[Flash]] --> jsFunc([{
id: "346515436346", // unique identifier
name: "hello-world.png", // file name
type: "image/png", // mime-type
size: 43325 // file size
}, {
// etc.
}])
All further interactions between JavaScript and Flash are performed through the only available method in Flash. The first argument is a command name. The second parameter is an object with two mandatory fields: the file id and the callback function. The callback is called from Flash once the command is executed.
flash.cmd("imageTransform", {
id: "346515436346", // file identification
matrix: { }, // transformation matrix
callback: "__UNIQ_NAME__"
});
The combination of the two methods results in the API, which is very similar to native JavaScript. The only difference is in the way files are received. Now we use the API method because the input has the files property only when the browser supports HTML5 and the File API. In the case of Flash, the list is taken from the data associated with it.
<span class="js-fileapi-wrapper" style="position: relative">
<input id="file" type="file" multiple />
</span>
<script>
var input = document.getElementById("file");
FileAPI.event.on(input, "change", function (){
var files = FileAPI.getFiles(input);
});
</script>
Usually, file uploading comes with a set of restrictions. The most common restrictions are on file size, image type and dimensions (width and height). If you look around solutions for this issue, you’ll notice that validation is usually done on the server, and the user would receive an error message if the file doesn’t match any restrictions. I tried to solve this problem in another way, by validating files on the client side — before the file has started uploading.
What’s the catch? The catch is that when we initially get the list of files, we have only the bare minimum of information about the files: name, size and type. To get more detailed information, we need to actually read the files. To do that, we can use FileReader.
So if we play around with FileReader, we’ll probably come up with the following filtering technique:
FileAPI.filterFiles(files, function (file, info){
if( /^image/.test(file.type) ){
return info.width > 320 && info.height > 240;
} else if( file.size ){
return file.size < 10 * FileAPI.MB;
} else {
// Unfortunately, there is no support for File API or Flash. We have to validate on the server.
// This case is rather rare, but we must consider it as part of the project.
return true;
}
}, function (files, ignore){
if( files.length > 0 ){
// ...
}
});
You can get the file’s dimensions “out of the box,” as well as a way to collect all of the data you’ll need:
FileAPI.addInfoReader(/^audio/, function (file, callback){
// collect required information
// and call it back
callback(
false, // or error message
{ artist: "...", album: "...", title: "...", ... }
);
});
In developing the API, we also wanted a convenient and powerful tool that would allow us to work with images — to create previews, crop, rotate and resize, for example — and whose functionality would be supported in both HTML5 and Flash.
First, we needed to understand how to do this via Flash — that is, what to send to JavaScript to build the image. As we of course know, this is usually done using the data URI. Flash reads the file as Base64 and transfers it to JavaScript. So we add data:image/png;base64 to it, and use this string as the src.
A happy ending? Unfortunately, IE 6 and 7 do not support the data URI, and IE 8+, which supports the data URI, cannot process more than 32 KB. In this case, JavaScript would create a second Flash object and transfer the Base64-encoded content into it. This Flash object would restore the image.
In the case of HTML5, we would get the original image first, and then perform all required transformations using the canvas. Getting the original image can be done in one of two ways. The first is to read the file as a dataURI using FileReader. The second is to use URL.createObjectURL to create a link to the file, which is bound to the current tab. Of course, the second option is good and is enough to generate a preview, but not all browsers support it. Opera 12, for example, does not support the accompanying URL.revokeObjectURL, which informs the browser that there is no need to keep a link to the file anymore.
When we combine all of these methods, we get a class of FileAPI.Image:
crop(x, y, width, height)resize(width,[height])rotate(deg)preview(width, height) — crop and resizeget(callback) — get final imageAll of these techniques fill the transformation matrix, which is applied only when the get() method is called. Transformations are performed using the HTML5 canvas or in Flash (when the file is uploaded through the Flash interface).
Here is our description of the matrix:
{ // parameters fragment of original
sx: Number,
sy: Number,
sw: Number,
sh: Number,
// destination size
dw: Number,
dh: Number,
deg: Number
}
And here is a short example:
FileAPI.Image(imageFle) // returns FileAPI.Image instance
.crop(300, 300) // crop the image width and height
.resize(100, 100) // resize to 100x100px
.get(function (err, img){
if( !err ){
// Append the result in the DOM-node (<div id="images">).
images.appendChild(img);
}
});
Digital cameras emerged long ago and are still very popular. Some cost about $20 to $30 and can take photos with a resolution of 10 MP and up. We tried to downsize photos taken with such cameras, and this is what we ended up with:
As you can see, the quality is rather poor. However, if we first resize it in half and then do it again several times until we get the desired dimensions, then the quality is much better. This method is actually quite old, and in fact a consequence of the “nearest neighbor” interpolation; when compressing images at once, we are losing the quality of the image really “quickly”.
The difference is evident:
Apply a slight sharpening effect, and the image will be ideal.
We also tried other variations, such as bicubic interpolation and the Lanczos algorithm. The result was a bit better, but the process took more time: 1.5 seconds versus 200 to 300 milliseconds. This method also yielded the same results in canvas and Flash.
Now let’s sum up our various options for uploading a file to the server.
Yes, we still use this many years later:
<form
target="__UNIQ__"
action="/upload"
method="post"
enctype="multipart/form-data"><!-- This bit is often forgotten -->
<iframe name="__UNIQ__" height="240" width="320"></iframe>
<input type="file" name="files" />
<input type="hidden" name="foo" value="bar" />
</form>
At first, we create а form element with a nested iframe inside. (The form’s target attribute and the name of the iframe should be the same.) After that, we move the input[type="file"] into it because if you put a clone there, it will turn up empty.
To illustrate this issue, imagine that you load a file via iframe. We could use something like this:
var inp = document.getElementById('photo');
var form = getIFrameFormTransport();
form.appendChild(inp.cloneNode(true)); // send a "clone"
form.submit();
However, such input would be “empty” in IE, i.e. it wouldn’t contain the selected file, which is why we need to “send” the original file and replace it with a clone.
That is why we subscribe to events via API methods, to save them during cloning. Then, we call form.submit(), and put the contents of the form through the iframe. We’ll get the results using JSONP.
var inp = document.getElementById('photo');
var cloneInp = inp.cloneNode(true);
var form = getIFrameFormTransport();
// Insert the "clone" after the "original"
inp.parentNode.insertBefore(cloneInp, inp);
form.appendChild(inp); // Send the "original
form.submit();
Yes, erratic indeed.
In principle, everything is quite simple: JavaScript calls the method from the Flash object and passes the ID of the file to be uploaded. Flash, in turn, duplicates all states and events in JavaScript.
Now we can send binary data, not just text data. This is easy:
// collect data to be sent
var form = new FormData
form.append("foo", "bar"); // the first parameter is the name of POST-parameter,
form.append("attach", file); // the second parameter is the string, file or Blob
// send to server
var xhr = new XMLHttpRequest;
xhr.open("POST", "/upload", true);
xhr.send(form);
What if, for example, we want to send not a file, but canvas data? There are two options. The first, which is easiest and correct, is to convert canvas to Blob:
canvasToBlob(canvas, function (blob){
var form = new FormData
form.append("foo", "bar");
form.append("attach", blob, "filename.png"); //not all support the third parameter
// ...
});
As you can see, this trick is not universal. In case canvas doesn’t have Canvas.toBlob() (or it cannot be implemented), we will choose another option. This option is also good for browsers that do not support FormData. The point is to create the multipart request manually and then send it to the server. The code for the canvas would look like this:
var dataURL = canvas.toDataURL("image/png"); // or result from FileReader
var base64 = dataURL.replace(/^data:[^,]+,/, ""); // cut the beginning
var binaryString = window.atob(base64); // decode Base64
// now get together multipart, nothing complicated
var uniq = '1234567890';
var data = [
'--_'+ uniq
, 'Content-Disposition: form-data; name="my-file"; filename="hello-world.png"'
, 'Content-Type: image/png'
, ''
, binaryString
, '--_'+ uniq +'--'
].join('\r\n');
var xhr = new XMLHttpRequest;
xhr.open('POST', '/upload', true);
xhr.setRequestHeader('Content-Type', 'multipart/form-data; boundary=_'+uniq);
if( xhr.sendAsBinary ){
xhr.sendAsBinary(data);
} else {
var bytes = Array.prototype.map.call(data, function(c){
return c.charCodeAt(0) & 0xff;
});
xhr.send(new Uint8Array(bytes).buffer);
}
Finally, our efforts result in the following method:
var xhr = FileAPI.upload({
url: '/upload',
data: { foo: 'bar' },
headers: { 'Session-Id': '...' },
files: { images: imageFiles, others: otherFiles },
imageTransform: { maxWidth: 1024, maxHeight: 768 },
upload: function (xhr){},
progress: function (event, file){},
complete: function (err, xhr, file){},
fileupload: function (file, xhr){},
fileprogress: function (event, file){},
filecomplete: function (err, xhr, file){}
});
This has a lot of parameters, but the most important one is imageTransform. It transforms images on the client, and it operates via both Flash and HTML5.
And that’s not even half of the story. We can have multiple imageTransforms:
{
huge: { maxWidth: 800, maxHeight: 600, rotate: 90 },
medium: { width: 320, height: 240, preview: true },
small: { width: 100, height: 120, preview: true }
}
This means that three copies (besides the original) will be sent to the server. What for? If you can transfer the load from the server to the client, it’s a good idea to do it. The server should probably only minimally validate input files. First of all, you are not only removing the load, but also avoid logic on the server, completely moving it to the client.
Second, if the file doesn’t have to get uploaded to the server, we save bandwidth. In addition, there are often problems when it isn’t possible to make further processing on the server, such as integration with third-party services (Amazon S3, for example). In our experience, it’s OK to move the additional logic that previously was managed server-side to the client.
The upload function also calls back an XMLHttpRequest-like object; that is, it assumes some properties and methods of XMLHttpRequest, such as:
statusstatusTextresponseTextgetResponseHeader(name)getAllResponseHeaders()abort()Although HTML5 allows you to upload several files in one request, standard Flash allows only file-by-file uploading. Moreover, in our opinion, uploading files in a batch proved not to be a good idea. For one, Flash doesn’t support this, and we wanted to have an identical behavior for both Flash and HTML5. Second, the user might simply run out of memory and the browser will fail.
XMLHttpRequest, which has called back the upload, is a proxy XMLHttpRequest, in fact. Its methods and properties reflect states in the file currently being uploaded.
I’ll end with a small example of how we let users upload files using drag’n'drop:
<div id="el" class="dropzone"></div>
<script>
if( FileAPI.support.dnd ){
// element where you can drop the files
var el = document.getElementById("el");
// subscribe to events associated with Drag'n'Drop
FileAPI.event.dnd(el, function (over){
// method will be activated when you enter/leave the element
if( over ){
el.classList.add("dropzone_hover");
} else {
el.classList.remove("dropzone_hover");
}
}, function (dropFiles){
// the user has dropped the files
FileAPI.upload({
url: "/upload",
files: { attaches: dropFiles },
complete: function (err, xhr){
if( !err ){
// files are uploaded
}
}
});
});
}
</script>
It took us quite some time to develop the library. We worked on it for about 5 months since it was a little side thing that we had to finish aside from the regular work. The main headache was caused by the little details that different browsers had. Chrome, Firefox and IE10+ were just fine, but Safari and Opera had very different behaviors from version to version, including inconsistencies on Win/Mac platforms. Still, the main problem was to actually combine all three technologies — iframe, Flash, HTML5 — to create a bulletproof file uploader.
The library is available on GitHub and we’ve published a documentation as well. Bug reports and pull requests are more than welcome!
input[type="file" multiple].This article has been reviewed and edited by Andrew Sumin, a front-end engineer working on Mail.ru front-end team.
(al ea il)
© Konstantin Lebedev for Smashing Magazine, 2013.
]]>