mikejholly

Mike Holly's (CTO @strutta) posts on web tech and other stuff. Follow me @mikejholly.

"User" Considered Harmful

What’s the deal with the term User (and for that matter, Consumer)? When did we start referring to people as users instead of people, or at least customer.

We’ve all said things like “47% percent or our users blah blah blah”. What the bloody hell is a user anyway? Every time I hear the word I think of an addict huffing paint. It’s derogatory.

Users and consumers don’t seem important (I would argue the terms actually connote insignificance), clients, customers and people do. “Who gives a shit about what users want, anyway? They’re just users. Users don’t know what they want.” Gah!

It’s this sort of dehumanizing and abstracting nonsense that drives me nuts about software, and more broadly, business culture and jargon. Stop abstracting, deemphasizing and generalizing the role of actual people in your business and life.

Over using user removes us from the ultra-important role actual people play in the process of software design and business. The software isn’t used by users, it’s used by our friends and family, our business partners and our uncle Frank.

Your customers are your business, and they do know what they want. They aren’t nameless, faceless drones with tiny IQs. They’re intelligent individuals with valuable feedback and unique perspective.

User is the wrong term.

Making Software Translation Easier

If you’ve ever had to translate an application into multiple languages, you’re probably familiar with Poedit. It’s a free cross platform Gettext catalog file editor. We’ve been using the tool for translations at Strutta for a while. It’s the best tool for the job (that I know of) but it, unfortunately, suffers from freeware-itis: the interface is clunky; and the error messages are cryptic and frequent. That being said, it’s not a terrible program. I just wanted to make PO editing fun again (just kidding—it was never fun :P)!

Introducing EasyPO

Video demo

And so I made EasyPO. It’s a lightweight app for editing and composing Gettext translations in the browser. You can upload a PO file, make changes, share the URL with others and even watch as they make changes (it uses Socket.IO for this piece)! The URL lives on, and the changes are automatically committed as you make them, so there’s never a need to click Save.

http://easypo.com/edit/4f4065907b351e0127001071

Overall, I found the process of designing and building a lightweight web app like this very rewarding. The project was an exercise in simplicity: how simple can I make the interface while keeping things usable? I wrote down the features I wanted the app to have, drew a few sketches, and built it in a few evenings. I had a number of goals from the get-go: I wanted it to be easy; I wanted it to make the overall translation workflow less painful; and, I wanted to be able to keep track of translator progress. I think the app does a good job on all these fronts.

How it Works

If you load up EasyPO.com, you’ll see there’s nothing but a drop target (unless you’re on IE :P) asking you to drag and drop your PO (or POT) file. After doing so, the app will immediately open the edit view from which you can CRUD any of the PO document strings.

There are only a few buttons exposed in the edit UI: the Info button opens the PO file headers (basically language settings and plural-forms); the Download button generates and downloads (duh) the PO file that you’ve edited/created; and, the Add button let’s you add a new string to the document.

I’ve also added a support for machine translations via the Google Translate API (the translation quality is pretty good for simple phrases). There’s also a search feature which allows for quick filtering of strings as you type.

Technical Notes

Building the app was a nice diversion and a chance to play with new tools. I’ve been eager to build a complete (albeit small) app using Express and Backbone.js for a while. Using these new tools was a lot of fun. I especially enjoyed using Backbone, which does an exceptional job of keeping your Javascript code tidy and terse. I liked the flexibility it offers—you’re not stuck with one particular way of doing things. The approach to event handling was particularly smart.

I used FormData for file uploads. It’s a great next-generation addition to the browser that abstracts away the manual worked you’d normally have to do when posting multipart data with ajax.

Here’s how it works:

var files = e.originalEvent.dataTransfer.files;
if (files.length > 0) {
  var data = new FormData();
  data.append('file', files[0]);
  $.ajax({
    url: '/upload',
    type: 'POST',
    data: data,
    dataType: 'json',
    processData: false,
    contentType: false,
    success: function(data) {
      AppRouter.navigate('edit/' + data._id, true);
    }
  });
}

I also created a couple of Node modules for the project. One is a Gettext PO file library (node-po) and the other is a Google Translate API client (node-google-translate). They’re both available to npm if anyone is interested in using them.

As I mentioned, the app uses Socket.IO to alert you of edits, as they’re being made.

Improvements

EasyPO should work flawlessly (aka “it works for me”) in Chrome/Safari/FF/IE9 and pretty well in IE8.

I’m currently working on integrating the myGengo API. I’m pretty excited about this as it will allow for quick translations of your strings by actual human translators. Their service isn’t free so I’ll probably have to charge a nominal fee for human translation.

The largest PO file I’ve tested was about 6,000 lines. The interface becomes a little sluggish when editing files with so many entries, but it’s still usable. I’m probably going to implement smarter paging soon—the app will only display so many entries at once and then intelligently load in subsequent sets.

All Done

This project was a small side-project that I enjoyed building. If you’ve ever been frustrated editing PO files, I hope this app makes your job easier!

Folding Websites

I’ve been seeing a lot cool experiments with CSS3 transformations in the browser lately and it’s inspired me to do some experimenting of my own. That and I’ve been trying to think of something interesting to present on my blog…

And where better to find some cool effects to rip off than in OSX? In particular, I think the way the Lion version of Mail expands blocks of quoted text looks pretty nifty and I was wondering if it would be possible to pull off the effect in HTML/CSS.

The effect in Mail

Well it turns out that, thanks to CSS3 Transforms, it is! After a bit of hacking and slicing I wound up creating something that I’m quite happy with. And I figured creating a jQuery plug-in would be a great way to share the love.

jQuery Unfold

GitHub project page

The result is jQuery Unfold. Now you can do fancy Mail app style unfold effects in your browser! It looks really good in Webkit (Safari and Chrome) and pretty good in Firefox (more info below).

Tada!

Basically the effect works by slicing up a chunk of content and animating the height and rotation of each slice independently. Each slice has multiple wrappers that control the vertical offset of the content relative to that slice. Overall the code isn’t that complex and it only took a touch of math (some basic trig to get the correct wrapper height based on the rotation angle). The browser does almost everything for you.

Usage

To use the effect, just add $(this).unfold() to your click handler after including the script. To customize the animation a bit, pass in custom duration and easing options. You can also chop the content into as many slices as you want.

Here are some more options:

$('article').unfold({
  easing: 'easingFunction',
  duration: 1000,
  slices: 10,
  perspective: 600,
  shadow: true 
});

Check out the demo

A Couple of Tweaks

After replaying the animation 1,000 times in Mail, I noticed that they make clever use of perspective to enhance effect. Luckily, the CSS3 perspective and perspective-origin properties provide exactly what we need to achieve the same look.

Another challenge was creating a nice shadow on each slide. Given that the background could be a solid color or an image, I needed a solution that would work in all cases. I ended up duplicating the rotated container and using a CSS3 linear gradient that fades from black to transparent. The shadow layer is then stacked on top of the content. This gives the slice a nice shadow that should look good in most cases (except when the background is a dark solid color).

It seems like Webkit is outpacing Firefox where CSS transformations are concerned. I ran into a couple of small annoyances while working on this script. I’m not sure if the fix for this bug has been included in the most recent version (10), but it seems that Firefox has trouble maintaining the perspective of elements when overflow: hidden is used. Also, the animation just seems clunkier overall on Firefox.

<P> Soup

Because of the way vertical margins collapse, there is a bit of difficulty with slicing up the segments. It should work as expected in most cases, but if you run into double margins or weird popping (when the animation finished) try fiddling with the collapse option (it’s a boolean).

Achievement Unlocked

So there you go, it’s now possible to do awesome OSX style effects in the browser thanks to CSS3 transforms.