Bugs in the Wild: Bevmo Edition

I recently found a fun bug in the Bevmo (beverages and more, a liquor store in California) website’s search functionality.  I was searching for a product from Martini & Rossi, so I simply entered Martini & Rossi into the search field, and clicked ‘Go’ and was surprised when I found myself back on the home page.

At first I was not quite sure what was happening, so as any good tester does, I tried to reproduce the occurrence. So I enter in the same text ‘Martini & Rossi’ and again I am taken to the home page.  I decide to isolate the issue, although at this point I am pretty certain that it has to do with the &, so I searched simply the & and found I was taken back to the home page yet again.

At this point I can safely say that the search feature has a bug where if you enter an &  you are taken back to the home page, a behaviour that is clearly incorrect. This is a good reminder of why data input is very important when testing fields, it does not take very long and can find some pretty good bugs!

–Steve

Bugs In the Wild: WYSIWYG in WordPress Edition

I ran into this issue when creating my post for importing/exporting individual tables in MySQL. The issue resolves around the principal of WYSIWYG (What you see is what you get).

For one of the MySQL commands it was necessary to have two dashes (or minuses) next to each other, as can be seen in my the post mentioned above.  In the WordPress text editor displayed the two dashes properly in both the visual and HTML views, but after I had published the post, the two dashes where displayed (and when copied acted) as a single dash! For example the character in the quotation is seen as two dashes in the editor “–” but as can be clearly seen it is displayed as a single dash.

I tried for a while to resolve the issue, but I ended up just spacing out the dashes, like so “- -“, so that it could be seen that there were actually two dashes.

I feel this falls under a WYSIWYG type issue as in the text editor I was able to see the two dashes properly, but then when the post was published the same thing was not displayed therefore what I was seeing n the editor was not what I got in the post.

–Steve

Exporting and Importing An Individual MySQL Table

In moving databases from development to production it is sometimes necessary to export individual tables so that they can be imported into another database.

Exporting the Table
To export the table run the following command from the command line:
“mysqldump -p – –user=username dbname tableName > tableName.sql”

This will export the tableName to the file tableName.sql.
[NOTE: there should be no space between the two dashes, but I have to write it that way so that it display properly].

Importing the Table
To import the table run the following command from the command line:
mysql -u username -p -D dbname < tableName.sql

The path to the tableName.sql needs to be prepended with the absolute path to that file. At this point the table will be imported into the DB and you are ready to go!

I ran into this issue when attempting to add new tables to my database. I am unable to run the “LOAD DATA INFILE” command, that I had previously used to populate tables, because Webfaction does not give the permission to run the command. Therefore the simplest solution was to export a table from the MySQL database on my personal machine and then import it to the database on the Webfaction server, using the export/import commands seen above.

Hope this helps someone out with exporting individual tables and as always if any clarification is needed or I missed something feel free to let me know.

–Steve

Two Forms One Page: Explanation of the HTML Form Action

When I started my web application for my design project I knew absolutely nothing about django, html, css… so basically any and all web technologies. Therefore for a very long time I did not really know the purpose of the action in the form declaration ( <form action=’.’>) or what the ‘.’ actually meant.

It is actually very simple, the ‘ action=”.” ‘ denotes where the form is being submitted (what URL is being called). Specifically, the “.” means that that form will be submitted to the current location (same page), for example if your url was http://mysite.com/search the form would be submitted to http://mysite.com/search.

Now that we know what the action does, it can be used to have two forms on the same page submit to different location. I created a page where a user can either login or register. To have the two forms submit properly I have the following actions for the two forms:

Login Form: <form action=’/accounts/login/’>

Registration Form: <form action=’/register/’>

Now when the login form gets submitted the /accounts/login/ is called and when the registration form gets submitted the data is sent to /register/. An important note is that the action gets performed on the specified location BEFORE the last ‘/’. For example if I had , the action would be performed on the home page and not the register page. Therefore it is important to always have the trailing ‘/’ .

Hopefully this saved someone some trouble getting multiple forms setup.

If you need any clarification, or more details, drop me a line and I’d be more than happy to help.

–Steve

Why do doors with handles push in!?

Or more elegantly put, what a door with two handle affords (An affordance is a quality of an object, or an environment, that allows an individual to perform an action – Wikipedia).

This has to do with an annoyance I have had for quite a while and that is, why are there doors with handles on both sides? Think to yourself, how many doors have push/pull signs? In my opinion much too many considering if a simple design change was implemented they could be done away with and there would never be any question which way a door goes

Currently those doors that have handles on either side afford for a user to either push or pull. If all doors were designed such that one side had a handle on one side did not, it would be very simple because it would be known that the handle is the pull side, and the other is the push side!

Because of this poor design I have actually created my own heuristics to avoid embarrassingly walking into a door (and yes I definitely have walked into one of these doors). If I am uncertain whether it is push or pull, I’ll put my hand on the handle and push in slightly (it is only noticeable if you know what I am doing) and if the door does not budge, I proceed to pull it. I personally think it is a little ridiculous that I have had to come up with a best practice to open a door!

This may be a rather trivial example, but these type of affordance problems can be seen anywhere, whether physical or in software/the web. A (contrived) web example could be a text box that you cannot type in that has a white background. A white background usually indicates that the text box can be typed in, and if the user attempts to type in it and they cannot they will be surprised. Despite the contrived nature of the above the example, it was meant to get you thinking about the software that you use and design affords. It is important in design to always be aware of what a given design affords, if there is any question about what it affords, I can guarantee you that someone is having trouble using it.

So go ahead look around at any physical or software design and think about what it affords, you may be surprised at what you discover.

–Steve

Adding a Windows XP VM to ESX 3

I have encountered another little issue with ESX 3, you cannot straight add a Windows XP VM. I tried to Add the VM as I would any other VM, click add VM, follow the wizard steps, attach the Windows ISO and boot up. Unfortunately this causes an error with XP; during the bootup the Windows setup cannot find any Hard Drive. Then when you try to boot again, it boots to a blank screen, and the VM is dead.

This is actually a known issue with ESX, there are, unfortunately, a few extra steps you have to follow when adding a WinXP machine.
– Select custom, instead of typical, when you add the VM
– For I/O Adapter select Bus Logic (instead of LSI)
– When booting up the VM you MUST press F6 when the first blue setup screen shows up (if you don’t you have to create the VM again!)
– When prompted to, connect the floppy that is located in /vmimages/floppies
– Click through and proceed like you would a normal install

That is the work around, not too bad, but it would be nice to have known this going in! There is also a quite detailed explanation of this over at the vmware site: http://kb.vmware.com/selfservice/search.do?cmd=displayKC&docType=kc&externalId=1000863&sliceId=1&docTypeID=DT_KB_1_1&dialogID=17352968&stateId=1%200%2017356472

–Steve