Michael's Headquarters

Using Charles Proxy with Google Chrome on Mac OS X

I’ve been using Charles Proxy to test on a development environment before pushing new front-end code to the environment itself. However, I wasn’t able to get it to work in Google Chrome “out of the box”. It turns out that Google Chrome uses the operating system’s proxy settings, so you actually have to alter the built-in Mac OS X proxy settings for it to work. 

First, check to see what port # Charles Proxy is using: Proxy > Proxy Settings menu (this defaults to “8888”)

Next, configure the Mac OS X proxy by going into System Preferences > Network > Advanced > Proxies. Put the host as “127.0.0.1” (your local machine) and the port number as whatever you found from Proxy Settings above. 

An a different note: now I know that Tumblr isn’t the best blogging engine for providing tutorials due to its handling of images. You have to link to an image from within the post-writing interface (i.e. no way to upload an image right there). Disappointing. 

Update: I forgot to mention that if you turn Charles Proxy off, you must disable the Mac OS X web proxy, too. Otherwise, no webpages will load because you’re routing everything to your local machine. So, that can be a hassle. As a result, I’ve started using Proxy Switchy (a Chrome plugin) to be able to modify Chrome’s settings itself, rather than tinkering with the Mac OS X settings. 

Update 2: I still occasionally have problems with Charles Proxy picking up the HTTP traffic when using Google Chrome on Mac OS X, even with the Proxy Switchy plugin. As of this writing I’m using Charles Proxy v. 3.6.4, so I’m kind of at a loss. I’ll definitely post something if I find a definitive solution to make it always work, rather than being a crapshoot.

Update 3: I think some of the problems I was having came from using Charles Proxy when trying to use VPN for work. Charles Proxy must be turned on before connecting to a VPN, otherwise it won’t see the traffic going over the VPN. After figuring out this proper order I haven’t had any issues for a month or so.

Internet Explorer 7 redraw fix with JavaScript

Twice now I’ve run across a problem with Internet Explorer 7 (and sometimes 8) having problems redrawing HTML when modifying the class on an element that contains several children. Usually I’m trying to swap a class to apply styles for a “grid view” of products or a “list view” of products. The simplest solution I’ve found is mentioned in the comments of an Ajaxian post. Here is the simple solution using jQuery (not that it matters; we had the selector already cached in my situation):

var productContainer = $('#product-container');
productContainer.css('display', 'none');
var productContainerTop = productContainer.offset().top;
productContainer.css('display', 'block'); //or whatever display type needs to be reset

You grab the element, hide it, access it’s offset (while hidden), then restore it. I’m guessing this forces IE7 to re-calculate the offset when the item is hidden, even though you store the value and never use it, then making it visible again causes it to redraw properly. A wild guess, but these few lines work nonetheless. 

Usability notes about Fifth Third’s signup forms

I was recently helping my mother sign up for online banking with Fifth Third bank. Unfortunately, I didn’t get any screenshots of the experience (I didn’t want to interrupt her progress to take any), but I did make some mental notes of some usability issues:

1. The “secret questions” offered for password recovery were almost all ”favorite” questions (i.e. “what is your favorite dessert?”). Peoples favorites change over time—these aren’t reliable questions for recovering passwords. An alternative would be to let the user put in her own question and provide an answer.
2. One of the “secret questions” was “What was your favorite band in college?”. After reading this question my mom said sarcastically “Thank you, I didn’t go to college”. This mixes demographic information (business/domain knowledge) with the interface. The user doesn’t want to read about your assumptions about her background. Even though I don’t like the “favorite” questions overall, this one could easily be fixed by simply asking “What is your favorite band?”, without the assumption that the user went to college.

There were several other glaring issues that I wish I had been able to record but, as I said, I didn’t want it to turn into a usability session. Rather, I was just helping my mom get her task completed. Ironically, that’s what the website itself should have been doing. 

Mapping a domain and “www” subdomain to tumblr blog

Follow the instructions for a custom domain on tumblr, but make sure you leave off the “www” if you want your tumblelog to be your main site. I pointed the A record for “michaelehead.com” to the tumblr IP address for “michaelehead.com” (the @ address) and “www.michaelehead.com” so that both would direct users here. 

A farewell to re-inventing the blog

I’m a web developer. As a web developer, I like to tinker with technology, try things out for myself, and try to build things myself. Well, as far as blogs go, I’ve decided to let tumblr handle all of that for me. I’m letting go of the reins completely—not even dealing with Wordpress. Let the folks at tumblr deal with integration with Twitter, or Facebook, or Google+, or Amazon-, or whatever the next big thing is. I’m going to focus on providing the best content I can, rather than focusing on how my database table for Posts relates to the Comments table.