border: solid 1px red;

Today's Achewood. So good. It reminds me not only that the first site I built in high school was entirely in Comic Sans, but that 10 years later we basically have the same options for web-safe fonts.

My favorite changeset in the past week was THIS ONE!

There were 2 new functions introduced to Scriptaculous in this JavaScript power grab: Effect.Morph and Effect.Transform.

Effect.Morph() lets you transition an element's styles to a given set of styles (number-related ones like margin, height, hex-colors, etc.). For example:

new Effect.Morph('your_element', {style:"color:#123;margin:5px;", duration:3.0});

In this example #your_example will be transformed from whatever hex-color it's at to #123 and its margins will be transformed to 5px all around. Wow!

Effect.Transform() will perform multiple Effect.Morph()'s at once; here's a truncated example from the docs:

var transformation = new Effect.Transform([
  { 'div.morphing': 'font-size:20px;padding-left:40em' },
  { 'blah'        : 'width:480px;border-width:10px;border-right-width:20px;font-size:30px' }
],{ duration: 0.5 });
// play transformation (can be called more than once)
transformation.play(); 

For an example, I changed the title on my homepage (hover over the title&ndash it 'ent perfect).

Somewhere in the Past:

Back in the days of Infosauce I was having a lot of fun slicing up PSD's into XHTML, trying to get a good grasp of CSS (and browser differences that come along with it), attempting to perfect the dynamic all-CSS menu, etc. One of my CSS debugging strategies was to just put a "border:solid 1px red;" around any object that was confusing me (this was before I knew about the Web Developer Firefox extension, amen).

Early on I was doing a project for a pretty big financial institution and took half of my time trying to get the dropdown menus to work. A couple months after we handed the site back to the server-side people on this project, Tim called me over to his computer and showed me a strange red border around a couple navigation SELECT tags on their live site. I'd left the debugging style on those tags and no one had noticed that it wasn't supposed to be there when the site went up. This is from where my blog title derives.

The Present:

Out of curiosity I checked the client's site today, and not only is it still up (and still looks good, after probably 2 1/2 years), but the border has grown from 1 pixel to 10 pixels!
Hohoho.

Not to discourage the developers of IE7, but there’s one missing feature whose presence I shall miss: lack of styling for OPTGROUPs.

There is no way [I know of] to take out the default indentation of OPTION tags nested inside OPTGROUPS in IE6. Due to the fact that you can’t style an OPTGROUP or its children, this flaw becomes annoying when trying to fit a needlessly wider SELECT element into a tight spot.

Apparently, the developers are solving the z-index problem for SELECTs (which will be appreciated), but OPTGROUP styling will still not be available in IE7:

Richard York & Clayton L.Scott: The goal of new implementation of SELECT element in IE7 is to port the windowed-based control to real “intrinsic” element. So styling on OPT/OPTGROUP is not changed much in this version. We will take this into consideration for future IE release.

HAPPY DEVELOPER (Firefox 1.5) vs. SAD DEVELOPER (IE 6):

Lastly, I’ve gotta say how much I like Typo 4.0. The AListApart-esque backend is nice, not to mention the plethora of new features.

At some point in the last year or two I decided that there weren't *enough* Javascript scrollers on the net and that I should make the billionth one.

Go to the scroller!

(as of now I've done most of the testing on a Mac in Firefox and Safari, so hopefully in the future I'll get around to testing it across browsers, fixing the broken decelerate functions, and maybe even add some more features to it)