How to use YUI Slider

Once upon a time...

At IMVU, we've come to rely heavily on YUI Library. We use it in the website for features such as the avatar card, the message widget, and the music store. It also plays a major supporting role in the user interface of our 3D client application (we embed XULRunner).

IMVU's agile atmosphere is such that the day we discover a new and cool technology can be the same day we ship product which includes that new and cool technology. As a result, we don't always RTFM. We learn by doing. We learn by failing. It's exhilarating, although sometimes the road is a bumpy one. YUI's Slider component was one of the bumps along the way.

It's easy, right?

Our 3D application has a tabbed interface, not unlike all popular web browsers. Internally, we refer to these tabs as modes. In our Settings mode, we needed a slider for adjusting the volume of voice chat. We chose YUI's Slider to satisfy that need:

The code was simple:

<div id="sliderbg">
   <div id="sliderthumb"><img src="thumb.png" /></div>
</div>

YAHOO.widget.Slider.getHorizSlider(
   'sliderbg', 'sliderthumb', 0, 200
);

Unfortunately, we found that the slider's thumb was always 20 pixels out of alignment! It fell too far off the left edge, the right edge, or didn't go far enough. The hacks and programming acrobatics that ensued in attempts to compensate were as far from simplicity as they were from sanity.

It's easy if you pay attention.

Fast forward a week or more later, and I decided to crack open the YUI Slider documentation. It took me less than five minutes of reading to realize exactly how we were doing it wrong. They key passage was this:

"In typical implementations you will need to make the background width equal to the total number of pixels you want the slider to be able to move plus the width of the thumb element."

It was accompanied by the following diagram:

Who knows why the initial maximum value had been set to 200. Everyone who came after assumed it was correct. It's a nice and even number. How could it be wrong? We failed to consider the relevance of the source art's dimensions:

The background was 237x24 and the thumb was 17x24. This of course meant that the maximum value we should have been using was 237 - 17 = 220. Suddenly a certain magic number wasn't so magical anymore.

Art isn't fartsy. It's important!

If you're mindful of the dimensions of your source art and the simple math described above, you'll have no problem using YUI's Slider component.

Subsequent to this discovery, I re-cut our source art and removed the padding around the edges of our chat volume background and thumb art. This wasn't strictly necessary, but it allowed the use of a maximum value of 200. And 200 is such a nice and even number! I'm a software engineer. I have my reasons...

Below are some examples of correct and incorrect maximum values for their associated background and thumb art. I also threw in something a little more interesting for fun. View the source for details.

Enjoy!

http://is.gd/cN5dc

Poisonous devices

Phones

Sometimes, it's nice when friends and family call. I've even been pleasantly surprised by strangers before. Other times, people call me for the wrong reasons and at the wrong times. I used to believe that when phones ring they must be answered, but that's no longer the case. A phone is an assistive device. If it's not assisting me then what value does it provide?

I used to be terrified of phones. After a part-time job which required a lot of phone time with strangers, that terror went away. Except that in hindsight I don't think it did. It was always stressful. I simply grew to accept that stress.

Over the years I've been tuning my phone usage. I used to answer every call because it was about facing my fear. Then I answered every call because... that's just what you do. It's a phone! Then I realized that it's not my job to answer the phone. This was an important realization for me, because that part-time job had programmed me to believe that it was. I began answering the phone less and less.

These days, I hardly ever answer my phone. One huge source of stress: gone.

This sometimes means I miss calls from friends and family, but ultimately the people I know and love have many ways to reach me. If a chat on the phone is absolutely necessary, it will happen. Eventually. If it's a call from a stranger about random crap I don't care about, guess what: I win. You are unlikely to call me again.

One of my favorite things to do is to turn off my phone. Especially when I go to sleep. Often I'll turn it off when I get home after work as well. And it's fantastic. Especially the part where I'm never jarred awake in the middle of the night.

Clocks

I used to have a watch and I would look at it all the time. If I'm at the bus stop waiting for the bus, I'm checking my watch. If I'm at work and wishing that lunch would come, I'm checking my watch. If I'm wishing work is over so I can go home, I'm checking my watch. If I'm waiting for a friend to come over, if I'm waiting for a show to come on, if I'm trying not to stay up too late...

I decided that looking at clocks is stressful. How about I just change how I'm living so I don't need to look at them? That's what I do now. I engineer my life to alleviate stress and to optimize fun and learning.

For example:

• I don't look at bus schedules anymore. Instead, I get enough sleep, wake up refreshed, and walk over to the bus stop when I'm good and ready. This is usually hours before I need to be at work, so I'm never in a rush. I listen to music while I wait, enjoy the cool morning air, and watch the birds while I munch on an apple. Some mornings are foggy and wet and some are bright and warm. I notice and appreciate them because I'm not late for work, I'm not tapping my toe, and I'm not constantly looking at my watch.
• There are dozens of ways to alleviate stress at work, and I ruthlessly identify and crush them. As a result, I'm not wishing lunch would come quickly so I can get a moment's relief. I'm not wishing the day would end so I can go home and get a few more moments of relief. I've made my work incredibly satisfying. When lunch rolls around, it's usually a happy surprise. Same thing for the end of the day. So much so that I come into the office on weekends because it's an enjoyable part of my life that I want to experience daily.
• It turns out that once I alleviated so much stress in other parts of my life, I also alleviated boredom. For me, boredom was the end result of living in a constant state of stress. This may not make immediate sense, but when I was in a constant state of stress, I was always doing one of two things: stressing or recovering. In that mode of living, I was never actually spending time on myself, either by having fun or by feeding my mind with fulfilling personal learning. Even when I thought I was doing these things, I really wasn't. In that severe state of stress, I believe there was no fun or personal learning. There was a heavy weight which pushed me down and which permeated everything I did. What I thought was fun or learning was instead "escape". Enter boredom: when escape velocity was not sufficient to outmatch stress.

Whenever I think about clocks, I think about the rabbit from Alice in Wonderland. I don't want to be That Guy, running around, worrying his head off, with precious little time to spend on himself. I'm valuable to myself, so I make plenty of time for me.

Alarms

Alarms are like clocks, plus a punch in the face. If I don't like waking up in the middle of the night when I'm not done sleeping, then I don't like waking up in the morning when I'm not done sleeping either. How about I just get enough sleep so that I don't need an alarm?

I have also learned that caffeine is the catalyst for my own personal hell (another poisonous device!) It kicks off a vicious cycle. I drink caffeine. I am amped. I come down off the high. I drink more. It's late and I'm full of energy and my body's burning calories so I eat. I now have even more energy. I stay up late. I have to get into work early so I set an alarm. Too few hours later, my alarm punches me in the face. I drink caffeine to jump start my system. And away we go...

As I mentioned, I turn my phone off when I go to sleep. It's not entirely a coincidence that my phone is also my alarm (iPhone.) I turn it off with purpose. When I'm sleeping, phone calls and alarms are equivalent. Depriving myself of sleep does not improve my life. I control my phone, therefore I choose to improve my life by turning it off when I'm sleeping.

Alarms should be used for alarming circumstances. Like fires. Not burning to death is a good way to add value to my life. Other alarms, not so much.

Right the wrongs

It's difficult and painful and time-consuming to switch from a habitual lifestyle of bitching over to one of fixing, but it's possible to change. My first impulse when encountering foreign and confusing code has always been to complain about it to someone, immediately. It's such a dumb and mindless thing to do, but I've done it a million times. On some level it's about camaraderie. Wah-wah, it sucks, let me cry on your shoulder. You understand how awful this is, right?

My first attempts at correcting this behavior focused on the wrong thing: demeanor. It's not bitching if I'm calm, collected, and diplomatic when I say it right? It's okay if I try to trick myself into thinking I made an attempt, but was mostly silently seething to myself, and then came to you for help right? What a passive-agressive waste of someone else's time. There's help and then there's hand-holding. Instead, my focus needed to be on solving problems, not the injustice of hard ones and trying to foist them on others.

This video http://www.youtube.com/watch?v=k2h2lvhzMDc (Ed Catmull, Pixar) reminded me of useless bitching (the kind I envision "mediocre teams" would participate in) and that my programmed response in the face of difficulty should be one of reason and action rather than victimization. It's not that someone intended to punch me in the face with their code, it's that the target has shifted and I need to correct course. It's not about personal vendetta, it's about what works and what doesn't work.

This is my reminder to myself to be intelligent and thoughtful and to right wrongs rather than wallow, sidestep, or avoid. I righted wrongs today, and it's awesome.

I am posting to my blog. Stop.

I am kind of amused by people who end their emails with their name. Your name is in my contact list. I can read the From: field. I know who you are.

Even more amusing is when they end it with a single letter. Is that supposed to be a signature? I don't get it. If you're going to use a signature, make it cool.

For example, there's this guy who "signs" all of his CSS with this:

c(~)

It's a mug of beer with a handle and sloshitude inside, see? Awesome.

I don't like IDEs anymore.

I spent seven or eight years using Eclipse as my primary development environment. I never really questioned it until I switched jobs and saw some of the mavericks using Emacs, Vim, and command shells. I decided to become fluent in Emacs, and have been using it daily for the past couple years now.

Thinking about it now, it's most interesting to me that I never looked back and said "Gee, life was so much better back in the IDE days." Hell no. In my mind, Eclipse is a sofa and Emacs is a treadmill. I have a goal, I'm on task, I know what I want to do and I do it.

My big fancy IDE mentality was all about victimization, blame, and laziness. "Big fancy IDE crash! No my fault." "Big fancy IDE get confoozed and lie! I do bad thing, oops!!" "Big fancy IDE slow on big project, me play while wait!" "Big fancy IDE big and fancy! It break, I no no why. I confoozed."

My Emacs mentality is scientific, hands-on, and active. I can count on one hand the number of times GNU Emacs has ever crashed on me. Emacs doesn't happily chew on gigs of files in the background, caching data that I could give two shits about. When I want something, I ask for it explicitly. My UX isn't impacted by background tasks that are attempting to read my mind, because there's only ever one task: the one I'm doing right now.

Being born into royalty and pampered for so many years feels nice, but over time it just turned me into a fat lazy slob with a soft mushy brain. It trained me to surrender my critical thinking skills. Emacs and command shells forced me to learn how to tie my own shoes and make my own meals. I enjoy the independence and self-reliance.

---

I tried Komodo today, at the recommendation of a coworker, and it has a nice polished look, but it reminds me too much of Eclipse. The editor looks as though it is based on Scintilla, which is cool. I am a fan of SciTE. The background churn as it attempts to cache everything under the sun makes the UI sluggish and choppy, which blows my mind. I'm running a quad core with buttloads of memory on an SSD. Come on, man. Seriously?

These are only my first impressions, so I'm going to keep at it for at least a couple weeks to get a real feel for it. Maybe I can right some wrongs, but I get the sense it's never going to feel as light and razor sharp as Emacs.

Celebr-Asian

I've been fascinated by Eastern culture for as long as I can remember. With every passing year, more of that culture seems to become a part of my life. This post is one part enumeration and one part celebration.

1. I love fighting anime and have seen every episode of Dragon Ball Z. I have seen all of One Piece (personal all-time favorite,) Bleach, and Naruto, and I stay current.
2. I taught myself to use chopsticks both left- and right-handed.
3. I own a Zojirushi rice cooker and eat a plain bowl of rice daily.
4. I own a Zojirushi water boiler and use it frequently for oatmeal.
5. Shin Ramyun are my favorite instant noodles and I keep my kitchen stocked.
6. I spent three months in New York with my Fujian girlfriend (now ex) and her three Asian roommates.
7. I teach myself Mandarin (slowly) and have a subscription to ChinesePod. I've memorized Liang Shan Bo Yu Zhu Li Ye and have sung it before during karaoke with my ex-girlfriend and a dozen or so of her Asian friends.
8. I have been a paying member of crunchyroll for over two years.
9. I have been drinking bubble tea almost daily for the past 3 years. I get most of it from Loving Hut, which is on the same block as my office in downtown Palo Alto, CA. I learned how to make it at home as well.
10. I do Pincha Mayurasana daily, and can hold it for either two minutes or 10 pushups worth. Lesser known is that my inspiration to do so came from the character Zoro in One Piece.

Eastern culture truly permeates my life, and I appreciate the role it plays on many levels. In tribute, I summon my rhyming and songwriting skills! Sing along with me, won't you?

Sweatdrops on foreheads and tidings from kittens;
Tigers a-crouching while dragons lay hidden;
Red paper envelopes brimming with bling; Asia is full of my favorite things.

Rose-colored petals and climactic doodles?
Green tea and pearl tea and bowls full of noodles;
High kicks that fly from the legs of Bruce Lee;
Asia is full of my favorite things.

Girls in school uniform, pigtails, and glasses
Saving the earth while they ditch all their classes;
Chinese and Japanese insanity;
Asia is full of my favorite things!

When the dubs bite,
When the plot stinks,
When I'm feeling had,
I simply remember that Asia is king
And then I don't feel so bad!

^_^;

Timeboxing results

This is part eight of a timeboxed series. [ 1 2 3 4 5 6 7 8 ]

In my kickoff post on timeboxing yesterday, I challenged myself to crank out 7 blog posts in one "night," with the constraint that I spend 30min on each. Herein are the results of that challenge.

Summary

So, was I able to pull it off?

It got difficult toward the end, but I totally did it. And I am really happy I did, because it was incredibly satisfying.

To summarize quickly, the first 3 or 4 posts were kept within 30min, and they started taking 45min to an hour afterward. I found I had to take 15min breathers to recollect my thoughts and try to stir up additional topics and calls to action.

The hump

There was one pronounced hump around 2am when I had 2 posts left to go, and I was seriously doubting whether or not I wanted to stay up and finish them. Partly because I was tired, but also because I was running out of steam.

I finally decided to do it, and I think having pronounced that I was going to do it helped a lot with this. I had just announced I was going to do, so not doing it felt like wussing out. My goal was pushing it, but it was definitely attainable.

Once I had made up my mind, a lot of stress vanished. I find that rather interesting, in hindsight. Just the power of pulling up my britches and getting serious actually made it feel easier.

Overall quality

I was dreading reading back over my late night 7 post scramble a little bit. However, having just reviewed them all now, I gotta say: I'm pretty damn impressed. Everything was 90% of the way there, except perhaps my last post, which felt good, but aborted.

I added some content and changed a bit in a few of the posts, but by and large I was making typo corrections and adding in useful headers to draw attention and break things up better. Sometimes I would use certain words repeatedly, so I'd cut them and balance it out. Sometimes I'd draw attention to something above when I meant to do so for something below. Really trivial stuff.

Unmitigated power!

Here's what I liked the most about this timeboxed posting spree: it really focused me and made me feel like I was exercising a lot of untapped power.

What if I did this every night, in the same way I rhyme, draw, or work on my posture? It's a compelling thought, because I can see developing a high level of skill in writing in a short amount of time. It really is a feeling of power!

And it also makes me think. What other skills could I have if I really wanted them? And what doors would they open?

Try it!

I'm going to start applying timeboxing more in my life, due to my findings in this little experiment. I would urge you to do the same, even if for a short period, if only to feel what this is like. Sometimes all we need is to experience what things could be like in order to ignite change.

Timebox a series of tasks, with a sincere intent and a dutiful hand. You won't be disappointed!