Category Archives: Rumblings from the Secret Labs

A little help?

Posted on by
14

I’m getting the sweet-o-meter reinstalled. The old one broke and there was confusion about versions and so forth and in the end I decided to go with another plugin that seems to be more actively maintained. This one is fancier, but the creator really didn’t imagine all the different ways people might want to customize something like this. As a result I’ve been tinkering under the hood.

To get things right I need to see what it looks like when someone besides me has voted for an episode. Can someone out there click the “sweet” button at the top of this episode? Thanks!

1

Thanks!

Lost in Translation?

Posted on by
6

Even if you’re not a programmer, take a look at the following lines of code:

public function sendCommunication($oCommunication)
{
    if (self::emailMode != EMAIL_TEST_MODE_NONE) {
        if (self::emailMode == EMAIL_TEST_MODE_LOGGED_IN_ONLY) {
            // DO NOT COMMENT OUT THE FOLLOWING LINES
            // EVER
            // FOR ANY REASON
            // INSTEAD CHECK THE TEST MODE AND SET THE ADDRESS FIELDS ACCORDINGLY
            $oCommunication->to = $oCommunication->from;
            $oCommunication->cc = '';
        }

Now, I ask you, even if you’re not a programmer, you know there’s one thing you would never, ever, do to the above code. Right? Now let’s say you are a programmer, a professional, being paid because of your ability to find solutions to problems and express them in an abstract language.

Now further imagine that changing the above code can lead to the customers of the people paying for this work getting spammed with confusing emails with our client’s name on them.

Yeah, you guessed it.

1

Thanks!

Jer’s Software Hut Falls Silent

Posted on by
3

The shadowy, misshapen minions have all gone home; the vast underground chamber that once rang with their chants as they turned the giant wooden capstans has fallen silent. The river of lava flows unimpeded, the precarious rope bridges spanning it falling into disrepair. Above, the streets of Sky City Research Facility, once teeming with antigravity cars, are empty, the crystalline architecture acquiring a layer of eagle guano and dust that is transformed into gritty runoff when it rains.

The crudely-crafted Web site at jerssoftwarehut.com no longer accepts payment for Jer’s Novel Writer software licenses, and bears the following statement:

Well, it’s happened; I have a regular job. As I slave away working for the man I often wonder if things might have been different had I only worked harder at making Jer’s Software Hut a business rather than a hobby. Probably now we will never know. It was a good run but it’s time to ackowledge that development is stalled and customer service around here has been really awful.

That pretty much says it all; despite thousands of happy users, some of whom even paid for the software, when it came time to have a steady income again I took the safer path of working for someone else. (The ironic twist to this narrative I will leave for another time.)

It was a good run, and as I get my work life under control I hope soon to at least return to using Jer’s Novel Writer for its intended purpose – as a writing tool that helps me create fiction. Until I do that I can’t even consider opening the shutters on the Hut and throwing the big switch that raises the lightning rod into the violent midnight thunderstorm, while sparks fly and the turbines spin faster and faster, the needles on their gauges creeping ominously into the red. Maybe someday, though. Maybe someday.

1

Thanks!

Haloscan comments to WordPress – the nitty gritty.

Posted on by
6

As I mentioned in the previous episode, I recently had to move more than 8000 comments from my old comment system, Haloscan, and import them into WordPress. Haloscan served me well back in the day, but they are going away, and all my more recent comments are in the WordPress system anyway. Nice to have them all in one place.

The process turned out to be pretty easy. I found a script for importing comments from a different system, modified it, modified it some more, found a fundamental problem with it, fixed that, and in the end not much of code remained from the example, except the part where the WordPress logo is displayed on the screen. I assume that part came from the code the guy copied to make the code that I copied.

Along the way I learned a couple of things. PHP is a pretty flexible language, but running a loop that sets up 8500 data structures and runs 25500 database queries exposes PHP’s primary weakness: memory management. The whiz kids who invented PHP designed it for a load/compile/execute/exit-and-clean-up flow. Memory allocated during execution is cleaned up when the program is done running (usually when the Web page is delivered). When you try to do heavy lifting with PHP, you have to start paying attention to getting your memory back before the traditional clean-up time.

The code I started with did a direct database query to add the comment to the comments table, but that got things out of sync with other tables. (The posts table keeps track of the number of comments that apply to it, presumably for performance reasons.) I dug into the core WordPress code and found the method they call to post comments, and I made my code call that function. I have no idea what all the bookkeeping chores are that function does, and really I don’t care as long as they get done.

I didn’t worry about performance too much at first (after all, it only has to run once), but one of the database queries I did was really expensive (scanning all the posts for a specific set of characters). Even running on my local server it was slow, and I knew that if I tried something like that on my actual Web host alarms would go off and they’d shut me down for a while. I did a little optimization on that front, and it was enough.

The following script has some Muddle-specific code in it, but it might come in handy for others who need to move Haloscan comments to a new system. The part that parses Haloscan XML is pretty generic and would work for anyone, the part that saves the comments might be useful as a guide as well. The main difference others will have to deal with is where to get proper post_id based on the thread field in the XML. In my case I had a link in each blog episode back to the Haloscan thread.

The HTML bit in the middle of the file is not essential; but it puts a nice WordPress logo on the screen when the script starts up. I inherited that from the script I started with.

NOTE: While this script has code in it specific to me, I am available to customize it for others who need to move their code from Haloscan into another environment, or, for that matter, from any structured source into WordPress. Drop me a line!

<?php
 
if (!file_exists('../wp-config.php')) die("There doesn't seem to be a wp-config.php file. You must install WordPress before you import any comments.");
require('../wp-config.php');
 
function saveCommentToWP($comment, $dbRef, &$postThreads) {
    //echo "here's where the comment save happens <br/><br />";
    $thread = $comment['thread'];
    $postID = $postThreads[$thread];
    if (!isset($postThreads[$thread])) {
        $query = "SELECT * FROM wp_posts WHERE post_content LIKE '%".$thread."%' AND post_status='publish'";
        $postID = $dbRef->get_var($query, 0);
        $postThreads[$thread] = $postID ? $postID : 0;
        if ($postThreads[$thread] == 0)
            echo ("<br />Thread $thread has no post!");
        else
            echo "<br />Thread $thread";
        flush();       // got to have real-time updates!
    }
 
    if ($postID && $postID != 0) {
        $userId = $comment['email'] == 'vikingjs@mac.com' ? 1 : 0;
 
        //set up the data the way wp_insert_comment expects it.
        $wp_commentData = array();
        $wp_commentData['comment_post_ID'] = (int) $postID;
        $wp_commentData['user_id'] = (int) $userId;
        $wp_commentData['comment_parent'] = 0;
        $wp_commentData['comment_author_IP'] = $comment['ip'];
        $wp_commentData['comment_agent'] = 'Haloscan';
        $wp_commentData['comment_date'] = $comment['datetime'];
        $wp_commentData['comment_date_gmt'] = $comment['datetime'];
        $wp_commentData['comment_approved'] = '1';
        $wp_commentData['comment_content'] = $comment['text'];
        $wp_commentData['comment_author'] = $comment['name'];
        $wp_commentData['comment_author_email'] = $comment['email'];
        $wp_commentData = wp_filter_comment($wp_commentData);
 
        $comment_ID = wp_insert_comment($wp_commentData);
 
        //echo ("<strong>saved comment $comment_ID</strong>");
    }
 
    // try to reclaim some memory
    unset($wp_commentData);
    unset($comment);
}
 
header( 'Content-Type: text/html; charset=utf-8' );
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<title>WordPress &rsaquo; Import Comments from RSS</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style media="screen" type="text/css">
    body {
        font-family: Georgia, "Times New Roman", Times, serif;
        margin-left: 20%;
        margin-right: 20%;
    }
    #logo {
        margin: 0;
        padding: 0;
        background-image: url(http://wordpress.org/images/logo.png);
        background-repeat: no-repeat;
        height: 60px;
        border-bottom: 4px solid #333;
    }
    #logo a {
        display: block;
        text-decoration: none;
        text-indent: -100em;
        height: 60px;
    }
    p {
        line-height: 140%;
    }
    </style>
</head><body> 
<h1 id="logo"><a href="http://wordpress.org/">WordPress</a></h1> 
 
<?php
 
// Bring in the data
$reader = new XMLReader();
if ($reader->open('export-8.xml')) {
    $postThreads = array();
    $thread = '';
    while ($reader->read()) {
        //echo "<br />read node type: ".$reader->nodeType.';     '.$reader->name.': '.$reader->value;
        if ($reader->nodeType == XMLReader::ELEMENT && $reader->name == 'thread') {
            $thread = $reader->getAttribute('id');
        }
        if ($thread) {
            if ($reader->nodeType == XMLReader::ELEMENT && $reader->name == 'comment') {
                // begin building comment
                $comment = array('thread' => $thread);
                $reader->read();
                while ( !($reader->nodeType == XMLReader::END_ELEMENT && $reader->name == 'comment') ) {
                    if ($reader->nodeType == XMLReader::ELEMENT) {
                        $property = $reader->name;
                        $reader->read(); // assumes text element following element tag has the data
                        $comment[$property] = $reader->value;
                    }
                    $reader->read();
                }
                saveCommentToWP($comment, $wpdb, $postThreads);
            }
        }
    }
    $reader->close();
}
 
?>
 
 
</body>
</html>

3

Thanks!

In with the Old

Posted on by
Reply

I got a message today that Haloscan is closing down. That is the service that provided refreshingly spam-free comments on my old blog. A year ago I finally abandoned iBlog for WordPress, and I’m glad I did. At the time, however, I didn’t want to tackle moving the old comments over into the new system. In my conversion I embedded a link into each of the old episodes to the legacy comment system, and left it at that.

It is fortunate I found out about Haloscan when I did. Another week and 8500 comments would have been lost forever. That’s a big part of the underlayer of this blog, the part people sink gradually into as they hang around more, and they realize that this isn’t just about me. There are some pretty interesting conversations, observations, poems, and even stories in those comments. With the timer running I set to work to get the comments out of Haloscan and into WordPress.

The move turned out to be pretty straightforward. (Simpler, perhaps, than it had been to put the links into the posts.) I’ll go into the technical details in an episode tomorrow, but for now, why don’t you pop into the archives for 2004 or so and find an old episode with good comments? Maybe you’ll find something interesting someone said once. Maybe you’ll see the name of someone you haven’t thought of in a while. Maybe you’ll see something you want to comment on, even.

Thanks!

A Job I’m Glad I Don’t Have

Posted on by
4

As you might be able to tell from the paucity of episodes here at MR&HBI, I’ve rejoined the ranks of the employed. My writing has taken a real beating, so today I’m going to spend some time writing about work. You don’t have to thank me, it’s what I do.

I don’t mind writing software; I’m pretty good at it and I can make pretty decent money doing it. I would much rather write code than dig ditches, for instance, and luckily for me the world has decided that making Web sites is worth more than roadside drainage. (Before you go and say, “that’s because it takes skill and training to make a Web site, but anyone could dig a ditch’, ask yourself – could you dig ditches for a living? If the economy were turned upside-down, that ditch-digger living in his nice house would say, ‘anyone can make a living sitting on their ass in front of a computer, but I dig ditches. I’m glad things are the way they are, is all I’m saying.)

My current job sends me dangerously into territory I don’t much like, however, and that’s the area known as Information Technology. It’s not really a good name for the job, which is about setting up computers and keeping them running. It’s less about making things and more about making things work.

Last night, for instance, I moved the Web product I’m working on to a different server and it didn’t work. Naturally I assumed the problem was in my code (it had worked on that server in the past), so it was several hours later that I discovered that for reasons I still don’t know, the server failed when it tried to compress very large messages. Just *poof* no response beyond the number 500 (something went wrong). To make things more fun the server was specifically set up to not write out a lot of error messages to its log. I turned off the compression feature (with a hammer) and things worked again. Five hours or so spent to add seven characters to a PHP file, to make things work the same way they already did on other servers. Welcome to the world of IT.

I think the original intention of the phrase information technology referred to the the information that would be stored, manipulated, and distributed by machines. What the I really stands for is the vast store of arcane crap you have to know to do that job well. What line of the php.ini file to modify if you want zlib output buffering and utf-8 character encoding. How to set up all the computers in an office to use a local domain name server first. That’s the information in IT.

The worst thing about having an IT job is this, however: When you’re doing a good job, no one notices. When a company is running smoothly, that’s a sign that the IT department can be downsized. There are no problems! What are those guys doing all day? Having things not happen as part of your job description makes for tricky times when you do your job well. Of course, when something does go wrong people know just where to find you.

So if you work in a company that has people on payroll working to keep your technology humming along, cut them a little slack. Someone’s got to do that stuff; be glad it’s not you. I do enough IT now to know that I’d rather let someone else have the pleasure.

Thanks!

MacPorts and GIMP

Posted on by
3

Preamble for those here by the grace of Google: Yes, I do eventually get around to talking about Gimp in this episode. Short version: it works but takes hours. Anyway, on with the show!

Setting up a new computer can be a tedious task; there are all kinds of settings and programs and files and whatnot that need to be passed from old to new. When you work with Web development things can get even more cumbersome, as one finds oneself descending deep into the world of IT. There are programs to install that all have to talk to each other, and configuration files to be tweaked. Many of the applications that are required have no user interface of their own, they simply run in the background and answer requests from other applications.

I found myself facing (for the third time in three months) the need to install the latest Apache (and set up virtual hosts), PHP, Pear, MySQL server, PHP email addons, Propel, and on and on. For many of these items, the instructions for installations go something like:

1) Download the source code
2) Configure the build
3) Compile the application

And the instructions go on from there. For most of the above there are shortcuts, and probably-recent-enough versions of some things come built-in with the Mac OS, but when you install it yourself you can get everything where you want it and avoid conflicts. Still, this can be a long, tedious, pain in the butt to get going. And when you install something and it doesn’t play well with the others, finding that one line in the secret config file that’s causing the problem can be a real pain.

Enter MacPorts. MacPorts is a project that has developed a system that does all the steps of the installation for you, and puts everything in standard places so everything else installed with MacPorts can find it and talk to it. There’s still some configuration to do (tell PHP where the database server’s socket is, and set passwords for instance), but overall things are much simpler, and there are very good instructions out there for tweaking and troubleshooting MacPort installs. Since the person writing the instructions knows where all the files are in the standard install, instructions can be much more specific.

With MacPorts installing php 5.3.1 was a simple matter of typing “sudo port install php5” and letting the MacPort system do the rest. Hooray! Setting up a server is suddenly much simpler.

As an aside, MySQL didn’t work when I used MacPorts to install it on a previous machine. Don’t know why. Ran the install, followed the instructions, nothing. After a few hours banging my head against it, I went and got the excellent binary installer. It worked without a hitch. This time around I didn’t bother with the MacPorts version at all.

Anyway, thanks to MacPorts, I was able to get a complete development system up with nary a hitch, in a fraction of the time. Knowing where all the config files were this time around helped as well. I found several useful links on the Web, particularly from HiveLogic and my new buddy Danilo Stern-Sapad who took a little grammar rant from me with grace.

On that note, I read the phrase “How to setup…” so many times in so many places it’s amazing I still have teeth.

Edited to add: I have now written my own tutorial which does into greater detail than the above, and includes a works-every-time MySQL install.

Last night I realized I hadn’t installed GIMP on this computer yet. GIMP is an open-source graphics program that wishes it rivaled Photoshop but it doesn’t really. It’s free, however, and when you consider the incredible amount of work that went into it, you have to be impressed. I don’t do a whole lot with graphics, so GIMP is usually adequate for my needs.

When I went to the Web site for GIMP I found a couple of options for installation, including MacPorts. Just type “sudo port install gimp” into the terminal and that’s that. Pretty sweet.

One thing about a program like GIMP: it’s really a collection of a bazillion smaller parts. Many of those parts require other bits to work. When you run a traditional installer, all the parts are already there and they’re already tied together in a neat bundle. MacPorts does things a little differently; each part knows what parts it depends on to work, so when you say “install gimp” it first looks at the parts gimp needs, then at the parts those parts depend on, and so forth. You get to watch (if you choose to pay attention) the parade of all the little pieces as they’re installed, each the product of an individual or small group of people who have allowed their work to be exploited for free.

For GIMP, the list of dependencies goes very deep. I watched as X11 was installed. X11 is already on my computer, but ok, this is MacPorts and they keep their own realm and that way they can update parts without worrying about how that will affect non-MacPort installations. It’s redundant, but that’s why God made big hard drives.

Then I saw Python 2.6 install. Later, Python 2.5 went by. One of the little pieces seems to depend on an earlier version of Python. This probably means the person in charge of that bit just hasn’t updated it recently. On the installation went. After a while the Gnu Compiler Collection came down the pipe. gcc is a collection of compilers for building programs, and I watched as gcc was built… using the gcc already installed on my machine. Hm. And what’s this? Fortran! Yep, somewhere in the great tree of dependencies (maybe ‘root system’ would be a better term), someone decided that a Fortran compiler was necessary to run GIMP.

Actually, that’s not quite fair; the piece that loaded the Fortran compiler might need it for other tasks not related to GIMP. Just because GIMP uses a library doesn’t mean that’s the only use for it. Still, I ended up with a lot of stuff I don’t need. It’s all invisible and I’d never know it was there if I hadn’t watched the install (which took hours), so it’s not a disaster or anything. And next time I need Fortran I’m ahead of the curve!

Time slipped past, the install continued. I went to bed. When I got up this morning to check if the build was finished, I discovered there had been an error. Yep, the MacPort version of gimp-app doesn’t currently compile on 64-bit operating systems. All that other stuff that was installed? Python 2.6 and Python 2.5, the Gnu Compiler Collection (including Fortran), libgnome and libbonoboui and tkl and tk and gd2 and dozens of other things I don’t know what are, they’re still there, waiting to be useful in some way.

Edited to add: The compile bug has been fixed; I recently used MacPorts to install Gimp on my 64-bit laptop. It took a long, long, time, but now it works just fine.

1

Thanks!

Filling a Need

Posted on by
1

I dragged my sorry butt out of bed just before 7 a.m. Big meeting. I put on my fuzzy bathrobe and plunked down in front of the computer while my sweetie made me tea. Then she went back to bed. We stayed up way too late last night.

Skype lit up and away we went. The meeting was more about my employer and the evolution of their corporate character than about technology, deadlines, or the transient issues of the day. How do you make a company run smoothly when you span from San Jose to Moscow? How do you make sure everyone is having a good time while you’re at it?

At one point in the conversation I was asked for bio data for my employer to put up on their Web site. I thought I would throw them a link to the bio page here here first, as a joke and also to let them learn a little more about who I am (or who I want to be, at least). I popped over here and saw… that this site had been suspended by my Web host. I checked my email. No notice. I checked my account on MMHosting’s site. Suspended, no reason given.

Some Mondays are Mondayer than others.

I sent off an urgent help request and spent the rest of the day bouncing between databases, php server code, and Flex client code, generally trying to be smart enough to deserve what they are paying me. Eventually I got a message back from MMHosting.

First, they said they had in fact sent an email. I searched everywhere I know how to search, and I couldn’t find it. No matter; they also turned the site back on. The guy said that some of my php files (code that runs on the server and builds these pages) was loading bazillions of times and slowing down the server. Uh, oh! Looks like some plugin I’m using ran amok. The people sharing the server with me probably weren’t happy.

That’s what I thought until I started looking at the numbers, anyway. Runaway software? Not at all! It turns out this table I wasted way too much time on got mentioned in a prominent place, and twitter and digg took care of the rest. When you look at the graph, remember that the site was down for much of the time during that traffic spike. Holy Schnikies!

Traffic for the last month. The bulge at the beginning is from Cyberspace Open traffic. Things have been slow since I started working - until today!

Traffic for the last month. The bulge at the beginning is from Cyberspace Open traffic. Things have been slow since I started working - until today!


I really did put a lot of work into that dang table, so I’m glad people are picking up on it. Maybe there are other CSS3 features I could tote up – transform and shadow come to mind.

Boy, I sure wish I had a killer episode at the top of the blog to hook some of these visitors. Oh, well.

1

Thanks!

Employed!

Posted on by
1

Well, now I’ve gone and done it! I have a short-term job, helping to program up a fancy Web-based learning management system for a couple of companies in the medical industry. I didn’t really look for the job, but it found me anyway.

This month is going to be pretty crazy; and I won’t have nearly the time to get ready for the World Fantasy Convention now. On the other hand, I’ll be able to pay rent. That’s pretty important, what with this being the rainy season and all. Don’t know what’s going to happen to the ol’ blog here; I was a little bit employed at the start of my homeless tour and still managed to keep things alive, so let’s hope.

Long ago, when I was dabbling in radio, a mentor told me “if you have a safety net, you will fall into it.” I had a safety net, a job programming computers. I fell into it. I’m going to have to be very, very careful that I don’t allow that to happen again.

1

Thanks!

Speaking of Google and Microsoft…

Posted on by
2

Now there’s Google Chrome Frame, or at least the glimmer of it in the future. Google’s spin: since Internet Explorer is holding back the Web; we’ll make a plugin so people can use our more standards-compliant browser technology from within Internet Explorer.

It seems nice on the surface and I’m happy that someone would go and fix Internet Explorer despite Microsoft, but I have to wonder how many people will actually install the plugin. The people who are using IE now are ones who either like IE as it is or who must use IE because their IT department says so. Will the first group see value in adding a plugin to make their browser work like another browser (which they just as easily could be using already), or will IT departments allow their ‘clients’ to install such a large unknown quantity on their machines?

The thing is designed so that the WebKit code (what Chrome is based on) will only be invoked on Web pages that specifically enable it. (This might help the IT guys relax a bit.) I will enable it for this site, although the differences Chrome Frame users will see are only cosmetic. It costs me nothing. Somewhere the Google minions will make note of my Chrome enabilization and use that as part of a marketing pitch.

My hope for the plugin is not that it converts a lot of Internet Explorer users, but that it spurs Microsoft to accelerate their own adoption of the next wave of standards. That would be the biggest win from where I’m sitting. It doesn’t seem likely, though, until HTML 5 becomes a valuable tool for its business customers.

Whether it’s Bing making Google Search better or Chrome making Internet Explorer better, in the end I’m glad these two companies don’t get along.

Thanks!

Rounded Corners and CSS3

Posted on by
3
NOTE — June 7, 2010:
This page is a little out of date; the main Webkit browsers now work better with NO prefix on the styles. It’s time to say goodbye to -webkit-. In the following discussion, using the standard syntax will work with Chrome, Safari, and Opera as well. The table referenced below has been updated to reflect the newer browsers.

If you poke around this site you will see boxes with rounded corners. If you use Safari or Firefox, you will see even more.

Rounded corners are implemented here in two different ways. The main boxes with the drop shadows are done the old-fashioned way, the way that works on most browsers. Each corner is a graphic with an alpha-channel shadow, and the edges are yet more graphics, repeated as needed to span the distance between the corners. The boxes expand and contract infinitely in both directions. It’s not bad. It’s also a pain in the butt.

Yet, I like rounded corners. They seem friendlier. I have broken down, therefore, and in a few places I have added browser-specific style information to create a softer-feeling blog. Since the rounded corners are purely cosmetic — everything still works just fine in browsers that don’t support border-radius — I’m not too worried about it.

However, while I was looking into the border-radius CSS property, I discovered several sources that didn’t get it right.

Here’s the deal. The CSS3 standards draft includes a property called border-radius. Exactly how that property is going to work has not been finalized, but it’s not likely to undergo any more major revision. Meanwhile, Firefox and Safari have already worked out their own border-radius implementations, called -moz-border-radius and -webkit-border-radius respectively. Other browsers see the -moz and the -webkit prefixes and ignore the property.

Unfortunately, neither implementation matches how the proposed border-radius property will act. Oh, dear. When the browsers are updated to match the standard, those -vendor-border-radius properties may break. A lot of Web designers out there don’t seem to realize that.

NOTE: probably at this point you should open up this handy table to follow along.

It’s not all doom and gloom, however. As long as people using the vendor-specific border-radius properties keep things really simple, there won’t be a problem. Here’s the skinny:

std-br-15
All four corners with 15px radius
<style type="text/css"> .roundedBox { -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; } </style>

will put a nice rounded corners on any block element of class roundedBox. Safari 4 and Firefox 3.5 (the browsers I have to test on) will work today, and when the formal border-radius is adopted and the other browsers support it, everyone will be happy. (Remember, of course, that in the meantime a large part of your audience will still see squared-off corners.)

The tricky part comes when one wants to specify elliptical corners, or specify different radii of curvature on different corners. When you start getting fancy, things get a little messed up. Let’s tackle the second one first, because it’s possible to find a way to specify the different corners that makes everyone happy. It’s just long-winded.

border-radius is really shorthand for four properties: border-top-left-radius, border-top-right-radius, and so forth. Therefore it’s perfectly safe to specify each corner independently, and all the browsers will act the same way:

moz-br-20-10
top-left and bottom-right 20px radius, others 10px
<style type="text/css"> .roundedBox { -webkit-border-top-left-radius: 20px; -webkit-border-top-right-radius: 10px; -webkit-border-bottom-right-radius: 20px; -webkit-border-bottom-left-radius: 10px; /* different! */ -moz-border-radius-topleft: 20px; -moz-border-radius-topright: 10px; -moz-border-radius-bottomright: 20px; -moz-border-radius-bottomleft: 10px; border-top-left-radius: 20px; border-top-right-radius: 10px; border-bottom-right-radius: 20px; border-bottom-left-radius: 10px; } </style>

Note that the names of the four corner properties are different for Mozilla. Aargh. All the more reason to hope the spec is finalized soon. I put the four properties in the order the software considers them when parsing the shorthand notation, just to get into the habit.

All those lines of CSS can be a pain in the butt, but it’s bulletproof and will work on into the future. But wouldn’t it be nice if you could use shorthand for the border radius the same way you do for margins and padding? The boys at Mozilla thought so, and the CSS3 standards team thought so, too. Webkit (Safari) seems content to only support the long-winded method for now (at least support it properly – more on that later).

Before talking about the differences between the browsers and the CSS3 spec, let’s take a quick look at the theory. As with properties like border, the border-radius property is just a shorthand so you don’t have to specify each corner individually. If you use one number, like border-radius: 10px; the style will be applied to all the corners. If you supply four values, the four corners each get their radius set, starting with the upper left and working clockwise. So far, so good, but there’s trouble ahead.

[The following has been edited since it was first published. I first said that Mozilla was doing the following drawing wrong, but it looks like they have it right and Safari is wrong. Sorry for any confusion. To make up for it I added box-shadow here and there for browsers that support it. They’re sweet!]

The difference is elliptical corners. CSS3 calls for them, but the draft isn’t very well-written. The mystery lies in what should happen when two values are specified: border-radius: 20px 10px. When you are specifying a single corner, the result will be an elliptical curve. When using the shorthand, however, Safari draws all four corners with the same ellipse, but Firefox (and the CSS3 spec) draw round corners that turn out just like the example above.

According to the spec (by my reading), when using shorthand if you don’t use slashes you don’t get ellipses.

std-br-20-10
All four corners with elliptical curvature
<style type="text/css"> .roundedBox { /* four elliptical corners */ -webkit-border-radius: 20px 5px; moz-border-radius: 20px / 5px; border-radius: 20px / 5px; } </style>

NOTE: The most recent builds from webkit.org match the spec. I don’t know when those changes will reach Safari, but sites using the two-value shorthand may have to deal with some inconsistencies between browser versions. Not sure, but I would avoid using that syntax just in case.

What about if four values are specified?

std-br-20-10-5-30
All corners different
<style type="text/css"> .roundedBox { /* four different circular corners */ /* no effect! */ -webkit-border-radius: 20px 10px 5px 30px; -moz-border-radius: 20px 10px 5px 30px; border-radius: 20px 10px 5px 30px; } </style>

Once again Webkit-based browsers like Safari and Chrome fall short. The Webkit team seems content to get the longhand method of specifying corners right, but not the shorthand. Mozilla, in the meantime, has worked out the most complex and versatile form of the shorthand, but disagrees with the spec fundamentals.

To use shorthand to specify four different elliptical corners, you would use something like:

-moz-border-radius: 20px 10px 20px 5px / 5px 10px;

where you specify up to four horizontal radii and then up to four vertical radii. The numbers before the slash are the horizontal radii, starting from the top left. If only two numbers are given, they alternate. Three numbers means top-right and bottom-left share. The y-radius values are the numbers after the slash, and are distributed the same way. Clear? Good.

I have read that if the text rendering is vertical, the horizontal and vertical parts are reversed, but I see nothing about that in the proposed specification.

This will make a lot more sense if you study the twoblue-shaded lines of the table.

While we’re looking at the table, note that Safari is perfectly capable of displaying the most complex borders, but they have not implemented the shorthand notation (except for the bit they did wrong). They’ve done the hard part, but left out the one-day coding job of parsing the shorthand strings into the properties for each corner. Odd. The rules are really very simple for a machine.

So what does this all mean?

In conclusion, while it’s possible to write different sets of -vendor-border-radius CSS properties and get what you want, things start to get quite messy. It’s a lot of effort for aesthetic touches that half your audience won’t see for the next couple of years. I’d advise just staying away from elliptical corners for now, and specifying round corners individually if any are different. It’s a bit more typing, but it’s a lot safer. Stay away from -webkit-border-radius: with two values.

Thanks!

A Browser Experiment

Posted on by
9

Quite by accident this morning I stumbled across an image format that might turn out to be really cool. Unfortunately, like all things Internet, it’s not much use until the various browsers agree on how it should work. Just for giggles, I thought I’d play around with it a bit. Internet Explorer users — even IE 8 — need not continue with this episode.

One of the cool things about SVG is that it’s more a drawing system than an image format. Image files contain a set of instructions the computer uses to render the picture. That’s not especially new, but it’s nice to have a standard system built into browsers. With something like this I can write code on the server to generate very sophisticated and pretty graphs, without a lot of technical hoo-ha. It would be especially nice for some of the images used in the basic design of this site.

So here is an svg image, plopped into the page the way any image would be:

Emblem-fun

Alas, only those using Opera and Safari will see it. (PLEASE correct me if I’m wrong!) Alternately, here’s the contents of that same image file, plopped into the regular XHTML of this site in a big ol’ svg tag:

You can look at the source for the page and there it will be, all the drawing instructions used to render this happy little face. (Note that I removed some extraneous parts that connected to the source of the graphic (sodipodi) to see if I could make the image work.)

Except… hmm. The latter doesn’t work at all anywhere (that I know of). Obviously I’m missing something, but at this point it’s not worth figuring out. I did try to paste in an example directly from Mozilla’s site; maybe WordPress is subtly messing up the data. Or something else. If SVG ever becomes more universal, I’ll revisit it.

Edited to add: it looks like the browser has to load a file with an xhtml extension to know how to deal with other xml embedded in the code like that. Unfortunately, if your tell the browser that you are using xhtml, you have to use it exactly correctly. Alas, several of the plugins, and amazon, and Google, provide code that is not strictly compliant, and I shudder to think what would happen if I tried to validate all those old episodes I brought over from iBlog. Firefox can also use the <embed> tag to display the graphic, but ironically it is not compliant.

Let’s try the <object> tag and see if Firefox has relented and begun to support it:

Just for grins I specified a different size, to show the S in SVG. Safari didn’t do it right, but my version of Firefox and Opera did.

Note: The original graphic is under GPL and I got it from here.

Note 2: Since this episode, I’ve done some pretty extensive work with SVG, including using scripts to modify the image — even changing the actual structure of the image interactively. Try the dots!

Thanks!

The Ghost of Projects Past

Posted on by
5

I couldn’t sleep last night, and on nights like that it is natural to think of things that might have been. One of the thoughts that grabbed hold of my too-active brain was the memory of PeoplePost, an Internet-based photo-sharing application that allowed groups of people to build scrapbooks together. We called it a virtual refrigerator door. It was pretty slick.

The project failed for a number of reasons. First, we tried to ‘roll our own’ instead of springing for sophisticated Web development tools. (Back then, the tools were very expensive.) To save the cash we added months to the development, and in the meantime something fundamentally changed on the Internet. People began to expect everything to be free. You remember the two-year span when Web services stopped trying to make money and figured they would find some way to be profitable in the future? Probably not, but those were the years we were working on PeoplePost.

This happened as the dot-com boom was just getting started, before Google had finished making the Web a useful place. WordPress did not exist then. No MySpace, no Facebook, no Friendster. Geocities was around, but had PeoplePost taken off, we would have had to invent modern social networking as the next logical step. At the time, our networks were closed communities with no way to discover what other groups were up to.

Another thing that killed us was a dead-wrong prediction I made way back then. I said that the browser was the Swiss Army Knife of the Internet, and that soon people would turn to specific applications to perform specific tasks. “Swiss knife is good,” I said, “but soon people are going to want cutlery.” Boy, was I wrong about that. Instead of using applications designed for a specific purpose, people worked with really crappy applications that worked through the browser. People tolerated crap that worked in some browsers and not others, and they tolerated bad aesthetics, wasted bandwidth (on their modems!), and wretched user interfaces that left them cursing the screen. Why? I still don’t get it.

Nevertheless, we made PeoplePost a downloadable application (with a really slick self-updating scheme), and when people downloaded and installed it, they would then go back to the browser and wonder what to do next. It’s the Internet! It must be in the browser!

The application was written in Java (not Swing, but that’s another post), so we managed to get the whole thing shoehorned into the browser — suddenly dealing with four different security systems and a host of other issues, like Microsoft’s passive-aggressive antipathy toward the language. What a pain. Still, a few people started to use it.

What we really needed at that stage was widespread broadband. We were diligent about saving bandwidth (all graphic elements preinstalled, for instance), but with advertising banners now harshing the lovely fridge door environment and eating up precious pipe, the user experience on a slow modem was not so great. Pictures are big. Still, we got Compaq and HP excited (shared photos become printed photos, which moves paper), and they helped get the product out there.

But we couldn’t charge for it, and we weren’t making money on advertising. It was going to be a long haul to make the product a financial success. An expensive haul. We couldn’t do it.

Skip forward to today. Finally, browsers are getting consistent enough and powerful enough that it’s almost (but not really) possible to make a decent application that runs in the browser. Meanwhile we’ve all been trained to put up with shitty software while online, so actual good software on the Web is big news. Now Internet Explorer (the second-worst thing to happen to the Internet) is finally close enough to the standards that people can write sophisticated user interfaces, using techniques that are often bundled under the term AJAX.

In the intervening years, galleries of many stripes have popped up on the Web, but nothing like PeoplePost. There are places people can share pictures, but they boil down to “here’s a big pile of my pictures; now post a big pile of your pictures.” Nice, but it could be better. A lot better. I was reminded of how cool PeoplePost would be this summer when the family was looking for a place to share photos from the eclipse cruise. There is nothing that allows people to collaborate, to build an album with text and photos and comments, and to allow everyone to contribute to the same album and build a true group identity. Combine that with modern social networking and you’ve got something.

Maybe it’s time to dust off the old failure. Maybe the world is ready for it now.

1

Thanks!

New Sidebar Feature – Tag Cloud (sort of)

Posted on by
5

Most blog systems support tags these days. Put simply, tags are just words that can be used to create informal groups of posts. Tags aren’t as rigidly defined as categories, and so a ramble that covers many topics can have many tags. The purpose of the tags is to allow folks like you to find similar stuff. Since moving to WordPress I’ve started to pay more attention to tags, and at the bottom of each episode you can find a link or three to episodes with similar tags. It’s kind of cool, and it’s search-engine friendly.

Now I have added a widget to the sidebar that provides a ‘tag cloud’ — a list of the tags with the most-used tags in larger font. (I think this is a misuse of ‘cloud’, which in this context is also supposed to show relationships. A true cloud would group tags by how often they are used together.) There are much fancier tag cloud widgets out there, but I was starting to spend way too much time investigating the options. I settled on a nice, simple, colorful widget which is over there now. It’s called “ILW Colorful Tag Cloud” (or something like that). There are a few aesthetic tweaks I’d like to make, like condensing the text, but that shouldn’t be too much trouble.

The widgit’s all right, but the colors are arbitrarily set by me. It would be cool if the colors actually meant something. Since the number of times a tag is used is already represented in the font size, color could be used to show relationships or (better yet) indicate how many times a tag has been clicked. That way the tags more people found interesting would be highlighted.

Another minor problem with the tag cloud as it stands is that most of the 1200 episodes I created with my old blog system have no tags. I’ve gone back to retrofit tags on a few obvious ones, but overall most of this blog is untagged.

But no, not today. No widget modifications, and no more tag retrofitting. I’ve already spent far too much time on this silly feature.

Thanks!

Programming Note

Posted on by
17

I’ve put in a new anti-spam layer in the comments. It’s supposed to nip spam in the bud before it even reaches the spam-catcher I already have in place. Almost no spam has been getting through to your eyes, but behind the scenes the comments have been building up, and this should simplify administration of the site. In addition the new spam layer helps prevent robots from scraping email addresses off the site and other antisocial behavior (not that I will depend on that stuff). The name of the Plugin is “Bad Behavior”, for those who might want to try it out.

The system uses a variety of techniques that are supposed to be completely invisible to you, but please let me know if you have any trouble leaving comments. My email address is addy

Thanks!