the work and personal site of Jared Alessandroni

Archive for February, 2011

A Poem for Jen

Monday, February 14th, 2011

Inevitability

I think of the buildings
Men (mostly men) built,
After we invented elevators
Sometimes, when I think of you.

I think of the farms that disappeared
North of the city,
After they built the raised rail
And we could get there.

After the fifties, I’ve heard,
People started to dream
In black and white,
But now we dream in Hi-Def.

I figure the skyscraper
Has no idea what the world was
Before what it needed to exist
Existed.

I know the 4 train northbound
Rattling on its tracks,
Doesn’t think of the soft patter
Of hooves on grass.

I read somewhere
That we never could have
Dreamed in black and white
Before Daguerre showed us.

I can’t remember, my love,
My world,
Before you made it
What it always was.

AJAX File Upload UI Considerations

Friday, February 11th, 2011

I don’t often get into highly technical stuff on this blog (I generally answer long-form over at Stack) but this problem has been dogging me for years and I wanted to share the solution.

In context, let me start out by saying that my big project right now (ours – shout out to Wang.Media and the rest of the team at JaredWilliam) – is the build-out of a social-network.  One of the things we’re working on now is image upload, and this is certainly not the same time I’ve worked with images and file upload, but I decided this time to cut it elegant.  In this, I’m not alone – I wanted multiple image upload, progress indicator, and, of course, file checking.  I’m putting it all in a database.  That’s the easy part.

This network is interested in color, and I developed a program that will parse through the image file and build a palette out of the colors it finds.  Again, done. (I’m not brushing off those who might be wondering how to do these – just leave a comment).  The thing is, I was able to do all of these.  But as a UI matter, I had a problem.

The site seeks to categorize the images that are uploaded for site-wide galleries and search reasons.  The thing is, most users are very lazy – the idea of going back and tagging your information is just beyond many users.  For other sites, like Facebook, you just tag at leisure.  If you’ve ever used another site with a bulk-uploader, they might have you name a series or a gallery first, but in general, you are left on your own.  If you want to tag or need to, you don’t.  Never thought about this, actually.  But the reason has to do with synchronicity.  The thing is, if you’ve just uploaded one file, fine – pop the image back up and go with it.  But if you’re uploaded several, what do you do?  We could wait to the end and pop them all up – definitely considered this.  But it’s not ideal because now you’re wasting the users time when the item is up.

So, on a UI level, I needed to upload multiple images and then, when one was done uploading, it would pop up and you could edit and tag it.

I then added a div below whenever each new images came in, they would go into this popup so you could edit them as well.

The problem came up when the images came in at the same time.  Here’s why – and this is where it gets tricky – when you’re sending the XHR request up at the same time, you cross wires.  So if they both load at exactly the same moment, the popup pops up for the wrong image or, worse, not at all.  This is exhausting to say the least.  So, I did this:

onComplete: function(id, fileName, responseJSON){
 if (open == 0) {
  alignPopup('popup');
  aj('f=ajaxPhotosManager&id='+responseJSON['fileID'],'popup');
 }
 else {
  var newdiv = document.createElement('div');
  var divIdName = 'photoManager'+responseJSON['fileID'];
  newdiv.setAttribute('id',divIdName);
  document.getElementById('popup').appendChild(newdiv);
   if (req.readyState == 4 || req.readyState == 0)
  aj('f=ajaxPhotoManager&id='+responseJSON['fileID'],'photoManager'+responseJSON['fileID']);
   var newdiv2 = document.createElement('div');
   newdiv2.innerHTML = 'Update '+ fileName + '' ;
    document.getElementById('updateList').appendChild(newdiv2);
 }
 }


Here, we add a div below the uploader that will, whenever a new file goes in, create a link to open the popup to edit the image.

Automated, but not pushy.

And maybe people will do a better job tagging their photos!  We’ll see – will link to when the site is live next month or so.

My Market Assist

Thursday, February 10th, 2011

My good friend and sometimes client Oonagh O’Regan has tapped me to be head of Technology over at Market Assist.  It’s a really slick company and I’m very excited.  Sorry for the lack of new information otherwise!  Check us out at mymarketassist.com.