maint
Picked up my new contact lenses this afternoon, and I don't remember seeing this well before. It's as if someone just cranked the resolution knob up several notches in the Matrix.
Aaron Swartz wonders what should he do with his life. I'm still wondering what to do with the remaining hours of this year, and the remaining days of my winter break.
Evan Williams
points out Po's new book on the subject, and a related piece which make the point that
PLACE Defines You
. Specifically he says:
...once you're rooted in a particular system -- whether it's medicine, New York City, Microsoft, or a startup -- it's often agonizingly difficult to unravel yourself from its values, practices, and rewards.
True enough. But let me leave you with a ray of hope. Yes, it is true that no matter what system you are a part of, that system obeys a set of rules (call them values, practices, rewards if you wish). The components of the system rarely understand the rules or perhaps even their existence. These rules can be used to both understand and predict the system. Morpheus was right:
Po says you'll be a lot happier if you aren't fighting the value system around you.
Perhaps. Hamlet's questions come to mind. Is it worth taking up arms against a sea of troubles, and by opposing end them? For now, I still say it is. And for those of you in EST or timezones earlier — Happy New Year! Join you in a few hours.
Mark Pilgrim's recent posts Million dollar markup and The tag soup of a new generation have saved me the time of writing up much the same. My summary of the points:
Let's try pushing the envelope of what HTML is actually designed to do, before we get all hot and bothered trying to replace it, mmmkay?
Look, putting angle brackets around things is not a technology, by itself. I'd rather make progress by having computers understand what humans write, than by forcing humans to write in ways computers can understand.
Actually, code and cite have been in HTML since the very beginning. See this draft of HTML (1.0?) dated July 1, 1993. The "logical styles" em, strong, code, samp, kbd, var, dfn, and cite are all listed, and Tim Berners-Lee encourages using them over the "physical styles" tt, b, and i.
Regardless, I do not believe in the Semantic Web, XML-based or not. (Dare doesn't either, so this part of the argument is not directed at him.)
...
Cory Doctorow put the nail in that coffin a while ago, specifically the part where people lie. The entire basis of the Semantic Web is that we'll have a universe of data that's only machine-readable, but that it will somehow be accurate and useful.
...
we already have some examples of how this will play out on the public Internet: meta tags in HTML documents, which spammers and other unsavory characters stuffed with keywords...
...
...developers still try all sorts of tricks to include text in the body of their pages that visitors (i.e. people) can't see but search engines (i.e. machines) can.
...
And now you're telling me that we're going to have an entire universe of purely-machine-readable data on the public Internet, and that anyone in their right mind would trust it? Please.
That's why I'm concentrating on the simple but relatively well-defined semantics of HTML, with my own content, for my own use. And even that is hard to get right.
Thanks for the excellent writeups Mark.
Another couple of quickies. First, Wayne Burkett pointed out via email that most of my permalinks are inside headings, and thus, by the Context before class principle, I should drop class="plink" from those permalinks, and use contextual selectors instead. He's right — I could certainly use contextual selectors for them. However, that would introduce a semantic inconsistency between among permalinks — most implying semantics by context, and the others (those for a specific category of comments within an entry) using the class attribute to specify their semantic detailing. I could simply place those remaining permalinks inside an appropriate heading level — which would also solve a lingering minor structural nit of having inline hyperlinks as peers of block level paragraphs. Hmmm...
[Tantek quickly does some markup searching & replacing, and rewrites his .plink CSS rules to use contextual selectors instead...]
Yes, it works. Another classname bites the dust. Thanks for the suggestion Wayne Burkett.
Now
Lou Brothers
has some fresh comments about my permalinks. Before addressing his comments, I have to first make fun of him for putting
BAD IDEA
in all unmarked-up all caps in his HTML, rather than using <em style="text-transform:uppercase">bad idea</em>. ;-)
Lou appears to still be confused about the hierarchical nature of my blog (days/time-stamped-and-titled-entries/categories), and its respective various levels of permalinks. His continuing reference to a "post number" (does noone else use 24hour uncolonized timestamps?), and confusion of the different hierarchy levels, makes me think either he didn't read my previous entry responding to his comments, or it wasn't written clearly enough, or both. Or maybe because I sometimes write only one entry for a day, in only one category, thus resulting in three permalinks that appear to refer to the same entry. Perhaps a hilighted hierarchical block diagram of the sample markup for a day's entries might help [comments in brackets like this]:
<div class='entryd d1231'
id='L20021231'> [all the day's entries]
<h1>20021231 [the date as the day's heading]
<a href="#L20021231">#</a>
[leading permalink for all of the day's entries]
</h1>
<div class='entryt item t1332'
id='L20021231t1332'> [an entry]
<h2 class='time'>1332</h2>
[entry timestamp as heading]
<h2 class='title'>
Couple of Quickies
[entry's title as heading]
<a href='#L20021231t1332'>#</a>
[leading permalink for the entry]
</h2>
<div class='entrya blog'
id='blog20021231t1332'>
[a part of an entry in a category]
<h3>blog</h3> [category name as heading]
<p>
Another couple of quickies.
[categorical content]
</p>
<p>
...
</p>
<h3>
<a href='#blog20021231t1332'>#</a>
[trailing permalink for category of content]
</h3>
</div>
</div>
<div class='entryt item t2359'
id='L20021231t2359'>
<h2 class='time'>2359</h2>
<h2 class='title'>Another entry
<a href='#L20021231t2359'>#</a>
</h2>
<div class='entrya astro'
id='astro20021231t2359'>
<h3>astro</h3>
<p>
...
</p>
<h3>
<a href='#astro20021231t2359'>#</a>
</h3>
</div>
<div class='entrya bio'
id='bio20021231t2359'>
<h3>bio</h3>
<p>
...
</p>
<h3>
<a href='#bio20021231t2359'>#</a>
</h3>
</div>
</div>
</div>
A few more late comments arrived regarding A Touch of Class.
David Engel
points out that
The accessibility of the site is far from perfect
.
Not too surprising I must shamefully admit. Little such effort has been made, other than the use of valid (and semantic) XHTML+CSS.
Web Content Accessibility Guidelines 1.0 compliance is certainly on my list. Regarding the two specific items David mentioned:
- multiple links separated only with white space
- the same text used to link to different URLs.
These uses seem perfectly reasonable, especially in the context of blogs, where authors quite often link strings of words to related sites (or even individual letters in a single word). Or in a navigation menu, where each menu item serves as a complete hyperlink — separated only by whitespace and markup. Or in a comments list, where each comment title serves as a complete hyperlink to the full text of the comment itself.
I think the second point is seriously flawed. The fact that many blogs use the sharp character "#" many many times in the same page to conveniently, quietly and subtly provide permalinks — distinguishable by their surrounding context — would seem to refute the second point. There is also a strong direct counterargument: the consistent use of the same text to mean the same thing relative to its local context improves the usability of a page. Anyone with experience in user interface design understands this principle. For those supposedly confused by this, a title attribute is provided with a more detailed description — which demonstrates another interface design principle — discoverability. It's reasonable to expect confused users to hesitate (hover) over a link before clicking it, whereupon they are rewarded with a tooltip containing the aforementioned detailed title text.
Given all that, the Bobby results from this page revealed a couple of instances of where I had neglected to place a descriptive title attribute on short hyperlink texts that had multiple instances, specifically the word "here", and a few fallbacks inside my now object. Fixed.
David's suggestion of using a "hidden" class could be one way around both of these problems, but seems like a hack. A descriptive title attribute is already prescribed by the standards, so why use a non-standard workaround? David closes with a perfectly fine suggestion:
... Another item I would find useful would be access keys for the navigation links he has at the top.
Done.
The good news is that Bobby did rate my site as passing all its priority 1 (WAIWCAG1-A) checks, and I verified the priority 1 user checks as well. For priority 2 (WAIWCAG1-AA) checks, I'll have to wait until the point about use of descriptive title attributes reaches the specs and or tools. For now, I've got the Level A badge.
it was said, and the word was written. Thanks to Eric Meyer for a superbly written summary, thus saving us amateur authors from attempting the same and only embarrasing ourselves.
Mark Pilgrim discusses
semantic enrichment with the <cite> tag. I've taken his advice and cited my sources on this page.
For more "Better Blogging Through Semantic Markup", see:
<abbr> and <acronym>Fellow semantic webizens, there are several more enriching HTML4 tags eagerly awaiting their turn in the semantic spotlight — step forward and champion them!
More on celebrating the diversity of mythologies, rather than trying to force (or otherwise coerce) a monomythology. Anil Dash nails it:
The lesson is not that everyone should celebrate Christmas, but that every culture can gain by celebrating the best of all the people who contribute to that culture.
Woo hoo! My actor sister Aysan is in town (Claremont) for a few days — out here all the way from New York City. She just flew in a few hours ago.
Of course we had to run off for hot chocolates at Nick's Cafe, where Aysan had remarked to me that she first saw Jewel, who apparently performed there sometime in 1993 or 1994 just after signing her first record deal.
Top 10 Space Mysteries for 2003 at space.com. Read it and one level of links. My movies/tv/media associations with the items on the list (besides Cosmos which pretty much touches on everything):
The Verizon repairman just left. It took only an hour and a half of phone time to get Verizon to send somebody (he even joked that we got off easy!). However, the repairman himself was courteous and efficient, and proceeded to quickly diagnose the various problems. He split the feed upstream, thus removing the need to put a filter on each phone. End result: DSL working fine at 576kbps (just checked), and a noise-free voice line.
In the theme of Daniel's No Comment blog:
Ever since NorthPoint went under, my parents have been using a 24k baud dialup. Switching the one phone line between voice/email was inconvenient to say the least. A couple of weeks ago they ordered Verizon DSL, which we just setup today. According to the MSN/ZDnet bandwidth speed test we're getting about 500k. Nice. Now if only the DSL filters they provided would get rid of those buzzing/beeping/clicking noises on the voice line...
Merry XMas. From NYT: Tools of Big Brother Are Up and Running:
Total Information Awareness also takes advantage of a simple and fundamental software technology called Extended Markup Language, or XML, that is at the heart of the third generation of Internet software. ...
The markup language allows data that has long been locked in isolated databases, known in the industry as silos, to be translated into a kind of universal language that can be read and used by many different systems. Information made compatible in this way can be shared among thousands, or even hundreds of thousands, of computers in ways that all of them can understand.
Was this what TBL had in mind for the Semantic Web? At least the Semantic Web should not have much difficulty getting funding at this point.
Played my first few games of competition-style (two player, 25 minutes apiece on a chess clock) Scrabble with some friends of my parents. Learned a few new words, which, though interesting, will be quite challenging to actually work into a conversation. Note: "internet" is not in the Scrabble dictionary, and neither is "intranet", nor "init" for that matter. However, "hypertext" and "semantic" both are. Was handliy trounced by the club expert that was there, but got within 20-30 points when I teamed up with some of the other folks against him. Need to memorize those two letter words: aa ad ae ah ai am an as at au aw ax ay ba be by ca da de do eh el em en er et ex fa go ha he hi ho id if in is it ja jo ka la li lo ma me mi mo mu my ne no od oe of oh om on op or os ow ox oy pa pe pi re si so ta ti to uh um un up ut we xi xu ya.
XSL considered harmful. Found on xml.com no less (via Stuart Langridge's post). Amazing how many things are 'considered harmful'. I wonder who is going to write the "'Considered Harmful' Essays Considered Harmful" essay.
Hixie agrees about the difference between myths and science and raises a point about their impacts on children. What would I think of a school that teaches young children that the Earth is flat? What would you think of a school that teaches biology and creationism side by side as if they were equals, and requires faculty members to sign a statement of faith affirming the myth of mankind's direct descent from two particular humans? From the PBS TV show Evolution - a thought-provoking series narrated by Liam Neeson (who plays Qui-Gon Jinn, for those of you more familiar with another mythology). Also, Number 12 on Ben Stein's list of suggestions for "How to Ruin American Enterprise".
Stuart Langridge took slight exception to my comment about how many CSS3 rules it takes to emulate "a.local".
Yes, I sometimes use absolute links in my local domain as well. And even after grouping selectors with commas, the resultant rules will still be bigger, and be harder to read than "a.local". This isn't Stuart's fault at all — in fact, his use of the CSS3 Substring matching attribute selectors is quite clever, and certainly would work very well even in a user style sheet, to style hyperlinks differently in pages whose authors had never even considered the possibility.
Stuart's right about the possibility of misclassifying a hyperlink. For me personally, the class="local" is autogenerated by my clientside blogging tool, so there is little such possibility (unless there is a bug in the tool).
In addition, it is not unreasonable to suppose additional link "locality" levels beyond just local/external. E.g. class="local" for links local to the domain, class="neighbor" for links to related/friendly/mutually-linking blogs, class="bigmedia" for links to mainstream news sites etc. Each of these could be styled differently to indicate the level of locality, trust, reliability, authority etc.
Earlier this week I wrote about proper use of the class attribute, and closed with an exercise for the reader. In return, readers have written suggestions for semantic improvements I could make in my blog.
The first concrete comments are from Lou Brothers:
Firstly, permalinks should be noted by
rel='bookmark'or at the very leastrel='permalink'. The former is more preferable and anything is better than Tantek's use ofrel='plink'.
Huh? I've never used rel='plink' in my blog.
I have used class='plink' since the beginning (which perhaps Lou saw instead?), and last month I myself recommended the use of rel='bookmark'.
Secondly, Tantek needs to relocate the permalink icons.
He uses three links on any given post (at the very least) which is quite convenient to the linker as one can link to either the date or the post (from either the top or bottom of the post). However the link for the date appears directly after the post number. Hello? That should appear after the date.
A bit of clarification — the "post number" is actually just the time the log entry was written (rather than posted), in 24hour format, hours and minutes, without an intervening ":".
There is a permalink for all the posts in a day, e.g. today, just after the date. Each particular post has its own timestamped permalink, just after the timestamp, and post title. Within a particular post, I may write on one or more topics, and at the end of each topic is the permalink for that topic in the post. It's these last two types of permalinks which appear to have been confused — precisely why I separated them.
That's structurally speaking of course. Presentationally speaking, for this particular styling, I wanted the permalinks out of the way, and having them hang out in the right margin (for the most part) kept the apparent body a bit cleaner, and visually implied a marginal scribble that one might have seen in older paper documents. Lou continues:
Next the post specific link appears after the entire post (which is a nice bow to the soon-to-be-linker who jus finished reading the post) but at the top it appears after the post name. If one is going to put a permalink after the post date, one should put the corresponding link after the post number, not the title.
I use three "levels" of permalinks, not two. The permalink for the date appears immediately to the right of the date. This is common, look no further than Douglas Bowman's [stop]design for another example. He uses a light gray mini document icon [
] for a pleasing but subtle permalink to the date.
My permalink for a titled log entry (post) appears inline just after the title, gently punctuating it. Finally, the permalink for a particular topic area appears in the right margin, just after the last line of that that topic, convenient for the soon-to-be-linker who just finished reading the post as Lou observed. The placement of a dingbat or other visual doodle at the end of a topic is a time honored print tradition. I got the idea to use such a topic terminating graphic as a permalink to the topic from Zeldman, who uses three successive colons [ ::: ] to nice effect — although I really did like his brief switch to a little heart character [♥] which he unfortunately had to remove.
Which brings me to my next point, date headers are
h1. I would argue, and this is a minor point, that these should beh2at the most. Yes, skipping first level headers is a bit of a kludge, but in my worldview one does not use multiple iterations of the first level header element per page.
Lou is precisely correct that skipping first level headers is a bit of a kludge. This is something I also did for quite some time as well - using h1 merely as an in-text duplicate of the title of a document. But that's not only silly (redundant), but a waste of a perfectly good heading level. Thus not only do I disagree with Lou's conclusion, but I think the opposite is correct.
h1
should be used for top level
headings.
In fact the section on heading elements in HTML4 hints at this near the end when it says
They accept H1 H2 H1...
.
And now for the current h2 element. This is applied to both the post number and the post title. Certainly both exist at the same level, but are they really separate headers?
This is essentially the how do you do subheadings issue, which has seen quite a bit of recent discussion on www-html started by Etan Wexler's post. Bottom line: there is no official HTML way to markup a subheading, so pick something reasonable. I picked adjacent hn elements of the same level.
The DIV around the object which imports the now.html file is likely redundant.
Two reasons for the div around the object:
<div>) is structurally required by the XHTML 1.0 Strict document type. A naked <object> would be invalid. Why not use a paragraph rather than a div? Because the object is not a paragraph.
And finally he should think about transitioning some class attributes over to id attributes where appropriate. If one will not use the modifier elsewhere it should be an id.
Finally! A comment about the use of class attributes (which was what I asked for — not a general semantic critique!). I'm not sure I agree about when to use class vs. id. I think id should only be used when you are absolutely sure there will be no other instances of said element in the document. If you have one of something today, and may have more than one tomorrow, then class is more appropriate.
Also, id has greater specificity in a CSS selector than class, thus all other things being equal, it is better to use class than id since class is "lighter weight". id should only be used when it needs to be. Regarding my use of class='log' on body, since there can only be one body in the document, there is no need for id to enforce uniqueness.
That's all that came to me - well, that and there are way too many DIVs floating around the posts.
I admit, my blog (dates/entries/categories) is more hierarchical than the typical blog (entries). However, I claim there are precisely the minimum number of divs necessary for the structure. Whether those divs could be more semantically meaningful elements is a question yet to be answered.
Next up, Simon Willison writes in some semantic suggestions:
Firstly, the following line would, in my opinion, be better served with a titled
<dfn>element
Good catch Simon. Simon was referring to my use of <strong> where it was much more appropriate to use <dfn>. Fixed.
Secondly, Tantek frequently uses a combination of a pre and a code tag to mark up sections of example code. This works fine, but could potentially be improved by adding a class element hinting at the type of code being displayed...
True. Though I had asked for examples of where I could eliminate the use of a class name, Simon has provided an example where I could add a class name to indicate a semantic detail.
I have added class="CSS" to the CSS code snippets, which are all valid CSS.
I have not added
class="HTML" to the HTML snippets, because they are all fragments of HTML, some not even complete elements, and thus invalid. I thought about perhaps using "html-fragment" and "html-tag" as class names, but that felt like a bit much.
Note that Simon himself used
just a plain <pre> element to markup the snippet of HTML he quoted from me. What do readers think?
Finally, Tantek's use of
<a class="local">to differentiate local and external links introduces (technically) redundant data - the fact that the link is to a local resource is implicit in its URL. This information can even be extracted using CSS3 selectors, as is demonstrated by Stuart's ingenous article External link icons the CSS way.
Yes, class="local" could be construed as redundant when viewed in the context of CSS3 Selectors. However, the necessary CSS3 selectors are far from broadly supported - in fact, I would guess that only one shipping presentation engine supports them.
There is also something to be said for simplicity. If you go read Stuart's article, you'll notice how many CSS3 rules it takes to emulate "a.local". This complexity would need to be replicated not only in style rules to present local/non-local hyperlinks differently, but also in scripts which alter the behavior of local/non-local hyperlinks.
On the topic of styling hyperlinks to indicate something about their destination, take a brief look at the comments on 'A Touch of Class'. If your browser supports CSS2 :lang() (or attribute) selectors, you should see a flag next to some of the names, indicating the language of both the name and the document at the destination of the link. :lang() selectors are supported in IE5/Mac, since almost three years ago (first browser to support :lang()?), and are also supported in the latest versions of Mozilla (1.2, maybe 1.1 according to David Baron).
And those were all the semantic suggestions I received in response to the post. I have yet to implement what I referred to in the afterword — namely, replacing some of my divs with semantically richer tags. Consider that web logs (logs in general) consist of a time/date ordered list of entries. And why use class='item' when HTML4 already has an element to represent an item in a list?
that is the question. And so to bed. What is Modafinil? Skip to the last five paragraphs of the article to find out.
Jane got passes for a preview showing of Chicago. First a quick stop at Omar's (24th near Valencia) for a pair of most excellent falafel sandwiches to go. Time enough to eat in line at the AMC — no need to foodsmuggle.
Lost in conversation we completely missed the theatre # as they took our pass. Followed about 30 other clueless to the top floor (after joking about the lemming strategy) only to be informed we'd gone two floors too far.
Still, we found good seats. Chicago. 1920s. Murder. Women's prison. Jazz. Musical. Great costumes, sets and scene mixes. Any more would spoil it. Perfect movie for a dark and rainy night.
Ok, I'll say just one thing. There is a great scene where Richard Gere's character is manipulating the press, who are dancing around as marionettes, strings and all. Imagine that — the press, being manipulated by a suit. Surreal is when things which are real, seem not real. What is it called when things which you know are not real, seem real?
Search portal simplification. From [stopdesign] :
Hotbot redesign launched.
Um, guys, any chance you could ditch the <layer> and <catman> tags? XHTML validity would also be nice.
New shurfing tool. Froogle. Tried it out and found kidrobot, where I found...
New TRON toys. The shurfing stopped and the walking out the door started when I found the link to Visit our store, which turned out to be mere blocks from my flat.
Adrian Holovaty spells it out for clarity and accessibility. I prefer abbr's myself — helps avoid all those what is and is not an acronym rathole discussions.
If you put science and mythology in a Googlefight, science wins — at least here in cyberspace. Overwhelmingly I might add.
The HTML4 class attribute is both flexible and powerful. Authors can define their own class names simply by using them, any number of which can be accomodated inside an element's class attribute.
<div class="header navbar"> ... </div>
Contrast this with tag names, which are restricted to the limited predefined set in a given language (unless you're brave enough to define your own DTD or Schema), and only one of which is permitted per element. You can mimic multiple "tags" on one "element" of content by nesting tags, e.g.:
<pre><code> ... </code></pre>
but such contortions imply a hierarchical structure where merely a collection was intended.
Class names can be bound to handfuls of CSS with the class selector, as easily and as capably as tag names can be bound with the type selector.
The combination of HTML's vanilla tags <div> & <span>, and the class attribute permits authors to define their own document language
. However, as CSS2 points out, class names have no defined semantics, and thus for all their power and flexibility, they are meaningless — as meaningless as any made up XML tag.
By glancing at the source of a few blogs, it is not difficult to find such uses like:
<div class='posttitle'>Today's news</div>
<div class='posttext'>
Some good, and some bad.
</div>
This is almost as bad as using Bed and BReakfast markup. Let's put that class attribute away for just a moment, and try using HTML tags that are a bit more meaningful than div and span:
<h2>Today's news</h2>
<p>
Some good, and some bad.
</p>
The Google Weblog uses this kind of markup already. And just as they have done, it is easy enough to add more paragraphs to a post and keep them semantically grouped by wrapping them in a div.
In this example, the class attribute was not only unnecessary, but a weak substitute for tags with defined semantics. Here are a few more examples of div/span+class (found here and here respectively):
<span class='dateHeader'>Monday, March 17, 1997</span>
<div class='email'>tantekc at microsoft dot com</div>
The primary purpose of markup is to make the meaning (semantics) of content more explicit. The class attribute, unfortunately, does not capture any semantics, at least not on its own.
Does this mean you should avoid the class attribute altogether? Absolutely not. However, it does mean that before using the class attribute, you should first pick the most semantically specific tag for the job (hint: div and span should be last resorts), and then, and only then, optionally specify a class to denote additional subsemantics. For instance, replace the generic span and div tags in the previous example with something more meaningful:
<h2>Monday, March 17, 1997</h2>
<address>tantekc at microsoft dot com</address>
However, despite the improved use of standard semantics, it feels like we lost something in the translation in this case (as opposed to the first example which did not require any use of class names). The class names in the original were much more specific than the tag names we used. Now that we've switched to more semantically meaningful tag names, the right thing to do is to use the class attribute to detail any additional semantics, essentially, to subclass those tag names...
<h2 class='date'>Monday, March 17, 1997</h2>
<address class='email'>tantekc at microsoft dot com</address>
Finally, there are instances where a class attribute has been used when context would have sufficed. What you say?
Example (from MeFi):
<div class='sidebar'>
<p class='sidebartext'>
This sideblog keeps track of site news ...
</p>
<p class='sidebartext'>
Available soon, ...
</p>
</div>
The "sidebartext" class name is used in order to style those paragraphs with a specific CSS rule like:
p.sidebartext {
padding:0 5px 2px;
font-size:11px;
margin-top:2px
}
This is all good and fine, yet the paragraph class is unnecessary, because the paragraphs are already inside a div with class "sidebar". We can use that aspect of the structure to construct this rule:
.sidebar p {
padding:0 5px 2px;
font-size:11px;
margin-top:2px
}
Thus the context of those paragraphs is perfectly sufficient to construct a specific CSS rule to style them, and there is no need to rely upon a redundant class name to do so. When it is equally meaningful to put a class name on a parent element or its child elements — use the parent element (thus using fewer class attributes — the higher, the fewer).
One more example (from 37signals):
<div class='SidebarBox'>
<ul class='sidebarlist'>
<li class='sidebarlist'>signals</li>
<li class='sidebarlist'>noise</li>
</ul>
</div>
Respective style rules:
ul.sidebarlist { margin:0; padding:0 }
li.sidebarlist { list-style:none; font-size:11px }
After class minimization:
<div class='SidebarBox'>
<ul>
<li>signals</li>
<li>noise</li>
</ul>
</div>
And new style rules, just as specific:
.SidebarBox ul { margin:0; padding:0 }
.SidebarBox li { list-style:none; font-size:11px }
Since that example used mixed case classes (and mixed case usage to boot) this is the perfect time to point out that class names are case-sensitive. Be careful with mixed case in your classes (e.g. "SidebarBox"), and especially careful if you mix your case usage (e.g. "Sidebar" and "sidebar"), as some browsers may incorrectly treat class case-insensitively, thus producing unexpected results. Or just keep it simple and stick with lowercase class names.
Where does that leave us? Hixie says Don't use class attributes...
. I think that's a bit extreme, and I think he was being extreme in order to hammer his points.
Instead, before resorting to the class attribute to indicate semantics, first look for more meaningful tags than div and span. If you find that even the most specific HTML tag you can find for the job does not convey the semantics in sufficient detail, then use a class name for those additional details. And before using the class attribute to connect an element to a CSS rule, first try using that element's context to construct a selector. I think you'll find that for semantically rich HTML, a touch of class is all you need.
And yes, for those keeping score at home, this was step 5. Previously: step 3 , step 4. Exercise for the reader: Now that you know a bit more about proper use of class, see if you can find related improvements that I could make in my blog. While writing this post I found at least two uses of divs with class where a more meaningful tag could be used instead. You have until the end of this week before the markup is revised. Note: Hixie and David Baron are disqualified since I've previously discussed this with them on IRC.
Updated exit (actually the following exits page) with new styling and just a few more hyperlinks. Some are boldened in return for linking back to here. Same convention with now. It's all done manually - so feel free to let me know if I missed any.
A bit more body padding-left (to be more forgiving of a possible bug in Mozilla), some p text-align:justify, and some nav header/footer padding/margin so they don't cramp the content's style. Finally the <code> snippets and blocks' institutional white background was causing harsh retinal after-images so now it's a bit subtler and has a hue more in sync with the rest of the styling.
There is a lot of unnecessary conflict as a result of people arguing about whose mythology is right or wrong, or trying to mix science and mythology in order to prove that a particular myth is correct or incorrect.
Of course folks can make such criticisms at will, and in most countries have the freedom (as it should be) to do so. But just because you have the freedom to do so doesn't mean that you should. Such criticisms and rhetorical argument are perfectly appropriate for academic and philosophical discussions where the participants have already set a context and an expectation of exploring those subjects. But in a general forum, such criticisms do little more than upset people. What's the point?
The most recent example of this was when a Vicar told children Santa is dead
.
He also said it was scientifically impossible for Father Christmas to deliver so many presents
and that reindeer would burst into flames if they had to travel at the speeds necessary
.
Does anyone else see the irony of a person, who believes in a mythical supreme being, scientifically refuting the existence of Santa Claus' gift deliveries? Perhaps someone should show the scholarly Vicar the proof that heaven is hotter than hell. Maybe he'll use it in his next sermon!
As they say, people in glass houses shouldn't throw stones. But they will anyway, until all the glass houses have been broken.
Another perspective is that this isn't a bad thing at all as it raises the notion of distinguishing between mythology and science. That's all fine and good, as long as in the end we still respect people's right to believe in whatever mythology they want, as long it doesn't drive them to hurt others or make public policy decisions based on their superstitions. This is no different than respecting people's right to have different tastes, eat different foods, wear different fabrics, listen to different rhythms, etc.
The varied and rich mythologies that people share are simply a part of our collective global human culture. They're not science and they shouldn't be treated as such. Rather, their diversity should be appreciated as we appreciate a diverse variety of cuisines, music, clothing, theatre, poetry, architecture, etc.
So play well with the other kids, and maybe Santa will put you on his good list.
Bug tracking will have to wait until later. I'm on my way in moments to the EFF housewarming at their 454 Shotwell SF location. Afterwards...
I mentioned Remix last month. Well it's Tuesday again, and I just got the 411 from the Remix list on Topica. We'll have to see what progressive tracks Joe and Ollie have in store for us tonight at the Galaxy Club.
The hover-sensitive styling problem has been fixed. Thanks to Dan Beauchamp for giving me half a clue. He noted that changing the padding on <body> fixed the jumping text problem in IE6/Windows and wondered if it is possible to mix and match unit measurements. The old code:
body { padding:1em 2em 1em 20% }
Dan was half right, because I had already tried changing it to all percentages, and the problem remained.
body { padding:1% 2% 1% 20% }
Thus mixing units was not the problem. The problem was % values on padding on body. So I set all the values to ems (which loses some of the liquidity of the layout alas), and added another rule using the CSS2 child selector to send my original values to browsers that are a bit more standards compliant.
body { padding:1em 2em 1em 10em }
html>body { padding:1em 2em 1em 20% }
Note the lack of any whitespace around the ">" child selector.
That solved the problem in IE6/Windows. The other problem was a bug in Mozilla with backgrounds on <object> tags. In this case I had a rule which set a background on the embedded object I used to reference my "now..." hyperlinks.
object { background:#fda }
Some of you may have noticed that the "now..." bookmark of hyperlinks just drew as a tall thin empty rectangle. This was the problem. Hixie reduced the problem and filed a bug.
I just checked and it looks like my simple markup and style caused another bug as well.
Now, what I find particularly disturbing about what was supposed to be a very simple styling exercise is how trivial it was to find bugs in popular major modern browsers.
I now have even more respect for those of you who stake your professional livelihood on web design and development that requires you to walk these minefields every day.
Lest I be accused of picking on other presentation engines, I'll end with a reference to Ev's complaint that IE on Mac ... is trouble
. So nobody's perfect. And yes, I'm looking into it...
The current oldpaper style sheet is still in progress, as some have observed. Despite being 100% valid CSS and not very complicated to boot, it still revealed bugs in at least two current browsers.
Yes, the styling is being developed in public as it were, and as such, if you see problems, try reloading (this and the main stylesheet). Yes, there are still problems with hover-sensitive layout in some popular browsers.
In other news: a bit of desktop rotation. From recent trips:
And it's about time. The W3C home page now uses CSS to layout the page, rather than HTML TABLEs (could fixing the Anorexic Anchors be far behind?), just as many web developers already have been for quite some time (some for years). It only took two years after the proof of concept by Daniel. And speaking of...
More structural tweaks. Added rel="prev", following Adrian Holovaty's example. Also, Doug pointed out tonight that part of the class attribute on the divs representing a days worth of entries was redundant with the ID on that same div. Fixed it to only refer to the month and day in the class attribute, whereas the ID which servers as the anchor contains the full year, month and day.
We had a great time at the H Cafe tonight. Chatted about many topics, some of them web related. Small groups tend to make for more informal banter. In some ways it was nice to just catch up. We didn't come up with a name, nor concrete plans for the next gathering. Doug suggested trying more advance notice. Todd has tentatively volunteered his wifi saturated pad. Stay tuned — or feel free drop a message to Doug or myself if you're interested in hanging with us next time.
Picked up my new contact lenses this afternoon, and I don't remember seeing this well before. It's as if someone just cranked the resolution knob up several notches in the Matrix.
Current styling was inspired by some of the old paper I saw this past Sunday. Still tweaking here and there.
Summary of structural changes (as suggested by others):
Finished reading In The Beginning ... Was The Command Line by Neal Stephenson on the flight home. A quick easy read sufficient for the flight to SoCal and back. Some good observations, some theories with potential (and a few without), and plenty of reality checks.
Flight in less than a couple of hours back to the Bay Area, and then it will be back to work tomorrow. Tomorrow evening looks like it will be fun though.
It's a new month and you caught us in the middle of redecorating. For now, enjoy the bare minimum simple styling. Structural changes have already been made however. See if you can spot the differences between this month and last month.
Went to the Huntington Library and Gardens today. The library had numerous works that were hundreds of years old. They let us take pictures so here they are: Huntington Library Documents. Students of layout and typography (and even newfound CSS hackers) may appreciate the various familiar forms in such classics as the Declaration of Independence (as printed in the Pennsylvania Evening Post on July 6 1776), the US Constitution (Member's Edition for the delegates, 1787), the 1860 Census (good example of when to use a semantic <table>), and the Treaty between France and the 13 United States (check out the letter-spacing on that baby). Or just browse all the photos. [Huntington Library and Gardens entrance]
© 1996-2002, Tantek Çelik, All Rights Reserved
Comments: