licentious radio

Thursday, February 13, 2003
[11:16:00 PM]

Update: Sigh. The hexagon stopped working in Mozilla, once Radio built the final page for the weblog. It works in the Radio CMS. Now, I'm not terribly surprised. If you use invalid HTML, you can't expect every feature to work exactly right. Still, it would be nice if things were a little more robust. I'll put the example into a separate file so the trappings of Radio and my "design" don't mess with it.

Tantek Çelik makes polygons with CSS. Works in Mozilla and recent IEs. Very interesting. I've always eschewed big borders the way I avoided Dallas' "big hair" styles, so I hadn't thought of doing this before.

But the stylesheet and even the HTML are quite complicated -- because he's re-using and cascading abstractly.

My goal here is to simplify the styles as much as possible. Because I'm running this through the Radio weblog software, I had to use the style attribute, rather than a separate stylesheet.

Take a very simple case:

hey baby

Here are the styles:

border-bottom: 1em solid blue;
border-top: 1em solid blue;
border-left: 1em solid yellow;
border-right: 1em solid yellow;

Now it's easy to imagine that if the width is one pixel, but there are left and right margins, you could make a triangle by displaying only the bottom border.

The html can be as simple as:

And here are the styles:

border-bottom:4em solid blue;
border-top: none;
border-left:2em solid transparent;
border-right: 2em solid transparent;

display:-moz-inline-block;
display:inline-block;
margin:0;
height:0;
width: 1px;

In this triangle, the height is the border-bottom size, and the width comes from the size of the border-left and border-right.

Now think about a hexagon. The top of a hexagon is shaped like the bottom border, and the bottom of a hexagon is shaped like the top border. You just need to get the sizes right. CSS makes this easier. Use ems to get the right relationship between the sizes, and set the font-size in pixels to determine the actual size of the hexagon.

The html can be:

And here are the styles.

.htop {
border-left: solid blue;
border-right: solid blue;
border-bottom: solid;
border-top: none;
}
.hbottom {
border-left: solid yellow;
border-right: solid yellow;
border-top: solid;
border-bottom: none;
}
.htop, .h2bottom {
display:-moz-inline-block;
vertical-align: text-bottom; /* keeps together in moz */
color: green;
display: inline-block;
margin: 0;
height: 0;
border-width: 4.33em 2.5em;
width: 5em;
}
.houter {
font-size: 10px;
border:none;
display:inline-block;
text-align:center;
width: 10em;
height: 8.66em;
}

Note that the houter element is required by MacIE to get the shape right. MacIE also requires at least an HTML 4 strict DTD. MacIE 5 refuses to display the width of the hexagon if you use no DTD or the HTML 4 transitional DTD. The "vertical-align: text-bottom" is required for Mozilla.

Meanwhile, Mozilla has a problem using the strict DTD. I see a horizontal stripe in the middle of the hexagon with the strict DTD, but not when there is no DTD at all, or a transitional DTD. This page isn't actually valid strict HTML 4.01, so it's possible that Mozilla would handle the hexagon properly if the HTML were valid. But I see that problem on Tantek's page with the octagon. His page is probably valid.

Just make the left and right borders transparent to make a more friendly hexagon:

To prevent the horizontal line in Mozilla, but keep the strict DTD, I've wrapped the hexagon in a div, and removed the font-size styling:

[4:43:06 PM]

The case for Google for Big Brother of the Year award.

We just mention this Google stuff, we're not necessarily complaining about Google ourselves.

[11:17:51 AM]
What to click. I watch movies on DVD sometimes. I have this 19-inch monitor. The clickable areas are *tiny*. They're hard to find. Just make stuff clickable, darn it.

With stylesheets and a bit of automation, we can do better than we've done so far. Say your homepage has headlines and one or two paragraph summaries or leads. The headline should be clickable, sure.

But why not the text of the paragraphs?

First, you don't want the text underlined, and you don't want the same *loud* hover indication. We can do that with stylesheets.

Second, you don't want non-CSS browsers to have the whole paragraph underlined (because it's so much harder to read underlined text). So you have to be able to send *different* html to CSS and non-CSS browsers. You have to automate, and you have to have some server-side browser-sniffing. (Or easy client-side opt-in.)

Third, you can't nest links. If the paragraph contains a link itself, that would require special handling. But *that's* OK, since you already have to automate. Just end the paragraph link before the link in the text, and start another link after. The specific link in the text should be obvious when you hover, so customers know that they're getting the right link when they click.

As ol' Jakob says, most customers spend most of their time at other sites, so not everyone will make use of a feature like this. Some people may even get confused by it, though they're more likely to wonder why other websites don't work like this, rather than why your's does. But some people will be helped, and that's what we're here for, right?

[9:50:21 AM]
Zeldman found his bug [zeldman.com], in his Javascript. Javascript is dangerous stuff. It's easy to write something that works in one situation, but breaks unobviously when something -- seemingly unrelated -- changes.

[9:39:59 AM]
The poor internet access providers. A few of their customers use a lot more bandwidth than the rest. Bandwidth hogs should pay more, right?

At licentious radio, we like turning arguments on their head.

The bandwidth cost to an access provider comes from wires, routers, maintenance, and the charge for spewing the bits onto the internet. The cost of the bits is what they're most complaining about. And yet, why is the cost per bit so high?

In the 90s, we put down enough fiber to handle orders of magnitude more traffic across the internet than we use now. This unused capacity goes by the tragically romantic name "dark fiber".

In fact, as traffic increases, the cost per bit *falls*. This stands old-fashioned economics on its head. In fact, the cost per bit falls faster than the number of bits increases. *That* puts old-fashioned economics into free-fall.

If internet traffic had risen faster, the bandwidth cost for access providers would have dropped.

What slowed the increase in internet traffic? The access providers. The phone companies don't want you using the internet for voice calls. The cable companies don't want you sharing movies over the internet. Even AOL and its ilk wants customers trapped in "mindless consumer" mode -- for the pennies of ad revenue, but also to keep the customers away from competitors.

If internet access were treated as a public utility, the total cost of our bandwidth would be lower, and we would have orders of magnitude more bits flowing around.

How much bandwidth will we use? High quality video conferencing. Streaming video weblogs. Email home movies. When you go to an ecommerce site, you won't see a cheesy little picture of a product, you'll see print-catalog quality photos, and streaming video, and if you have a question, you'll get a sales person in live video. Plus we do more of everything we already do, and give it all to billions more people.

And when we've done all of that, you'll pay three bucks a month, not twenty.