The JavaScript Update

Pokey Joe,
photo submitted
by Happy Hyper Hikers

So I took AQ down for another Big Update. And, of course, some of you might ask.... what changed?

For the most part... not much. That was the plan too. =)

Long story short.... you can move widgets on My Page and sort people in trackers or boxes in a series with your smartphone now! Woo-who! =)

For the long version of the story, keep reading.... ;o)

Last year, I got an email from Google saying that the Google Maps on AQ will stop working. Definitely and definitively. They'll just stop working sometime in May at the very latest, and the reason has to do with a decision I made about 20 years ago. (Twenty years?!)

You see, I've never really known much JavaScript (or JS for short), and when I needed JavaScript to do a few tasks, I started using a JS library known as Prototype.

It's cool. It allowed me to create stuff like My Page--which uses all sorts of features that are enabled with Prototype. Opening and closing widgets, moving them around, etc.

BUT--apparently, Prototype is going to break Google Maps.

And at first I thought, "No problem. I'll just update to the latest version of Prototype. I'm sure whatever it is causing the problem is going to be fixed. After all, everybody wants Google Maps to keep working, right?"

And it had probably been about a decade since I've updated it. Why bother when it keeps working so well?

But when I went to look it up, I discovered that the JS library had not been updated at all for nearly a decade! The project, apparently, is all but dead. I can't just version my way out of this problem.

And somehow, I figured a number of you guys might be upset if I just let Google Maps stop working.

Soo..... Hmm..... I could try updating Prototype myself, but that's way beyond my capabilities.

There's another JS library known as jQuery. I didn't use jQuery originally because when AQ started, it didn't exist. It had, however, taken the world by storm and is by far the most used JS library out there. I think over 50% of websites actually use it. Maybe I should switch to using that?

Ugh, but then I'd have to learn all the nitty gritty details about how that works. What if this kind of problem shows up again in another 20 years?

There was another option, though.... why don't I just create my own mini-JavaScript library? There are a number of advantages in just ditching the established libraries. Mine would be much smaller (and therefore faster to load and run). I wouldn't have to add all the stuff that needs to be there for millions of people to use. I just need the stuff that *I* need to use! And if I use my own code, I can update it as often and whenever I needed. And I'll understand exactly how all it works.

But this meant.... I really needed to learn JavaScript in a fair amount of depth.

So I studied and learned.

On my development machine, I started updating small things--like the "here" button on location-based searches. Then progressively worked up to larger and more complex tasks.

One of the last things I dived into was drag-and-drop. I knew that would be complex, and the height of complexity would be My Page. I shuttered just thinking about how I would make My Page work so well without a library to do the heavy lifting. *shudder*

It's taken a month or two, but I finally got a working version up.

And... it's even better than before! I've improved it!

The vast majority of the JS that I used before--you shouldn't see any differences at all. Most of the changes are meant to be under-the-hood and out of sight. 

But after recreating the drag-and-drop functionality--a huge milestone in my book!--I wondered if I could improve it by making it work for smartphones. It's a little annoying that you can't move stuff when you're on a smartphone, right? It annoys me too! To be fair, Prototype was created before smartphones were a thing. There's a reason smartphones weren't really supported--they simply didn't exist when the technology I used was created.

But it seemed like something I could add, so I started working on it....

 And... well, I just couldn't make it work properly with a touch-screen device. Stuff happened, but I just couldn't make a smooth drag-and-drop motion with a touch-screen device. ARGH!!!!

Part of the reason was that the touch screen is meant for scrolling pages, and the motion to move the page sometimes interfered with the motion to move the object.

But I wasn't going to give up that easily. Nope. I had another idea. Instead of a drag-and-drop, what if I let someone tap the item they want to move, then tap where they want the item to go? So I added some event handlers and....

...it worked! I could move items around with a touch-screen! Then I figured that I could also do the same for mouse clicks, so I started working on that and realized I could combine both with a simple onClick handler. Tap on, tap off. So simple! Works on desktops and smartphones. The drag-and-drop isn't even really needed at all, although it doesn't interfere with anything so it makes sense to leave it alone for those people who are used to drag-and-dropping. That will still work.

Another thing that's advanced dramatically over the last 20 years is accessibility, and the sorting or moving of items still had a major accessibility problem. You couldn't move anything with a keyboard. Someone using a screen reader, for instance, and was completely dependent on the use of a keyboard, would still never be able to sort items. And with all my newfound knowledge, I didn't think it would be very difficult to add keyboard support for sorting as well.

So then I did that.

Oh, there were definitely difficulties along the way, but I worked through them and sorting can now be done with a mouse, touch screen or keyboard. They all work! The actual drag-and-drop still only works with a mouse, but maybe someday I'll figure out what went wrong and get it working with a touch screen too. Now that I'm using my own code rather than a JS library, I can edit it or make future tweaks as needed whenever I want. 

Photo submitted by Wronghat.