The eighth rule of Facebook is, verbatim: if you don’t need to use Facebook for work then walk away soldier, and don’t look back, even for a second. For everyone else, here are some tips for protecting your privacy and information security on The Social Network.

First up is some background information in the form of a rant, with more movie references. If you just want the “how to” details, then skip to Global Privacy Settings.

Facebook wants you to over-share

Over the past five years Facebook has gradually changed it’s default privacy settings for both new users and new features. If you join in 2010 and do not change your default privacy settings then your activity can be observed by a lot more people than if you had done the same thing in 2005. Here is a nice set of pie charts that illustrates the story.

Similarly, if you joined in 2005 and have never changed your privacy settings then your activity has gradually become available to a larger number of people because Facebook has added new features that don’t respect or relate to your existing privacy settings. Places, discussed below, is a good example of this.

Two levels of concern

Given the creeping exposure of all manner of personal data over time, there are two levels of concern with Facebook. The first is that your activity may be observed by undesirables (employers, children, parents, stalkers, etc.): the privacy problem. You want to be sure that you configure and use your Facebook account in such a way that your disclosed data can only be observed by the people you choose. The easiest way to deal with this is to treat everything you do on Facebook as potentially a public statement. Another way is to use friend lists.

The second level of concern is that even with good privacy controls that protect you from other individuals on Facebook, your activity over time may generate a behavioural profile that can be used to identify you even if your name never appears in the data comprising that profile. This is exacerbated by factoring in your activity on other social networks. Facebook, its advertising partners or, potentially, law enforcement or hackers have access to aggregate data that could be used to de-anonymise you: the information security problem.

Evil fireball

Just like the evil space fireball in The Fifth Element, that only grows bigger when General Staedert orders his crew to fire at it, Facebook gobbles data and the more active you are, the more it knows about you. Example: deleting a photo you don’t like equals more data about you (she didn’t want that photo to be seen by her friends). Deletions, by the way, are recorded. The data that is deleted remains recorded, etc. Everything is saved. Evil fireball.

Of course, jerks who see the world in black and white because it suits their agenda will tell you that if you have done nothing wrong ever in your entire life, and know that you never will, then you have absolutely nothing to hide from the fireball. They do not care about your privacy and liberty, they just want you to get out of their way. Nevertheless: the best way to deal with these problems is not to join Facebook. The second best way is to treat everything as public even if you have taken measures to control who sees it.

Global privacy settings

On May 26 Facebook replaced it’s convoluted privacy controls with a unified and simplified global settings panel. Nick O’Neill, who has written many useful articles on Facebook privacy, provides and overview in his post “Ten things about today’s privacy changes.” This is easiest way to start protecting your privacy.

Go to Account → Privacy Settings and choose something other than “Everyone” or “Recommended”. Facebook’s “Recommended” settings are, naturally, not very private. If you want my advice, choose “Friends Only” and lock that in first, then customise it further to restrict some of the settings to either a list, a specific group of names, or “Only Me.”

Note that at the top of the settings page there is a section called “Basic Directory Information”. Click on the unassuming little link that says “View settings” to both view and change your default directory settings. This is basically the information that people can find out about you through Facebook’s various search features.

At the bottom of the settings page there is also a section called “Applications and Websites”. Click on “Edit your settings” to set limits to the kinds of data that Facebook applications can access about you by default should you choose to install them (something that I recommend you avoid as much as possible).

Settings for ‘Places’

Following the popularity of location-based social networks like Foursquare and Gowalla, Facebook in August launched a location “check in” feature called Places that allows you to send your geographic coordinates to the system to let people know where you are. With all of their usual charm and tact they set up this feature to allow, by default, other people to check you in to places. (Bruce Schneier, whom I linked to a couple of times above, calls this type of information about you incidental data.)

Nick O’Neill again provides a good overview and some advice in “Places privacy settings.” The most important thing is probably to prevent other people from being able to check you in to places so be sure to set “Friends can check me in to Places” to “Disabled.”

Customising your settings

If you plan to use Facebook to say things that really do need to be restricted to a smaller group of people then you should customise your privacy settings. O’Neill’s post “Five privacy tips,” written before the privacy simplification changes in May, is still very useful in this regard, especially for the details it provides on using fine-grained Custom permissions, which is what you need to use if you want to restrict a data type to yourself or a short list of specific indiviuals.

Related to this is a change to the Publisher that went into effect this week, and relates to your everyday use of Facebook. The Publisher is the open text box at the top of your Wall and News Feed screens that invited you to start typing something (“What’s on your mind?”) has now been replaced with a Share bar that presents the following options: Status, Question, Photo, Link and Video.

When you one of these you get either a text box for typing, or a set of upload options, as well as a Permissions drop-down that allows you to limit who can see what you type or upload. Use the permissions feature to restrict your status updates to trusted friends if you are planning on sharing sensitive information.

Or, better yet, don’t share sensitive information on Facebook.

Related posts:

• Bad cookies
• Ramifications
• How to make a Facebook page

These tips are based on the creation of the Wesleyan University Facebook Page, and they update an earlier version to account for recent system changes.

Visit Wesleyan University on the Facebook

The basics

These are the basic steps:

1. Log in to Facebook.
2. Skim through “Creating, administering and editing your page.”
3. Visit “Create a Page,” and fill out the form to create a page.
4. Once you’ve created the Page (don’t publish it yet), an “Ads and Pages” button appears at screen bottom, next to Applications.
5. Click through to Ads and Pages → Pages.
6. Add anyone else you want to have admin access using Admins → Add in the right column (you can select from your Friends list or add by e-mail address).
7. Modify your other page settings to suit and then begin adding your content.
8. Some specific things you might want to configure:
   • If you want to add an RSS feed to your Page’s Wall go to Edit Notes → Edit Import Settings → Import a Blog.
   • To allow your Page’s fans to add their own photos and tag photos that you or others submit go to Edit Photos → Edit Settings → Allow Fans to Add Photos | Allow Tagging.
   • If you want to create sidebar links to Favorite Pages then visit the pages you’d like to link add and select Add to My Pages Favorites.
   • You will then need to go to your Boxes tab and drag Favorite Pages so that it displays in sidebar.
9. You can get further help at the rather weird Facebook Pages page.

Custom wall tabs

You can create a custom tab for your page that contains arbitrary HTML using the Static FBML Facebook application. See the “Wes on FB” tab for a live example of a custom tab made using Static FBML. Styling is achieved using inline CSS. The content should be restricted to a width to 500px. You can see the example HTML and CSS used for the Wesleyan page, modify it, and try your own.

To install Static FBML visit the application’s page in the Apps directory. You can add it to your page by selecting Add to my Page → Add to Page (next to the Page you want to add it to in the box that pops up). The application should now appear when you click on “Edit Page.” Your Static FBML app appears as one instance by default, below your default apps in the Edit admin area. (One instance is equivalent to one Wall tab.) The option to add another instance is inside the edit area of the first one. Go to Edit FBML → Add another FBML box.

To present the Static FBML instance as a tab, go to “Edit Page,” scroll to the instance, click “Application settings” and then “add” next to “Tab: Available.”

Navigating the edit options

One of the more confusing things about Facebook Pages is that not all of the options to edit something are available in the Edit area (i.e. when you click on “Edit Page” under your Page’s profile pic). I’ve found that sometimes the best way to get to what you’re looking for is to scroll to the bottom of the page you’re on and click the “Help” link in the footer, and then perform a search there for the app or edit option that you need.

Another thing to keep in mind is that there are often several ways to accomplish something, often because there are multiple apps that function in a certain way or accomplish a given task. But within the interface there are also multiple pathways to the same Edit options even if the place where you edit something doesn’t always look the same. I find this confusing, but others may simply find it convenient.

Regarding “boxes”

(Update: In August, 2010 Facebook announced that profile boxes are going away. One effect of this is that adding custom sidebar content via applications like Static FBML is no longer possible. Whether the boxes tab itself will be completely removed is unclear.)

Since everything on Facebook looks like a box it might take a while to figure out what the Facebook UI is referring to when something is labeled Boxes with a capital “B.” It’s a box that appears inside the Boxes tab, which (if you have added content to it) appears by default after Wall, Info and Photos at the top of the main content area of the page. For Static FBML instances that you have created you may have the option to add the content as a Box or a Tab (Application settings → add Box | add Tab). I have seen differences depending on the application and have not investigated thoroughly. Nevertheless, if you can add it as a box it will appear somewhere in the content area on your Boxes tab. If you add it as a tab it will appear as its own tab.

Changes, etc.

As before, I’ll edit this page for accuracy and/or to add new tips as I discover them. If you have information to add then please contact me and I’ll update the page.

Related posts:

• Static FBML no more
• How the hell to make a Facebook page
• Protecting your privacy on Facebook

The short version goes something like: worth it in the end, but shouldn’uh hadtuh…

Longer version

Reinstalling Leopard using Erase and Install fixed every problem I listed a few weeks ago with the exception of vhosts which I had to recreate because of an architectural change in Leopard:

1. Airport connects on wake.
2. Mail.app syncs on wake.
3. VPN is working again.
4. Video artefacts have gone.
5. Safari has chilled out.
6. Command + Tab switching works.
7. My business is fast.

What I did:

1. Cloned startup disk using SuperDuper! and confirmed it was bootable.
2. Launched the installer, restarted and chose Erase and Install.
3. Created a new admin account.
4. Selectively copied user data for some (mostly-Apple) apps^† and additional fonts using Adam Rosen’s guidelines.
5. Reinstalled additional applications from scratch^‡ intentionally leaving the cruft behind.
6. Cloned the new startup disk, tested it and scheduled nightly backups.
7. Added the printer.
8. Added the scanner.
9. Blogged about it.

Would I recommend you do it if you have mad problems resulting from a regular upgrade? Yes. Should you have to? Nope. It’s just the price you pay for love-needing the Apple.

† Address Book, iCal, iTunes, Mail and Safari. I also had to boot back into my old system to export data from Address Book and Transmit.

‡ Coda, MAMP, MarsEdit, NetNewsWire, Photoshop, Quicksilver, TextWrangler, Tinkertool, Transmit and something nasty from Cisco related to VPN.

Related posts:

• Shit got ill in the Leopard upgrade
• NetNewsWire and me

But anyhoo, there are at least two ways to set up Mac OS X 10.5 to recognize hostnames other than localhost (e.g. being able to access a local site using http://mydomain.dev) in place of the defunct NetInfo Manager.app:

1. You can use the dscl command line utility to set up virtual hosts (e.g. sudo dscl localhost -create /Local/Default/Hosts/mydomain.dev IPAddress 127.0.0.1).
2. Or you can edit /etc/hosts (e.g. by adding 127.0.0.1 mydomain.dev to the end of the file).

Number two is easier since the file is “watched” for changes by the system. As soon as you add the entry and save the file Apache will be able to use it. By the way, this is all assuming you have set up your virtual hosts using Apache’s httpd.conf.

Related posts:

• Shit got ill in the Leopard upgrade
• On reinstalling OS X Leopard
• Quirky permalinks problem

The problem

Say you want to make a Facebook page, and you’re a Facebook regular. You look at your own profile page—you know how it works, after all, from back-to-front—and you think, “I’ll just follow the links and prompts and I’ll make myself a Facebook page.” Odds are it won’t be that easy. I don’t know why this is and I don’t care. You probably don’t either. So that’s why I’m going to tell you some things that took me way too long to find out—the kind of time that is now lost forever, never to be regained, and surely to be intensely regretted if Facebook is superceded by some other proprietary system entirely within the next 18 months.

The basics

These are the basic steps:

1. I started by reading over a few of the links at “How to create and manage Facebook Pages.”
2. Visit “Create a Page,” and fill out the form to create a page.
3. Once you’ve created the Page (don’t publish it yet), an “Ads and Pages” button appears at screen bottom, next to Applications.
4. Click through to Ads and Pages → Pages.
5. Add anyone else you want to have admin access using Admins → Add in the right column (you can select from your Friends list or add by e-mail address).
6. Modify your other page settings to suit and then begin adding your content.
7. Some specific things you might want to configure:
   • If you want to add an RSS feed to your Page’s Wall go to Edit Notes → Edit Import Settings → Import a Blog.
   • To allow your Page’s fans to add their own photos and tag photos that you or others submit go to Edit Photos → Edit Settings → Allow Fans to Add Photos | Allow Tagging.
   • If you want to create sidebar links to Favorite Pages then visit the pages you’d like to link add and select Add to My Pages Favorites.
   • You will then need to go to your Boxes tab and drag Favorite Pages so that it displays in sidebar.
8. You can get further help at the rather weird Facebook Pages / Public Profiles page.

So now your have your Facebook Page. If you’re happy with this and you feel done then have a great day, and I’ll catch you later. For everyone else, your troubles are just beginning.

The sidebar

So how do you change the sidebar? What if you’d like to add a little list of additional links. What if you’d like to add some free-form text? Chances are that the Page Edit options don’t offer you any clues. If you are like me then you probably had an page of someone else’s that you were using as model of what’s possible. You might—after an inordinate length of time (you’re like me, remember) realise that a Facebook Application must be how the cool kids are doing this.

I tend to think of Facebook Applications as third-party products that look bad and typically don’t fit in very well to their neuva-Windows 3.11-Facebook-blue-grey surroundings. My reference page’s sidebar just had a list of normal-looking links, and a nice little section header. It looked like any other section of the sidebar. I never guessed that it was being produced by an Application (instead of just being part of the Page Edit options), nor did I even dream that it was a Facebook Application that is not part of your page by default, and there’s no way in hell I knew it was called Static FBML. But there it is, folks. This is what you want. Every Facebook Page should have this as part of the Edit Page options—when I set up my page back in May, 2009, Static FBML a.k.a. Add Some Basic Shit to My Sidebar was a nowhere to be found.

Okay, so you want to get Static FBML. How? Alright, it’s not that hard, I’m exaggerating. You go to the Apps page, and type in a search for static fbml. For you, it will pop up right away as the only possible answer. For me, I got the interminable waiting graphic, then those annoying little red boxes reporting some error that goes way over the popup’s border—for ages and ages, even when I gave it a rest and came back later to try again… over several days. Anyhoo…

Choose that.

You can add it to your page by selecting Add to my Page → Add to Page (next to the Page you want to add it to in the box that pops up). The application should now appear when you click on “Edit Page.” You can configure it as you would any other default region of the page. Your Static FBML app appears as one instance by default, below your default apps in the Edit admin area. One instance is equivalent to one sidebar box. The option to add another instance is inside the edit area of the first one. Go to Edit FBML → Add another FBML box.

Navigating the edit options

One of the most confusing things about Facebook Pages to me is that not all of the options to edit something are available in the Edit area (i.e. when you click on “Edit Page” under your Page’s profile pic). I’ve found that sometimes the best way to get to what you’re looking for is to scroll to the bottom of the page you’re on and click the “Help” link in the footer, and then perform a search there for the app or edit option that you need.

Another thing to keep in mind is that there are often several ways to accomplish something, often because there are multiple apps that function in a certain way or accomplish a given task. But within the interface there are also multiple pathways to the same Edit options even if the place where you edit something doesn’t always look the same. I find this confusing, but others may simply find it convenient.

Regarding ‘boxes’

Everything on Facebook looks like a box, so it might take you a while to figure out what the Facebook UI is referring to when something is labeled Boxes with a capital “B.” It’s the Boxes tab, which (at least on mine) appears after Wall, Info and Photos at the top of the main content area of the page. One thing you will want to know is how to move something (such as a Static FBML box) to your sidebar, or make it into an additional, custom tab. When you create a Static FBML box, for instance, it adds it as a box to the Boxes tab. To move it to your sidebar, go to Boxes and click on the pencil icon in the top right of that box’s title bar and select “Move to Wall tab.” To me, this does not make any sense. I think it should say “Move to sidebar.” But there you go. That’s how you get it there.

I think that whenever you create content for your page with a third-party/add-on app it generates it as a Box for you and puts it under the Boxes tab. You can then move it between tabs or to the Wall/sidebar. At least, that’s what I’ve observed so far.

More to come?

I’ll edit this page for accuracy and/or to add new tips as I discover them. If you’ve read this far and can add/correct or otherwise share what you know then by all means leave a comment and I’ll update the page. Hope this helps you other poor sods out there who have to waste brainspace on this. Hey, there are worse things, let’s be honest. I mean, at least it’s not MySpace… [shudder]

Related posts:

• How to make a Facebook page
• Static FBML no more
• Protecting your privacy on Facebook

Handle your business; your inability to hang on is no excuse for knocking others over.

Read the full list.

One day I will improve on this lame-arse Flickr workflow:

1. View new photos in Bridge (~/Pictures/setname)
2. Reject unwanted photos
3. Adjust image order, if needed
4. Tools → Batch Rename as setname_000x.jpg to ~/Pictures/setname/_renamed
5. Go to ~/Pictures/setname/_renamed in Bridge
6. Tools → Photoshop → Batch… → Play “Resize for Flickr” to ~/Pictures/setname/_resized (to 1024 x 768px)
7. Go to ~/Pictures/setname/_resized in Bridge
8. Tools → Photoshop → Batch… → Play “Optimise for Flickr” to ~/Pictures/setname/_opt (set to around 50)
9. Check these images in Preview.app
10. Upload to Flickr…

Wide open to suggestions.

Related posts:

• Flickr’s point of no return
• El Caminos on Flickr
• Mini with the works

Somehow, I just knew that my free Flickr account would find a way to bite me in the bum. It’s one of the main reasons I was so slow to get into it, having previously hosted all of my own photos. Here’s how it happened:

1. Once personalised, Flickr URLs cannot be changed.
2. Original files cannot be accessed unless you have a paid account.

Regarding #1, I want to change my Flickr URL because I recently changed my primary domain name from zero2180.net to ztoe.net and my Flickr URL is flickr.com/photos/zero2180. The only way to do this is to delete or transfer the account and start a new one with a new personalised URL. Okay, it’s not ideal but I can work with it. Only…

Regarding #2, to get my photos out of Flickr programatically, and at their original size, I need to have a paid account. The Flickr API makes the first part possible, and Dan Benjamin’s modified version of flickrtouchr.py is the perfect tool for making the backup. But for the whole paid account thing. Flickrtouchr can download my Favourites (other pro users’ photos that I’ve starred), but not any of my own photos.

I’m at the point now where I actually don’t mind paying for an account, but not if it’s one I’m planning to delete later that day. Mother of pearl.

Related posts:

• My Flickr workflow is pants
• How to make a Facebook page
• On reinstalling OS X Leopard

† See for example the W3C’s Character entity references in HTML 4, this multiplatform table of keyboard shortcuts for special characters, this comparison of Mac OS X and Windows XP keyboard functions, and this table of Windows alt code references (PDF file).

Related posts:

• IE, Unicode, freakout boxes and CSS
• Styling the blockquote element
• Shortwave

This post is actually about things I’ve done (that have worked) to speed up WordPress 2.7 on shared hosting:

• Output compression: compresses the text transferred (HTML, stylesheets, scripts, etc.) for browsers that indicate they can handle it. For example:

  <ifmodule mod_deflate.c>
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/xml
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/x-httpd-php
  AddOutputFilterByType DEFLATE application/x-httpd-fastphp
  </ifmodule>

• Expires headers: sends the browser an expiration date for some assets like stylesheets and images so it won’t try to fetch them again until that date is reached. Stylesheets have timestamps appended (e.g. style.css?1237154177) when they change, effectively changing the filename and forcing them to be updated. For example:

  <ifmodule mod_expires.c>
  ExpiresActive On
  ExpiresByType image/gif "access plus 1 month"
  ExpiresByType image/jpeg "access plus 1 month"
  ExpiresByType image/png "access plus 1 month"
  ExpiresByType text/css "access plus 10 years"
  </ifmodule>

• WP Cache 2: a plugin that reduces the amount of server-side code execution and database queries required to serve a page, by caching them as static files
• Simple markup: lean, semantic markup using the HTML5 doctype and as little extraneous cruft as possible
• Simple styles and behaviours: using only one external CSS and one external JavaScript file, both modest in size

Yahoo!’s YSlow plugin for Firefox and the associated rules helped a lot with the first two things, and Andrew King’s website optimization analyser with general performance testing. More recently I discovered Alex Shiels’ Is My Blog Working—it’s a nice tool though it seems to draw different conclusions as my server’s response time fluctuates.

So that’s that. Citius, altius, fortius, because, as everyone knows: Internet is serious business.

Related posts:

• Thirty-one
• Edit the hosts file in place of NetInfo Manager.app
• Renaming files, redirecting visitors

Believe it or not I used a grid tool when I made the most recent layout for this site. I can’t remember how I found ctrl+shift+g, but it’s surprisingly useful for aligning elements on the page, even if said page includes (ahem) one column. It’s a JavaScript implementation of Khoi Vinh’s clever background image technique.

More recently I came across The Grid System, with it’s complex and highly controlled grid layout. I really like the “Show Grid” feature (top right) because it highlights horizontal as well as vertical sections. The site bills itself as “The ultimate resource in grid systems.” It’s a bold strategy, Cotton. Let’s see if it pays off for ’em. (I’m pretty sure I won’t have to star any others.)

Related posts:

• New, new, new, all-new
• Thirty-one
• IE, Unicode, freakout boxes and CSS

Before you start, you should back up your database, and verify that the backup works. I also redirect traffic to a “down for maintenance” message while I’m upgrading. (It’s probably best to disable plugins too.) Then, run Automatic Update:

This beats waiting around for SFTP

The main difference is the speed of the actual update. It ran in a minute or so. The rest of the time was spent synchronising remote files to the local machine, rather than the other way around. The whole process probably takes about the same amount of time as updating via SVN, but this option will be a lot easier for users who are more comfortable with a GUI than the command line.

This is probably the best new feature in WordPress.

Related posts:

• New domain
• New WordPress worm
• The redesign of drupal.org

You can create up to 31 styleSheet objects with the createStyleSheet method. After that, the method returns an “Invalid Argument” exception.

This can create a problem for module-based content management systems like Drupal where you can have multiple stylesheets for one module, and multiple modules. (It’s an application design approach that really puts the “cascade” in Cascading Style Sheets.)

Fortunately, Drupal allows you to aggregate and compress CSS files in the Admin settings (part of Drupal Core since version 5, I think). Unfortunately, in IE there’s a CSS file size limit (288 KB), at least in versions 6 and 7, so aggregation won’t solve the problem in every case.

To put this in perspective though, 31 is a lot of HTTP requests, and 288 KB is one hell of a CSS file. Numbers like these will likely have a negative impact on the user experience by slowing your site down. The YSlow Firefox plugin (requires Firebug) is good at identifying such problems.

As for the file size problem, James Edwards’ Dust Me Selectors can find unused CSS selectors for the entire site, which should allow some trimming. And of course there’s GZIP compression. Yahoo! Developer Network has an excellent best practices page that covers these topics. Best of all, Wim Leers has applied the Yahoo! rules approach in his detailed article about speeding up Drupal 5 and 6.

† Observed in IE6, IE7 and IE8 RC1.

Related posts:

• The redesign of drupal.org
• Edit the hosts file in place of NetInfo Manager.app
• Identify yourself

So far, my efforts to recover Ma.gnolia’s data store have been unsuccessful. While I’m continuing to work at it, both from the data store and other sources on the web, I don’t want to raise expectations about our prospects. While certainly unanticipated, I do take responsibility and apologize for this widespread loss of data.

Update: Larry Halff again, about what happened:

Ma.gnolia’s database server suffered from file system corruption, which also corrupted it’s database backup, even though it was on a separate system. This much was bad luck. I was relying on a single backup; the database was fast approaching half a terrabyte and I had been unable to implement an practical, economical solution to version that quantity of data.

And here’s a comment from Chris Messina, responding to upset users, about the team behind Ma.gnolia:

Larry will provide an explanation for what has happened, once he has run out of options. For now his top priority is recovering the data—a time-intensive process given the experiences I’ve had with data loss. Hopefully he will be able to satisfy your desire for more information shortly, but realize that Ma.gnolia is not a faceless corporation with hundreds of employees. It is largely the work of one man. And while that doesn’t excuse what happened, I think it’s important to consider proportionality when lobbing your criticism.

Several recovery tools are available. Unfortunately I couldn’t retrieve much data from these. I’ve had more success with a script written by Waylan Limberg that searches Google’s cache. A friend helped me modify this to scrape tag URLs as well (thanks Mike).^†

Now, time to run a few backups…

Update 2: If you’re scraping your bookmarks from Google cache it looks like you’ll need to restrict it to below ~100 URLs at a time. Above that and Google was serving me 403s and a piss off spammer message. Also, Ma.gnolia now provides a similar tool on the recovery page.

† Drop me a line if you’d like the source.

Related posts:

• Ma.gnolia again?
• SuperDo
• WordPress Automatic Update

Mark Boulton and co are redesigning drupal.org using a “community design” process similar to the one that Automattic is using with WordPress these days. I was skeptical about this at first, though the interface redesign in WordPress 2.7 came out pretty well, more horse than camel. Both groups seem to be making this approach work.

For the Drupal redesign Boulton’s team is being really systematic about it: they released a new design prototype every Thursday through October and November so that people could comment over the weekend through various feedback channels (mainly Drupal Groups, but also Flickr and Twitter). Boulton comments that:

Through the flaming, disagreements, and arguments are clear, actionable points, which we take forward to the next round. At first, I thought design by community would be as bad as design by committee. Lots of people, all wanted their say, mixing black with white and ending with grey. Not so.

The results are clear and observable in the prototypes. It’s good to see how much the most recent iteration emphasises utility over exposition of the product. Earlier versions read more like an advertisement which encourages evaluation of the various claims (thinking), while later versions look more like something you can get down and use, which encourages interaction and exploration (doing).

Related posts:

• Thirty-one

My site uses a check mark to denote a visited link. Unfortunately, when I first implemented that style my old friends IE6 and IE7 showed freakout boxes instead.

IE6 and IE7 show boxes for unrecognised characters.

I have seen these little buggers before and on that occasion they won the round. Although I’m growing increasingly reluctant to hack my personal stylesheets for You Know Who, today I changed my mind about tolerating IE’s mangling of my intentions. (About 40% of visitors to my site use IE so a fair number of people see this.) Regarding freakout boxes I believe the IE development team and I are now even.^†

For whatever reason, sometimes when IE is asked to render a glyph that does not exist in the font that the stylesheet is saying it should be displayed in, it will give you a freakout box. Other browsers (e.g. Camino, Chrome, Firefox, Omniweb, Opera, Safari) deal with it more gracefully. I think they look for other fonts on the system that contain the glyph the page wants to display and use that font instead, just for that glyph. On OS X it’s Lucida Grande:

Omniweb 5.6 showing the Unicode check mark.

The check mark is actually specified in the stylesheet as generated content, rather than in the markup. Perhaps that is what is causing IE7 to choke in this case, because it is supposed to be better at “font linking” for characters in the Unicode BMP (Basic Multilingual Plane), which means characters in the range 0000–FFFF. Check marks are within that range, which makes me think it might be a generated content bug.

Here is the CSS that causes the problem in IE:

a:visited:after {color:#6699CC; content:"\00A0\2713";}

Which means, add a space and then Unicode character 2713, “check mark,” at the end of an anchor (link) element that has a pseudo class status of visited, and make it a certain shade of blue. From the figure above you can see that IE gets the content generation and colour to happen, but chokes on producing the correct glyph.

Earlier this year Eric Meyer wrote about font-family declarations and special characters and it got me wondering if I could fix this problem by specifying a font that IE would know did contain a check mark character—not necessarily the Unicode character, but a similar character. I chose Webdings (a Windows core web font), thinking that I needed something with a lot of symbols in it, and used the arcane Windows Character Map to tell me what the check mark character’s numeric value was. (I don’t know about Vista, but the OS X Special Character Palette smashes the competition on this.)

Windows Character Map showing Webdings.

I then wrote a kludge for IE6 and 7 that replaced the declaration calling for the Unicode 2713 check mark after a link with the Webdings character 0061:

* html a:visited:after,
*+html a:visited:after {content:"\00A0\0061"; font-family:Webdings;}

I’m not using conditional styles for IE (everything’s in one stylesheet) so this rule uses the “star hack” for IE6 and the new star hack for IE7.

I was a little surprised to see that it worked:

IE7 showing checkmarks using Webdings.

Lastly, while writing this up I wondered if I was making it harder than it had to be: what if all I needed to do was specify another Windows core web font that contains the check mark character? Then all I’d need to do is use my hack to tell IE which font to use for that glyph. I used the Unicode Font Info tool to check each of Microsoft’s core fonts (other than Webdings) for the Unicode check mark character. It ain’t there.

I might be missing something in all this, but for now I’m going with the generated content bug theory, and using Webdings as the workaround.

† I’m not counting the fact that the Apple command symbol is not in any of Microsoft’s core web fonts. They can have that one.

Examples of fluid block quotation marks

Here is some sample markup:

<blockquote>
    <p>This paragraph is the first child of the blockquote.</p>
    <p>This paragraph is the last child of the blockquote.</p>
</blockquote>

To get the result I wanted I had to rely on some CSS properties that aren’t (yet?) supported in all browsers. Still, the end result works in recent versions of Camino, Firefox, Safari, Opera (almost), OmniWeb (almost), and IE 6 and 7 using Dean Edwards’ IE7.js, if scripting is enabled. Here’s the relevant CSS:

blockquote > *:first-child {
    text-indent:-14px;
    }
blockquote > *:first-child:before {
    background:url(images/left-quote.png) no-repeat 100% 30%;
    content:"\00A0";
    padding:2em;
    padding-left:0;
    }
blockquote > *:last-child:after {
    background:url(images/right-quote.png) no-repeat 10% 70%;
    content:"\00A0";
    padding:2em;
    }
* html blockquote * {text-indent:-6px;} /* fix IE6 */

The two larger rules target the area immediately before the first child element (a p in the example above) of the blockquote, and immediately after the last child element (also a p), respectively. This method uses images of quotation marks to render the opening and closing symbols, and the images are applied as backgrounds to invisible generated content. Background image positioning made it easy to fine-tune the location of the marks.

It turns out that all of the browsers I tested support background images on generated content, but the catch is that Safari and OmniWeb don’t seem to treat a regular space character (either Unicode character 0020 or a literal space) as, well, content. No content, no background image. The trick turned out to be to use a more obscure non-visible character, in this case the “no-break space” (00A0).

Finally, the topmost rule pulls the first line to the left, and the last rule is a kludge for IE6 that overrides this behaviour. When the first line has a negative indent IE6 cuts off the overhanging part of the image. (Writing that out I just realised that I didn’t try overflow:visible.)

I did wonder if the same effect could be achieved using quotes as generated content and styling those, instead of invisible content with background images. I hit a wall on the first attempt, but I came really close in the Gecko browsers and Safari with this alternative:

blockquote > *:first-child {
    text-indent:-16px;
    }
blockquote > *:first-child:before {
    color:#CCC;
    content:"\201C";
    font:italic bold 4em Garamond,Times,"Times New Roman",serif;
    line-height:1px;
    padding-right:.2em;
    vertical-align:-1500%;
    }
blockquote > *:last-child:after {
    color:#CCC;
    content:"\201D";
    font:italic bold 4em Garamond,Times,"Times New Roman",serif;
    line-height:1px;
    margin-left:-.05em;
    vertical-align:-2700%;
    }
* html blockquote * {text-indent:-6px;} /* fix IE6 */

The main problem was that in pulling the opening quote down as low as it is I couldn’t prevent a larger line height on the first line in Opera. The bottom margin of the blockquote was also a bit taller than I wanted in several browsers because of a similar effect with the closing quote. I started reading the CSS spec on Line height calculations, but it got late and my eyes were stinging and… I’ll get back to it.

Lastly, I said “almost” for Opera and OmniWeb because their current versions don’t support last-child, so there’s no closing quote for these. Opera 9.5 will fix this; not sure about OmniWeb. But if you use either of these now you should see the one-quote effect, and I’m happy to say I’m in good company there.

Update: I changed Zero to One-Eighty’s blockquote style in December, 2008, but the screenshot above shows what they looked like when I wrote this post.

Don’t ignore the difference between the size of the bird in the recipe and the size of the bird on your chopping block. I had to return the roasting dish to the oven three times before it was finally cooked all the way through. My friends were forced to content themselves with the vegetable dish and the appetizers. It was a weeknight. They left before the third firing. Who ever heard of a two-pound chicken anyway? Mine was a kosher American chicken, and it weighed a hell of a lot more than two pounds. Well, that was several months ago. I eventually got that chicken cooked and spent several days consuming it in solitude, during which time I learned a valuable lesson. The recipe is a corker.

This week I discovered the missing link: calculate twenty minutes per pound, and then add another 10-20 minutes. The Internet told me. My boss told me. I think this is common knowledge. Being a late bloomer, I learned it at about 11:00 p.m. last night. With Christmas day just around the corner, which event gives cause for Elena and me to celebrate the birth of not one but two outstanding Jews (Shoham and J.C.), I will be returning to Jamie’s signature dish, and this time I’m looking for a victory. Last night was my practice round.

The bare facts are these:

• 4.5 lb. organic bird (in supermarkets try the kosher section)
• 400ºF oven
• herb butter under the breast skin, two lemons in the cavity
• 40 minutes initial blasting
• parboil potatoes for 5-7 minutes
• add the veggies underneath and bake for another 60 minutes

The key is the butter and the lemons which keep everything amazingly moist. The protracted heat wave turns the skin of the chicken crispy and golden, and makes the tops of the potatoes and fennel slightly charred. Damn fine result. I always want to produce a dish in the fewest possible steps and for that you can’t go past Jamie Oliver’s recipes. Oh, and that thing about chicken cooking really fast may be true when it’s chopped up in pieces in a Thai curry, but in oven roasting land the rule is 20/lb. + 20. So now we know.