Being Amber Rhea

The new version of the What Is Goin’ On? web site launched today (or, late last night, to be more accurate). If you don’t know, What Is Goin’ On? is, without a doubt, the best damn radio show in the state. Brilliance comes from Lyons, Georgia.

The new site is the first official Georgia Podcast Network design and development project (other than our own site, of course) to see the light of day. Rusty did most of the work; I mainly spent a lot of time tagging all the archives, because that kind of thing appeals to my J-preference.

So check it out, and subscribe to the feed to get a steady fix of good, no-bullshit interviews.

Also, Rusty posted news about some other GAPN news. Have a look, see what’s up.

What happened to the design?

To know more about why styles are disabled on this web site, visit the Annual CSS Naked Day website for more information.

I’m used to dealing with incorrect CSS rendering, lackluster AJAX support, memory leaks, and all the rest of it in IE. But the other day I came across something new and baffling - and it’s not an IE problem, so it was a huge Whiskey-Tango-Foxtrot* moment.

The problem: In Safari (2.0.3), nothing within the <form> … </form> tags was showing up. But if I removed the opening <form> tag, the inputs, labels, etc. showed up as expected!

After much head-scratching, fruitless Googling, and futzing with HTML and CSS, I found the fix: the form was inside a div, and when I applied display: block to the containing div, all the form elements showed up correctly!

I guess that’ll be one more for the Quirksmode list of Safari bugs!

Update: This happens only if the containing div has the clearfix class applied.

* h/t Rusty

Several people have approached me lately with some variaton on the statement, “I know a little CSS, but I want to learn more. Where should I start?”

So, for anyone having similar inclinations, let me put my recommendations out here for you!

Books

There are a lot of bad books out there purporting to teach “web development” or “web design.” What they really do is rehash the same old “This is a <b> tag, and this is an <i> tag, and ooh! Here’s how you make a table!” business that’s been around since 1996 - and if you’re lucky, they might tack on a chapter or two at the end about those new-fangled cascading stylesheets. Whenever I’ve seen strangers perusing such books at Borders or Barnes and Noble, I’ve politely walked on by, but what I really wanted to say was, “Hey, you put that back right now!” and slap the book out of their dirty little hands in a socially unacceptable manner.

Instead, here are some good books to start with:

• Bulletproof Web Design*, by Dan Cederholm
• Web Standards Solutions: The Markup and Style Handbook, by Dan Cederholm
• Eric Meyer on CSS: Mastering the Language of Web Design, by Eric Meyer
• More Eric Meyer on CSS
• The Zen of CSS Design: Visual Enlightenment for the Web, by Dave Shea and Molly Holzschlag
• Designing with Web Standards, by Jeffrey Zeldman

Web Sites

The authors of the above books all have sites that are excellent CSS/XHTML/web standards resources, so I linked their names. Here are some other sites that reside in my bookmarks list under “Web Dev Stuff”:

• 456 Berea St. - Articles and news on web standards, accessibility, and usability.
• A List Apart - Definitive resource on design, usability, accessibility, search engine optimization, and more.
• CSS Panic Guide - A great jumping-off point to lots of other resources and reference sites.
• Position Is Everything - Modern browser bugs explained in detail! (Chock full of good CSS tips and tricks.)
• Wait Till I Come! - I promise this is not a porn site.
• W3Schools HTML and CSS reference sections. Excellent for looking up proper syntax, usage, etc. I use it all the time.

And, as always, Google is your friend - even if you don’t know exactly what to search for. Googling “weird CSS bug words repeated in IE” will actually get you to where you need to be.

This should be plenty to get anyone started on the right track - but hopefully not so much that you feel overwhelmed. (If so, pop a couple of Excedrin and come back in an hour.) All you aspiring web developers who are starting out with these resources are very lucky - you’re learning things the right way to begin with, so you don’t have to spend months or years unlearning bad habits.

* Ed Note: Yes, those are Amazon Associate links in this post. Deal with it bitches, I have credit cards and student loans to pay off.

If you want to spread the word about standards-compliant XHTML, separation of content from presentation, accessibility, and so on, first you have to make sure that the people you’re trying to convince understand exactly what it is that you’re talking about. Otherwise you may be surprised to find that you’ve convinced them of something very different than what you were going for. You may even have done a fantastic job of selling them on the polar opposite of the real message.

When you say “web standards,” most people don’t know what the hell you’re talking about. If they do know what you mean, then they’re probably on board with web standards already, which means you’re just preaching to the choir. Get them on your team and spread the word - but do it in a way that makes sense to people outside your little cabal.

Overheard at a meeting recently:

Guy #1: We’re trying to focus on web standards a lot more on our sites, so we need to make sure there’s an option for users who don’t have Flash.

Guy #2: Flash is so prevalent at this point! 99% of people have it installed! It is a standard.

See, when people who aren’t W3C cheerleaders hear the word “standards,” they think it means “what everyone uses” or “what most people use.” So, since Internet Explorer is still the most widely used browser (though its popularity is plummeting), does that make it a “web standard?” Serious web developers will either laugh uncontrollably or be driven into a fury by such a suggestion.

So, fellow web standards advocates, continue fighting the good fight, but make sure you provide definitions, facts, and lots of examples before dragging your ill-informed co-workers kicking and screaming into the 21st century.

As a web developer, nothing scares me more than hearing someone say, “I know a little HTML.”

People who say it usually have good intentions. It might be a non-technical co-worker offering to take some of the burden off you when they know you’re swamped, or a friend who insists that she can build a web site for her parents’ business by herself and save them thousands of dollars.

But good intentions do not a web developer make.

When someone says they know “a little HTML” or “the basics,” what that really means is that they flipped through an HTML for Dummies book in 1998 and learned about tables and the <font> tag and deprecated attributes such as bgcolor.

Perhaps even more disturbing is when someone says, “HTML is easy.” That’s a huge red flag. Sure, the concept of it is easy; but knowing HTML and knowing it well are two very different things. Any idiot can say “hello” and “goodbye” in a foreign language; carrying out a conversation is another matter entirely. Roger Johansson puts it perfectly:

Learning the basics of HTML and CSS is easy, but mastering them takes a lot of time and effort.

Sadly, there are a lot of gainfully employed people whose HTML/CSS aptitude is truly mediocre - and in some cases just plain bad. Coincidentally, these people usually think they’re the shit. Well, remove “the” from that sentence and it’ll be accurate. They usually write code like this (for example):

<table cellspacing="0" cellpadding="5" border="0" width="545">

  <tr bgcolor=”#336699″ height=”20″>

    <td align=”left” valign=”top”>

      &nbsp;&nbsp;<span class=”header”><font size=”4″>Stuff</font></span>

    </td>

  </tr>

</table>

In regards to such people, Roger Johansson once again sums it up nicely:

Web professionals who refuse to update their skills and insist on using outdated methods can no longer be called web professionals.

Some will call me an elitist for saying that. But think about it. Why should web professionals not be required to know their craft? I find that attitude - which is held by many in the industry and by many more outside of it - insulting to those of us who work hard every day to keep up with current best practices.

The fact is, people who “know a little HTML” are dangerous. When you meet one, run! - or, try to get them on the right path, in which case you must have a hell of a lot more patience than I do.

Finally, it’s all in one place: MaxDesign presents the Basic Web Standards Workshop. This should be a must-read for anyone daring to dabble in web development. It actually goes far beyond the basics, into detailing such intricacies as the debate over heading levels and specific CSS2 bugs in IE. It makes me salivate. (Note: part 3 is my favorite.)

I finally got around to fixing - er, hacking - my stylesheet, so my layout displays correctly in IE. It actually didn’t take that long to do, which was a pleasant surprise. Just had to add some Tan Hack stuff to body and #sidebar, and a clearing div after the comments and category links in .blogEntry.

If you’re using IE (why, why??) and it still looks funky to you, try emptying your cache.

As I currently don’t have access to a working Mac (yes, I’m blogging from work - gasp!) I don’t know what it looks like in Safari, but I’m sure it’s fine. IE/Mac… well, that’s another story altogether.

Here’s your “doh!” quote of the day:

I think one of the reasons semantic HTML and CSS comes off as confusing, complicated, and more difficult than other methodologies is that it creates a multi-layered environment. With tables for layout, your content and your presentation are all in one place, but with CSS layouts, you might have multiple cascading style sheets, and inheritance - not to mention the general abstraction that’s required.

There’s a word I’m looking for to describe this. Like counter-intuitive, only stupider.

A book that teaches HTML and CSS together! (What a concept!)

This is a new one. It crept up and bit me in the ass today:

Internet Explorer 6 has a puzzling bug involving multiple floated elements; text characters from the last of the floated elements are sometimes duplicated below the last float. This bug is a real headbanger because there seems to be nothing triggering it. However, by now everyone should know that IE needs no excuse to misbehave.

The direct cause is nothing more than ordinary HTML comments, such as, <!– end left column –>, sandwiched between floats that come in sequence. Apparently, the comments are hard for IE to digest when they occupy those positions, resulting in a kind of “screen diarrhea”.

IE never ceases to find new and creative ways to fux0r nice, clean, standards-compliant code!

Ever feel like people are missing the point?

Overheard at work recently: “When I coded this page, I tried to use as many divs as possible…”

Wow. ‘Cause that’s so much better than using infinity nested tables. (Catch the movie reference!)

Here’s the list, once again, from an email to Jenny and Niki, which I posted last night, then removed this morning on a whim, but have again decided needs to go up here:

I would have sex with…
- w but he’s married
- x but he’s in a relationship
- y but he’s gay
- z but he’s a Republican

And actually, let’s add to that:

- v but he doesn’t want to have sex with me

I feel kind of sick. I think I need to go home early. There’s shit I need to do, but I think my “boss” (by now you know why I always put that in quotation marks) agrees that I’m basically worthless today and need to get out of here, since I have no energy to care about much of anything. You can only get just so excited about XSL, for example. The home page is fux0red in IE 5/Mac, and I guess I should fix it, but… really, I should take some Sudafed PM and go to bed. It’ll still be fux0red tomorrow.

Here’s something for your amusement… “If Architects Had To Work Like Web Designers.”

Please design and build me a house. I am not quite sure of what I need, so you should use your discretion. My house should have somewhere between two and forty-five bedrooms. Just make sure the plans are such that the bedrooms can be easily added or deleted. When you bring the blueprints to me, I will make the final decision of what I want. Also, bring me the cost breakdown for each configuration so that I can arbitrarily pick one.

Keep in mind that the house I ultimately choose must cost less than the one I am currently living in. Make sure, however, that you correct all the deficiencies that exist in my current house (the floor of my kitchen vibrates when I walk across it, and the walls don’t have nearly enough insulation in them). [Full article]

HTML tip: it is possible to have colored bullets in a list without using an image. Unfortunately, you have to use the <p> tag within each <li> item, which seems a little kludgy, but it could be worse.

The CSS:

ul { color: red; }
ul p { color: black; margin: 0; }

The HTML:

<ul>
<li> <p> List Item 1 </p> </li>
<li> <p> List Item 1 </p> </li>
</ul>

How it looks:

• List Item 1

• List Item 2

Of course, use whatever margins, etc. you prefer.

Favorite (of the moment) Firefox Web Developer Extension feature: “Disable CSS.” See just how hideous (or decent) your site looks, stripped of its styles!And another thing about CSS and web standards…. oh never mind, I’m falling asleep… zzzzZZZZ…

I’m working on a new web site devoted solely to web development. I’ve decided to register the domain ambersites.com. The design for the web site is coming along nicely; only now, I have a bad case of writer’s block in terms of actually writing some content.

In the meantime, I’m watching The 4400 on USA. I usually don’t like made for TV movies, but this one is interesting so far.

Also considering adding a few more features to my blog and packaging it up for download as a blogging system. Not that the world needs any more blogging systems. But I figure I could advertise it as “the Simple Blog” or something — none of the bells and whistles of Moveable Type and the like (not that there’s anything wrong with that).

It’s been a good weekend… one more week of work and then my vacation. Sure, I won’t be going to Vegas, but I think I’ll have fun nonetheless.

I’m thinking of registering a new domain to use solely as a portfolio site for web development. (’Cause you know, I might not always want potential clients reading my foul-mouthed rants on my blog.) What do you think a good domain name would be? ambersites.com is one that pops to mind for some reason, but I don’t know if it’s cheesy or catchy (or both). Suggestions are welcome.

I’m about to get more Javascript experience than I ever wanted. For work, I have to create a detailed quiz that will calculate someone’s risk of heart disease based on a number of inputs (total cholesterol, age, etc). I know the learning experience will be good, but Javascript irritates the hell out of me. :-P

Also: I hate the phrase “learning experience.” Some other phrases I hate: “state of the art”, “hands-on”, “as it were”, “if you will”, “per se.”