Category: Internet

Get a jump on Download Day

Courtesy a little bird, it’s possible to download Firefox 3.0 already, though it hasn’t been announced yet.

The latest public download is RC3:

http://download.mozilla.org/?product=firefox-3.0rc3&os=win〈=en-US

but if you remove rc3 from the URL, you get:

http://download.mozilla.org/?product=firefox-3.0&os=win〈=en-US

which is a valid URL. (So much for security by obscurity.) Enjoy your early start on Download Day! (Tip o’ the hat to Dil.)

Update: Or not. The version string in the -3.0 version is the same as the one in the RC3 version about box. Oh well.

CSS fixin’: toward a vertical grid

It should be theoretically possible with CSS to design a page where the type falls on a vertical grid. In reality, you rarely see this happen because multi-column sites make matching the grid values across the columns difficult, and browsers, particularly IE, have awkward ways of inserting inconsistent space around some block elements.

But the basic theory is simple enough. Decide the base unit of height of the page, and go through your stylesheet, making sure that everything there is a multiple of the base unit of height. Your tools are line-height, padding-top and padding-bottom. For example, if your base measurement is 20 pixels between lines of type, and you want space between your paragraphs, you might define a style like p { line-height: 20px; padding-bottom: 20px;} or even p { line-height: 20px; padding: 10px 0;} (where the latter splits the padding above and below the paragraph).

Getting it to work right can be a real bitch, though. What if you have a heading that you want to set larger than 20 points? The naïve approach (which I just implemented) might be to implement a rule like this: h3 { font-size: 24px; line-height: 28px; padding: 8px 0 4px;} where the 28 pixels of line height are padded with a total of 12 pixels to make up 40, or two lines. But this only works if all your h3s are less than one line in height; a heading spanning two lines will take up 66 pixels, or a little more than three lines, messing up the grid. The recipe for success is to avoid setting multi-line headings too closely–or perhaps to use smaller font-sizes for headings.

Here, as in all things related to web typography, a valuable resource is The Elements of Typographic Style Applied to the Web, the brilliant adaptation of Robert Bringhurst’s essential typography rulebook to CSS+HTML+ (occasionally) JavaScript. In this case, the sections on vertical motion (Choose a basic leading that suits the typeface, text and measure and Add and delete vertical space in measured intervals) are invaluable, and I’m going through this theme’s stylesheet and working on applying the principles now. So if things look odd, don’t worry, it’s not just you.

I should also point to 8 fonts you probably don’t use in CSS, but should as the inspiration to change my sidebar headers to Gill Sans (though I might pick a different sans in a day or two), and 10 Examples of Beautiful CSS Typography and How They Did It for the specific inspiration to use small, capitalized, letterspaced sans serif for the headings. Both are quite well written posts from the blog at 3.7 Designs.

Using a Google Maps Gadget in Google Sites

I’m working on a Google Site for a group I belong to, and it’s been an uneven experience. The user experience for general editing is quite good, but things get very hairy very quickly when you try to insert “gadgets” onto the page. I assumed that adding, for example, a Google Map to a page would be trivial, but working with the official Map Gadget was frustrating as there was no help documentation on how to populate the “data source URL” field.

I finally dug deep enough to turn up the answer. The Google Map gadget was intended to work with Google Spreadsheets. To get a map on your Google Site showing your map content, here’s what you do:

  1. Create a spreadsheet in Google Docs.
  2. In the first column of the spreadsheet, type in the address as you would search for it in Google Maps. Full street addresses seem to work quite reliably.
  3. In the second column, enter some text that describes the item–this becomes the tooltip for the marker on the map. Repeat for as many items as you like, making sure not to skip rows.
  4. For debugging, I like to add a Map Gadget to the spreadsheet to check my data. Tell it to use Sheet!A1:B10 (or however many rows you have) and to use the last column for tooltips, then Apply and Close.
  5. Verify that the map looks right, then click the map so the title bar is showing, click the little menu in the upper right hand corner of the gadget, and choose Get Query Data Source URL. Choose Entire Sheet and select and copy the resulting URL to the clipboard.
  6. In your Google Site, edit the page you want to put the map on.
  7. Insert a map gadget into the page using the Gadget browser. Fill in the fields, pasting the URL you copied in step 5 into the Data Source URL field, and checking the option to use the last column for tooltips.
  8. Save your changes to the page and behold: a map with markers for all your attractions.

This gives you a pretty basic map view with control over the markers, the height and width of the displayed map, and tooltips. For more advanced map control (street view vs. satellite, zoom level, etc.) I think you’d have to embed raw calls to the API, but I’d be thrilled to be proven wrong.

NewsJunk

In the last few days of the primary season, I’ve become utterly addicted to NewsJunk, Dave Winer’s new aggregator for political news and commentary. I’m not sure how, but the site has managed to maintain a high signal to noise ratio while still reaching far beyond the usual news sites. Last night, for example, it turned up the transcript of Obama’s speech… before he gave it.

Ongoing minor site maintenance

I’m putting enough energy into this particular theme that I think I might keep it around a while. Today I addressed a problem with my daily link posts, which come from del.icio.us with some embedded markup. The formatting of that markup was causing some bogus line breaks (on Firefox, the list bullet displayed on a line by itself), which I eliminated with some simple CSS rules. I’m probably not done playing with the formatting of the link posts, but I’ve fixed the immediate problem for now.

I’ve also created some linkage to parts of the site that used to be exposed in my main navigation, and added a few more top navigation links. Enjoy…

Excel theme fix list

I’m writing this working list so that I can keep a record of what I did to the Excel theme to get it the way I like it, as well as for anyone else who’s interested in learning how to hack up WordPress themes.

Issues:

  • The amount of vertical space consumed by the header region (seems to be a common trend among the themes I’ve tried so far)
  • Need to tweak styles — tags and recent comments run into each other, headings in the sidebar are too prominent, need some custom style work for the Delicious widget
  • The dark borders around images and the big blocky links make the top of the page feel too heavy
  • Category and single post pages missing blog title

Fixes to date:

Tags: I replaced the function call for tags that was in the theme to specify the following: the_tags('<ul class="pmeta-tags"><li>Tags: ',',</li> <li>','</li></ul>');. This basically made the tag a true unordered list with a new class, pmeta-tags, and inserted a comma and a space after each item in the list except the last one. Then I edited the stylesheet to define ul.pmeta-tags as display:inline. So the tags now displays as a comma separated list. I tried a different, very handy, css-only approach (example) first, but the browser didn’t pick up the specified commas or spaces as cues to break the line, and so the content disappeared off the right hand side of the box.

Recent comments: I used the CSS-only example cited above to style the comments and provide a semicolon as a separator between comments. Alas, IE doesn’t understand this approach so I’ll have to do something else here.

Blog title on other pages: I edited the header.php file to include the blog title in parens after the title of the object (post, category, etc.)

Tweet and Shout: leveraging Twitter for popularity

The talented Shimon Rura just launched a new service called tweet and shout: music people are talking about. It mines Twitter to find bands and musicians that people are talking about, and provides the number of people and tweets and cross-references with the Amazon sales rank.

What’s refreshing about Shimon’s work is that he admits the service isn’t “groundbreaking or thought-provoking.” But he does point out the interesting things, including the facts that the service provides context to otherwise unconnected conversations, and the fact that the service puts faces to fandom.

Adding Wikipedia articles to Google Maps

Google started baking some mashups into the main Google Maps interface earlier this week. As a Wikipedia editor, the one that intrigued me was the ability to hover over a feature on a map and click through to a related Wikipedia article. The question I had was, how do I change my article so that it appears on the map?

Fortunately, it appears to be a pretty simple process, with only one complicated bit, the first one:

  1. Find the place. That is, the place that the article is about. Google Maps is of course your friend here. Once you’ve found the location, double-click to center it in your browser.
  2. Get the coordinates.  This actually isn’t as hard as you might think, thanks (again) to Google Maps. The article Obtaining geographic coordinates provides some helpful suggestions, with a special section on Google Maps. I particularly like the bookmarklet provided, because it makes the workflow so simple–find the place as above, then use the bookmarklet to get the coordinates already in a template. Whatever your method, you’ll want to use the appropriate precision.
  3. Add the appropriate template to the article. There are a few different templates that add geographic coordinates to an article, and some Infobox templates (including Template: Infobox University) include a coordinate parameter. But if you use the bookmarklet I mentioned above, you get the coordinates handed to you in a coord template, which is the one you want to use for compatibility with Google. The only change I’d make is to add the display=title parameter, which floats the coordinates up to the top of the page.
  4. Set the template options. The two I recommend are display=title and type= the appropriate value; for a building, use landmark. This is important because it sets the zoom to the appropriate value.
  5. Preview, making sure to click through and check the map link, then publish.

As an example, I added coordinates to the article about the School of Engineering and Applied Science. Now the next question will be: how long does it take those coordinates to percolate over to Google Maps? I suppose we’ll find out.

Housecleaning

Still working on getting the new site up and running. I reinstituted the blogroll today, starting from scratch (it’s amazing how many links, old friends’ blogs particularly, have lapsed). If you’re reading this in RSS, you’ll have to go to the site to check it out.

I also removed the del.icio.us widget from my sidebar, because (drumroll) I was able to get their autoposting service to work. So that post with all the links? That’s my bookmarks from yesterday. Right now it’s set to fire daily between 6 and 7 pm, so you’re pretty much guaranteed that you’ll get a daily update from me, though it may not be my wittiest, wisest prose.

One downer: There doesn’t seem to be a way to format the posts. So you’re stuck with my unfiltered output and an ugly format. Maybe once I finish rebuilding the site theme the autoposts will start to look better.

Google opens the Cloud

Google App Engine appears to be Google’s answer to Amazon’s web services—a simple, highly scalable development and deployment platform for web apps that need to scale. It’s an interesting offering that takes a slightly different tack from Amazon, with the requirement to build an app as a fully integrated stack (not to mention, the application needs to be in Python, at least for the first iteration). But I like it nonetheless, especially at the entry pricing: as Dave Winer pointed out in a prescient piece last week, web services should be free at the low-bandwidth end of things; it’s a great way to build an ecosystem. Having one player in the cloud business is an experiment. Two makes it competitive, and that means that the offerings for developers will only get better and better.

It begs the question, of course, of when Redmond will wake up and realize that the last remnants of its Old Republic are being swept away.

Congrats to Google product manager and Sloanie Tom Stocky, who seems to be at the center of a lot of good things from Google these days.

People come in waves

I’m starting to think that people on social networks, like everything else, follow predictable principles of organization. You can be in an equilibrium for months, adding very few friends to your local aggregation of people, when all of a sudden someone new shows up, and you make dozens of connections in the next few days. Punctuated equilibrium, I think, is the phenomenon that I’m describing. Or just plain old statistical mechanics.

Yeah, it’s that weird kind of night.

April First roundup

Man. You can tell the Internet is getting boring when no one bothers to do April Fool’s day pranks. Except for the following:

  • Google: Virgle: The Adventure of Many Lifetimes. Answer a questionnaire and upload a YouTube video and you could be on your way to Mars!
  • Zero in a Bit: New Attack Class: XSNADOR. Because we need more acronyms to describe the process of hacking things, this one will rise alongside XSS and XBI to fill a needed void: how to describe trivial hacks against social networking sites. In fact, I would propose a new meta-name for this type of acronym: YAVA (Yet Another Vulnerability Acronym).
  • Gmail: Custom Time. Send an email to the past!
  • YouTube: Every featured link on the home page is a RickRoll!
  • Google Calendar: Free wakeup kit!

Geez, other than Google (and, um, my company), is anyone else out there celebrating the foolishness?

Update: Okay, spoke too soon. While the placement of Ima Hogg as the featured article at Wikipedia might itself be an April Fools joke, surely the rewritten lead for the article definitely qualifies: “Ima Hogg was an enterprising circus emcee who brought culture and class to Houston, Texas. A storied ostrich jockey, she once rode to Hawaii to visit the Queen. Raised in government housing, young Ima frolicked among a backyard menagerie of raccoons, possums and a bear…”

And then there’s ever-reliable TidBITS: iPhone Goes International With Iridium, Take Control of (Backdating Stock Options, Swearing in Esperanto, Spouse Sharing in Leopard…), new Twitter feed, US Court Declares Email Bankruptcy Illegal, Mac Users Affected by New Virus, Merriam-Webster Accepts Sponsorship to Redefine Unlimited, and Time Machine Support Added to iPhone and iPod Touch. Nice job, guys. That’s more like it.

Laws of the Internet, continued

It seems to be the day for oracular pronouncements about the Net. An engineer I work with told me about an intermittent network connectivity problem he had experienced yesterday. Sometimes he could get on the network and sometimes he couldn’t. The cause? A bad network cable! He said, “Normally with a network problem like this it’s either on or off, not somewhere in the middle.”

I responded without thinking, “Yeah, every now and then we need to be reminded that we live in a very shallow digital layer on an analog world.”

That just might be my first law of the Internet.

Spafford’s axioms of Usenet, generalized

In looking for a source for the “https = armored truck between two cardboard boxes” analogy referenced in my previous post, I came across a list of other famous analogies by the author, Gene “Spaf” Spafford. Many of the ones cited need some context, but #7, which I reproduce below in its entirety, is completely understandable to any Internet veteran of a certain age:

Usenet is like a herd of performing elephants with diarrhea: massive, difficult to redirect, awe-inspiring, entertaining, and a source of mind-boggling amounts of excrement when you least expect it.

The comment, posted prior to Spafford’s withdrawal from recreational Usenet use, sits alongside his three axioms of Usenet (Usenet is not the real world, and usually does not resemble it; ability to type on a computer keyboard is no guarantee of sanity, intelligence, or common sense; and Sturgeon’s Law applies to Usenet). I think the quote above, and Spafford’s axioms, deserve elevating to a higher consideration. They are certainly directly applicable to blogs, MySpace, Facebook, and just about every other online expression of individuality. They may be applicable to Wikipedia, and are certainly applicable if the deletions and random vandalism all too visible from the Recent Changes page are taken into account. They may even generally apply to humanity itself, as formulated below:

  1. Humanity is not (all of) the real world, and human models of the real world usually do not resemble it.
  2. Humanity is no guarantee of sanity, intelligence, or common sense.
  3. Sturgeon’s Law applies to humanity.
  4. Humanity is like a herd of performing elephants with diarrhea: massive, difficult to redirect, awe-inspiring, entertaining, and a source of mind-boggling amounts of excrement when you least expect it.

To which I can only say: True. True.

Mofuse: Instant iPhone-savvy web sites?

The tagline for Mofuse is a little overhyped. As far as I can tell, they provide a nifty self-provisioning capability to take an RSS feed and turn it into a mobile device optimized page—kind of a turnkey version of Dave Winer’s NYTimesRiver. Of course I’m oversimplifying and it’s more than that, like the ability to put in custom entries. But to say, as TechCrunch does, that MoFuse “instantly converts sites for the iPhone” is overstating things a bit. But is what it does (as opposed to what is claimed) useful?

I set up my own MoFuse site to check it out. If you point your mobile device to http://jarrett.mofuse.mobi/, you’ll see a mobile-optimized version of my site. My one criticism so far: the stylesheet they are using on the iPhone seems to strip way too much out of the source text. Taking a look at one of the articles (my What makes a good product manager post, for instance), you’ll see that there are neither indents nor vertical separation between paragraphs, and that the bullets are stripped out of unordered lists. So for lengthy posts it’s not a pleasant reading experience.

Considering that the mobile-savvy version of Bloglines already allows you to get updates from an arbitrary number of RSS feeds, it would seem that the main value-add of MoFuse is the ability to insert mobile-only content, and the ability to present a custom look and feel to mobile users. If more and more people only have a mobile user experience, that’s probably worth something.