I also finally removed my AdBrite skysraper from the right-hand side of the site. I wasn’t making any money and I got tired of looking at all the weight-loss ads. Instead I’ve replaced the ads with imagry from Gawker Artists. (The link ads underneath the skyscraper are still AdBrite.)

At my job, our interactive advertising formats dynamically manipulate our publishers’ pages and add content. The trouble with this is that we have no idea the CSS that the publisher uses and our content can erroneously inherit some of the publishers’ styles. Moreover we can’t edit their CSS. The worse CSS rule I’ve come across is this: img {height:50px; width:50px;}

There’s two strategies to avoid this. 1) On every single tag you add to the document, you must set an inline style to override any possible inheritance. (There are at least 10+ common styles to account for.) 2) Make every element (except for images and iframes) an ispan element and odds are the publisher has no styles set for an ispan.

There are two catches: 1) You must create the <ispan> with the createElement method (you cannot use innerHTML or document.write). 2) I thought this was invincible to any CSS a crappy coder could create, but it’s still suceptible to any styles applied to the selector ‘*’.

So, if you’re dealing with javascript and unknown CSS, simply create your own tag. You can call it whatever you want: <whateveryouwant>

Loupe.js also lets you use the magnifying glass to zoom.

Note: only works in Firefox.

I’ve seen them used on other sites since then, sometimes as favicons, but the most prominent place I’ve seen them to-date is on version 1.1.3 of the Web Developer’s Toolbar.

Version 1.1.3 comes with other much-welcomed improvements. One of which includes showing the DOM tree in a selectable text input rather than in the status bar, making it easy to copy for reference.

Silk icons are perfect for any web app and make your site look professional and more usable. I haven’t seen them anywhere else but would wager that they will become a staple on most open source web applications.

On a side note, check out Google’s horrible job at contextually serving its AdSense ad. It’s for: Loading Dock Levelers / Full line of loading dock leveler with load capacities of 160,000 lbs. Yeah… that’s a product that all web developers want.

It works by adding class="fade-#FFFF66" to any element on the page. Documentation can be found at http://www.axentric.com/aside/fat/. I’m surprised I didn’t know this before, but I also learned you can apply two classes to any one element by simply putting a space in between each class, like class="class1 class3".

I actually implemented it a little differently because I wanted the fade to be triggered by an event other than load. I called the fade_element method of the Fat class, like so: Fat.fade_element(id, fps, duration, from, to);

It should be self-explanatory, but id is the element’s id, fps is frames per second, duration is the time (in milliseconds), from is the beginning color and to is the final color of the element. Only the id is mandatory. Defaults for the rest of the arguments include 30 fps, 3 seconds (3000 milliseconds), from yellow (#FFFF33), and to the id’s orginal background color.

From a design standpoint, the fade is unique because it offers a compromise between and alert box and a printed message. Initially, there is a significant color change, on the page, but it slowly fades after your attention has been grabbed and is no longer needed. It’s quite similar to desktop email updates from Outlook and Gmail.

But really, this file is called Fade Anything because you can really fade anything on the page. It doesn’t just have to be used for alerts and messages. Use it to make an animated sunset on your page. Be creative.

This weekend I spent some time boning up on everything that prototype.js offers. It’s not exactly a standard (but most likely will be) so there’s not much documentation. The best documentation I could find was here.

It’s probably best known for its AJAX extensions due to its inclusion in 24ways.org but it also offers other much welcome shortcuts for javascript coders.

But Notepad was a little too simple for my tastes, for example, it doesn’t offer syntax highlighting. I tried Crimson Editor, TextPad, and MetaPad, none of which were satisfying. Perhaps I was being too nostalgic and didn’t want to leave the familiar look & feel of my long-standing favorite text editor, but I continued to use Notepad.

The final straw was its lack of support for line feeds, generated by other editors, which lumps the whole document into one paragraph. I searched to find a way around this problem, like a find & replace, and stumbled upon this informative blog about how different systems treat lines. I didn’t find the solution that I was looking for, but I found a text editor I could love like Notepad, so appropriately named Notepad2. I love you Notepad2.

I’m still getting a feel for the ins and outs of this blog’s structure and classes. Next item on the list will be extending the yellow sidebar to the bottom of the screen, taking care of the footer, and making the single post view the same as the multiple post view (not getting-rid of the side bar).