nerdcereal.com

I don’t think I’ve upgraded the version of Wordpress that Nerdcereal.com has been using since I first started using it. It was running version 2.1.2 and now the software’s up to version 2.8.4. My other blogs were using the up-to-date software so it was interesting to use two different versions of Wordpress at the same time. But installations will not be a problem from here on out because ofthe 1-click install; I love that feature.

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

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