Flush — A Design Blog by Ivan W. Lam at ivanwlam.com

I’ve been taking care of other aspects of my life for the past week or so, and today I was able to spend some time to continue building my Flash Experiments Portal. Honestly, I did not expect something that looks this simple to take so long. But I think that it’s a design worth pursuing, partly because in the process, I’ve learned some stuff in JavaScript that it made me realize that I have a love-hate relationship with JavaScript, just like with ActionScript and Kinko’s.

The image above may not look that different from the one before, but I’ve added many features, all of which are exclusively in JavaScript and would still function like before if JavaScript is turned off or is not available in the browser.

First, I made all the “frames” fit to the length of the text but also rounded them up to the next frame. If I had just left it at auto, the frames would not end at the grid lines, which defeats the purpose of having the grid.

Then, I added up all the lengths of the frames in each row and determine the minimum page width I need to display all the frames in their own row. If I didn’t specify the page width, the frames would actually start floating/stacking under the layer names. That doesn’t happen in Flash, of course; I just used the float trick to make it look like Flash, but it certain doesn’t behave it like it.

Finally, I made the boxes where the layer names go have a fixed position so that as you scroll to the right for more frames (if the row of frames goes longer than the page width), the left side stays there like in Flash.

I spent a good chunk of the day working on this locally, and it seemed to work fine in Firefox and Opera, with a little bit of glitch in Opera that I fixed relatively quickly. But when I uploaded it to the site, Opera seemed to have completely ignored my JS, so now I have to figure out what’s happening there. And IE has the same situation as last time. Inconsistencies with paddings, margins, and border widths among browsers are a pain.

Nonetheless, I made real progress today, especially in my JavaScript skills. I’ve become more comfortable with arrays and for loops now. Scripting is so powerful; I can’t wait to learn all the other kinds.

Flush.