zdashamber: painting - a frog wearing a bandanna (Default)
[personal profile] zdashamber
I've been thinking about updating my webpages (after, oh... You know, like um four or five years), and with a sigh I decided that I supposed it was about time I joined this millenium and learned CSS. After all, the Annotated Amber cries out to be a wiki, and most wikis look like something the dog shat, and then ate, and then puked up on the clean towels you'd set out for your guests who will be arriving in 15 minutes. I'm given to understand that the answer is CSS.

Now, the trouble with CSS is that its missionaries are fervent snobs, a great many of whom also have terrible aesthetics. Right up at the top of Google for CSS: the CSS Zen Garden, which calls on graphic designers to use CSS alone to adapt the look of a page. "At last! We are free to make a page with a white background and faint grey text, with many headings in cursive!" "Sweet!" "Heck, I can beat that... White background, faint grey text, in a tiny sans-serif font!" And then there's the two that are just completely unreadable... I mean, that second must work in some browser, but dear god, in Firefox with a different font than the norm, it's the dog's breakfast.

Sorry, I'm on a dog kick after looking at the cute pictures of [livejournal.com profile] mr_nice_gaius and [livejournal.com profile] simonepdx's new Akita...

Anyway, there are a couple in the first eight that are darn nice, or staggeringly beautiful. I mean that second, OMG.

...And then we're back to assholes who need to be hit with a shovel. I plugged "why css" into google to see if I could get a breakdown on what CSS actually did for me, aside from being the new hotness, and this was the first result. I mean, you know, maybe that was somebody's Powerpoint at some point. Good for them, you know? Nice that they're making a living telling people how to code for the web when they clearly have no fucking clue what the hell the web is about... Oh right, heh, back again.

No, sorry, I'm off again. You've all probably heard the rants about mystery meat navigation. But I ask you: is no navigation at all better? At this page I was looking for some links to real content, hoping I could skip the headpatting bullshit powerpoint filler slides where everyone's staring at the presenter and wondering how much hair product he uses... Oo! The list items light up in a different color as if they're hidden links--but no. You have to continue plowing through the weak saline solution with a huge image on every page that you can't scroll away from so your boss is sure to notice that you're not working.

Let us continue. Here: is it a page that links to some content? No. You've just changed the color of those words to fuck with me. Very well, Mr. CSS. We shall see where that gets you.

Ah: it gets you to a page where you mock people using older browsers, and then show a table, and then show what a mess it is in HTML. ...Or, you know, you could make that table in HTML without being such a fucking tool. Go on, look at what he's done to make that example table in HTML. That's fucking bullshit. So about here I realized this guy was so full of shit his eyes were brown, and it was time I closed the tab before any got on me.

16 pages in! And I admit, I went a bit further to see if he was ever going to get to the point.

Right, anyway. I went to the Oakland Main Public library on the way home from work last week and took out the one Learn CSS book. It's not the writer's fault, I'm sure, but it's a lucky thing I picked out the book from the spine... That cover, man, he looks like he's expecting to get smacked. I swear, I like people who write books. You're totally safe, guy-whose-name-does-not-get-to-be-on-the-cover-for-some-bizarre-reason!

Side note: checking it out, the librarian said, "Oh, and there's a hold on this, so you won't be able to renew it." I was in the middle of a nasty cold, so had to think for a moment. "...Then why are you letting me check it out at all?" Apparently it's a first come, first served, dog-eat-dog world in Oakland, even unto the library thereof. I took the book and fled into the night before my cold could corrupt them further.

The book has a tiny bit of the silliness that I see everywhere else I look for CSS stuff... "HTML is bad because it accepts both uppercase and lowercase tags. CSS is good because it accepts both single quotes and double quotes!" ...Right. This tag looks interesting, I think... Flip page: ...It's only supported in Opera. I'll get right on adding that to my website, shall I?

In general, though, it's right about my pace. He says something, I think, Oho, I bet X could do Y! I flip the page and he says, "X can be used to Y..." and I go Yay! S-M-R-T! He spent some time explaining HTML, XHTML, and XML, which was pretty darn neat. Apparently, in XML ("eXtensible Markup Language") you can invent your own tags, and then I imagine write a program that handles them the way you say. You could invent a <sarcasm> tag! XHTML has the tags pre-invented and given the same names as the HTML tags that do the same things. It's just all rigorous and shit.

Yeah, rigorous nomenclature is something I could totally get all elite about. Sad to say, you have only to glance up-page to see that I have a raging snob in me, itching for a chance to come out and lay down the smack. I must take only a sip of the ambrosia of requiring a closing tag for every opening tag! Even though I was totally doing it with every <p> tag in HTML anyway because it just- wasn't- right- to leave them all hanging open... XML. Because you know you're OCD.

Anyway, it's darn nice to be learning things again. It triggers off all kinds of thoughts and hypotheses. For instance: Oh, the packet gets sent along a chain of computers while carrying the info with it of the browser that's requesting it... And I've been having a lot of trouble lately with Firefox not finding pages that are there a few minutes later... I wonder if with the launch of IE7 Microsoft told all of the servers running its software to take Firefox-tagged packets out behind the gym and shoot them?

I could test this; every other day, fly Firefox under the false flag of IE, note relative page failure... But that would be kindof a pain. And this is probably all a result of my computer being a spam zombie anyway since I don't clean it very often... </gloomy>

Other triggered thoughts: em-height? You mean people build websites around the font size? I bet that's why so many look like crapmuffins to me, with an unusual default font... "hover": Gya! So that's why some websites twitch around like epileptic eels when you go to see what link is behind something... Because it changes the font style just to go near it. Websites that twitch must be killed. Kiill... KILLLL... (And we was both jumping up and down, shoutin' KIIILLLL)

Anyway. Learning CSS; kinda cool so far. And this morning I woke up considering that I would probably be able to set up a online family tree site with CSS alone. What I want? A site that shows on one page everyone in your family from grandparents to grandchildren, out to your first cousins, including your relatives by marriage/step-family. It'd pretty much have to have a horizontal scroll; the only situation I can think of where that's a good idea. Anyway, every name can be clicked to go to a more in-depth page, and every position can be clicked to make it the center of a new page of the family tree. So you could work your way back, and then eventually connect with everyone else on the internet doing family tree stuff... And then, you'd back it with some program so you'd have a simple interface to enter info and calculate related-ness, and you could do a search on "hemophil*" and it would light up everyone on the tree who was a hemophilliac, or redheaded, or whatever...

So I was just looking to see if you can make sure a page has a horizontal scroll, and following the links from one site ripping on bad scolling practices (Wooo!) I came to his page talking about how users should be able to change the font size on the page to something they like (Woooo!), which linked to a page about "interaction designers," which had the text:
Microsoft sort of has an excuse. They claimed from the beginning that a visual interface with the mouse and all that junk is inferior to a keyboard interface. They might have looked foolish if they had ever really tried to build a real GUI. By consistently sabotaging the visual interface, they have avoided such embarrassment.
What an ass. Let's pop back to the useit guy, bemoaning the lack of "Bigger Font"/"Smaller Font" buttons as default on IE after 4. He says,
... actually changing the text size in IE6 requires several steps:

1. Acquire the button by moving the mouse pointer over it. Since buttons are reasonably big in IE, this step is fairly quick according to Fitts's Law.
2. Press down the mouse button.
3. This causes a pull-down menu to appear, with five possible font sizes. Scan this menu, making a mental note of which font size is currently selected.
4. Mentally compute which new font size you want. This is typically one size bigger (or smaller) than the current selection.
5. While you continue to press the mouse button, move the pointer down the menu until it points to the desired new font size.
6. Let go of the mouse button.

Compare this awkward, six-step process with the interaction technique required by a design that includes separate buttons for "make text larger" and "make text smaller":

1. Click the desired button.

Of course, I am cheating a little: You would still have the initial step of deciding whether you want the text larger or smaller, thus determining which button you'd click.
Breaking that down a bit, you've got:
1. Move hands to the teeeny little touchpad on your laptop.
2. Swirl finger around until you've found the cursor on the screen.
3. Begin the laborious inchworm journey to the upper left part of the screen.
4. Aim at button.
5. Click button.

Or, you could just hit Ctrl + or Ctrl -.

Mac users. GRAAAH!!! I mean, the Fitts's Law guy has a decent point: it's easier to hit a big button than a small button. But what's easiest of all? Hitting the keyboard, fucker! You can fall over and hit the fucking keyboard! Unconscious! If mouse entry is so much better, why aren't we using mice to type?! Every Mac program that doesn't accept "home" and "end" drives a stake deeper into my heart! Keyboard shortcuts! Use them!

...So, the similarity in conceit reminded me of the CSS post I've been composing in my head, and thus you get this gem of frothing madness. Sorry, macfolks. Hopefully it's all Hiroshige and shit.


woodcut of rapids

Date: 2007-02-02 01:08 pm (UTC)
From: [identity profile] rob-donoghue.livejournal.com
Ok, so this post was made of awesome, but you're totally preachign to the choir.

Do you follow A List Apart? They do some of the best CSS writing out there.

Date: 2007-02-03 12:58 am (UTC)
From: [identity profile] zdashamber.livejournal.com
Aw, neat. I'm pleased to join the choir. Thanks!

I hadn't found A List Apart yet... I like the simple gradient fade (http://alistapart.com/articles/supereasyblendys) article. It's basically a blog version of "Make" for CSS websites?

Date: 2007-02-02 03:07 pm (UTC)
From: [identity profile] jamused.livejournal.com
To me the point of CSS is so that you don't have to change your HTML every time the designers change their minds and make all the horizontal navigation vertical and the vertical navigation horizontal, and oh yeah, move that column from the left side of the screen to the right and change all the colors and fonts on every page of the site. It's probably less of a big deal if you're doing everything yourself, but it's still nice to be able to wash changes throughout the site by changing that one css file instead of touching every page.

Date: 2007-02-03 01:01 am (UTC)
From: [identity profile] zdashamber.livejournal.com
Yeah, it does sound like it's got some nice things. Cacheing the .css file so return visits are faster is cool. And all the latest fancy tag things are being done there... Like curved corners, spiffy. I haven't yet gotten into coding it, but it sounds like it'll be a bigger pain in the ass to set up, but then easier to screw aroud with after.

Date: 2007-02-05 03:33 am (UTC)
From: [identity profile] jamused.livejournal.com
BTW, I recommend the book Eric Meyer on CSS. Not dogmatic about the One True Way (like, he'll use a table if a table is what it takes to get it done), and organized as a series of one chapter projects taking a common task (e,g, a page with horizontal nav bar) in a pure HTML layout and converting it step-by-step to HTML + CSS. It's intended to be a practical hands-on guide to real world tasks. Good and pragmatic talk about the advantages and disadvantages of different approaches, and forthright about various CSS pitfalls and shortcomings. Great for people like me who prefer to learn by example instead of by digesting a reference or following an overly simple Learn X in N Lessons tutorial.

Date: 2007-02-05 03:19 am (UTC)
From: (Anonymous)
(This is Mike S.)

The thing which is critically cool about CSS, in my opinion, is that it requires just as much irritating monkeying around with "oh, maybe if I set this to 10%... And then change this hex-color-value around..." nonsense as HTML -- for the first page of the site. Then for all the rest of the pages, you just copy & paste the link to the .css and write in pretty unadorned HTML and it All Just Works.
Page generated Feb. 2nd, 2026 07:07 pm
Powered by Dreamwidth Studios