Note: restyling in progress.
Gray and green background scaffolding is temporary.
urgent
connections
mentions
events
- 20041002 Love Parade San Francisco
- 20041005-20041007 Web 2.0 Conference
- 20041006 Technorati Hackathon
- 20041009 Stanford EDAY '04
- 20041102 US Election
- 20041106 BloggerCon III
- 20050519 Star Wars Episode III release
books
reviewing
People
regulars
recently met
20040912
20040911
20040910
recent finds
news filters
badges
search tantek.com
current projects
recently completed
publications
- XFN Poster co-authored, 20040811
tech-edited, 200407
tech-edited, 200403
sites
- Technorati main site XHTML strict release, 20040915
- Election Watch 2004 v2, 20040830
- Election Watch 2004 v1, 20040726
- Technorati redesign, 20040726
standards
semantics
CSS hacks
20040930
2359
Technorati Hackathon Next Wednesday
- work
- web
- blog
Next Wednesday night at 8pm, Technorati is holding a "Hackathon" at our new SF SOMA headquarters. Mr. Sifry provides the details. In particular, I'd like to extend the invitation to web designers and developers, especially those that like to customize their blogs, and I will emphasize that we have limited space, so please RSVP ASAP <rsvp@technorati.com>. Hope to see you next Wednesday!
-
1834
Congratulations to Jeffrey and Carrie!
- friends
- family
Congratulations to Jeffrey and Carrie on the arrival of Ava Marie Zeldman! I was waiting for Jeffrey to post something, but decided to join the building chorus of congratulations.
Best wishes to all. Can't wait to see photos of little Ava!
Comments
-
1833
Business 2.0 on blogs and marketing
- blog
- web
- news
Business 2.0: Have Blog, Will Market.
Comments
-
1725
"Semantic XHTML" slides posted
- web
I've posted the slides from Semantic XHTML: Can your website be your API? talk that Kevin and I gave Tuesday night. Longtime readers may notice that we reused the same XHTML slide framework that I came up with for my talk at SXSW 2003 and have been reusing ever since. It's not optimal, but it works just fine (across lots of browsers even), and yes, eventually I'll get around to another iteration of the framework.
We briefly touched on the "Markup of Politics" — Kevin explained because we'd used semantic markup for the "Attention Index" table (which actually semantically is a table, so using a
<table>was precisely the right thing to do), he was able to parse out sufficient information to automatically build some interesting dynamic charts.One thing I realized while giving my part of the talk was that I don't think I've ever seen a comprehensive article on how to make optimal semantic use of the
<cite>,<blockquote>, and<q>tags, and theciteattribute in blogs (along the same lines of reasoning as article posts on Bed & BReakfast and Anorexic Anchors. Though I did see this article by WebSite Primer: Three Ways To Have References Noticed that discussed the use of those tags on the Web in general.But blogs in particular make a lot of use of quotes and citations to the point of threading whole conversations. So maybe it is about time for me to write another article about how to better use semantic markup on your blog. One key area to address is how to best mix hyperlinks, citations, blockquotes etc. E.g. do you hyperlink a citation or do you cite a hyperlink?
Another key point of the presentation is one of the methodologies of semantic XHTML that we put forth, which is to reuse schemas from existing simple data formats (e.g. RFCs) whenever possible, sensible, and practical, and map them to XHTML equivalents (rather than reinventing for no good reason). I first posited this methodology during the "Simple Semantic Formats" and "HTML For Calendars" talks at FOO camp, and the more I thought about it, the more it made a lot of sense.
If you do this right, you end up with what Bill Humphries called lossless XHTML.
The two instances of this that I propose we first consider are:
hCalendar
— a name I made up to mean a 1:1 representation of iCalendar (as defined in RFC 2445) in XHTML that could be presented with CSS on web pages, and parsed semantically by gathering services, and similarlyhCard
(another made up name), which is a 1:1 representation of vCard (as defined RFC 2426) in XHTML to similar effect.
Why these two? Simple:
- Bloggers tend to blog a lot about events, people, and addresses.
- Both vCard and iCalendar are well established mature standards with numerous interoperable implementations. Therefore by reusing those standards (instead of reinventing and rearguing), we leverage a ton of established work and widely deployed products.
The hCalendar effort in particular was very much inspired by the aforementioned "HTML For Calendars" discussion. Since many (if not most/all) iCalendar implementations also implement vCard, hCard is a logical next step. If you are interested in either actively helping to move forward or following these two efforts, drop me an email.
I'll close with the same question as at the end of the presentation:
What other semantic XHTML building blocks are useful?
Comments
- Danny Ayers
Danny, you have it backwards about FOAF. First, FOAF itself has no semantics about being a "friend", whereas XFN defines the 80/20 of typical relationships quite nicely that people either already publicly discuss and reveal about themselves on the web, or have shown inclinations to do so. And frankly the "relationship" schema extension was first too obscure and unrepresentative of web-expressed relationships to bother with (or even be noticed frankly), and later simply plagiarized XFN and bloated up with a grab-bag of additions. Second, it is FOAF that reinvents vCard for no good reason in an unnecessarily complexified form.
- Yoji Hirabayashi
- bmann
- Kellan Elliott-McCrea
- Boris Mann
20040928
1232
SD Forum WS SIG talk tonight and other recent happenings
- blog
- web
- work
Kevin and Tantek at SD Forum WS SIG
As Kevin announced, he and I are presenting at tonight's Software Development (SD) Forum Web Services Special Interest Group (WS SIG) meeting on Semantic XHTML: Can your website be your API? - Using semantic XHTML to show what you mean.
Technorati downtime
You might have noticed that Technorati was down this past weekend. David Sifry provides the fiery details (literally) of what happened, what we're doing to make sure it doesn't happen again, and how much respect we all have for the web services we take for granted like Yahoo, eBay, Google etc.
Charsets and XHTML validity
Sam Ruby holds forth on how character set encoding problems propagate easily because of copy and paste. If your site excerpts external content or allows copy and paste entry of arbitrary text, this is perhaps the biggest obstacle to serving valid XHTML 1.0. Did I mention that all of Technorati (e.g. Technorati Top 100, valid) is now Valid XHTML 1.0 Strict? Thanks to a lot of hard work by Kevin for nailing those charset issues.
Technorati tracks 4 million blogs
Totally unrelated to the previous two items, last Friday, Technorati passed the 4 million mark in terms of blogs being tracked, and the 600 million mark in terms of links being tracked. Just for comparison, the 3 million blogs mark was in July (almost three months ago) just before I started.
Redesign draft 1
Finally, on a more personal note, I've wrapped up the first version/draft of my most recent redesign, deliberately keeping it clear and clean of decorative color (except for default non-heading link colors), lines, images, backgrounds, borders (nevermind the
<fieldset>s).While that's certainly quite boring from a web design perspective, as an amateur designer, I've found it a far more interesting (and challenging for that matter) exercise to develop a clear and readable look using just the basics of space and type (family, size/leading, weight). I really like the liquid main content column with two fixed links side columns layout, both from a window usage perspective, and from the perspective of presenting the viewer with clear near to far transition from primary content, to related secondary site links, to related external links, resources and recommendations.
I'm still not totally happy with the line-spacing around main content headings which feel like they need a bit more room if/when they wrap to two or more lines. However, I don't think I've seen a liquid:fixed:fixed three column layout used in this manner to express the semantic of a spectrum from near to far, and I'd be interested to know if readers know of other examples.
Comments
- Matthew Mullenweg
- Brian Cantoni
- Luca Lizzeri
- lief
- Bill Humphries
I really like the term "lossless XHTML" that Bill just came up with.
- Serge K. Keller
20040919
2003
Weekend update
- friends
- family
- freedom
- news
- blog
- brunch
- cafe
Spent the weekend at my parent's place, packing up a bunch of old papers from highschool and college (some of which were typed with an actual manual typewriter, no, not one of those fancy proportional width IBM selectrics which everybody is talking about these days).
Amber and I grabbed a late lunch at the Rockridge Cafe which was quite good (tomato tortilla soup and spinach salad with garlic sour cream dressing). Afterwards coffee from Peaberry's Coffee & Tea was used to wash down snacks from Some Crust that I had picked up earlier that morning.
Took BART back to the City and now hanging out with Matt and Min Jung, and we're sharing links. Here are a few of mine:
- I Found Some Of Your Life. Dedicated amateur ethnologist blogger finds digital camera in the back seat of a NYC cab, apparently left behind by college frat boy, and proceeds to post found photos in chronological order accompanied by first-person synthetic storyline. Read it from the beginning.
Update: looks like it's been taken down due to various unspecified reasons. Perhaps try googlecaching to see if you can dig it up...
- Show tunes singer 2, Homophobic theofascist subway preachers 0. Fighting "hellfire" with Pennies From Heaven. Very nice.
- Trogging = Trust + Blogging. Another gapingvoid instant classic.
: Barnaby updates his site to include XFN.
- Hiring. No False Positives. Spot on. Exercise for the reader: If A players hire A players and B players hire C players (and C players hire losers), then who hires B players?
- What's Wrong With: Feed Readers. Feed readers remind me of News (Usenet) readers (remember those?). News readers used to be separate applications (e.g. Newswatcher), but eventually newsreading became just another feature of mail programs (e.g. Internet Mail and News, Outlook Express, etc.), since the metaphors/userinterfaces were nearly a perfect fit. So when will Feed reading become just another feature in mail programs? The open source mail program Thunderbird already supports feed reading. Could Outlook (there's a plugin for it begging to be acquired isn't there?), Yahoo mail, Gmail, or Hotmail be far behind?
- Blog Clog. Perhaps RSS was less well thought out (as far as scaling at least) than NNTP?
- Pieces Of Rakesh: The Economics of XHTML. A fairly good overview of the subject, with a lot of good followup analysis in the comments as well.
- Another "politics." subdomain/machine name: politics.slashdot. When my suggestion for using "politics." as the subdomain for Technorati's Poltics site (yeah, I know, it was an obvious suggestion) won the team's acceptance, I had no idea that so much "flattery" would follow.
- Hayek Smiled: Why Blogging Works. Decentralized systems of cooperation outperform systems of command. Simple economics. Just ask the (former) Politbüro.
20040915
1357
Technorati is hiring
- web
- work
Technorati is hiring, and if you are interested, I encourage you to check out our Jobs at Technorati page, read the job descriptions, and if one or more make sense to you, follow the directions at the end of the description (in short, email jobs at technorati dot com with the job title in the subject).
In fact, Kevin Marks and I are at the Stanford Engineering Alumni Job Fair right now (don't say I didn't warn you, it's been in the event roll over there on the side for quite some time now).
We'll be here until 6pm today. If you're a Stanford Engineering Alum, you can just register at the front desk at the Alumni Center and walk right in. If not, we'll leave it up to you to socially engineer your way in to the job fair.
Comments
20040912
2359
FOO camp day 3 notes
- web
- friends
- attended David Weinberger's talk about the new book he is writing
- attended Danny O'Brien's talk
- led a group discussion on Model+View+Controller = XHTML+CSS+JS. Discuss! consider:
- web design patterns
- semantic XHTML patterns
- packed up, cleaned up
- had a few more good conversations with folks still around
- left for home in the late afternoon
Met some folks today also:
I'm sure I'm forgetting a few folks I met this weekend, there were so many amazing people it was very hard to keep track. I'll check my Technorati inbound link cosmos for folks blogging about FOO camp who said they met me.
Thanks very much both to O'Reilly for hosting a great event, and to Tim and Rael for the invitation. I had a great time at this weekend long super-brainstorm-session of yours. I've posted most of my notes on the wiki (see linked sessions in the past three posts), and will add anything else I can remember.
Comments
20040911
2359
FOO camp day 2 notes
- web
- friends
- participated in HTML For Calendars talk/discussion
- gave Attention.XML presentation with Kevin Marks
- participated in YAML, intro Rendezvous, decentralized feed sync, email innovation, Halo, Meme Construction Lab sessions
Again, met a whole bunch of folks.
- Andrew Baio
- Orkut Buyukkokten
- Esther Dyson
- Dick Hardt
- Brian Ingerson
- Scott Johnson
- Mitch Kapor
- Robert Kaye
- Ray Ozzie
- Lori Park
- Michael Radwin
- Jeremy Zawodny
Comments
20040910
2359
FOO camp day 1 notes
- web
- friends
- checked in just after 7:30pm
- claimed an indoor camping spot and setup
- missed dinner
- made it just in time to the intro meeting
- had a good discussion with Adam Bosworth about how web developers and designers are rapidly adopting CSS for presentation and XHTML for semantic markup.
- proposed a 10pm session on Simple Semantic Formats
- drove to Mary's Pizza Shack and got a large veggie pizza to go
- got back to FOO camp in time to do the Simple Semantic Formats presentation with Kevin Marks
- stayed up late of course
Met several folks during the course of the evening:
Comments
20040907
1434
Ten CSS tricks — corrected and improved
- web
Recent Evolt article Ten CSS tricks you may not know, is seeing plenty of discussion, so it deserves a bit of a critique.
Note: The criticisms contained in this post are intended as ways to improve the tips in the article, nothing more, and should be taken as such.
1. CSS font shorthand rule
While suggesting the use of the CSS 'font' property shorthand is perfectly reasonable, a better tip would be to suggest the use of CSS shorthands in general, e.g.:
shorthand property sets all of these at once font font-weight, font-style, font-variant, font-size, line-height, font-family background background-color, background-image, background-repeat, background-attachment, background-position margin margin-top, margin-right, margin-bottom, margin-left padding padding-top, padding-right, padding-bottom, padding-left border border-width, border-style, border-color border-width border-top-width, border-right-width, border-bottom-width, border-left-width border-style border-top-style, border-right-style, border-bottom-style, border-left-style border-color border-top-color, border-right-color, border-bottom-color, border-left-color list-style list-style-type, list-style-position, list-style-image outline outline-color, outline-style, outline-width 2. Two classes together
This is a good tip. However (and through no fault of the article), there are some flawed or misleading at best comments about this tip, e.g. bryan_loper writes:
Don't forget that IE has issues handling multiple classes.
Actually, no. As the article presents it (multiple class names in a class attribute), IE (all platforms) has no problems AFAIK. It is only the CSS2(.1) multi-class selector that IE (all platforms) has trouble with. This is a common misconception (class attribute support vs. class selector support).
3. CSS border default value
Again, a fine tip, and yet one that could have easily been expanded to illustrate what it means for all shorthand properties, not just 'border'. That is: all shorthand properties set any unset elemental properties (see above table) to their initial values.
4. !important ignored by IE
Alright, this one is just wrong. This tip is sufficient for me to seriously question this article, because it would have been so easy to double-check.
IE (all platforms) supports !important, just go try the CSS1 Test Suite section 3.1 important test suite page for yourself. And if you check any of the CSS feature support charts out there, you'd see the same.
There is however a kernel of a bug hidden in this tip:
margin-top: 3.5em !important; margin-top: 2emSo, the top margin will be set to 3.5em for all browsers except IE, which will have a top margin of 2em
First, the reported problem only occurs for IE/Windows based browsers (i.e. IE5/Mac handles !important properly, including in this case. Another reason to question the article, as it appears the author doesn't distinguish between IE/Windows and IE/Mac rendering engine behavior, which can be quite different.)
Second the problem actually has nothing to do with !important, but with the processing of multiple declarations of the same propertry in the same style rule. Similar problems result in IE/Windows if you try multiple declarations of the 'color' property for example with a CSS1 value followed by a CSS3 Color value that latter user agents support.
The real problem here is there seems to be an ever frequent tendency by certain web designers to prematurely assign the "buggy" label to IE/Windows (or just "IE") without having rigorously (a) researched already available online resources or (b) constructed sufficient valid test cases to make the claim (and presented said test cases).
The author of the tip goes on to demonstrate a lack of thoroughness with the concluding statement:
(Many of you may also be aware of the CSS child selector, the contents of which IE ignores.)
This is an incorrect overgeneralization. Though IE/Windows ignores the CSS child selector, IE5.1/Mac was one of the first browsers to properly support the child selector (much before others like Opera or Konqueror/KHTML, both of which caught up eventually and supported it). Here is the original test case that separated the real child selector implementations from the nice tries: Child Selectors Test , in particular the last test:
This should be aqua (this test is harder than the others!).
5. Image replacement technique
This tip is so-so, only in that it isn't literally inacccurate, but that it grossly oversimplifies a topic which others have written whole essays on, and fails to link to them to boot!
In summary: be very careful with CSS image replacement techniques. Read the first page of results from a Google search for CSS image replacement from such well known authors as Doug Bowman, Dave Shea (Digital Web article), Joe Clark / ALA, and Stuart Langridge before using said techniques, and note how even the experts have revised their image replacement techniques as a result of overall community experience on the topic.
The same "bryan_loeper" that made the comment above suggests the image replacement technique that is my current favorite: using negative text-indent. Bradley and I put this technique to work in the Attention Index tables on the Technorati Election Watch 2004 site update. All the images in those tables are shown using CSS.
6. CSS box model hack alternative
Heh. Clearly I'm going to be a bit biased here. :)
The simple criticism is this: better to use CSS hacks to keep hacks out of your markup than the opposite.
The suggested technique of using an additional div in this way is nothing more than presentational markup. You might as well call it a <border> tag. Oh look, someone did.
Again, "bryan_loeper" gets this right:
Don't butcher the markup so that you can clean up presentation hacks...that's just rediculous[sic]. Content stays the same, presentation is what you're changing, so put the hacks in the presentation.
Next from the article:
7. Centre aligning a block element
This tip seems almost precisely correct. The only improvement I might suggest is to use individual properties for 'auto' instead of the 'margin' shorthand. I have a vague recollection of a few browsers having problems (ignoring?) the
margin: 0 auto;shorthand, whereas they worked fine with themargin-left:auto; margin-right:auto;longhand equivalent. If someone knows of the specific browser(s) that have this problem, please link to this post and point them out. Thanks.Update: Philippe Wittenbergh has written a comment where he notes a page that mentions that IE5/Mac needs the longhand when centering <table>s as demonstrated by this centering tables test page. Mea culpa — that would be one of my bugs in Tasman that didn't get fixed until after IE5.2/Mac. Thus the fix made it into MSN/MacOSX and Office2004/MacOSX, but not into any IE/Mac update. That's probably why I had the vague recollection.
8. Vertically aligning with CSS
This tip is a very good one actually, and while I've toyed with this technique a bit myself, I was kind of amazed no one had written it up yet. Well now someone has. The only bit I might add is that due to the metrics of the specific font, the text may or may not appear precisely centered. As a result, you may need to nudge the text up or down a bit with a specific 'vertical-align' absolute length value.
9. CSS positioning within a container
This too is a good tip. The only caveat I might add is that "position:relative" is less well/widely supported (and tested for that matter) than the "margin" property. So if the "margin" property suffices, use it instead. In general if you can stick to CSS1, you'll have better luck with cross-browser interoperability and support than any features new to the CSS2(.1) (or CSS3 for that matter) specifications. This traces back to the fact that not only is CSS1 older and better understood, but it has a very good CSS1 Test Suite, whereas no such test suite exists for CSS2(.1) yet.
10. Background colour running to the screen bottom
This is also an excellent tip, that illustrates in not so many words one of the weaknesses of many CSS based layouts.
All in all not a bad article. But certainly one that would have benefitted from a little peer review before publication.
Comments
- Steve Hooker
- garrett
- Alexander Weber
- Jens Gnochtdreis
- Web Standards Project
- Neil Turner
- Nick Bradbury
- Tim Yang
- SM Korzdorfer
- Derek Lakin (2)
- Philippe Wittenbergh
- Dave Shea
- Roger Johansson
- David Bisset
- Sergi - zigotica
- tehu
- Marcello Cerruti
- Stefan Jahn
- Travis
- Hanni
- Joen Asmussen
- Jordi
- Ivo Schwalbe
- Pedro Palazon (2)
- 凱爾的布拉格廣場
- Сорок шестой выпуск
- Serge K. Keller
- Jiří Bureš (2)
- Martin
- Nick Cowie
- Dash-Aitch
- Mike Golding
- Daniel Torres Burriel
- roel
- Tim I.
- Ken Edwards
- Manuela Hoffmann
- Joseph Dunn
- Reid Stott
- Panoptic Communications
- Russ
- CPH
- Aaron Schaap
- headsfromspace
- Benjamin Barreth
- otro blog más
- Frank Prendergast
- Kemas Yunus Antonius
- css-discuss wiki
- Christian Fusi
- Dotan Dimet
- Keith Krieger (2)
- Devsyn
- Ali M. Rokni
-
1056
LazyChat
- web
- friends
Introducing a new query protocol: LazyChat. This seems too obvious to be new, and yet, a little bit of googling revealed no prior mention of this technique.
LazyChat is the iChat / instant messenger equivalent of lazyweb.
In short: set your IM status to a question that you think has an obvious answer, and wait for one of your buddies to answer it, either with a chat message, or, perhaps by setting their own status.
Step 1: Question. The requestor (AKA the person with a question), sets their iChat (insert instant messaging client of choice) status message to the query (AKA the question they want answered). LazyChat should only be used for simple questions, which seemingly have obvious answers, which someone in the requestor's buddy list will know offhand and can convey with a minimum time cost. E.g.
where can one buy a MUNI pass in Cole Valley?
Step 2: Wait. The requestor, being lazy, waits for an answer. Time to answer is proportional to the product of the number of online buddies and the simplicity of the question, with perhaps a penalty factor for previously excessive laziness.
Step 3: Answer(s). Someone in the requestor's buddy list, who knows the answer offhand, quickly IMs an answer (or several) to the requestor. E.g.
http://www.sfmuni.com/php/farevend.php?zip=94117&prod=Senior
http://www.sfmuni.com/php/farezip.php?prod=Adult
Pharmaca on cole and carl
do i win a prizehttp://www.sfmuni.com/fares/passvend.htm
even better...
http://www.sfmuni.com/php/farevend.php?zip=94117&prod=AdultStep 4: Acknowledgement. Requestor updates their iChat status with a short thank you (AKA shout-out) to the buddy or buddies that answered their question. Hysteresis of the thank you status message is up to the requestor. The thank you message should be perhaps be shown an amount of time proportional to the difficulty and importance of the question. E.g.
thanks Adam, Jane, and Bradley!
Known limitations of the LazyChat protocol:
- Instant message status fields are typically quite small, both in terms of how much text can actually be entered, and more importantly, how much is presented in a default buddy list view. This limitation naturally constrains LazyChat questions to brief queries, expressable in perhaps ten words or less. This limitation is fitting for the medium.
- Response time is limited to the number of people that have you in their buddy lists who are also online. Thus mean-time-to-answer is likely to vary quite drastically depending on the time of day.
- Excessive use of the LazyChat protocol may result in exhaustion of your LazyChat "good will" thereby causing the mean-time-to-answer to approach infinity. LazyChat good will loss can be minimized through proper compliance with Step 4 Acknowledgement.
The reason why I was asking about a monthly MUNI pass will have to wait for another post.
Comments
-
0904
A few interesting links
- news
- CNN: Vote count at mercy of clandestine testing. The whole electronic voting machine story gets worse and worse. Fortunately this is one problem every voter can solve for themselves. Take the advice given by a glossy mailer paid for by the Republican Party of Florida (post with photo of flyer) and request an absentee ballot.
- Forbes: Gates Donates To Stem-Cell Research Campaign.
- Forbes: Microsoft leaves U.N. industry group. This actually makes sense IMHO, when you read the not-so-fine print:
the group's intellectual property rights guidelines ... force corporations who contribute technology to indemnify the United Nations against potential legal challenges involving intellectual property claims
The whole indemnification trend is out of control. I even had a book publisher ask me to indemnify them for use of my free CSS Box Model Hack. I asked them why should I indemnify them (effectively a cost to me) for something they are getting for free (no cost to them). They spouted some boilerplate about process and having no choice. Typical organizational non-think. Finally I told them they can take it with a Creative Commons License or leave it. They blinked, and took it.
Publishers (and other organizations), please stop insulting authors/creators and asking them to indemnify works that are made available or submitted/contributed for free. Thanks for listening.
- CNET: Blogging: A world stuck on itself. I remember seeing the announcement for that particular Churchill Club event and thinking, this is going to be bad, and not going. Apparently it was. Unfortunately this is pretty much par for the course with recently hyped presentations on "social software" or "social networking software" etc. Anyone remember when the buzzword was "groupware"? Whither Lotus Notes? Here's a thought experiment, next time someone tries to sell you some "social software", ask them how their solution is any different than the "groupware" solutions of the early 1990s (other than using a browser interface instead of a native code interface).
- Farewell Jay, it was good to see you before your northward journey.
- Yahoo's Election 2004 blog roundup. Note the Technorati's Election Watch link near the bottom of the right hand blue column. Thanks for the link Yahoo!
- In-N-Out's (not so secret) undocumented food API. I've been ordering the grilled cheese with extra everything, pickles, and both kinds of onions for quite some time now.
- Hampton's Man and the Hampton's Man Blog. Enough about the acquisition of materials and construction. Did the Man burn or not? We want video.
- Forbes: Opera offering browser for Windows-based smartphones. Sigh. Well done Opera. It's about time somebody displaced PocketIE. This is where I mumble something almost incoherent about how we had Tasman running on iPaqs three years ago.
- SFGate: $5.8 Million Tattoo. Free lunch every day if you tattoo your arm with the restaurant logo. At first I wondered if some enterprising chap had already started a tattoo sponsorship program for the homeless. But then I read the fine print.
- Wired: Permanent Lenses in Sight. Somebody please smack the headline writer for that horrible pun.
- Ananova: Fruity sweet wrappers spark complaint. You have to see the pictures. SFW if you don't look too closely.
- Indiana University study: having children significantly lowers parents' IQs. One of those good for a few quick hesitant laughs articles. Wait for their methodology to be vetted however.
Update: snopes has debunked this as a hoax. Phew. Not that I have children yet, but hopefully some day.
- Jonas has signed up to write for The Social Tools Weblog. Congrats Jonas. Note to self: check out Jonas' Indispensable Mac OS X products page when I have time to tweak my OSX setup.
- Geekiest protest sign ever. You must see the photo — whether or not you agree with the message. In fact, some might assert that the start tag was invalid due to a violation of states' rights by the Supreme Court.
- And if you do disagree with the message, consider taking a look at this: independent.co.uk: Bush by numbers: Four years of double standards.
- Either way, if you haven't registered to vote, you should, and here is a way to possibly even win some money: VOTEorNOT.org.
- Here is a useful tip for making self-signed certificates work with IE5/Mac. Thanks for documenting this Ian.
- 86 the *38. Startup tries to monetize caller-id spoofing. Founder gets harrassed over the phone. Hilarity ensues.
- Technorati's very own Kevin Marks is going to be guest blogging on Corante: Many 2 Many. For those that don't know, I have Kevin to thank for gently encouraging me to speak with the Technorati team which resulted in my current position.
- Arrr, matey! 'Tis metadata piracy time!. Apparently there are some issues with parsing the Hotlinks feed.
- Reuters: Did the First Americans Come From, Er, Australia?
I couldn't help but chuckle when I read this. As someone who was born in the U.S., I've taken to calling myself a native American for quite some time, because, after all, native just means you were born (and perhaps raised) there. A simple enough response to the hijacking of the term "Native American" by political activists seeking newspeakian renaming of the term "American Indian". This article points out how ludicrous it has always been to base any claims upon arguments like "they were there first". Let that be a lesson to those who abuse and twist language for their particular politically correct ends.
Comments
-
0329
Labor Day Weekend Of Fun
- personal
- friends
I think I just had the most fun unplanned three day weekend ever. The highlights, in reverse (of course, or perhaps just to tease or annoy Eric) chronological order:
Today
well, logical today, physical yesterday 2004-09-06
- This evening: consumed a home made chocolate chip espresso milkshake (which is perhaps why I feel so wide awake at 3:30AM).
- This afternoon: spent the day at Ocean Beach in nice clear 80 plus degree weather with Amber, Aytek, Steve, and little Devran. Many firsts.
- First "family" beach trip to Ocean Beach.
- First time the sand was so hot starting from the sidewalk that I had to wear flip-flops all the way to the shore.
- First time I drove in flip-flops for that matter.
- First time I swam at Ocean Beach (the water was a bit cold at first, but the ambient air and sunlight were so warm that you got used to the water in no time). Anyone who has visited Ocean Beach knows how amazing this is. Yes, without a wetsuit.
- First time I body surfed at Ocean Beach.
- And before that, Amber and I shared Gordo's burritos which we had picked up to go. The second time we've had burritos on the beach.
Yesterday
- Last night we Jane, Amber, and I helped MJ warm her new abode. We were late to the potluck so we brought Devil's Food Poppem's, a Krispy Kreme variety pack, and a half gallon of 1% milk for dessert.
- Actually we were naughty and went to dinner beforehand at the Citrus Club and don't regret it one bit.
- That afternoon we needed a nap badly and fortunately we found one.
- Earlier that afternoon we enjoyed the wonderful hospitality of Derek and Heather, and were treated to some vintage Viewmaster reels. It was all a clever ploy to get us to pose unknowingly for Ephemera: View-Master Party.
- About 4:30am that morning we finally closed the party down and went to sleep.
Saturday
- Late Saturday night, Amber hosted "Freezing Woman", a wonderful all night house (as in at a house, not "house music') party for all those avoiding the searing heat and scathing sandstorms of that other event. Appropos drinks for the night: chocolate and vanilla espresso milk shakes, blended with real espresso grounds and chocolate chips.
- Late that morning a delightful brunch at the West Portal Raintree Cafe.
Friday
- And finally it all began, I believe (the memory is fading) with a Friday night Mel's run.
Comments
20040906
2354
Undoing html.css and using debug scaffolding
- web
- blog
One thing that I have found myself doing nearly every time I code a new CSS design, at least a non-trivial one, is undoing the layout and typographical damage that browser default style rules do to semantic markup.
undohtml.css
I've decided to document my thinking outloud this time, in a whole separate style sheet: undohtml.css. More comments than code, the style sheet is much bigger than it needs to be. It's also licensed under a Creative Commons by 2.0 license for maximum reuse. View undohtml.css for more details. It will likely grow when I add more semantic markup that needs its default browser varnish stripped.
.debug scaffolding
The other technique I'm using during the restyling of my blog is a set of separate "scaffolding" style rules that illustrate various elements' boundaries for easier visual debugging. For now I've included these rules in the main style sheet (mccgrid.css) since I plan to delete them eventually, though perhaps it would make more sense to put them into a "debug.css" file which could be included with an
@importthat could eventually be commented out.Each of the scaffolding rules depends on having an ancestor (or body) element of class "debug", e.g.:
.debug li { border:1px dotted #999 } .debug ul, .debug ol { border:1px solid #666 }There are much more complex debug style sheets that folks have come up with that do all sorts of things like display the element names etc. The point here is put up some minimal scaffolding to see where things are going (across several browsers), and catch and fix any layout problems sooner rather than later. This is definitely a case of less is more. If scaffolding begins to overwhelm the rest of the styling, then it becomes more of an obstacle than an aide.
Also, I've used the
borderproperty in this example, and thebackgroundproperty in other places. Theoutlineproperty would be ideal in many cases, but is supported by very few browsers (e.g. IE5/Mac supports theoutlineproperties on block display elements, andoutline:noneeverywhere — useful for turning off browser default focus outlining). The point here is that minimal scaffolding should work across the most recent versions of several browsers, including IE (Mac and Windows).In addition, the above scaffolding rules use shades of gray. Sometimes bright colors like red, orange, yellow, lime, aqua, or fuchsia are more helpful when debugging a small number of elements, where you have the luxury of assigning a specific border or background color to each element in question.
The scaffolding style rules are triggered by a "debug" class name in an ancestor (or body) element's class attribute, e.g.:
<body class="debug log">that will display scaffolding on everything inside body.
If instead you wanted to constrain the scaffolding to one particularly problematic area, you would remove "debug" from that body class attribute, and place the "debug" class name on the common ancestor of the elements in that problematic area, for example, the topmost navigation list:
<li class="debug"> <ul class="nav"> ...Once (you think) you're finished debugging, simply remove "debug" from any/all class attributes and take a look. If anything else still needs debugging, then reinsert the "debug" class name appropriately, and iterate until things work the way you expect them to.
Comments
- Paul Hammond
- Tony Stephens
- Jeroen Sangers
- arjen
- Alexander Becker
- Eric Meyer
Eric goes into a lot more detail on the subject of undoing default HTML presentation, and provides superb explanations of why the defaults are what they are in the first place.
- Alexander Christiaan Jacob
- deelan
- Wayne Burkett
- Karl Dubost (2)
- Jens Meiert (2)
- Shinze
- Tom Dell’Aringa
- metamorphine
- Don Crowley
20040904
1807
Reordering for the sake of style
- blog
- web
I decided on a layout: posts taking up most of the left and center, and two columns of links and other blogroll denizens on the right. I wanted a mixed liquid layout, that is, the right side columns being of fixed width, leaving the remaining space for the main posts column.
The only way I know of doing this is to explicitly set the widths of the two side columns and float them right, having them displace as much as necessary of the main content area. I had originally placed those two columns structurally at the end of the page, because it made sense to have the logical order of things in the page be page header, site navigation, posts, and then, sidebar1 and sidebar2.
However, because there is no "float:top right" (although it would sure would be nice — perhaps the CSS working group can add it to the float feature in the CSS3 Box Model module), I am forced to put the two sidebars structurally before the posts, in fact, by reversing their relative order completely (from posts, intraroll, extraroll to extraroll, intraroll, posts).
To make up for that logical inversion, I'm going to place "skip" links at the beginning of each, which will of course be hidden with CSS so that they're only seen by those viewing the document strictly linearly without any style sheets.
For now, the overall grid is taking shape. Next up, typography...
Comments
-
1643
Restyling in progress...
- blog
- web
The restructuring is complete enough, so the restyling has begun. Reload style sheets often, as you're likely to see work in progress for a little while. View style sheet source for more details...
Comments
20040901
2200
Updates, roles, and standards discussions
- web
- blog
- govt
It's been a busy past few weeks.
First, I'm happy to report that blo.gs now supports XFN 1.1, mere days after XFN 1.1's release. Simple standards result in rapid development of tools and applications. Well done Jim.
On that same day, the Gillmor Gang invited me to be the special guest on their weekly IT Conversations web-based talk-radio show ( downloads available: MP3 or AAC/MB4 for iTunes/iPod). And two days later, Adam Curry remixed part of the show (dailySourceCode20040822.mp3) into his own daily audio blog called Source Code.
During the Gillmor Gang talk, we discussed the explosion of blogs, media, and the ever increasing broad variety of information sources or feeds. Every problem begs a solution, and thus we also discussed "attention.xml", which is a nascent XML standard that David Sifry and Steve Gillmor have been working for a little while, and which I've picked up as part of my role at Technorati.
I haven't said much about my role at Technorati, because, well, the day after I got there, CNN called and we've literally been sprinting since to just get done whatever needed to get done. This past Sunday night we updated the Technorati main site (minor tweaks and some content updates) and the Technorati Election Watch 2004 site (major update with new features) in time for the Republican National Convention. Read more about the update to politics.technorati.com here:
- David L. Sifry (who is at the RNC — see his blog for daily RNC updates) Updated politics.technorati.com is live!
- Adam L. Penenberg: Site Tracks Political Zeitgeist
But beyond helping out with the rapid launch and relaunch of multiple sites within a matter of weeks, my primary role at Technorati is to help investigate and define new standards (e.g. formats and protocols) and new technologies to pursue.
Speaking of roles and transparency, I'd like to interrupt this blog post briefly to give a shout out to Trout Girl, who was recently fired from Friendster, for being too transparent. Lots of folks are already talking about this. The best commentary so far from Ian Kallen, who said he was:
*shocked* *SHOCKED I TELL YOU* to learn that Friendster's cluetrain ticket was misplaced
. Indeed. Now back to our regularly scheduled program.So about designing standards. One thing I learned at Microsoft is if you first implement current standards, people take a you a lot more seriously when you propose new standards.
With last month's relaunch of Technorati and launch of the new Politics site last month, my goal was to make sure that the sites were valid XHTML and valid CSS. And aside from a few transient validation problems due to quirks from external content slipping through, we achieved those goals.
Matt noticed and praised our shiny new markup (Thanks Matt!). But as he points out, although I stripped out inapplicable rules, we have yet to optimize our CSS style sheets. This is a result of making a conscious decision to focus first on providing clean, valid, semantic markup, and to consider things like optimizing the site-wide style sheet (which is very likely to be cached after loading the home page) a secondary priority.
With this week's updates to our Politics site, we raised the markup bar again. The site is now valid XHTML 1.0 Strict, including the pages with text/content/links from external sites like Recent Posts, and the new Technorati Politics Attention Index™.
We put a lot of effort into designing the markup of the Politics site (including the recent update thereof), and I plan to follow up with another blog post outlining the what and why behind the markup of Politics.
For now, View Source on the various pages to get a peek at our thinking.
And yes, I've decided to restructure the markup of my blog as well, so I've turned off the style sheets until the tags are all in place. Contents will shift.
Comments
Comments