Hand Coding

I heard about this an intriguing HTML Altimeter bookmarklet via Asa (or “Topographic View”, as the author calls it). It’s a bit hard to describe, but it essentially reassigns the CSS background for each element on the current page to represent the number of nested elements at that point.

Level zero starts at black and each additional nested element gets closer to white (with 16 shades in total). To make use of the bookmarklet, visit the author’s page and drag the “Topographic view” link to your Personal Toolbar. Then, just click that link to see the effect applied to the current page.

As you might expect, well formed CSS-based sites barely get out of black, but table-based layouts can easily approach pink (the color designating nesting past 16). All the same, though this bookmarklet is good for an easy laugh at the expense of poorly built sites, I’m not sure if it has any practical development applications :-/.

I found these XHTML Jokes at Photo Matt though they’re originally from HTML Dog. I’m guessing that only standards-aware web developers will get these, but I found some of them rather amusing:

Q: Why did the XHTML actress turn down an Oscar?
A: Because she refused to be involved in the presentation.

Q: Why was the font tag an orphan?
A: Because it didn’t have a font-family.

Q: Why do CSS designers have too many children?
A: Because they employ lots of child selectors.

Q: Why was IE5’s 3-metre wide cell in the insane asylum smaller than IE6’s 3-metre wide cell?
A: Because the width of the cell included the padding…

Q: Why was the XHTML bird an invalid?
A: Because it wasn’t nested properly.

I think the XHTML/Oscar one may be my favorite, though I liked the IE/cell-width one as well. And considering geeks’ general penchant for tech humor, I’m almost surprised that these jokes have only come about now. In any case, they brightened my day a bit :).

It seems that rounded corners are making a comeback in web design (or, maybe it’s just the designers I work with). And there’s not really an easy way about it since the current versions of CSS have no native support for rounding corners (however, I believe something may be in the works for CSS3).

So, what it comes down to is using multiple background images and placing them at each corner (top-left, bottom-left, and so on). Of course, CSS only supports one background image per element, so that doesn’t make things easier. The workaround is simply to use multiple nested elements (such as nested DIVs), each with its own background image.

Nested DIVs can have their own problems, as they can quickly become semantically meaningless (that is, the HTML no longer describes the document’s structure). However, Ryan Thrash has come up with what he calls the ThrashBox — a semantically correct set of HTML & CSS to create rounded corners.

His technique still relies on nested DIVs but he structures them so that the code remains meaningful (one div for the box, one div for the box’s header and one div for the box’s content). It may not be semantically perfect, but I think it’s the best that can be achieved with current CSS. And, the next time I need to create a box with rounded corners, I’ll consider his technique.

Joe Maddalone of Insert Title Web Designs has discovered a method of running multiple versions of IE on one box! He made the discovery when he noticed that a developer’ edition of IE was able to run concurrently with his installed version.

Working backwards, he discovered which files the developer’s edition used and applied that knowledge towards older IE versions — he downloaded their respective CAB files and extracted bits as needed. A few tweaks later, and he had stand-alone versions (screenshot). (The tweaks, involving IEXPLORE.exe.local, are further explained in the article.)

Of course, Joe outlines the steps he used to create the stand-alone versions and you could follow along with those. Or — even easier — QuicksMode.org has links to the ready-to-run stand-alone versions of IE download.

I’ve tested this on my XP machine here at work, and it works great! When running multiple versions of IE, it can be easy to confuse which version is which; so, QuicksMode wrote a small script to dynamically prepend the IE version number to the page’s title (so that it’s easily visible in the taskbar).

Joe also includes a link for PayPal donations at the bottom of his page to cover bandwidth costs and the like. And, considering how much time this discovery will save me, I was happy to contribute.

PS As you may have noticed, I’m not one to use exclamation points gratuitously. It could have been two years or more since I last typed two consecutive exclamation points. But, I was so excited about this discovery that I included two in the title of this blog entry ;).

My most recent freelance work was as lead developer for PlainsCapital’s relaunch of its site
and subsidiary sites (PlainsCapital Bank, PlainsCapital Insurance, and others). Formerly PNBFinancial, the company decided to redesign its sites as part of its company-wide rebranding.

The sites launched last week and its standards-compliant layout includes valid XHTML 1.1 and
CSS (just CSS for layout). I’ve also added a section to my portfolio which explains several of the CSS techniques used throughout the site.

On the advice of a recruiter, I took the certification exam for HTML at Brainbench (Brainbench is an online tech-testing company). The test was 40 multiple-choice questions (three minutes allowed per question) and it took me about an hour.

The test was $50 but I passed! They don’t reveal the actual score and instead give an aggregate score out of 5.0. They rate 2.75 or higher as passing while 4.0 or higher is passing at the Mastrer Level. I scored 4.53, which I’m very pleased with.

However, I’m not sure about how to integrate this into my resume. I could add it to the Educaion section, I could add it as a bullet to the Profession Profile section, or I could add a separate Certifications section. Any suggestions there? And, if the latter (adding a Certifications section), where would you add that in relation to the other sections?

As mentioned on Zeldman, the v-2 Organization has redesigned with XHTML and CSS. What impressed me, though, was how the of the widescreen photo at the top of the page reacts as the browser window is resized.

With a little thought, it’s not hard to figure out how they did it. But, it’s not a techniqure I had seen before.

I was validating a page today when I got the error:

Error: element “input” not allowed here; possible cause is an inline element containing a block-level element

At first I was confused, but a Google search for that error message quickly pointed me in the right direction. Apparently, <form> must contain a block-level element. And, as <input> is just an inline element, directly enclosing it with a <form> tag wasn’t allowed.

So, I enclosed the tags within <form> by a <div>, and the page now validates as XHTML 1.1. Standards are good :).

From Zeldman:

Look, Ma, no tables: Lycos Europe will soon move to a new layout that validates as XHTML 1.0 Transitional and uses CSS for layout. (Netscape 4 users will get a plain text version with no formatting.) Can a standards-compliant Google be far behind?

Very nice.

Cool, I was pleased to discover that Crimson Editor v3.45 beta has been released today. For those not aware, Crimson Editor is a freeware source-code/text editor for Windows.

It may not quite be at the level of (say) TextPad, but TextPad isn’t free either. While I don’t believe that shareware is immorral, I do consider free software to better imbody the hacker ethos. I regard Crimson Editor as the current champ of source-code/text editors for Windows. Some features:

• Multi-level Undo/Redo
• Change-detection. That is, if a file changes on disk “out from under the feet” of the editor, the editor prompts the user whether he/she would like to reload the file.
• Syntax Highlighting: HTML, CSS, C/C++, JavaScript, and so many other languages (even Python and LaTeX).
• Auto-indent
• Matching-parens highlighting. This is extremely handy for multi-level if-statements, for instance.

As far as what’s new in the 3.45 beta, I found this list of features to be included in 3.45 Final on the messageboard, and presumably the items that are listed as “done” are included in the beta.