Nick Burwell Designs

Web Browser UI differences: refresh / cancel buttons

2010-09-01T23:20:00.000-07:00

A few weeks ago I wrote about the differences in the 4 major browsers' search / address bar. As promised, this is part 2 and highlights the subtle and not so subtle differences in how Firefox, Chrome, Safari and Internet Explorer handle the refresh and cancel actions.

IE 8

Refresh and cancel are on the right of the address

Next to each other as separate buttons
Always available to press (no "go" button)

Firefox 3.6

Refresh and cancel are on the right of the address
Next to each other as separate buttons

Always available to press (no "go" button)

Firefox 3.6 loading

Spinner in the tab, now refresh and cancel are both available

Chrome 5

Single refresh button on the left of the address
A "go" button exists

Chrome 5 loading

Spinner in tab, now the "go" is a cancel button

I do not use the "go" button ever, instead rely more on the reload and back/forward buttons, therefore I find it inconvenient that the "cancel" is so far away and out of place compared to those buttons.

Safari 5

Single refresh button inside the address bar, small target region
No "go" button or cancel

Safari 5 loading

Spinner and text in address bar, entire region is a cancel button.
Cancel in same place as the refresh, easy to click now as opposed to the initial refresh button

Summary

Chrome's layout is too spread out and the least user-friendly in these regards. Safari gets the loading part right (clear indication of loading, nice call to action to cancel and try again). Overall, Safari is the only one to optimize for the "cancel and retry" action, which I find myself doing a lot when a site is struggling to load due to Internet connectivity issues or DNS hiccups.. however the initial refresh button is a bit small.

MLB up close

2010-08-29T23:13:00.000-07:00

A recent trip to Dodgers stadium. We got decent seats at field level, but the best views by far were in the 9th inning when we stood in the walkway behind home page. Broxton came in to save the game after the Rockies threatened to tie it late.

It's the little things: Part 2

2010-08-25T22:40:00.000-07:00

A few weeks ago I wrote about how Apple had made a subtle change to the reception bar graphics on the latest iPhone software update. Today I discovered something in Snow Leopard's finder app that is even more subtle.

In Finder, the icons next to the Shared devices are detailed down to the black bevel around the screen! I just upgraded from a 2008 MacBook Pro that was all silver, to a shiny new aluminum MacBook Pro with the black screen. With both devices connected, the icons were slightly different when viewing from my wife's computer. (Note: OS X 10.5 does not support this, so yet another reason to upgrade to Snow Leopard...)

Given how many bugs and missing features plague finder (why can't you cut and paste a file?), it's a little depressing to think how much time may have gone into making these little icons work correctly. Apparently the Bonjour protocol is rich enough to pass detailed information not only about the type of device that is being shared (computer), but also the kind of computer (laptop), as well as the line (macbook pro) and even the generation of macbook pro (aluminum unibody with black bevel around screen).

Mozilla Firefox exception when doing ajax call

2010-08-19T22:00:00.000-07:00

If you have ever got the following exception in Firefox
uncaught exception: [Exception... "Component returned failure code: 0x80040111 (NS_ERROR_NOT_AVAILABLE) [nsIXMLHttpRequest.status]" nsresult: "0x80040111 (NS_ERROR_NOT_AVAILABLE)" location: "JS frame :: http://localhost:3000/ajax2.html :: anonymous :: line 21" data: no]

or if you get this in Chrome:
Uncaught Error: INVALID_STATE_ERR: DOM Exception 11

Then you might be running into a bug where accessing "status" on the complete handler when the ajax request timed out causes a browser exception. It is easy to reproduce using jQuery 1.3.2 (and 1.4.2) if you simply alert the xhr status after a timeout error.

Javascript code:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript">
</script>

<script type="text/javascript">
  jQuery.ajax( {
     url: "/sessions/new",
     timeout: 1,
     complete: function( xhr ) { alert( xhr.status ); }
  } );
</script>

I could not find a jQuery ticket or any bug reports. If you know of one, please post it in the comments!

The workaround is to simply check the text status provided by jQuery before trying to access xhr.status (and perhaps this is the only supported way to safely check the ajax status):

complete: function( xhr, text_status )
{
  if ( text_status == 'timeout' )
  {
    alert( 'TIMED OUT' );
  }
  else
  {
    alert( xhr.status );
  }
}

Browser quirks: invalid CSS color syntax

2010-08-18T22:00:00.000-07:00

I had a typo in CSS, which led me to discover that the following css works in Chrome but not Firefox:

.my_text {
  color: #white;
}
<span class="my_text">Should be white text?</span>

Obviously the valid CSS would be either color: white or color: #ffffff but Chrome allows a mixture which may be dangerous if you are developing in Chrome and don't realize you have an invalid CSS style.

Note: Using Chrome 5.0 for Mac and Firefox 3.6 for Mac.

Photo: Too Close For Comfort

2010-08-17T07:30:00.000-07:00

Air Show at Pt. Mugu Air Force Base
Ventura County, California

USAF Thunderbirds showing off.
Yes, they really did fly that close, speeding in from opposite directions, sometimes flying upside down!

Rails FormHelper with model relationships and has_many route

2010-08-16T22:00:00.000-07:00

Using Rails 2.3.5

To do things RESTfully in Rails and you have a model relationship like:

class Post < ActiveRecord::Base
  has_many :comments
end

You can set up your routes like this:

map.resources :post, :has_many => :comments

This will generate URLs like:

/posts/2/comments      [ GET (index), PUT (new), UPDATE (edit)]
/posts/2/comments/10   [ GET (show)]

Then to construct your form for creating or editing comments, you can do this with form_for:

form_for [@post, @comment] do |f|
  ...
end

Then in your CommentsController::update action, you will automatically have params[:post_id] so that comments are associated with the correct post

By the way, if you need to create those restful URLs by hand using url_for, this is how you would specify the create one:

{ :controller => :comments,
  :action => :create,
  :post_id => @post.id }

Notice that the controller is 'comments', even though the URL created with start with /posts

see form_for (ActionView::Helpers::FormHelper) - APIdock

Sharing files as guest on Mac OS X 10.5/10.6

2010-08-11T01:10:00.000-07:00

Tired of getting the "not connected" message when you click on a Mac computer on the "Shared" sidebar of finder? I was.. and couldn't figure out how I had lost guest access to my public folders when using other Macs on my LAN.

You don't configure that on the Sharing screen in System Preferences. Instead it is as simple as checking "allow guests to connect to shared folders" on the Accounts > Guest Account screen. I had somehow managed to turn that off (or maybe it's off by default?). Now I can have other computers on my local network access my public folder and have a drop-box to put files into (with write access only). Phew, my life is in order again.

It's the little things...

2010-07-30T19:43:00.000-07:00

So Apple recently released an update to the iPhone 4.0 software (4.0.1), which came on the heels of the whole antenna fiasco with the iPhone 4, and I was pretty unimpressed by the 500+ megabytes of code that I just downloaded and put on my phone.

First of all, the only feature/bug fix listed in the update was "improves the formula to determine how many bars of signal strength to display." (Note that the real signal strength is still the same. Note that the hardware design that allows bad signal has not been fixed.) But wait, they also updated the signal bar graphics so that the smallest bars are now taller.

One bandaid on top of another.

Apple genius 1: "AT&T service is awful. We have made it worse by allowing a user to drop the already weak signal just by holding it naturally."
Apple genius 2: "I have an idea. Let's update the formula so that it rarely shows 0 or 1 bar and claim it is more accurate."
Apple genius 3: "Great! But we know AT&T is so bad users will still see just 1 bar pretty often. Let's tweak the graphics so it looks bigger! They will psychologically feel better because they have been trained for the last decade that a bar that is almost as high as the 3rd or 4th bar means you have really good signal."
Apple geniuses 1 & 2: "Yes.. excellent."

Now, personally I have not had any problems with signal quality or dropped calls, and am happy with my phone and AT&T's service.. so I haven't really worried about this whole issue, but I find it fascinating that Apple's response to all the problems with the "death grip" is to give everyone a free case and then "fix" the signal strength formula so that you see 0 or 1 bar less often. But that won't fix people's problems that can't make a phone call. And I think it's a really cheap trick to update the signal bar graphics. For one I feel that they are attempting to dupe the general population that don't notice small details and subtle UI design changes. But also, I don't like that the shape of the signal bars now don't match other phones. It's not the neat, symmetrical triangle of bars that I am used to and grown up with on my phones for years. My eyes keep following the bars down and to the left, trying to see the rest of the graphic, but it just abruptly stops!

I'm sure Jobs and the Apple team thought they were being clever and just helping out the users see that last tiny bar on their high resolution displays. But I would rather see them focus their efforts on pushing AT&T to get more bars in more places, and without any more changes to the formula.

Photography: Nature Up Close

2010-07-25T23:11:00.000-07:00

I recently took a trip to the Santa Barbara Botanical Gardens. The bees that swarmed the various flowers were fascinating to watch up close, as was the lizard doing push-ups on the rock.

iPhone 4 Tips and Tricks

2010-06-25T21:00:00.000-07:00

Apple iPhone 4 - Tips and Tricks (official Apple site)

The above page has some neat tricks; some old and some new. My favorite that is either new or I didn't know about:

quickly scroll to top by tapping the status bar.

In a text message when you want to call someone, the 'call back' button is way at the top which I always found ridiculous. At least now you can get to it in an instant! (I think this feature was only in Safari before and now its more universal, because I do remember trying this before in the text message app and being frustrated.)

Tired of running out of memory constantly...

2010-06-18T07:00:00.000-07:00

Does anyone else experience this?

I have 4GB of memory, but I constantly will have ~1GB of inactive memory, which Apple and bloggers and fanboys claim is part of a great Mac OS X feature and will be reclaimed if the system is in need of memory. Well, if I am out of free memory but have 25% inactive memory and try to open Word 2008 for Mac, it takes 5 to 10 minutes to open because the system gives it no memory!

I know that with the development tools, I can type "purge" at the command line...but how do I get my Mac to automatically give back inactive memory when I really need it!?

Real life LOLcat

2010-06-17T23:42:00.000-07:00

My friend's cat, with his friend's kid (or niece?). So great I had to share!

iPhone 4 has been preordered!

2010-06-15T23:02:00.000-07:00

I have jumped on the Apple bandwagon and succumbed to my first ever sign-up-for-a-preorder-on-the-first-day for a new product. I currently have an iPhone 3G, which I love! But I waited until it was out a few months, plus the original iPhone had already been out in the wild for over a year.

The phone will be at the local Apple store on June 24th! The signup process was very smooth. I was impressed with how easy it was to check upgrade eligibility, view my current contract plan with ATT, and even change my data or text plan all from within Apple's online store. One thing I did notice that concerns me: I changed my data plan from unlimited to the 200MB/mo rate, and yet in my confirmation email it said I had an unlimited data plan. We will see how that shakes down when I pick up the phone and sign a new contract with the "iPhone specialist."

I read of many report of Apple and/or ATT's site being down and not being able to order a phone. I did not run into any problems at all, did anyone else?

Rails url_for differences between controller and view/helper versions

2010-06-15T22:00:00.000-07:00

In Rails, beware that url_for has slightly different default behavior depending on whether you call it from a template or a controller.When url_for is called in a template (ActionView or Helper):

urls are escaped by default (ampersands become &)
returns relative path by default, unless a host is specified


> url_for( { :controller =>  "test",
             :action => "me",
             :foo => 1, 
             :bar => 2 } )
/test/me?foo=1&amp;bar=2

When url_for is called in a controller (ActionController):

urls are not escaped by default
full path is returned unless only_path is specified


> url_for( { :controller =>  "test",
             :action => "me",
             :foo => 1, 
             :bar => 2 } )
http://example.com/test/me?foo=1&bar=2

There are times in a view when you want the unescaped version (such as putting into a Javascript variable, or generating a plain text file). Simply pass escape => false:


> url_for( { :controller =>  "test",
             :action => "me",
             :foo => 1, 
             :bar => 2,
             :escape => false } )
http://example.com/test/me?foo=1&bar=2

Web Browser UI differences: the address bar

2010-06-12T22:24:00.000-07:00

As a web developer, I am used to developing and testing in multiple web browsers. If not part of my job, I honestly do not know which browser I would use on a daily basis. I find myself switching back and forth between Firefox and Chrome, with the occasional use of Safari because it's "native" and supposedly the fastest on the Mac, and now that Gmail finally supports hierarchical labels I don't need to rely on browser extensions for that, etc etc. But I digress.

What I have been surprised by is how different all of the browsers are with the most basic of functions. In this part 1 of a multi-part series, I would like to focus on the address bar. Each of the three major browsers on a Mac behave drastically differently! I find it extremely confusing whenever I switch between browsers and quickly want to go to a specific site.

The simple test:
type "reader" in the address bar and hit <enter>.

The results:
Chrome 5
  Google search for "reader" - Google Reader is the top result

Firefox 3.6
  Goes directly to google.com/reader - does not show a google search, it takes you to the best result [this may be based on my viewing history]
  Note: this was the result I wanted in this case, and in general it is very accurate, but sometimes it can take you to pages you don't want to be at, in which case you need to use the google search toolbar in the top right

Safari 4, 5
  Autocompletes what you type to add ".com", and goes to http://www.reader.com

Internet Explorer 8

Google search for "reader" as well

Summary:
For me, Firefox's behavior is the best, because in the past couple years that is the browser I have used the most so it's what I have come to expect. I like how it seems to know what I am thinking in regards to what site to go to. It also saves typing and saves extra clicks by going directly to the site. The second best option in my opinion is to do a Google search (Chrome, IE8), but the extra click annoys me when the top hit was where I wanted to go. When wanting to go to sites with a slightly longer URL, Safari's behavior is the worst because it forces you to either fully type out the URL, or switch over to the google search box. And since Chrome doesn't even have a search box, I have gotten used to not using it on other browsers!

Stay tuned for part 2: navigation usability. (Hint: the "go", "refresh", and "cancel" buttons are all over the place, and in some browsers not user-friendly at all!)

Some deals just aren't worth the trouble

2010-06-12T17:34:00.000-07:00

I love free stuff. And I will usually go out of my way to get something for free even if I don't need it. But even this was just too much for me:

At first glance, hey it's a free movie rental. But wait, first you have to join their fan page on Facebook, so then all your friends know you are a sellout and will publish anything on your profile to get free stuff. That alone was about to stop me, but not quite. Then, I remembered, "Hey redbox is only a dollar, this may not be worth it." But then the final straw:

The free rental is only good on exactly a specific day, for just 1 day, and it is a Monday night later this month! You can't even choose when to use it? And if you can't watch that Monday night, then you end up paying for a second night and there goes your free rental. And did I mention that's just to save a buck?

Deleted.

Mac Applications worth checking out

2010-05-21T07:00:00.000-07:00

Links to check out:

Quickly edit photos (especially for blogs, powerpoints, landing pages) to add perspective, shadows, and reflections without the hassle of Photoshop:
http://www.acqualia.com/picturesque/ [Mac]

Intuitive calculator / notepad / spreadsheet combination app that is way better than the native Calculator app
http://www.acqualia.com/soulver/ [Mac]

Clone your hard drive for backup/recovery - free and paid options
http://www.shirt-pocket.com/SuperDuper/SuperDuperDescription.html [Mac]

Save and sync files in S3 (up to 2GB free!) - great interface, easy to use, highly recommended
http://www.dropbox.com/install [Mac, Windows]

Chase Bank Procedure Failure

2010-05-20T07:00:00.000-07:00

The other day I received a new ATM debit card in the mail from my bank. The card came with a sticker saying to either call the 800 number or simply use the card at a bank ATM with the existing PIN # to activate it. Having recently called an activation number for my credit card and getting transferred to a live agent that tried to upsell me on several "features", I opted for the ATM method of activation.

So the next time I'm at the ATM, I enter my 4 digit PIN using my new card--the same PIN I have used for years. The system says the PIN was entered incorrectly. (Thinking for a moment I had used the wrong ATM card, I tried my PIN number for my joint checking/savings ATM card). Also incorrect. I was afraid of getting locked out, but I tried the original PIN once more in case I just fat-fingered it the first time. No luck. So I went inside the bank.

Once inside I explained the situation and asked if they had changed the PIN on the new card. The bank says no, and assumes that I have forgotten my PIN. I was sat down at the desk of a helpful woman who proceeded to read through what services I was using and try to push CDs and mutual funds on me. No thank you, please just fix my PIN number. So I enter a PIN into the keypad. I tried using my existing PIN. The banker told me it was rejected because it was either a repeating pattern or a year starting with 19 or 20. Ah, interesting. Not rejected because it was a previous PIN on my account. But funny, I've had that PIN for years and never been told that. And why couldn't the ATM machine give me a helpful message like, "Hey we changed our requirements, and you must reset your PIN inside the bank". The root of the problem: my old card was a WAMU debit card. Now I am holding a Chase debit card. Same account number, but new bank (thanks to the merge). So I enter a new PIN that matches their stricter requirements and go back outside to the ATM.

I enter the new PIN, and a new screen with red letters comes up saying to take your card to a bank representative inside immediately. Great. So I go back inside and explain the error. Someone else takes my card and says they will look into it. Moments later a third person I have not seen yet comes by the chair I am sitting in (sporting an annoyed look I am sure). "May I help you?". "I'm already being helped, thanks". "Oh, are you the ATM card guy?". Yup, yup that's me.

I get called up to the counter, and am told that my card has now been locked out for too many wrong attempts. They ask what I was doing, I explain that I was trying to activate my card and the PIN wasn't working, so I had it reset. Apparently they can not reset a card that has been locked from the branch, so they call someone.. saying how this guy forgot his PIN and locked his card and it's not activated either so can you please activate and reset the card. They do not care that I knew my old PIN. I attempt to tell them about my sleuthing, but they don't catch on to the fact that their bank system was rejecting a PIN I had been using for years, with no warning or help since my PIN was apparently in a rare subset of numbers that met WAMU's requirements but failed Chase's.

Do they let everyone that was a WAMU customer with a PIN similar to mine fall into this trap? Are the bankers not warned or trained that this possibility exists? The letter I got with the new card made no mention of WAMU customers possibly having invalid PINs. I tried to bring it up to multiple people at the bank but they were just concerned with how stupid I was for both forgetting my PIN and locking myself out by trying multiple times. I take this as a huge procedural failure.

Then to make the story better, they told me that even corporate headquarters could not reset the card because you can not activate a locked card, and you can not unlock an unactivated card. Catch-22. So I was told to wait 24 hours for the lock to be automatically removed, then call the stupid 800 activation hotline to activate the card.

Traffic lights in Michigan: genius

2010-05-18T22:23:00.000-07:00

A few years ago I blogged about how ridiculous most red left turn signals are. I still get frustrated every time I sit at a red turn light when I have perfect visibility and there are no cars coming my direction. I was just in Michigan this past weekend and they have exactly the system I have been wanting implemented in California (and elsewhere). At any intersection that has a dedicated turn signal, it goes through the following cycles:

Solid red, for when the other direction has a green light
Green turn arrow, for when oncoming traffic is stopped and you can turn freely
Flashing red, for when oncoming traffic is green. You must come to a stop, but if the road is clear you can then make a left turn.

The third option is safe and efficient. I definitely utilized it while driving around Grand Rapids, Michigan. I also like how they clearly label what traffic light is for cars turning left. Clear, large text which gets the job done and is not ambiguous.

Debugging Flash on New Google Chrome

2010-05-18T09:14:00.000-07:00

From Bit-101 blog

Debugging Flash on New Google Chrome: "If you’ve installed the latest version of Google Chrome, and you are having a problem debugging your Flash in it, there's a reason...

It seem's the built-in Flash player in Chrome will get used by default, despite whatever other version you might have installed. It's always going to go back to its own original version. To change this, type the following in the URL field:

about:plugins

This will give you a list of plugins. Somewhere in there, you'll see "Shockwave Flash" with the version, location, etc. Underneath that is a "Disable" link. Go ahead and click it. You’re not disabling Flash all together, just the built-in version. Now, when you hit a SWF on a web page, it’ll go to the latest system-wide version you installed, i.e. the debug player.

Ruby on Rails - ActiveSupport JSON decode odd behavior

2010-05-04T22:05:00.000-07:00

Be aware that ActiveSupport JSON decoder returns false when given an empty string:

>> ActiveSupport::JSON::decode( "" )
=> false
>> ActiveSupport::JSON::decode( "false" )
=> false

Uh... really?

This is using Rails 2.3.4.

Ext ComboBox - type ahead control with empty result set

2010-03-17T07:00:00.000-07:00

When wiring up an Ext ComboBox as an ajax typeahead control, it was not obvious to me how to get the list to display a message when no results are returned by the server (the default behavior is to just roll up the list and give no user feedback).

The trick is to use the following in the config options:
listEmptyText
http://www.extjs.com/deploy/dev/docs/?class=Ext.form.ComboBox

Don't be confused by "emptyText" or "invalidText" properties!

Fixing MySQL error when trying to drop a database

2010-03-16T22:30:00.000-07:00

If you ever get the following error when trying to drop a table (or perhaps when running rake test in an Rails app):
Mysql::Error: Error dropping database (can't rmdir './app_test/', errno: 17): DROP DATABASE IF EXISTS `app_test`

Most likely your mysql server was killed or shutdown without properly cleaning up files. The error message is helpful, since it says it can not remove the directory "rr_test" (which is the name of my database table). The reason is because the directory is not empty.

1. Find the location of that table. For me on my Mac OS X 10.6 Snow Leopard, it was here:
/usr/local/mysql/data/app_test

2. View the file, and remove the file(s) - note the data directory is probably owned by root or a mysql group, so you will probably have to sudo to see or remove anything from it

> cd /usr/local/mysql
> sudo ls data/rr_test
> sudo rm data/rr_test/TEMP_FILE_THAT_DIDNT_GET_CLEANED_UP~

3. Confirm the directly is empty:

> sudo ls data/rr_test

4. Now try the command again and it should work!

mysql> drop database rr_test;

Origin of Microsoft Windows

2010-03-16T22:00:00.000-07:00

Fascinating article on the origin of Microsoft Windows:
http://technologizer.com/2010/03/08/the-secret-origin-of-windows/

And while we're on the subject, I read the following book last year which I really enjoyed. It is a biography on Steve Jobs and Apple. Obviously a longer time commitment than the above 3 page article, but well worth the read! Both companies share some humble beginnings and rough stretches, before taking their industries by storm.
iCon: Steve Jobs - The Greatest Second Act in the History of Business