The other side of the moon

Reducing checkboxes

2013-03-18T13:48:00.002-07:00

Alex Limi has an excellent post on the overuse of checkboxes in Firefox's preferences screen. It reminded me of something Nat mentioned during his talk with Miguel de Icaza back at Linux Bangalore 2003 about Gnome. They mentioned several UI idioms including checkboxes and disabled menu items, but the gist of it was, every time you give the user a decision to make, you're making their lives harder. As the domain expert for this product, it's your job to pick sane defaults and not bother the user with these choices.

We took this to heart on the Ayttm project. At the time ayttm probably had over 200 user modifiable configuration options in the preferences screen, and each plugin could add its own. It was way past the point of violating one of our primary design requirements, that it should be easy enough for Colin's mum to use. We had a bit of a dilemma though. While our target audience was definitely non technical, we had a significant number of geeky early adopters who really wanted the ability to modify everything.

Over the next few days we stripped out almost every configurable option from the Preferences screen, however, we left them all in the config file on disk. Any user that really wanted to modify the options could edit the config file in their favourite text editor and make the changes themselves. This made everyone happier. Our technical users were happy that they didn't have to click through too many screens to change all their options, and our non technical users had a preferences screen where the most they'd have to do was enter their account information, and the type of smileys they wanted.

The Gnome Human Interface Guidelines cover a lot about designing intuitive interfaces, so go read that.

Nexus 4 — First impressions

2013-02-01T09:41:00.000-08:00

Just got a Nexus 4. Started it up, and tried to sign in to my gmail account. I have two-factor auth set up for extra security, and you'd expect a google device to work well with google auth, but here's a list of bugs I've found within minutes of opening the package.

It first asks you to sign in to your gmail account. Type in your username and password.
It then tells you you need to sign in on the web to continue, so it opens the browser for you to sign in.
Focus is on the username field, but there's no keyboard available. You need to tap on the username field (which already has focus) to bring up the keyboard. This is counter-intuitive.
Type in your username and password and submit. It then takes you to the 2FA page (at least in my case) where you enter your security code.
Again, tap on the field to bring up the keyboard. This field is a numeric field, but the keyboard starts out in alphabetic mode. This is probably a bug with all mobile devices, but you'd think that something this new would have fixed it.
Type in the code, and now try to click on the checkbox that says "Remember this device". Except the keyboard goes away and you now end up clicking a link that explains what 2FA is.
Ok, cool, I just want to go back and hit submit... except there's no back button on this browser. There's no toolbar that normally pops up at the bottom of the browser. No, this is a special browser that does not allow you to navigate through the browser history. FAIL.
The only way forward is to shut down the phone and then start it up again. Except at this point you start from scratch, including selecting your language.

A few other things I've noticed...

The timezone by default appears to be UTC. You'd think that it'd localise this based on my location, which it knows and is configured to use.
If a transient alert message pops up, and you try to tap on it, you'll actually tap on the item below the message.
The icons are a bit too small for someone with normal sized fingers like me. It's easy to tap on the wrong item.
The position of the power button and volume control buttons means that when you press the power button with your thumb, your forefinger will inadvertently hit the volume control (or vice-versa). This happens because of Newton's third law of motion. Google/LG engineers should know this since it's a 300 year old basic law of motion.
You cannot move a widget from one screen to another by dragging it. You have to remove it from the old screen and then go through the process of adding and configuring it again for the new screen.
When you select punctuation on the keyboard, entering an apostrophe should switch back to alphabetic mode. It doesn't.
It just reboots at times.

Will post more as I use it.

A correlation between load time and usage

2012-12-11T23:03:00.000-08:00

We frequently see reports of website usage going up as load time goes down, or vice-versa. It seems logical. Users use a site much more if it's fast, and less if it's slow. However, consider the converse too. Is it possible that a site merely appears to be faster because users are using it more, and therefore have more of it cached? I've seen sites where the server-side cache-hit ratio is much higher when usage is high resulting in lower latency. At this point I haven't seen any data that can convince me one way or the other. Do you?

Startup Lessons: What should you optimise?

2012-10-25T14:48:00.000-07:00

In the early days, when you can't afford hardware, optimise for efficient code.

Sometimes this results in unreadable code or a language that not too many developers are familiar with. This is okay. You're trying to reduce the cost of hardware.

When you get large enough to hire other developers, the cost of hardware is no longer your largest expense. At this point, optimise for code readability.

This might mean writing slightly less efficient code or moving to a more popular language. That's okay. Developer efficiency is more important at this time.

iOS, Google WiFi and 2 factor auth -- clearly untested UX

2012-06-28T21:56:00.002-07:00

So after WebPerfDays today, a bunch of us ended up at a Pizza place in Mountain View. Naturally the first thing we all did was search for wifi in the area and try to get on to a network from our mobile devices.

Now Mountain View has Google Wifi, and it appears as if they now require you to sign in with your Gmail account, and that's where the problem comes in... for me at least. I have two factor auth turned on for my google accounts, which means that after I type in my username and password, I get to a second screen to enter my second authentication token. This token comes from an app on my iOS device... the same device I was trying to log in with.

I switched to the app to get the token number, but as soon as I did that, iOS decided that I didn't actually want to sign in to the wireless network, and disassociated itself from the Access Point (AP).

Once I'd got the number, I switched back to the settings app and it initiated login again, which means I had to enter my username and password again, and by the time I'd reached the token screen, the token had expired.

This is what the token screen looks like:

It was rather annoying.

It then hit me that I could copy the token to the clipboard, and then paste it into the token text field, which should shave a few seconds off and maybe let me through.

That worked, but it was still annoying.

We started talking about how this interface could be improved. There are a few reasons why this is a problem, and I think they're mostly Apple's fault.

When you connect to a wireless network, iOS attempts to connect to www.apple.com. If it gets redirected somewhere else, it assumes that it's being asked to authenticate, and displays whatever page it gets redirected to in a browser like window.

The problem is that if you do anything other than interact with the content in this window, iOS treats it exactly the same as hitting the "Cancel" button (top right of the screenshot), terminates the login and dissociates from the AP.

This means that you cannot switch to the Authenticator App (second app at the bottom of the screenshot) to get your token.

Can Apple fix this?

Yes, just don't cancel sign in unless I explicitly click cancel

Can Google fix this?

Maybe, if they could provide a link or something that would open the Authenticator app right from that page and let me pull the number out of it (I don't know enough about iOS to know if this is possible).

Do any Apple/Google engineers want to take this up?

Password reset over HTTP -- Part 3

2012-06-09T11:17:00.002-07:00

It's been a while since my last two posts on the topic. This time it's Groupon.

The password reset page is over HTTP:

The reset password email that you receive contains a link that looks like this:

http://groupon.com/users/password_reset/{token}?utm_source=password_reset \
    &utm_medium=email&sid={sid}&user={uid}&date={YYYYmmdd}

This link does a 301 to itself and then a 302 to a HTTPS version of itself.

The good thing is that your new password is sent over SSL. The bad thing is that your reset token is sent in clear text.

Update: This issue has been fixed by Groupon a couple of hours after reporting it.

Saving a PDF that doesn't allow saving form contents

2012-01-27T14:36:00.000-08:00

Several organisations, consulates, for example, have forms that need to be filled up in PDFs. They have very smart PDFs that change as you fill out the form and generate nice 2D bar codes at the end with all the information easily scannable when you submit the form. Most of these forms can be saved after you've filled them out, which is important if it's complex and you need to work on it for a few days, or if you need to put it on a pen drive and take it somewhere else to print.

Every now and then however, I've come across a PDF that won't allow you to save the form contents. This kinda sucks, so I decided to find a work around.

I first tried the print to PDF option, however Adobe won't let you print these particular PDFs to a PDF.

I tried Preview, but you can't fill out the form in Preview.

Then I tried actually printing it to a dummy printer. Note that this is for MacOSX.

The first step is to open your printer settings. If you don't have a printer create one:
Then open the Print Queue and pause it
Step 3, is to print your document to this printer.
Now look into /private/var/spool/cups for a file that was created within the last few minutes. It should start with d and have a lot of numbers after it. You'll need sudo:
```
sudo ls -l /private/var/spool/cups
```
copy this file somewhere convenient, and give it a .ps extension (it's a postscript file).
You can now open this file with Preview. I recommend opening it and reordering the pages, and then save it as a PDF.

That's it. There's a way to do it for windows too, but I don't have a windows box handy to document it. Linux is trivial.

Password reset over HTTP -- Part 2

2012-01-25T09:21:00.000-08:00

So it looks like I've been forgetting a lot of my passwords recently. After yesterday's issue with delicious submitting passwords in the clear, today I have a problem with livemocha.com.

As before, their login page is properly secured, but the password reset page is over HTTP:

This is the password reset page:

And this is the URL the passwords are POSTed to, in clear text:

They also include third party code on their page, in this case it's a flash object from userplane.com, google analytics, and some JavaScript from pbc.com (alias for paybycash.com)

I've gotten in touch with them via their online form. Let's hope they respond.

HTTPS for login but HTTP for password resets

2012-01-24T13:58:00.000-08:00

I recently tried to log in to my delicious.com account, and realised that I'd forgotten my password, so went through the reset password flow. This is what I saw...

The Sign-in page is over SSL, which is good:
The Forgot password page, where you enter your username is also over HTTPS. Not strictly required, but good all the same:
This sends you an email with a link to reset your password. This page is not over HTTPS:
And submitting this form also goes to a page that is not over HTTPS:

Now they put the login page on HTTPS, which shows that they want to protect the user's password from sniffing, but the password reset form, which also accepts the user's password, sends the password in clear text over HTTP. This isn't good. If you're going to protect passwords via SSL, do it everywhere. FWIW, the userid (but not the username) is also sent in this form.

Additionally, the password reset page contains JavaScript from google analytics and chartbeat. As I've written before, you shouldn't trust third party scripts. While you may choose to ignore this on most pages, pages that accept the user's credentials should be considered sacred. The user assumes that anything they enter on this page is available only to your servers. By including third party JavaScript, you're breaking that trust.

I've emailed violations@delicious.com with these details, and am awaiting a response.

Update 2012-01-25 21:08 UTC: As of this time, Delicious have fixed the core issue of the password reset page being on HTTP. Kudos to the team for acting quickly. The secondary issue of third party scripts on this page still remains, but that's a policy decision for them, and not me.

Using curl with IPv6 addresses

2011-12-10T22:58:00.001-08:00

Assuming you have a curl compiled with IPv6, if you wanted to hit a page using its IPv6 address rather than its hostname, you have to do it as follows:

curl "http://\[2600:xxx:yyy::zzz\]/page.html"

The square brackets are required to tell curl that it's an IPv6 address and not a host:port pair. The quotes are required to stop the shell from treating the square brackets as a glob. The backslash is required to stop curl from treating the square brackets as a range specification. The http:// is optional, but good form. This isn't required if you use a hostname or an IPv4 address.

Converting mp3s to wavs with mplayer

2011-12-04T21:59:00.001-08:00

Yesterday I had to convert a few mp3 files to wavs. I also needed to crop them a bit on both ends. This is how I did it:

mplayer -ss 0.5 -endpos 1:14 -ao pcm:file="newfile.wav" oldfile.mp3

This is how it works: -ss says how many seconds of the file to skip at the start. If you don't know the time, but the number of bytes instead, use -sb instead. Note that -ss only works with seconds, but accepts fractional seconds. -endpos says at what point to stop playing. This accepts time as hh:mm:ss.ms or in bytes. If you specify only one number, it's seconds. -ao is a special instruction that specifies a plugin, and everything following the plugin are plugin specific options. pcm is the format for wave files. You could use any format you like. mplayer -ao help will tell you which codecs are supported. I haven't figured out all the suboptions for pcm yet.

The Limits of Network Load Testing – Ephemeral Ports

2011-09-06T15:19:00.000-07:00

I've been trying to run load tests against a node.js web app that I'm working on. I've hacked up my app to log (every 5 seconds) the number of requests per second that it handles and the amount of memory that it uses. I saw some strange numbers. I should also mention that I was using ab to throw load at the server. Perhaps not the best load tester around, but it served my purpose for this particular test.

My app started out well, handling about 1500 requests per second, but then all of a sudden it would stop serving requests. With repeated runs, the point where it would stop was always around 16K connections... in fact, it always hovered around 16384, mostly staying below, but sometimes going above it a bit (eg: 16400).

Ephemeral Ports

To those of you familiar with TCP networking, you'll recognise that value as the IANA specified number of Ephemeral Ports (49152 to 65535).

I started to log the state of all TCP connections every second using the following shell script (split onto multiple lines for readability):

while true; do
   echo -n "$( date +%s ) ";
   netstat | \
      awk '$4~/\.http-alt/ { conn[$6]++ }
           END {
              for(c in conn) {
                 printf("%s: %d\t", c, conn[c]);
              } 
              printf("\n");
           }
      ';
   sleep 1;
done

This is the output it returned:

1315341300 TIME_WAIT: 209	ESTABLISHED: 100	
1315341301 FIN_WAIT_1: 4	FIN_WAIT_2: 4	TIME_WAIT: 1892	ESTABLISHED: 92	
1315341302 FIN_WAIT_1: 1	FIN_WAIT_2: 2	TIME_WAIT: 3725	ESTABLISHED: 97	
1315341303 FIN_WAIT_2: 2	TIME_WAIT: 5426	ESTABLISHED: 97	
1315341304 FIN_WAIT_1: 1	FIN_WAIT_2: 5	TIME_WAIT: 7017	ESTABLISHED: 94	
1315341305 TIME_WAIT: 8722	ESTABLISHED: 100	
1315341306 FIN_WAIT_1: 2	TIME_WAIT: 10459	ESTABLISHED: 98	
1315341308 FIN_WAIT_1: 3	FIN_WAIT_2: 3	TIME_WAIT: 12246	ESTABLISHED: 94	
1315341309 FIN_WAIT_1: 7	TIME_WAIT: 14031	ESTABLISHED: 93	
1315341310 FIN_WAIT_1: 3	TIME_WAIT: 15937	ESTABLISHED: 97	
1315341311 TIME_WAIT: 16363	
1315341312 TIME_WAIT: 16363	
1315341314 TIME_WAIT: 16363	
1315341315 TIME_WAIT: 16363	
1315341316 TIME_WAIT: 16363	
1315341317 TIME_WAIT: 16363	
1315341318 TIME_WAIT: 16363	
1315341319 TIME_WAIT: 16363	
1315341321 TIME_WAIT: 16363	
1315341322 TIME_WAIT: 16363	
1315341323 TIME_WAIT: 16363	
1315341324 TIME_WAIT: 16363	
1315341325 TIME_WAIT: 16363	
1315341326 TIME_WAIT: 16363	
1315341328 TIME_WAIT: 16363	
1315341329 TIME_WAIT: 16363	
1315341330 TIME_WAIT: 16363	
1315341331 TIME_WAIT: 14321	
1315341332 TIME_WAIT: 12641	
1315341333 TIME_WAIT: 11024	
1315341334 TIME_WAIT: 9621	
1315341336 TIME_WAIT: 7516	
1315341337 TIME_WAIT: 5920	
1315341338 TIME_WAIT: 4227	
1315341339 TIME_WAIT: 2693	
1315341340 TIME_WAIT: 1108	
1315341341 TIME_WAIT: 23

There are a few things to note here.

I ran ab with concurrency set to 100, so the number of connections in the ESTABLISHED, and FIN_WAIT_{1,2} states should be about 100 for the most part
I was polling netstat once per second + the amount of time it took netstat to return, so you might notice missing seconds in between
Requests were being handled at over 1000 per second, so many of the connections would have gone from the SYN_SENT state to TIME_WAIT in less than 1 second.

It's pretty clear here that everything just stops once the number of connections reaches 16363, and my app's logs confirm that. ab ends up timing out somewhere near the end of this report (which should probably be the subject of a different blog post).

Now if we look closely, we notice that it takes 30 seconds from the first result we see to when the number of connections in the TIME_WAIT state start dropping below 16363

TIME_WAIT

A few points should be noted about the TIME_WAIT state.

Only the endpoint that sends the first FIN will end up in a TIME_WAIT state. I'll tell you later why this is important
A connection remains in the TIME_WAIT state for twice the connection's MSL (See RFC793)

So we now have a whole load of TCP connections in the TIME_WAIT state and the client (the load tester) has run out of ephemeral ports to keep running the test. This is independent of the load tester used, and how it handles its sockets (poll, select, multiple threads, multiple processes, whatever). This is a limit imposed by the Operating System in order to comply with the TCP spec, and in general make sure the internet doesn't break.

Now there are various ways to get around this limit. The simplest is to just use multiple boxes to run your performance test all simultaneously hitting your server. The more boxes you use, the more likely it is that your server will break down before your client hits the port limit. But what if you don't have access to so many boxes (in a world without EC2 for example), or it's too expensive, or you're not utilising the other resources (CPU/RAM/Network Interface) on your client boxes and would like to get a little more out of them?

You could program your load tester to use SO_REUSEADDR, which would allow it to reuse sockets that are in the TIME_WAIT state, but that could backfire if there's still data on the network.

MSL

Now remember that TIME_WAIT is twice the MSL. RFC793 recommends setting the MSL to 2 minutes, which would leave TIME_WAIT at 4 minutes. Luckily no current implementation uses this value. Linux has its TIME_WAIT length hardcoded to 60 seconds (implying a 30 second MSL), while BSD has set to 15 seconds (sysctl net.inet.tcp.msl) and tunable at run time.

To verify, I reran the test after setting the MSL to 5 seconds:

sudo sysctl -w net.inet.tcp.msl=5000

And these were the results:

1315344661 TIME_WAIT: 1451	ESTABLISHED: 100	
1315344662 FIN_WAIT_2: 5	TIME_WAIT: 3272	ESTABLISHED: 95	
1315344664 FIN_WAIT_1: 1	TIME_WAIT: 5010	ESTABLISHED: 99	
1315344665 TIME_WAIT: 6574	ESTABLISHED: 100	
1315344666 FIN_WAIT_1: 11	FIN_WAIT_2: 2	TIME_WAIT: 7908	ESTABLISHED: 87	
1315344667 TIME_WAIT: 9689	ESTABLISHED: 100	
1315344668 TIME_WAIT: 11155	ESTABLISHED: 100	
1315344669 FIN_WAIT_1: 3	TIME_WAIT: 12522	ESTABLISHED: 97	
1315344671 FIN_WAIT_2: 2	TIME_WAIT: 13655	ESTABLISHED: 98	
1315344672 FIN_WAIT_1: 4	FIN_WAIT_2: 12	TIME_WAIT: 13847	ESTABLISHED: 84	
1315344673 FIN_WAIT_1: 2	TIME_WAIT: 13218	ESTABLISHED: 98	
1315344674 FIN_WAIT_1: 2	TIME_WAIT: 13723	ESTABLISHED: 97	
1315344675 FIN_WAIT_1: 2	TIME_WAIT: 14441	ESTABLISHED: 98	
1315344677 FIN_WAIT_1: 4	FIN_WAIT_2: 6	TIME_WAIT: 13946	ESTABLISHED: 90	
1315344678 FIN_WAIT_1: 3	FIN_WAIT_2: 15	TIME_WAIT: 14670	ESTABLISHED: 82	
1315344679 FIN_WAIT_1: 2	TIME_WAIT: 15164	ESTABLISHED: 98	
1315344680 FIN_WAIT_1: 2	TIME_WAIT: 15062	ESTABLISHED: 98	
1315344681 TIME_WAIT: 15822	ESTABLISHED: 100	
1315344683 FIN_WAIT_1: 4	TIME_WAIT: 15855	ESTABLISHED: 82	
1315344684 FIN_WAIT_1: 15	TIME_WAIT: 15506	ESTABLISHED: 84	
1315344685 FIN_WAIT_2: 9	TIME_WAIT: 15928	ESTABLISHED: 91	
1315344687 FIN_WAIT_1: 4	TIME_WAIT: 15356	ESTABLISHED: 96	
1315344688 FIN_WAIT_1: 2	FIN_WAIT_2: 8	TIME_WAIT: 15490	ESTABLISHED: 90	
1315344689 FIN_WAIT_1: 1	TIME_WAIT: 15449	ESTABLISHED: 99	
1315344690 FIN_WAIT_1: 3	TIME_WAIT: 15801	ESTABLISHED: 97	
1315344692 FIN_WAIT_1: 1	TIME_WAIT: 15882	ESTABLISHED: 70	
1315344693 FIN_WAIT_1: 3	TIME_WAIT: 16106	ESTABLISHED: 56	
1315344694 FIN_WAIT_1: 3	TIME_WAIT: 15637	ESTABLISHED: 2	
1315344695 TIME_WAIT: 14166	
1315344697 TIME_WAIT: 12588	
1315344698 TIME_WAIT: 10454	
1315344699 TIME_WAIT: 8917	
1315344700 TIME_WAIT: 7441	
1315344701 TIME_WAIT: 5735	
1315344702 TIME_WAIT: 4119	
1315344703 TIME_WAIT: 1815	
1315344704 TIME_WAIT: 88

The test runs longer here because it actually gets to 50000 connections. We're doing about 1500 requests per second, so it would take just under 11 seconds to exhaust all 16384 ports, but since ports are reusable in 10 seconds, we would have reclaimed the first 3000 ports in this time and then just continue to use them.

Here's the catch though, you can only do this on BSD. Linux doesn't let you change the MSL. Also, DO NOT DO THIS IN PRODUCTION!

TIME_WAIT, FIN and HTTP keep-alive

Now I mentioned earlier that only the endpoint that sends the first FIN packet will enter the TIME_WAIT state. This is important because in production, you really do not want your server to end up with a lot of connections in the TIME_WAIT state. A malicious user could, for example, make a large number of HEAD requests to your server, and either wait for them to terminate, or specify Connection:close but leave the connection open for your server to close by sending the first FIN packet.

How do you deal with this?

CouchDB drivers for NodeJS

2011-07-14T12:12:00.000-07:00

I've been looking at writing some code in NodeJS, and wanted to use CouchDB as the data store (note, I don't have relational data). I've come across the following libraries, all coincidentally on github.

couch-client
cradle
noddycouch
node-couch
node-couchdb
node-couchdb-min

At this point I've only looked at the documentation, so I don't have a detailed idea of which I'd use. If you have your own favourites, please mention them in the comments.

couch-client

The documentation seems reasonably rich, and it has all the methods that I'd like to use. My only concern at this point is that it batches up writes. This may not be ideal for my particular use case, but it isn't a show stopper.

There are no installation/setup docs, so I assume I've got to clone the github repo to get it.

cradle

I've been impressed with cradle's docs so far, and it's also available through npm, which is a plus. It also distinguishes between creating a document with and without an id, which may be required in my use case.

Lastly, cradle mentions an SSL use case, which I think is important. The other libraries may also have SSL support, but they don't explicitly call it out.

noddycouch

No docs available, but example.js has code examples on how to use it.

node-couch

Again, no docs available, except to say that it was inspired by the jQuery module for NodeJS.

node-couchdb

Very good documentation and seems to be a very thorough API, but the owner says he isn't maintaining the package any more. That's a big downside.

node-couchdb-min

This appears to be a minimal version of node-couchdb.

NavigationTiming, IPv6, Instant Pages and other goodies in boomerang

2011-06-17T11:01:00.000-07:00

There have been many additions to boomerang over the last few months. Among them include:

Full navigation timing API support added by Buddy Brewer (@bbrewer)
Measure IPv6 support and latency with the ipv6 plugin
Measure the performance of "Instant Pages" in Google Chrome (v13+)

NavigationTiming

With the navtiming.js plugin, boomerang will beacon back the entire navigation timing object for browsers that support it (Chrome 6+ and IE 9+ and Firefox 6+ at this time). Use this information to gain far more insight into the user's browsing experience.

Docs here: http://yahoo.github.com/boomerang/doc/api/navtiming.html and here: http://yahoo.github.com/boomerang/doc/howtos/howto-9.html

IPv6

World IPv6 day is past, but IPv6 support still isn't universal. The ipv6.js plugin will help you find out if your users can access content over IPv6 and how that latency compares to whatever you currently provide. This does require server side setup though.

Docs here: http://yahoo.github.com/boomerang/doc/api/ipv6.html

Instant Pages

Google Chrome 13 has taken Mozilla's prefetch technology to the next level, introducing "prerender" -- a method to download and render the most likely next page before the user clicks on it, giving the appearance of the page loading Instantly when the user does click.

Boomerang is now prerender aware, and will check to see if a page was loaded through prerender or not. If it was, then boomerang measures a few more interesting times like the actual load time, the perceived load time, and the time from prerender completing to the page becoming visible.

Caveat: The measurement code causes current builds of Chrome 13 to crash. This bug appears to have been fixed in the nightlies (Chrome 14 Canary).

Docs here: http://yahoo.github.com/boomerang/doc/howtos/howto-10-page%231.html

Almost right is not right enough

2011-06-03T23:33:00.000-07:00

I was recently pointed to scrumy.com by a group that wants to use the scrum agile method. A quick look around the site showed that they were doing a lot in JavaScript. In particular, they took the name of the current scrum (or sprint if you prefer) from the URL and wrote it into the HTML, JavaScript and a few URLs. So, if your sprint were named hello-dolly, your URL would be http://scrumy.com/hello-dolly/

Here's the sad part... they almost got their filtering right. When written into the HTML, they correctly encoded used HTML entities and when written into URLs, they correctly URI encoded the data. They even did this for URIs that were written into JavaScript variables.

Where they didn't encode, was a JavaScript variable not used in any of these contexts. A small part of their JavaScript for the hello-dolly example reads like this:

window.projectName="hello-dolly";

Change the URL to http://scrumy.com/%22%3balert(0)%3b%22 and this is what gets written into the page:

window.projectName="";alert(0);"";

Resulting in an XSS.

Now I only looked at a single page on the site, so can't comment on whether there are more holes or not.

I emailed them as soon as I found the bug and a few hours later it was fixed. Good job folks!

The story of George — ayttm's most prolific non-developing contributor

2011-05-05T02:35:00.000-07:00

An Introduction

In late April 2008, we received an email^[1] on the ayttm-users mailing list. It was from George, which wasn't a name I'd ever seen on the list before, and it was about something called Puppy Linux^[2], a distribution I'd never heard of before. He started out with a description of the distro, stating that he was a user, and had picked up ayttm^[3] based on the suggestion of the creator of Puppy Linux on their chatroom.

As part of his introduction, he included this paragraph:

I am very new to all this. Although I was a programmer years ago, I was away from computers for about 20 years. I have been on the internet for about 14 months - with no previous internet experience. I got Puppy Linux up and running less than 6 months ago - no previous linux / unix experience. I've been using chat rooms about two months - again with no previous experience. I only use irc.FreeNode.net and I access almost exclusively the Puppy Linux chat rooms.

I need to give you this background so that you will know that there is a very good chance that I will think the program needs work when the truth is that the user's inexperience is the real problem.

He proceeded to explain how he uses IRC, first with xchat^[4], and then with ayttm. He went into great detail, starting from how he launched the program to how he got to his final intended task, how much time it took him to cover each task, the problems he saw along the way, the kind of internet connection he was using, and finally some suggestions and opinions. For each of them he explained how it would help him and others like him, and how important it was to him relative to the other problems he saw.

He closed telling us that he was really happy with ayttm, inspite of the problems he faced, and if we could fix the problems he listed, it could become a core part of the Puppy Linux distribution.

... I am amazed at the level of functionality you have put into a small package. Please keep up the good work.

I hope you find something of use in all this,

George

In all, his email worked out to 5 printed pages.

I thanked him for his report. It was easily the best problem report we'd ever received on ayttm. All past reports read something like, "Foo doesn't work for me", and were typically no longer than 3 lines, and included no description of the environment under which it was run.

George's message included a lot of detail of the problem itself, but it was composed in a very friendly, almost self-deprecating tone, suggesting that it's quite possible that all the problems he sees are really PEBKACs^[5]. He never once sounded condescending, or as if he was doing us a service by writing up this report, and he threw just enough flattery to make us feel good, but not too much that we felt he was trying to play us. Most importantly, he'd by far put more effort into writing the report than any other bug reporter had.

He didn't pester us further to find out whether we were going to implement what he asked, or when it was going to be done, but he stayed in touch on the fringe, playing ayttm representative on the puppy linux forums.

In the meanwhile, Barry, the author of Puppy Linux sent us a few patches.

I should mention here, that since ayttm implemented the Yahoo! Messenger protocol, and I was (and still am) employed at Yahoo!, I couldn't contribute any code to the project (I'd worked on ayttm from the start before joining Yahoo!), however, as all the problems George reported related to IRC, an open protocol that predated Yahoo! by a long time, it was deemed okay for me to support this part of the effort with design comments, code reviews and some amount of requirements analysis. This meant that Siddhesh, the only developer at the time, could spend all his time hacking.

Siddhesh spent some time rewriting all of IRC support, and passed on an alpha to George and Barry to test. About a week later, George got back to us with a complete log of his IRC session running ayttm in debug mode. It was now early June.

Rejection

We also started chatting on IRC around that time, and he said he wanted to do more than just file bug reports and send in debug logs. He used to be a programmer, and though the language was different, the logic's more or less the same.

I told him which source file he could look at to find the feature that bugged him the most, and he sent in his first patch a little while later. It looked like this:

- /* get list of channels */
-       ret = sendall(ila->fd, "LIST\n", strlen("LIST\n"));
- 
+ /* get list of channels  commented out GWB per PST 7Jun2008
+  *    ret = sendall(ila->fd, "LIST\n", strlen("LIST\n"));
+  * 
+  * and following line added
+  */
+    irc_finish_login(ila);

Not a big deal you might think. It actually cuts out a feature in fact. But what it really does, is allow someone to use ayttm for IRC without timing out. So, sure, he used spaces instead of tabs for indentation, but that was fine. The most important thing is that he was now so invested in this, and he'd got his foot in the door, he didn't want to stop.

His patch was not accepted, and Siddhesh explained why (it broke the room list dialog), but Siddhesh also had an alternate fix for the problem that he asked George to test.

Come back

Many new developers get turned off at this point. It takes a lot of effort to create your first patch, and a lot of self-confidence to group of people that you know only by their mystical handles and semi revere for doing things that you can't. Getting a rejection at that point can set you back on both counts. Not George. We chatted some more, and he set to work on the next thing that bugged him. This is what he posted to the list:

... I have made some changes to offline_queue_mgmt.c. The diff file is attached.

Bluesmoon says that with my changes he always gets auto logged in. My own results are more random, although I sometimes get autolog. I suspect Ayttm? recognizes bluesmoon by his keyboard touch and remembers him fondly ( he is a former Ayttm? developer ), and treats him better than me.

Again, there's that bit of humour in there that suggests he's having fun doing this. Happy developers write good code. His patch got in.

Now in mid-June, he sent an update^[6] on the status of his tests, this time addressed at Siddhesh:

Siddhesh,

As you know, I have been downloading the latest source and testing it almost as quickly as you commit. I have been testing your tagged branch libirc-mod. I thought I'd take a minute to document the current Ayttm? status....

The name

Apart from his first email to us, George always put a question mark at the end of Ayttm. He now suggested that we add the question mark permanently as part of the name as an allusion to what it stands for ("Are you talking to me?"). Neither Siddhesh, nor I thought it was a good idea because as it turns out, many fonts use the ? character when they don't have a glyph to display for a particular character (others use a box), and we didn't want to confuse users with this. Another rejection of George's ideas, but he realised that while we were turning down his ideas, we weren't turning him down.

One thing that a lot of individuals forget about when communicating over email, IM or IRC, is that the person with the idea is not the same as the idea. This holds for both, the individual with the idea, and the individuals reacting to it. I've seen too many cases where either the person proposing an idea was attacked because the idea wasn't liked, or the person proposing the idea took a rebuttal of their idea too personally and thought that everyone hated them. George didn't have these notions, and his attitude in email made it impossible for us to feel any animosity towards him.

The Pup

In July, George posted this message^[7] to the list:

This was just posted on the Puppy Linux lead developer's blog.

Ayttm will be builtin in the next alpha release of Puppy Linux.

Feels like a big win to me - I don't know why - I didn't write it.

Indeed, George was way more pleased than we were. I'd guess it had to do with seeing two projects that he cared deeply about getting so closely coupled. Almost like watching two of your close friends getting hitched. The ayttm dev team still knew very little about Puppy Linux (I was a RHEL & Ubuntu user, and Siddhesh worked at RedHat). George, on the other hand, made it happen.

George turned into our liaison on the Puppy Linux forums. He'd collect bug reports from Puppy Linux users, verify them and then pass them on to the ayttm bug tracker on sourceforge. We chatted quite a bit over the next few months about new features he wanted to add and bugs he wanted fixed, what he thought of the changes. At one point I suggested that he speak about his experiences with ayttm at a conference^[8] in India. Siddhesh and some of the other developers were doing talks of their own. He considered it, but decided against it because of his age.

It was only then that I found out how old he was. I won't reveal that here since it was in a private conversation, but I have a fair way to go before I get there, and I hope I'm as enthusiastic as he is when I do.

I haven't heard from George in a while, but I've also stopped monitoring the ayttm bug tracker, so perhaps he's active there.

I should also mention as an afterthought, that even though I've referred to George as "he" throughout this post, I don't actually know if I was speaking with a man or a woman. It never came up, it was never important, and knowing it wouldn't have changed anything. I assumed he was a man because George is most commonly a man's name. Back in India, the only time I'd ever heard of George as a girl's name was in Enid Blyton's Famous Five^[9]. And in that, I learnt another lesson from George.

When it comes to hacking on opensource software, none of age, gender, race, country of origin, or how you look matters. All that matters is a pleasant attitude to your fellow developers, a willingness to keep at it and learn as you go, the drive to not give up when things don't go your way, and the ability to tell the difference between an idea and the one who has it.

Thanks George. To answer your first email, yes I did find much of use in this.

References

George's first email to ayttm-users. Yes, we use sourceforge. It's not pretty, but it's all we had at the time.
Puppy Linux, a small, fast and easy to use linux distro
Ayttm - Are you talking to me? A universal instant messenger for unix
xchat an IRC chat client for X.
PEBKAC in the Jargon File.
George's update on June 19, 2008.
Ayttm on Puppy Linux. In July, George announced that ayttm had become part of Puppy.
FOSS.IN - India's largest community run conference on free and opensource software.
Enid Blyton, The Famous Five. 1942-1963.

Twitter, SSL and #poopin

2011-05-02T16:04:00.000-07:00

Watching the twitter feed about #jsconf shows a lot of people tweeting about #poopin. Turns out that someone's been stealing twitter cookies using a firesheep like tool and tweeting on their behalf. The tweets aren't malicious in nature, and are geared more at educating the user about the need to use SSL or some kind of encrypted tunnel when tweeting over untrusted wireless connections.

Here's the problem. Even people who do know the risks, and take the trouble to use twitter over SSL will get caught because of certain bugs with twitter's handling of their SSL pages.

If you visit https://mobile.twitter.com/, this is what you'd get: (shown in a browser so I could hilight the URL bar)

Click Sign in and this is what you get:

Notice that the post sign-in URL is no longer https, but is now http.

At various points of time, trying this through my mobile phone, I get redirected from an https site to an http site when I do some of the following:

Replying to a tweet
Replying to a direct message (seems to be fixed)
Retweeting (with/without? JavaScript)

If you search through the page source on https://mobile.twitter.com/ for the string "http://", you'll find a few instances in comments, but then these interesting ones in a JSON object:

"twitterApiBase":"http://api.twitter.com"
"apiBase":"http://api.local.twitter.com:9000"
"twitterBase":"http://twitter.com"
"mobileBase":"http://mobile.twitter.com"

I haven't examined the code in detail to see how these are used, but it seems to suggest that at least some calls are going out over http, and since they're all on the twitter.com domain, your twitter cookies get sent along.

Now this is only the twitter mobile website. Mobile clients could be another matter, and the desktop site could also have problems. I haven't tested. Personally, I try to either use a VPN, or only tweet using SMS, but I have been caught by something like this before (at FOSS.IN/2010) which is when I started to study the problem.

Also, it doesn't matter if you've configured twitter to always use HTTPS. It still has this problem.

pngtocss and getting back to basics

2011-04-24T02:30:00.000-07:00

A couple of days ago Nicole tweeted about the absence of a tool to convert images to gradients. I didn't see the tweet right away because I was asleep at the time, but Sergey retweeted later it under the @perfplanet account and I caught that.

My first thought was that there really must be something like that. Why not just use the gimp's colour picker or something. My second thought was, "what the heck are CSS gradients?" followed closely by, "I've never read a PNG in C before".

Back to basics

All of this brought up a sense of déjà vu back to 1999, to the birth of my first opensource project. That started out with someone on the ilug-bom mailing list asking how he could find out which server was running on a given host. I started to type out an explanation and then figured that it would take me less time to hack up a solution in perl, so I did, and httptype was born.

Yesterday was very similar, the only real difference being that this time I knew how to use version control, so I jumped in with:

mkdir pngtocss
cd pngtocss
git init
mkdir src

And then started on a bit of research. First to find out how to read in a PNG.

Reading in a PNG

libpng.org has a great book on using the libpng library. It's a long book and I'm a lazy dev, so I didn't read the whole thing. Instead I found the Chapter that dealt specifically with reading a PNG into memory. It turned out to be Chapter 13. Now when I say "I found", I really mean that Yahoo! found it for me.

Anyway, I read the doc and it was pretty straightforward, so I jumped right into writing code, but guess what? My C programming skills were rusty. My Makefile skills more so. Having man at hand helped things move along and I was soon up to speed.

Once I had an in-memory array of the image's pixels, I had to figure out how to write out the CSS.

CSS gradients

There were a few sites that helped with this, in particular CSS tricks. A few printfs later and I had simple gradients done.

The code was simple, and handled a very specific case. It didn't work with all possible gradients, and wouldn't be able to handle a sprite, but this is how projects grow. You don't try to solve everything at the start. You solve a use case and push it out there to find out what people want.

The last time around I pushed it out to the mailing list and got a lot of feedback, patches and even a mentor. This time I announced it on twitter and got a bunch of feedback and a ton of retweets.

The physics of gradients

Today I decided to look at multi-colour gradients. Not because anyone had asked for it, but because I thought it might be interesting to figure out where a colour shows up.

Now there are various ways to look at a gradient. If you think about it from a physics background, it's essentially a particle moving with constant velocity. Each pixel position is a unit of time and the colour value is the particle's position at that point in time. The position at any point of time is calculated by the second equation of motion:

s = ut + ½at²

For a simple two colour gradient, there's no acceleration, and the velocity u is the difference in the two colours divided by the number of pixels in that direction. This is the same as the difference in colour of adjacent pixels (colour differential per unit pixel).

The cool thing is that for CSS, you only need to specify the end points and it will fill in everything else.

Multi-colour gradients

When dealing with multi-colour gradients, you need to figure out where the stop points are. Once you know what the colour velocity at the start of the gradient, you keep iterating through the image until the velocity is no longer what you expect it to be. This is a colour stop. Note down the new colour and its position and restart.

To speed things up, rather than look at every pixel along the way, I exponentially increase the pixel index that I look at until I hit a bump and then backtrack till I find what I was looking for. A sort of binary search.

Putting it all together, I ended up with this example page which has gradient images and the equivalent CSS gradient side by side. There are still limitations, but none that I care to fix at the moment.

Other tools

Also of note is Alex Sirota's Gradient Editor as part of Colorzilla. It's completely web-based and can also take in a file upload and generate a gradient from that. It doesn't handle the rainbow gradient yet, but I suppose it won't be too hard to get around that.

pngtocss

In any case, pngtocss is on github at https://github.com/bluesmoon/pngtocss, feel free to fork it and submit patches. The code isn't pretty and isn't really commented either.

How much do you trust third party widgets?

2011-04-13T15:44:00.000-07:00

It's fairly common to find third party widgets installed on websites today. My own blog includes widgets from twitter, delicious, google analytics and google translate, and in the past I've included mybloglog and technorati as well. The facebook like button, facebook comments, disqus comments, badges from sharethis and more are all over the place. This is a great way to engage with your readers, get feedback from them, and let them get the word out about your site, but how secure is it? When we include a third party widget on our sites, what exactly do we trust the third party to do and not do?

In particular, this mostly refers to widgets that require you to add links to their JavaScript into your page using a <script> node. There are a few that work through iframes, and while there are still a few issues with that, the script nodes are the ones that can do you the most damage.

Not be evil

For starters, we trust the third party to not be evil. We trust that the JavaScript they serve us will:

not try to steal the data our users give us through the website,
not manipulate our page content in malicious ways,
not track our user's actions in any ways that we haven't authorised them to do,
probably more...

For the most part, the widget provider stakes their reputation on the quality and the chastity of the widgets they provide. Anything malicious found in their widgets would affect a large number of sites, but would cause terrible PR and contractual problems for the provider. For most of us small blog authors, dots on the long tail as it were, the widget provider has far more to lose than we do. For a large company, like say one of these widget providers themselves, though, there's much more at stake, so don't be surprised if you don't see third party widgets on Google, Yahoo!, Microsoft, Facebook, Twitter, Amazon, Ebay and any other large site you can think of. They probably have much more (or at the least an equal amount) to lose than the widget provider.

Not be careless

We're also trusting the widget provider to not be careless. We expect them to be diligent about the security of their own systems. If someone malicious were to break into a third party widget provider, they could then manipulate the JavaScript served out to our sites. Same problem as above, same repercussions, but slightly different entity responsible. It's possible for the widget owner in this case to claim that they were also the victim. That doesn't make it better for anyone, it just shifts the blame.

Not be too trusting

We don't just trust the widget provider, but also their hosting provider and their DNS registrar. This is a sub-topic under the don't be careless part above, but there may be another entity involved here. Running a whois lookup on the widget provider's hostname will tell you who their DNS registrar is. Do you trust them to not get compromised and have DNS redirected? Does the widget provider use SSL to guarantee that the host you're connecting to is in fact a host they own? Can you trust SSL?

Not go down

Let's face it... how many times have you had a twitter (or any other) widget on your page that showed nothing? Perhaps you're being rate limited, perhaps the service is down for maintenance, or something else. That huge blank space where your widget should be looks kinda bad. Not really a security issue, but it hurts your site's image.

There's little doubt why large companies won't trust a third party's JavaScript on their own sites. In exceptional cases, they may contract with the third party to get the JavaScript onto their own servers where they can guarantee that it doesn't change, and can pull the plug quickly if something goes wrong.

What about you? Do you run a website that includes third party widget JavaScript on your site? Are you big or small? Would you keep this up when you became big?

overflow:hidden, border-radius and position:absolute

2011-04-09T19:15:00.000-07:00

In my last post, I showed off some CSS fun with border-radius and overflow:hidden. Truth be told, that post started out about a bug with WebKit based browsers in relation to those attributes, but when I got down to writing the post, I couldn't reproduce the bug. Today, while trying to animate it, I managed to isolate the problem, and it turns out that I'm not the only one.

The problem in brief is that the contents of a container with overflow:hidden will still overflow its border if you have border-radius set and position set to anything other than static. Bug 50072 on WebKit describes a similar issue in more detail, and I've posted my comments at the bottom of that bug. I've created a minimal test case on JSFiddle. This is what it looks like on a webkit based browser:

Like I said, the problem only shows up when you set the container's position style attribute to something other than static (which is the default).

I've tested in the latest versions of Firefox, Chrome, Safari and Opera, and Firefox is the only one that renders it correctly.

Now before you go asking me to test on the latest WebKit, rest assured that it's compiling as I write this. I'll try and submit a fix if it still exists and I can figure out what needs patching, but given that position:static works correctly, it may just be a matter of seeing what's different with those two flows.

overflow:hidden and border-radius

2011-03-30T01:20:00.000-07:00

So what exactly needs to happen when you set overflow:hidden on a container element? At which pixel point do the element's contents get hidden? Is it at the padding, the inside of the border, the outside of the border, the outline or somewhere else?

The spec sort of states that it's at the border or padding (depending on background-clip):

Other effects that clip to the border or padding edge (such as ‘overflow’ other than ‘visible’) also must clip to the curve.

With that in mind, I decided to throw rounded corners into the fray and have some fun:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

Caveat: Opera is broken.

Anyone wanna try a deathstar?

Spoofing your MAC address on MacOSX 10.6

2011-03-28T01:42:00.000-07:00

There are various reasons why one might need to spoof ones MAC address. For example, your ISP may have bound your connection to your MAC address, and then you had to change your network card because the old one was fried by a lightning strike (this actually happened to me). Another reason is privacy. You may want to change your MAC address if you're surfing the net from a coffee shop with free wifi to make sure no one sniffing the network can identify you. Whatever the reason, the actual commands to (temporarily) change your MAC address are quite straightforward.

Note that these commands work on Linux, FreeBSD and MacOSX (at least versions greater than 10.5).

Before you do anything, make sure the port is up:

sudo ifconfig <iface> up

Where iface is the network interface. This should be something like en0 for the ethernet port on MacOSX, or eth0 for a linux box, etc. If you're not sure, just run the ifconfig command without any arguments... although if you're not sure, you probably shouldn't be doing this anyway ;)

Now, once your interface is up, you can change its MAC address. This only lasts until the next reboot, but given that I almost never shutdown my laptop, it's as good as permanent.

For the ethernet port:

sudo ifconfig en0 ether <new MAC address>

This works even if you're currently connected to a network.

For the wireless card, first disconnect from any wireless networks. I've found that the easiest way to do this is to try to connect to a network that doesn't exist. From your Airport icon in the menu bar, choose "Join Other Network", and type in some random string. Note that you don't need to do this if your airport doesn't automatically connect to a wireless network.

Once you've disconnected, just run the command as above, but for the en1 interface:

sudo ifconfig en1 ether <new MAC address>

You can now reconnect to any wireless network.

Note that even though this is temporary, I do have it set up to be more or less permanent on Ubuntu through my network startup scripts. I'll publish them some other time.

HTC Freestyle: First Impressions

2011-03-27T03:06:00.000-07:00

I got an HTC Freestyle from AT&T today. It was free, so I can't complain about the price, however it's a bit of a downgrade from my E71. First, what I like about it.

It has a decently sized touchscreen, and the Twitter+Facebook app is pretty decent. The browser is WebKit based and handles CSS @media queries correctly. It even switches correctly when you rotate, which the iPhone gets wrong.

On the downside though, rotating from portrait to landscape is not automatic. You need two clicks to tell the browser that you've rotated. No accelerometer in this phone. Which brings us to the things I don't like about it.

No GMail and GMaps apps for it. Since the primary reason I went in for a smartphone was to check my email and use the GPS while I'm on the road, this makes the phone a complete non-starter. The sales rep at AT&T told me that it was an Android device, but once I got it home and looked it up, it turns out that that isn't true. It runs something called Brew MP.

Transferring contacts from my older phone is clumsy, but doable. The main problem here is that I need to use the SIM card to transfer contacts and it just doesn't have enough space for all my contacts.

I could set my ringtone on the E71 to any mp3 file that I had access to. On the HTC Freestyle, it's limited to files under 300KB. Seriously. Kilobytes. What is this? The 80's? My current ring tone on my 3 year old Nokia is 6.4MB.

After using the real keyboard on the E71, the onscreen keyboard on this device is extremely clumsy to use. I've made mistakes on every occasion that I've needed to use the keyboard. I even make mistakes trying to hit the backspace key. I guess I'll get used to this eventually, however one thing to note is that the E71 does far more with just one key than this phone can do with its keyboard. The main problem is the number of times your hands/fingers need to move in order to type or even to just select menu items.

No wifi. 'Nuff said.

Ok, so that's it for the "Smart" part of the phone. Now to the phone part.

I tried to make a call when I got out of the AT&T store. The call dropped after 3 seconds. Remember, this is right outside the AT&T store. All the phones inside the store had decent signal strength. I thought it may have been due to the battery having almost no charge (since it was a new phone), so took it home and charged it up, but it hasn't changed. On 8 out of 9 calls that I've made so far I've been unable to hear what the other party says though they can hear me.

Switching on the speakerphone requires two clicks after the call connects. On the E71 it was one click while the phone was ringing. This makes a big difference because the person at the other end has no idea what's happening while you're switching on the speakerphone. It also makes it impossible to answer the phone in speaker mode while driving.

The speakerphone sound quality is also pretty bad. It's not clear when soft, and starts jarring when loud. There doesn't seem to be an optimum volume setting for it.

All in all, this is not a phone I'd pay for.

X-XSS-Protection

2011-03-18T14:03:00.000-07:00

Internet Explorer 8 has a "useful" feature where it tries to detect if a page is under an XSS attack. If it thinks it has detected an attack, it will disable the malicious code and warn the user about it. Sound good on the surface of it, except that it's often wrong, often with ads. In most cases with security issues, it's better to err on the side of caution, but what happens here is that IE ends up warning your users about non-existent security issues on your site. Users lose trust in your site and everyone loses.

If you already take proactive steps to protect your users from XSS attacks, you SHOULD disable the check and warning. To do this, add the following HTTP header to all your responses:

X-XSS-Protection: 0

How you do that depends on the server you're using. For apache, you'd add this to one of your apache conf files:

Header add X-XSS-Protection 0

TTYL

Printing unicode characters in web documents

2011-01-29T14:18:00.000-08:00

I often have to look up reference sites to find out how to write a particular character in HTML, JavaScript or CSS when that character isn't on my keyboard. This post should save me some searching time in future.

To type a character that's not on your keyboard, you need its unicode codepoint in decimal or hexadecimal. In the examples below, HH means two hexadecimal digits, DD means two decimal digits, HHHH is four hexadecimal digits, and so on. DD+ means two or more decimal digits, HH+ means two or more hexadecimal digits.

HTML

To type out unicode characters in HTML, use one of the following:

&#DDD+;
&#xHHH+;

eg:

Ɖ == &#393;
Ɖ == &#x189;
‡ == &#x2021;

JavaScript

To type out unicode characters in JavaScript, use the following:

\uHHHH

eg:

 == \u2021

CSS

To print out a unicode character using CSS content, use the following:

\HH+

eg:

 == \2021

(Note: the CSS example that I've used here only works in browsers that support the :before pseudo class and the content rule, but in general you can use unicode characters anywhere in CSS.)

URL

URL context is different from HTML context, so I'm including it here.

To print a unicode character into a URL, you need to represent it in UTF-8, using the %HH notation for each byte.
eg:

‡ ==  %E2%80%A1
л ==  %D0%BB
' ==  %39

This is not something that you want to do by hand, so use a library to do the conversion. In JavaScript, you can use the encodeURI or encodeURIComponent functions to do this for you.

End notes

Use escape sequences only in two cases.

Your editor or keyboard doesn't allow you to type the characters in directly.
The characters could be misinterpreted as syntax, eg < or > in HTML.

References and Further Reading

List of Unicode Characters on WikiPedia
UTF-8 on WikiPedia
Unicode and HTML on WikiPedia
JavaScript Unicode Escape Sequences on Mozilla Developer Network
Richard Ishida. 2005. Using Character Escapes in Markup and CSS in W3C Internationalisation.