August 2008 Archives

Being a designer on a small development team means I end up in the code fixing visual design bugs. Firebug has been invaluable for this. Here are some of the things I do the most.

Right-click on anything on the web page and choose Inspect Element. This gets me to the section of the HTML source that I care most about.

Right-click in the Style panel on the right and choose Add Element Style. You can then add CSS declarations to this element and see immediately how it affects the layout of the page. If there's already a CSS block and you want to add a property to it, double-click on the white space after the opening or closing bracket.

Use up and down arrow keys in the value of a CSS element to cycle through values. So if I add a position declaration, I can use the arrow key to see how each value changes the layout. The down-side is you need a valid value in there already. undefined won't work as a starting point.

Arrow keys also work for numerical values, as long as they has specified units. Font size, margin, padding, position... you can nudge any of these values up or down using the arrow keys. It even works on an individual value within a multi-properly list (e.g. padding: 5px 10px 20px;) as long as you put the insertion point in the value you want to change.

And of course turning off a particular declaration is just as important as adding one or changing the value of one. Click in the left margin next to the declaration you want to disable.

There's a ton more in this utility, like the console for evaluating javascript expressions without resorting to alert();, and the DOM. But this is the stuff I use every day. I only wish IE and Safari had equally good debugging tools.

So you've been browsing through Flickr's Interestingness feature and found the perfect photo for your new desktop background. The only problem is, Flickr makes it hard for you to actually get the photo. Right-click on it and save, and you'll end up with spaceball.gif. Annoying. So here's how you get the real picture downloaded.

View Source for the page with the photo on it. The search for the term photoImgDiv. Immediately following this term is an <IMG> tag with a src value that looks something like this:

http://farm1.static.flickr.com/1234/1234567890_a1b2c3d4e5.jpg?v=0

That is the link to the medium-sized image.  Select it, copy it, paste it into your browser's address field and go to it. (Select, Cmd T, Cmd L, Cmd V, Enter on Mac Firefox.) Note the question mark and everything after it is irrelevant. You only need the part up to and ending with .jpg.

Now comes the magic. In the address field at the end of the link, just before the .jpg, add _o which is an underscore and a lowercase o. Here's what the link will look like:

http://farm1.static.flickr.com/1234/1234567890_a1b2c3d4e5_o.jpg

Press Enter to open it, and that will get you the original size of the picture. Now you can save it out to your computer.

This won't work for some pictures. In that case, try _b instead. This will get you the large (aka big) version of the picture. If neither of those work, then the medium size is the best you can do. _s is square, _t is thumbnail, and _m is small. But let's be honest here. What you're really after is the high resolution, no?

Now I just need someone to write a basic web service that takes a Flickr URL and returns the biggest version of the image. Any web hackers want to take this one on?

Of course doing a 2 minute web search turned up these existing instructions and this tool. Ah well, if it was new and useful to me, perhaps it will be to a few of you all as well.

I have four general-purpose computers running three different operating systems on my desk at work. At home I also have four computers, though I "only" run two different operating systems.

At work and at home, the computers are connected together using commercial-grade switched Gigabit Ethernet, with gobs of dedicated NAS-based storage. Both home and work networks are connected to the Internet via good quality dedicated DSL and other technologies. The WiFi signal is strong everywhere. I design networking software for a living, have a degree in computer science,  speak HTTP fluently, and am the primary inventor of a bunch of patents related to computer networking.

So when I want to copy a single, simple file from one computer to another what do I do? Reach for a handy USB-stick, of course! The perfect utility, predictable behavior, and universal support for the FAT-formatted USB storage stick trumps all the networking in the world.

Yes, for some cases 'scp' 'rsync' 'smbtar' and friends can't be beat, especially when you already know how to name and authenticate to the destination (i.e. is it 192.168.5.32 ? smb://fooobar/baz ? \\skippy\flazzle\foo ? sftp://jokers:wild@server.snip.snap.com/home/me ?) None of that matters to the USB stick.

The closest replacement I've seen so far is DropCopy -- but that's not cross platform (yet!?). Someday we will sort all this out. Until then, I always keep a 4G stick handy.

It looks like my work adding Rated Best to the various start-up directories caused a nice increase in traffic. 40 people/day isn't great, but it's a lot better than 4!

I read today that in a sampling of ~3000 PCs, a third of them had downgraded from Vista to XP. We've already seen close Microsoft partners hold off on rolling out Vista internally. And there's the whole Mojave fiasco where Microsoft--under pristine lab-like conditions--tried to convince people that all the setup and cofiguration problems aren't really problems as long as someone else sets up your computer under pristine, lab-like conditions.

But it got me thinking, how much money has this disaster of an OS release cost the PC industry? Are there many people out there like me, who might consider buying a new PC, but instead continue to make do with the old one primarily because they don't want to deal with reinstalling XP? Microsoft has all but given up at this point, focusing attention now on the new Windows 7 blog.

I finally updated my Rated Best site to use sIFR for the titles and headings. (I'm using various weights of the font Meta.) Getting that working was a real challenge, especially since my blog development environment is all brower-based. Browser-based debugging is a lot like particle physics research. Slam some code against a browser and see what comes flying out. Tweak the code and repeat.

Suffice to say that sIFR is a very fragile technology that requires everything to be just so in order for it to work. I still can't figure out how to get the elements from jumping around as they load, but it's good enough for now. Anyway, let me know if you need help getting it working on your site. I'm apparently an expert at it now.

The other thing I just did was to do a bit of passive promotion. I added an info page on Rated Best to CrunchBase, TradeVibes, AboutUs.org, SimpleSpark, Sphred, and the Facebook product pages. And of course the sIFR examples page. I also submited to FeedMyApp, KillerStartups and Listio. It seemed to work well with AskMeGo, which now has a PageRank of 4. Any other places I should post it to help out SEO for Rated Best?

Why is this so hard? I have a beautiful Borkholder cherry wood entertainment center that I have no desire of replacing. The interior will fit a TV up to 29.5" wide. Right now I have a 27" tube TV in there that I bought off of Mercata, which tells you how long I've had it. I'm ready to make the step into the modern era with a 16:9 HDTV, but it's proving to be an over-constrained problem.

TV manufacturers appear to have a few magic dimensions they support for TVs. 32" is one of them, as is 26", 37" and 42". It seems the the narrowest TVs are just under their diagonal picture size. So a narrow 32" TV is just over 31" wide: too wide for my cabinet, but from this heuristic, a proportionally smaller 30" TV would be perfect.

Unfortunately, they don't appear to exist. There are a few 30" TVs out there, but they are either tube TVs which are wider. Or for some crazy reason, the 30" LCD TVs all seem to have their speakers mounted on the sides rather than below.

I know it can be done. There are 30" computer displays like the one from Dell where the width is only 22". But then I don't want to spend $1200 on a pixel-perfect TV. I guess I'll keep looking.

Now that I'm an American citizen, I feel a little bit more at ease revealing my decidedly un-American activities. Here's my first admission: today I rode public transit to work (but I promise it won't happen again)! Google Maps transit planner showed me that I could walk to the bus stop, pay $1.75, ride for 20 minutes, then walk to the office, all in less than 30 minutes, with no transfers needed.

Sadly, my office is moving in a couple of months to a new building just about 5-10 minutes further drive from my house. Google maps transit says I will need to take two buses, walk more, and have a total commute time of 70 minutes. If I ride my bike to the bus, then I can skip a transfer and have a slightly longer bicycle ride on the back end -- total time about 45 minutes. But I could also just ride directly to the office, and skip the bus for a total time of, well, about 45 minutes.

I'm fortunate enough to be able to ride my bicycle to work when I want to, but I seem to live in that all-too-common American "suburban grey zone" -- too short a commute to make public transport a good option, but too long to make walking or biking a no-brainer. Maybe I just need to change my brain to get on the bicycle more often. Hmm.. more un-American activities...

Many web site designers work on a Mac, yet most web sites are viewed in Internet Explorer. Hence, designers have to run Windows under a virtual machine (Parallels or Fusion) or connect to a Windows machine remotely (RDC or VNC) to test out their sites on IE.

Well no more. Some fine folks in the open source software community cobbled together a package for Mac OS X that includes the IE browser running on top of a Windows emulator. Get it from the IE 4 OS X site.

The only downside is that they are a version behind; IE 6 works, but IE 7 doesn't. It's still useful, as around 25% of people are using IE 6 to browse the web. You will probably want to test against it.

This won't prevent you from having to use one of the tools mentioned in the first paragraph to test out IE 7, but IE 6 for Mac OS X definitely makes the cross-browser debugging process a lot easier for me.

Oh, and the best way to get your designs working in IE? Using IE-specific HTML. I've given up creating the mythical cross-browser mark-up. I get it working in Firefox and Safari, then use IE-specific comments to patch things up in IE.

Updated to handle the case where the window height shrinks during resize, and to handle fricking IE. Also cleaned up the code.

Today I wanted to set the height of a DIV to be the same as the browser window. It has a background image and border that needed to span the full height of the window, but I didn't want the vertical scroll bar activated to imply there was more content below the fold.

I'm sure there are better ways to do this, but I did it with Javascript. In the <HEAD>:

<script language="javascript" type="text/javascript">
  function findElementById(id)
  {
    if (document.getElementById)
      return document.getElementById(id);
    else if (document.all)
      return document.all[id];
    else if (document.layers)
      return document.layers[id];
  }

  function setMinHeight(x)
  {
    theElement = findElementById(x);
    if(!theElement.style.minHeight || theElement.offsetHeight > parseInt(theElement.style.minHeight))
      theElement.style.minHeight = theElement.offsetHeight + 'px';
  }
  
  function setHeight(x) {
    theElement = findElementById(x);
    windowHeight = window.innerHeight;
    if(!windowHeight) // fricking IE
      windowHeight = document.documentElement.clientHeight;
    if(windowHeight > parseInt(theElement.style.minHeight)) 
      theElement.style.height = windowHeight + 'px';
    else
      theElement.style.height = theElement.style.minHeight;
  }
</script>

Then in the <BODY>:

<body onresize="setHeight('contentDIV')">
  <div id="contentDIV">
    This is the main content on the page.
  </div>
  <script language="javascript" type="text/javascript">
    setMinHeight('contentDIV');
    setHeight('contentDIV');
  </script>
</body>

Safari actually renders this the best, dynamically resizing the DIV as you resize the window. Both Firefox and IE wait until you release the mouse before resizing. At any rate, I hope you find it useful. Let me know in the comments if you have a better way of handing this situation.

If the title means nothing to you, then you can safely skip this entry.

It took me a relatively long time to find this information, so here's a simple summary of my iPhone upgrade experience. I have a first generation 8G iPhone, running OS 1.1.4, which I had unlocked using the ZiPhone application. I wanted to upgrade to iPhone OS 2.0.1, but was concerned that there might be pitfalls, unknowns and errors since I was not starting with a stock iPhone.

Thankfully, after carefully following the directions, upgrading to OS 2.0.1 using Pwnage 2.0.2 worked without error. I'm once again enjoying the latest iPhone software on T-Mobile USA.

A few days ago I wrote about Gazelle, the service that buys your used gadgets from you, and thus avoiding the hassle of Craigslist. I have a gently used Nokia 6120 classic mobile phone that I'm not using anymore, so I decided to give Gazelle a shot.

There are some quality free fonts out there, but one of my favorites is Ugly Qua. It has percolated onto most of the free font sites, but I finally did some digging around last night and found the original source as part of a pirate-themed set.

It turns out the creator — Manfred Klein — is quite the prolific font designer. You could literally spend days digging through all the fonts he created over the years. I'm not really into the Pi fonts, but his text, display, and historical fonts are of impressive scope and quality, especially given the price (free!).

Some other great free type foundries are Larabie, exljbris, and Font Garden.

Craigslist is fantastic -- I've used it to buy and sell all kinds of stuff. But why won't they let me search for things in a reasonable way, and beyond my local area? Say (just for example) that I want to buy a BMW K75S motorcycle. I might be willing to go from the SF bay area to Sacramento to get a good deal on a nice used bike. But Craigslist does not let me expand my search beyond the local area -- I have to search multiple times. Worse, searching for "K75" produces different results from a search for "K75S".

Searching Craigslist is so bad, that a whole industry has popped up to fix it:

• http://craigshelper.com
• http://crazedlist.org
• http://www.craigspal.com
• http://www.craigslistcompanion.com
• http://www.craigslist-search.com
• http://www.craigslittlebuddy.com
• http://www.motiont.com/craigslistreader.aspx

I have a suggestion for craigslist: fix the problem. Clearly your users are trying to tell you something.

Conventional wisdom asserts that being in the Google database is a good thing, and having a high Page Rank (i.e. showing up as close to the top of the search results as possible) is also a good thing. Whole companies and untold millions of person-hours are spent "optimizing" web pages for Google.

But the value is a two-way street. Google provides free marketing to your pages, but your pages also add value to Google. Without its perception as comprehensive source, Google loses its shine. What if web sites had to opt-in to get their pages indexed? That would make search engines like Google look a lot different. Of course that's a meaningless hypothetical. But here's a more realistic one.

What if I created a bunch of extremely valuable content on the web, but then forbade Google from indexing it? A license to access and republish my content would include the clause that they could not pass it onto Google. Other search engines like Yahoo and Live would have access to it. But people searching Google wouldn't see it. Since the content is so valuable, people would eventually find out about it. And they'd either start searching both places, or they might be swayed enough by this deficiency in Google to switch search engines.

Of course I'd be happy to license my content to Google. For a fee. How about a 50% revenue share on all advertising on any search results page that includes a link to my content? Large established knowledge sites out there like Wikipedia or Yahoo! Answers could do this. I wonder why they don't? Is there any legal precedence that could enforce such a targeted content embargo?

This issue becomes even more important as Google gradually blurs (crosses?) the line from providing utility to providing content.

An implementation of the new Yahoo Boss search engine API, this app scans the top 50 results and comes back with an answer to a who, what or when question. It's pretty funny when it's wrong, but it also gets a fair share of questions right. Not bad for quickly thrown together demo app.

From a design perspective, I love the simplicity yet underlying power. Ask it any question and have a reasonable chance of getting a good (or at least entertaining) answer.

This is a really well done farce of the supe-rhero/super-villain genre, done as a musical. Much better than Firefly, IMHO, but then I really hated the River Tam psycho-genius sub-plot.

I finally became an American citizen today, after several decades of living in the United States. I am very much looking forward to November, when I get to do something I have never in my life been able to do: vote.

It seemed appropriate today to revisit a speech -- Lincoln's "Gettysburg Address," which is included below. The speech is so short and so famous that it has crossed over into cliché -- certainly for American school children. I can remember classmates memorizing it without even really listening to their own the words. To me, it's impossible to read this speech -- and I mean really read it -- without both being overcome by both the genius of Lincoln and the crass stupidity of George W. Bush.

Four score and seven years ago our fathers brought forth on this continent a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal.

Now we are engaged in a great civil war, testing whether that nation, or any nation, so conceived and so dedicated, can long endure. We are met on a great battle-field of that war. We have come to dedicate a portion of that field, as a final resting place for those who here gave their lives that that nation might live. It is altogether fitting and proper that we should do this.

But, in a larger sense, we can not dedicate--we can not consecrate--we can not hallow--this ground. The brave men, living and dead, who struggled here, have consecrated it, far above our poor power to add or detract. The world will little note, nor long remember what we say here, but it can never forget what they did here. It is for us the living, rather, to be dedicated here to the unfinished work which they who fought here have thus far so nobly advanced. It is rather for us to be here dedicated to the great task remaining before us--that from these honored dead we take increased devotion to that cause for which they gave the last full measure of devotion--that we here highly resolve that these dead shall not have died in vain--that this nation, under God, shall have a new birth of freedom--and that government of the people, by the people, for the people, shall not perish from the earth.

China is trying to present a superficially positive image during these Olympics. They are closing factories and removing vehicles from the roads to clean the air. But China's business as usual is far from positive; It's positively gruesome.

I've watched this China fur video once, and that's all I can take. The image of a just-skinned-alive dog looking at the camera and painfully blinking in his last moments of life is forever burned into my brain.

In addition to the torture, China deceives consumers by falsely labeling the fur as raccoon some other more marketable animal. Dog fur just isn't as a appealing in most cultures. Or even worse, they sometimes label it as fake fur.

While I support the athletes and the concept of the Olympic spirit, I'm afraid the host country doesn't really live up to these ideals. The Economist agrees. So I'm not watching. And I'm not buying from any of the Olympic sponsors either for the duration of the games.

With David promoting rampant consumerism over at Rated Best, (kidding! well, sort of...), I thought I'd link to an interesting new service that aims to take the pain out of selling or recycling your older gadgets. Gazelle recently launched, and they have an easy to use interface to get a quick quote, and then sell to them your used gear.

I have replaced my Nokia 6120 Classic with a first-generation iPhone -- so I'll give the system a test and report back. At the moment, they say they will pay me about $100 for my old phone -- not a horrible deal at all. Leave a comment if you have used their service -- I'm interested in how it worked.

One of the fun consequences of the digital age is rethinking the term "Public Record." A long time ago I suppose public records were only really public in name. If you wanted to find out what your neighbor paid for her house, you had to go down to the county tax assessor office, and look up the records. Today I just look on Zillow. If I wanted to find out if my neighbors were Republicans or Democrats or Communists or whatever, I might have to actually talk to them a bit. Now I can just search in Fundrace.

Yesterday I stumbled across the most interesting one yet: Criminal Searches. A few of my friends showed up in that database, though (mostly) for traffic tickets. Creative searches turn can turn up celebrities like Senator Larry Craig and his infamous bathroom conviction. The data is not complete, however -- there's nothing that I could find on Randy "Duke" Cunningham.

The Police were my favorite band in high school.  I saw them twice in the '80s, both times from far reaches of cavernous stadiums, because there's no way I could have afforded the rich kid seats.

Twenty-five years later, when they came through the Bay Area on their reunion tour, my wife and I splurged.   As established Yuppies, we could now afford the rich kid seats.  The concert was an exorbitant, decadent delight.  We sat a few rows back from Sting, and had enough lunch money left over for beers.

Still, the excess of it all made me feel uneasy.  I'd never spent so much on two hours of entertainment, and didn't think I was the type to do so.  Humble beginnings, and all that.

To assuage my guilt, my wife and I came up with a system that lets us temper our consumptive ways, without having to renounce the pleasure altogether.  It also encourages the positive habit of cooking at home.

A sticky note on the fridge lists the next decadent pleasures we want but don't need, and the cost of each.  Every night we cook at home, we draw a tick mark beside the next un-purchased toy.  Each tick is worth $20, which is about how much we save on average by not going out.

Once we've earned enough ticks to pay for the gadget, we get to buy it, guilt free.  The gadget is essentially monetarily free too, because the money we pay is money we didn't spend at restaurants.  It's even better than free because cooking at home is healthier and yummier anyway.

Later, we tweaked the system to have it pay off our parking tickets, which happen to be part of the cost of living in San Francisco.   This greatly lessens the sting of the ticket: instead of being a complete waste of forty dollars, it becomes the trivial penance of putting off the next fun purchase by a couple more days.  (As the photo above shows, the system also covers moving violations.)

Do try this at home, folks, and please, always remember our two mottos:

1. "Happiness Through Gadgetry."
2. "You don't have to put on a red light."