My Shadow

   following me
every day
   when the 
wind is at my back
   and I'm having a 
race I always win!

Olivia White © 2012

(Spelling corrected by dad)

Two Stories

My daughter has written two commissioned stories for classmates. I give you “A Pokemon Story” and “The Lonely Fish”:

A Pokemon Story

A pokémon named Pikachu was all alone. Just then his friend Zor came along and they played and played; and they played happily ever after.

To Ellis, from Olivia

The Lonely Fish

A lonely fish was swimming on his own; he was sad. Just then his friend decided to play with him. They played happily ever after.

To Dylan, from Olivia.

(Editor’s note: Spelling has been corrected and punctuation added.)

Rush Ruined My Dreams

I’m not a musician today because of Rush. I mean, how could I be? I spent my teen years listening to nothing but Rush.

If I had listened to Jimmy Hendrix, I could have said “wow, I want to play guitar just like Jimmy!” and taken guitar lessons; been inspired to emulate him.

I could have said “wow, I want to play drums like Buddy Rich” and taken drum lessons and become a good drummer.

I could have said “hey, listen to John Entwistle. I could play bass like that” and taken bass lessons and been a bassist.

But I listened to Rush.

I simply couldn’t decide who to be like. I would listen to a song and hear Geddy slapping away so masterfully on his bass and say “yeah, I want to be a bassist like Geddy!” Then, bam!, into the next song and I’d be completely in awe of Neil’s drums. “Yeah, I wanna do that!” Then, wah-wah-wah, Alex’s guitar would lead to new musical heights. Sigh. Yup, I wanted that too.

There was simply no hope; no possible way to decide. My musical dreams shattered by three maestros.

For the record, I still listen to them and I’ve yet to grow tired of any of their songs. And I’m very much looking forward to Clockwork Angels.

(If you’re wondering, yes there is a bit of hyperbole here; I am tone deaf and have no rhythm. I never had a chance.)

An Open Letter to My Dad

Dear Dad,

I need to apologize.

For all those times you were in your workroom quietly trying to work on something and I was there — at your elbow, over your shoulder, asking endless questions – I am sorry.

Having a 6 year old, whenever I try to work on the car or on some project around the house, she is there ‘helping’. Don’t get me wrong, I love her more than anything. And, I really do like having her help me. I enjoying teaching her the things you taught me – changing the oil in the car; rotating tires; fixing a faucet.

But honestly, sometimes I just want work. Uninterrupted. Sometimes I just need to finish the project.

So dad, thank you for your patience and wisdom and everything you taught me.

And I’m sorry.


A Question of Existence

I was upstairs getting ready to go out to dinner when my 6-year-old daughter called up, “Dad, which presents did you buy me for Christmas?”

I sensed a trap.

“I don’t remember,” I replied (which is the truth). “Why do you ask?”

“Well, did you buy me all of the presents I got?” she craftily asked. The trap was truly set.

“Of course not,” said I. “We bought you some; your grandparents bought you some. Why? What’s up?”

“Well,” she said, “I’m trying to figure out if Santa is real. If you bought me all of my presents then he isn’t. But if you didn’t buy everything that was under our tree he’s real.”

“Oh, of course we didn’t buy you everything. Don’t you believe in Santa?”

“Well, I believe in him, I’m just trying to figure out if he’s real. If you didn’t buy everything under the tree …”

Luckily mom stepped in to remind the girl which presents came from Santa that we, most assuredly, did not purchase.

CSS3-based Zoom Effect

The Goal: Create an effect where the content zooms out past the viewer, revealing new content ‘underneath’.

The Rules: No javascript; should work in modern browsers.

The Result: CSS Zoom. Works in the latest versions of Firefox, Chrome, Safari, Opera and IE9. (IE9 doesn’t support the transitions, but that’s OK.)

Caressing HTML

The HTML is pretty straight forward: a container and 4 boxes. (I opted to use HTML5 sections. The full file also has a <nav> element in there to provide internal linking.):

<div id="folio">
	<section id="p1">1</section>
	<section id="p2">2</section>
	<section id="p3">3</section>
	<section id="p4">4</section>

Stacking the sections is straight forward:

/* ==== Our container ==== */
#folio {
  position: relative;

section {
  display: block;
  position: absolute;
  top: 0;
  left: 0; 
  right: 0; 
  bottom: 0;
  opacity: 0;

Non-permanent Viewing

Now all four sections are the same size as the parent div, and are all sitting on top of each other. But only one should be visible at a time, and when the view changes the visible element should zoom past and fade out while the next one appears.

To handle the visibility I opted to set opacity: 0 for all of the section elements. So, when you first load the demo page you just see an empty box.

The visibility (via opacity) of the elements is handled via the :target pseudo-class:

section:target { 
  opacity: 1;	

So anytime a section becomes the target of a link, it pops back into view. To handle the reverse state — any section not the target of a link — I turned naturally to the :not() pseudo-class. (It’s OK if that isn’t natural to you; this is the first time I’ve actually found a use for the selector.)

section:not(:target) {
  opacity: 0;

Moving Pictures

But we don’t want to just change opacity from 0 to 1 and back again with some funky pseudo-classes. The goal was to have the current section fly out past the view to be replaced with the next one. Time to turn to CSS3 Transitions and Transforms.

To set up the timing function, I originally had:

section {
  transition: all 1s;

This tells the browser to transition all CSS properties from one state to the next over a 1 second period. For example, we could set section {color: blue;} and section:hover {color: red;}. The color change would happen over a 1 second period when the element was hovered on.

To achieve the zoom effect, we can use transform: scale(5);; this will scale, or zoom, our element 5 times its original size. Combine that with our opacity change and we have:

section:not(:target) {
  opacity: 0;
  transform: scale(5);

But, with the transition on the section elements the zoom effect occurred in both directions; when an element was no longer a target, it scaled up and faded out, but the target element could be seen scaling down and fading in. While that was cool on its own, it wasn’t the affect I was going for.

The key to unlocking the one-way zoom effect was to separate the timing function. First I moved the transition the section selector to the section:not(:target) selector. Then I added a second timing function for the section:target element and set it to affect opacity only:

section:target {
  opacity: 1;
  transition: opacity 4s;

section:not(:target) {
  opacity: 0;
  transition: all 1s;
  transform: scale(5);

The result: :target elements instantly scale to normal size, but slowly fades in, while the :not(:target) elements fade out as they scale up. (I set a slower time so it wasn’t jarring to have it instantly snap in before the out-going image was done.)

In the End

Take a look at the source code of the demo to see everything involved. The code above has been cleaned up for presentation — in reality to get all of the transition and transforms to work you’ll need to include the vendor prefixes (-moz-, -webkit-, -o-). You can also see some other CSS3 selectors in use, mainly :nth-of-type(), which was used to set the background images. Yes, I could have used ID selectors, but I didn’t want to. Also in play is background-size: cover to size the background images.

Lack of Understanding

Often there is a gulf between those of us in the Web Development / Design community and those wanting Web sites. Many people think web site are quick and easy to build and really shouldn’t cost that much. I present the following Craigslist posting in its entirety as a prime example:

Need new site written (Downriver)

Site must be able to: Search for a business name, and or category (ex: pottery) or by city to form a list of matches. once a business is selected, viewer will be able to see, a main page for the business, a photo gallery with text, a link to a pdf page, a yearly calendar, a link to the businesses other website, email, twitter and facebook links.

The business owner can edit their pages anytime they like, with a username and password, (that I can see as the admin in my admin pages). It should be written idiotproof for the novice computer user. Easily udated pages by either uploading a picture or typing text. NO FTP AT ALL ANTWHERE> in each admin page I will need a recap page that will be things like, show name, weather that day, that days sales, best selling product, etc. a yearly expenditure total and spending total.

If you decide that you can do this type of work, i wil provide you with more details.
Please don’t inquuire if you arent able to do this type of work, its a waste of your time and mine.
I will need someone who can start right away.

Location: Downriver
Compensation: I have a $600 budget

The kicker is, of course, the last line: I have a $600 budget. The poster is only off by about $10,000 or more; probably a lot more.

Sucker Punch – Unbalanced

, simply put, is that stories, jokes, photographs, etc. are all more pleasing when there are three parts. That’s why we have “a priest, a rabbi and an atheist walk into a bar…”; the holy trinity; the (link); The Pledge, The Turn and The Prestige.

The narrative arc of storytelling is also usually best as three parts: Exposition yields Rising Action yields Resolution (from Plot, Theme, the Narrative Arc, and Narrative Patters by Professors Ron Layne and Rick Lewis, Sandhills Community College). The Japanese call this Jo-ha-kyu.

You can even try it yourself. Imagine you are at a game rooting for your team. Try shouting “fight! fight! fight!”. Now try shouting “fight! fight! fight! fight!”. It doesn’t work. It feels off. And so does Sucker Punch. Zack Snyder presents a visually interesting piece, unfortunately it is out of balance with itself and the Rule of Three.

Warning: I’ll try not to include spoilers, but it just might happen.
Continue reading

Book Stop

Only twice before have I given up on a book. This time it was A Strange Manuscript Found in a Copper Cylinder by James de Mille. (The other two books were For Whom the Bell Tolls and Mists of Avalon.)

What stopped me was not the dated language — in fact I rather enjoyed that at first — no, it was them endless repetition of the same basic facts. One can only say “they loved death and hated life” so many different ways before it becomes tiring. And tiring it has become.

I’ll confess another hindrance: psychology.

When reading an ebook of short fiction, one expects the stories to, in fact, be short. Unfortunately, this ebook, The Golden Age of Science Fiction Volume VIII: An Anthology of 50 Short Stories does not indicate how long each “short” story is. Once I found out that Copper Cylinder was 291 pages long in the original, the wind was taken out of my sail.

I’d love to know how the book ends, but I just can’t make it.

Speedometer Usability

[I had a few article ideas in the queue and it's time to clean them out. This is the only one getting published, and it's going to be short and rough.]

My old car, a 2001 Mazda Protege5, had a poorly marked out speedometer.

It was marked in 20 mph increments, none which correspond to ‘normal’ speed limits. (The speed limits in Michigan tend to be 25, 35, 45, 65 and 70 miles per hour.)

Additionally, the second largest, unmarked, tick marks I was always mistaking as 5 mile per hour increments. For example, when glancing down I would see the indicator at the tick above 40 and assume I was doing 45. I would then need to remind myself that it was actually 50 mph.

To make things worse, if you look again at the photo, you’ll notice that there are only 4 minor tick marks between the 10 mile per hour increments. So, I could do an indicated 40, 42, 44, 46, 48 or 50. To travel at 45 mph I would have to split the difference between small tick marks.

The result: I spent way too much time looking at speedometer instead of the road.

(Photo of dash cluster from Mr. Jinks’ Flickr stream.)