Due to a technicality (I had a medical emergency which involved eight injections. Ouch.), I flunked Hell Week. And interestingly, (a sign, perhaps?) B was not available for the toy run-slash-code meet that was to follow the test. But since now I had the opportunity to continue, I shall do so.

Here, after a few width and text properties on the header section, plus a few border sections on the main content area, we see more similarities. (For the pic of the original layout, I direct you here.)

The Header and Main Content Area are now aligned.

When the header was finished, it became easier to line up the main content by gradually increasing the negative margin and testing. I wish I could peek at the original values I typed in the first layout but it’s not allowed in the rules. (Of course, you may suggest that I take the measurement using other means…)

Now we continue on towards the sidebar elements.
The elements sit inside a “sidebar-wrapper” of sorts, and then they are arranged by floats inside the wrapper to look like so:

Now the sidebar elements are lined-up and styled. But there's a gap!

As you can see with this progress shot, the basic shape is almost finished. There is a big gaping problem of the border of the main content not reaching the end of the page(if the sidebar were to be shorter, the reverse would happen). This is, as I have mentioned before, is because divs do not expand beyond the content(and padding). The flanking sidebar trick by Craig Granell in his book Essential Guide to CSS and Html Web Design can be adapted to help solve this problem. A bit of tweaking on the respective divs’ padding-bottom, margin-bottom and the overflow of the parent container, and we have:

Now the main content is stretched down, and the borders are not broken.

This trick of course, just ensures that the two columns, sidebar and main content, match up to which one is the longest. If both are short, the layout will still collapse. I had to add a min-height value to the layout’s primary wrapper to prevent a collapse beyond the bottom of the navigation menu. Here is what it looks if I blank out the main content and sidebar areas:

This is what it looks like when empty. Min-height prevents layout from collapsing too much.

Aftermath

Other a few quirks on the font sizes and whatnot (I’m still not satisfied with them, and will still be replaced further on), I have managed to emulate my old layout. If I had worked on Hell Week as I was supposed to, I should have been able to finish the challenge by day 2, (or day 1 if I had worked longer).
Lessons learned? Well, B was right on the crutch thing. I had difficulty recalling the properties I used while making the original layout. I’ll probably skip using WYSIWYG (even the coding mode, which is what I use in there) on the foreseeable future, except for cases when time is of the essence.

To recap  the story from before…

The challenge was to recreate a layout I made without resorting to a WYSIWYG application (specifically, its context-sensitive prompts in the coding mode).

This is what it looks like.

The original.

The logs

The following is a series of notes periodically typed in while I was working, which is why they feel disjointed.

3:15 pm
Late start. Exceptionally hot weather, electric fans on high and mentholated sugar-free gum to keep me in focus, check.

Okay. Layout is composed of divs representing sections of the site, plus a wrapper(fixed width design). CSS handles the layout’s positioning.

The coding of the divs went smoother than expected, since I still remember what I did beforehand.

…although I missed a few closing tags on the first code-in, a cursory glance revealed two mistakes, fixed. I kinda hate it that B was right that the auto-closing of tags is pampering me of sorts.

Okay, so after coding the layout and adding filler content, went to W3C markup validation service and tried out my stuff.

I had to refer to a document to completely add the doctype and character encoding declaration (I hope B will cut some slack on this one). But, the result passed as XHTML Strict, with one warning: “Info Using Direct Input mode: UTF-8 character encoding assumed”. This is most likely because I copy-pasted the code into the direct input validation box.

The barebones XHTML is done, with divs properly ided to their respective duties.

Btw, style-less, the layout looks like:

Still unstyled. This is also what you see if you turn styles off.

3:49 pm
After a bit of log typing, jumping on to CSS.

…and immediately, the point of B’s insistence on the exercise again slaps me in the face. Yes, my mind had difficulties recalling the variety of CSS properties available. I had to ask if referring to a function list is allowed in the rules. Now waiting for the reply.

…doing other IRL stuff to stretch a little. And maybe grab a bite.

…B replied to my question in the middle of grub n’ caf. Green light on the using references.

5:00 pm
Back in the saddle. Firing up Daft Punk’s Tron Legacy Reconfigured on the side.

…turns out a the meal break was what I needed. Most of the properties came back to me, and I was back to styling, with an occasional glance on references.

Time to discuss what the css must do:

The layout puts the header to the side, with the biggest(and for now, the only) splash image set as its background. The content panel is next to it, and the sidebar elements (which is the main navigation menu and the actual sidebar, inside a sidebar-specific wrapper) is underneath it. The footer remains in its standard position.

The elements are positioned using floats, lining them up together using the magic of negative margins. The content section actually overlaps the header.

To give the site a partial feeling of ‘solidness’, borders of varying thickness are active in a few corners. For the content area, I left one side open to give the site a open-ended feeling (even if it isn’t).

Since the floated elements collapse when empty, a trick using margin-bottom, padding-bottom, and overflow is applied in order to the columns to keep the border elements of the same height, and the border lines connected to each other. (It’s the flanking sidebars technique mentioned in the book THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN, published by friends of Ed/apress. However, I did not follow the instructions in its entirety.)

I favored this type of design because other than the humongous splash image and the patterned background, there are no other images required for the layout. In the case images don’t load, the default color scheme and the borders remains the same, albeit with a gap on where the splash image should be.

…well that’s it in theory. B actually suggested trying to style ‘in the dark’ for an extra challenge – compose the basic layout before launching it on a browser. Kinda like the exams where you write code in paper, forcing you to figure out how things will work only using your head. I prefer styling a single part first then looking at the result, but it couldn’t hurt to try.

…and oy. Look at that.

What is this?!?

As you can see, the things do not line up properly yet, but the layout is beginning to take shape.  Several elements are still missing crucial styles, and the borders (and the margin/padding/overflow trick) is not applied.

We’ll just have to see what happens on Day Two.

Day One experiments ended at 8:30 pm.

Yesterday was one such day, and over afternoon coffee, I showed him the basic layout of a site I’ve been working on  (in html form, since the I was past the graphical mockup stage by this time). During the discussion, he asked on how I did it, and I mentioned working on it using a WYSIWYG.

And chaos ensues.

You see, B firmly believes that excessively relying on WYSIWYG for such work can dull one’s mind in terms of code  familiarity (Of course, really relying on the WYSIWYG mode can, but he insists even working on the code view with context-sensitive popup assists can be also damaging). To prove his point that I have been relying on such a “crutch”, he suggests going on a “HTML Hell Week”- recreate the layout again, with only a screenshot, the image assets, and a text editor- no fancy tools. As the name suggests, I have a week, although in reality I only have a working week- five days starting tomorrow- until our next toy run this coming Saturday. His final piece of advice was that I keep after-action reports of the coding progress here on the blog.

I really don’t know what to say, since the challenge came from out of the blue, and I think the layout is quite barebones compared to most (I’ll try to post a pic later) but B has been sage-like when it comes to things like this, and most things I say come back to (pardon the term) bite me in the ass later.

So yeah, an early start tomorrow, and  I have the night to work on other things…

Manual Labor

It is the simplest of the methods, just creating a style for  odd rows, and manually applying it:

<tr class="odd"><td></td></tr>

but really, this isn’t the way to go. And besides, what if the data in the tables is dynamically generated? How can I apply it?

By the powers of CSS

Or I could use CSS, with the nth-child approach. Lets say we have this table, which has fixed values, just for example:

   <table border="1">
        <thead>
            <tr>
                <td>Number</td>
            </tr>
       </thead>
       <tbody>
            <tr>
                <td>one</td>
            </tr>
            <tr>
                <td>two</td>
            </tr>
            <tr>
                <td>three</td>
            </tr>
            <tr>
                <td>four</td>
            </tr>
            <tr>
                <td>five</td>
            </tr>
       </tbody>
    </table>

Let’s just say I wanted to stripe all my odd table rows in all of the tbody with the same colors, with this style:

tbody tr:nth-child(odd) {background: #06C}

And I would not have to touch the tables. This is what I wanted to use, but won’t work on IE (The comparison screenie below was tested on IE8 and FF6).

And it was specifically reminded to me that IE and Firefox were the browsers to consider on this problem.

Or you could always drop a library on it

While googling, I also noticed suggestions to use jquery instead, because it has a nth-child selector of its own and it works on IE. I don’t know much about jquery yet, but I figured it wouldn’t hurt to try.

So again, with a sample table, this time assigned the class stbl (because what if I wanted to style one table and one not?):

    <table class="stbl" border="1">
        <thead>
            <tr>
                <td>Number</td>
            </tr>
       </thead>
       <tbody>
            <tr>
                <td>one</td>
            </tr>
            <tr>
                <td>two</td>
            </tr>
            <tr>
                <td>three</td>
            </tr>
            <tr>
                <td>four</td>
            </tr>
            <tr>
                <td>five</td>
            </tr>
       </tbody>
    </table>

So this is what I used, after reading on the nth-child docs on the jquery site…

    $(document).ready(function() {
       $(".stbl tbody tr:nth-child(odd)").addClass("oddstripe");
    });

which, if my limited knowledge is correct, is looking for the elements classed as stbl, specifically at odd numbered tr inside the tbody, and upon finding one, applying the following css style:

.oddstripe {background-color: #06C;}

and here is the screenie of the result, using the same two browsers used for the CSS only approach.

..in both instances I can see the table style. I just hope this solution might be of use.

edit:
The original article has the second example table assigned with an id rather than a class, and since that doesn’t feel right, it has been replaced. The jquery script has also been replaced slightly, looking for .stbl rather than #stbl so that it looks for class rather than id selector. My bad.

var somethin:SomeObject = new SomeObject();
somethin.x = somenumber;
somethin.y = somenumber;
somethin.width = somenumber;
somethin.height = somenumber;
somethin.scaleX = somenumber;
somethin.scaleY = somenumber;
//properties go on and on...yadda yadda
addChild(somethin);

It gets repetitive the more objects are involved, so I tried to compress the lot. This is what my addled brain was able to concoct :

function propConfigurer(prop:MovieClip, xVal:int, yVal:int, wVal:Number, hVal:Number,
                                          saXVal:Number, saYVal:Number, rotVal:Number, frameVal:int,
                                          isButton:Boolean, filterArray:Array):void{

      //set the x,y location of background props.
            if(xVal != 0 && yVal != 0){
                prop.x = xVal;
                prop.y = yVal;
            }
        //basically, the rest of the lines do the same thing, configuring the property of prop, so we skip it
}

So this function takes a “prop”, or a symbol instance, then a bunch of numbers for x position, y position, width, height, scale x, scale y, rotation, a frame number to jump in(if symbol has multiple frames),  a boolean for determining if the symbol is used as a button, and an array holding filters.

Setting zero on the int and numbers or false on the booleans ignore the specific section of the configuration.

So to replace the code for somethin (the bit of code way on the start of the article) it becomes essentially like this:

var somethin:SomeObject = new SomeObject();
propConfigurer(somethin,512,250,0,0,.55,.55,0,0,false,null);
addChild(somethin);

Somebody will probably smack me on the head with ruler for an abomination of a code like this, but here it is…

While it is perfectly possible, and much more easier to start work on a e-manual using plain timeline animation, I figured it will be harder to tweak later on if I had to rearrange a few topics here and there. So I decided to put a little bit of actionscript into the works.

Stack it, baby

To put it simply, most of the code’s work is to instantiate stuff (cookie cutter symbols from the project library), arrange them in order, and display them. While a straightforward stacking of symbols comes to mind (think of a pile of books), the more elaborate the setup, the more symbols to juggle around. It’s bound to be a mess.

So while planning the whole thing, I opted to distribute the stage elements to containers, based on its purpose for the manual.

There will be a container for the background, which will hold symbols relevant to it, a container for the foreground, which will probably hold stuff for the e-manual contents itself, and a container for the button, which probably needs no explanation.

For me, things will be a bit easier since I will just call on a parent container, and out pops the whole set. If the container is not needed any more, a removeChild on the parent will take down everything in it.

But of course, inside the containers, they will have to arrange their children by code:

var somethin:SomeObject = new SomeObject();
somethin.x = somenumber;
somethin.y = somenumber;
somethin.width = somenumber;
addChild(somethin);

You get the picture.

When the amount of symbols grows, so does the number of lines. Not really a good sign.

In note3, I try to reduce the evil, repetitive code. So see you next time-

Project Echo was a proposal for a visual training aid to be used for internal corporate instruction. It was supposed to be an extra tool that trainees can refer to after they have undergone training seminars, as I’ve been told. I was instructed to create a navigatable show that highlighted important points of the seminar, mixed with dancing cutouts of various trainees to act as guides for the topics.

For this project, I used the simplest method I can think of,  straightforward timeline animation, with scripts embedded on the frames themselves.  Work consisted of illustrating the assets to be used on stage, and animating it via tweens.

The only real problem I had was at the length of the entire show. I was not aware of Flash’s 16,000 frame limit, which of course gave me a migraine when my movie suddenly stopped without any warning whatsoever. After a exhausting search of whether I dropped a stop(); statement somewhere where it should’nt be, I solved the problem by accident when I deleted a section of the movie while doing tests, and realized the point where the movie stopped changed, going further on before skidding to a halt. After a long chat with Uncle Google, I eventually found other guys in various forums having the same problems, and  this Flash CS4 Help Article explaining the thing. Finally, just to be sure, I counted the frames I’ve used (I subdivided it into scenes, so editing can make sense), and yeah, I went over 16k frames. Thankfully, the end product specifications for Project Echo were lenient, so I split the movies by topic groups to bypass this problem.

So the end result had a user select a topic from the list of movies, and simply click on play and watch. The client liked the format, so he went ahead and had a test audience go through the whole thing. A few weeks later, the results were in,  but they were far from satisfactory. The test audience didn’t respond well to straight forward animation, preferring to have something more akin to a manual rather than a tv show. So, the client asked me to worked on a second iteration of Echo, this time letting the user have more control on content and topic navigation.

Given the added complexity of the requirements of ver2, regular timeline animation won’t cut it, even though the project interactivity still remains focused on reading text, viewing pictures and pushing buttons. Plus, I tried to keep frame count to a minimum, just to not mess around with the 16k frame limit again.

Stay tuned with your RSS readers for Project Echo Note 2, where I discuss early attempts to produce Echo Ver 2. Until next time!

Dear Future Self,

By this time, it has been a week or so after wrapping up your first paid independent project. I know you’re apt to forget little things here and there when your mind’s eye is busy looking at new things to work on whatever you’re doing now, but it wouldn’t hurt to read this little bit. Maybe keep a sticky note of this url somewhere on that white flat wall behind the monitor so you’ll see it a lot. I’m pretty sure you’ll say, “Oh yeah, right. Funny that slipped right through my head…“

While there many things to talk about, try considering these points first:

Remember the lesson of magic number 16,000. Adobe Flash (or at least the version you were using back then)  has a 16,000 frame limit. The tech might have been upgraded by Adobe or whoever has the flash license in that future of yours, but it wouldn’t hurt to check if your flash software still has that limit. This helpful note is for CS4, but it’s worth saving…

http://kb2.adobe.com/cps/144/tn_14437.html

Remember that wonderful time you had when suddenly your animation stopped without any error outputs? That sucked. Hard. Sure you had thought of a workaround back then, but what if your little magic fix isn’t feasible this time around?

Better know the limits of your stuff so you can compensate early on. And you can tell the client why, so you two can agree on something.

And if that Html 5 thing ever catches up and is actually better, you’d be better off knowing what its capable of , trust me.

Keep a work journal (No, not the design document, but that’s pretty important too). No, that half-assed attempt of scribbles on the thick spiral notebook ain’t cutting it. If you have an insight on what you’re doing, a lingering problem, a potential bug, or if you had dawned on a cure for cancer (okay, maybe not that one) list it down clearly. Keep a .txt file on your work folder or something. Add a date each entry, so you can review your progress. So when you’re double checking your work you can make sure you have addressed everything you’ve written down.

Log in your production time every night before jumping to bed.  I know you’re super tired and everything, but it’s  just a little thing. Just write down time spent so you can check on yourself if you’re doing good progress later when you’re more sober (so to speak). You don’t want that super long time calculating session at the end of the project.

The “just a little bit” is never a little bit in the end. I know you still want to work on that little science fantasy epic you’ve been cooking in your brain since forever, but it has to wait. You are your own boss now, so the temptation of slacking off is there (well frankly, it’s always there, it was just really shy when your old boss was around) .  The internet’s cool for research and all, but don’t ever ever try to search on stuff you don’t need for work.  You know how it feels after going through several tons of unrelated hyperlinks… and you just flushed valuable production time down the drain.  Save the extracurricular activities when you’re munching on your breaktime sandwich. Or save the longer activities for “HappyHappyFunFunSaturday“.

Hmm… so much stuff to write about, but they’re not formulating quite right inside my head. Maybe some sleep will give more helpful insights, but that will be for another letter in another time.

Best Regards,
The June 4 2011 build of Jelsan.

While dealing with a severe case of the sniffles one rainy afternoon, I tried to change the way my desktop looks, with as minimal tweaking as possible.  Something akin to physically shoving off all the tchotchkes off your desk and then rearranging some of them again. Maybe get a better penholder or so, but nothing new and fancy…ok, let’s go to the details before my trail of thought drifts off somewhere.

To me there’s something alluring about that little  dock thingy you see on those Mac interfaces. Well, that might come from being spoon-fed Microsoft products since elementary school, and getting sick of desktop icon clutter.  I decided to try ditching the standard windows icons on the desktop and lay it out on a quick-access strip way down on the bottom of the screen instead. So I took my time to download a neat little app, Rocketdock, which some of you might probably be familiar with. Installing it was a snap, and since it doesn’t change anything underneath the hood, it’s cool.

Next step was to add docklets to the dock, to add extra features. The app came with a watch docklet, but I installed a new digital clock instead. And to keep the amount of icons visible to a minimum, I also added the Stacks Docklet, which displays the contents of folders in an elegant fanning list. Then, I sorted shortcuts of applications I need and put it in folders, to be added to the dock as separate icons.

To completely achieve the clean empty look for the desktop, the desktop icons and the taskbar simply had to go away.

The work on the icons was simple enough. Right click on the desktop, and simply deselect the Show Icons on Desktop option under the Arrange Icons by subheading. That way, should I wish to revert to my old desktop, all of my stuff would still be available. But of course, if you have tons of files stacked on your desktop, it might be better to transfer all non-shortcuts somewhere else first.

That leaves us with the pesky taskbar. Rather than use any external tools to force the taskbar to disappear  (and since I still need to access it every now and then), I fudged a little by simply dragging it to the left-hand side of the screen, and setting it to auto-hide (right click on the taskbar and tick the box that says auto-hide the taskbar under the Taskbar Appearance box). Sure, you people might argue that are more elegant ways to do this, but this is a simple solution that works for me, so there.

I could have stopped there, but I decided to add extra minimalist displays to keep important information visible while I’m on the desktop. The solution was the handy Rainmeter, a free desktop enhancement for windows. One of the preset themes, Enigma, is simple and elegant enough for my tastes that minimal tweaking was required to get the look I liked. I decided I needed an editable notes section to remind of those small things I’m apt to forget, as well as the old standbys date and time (the fancy arcs design on the left side of the screen is a clock) and a few quick glances on my computer’s system performance and network connection. The black bar where the old windows taskbar used to be is also from Rainmeter, I simply stripped it clean of meters and kept it to visually frame the Rocketdock dock.

There. Finished. This simple tweak has a few nagging problems, like the lack of a Show Desktop command  (which is still available on the hidden windows taskbar, or if memory serves me right, there is an available docklet for that purpose) quick access for power commands (again, taskbar or downloadable docklets) , and your system tray icons being invisible thanks to the auto-hiding taskbar, among other things. But for now, this setup looks clean and appealing, and suits me just fine.

Footnote:

It’s inevitable  that people will ask where the wallpaper came from, so to keep it short, it’s made by an artist named soma (sohma) and I lifted it from a Danbooru imageboard. That specific imageboard contains NSFW images, so I’ll skip on posting links here.

This blog holds various notes made while I am making freelance projects of different kinds. Topics vary, and your mileage may vary on whether the said notes may prove useful to you.

That said, feel free to browse. You may never know, you may stumble into something you may not have never heard about.