Archive for the ‘code’ Category

Leap Piano

Saturday, January 26th, 2013

piano

This is still in-progress, but getting there. My son and his friend came in and tried it – and they thought it was cool, so it must be somewhat. You can now play piano with the Leap – or, that is, a virtual keyboard with almost no control. I’m going to keep working on it, but it’s enough to know that while I’ll get some more accuracy out of it, the truth is it’s not going to get much more accurate using the methodology I’m working with – which isn’t to say it’s out of the realm of the leap to be that accurate – rather I have to really build some tighter JS to handle the math to do it right.
(more…)

LEAP Proof of Concept II

Tuesday, January 22nd, 2013

Check out my latest proof of concept here. This time, I use Canvas to parse the colors of a file (I’m putting an uploader in) that you can then practice tracing in the air. The idea being that for kinesthetic and for low-motor-skill developing learnings, this could be a powerful tool. I have gotten canvas to show the color at my “cursor,” though I still have to work through some alignment issues. Still in-progress!

Leap Proof of Concept Game

Thursday, January 17th, 2013

game

It’s here! I’ve finished my first proof-of-concept.

Check it Out

So, to explain… (more…)

LEAPin’ Lizards

Wednesday, December 12th, 2012

leaplogo

 

Yessss! I was accepted into the LEAP developer program. My Leap Motion controller will be here in a few weeks! The Leap controller is really exciting – it allows you to use 3D interactions with your Mac, PC, or Linux box. I’m hoping to develop some educational apps for it.

Plain-Text

Monday, July 16th, 2012

One of the things I used to deal with as a data architect was, “Well, why can’t we just send them their password?” And the answer was always long and complex. Now, though, even my most neophyte clients understand the importance of data-level security. They no longer flinch when I say, Even though it has never happened to me ONCE I plan every database and every site as though it were going to be hacked tomorrow. And yes, I still have clients – or would-be clients – who say, Well, that’s not very secure. Well, no, it’s not. The internet, while not the den of snakes that it’s often portrayed as, is not very secure. And if you don’t plan for the worst, you’re not planning at all. (more…)

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.

A WYSIWYG Editor

Wednesday, March 31st, 2010

As a small follow-up on an earlier post, I wanted to describe a simple methodology for building a rich-ish editor for your favorite web application. Let’s start, though, with the basic idea.

Why is this a big deal? Well, for most of us, it isn’t. When we use websites, we generally assume that the gnomes who edit and manage them use proprietary software solutions to update their content. Those more initiated folk will spit out names like Dreamweaver or and I won’t even link to it something far more disgusting like Frontpage. More involved users, however, know that most web publishing is done on things like this – blog software or CMSs. As it is often my business to build such beasties, I happen to know a lot about the latter. These are built by people like me, but almost never actually managed or edited by us. Instead, most websites you visit – from the New York Times to the Daily Kos are editing and managed by the content producers. These are the guys with BAs in English who wouldn’t know a tag from a dragonfly. A WYSIWYG editor is what makes that possible.

Old School

Websites from the 90s ROCKED

There are a few major options out there for these kinds of editors, and while most of them are decent, they’re all heavy. The most common, and the one I’ve generally used is MoxieCode’s Tiny MCE. Tiny MCE is neither tiny or Moxie. In fact, it’s brontasaurian by web-standards at close to 1MB, and it’s kind of ugly to implement. And while there are others both larger and smaller, they all suffer from the same grand problem – they’re too much or too little for my average client, and they seldom support the kind of custom solution I’m looking to implement.

Truly Custom What could be more custom than a few bold and italic links? Well, most of the time it’s a design issue. For example, my friend Bill edits a site I built called Dartmouth Undying whose purpose is to keep the “Dartmouth should never have gone Co-Ed” crowd from having too much power on the Alumni Council. Well, I designed a site for them that I thought was clean, elegant, green – everything Dartmouth is short of those fries over at the Hop. So, I used Moxie on the site and shortly ended up with crazy ugly… well.. bright colors and stars and dancing Yodas… well, practically. Why? Because he didn’t have, within his WSYWIG the design that I, in my infinite designerly wisdom, the styles that were meant for the site. And even if he had, he also had the myriad other things that that silly program did have – for instance, a stupid color picker. But now, I am happy to announce that I have one. Next post – the actual code and simple directions for those of you who might wish to implement the same.

A few lines of code…

Monday, March 29th, 2010

This has been messing with me for a long time, so I’m posting here:


seltext = (document.all)? document.selection.createRange() : document.getSelection();
if(seltext!="")
{
alert(seltext);
}

Basically, in my quest to create a WYSIWYG editor that wasn’t huge and unsavory (and worked well on Safari), I have been doing some major hackery. Well, the hackery ends – I can finally just fix it. Thank you Google and months of ignoring the problem!

(and, I finally get ternary operators!)