Bluefeet.net

If you use mint.com you'll notice that whenever a modal dialog is displayed they hide the flash content. This is because the flash normally bleeds through any HTML. Even if the flash has a z-index of -1000 and a div has a z-index of 1000, the flash will still appear on top of the div. There is an easy workaround for this with the WMODE parameter:

<object type="application/x-shockwave-flash" ...>
    ...
    <param name="wmode" value="opaque" />
    <embed ... wmode="opaque"></embed>
</object>

"The WMODE parameter can be 'window' (default), 'opaque', or 'transparent'. Using a WMODE value of 'opaque' or 'transparent' will prevent a Flash movie from playing in the topmost layer and allow you to adjust the layering of the movie within other layers of the HTML document." - Adobe Technote

In my testing this works great in Firefox 3 and IE 7.

Since we use FusionCharts at ValueClick I had to figure out how to make the fusioncharts javascript set WMODE. This is very easy by calling a method on the chart object. Make sure you do this before you render the graph.

// Calling setTransparent with no options sets WMODE to "opaque".
chart.setTransparent();

A thread on the fusion charts forums goes in to more detail about this.

Edit: Turns out that if you set a fusionchart to use wmode transparent or opaque, all of the mouseover events don't work, such as displaying the exact value of a point in the chart when the mouse goes over it. Boo!

At ValueClick we've traditionally been a MySQL shop. For various reasons we've decided to switch to Oracle and have been slowly moving pieces of our software to Oracle over the last year. This means that we have a several dozen developers who are proficient or better in MySQL, but have no (or very little) Oracle experience. I was one of the first non-Oracle developers to be thrown straight in to the flames and had to learn the ins and outs of Oracle first hand, with little-or-no training. So, to help fellow coworkers out at ValueClick I put together this presentation that is meant to give some hope and encouragement for other people who are making the same kind of transition. I've gotten some great feedback on this presentation and wanted to share it with a wider audience. So, here it is...

While working on our new Publisher UI at ValueClick we ran in to issues using the YUI layout manager as its very quirky and hard to customize. So, I ended up writing an entirely new layout manager. As part of these I found that the way I thought elements resized was nothing like reality. I'm a big jQuery fan so this diagram below refers to jQuery methods, but the concept applies to CSS in general.

As you can see the height of an element represent only the internal height of the element, not taking in to the margin, border, or padding. This I already knew, but I didn't know how the corresponding jQuery methods fit in here. jQuery.height() has the same value as the CSS height attribute. jQuery.innerHeight is the CSS height plus the CSS top and bottom padding. jQuery.outerHeight() includes the CSS height, the top and bottom padding, and the top and bottom border. And, finally, jQuery.outerHeight(true) works the same as jQuery.outerHeight(), but also includes the top and bottom margin.

I spent a good day trying to completely understand how CSS positioning works. There are a lot of misconceptions and superstitious out there and I found many people answering questions about CSS positioning with answers that were completely false. So, I had to dispel the mystery. I think that w3schools.com explains the possible values for the CSS position property the best.

• static Default. An element with position: static always has the position the normal flow of the page gives it (a static element ignores any top, bottom, left, or right declarations).
• relative An element with position: relative moves an element relative to its normal position, so "left:20" adds 20 pixels to the element's LEFT position.
• absolute An element with position: absolute is positioned at the specified coordinates relative to its containing block. The element's position is specified with the "left", "top", "right", and "bottom" properties.

So, relative positioning is EASY. Wherever the element would have been positioned in static positioning, is the 0,0 position for the relative element. Any top or left adjustments will be in relation to this point.

Absolute posotioning is where people get confused, it seems. When an elements position is abolute, its top and left positions are relative to it's parent element's top-most and left-most position, disregarding the parent element's padding, as shown to the right.

When setting an element's width or height you are setting the inner-most width and height, without taking in to account the padding, border, or margin. When writing application-like web sites this is not the behavior you want - usually you want exact control of the entire width and height of the element. Here's a very simple jQuery plugin that I wrote to make this very easy to do.

    jQuery.fn.setOuterWidth = function( newWidth ) {
        var difference = this.outerWidth(true) - this.width();
        return this.width( newWidth - difference );
    };
 
    jQuery.fn.setOuterHeight = function( newHeight ) {
        var difference = this.outerHeight(true) - this.height();
        return this.height( newHeight - difference );
    };

Then all you have to do is use obj.setOuterWidth(...) instead of obj.width(...) to resize the entire element.

I've been self-aware of how I learn for as far back as I can remember and have made conscious effort to learn better/faster. Here's my brain-dump on what learning is, and how to harness it for better results.

• Learning is a skill onto itself.
• Learning how to effectively learn is an important subject all on its own.
• Perhaps this would be a valid curiculum in school.
• Learning is not memorization.
• Learning is the process of connecting related thoughts in as many ways as possible.
• Learning is finding patterns, which is what our brains are best at.

Examples of advanced learning skill:

• When being taught by a sub-par teacher a student, who is adept at learning, turns their attention to the teacher's other skills and learns from example.
• While learning, the student consciously finds correlations between what is being taught and what they already know.

Why being a better learner matter:

• Make the time and money that you invest in to learning as effective as possible.
• Learning how to learn gives compound interest.