web dev

The Problem with Learning by Doing: DOM events

Leave a comment

Sometimes you learn wrong.

I’ve built myself a little music player that loops sections of songs pretty much as long as one could want. I’m asking the user to pick a minimum duration from 0 seconds to 1 day. This creates an interesting UI problem: the user probably wants to pick something in the realm of 5 minutes, but 5 minutes is only 1 pixel away from 10 minutes on this scale. So I wrote a script that will get and set the value of a range input logarithmically, so that the left 1/3 covers 10 minutes, the middle 1/3 covers 5 hours, and the right 1/3 covers 1 day. This works great, and the user has fine control within each unit scale.

This creates a further problem, though: the user needs real-time feedback of how I’m converting their input. To do this, I used the change event, which I’ve been using since I was born into JavaScript. It worked like a charm.

Then 4 days ago, it broke. Chrome broke it by fixing this bug. The behavior described in the bug report (from 2012!) was the behavior I had come to accept as correct. Fixing this bug meant breaking my code, to conform to spec! I had no idea, because I learned this by using it, not by reading the spec.

Should I read the spec of every new tag in HTML5?

Yes.

I’ve learned a lot by doing, but especially in a distributed development field such as the web, the standards do need to be read. A lot of people have broken up the spec into shiny chunks that are easily digested. However, in this case, I can’t find a single mention of the expected behavior of the change event for [type=range]. The spec draft at W3.org describes the change event for inputs, generally, as firing “when the value is committed, if that makes sense for the control, or else when the control loses focus. In all cases, the input event comes before the corresponding change event (if any).”

I had never even heard of the input event. This is the event that I should have been using in the first place, since I’m reacting to someone’s input, not their decision (which would be the change event).

I will continue to learn by doing; I can’t help it, and I can’t do without it. But, the next time I’m aware that I’m doing something new, I’m going to jog over to W3.org to check that I’m leveraging stuff that’s going to be around for a while.

journal

Philadelphia Story: Regular Insights

Leave a comment

Ever since I first saw Philadelphia Story–I don’t know when, at about 12–I regularly return to the dialog, either on screen or in my memory. Almost every time I do, and anyway with surprisingly long-lived regularity, I find a new meaning layered into those lines.

The frequency of these little revelations has dwindled, naturally, so that now whenever I do find something new, it’s accordingly more special. Today while doing dishes I was recalling this bit of banter, and surprised myself with a new angle. I decided to start recording this process, since it seems like it will never end. I’ll have to retroactively mark down some of my past discoveries.

Under what name do you publish?

My own: Macauley Connor

<stifles laughter> What’s the “Macauley” for?

<an incredulous glance to Liz> My father taught English history. I-I’m Mike to my friends–

–Of whom you have many, I’m sure.

I’ve always loved that volley:

  • She’s making fun of his name, as if he’s putting on airs with “Macauley”.
  • Her last line here is bulletproof: she’s paying a complement, but actually opening the question of whether or not he has any friends, which he never said anything about.

And the bit that came to me tonight over dirty dishes: 

  • He’s trying to shed the arrogance she’s assigning to him, by offering his nickname; but she won’t let him.

Until next time.

drawing

Color Sketch (11 Second Club concept)

Leave a comment

I don’t often get into color, and given how slowly my work progresses in these monthly challenges, I probably should leave it out entirely.

However, along with my strategy for designing the characters before I figure out a story for the month’s sound clip, today I felt like I should try to peg the atmosphere a bit. Here’s a color sketch that’s supposed to be…well maybe I’ll save the description and see how many of you can figure it out.

Here’s a non-hint: he’s neither vampire nor covered in blood. It just kinda turned out that way.

drawing

character designs

Leave a comment

Trying to put faces/bods to voices for this month’s 11 Second Club competition. I’m starting with the characters, and then I’ll figure out the story. I still don’t have a workflow ironed out for this kind of work. I should probably look up Aardman’s “overheard” series, or whatever those were called, like the police station and the magazine editor’s office.

drawing

Figure drawing on a tablet PC

2 Comments

These were drawn in MyPaint a free paint application for Linux, on a Lenovo X230 tablet running Ubuntu. The whole experience was pretty fun. I picked up the machine from UPS on my way to work this morning, and went to the figure drawing session on my way home. I hadn’t installed any paint applications yet, so I downloaded MyPaint over wi-fi at the studio and started drawing. I spent about half of the shorter poses figuring out a system to change brushes & save my work without leaving tablet mode.

In the end, I’m pretty happy with it as a drawing tool, and this is without much customization or any paid software.