Spring cleaning Gmail

Detritus from my “Stuff to Post” label (with my notes to self, where included):

January 4, 2006

February 21, 2006

February 26, 2006

March 16, 2006

August 29, 2006

November 27, 2006

  • Interesting:

    Is it a white liberal American thing this fallacious idea that there are always two equal sides to an argument and that the answer or the truth must lie somewhere in between, thus everybody must have their say in every forum? It certainly seems to be a popular belief on those blogs that give a platform to anti-feminists to air their views.

    YES and I should probably write an essay about it. “Free speech” and “the right to hold an opinion” have been entirely misunderstood in this country, I think. And of course, there are never ONLY two sides, and the ‘truth’ is NOT necessarily in between.

    The right to free speech is NOT the right to speak everywhere, all the time, and the “right to an opinion” does not mean opinions cannot be debated or examined - or ignored.

    Some people seem to be really insecure about their opinions, and yet want them protected: as though they were like body parts they were dissatisfied with, but do not want to be teased about. Of course, one shouldn’t be mean to people about such things, or about experiences they’ve had … but that is a very far cry from deciding or not to engage someone’s opinion, or to disagree with it, or not to give it weight.

    People do NOT understand this, it seems, and I think it is some sort of ideological effect - and control mechanism - “free speech” gets twisted around to mean censorship of free thinking, if I am being clear.

    (Comment by profacero at http://womensspace.wordpress.com/2006/11/24/trolls-and-anti-feminists/)

    [Ed. note: From Heart's blog, aaahhhh!!!]

August 2, 2007

  • http://saraspeaking.wordpress.com/2007/07/07/what-kind-of-friend-are-you/

    Since the gist of the thread is about whether a statement has to intend to be sexist in order to actually be sexist, we have the following quote:

    Assuming that there were no hard feelings intended from the offender how do you make the offender aware of what he has just said? Who wins when it’s largely a difference of opinion?

    “who wins?” That’s your problem right there. This isn’t about winning or losing. This is about you having said something that offends/hurts someone else, and whether you’re going to continue offending/hurting them by arguing about the offense, or whether you’re going to apologise and attempt to make amends. In short, whether you’re going to be hostile or friendly.

    Frankly, I don’t think you’re a very good friend at all if you’re going to take the former route. Denise has a good analogy:

    Say you’re sitting at a table with several friends. You stretch, and unintentionally hit the person next to you in the face, hard. Is the correct response to berate the person who has been hurt for leaning forward, or is it to apologize and keep greater awareness of your surroundings? Nic’s response has been telling the person who has been hit to stop being so sensistive and continuing on in ignorance. Intent is a part of what matters. Your friend would likely find the anger at being struck easier to let go of once he or she knew it was an accident. BUT that the injury was unintended does not make the injury go away. A failure to apologize and an insisitence that you are in the right when you injure people because you’re not paying attention makes you look like a jackass.

    Exactly. Not meaning to do something doesn’t undo the fact that it has been done. I didn’t mean to overdraft my bank account, but that sure as hell doesn’t change the fact that I’m a couple hundred dollars in the hole. I didn’t mean to hurt my friend’s feelings, but that doesn’t change the fact that she is, in fact, hurt. And I can either argue — oh, oops, I mean “have a difference of opinion” with her as to the state of her feelings and the justification thereof. Or I can be a friend, apologise, and kiss and make up.

Some of these links might not work anymore. I haven’t checked. Now I can clear out that label, though!

Possible theme weirdness

Note, I’ll be messing with my theme today, so you might notice some funkiness on the site. I tried to use a plug-in called Preview Theme, where you can specify a theme in the query string and it’ll show it to you if you’re logged in at a certain user level, but it didn’t work. So I’ll just mess with the live site. Fortunately I didn’t have to change any HTML, only CSS (because I rule).

Other than that, my day looks like this:

(Jenny sent me this e-card.)

Browser stats

Breakdown of my blog visitors by browser, according to StatCounter:

37.00% Firefox 2.0.0
23.00% MSIE 6.0
16.00% MSIE 7.0
11.00% Safari 1.2
6.00% Firefox 1.5.0
2.00% Firefox 1.0
2.00% Mozilla 5.0
1.00% Opera 9.21
1.00% Opera 9.20
1.00% Opera 9.00

So I don’t feel too terrible about feeding IE a stripped-down version, due to One True Layout problems.

Pardon our dust

If things look weird around here during the next few days, particularly in the comments section, don’t worry your pretty little heads about it. I noticed that when comment threads get past a certain length, things start to look fucked up - specifically, the page doesn’t expand as far as it’s supposed to, and you end up with text on top of text. This baffles me because I’m usually basically the same code as I did on the old blog; but nevertheless, there is fucked-upedness, and I will address it as I get time.

One day, I imagine I’ll set up a dev server for this kind of UI testing - but that day is not today. So just deal until all is well.

You learn something new every day

Here’s something I learned today.

Outlook Web Access does not like CSS background images - even though Outlook and Outlook Express do. (Unfortunately, OWA isn’t listed in Campaign Monitor’s Guide to CSS Support in Email). Furthermore, if you use the shorthand background notation and happen to have a background image in there, OWA won’t display any of your background properties. So, this…

background: #6461b6 url("images/sky.jpg") no-repeat top left;

…means that in OWA, your background color won’t be applied - which can be a problem if you’ve also specified white text.

On the other hand, if you do this…

background-color: #6461b6;

background-image: url(”images/sky.jpg”);

background-repeat: no-repeat;

background-position: top left;

…your background color will be there in OWA. But the image just ain’t going to show up no matter what, so get over it, buddy.

Anchor link weirdness

Yes, I know there is a problem with anchor links (e.g., when you click on the recent comments in the sidebar). You end up seeing only that comment, and not the post or any of the other comments. This is a side effect of using the otherwise kickass One True Layout. I must say I was a bit surprised to see this problem show up; I had thought it was an issue only with named anchors (e.g., <a name="whatever">), but apparently it’s also an issue with referring to IDs. And now that I think about it, that makes sense; why would it be an issue with named anchors but not IDs?

Anyway, it’s frustrating; I’ll let you know when I find a fix. I am not going to ditch the One True Layout, that’s for sure!

Update: I have a temporary solution to this problem. It involves reverting to named anchors instead of IDs on divs, and giving each anchor position: absolute (If you’re really curious, you can view the source). I’ll need to put in some hacks for IE, but then there’s a lot I need to do for IE, hence the current no-stylesheet version. And I also don’t know yet how this behaves in Safari or Opera.

New look

I’m playing around with a new design for my blog. It’s not finalized yet, but take a look and let me know what you think. (I wouldn’t recommend viewing it with IE, since I haven’t had a chance to do that myself yet.) I just feel like it’s time for a change. And, even more appealing to my geekiness, the new design utlizes equal height columns of the One True Layout!

It’s naked time

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.

AEA wrap-up

Liveblogging As promised, I was blogging away at An Event Apart today. You can read the thrilling play-by-play at CSS Insider.

I also posted my photos to the AEA Atlanta Flickr pool - my first time using Flickr for anything other than writing clever comments about other people’s photos. Honestly, I think their UI leaves something to be desired, but can thousands of nerds be wrong? Eh, I’ll just stick with Gallery and let everyone else enjoy the Flickr hotness.

Finally, on the CSS Insider post, you’ll notice the following teaser:

Earlier I did a short interview with Eric Meyer, Jeffrey Zeldman, and Jason Santa Maria. It will be available for download in a few weeks via my forthcoming podcast site (link to come).

So there you have it, the anti-climactic pseudo-public annoucement of the project Rusty and I have been working on for the past ~3 months. Sorry there wasn’t more pomp and circumstance surrounding it… but I could put some DHTML confetti on my blog if you really want me to.

Mysterious disappearing forms in Safari

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

More pimping

In case you didn’t know, I’ve been blogging hither and thither at CSS Insider and The Javascript Weblog. “But Amber,” you ask, “how do you have time for all this blogging?” Well, I actually don’t; I just forego sleep in favor of blogging. Anyway, check ‘em out, and feel free to rip my posts to shreds in the comments.

Learn Web Development the Right Way

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:

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.

Those Five Little Words

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.

Voting in District 2 Today?

It’s come down to the wire, and I still can’t decide who to vote for in the city council election. Both Al Caproni and Kwanza Hall are touting responsible development, transit alternatives, education, and crime reduction as key components of their platforms. Additionally, Kwanza Hall mentions job creation and affordable housing, and Al Caproni mentions (not in so many words) keeping suburbanites at bay. Oh, and they both have goofy, fake-sounding names.

Kwanza Hall has been endorsed by Shirley Franklin, Georgia Equality, Mid-Fulton Dems, the Sierra Club, the Atlanta Board of Realtors, and the Atlanta Labor Council, among others. Al Caproni hasn’t been endorsed by anyone (as far as I know), but his platform sounds good.

As an aside, Al Caproni’s web site uses all CSS layout/presentation and validates as XHTML 1.0 Transitional; it also uses the same horizontal <ul> tab navigation (as popularized by Eric Meyer) that I use here. Kwanza Hall’s site is table-based, full of deprecated elements and attributes, generates 61 validation errors, and doesn’t even have a doctype. Not that that would influence my vote, of course. (Or would it…?)

So, I haven’t made up my mind. The polls close at 8:00, so if between now and then you have an opinion on which candidate is better, leave a comment telling me why!

Back to the Blues

The light blue theme is back to being the default stylesheet, although the red and black one is still an option. If you’re still getting the red and black one when you view the site and wonder why, it’s because the stylesheet switcher has set a cookie. Selecting “Main stylesheet” in the top left will take care of that. If you like the red and black one, then by all means keep it set, although there will be no shortage of red and black in the blogosphere for the next 6 weeks.

Semantic Markup Makes the Ladies Swoon

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

Turn-on: CSS skillz

Snippet of a conversation from yesterday at lunch:

Co-worker: I don’t know why Jessica [Simpson] would want to get rid of Nick [Lachey].

Me: Pssshh… he’s not that great of a catch.

Co-worker: You don’t think so?

Me: Uh, no. He’s not my type, anyway.

Another co-worker: He’s no Eric Meyer, that’s for sure

Me: Exactly! An excellent point! Oh that Eric Meyer, the way he wields that CSS…

Think of this as a lead-in to the post I’ll write later about body image, standards of beauty, and how the mainstream media shapes (or doesn’t shape) our perceptions thereof. Alley Rat started it, and now everyone is talking about it. (Beware: there are ginormous j-holes afoot in that Pandagon thread.)

Check It

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.

Brute force is teh hawtness

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.

Nerds Gone Wild

Since I’ve been down with OPC (”other people’s CSS”) all day, I figured I’d take a quick break to do a post about my anal-retentiveness; also known as, “This is how I like my CSS and you better recognize, beeotch!”

The way I like stylesheets to be set up is very specific. Let’s look at an example, shall we?

h2.title {

 color: #339;

 font-size: 110%;

 margin: 0 0 2px 0;

 text-shadow: #666 0px 0px 3px;

}

h2.title a { text-decoration: none; }

h2.title a:link, h2.title a:visited { color: #339; }

h2.title a:hover { color: #7D523D; }

.blogEntry .timestamp, .blogEntry .comments, .blogEntry .category {

 font-size: 90%;

 padding-top: 5px;

}

A few things to note:

  • CSS properties are in alphabetical order.
  • There is one space after the semi-colon for each property.
  • Each property is on its on line.
    • If the selector contains only one declaration, then the rule is on one line.
      • When the rule is on one line, there’s a space before and after the declaration.
    • If the selector contains two or more declarations, then it’s broken up onto multiple lines.
      • When the rule spans multiple lines, the selector is on top, with opening bracket; then all the declarations, indented by one space; then the closing bracket on the last line.
  • I ♥ shorthand, inheritence, and group selectors.
  • If the value (of a margin, for example) is zero, then I don’t bother putting a unit, because it doesn’t matter.
  • I try to group together styles that kind of “go together” (all the h2.title styles, for example), and when I’m done with a “group”, I put one blank line before moving on.

Anal-retentive coders, unite!

Layout notes

I don’t think it’s a Tan Hack situation that’s causing my blog to be fux0red in IE. I think it has something to do with floating… I’ll try redoing it later with floating the content right and then the sidebar right. Which means I’ll assign a fixed width to the content area, but you crazies with tiny resolutions can deal with some whitespace.

Although I am tempted to just leave it fucked up in IE.

Finally

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