nerdcereal.com

I’ve invented a new HTML tag called the <ispan>. It behaves exactly like a <span>, it just won’t inherit any CSS that’s applied to a span.

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>

This neato magnifying glass widget (loupe.js) lets webmasters add some interactivity to an otherwise static image. Pictured here is a profile of Homer Simpson. Peering through the magnifying glass into his brain, Dr. Hibburt (or you) can see the thickness of Homer’s skull and the scarcity of his gray matter.

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

Note: only works in Firefox.

A couple of weeks ago, I wrote about the open source icon library, silk icons, hypothesizing that one day they would be the standard for many web applications.

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.

This is an open source set of free icons, licensed under the creative commons attribution 2.5. They’re downright sexy, if you’re into that sort of thing. (Did I just call icons sexy?) Don’t waste your time trying to make your own, because it will take too long and won’t look as good as these puppies.

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.

I came across www.ajaxload.info while searching for a spiral loading gif online. It lets you create a custom color gif to use while your page is working. It has all sorts of loading bars, similar to the Firefox and Internet Explorer page loading images. Unfortunately, I was looking for a larger one; perhaps there’ll be one in the future.

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.

I just implemented this at work. It’s a really cool javascript class that’s used in the Wordpress admin panel (the fade feedback you get after editing a file’s code via admin).

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.

I used prototype.js once before to do some AJAX, but it was so easy and I was in a hurry so I didn’t know exactly what it was doing. I was also unaware of everything else that it was capable.

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.

I finally found a text editor that I can call mine. For code monkeys, a text editor is the most commonly used program. Previously, I’d been using Notepad and Dreamweaver where necessary. These, of course, are on opposite ends of the spectrum. Dreamweaver is a behemoth with sophisticated, but often times unnecessary, tools. Conversely, Notepad offers Zen-like simplicity of pure code for the monkey’s enjoyment.

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’ve finished the first iteration of my blog layout for now. It’s based on the design of my original site, only the it’s built completely differently; this is a CSS layout vs. a table-based layout used in my original site.

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).

I finally got around to editing and looking at the code for WordPress. I like seeing all these technologies weaving in and out of one another like something that has evolved rather than something that has been planned. The internet was very much evolved rather than planned and it’s still evolving, which is why I like it.

Things I edited:

• I changed the title tags to display the article title first, rather than the blog name, for better SEO on the topics.
• I removed all the images and shrunk the header section to increase the screen real estate (I hate huge headers, especially on blogs. People read your blog for the text not some huge half-screen header). I plan on doing more customization to the layout and colors; this was just a start.
• I tweaked the spacing a little in the CSS with the help of the Firefox web developer’s toolbar. CSS layout was always a little abstract for me to comprehend, but I discovered the Outline Current Element Option on the toolbar which is amazing. It, well, it outlines the current element and the shows the DOM path in the status bar letting you easily figure out what you need to change.