Usability issue during checkout

As some of you may noted, I moved from DotNetBlogEngine to WordPress blog engine. In addition I decided to buy one of the beautiful WordPress themes from ThemeForest. It has fair price $35

But there are two usability barriers for me as a customer to buy the product.

Registration

I have to be registered on the website before I can make any purchase.

Smashing Magazine published an article sometime ago named Fundamental Guidelines Of E-Commerce Checkout Design. One of the main ideas there was that registration should be optional:

  • Customers already have a myriad of user names and passwords to remember and don’t want to create an entirely new account just to buy one or two products from an online store
  • Customers “expect to be spammed with marketing material, even if they explicitly declined to sign up for a newsletter during the checkout process”, i.e. “Account = Newsletter”
  • Customers likely realize that you’re storing their information indefinitely
  • Signing up for an account also takes time
  • Customers just don’t understand why they need an account to buy a product

Anyway, I liked theme a lot, so I spent some of my valuable time to register on their website (I had problems with registration as well, but this is boring).

And one more note here – if merchant still want to have accounts for tracking purposes this is the advice they give:

You can set their email address as their user name and fill in the account information with their order details. This way, the customer isn’t forced to create an account but has an easy way to do so after completing their purchase. (Remember to explain the benefits of having an account.)

Read more!

Choosing web framework: ASP.NET MVC vs Django Python vs Ruby on Rails

How often do you emerge from you cubicle to look around, note new faces or new facial expression on old ones? How often do you emerge from you technology stack to consider better another approaches/practices?

If you do this rarely – bad for you, you will miss important changes in your environment, loose the track or even worse – you will work hard in wrong direction. This is important not only to be qualified, but also to be competitive and have broad experience.

But, my time is very valuable, so even downloading something and reading its documentation is an investment I’d rather shortcut if I can. Therefore I definitely need some way to measure current trends, so I can predict outcome of my investment – diving into new technology (or even technology stack).

As a super-web-developer I’m about to consider the following frameworks to learn: ASP.NET MVC, Django Python and Ruby on Rails.

[Note: I’m aware that PHP has its own MVC frameworks, the most popular of which I believe are CodeIgniter and CakePHP.  While PHP is vastly more popular than any of frameworks above, I decided to do not consider PHP frameworks and leave them for another post.]

Here are important factors to consider before start learning any new language:

  • Quality and availability of libraries.
  • Quality of tools like IDEs, debuggers, automation systems.
  • Size and healthy of the active community using the framework.  (i.e. If I run into a problem, how easy is it to google the answer?)
  • Demand of technology specialists
Read more!

Bitwise NOT in Javascript

isNumber Function

Even if I used some best-ever-practice in one of my projects, it doesn’t mean I can’t find even-better-approach in the next one. In other words there is always a place for learning.

Let’s take a look into simple function named isNumber

function isNumber(n){
     return typeof n === “number” && !isNaN(n) && n !== Infinity;
}

(to be honest, not the best approach, but it does its job)

Now, let’s try to improve/optimize this method by using bitwise not operation (~). For those who not familiar with such operation: ~ (bitwise not) operator will take its operand, convert it 32-bit integer and will invert each bit.

00000000000000000000000100111010


becomes

11111111111111111111111011000101


The same effect could be achieved by the following formula: – ( foo + 1 ). So, if ~foo = – ( foo + 1 ), then double bitwise operation will lead to ~~foo = – ( – ( foo + 1 ) + 1 ) = – ( –foo – 1 + 1 ) = foo. But please remember that foo will be converted to 32-bit integer internally.

Read more!

Relative URL and HTTPS protocol

All of you are familiar with such browser warning message:

image

This usually happens when you load the page via HTTPS protocol, but some of the page’s resources were requested by HTTP protocol. It’s not an option to simply disable warning in a browser, because such references create vulnerabilities that put the privacy and integrity of an otherwise-secure page at risk. It could be achieved by modifying insecure content in transit. In addition, regular internet users could be scared by such message and leave the page.

Client Side Protocol Detection

This is why web developers should take care of the issue by following next rule: within HTTPS page never include a reference to HTTP-delivered resource. But things became more complicated with pages which could be accessed by HTTP or by HTTPS. In this case you don’t know in advance what protocol to use. Another good example is to have some widget, which could be included in third-party pages and some of them are secure while others – not. Google Analytics team solved this problem by the following JavaScript snippet:

<script type="text/javascript"> 
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); 
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); 
</script>

The script analyzes what protocol is used on a current page and creates URL to Google Analytics script by using the same protocol (in addition it changes subdomain, but it is not a topic of discussion).

Read more!

When cached items became invalid?

There are a number of reasons why browser could make a conditional or unconditional request for item that is already in the cache.

Item is expired

The cached data is no longer fresh according to Cache-Control or Expires.

These specify the “freshness lifetime” of a resource, that is, the time period during which the browser can use the cached resource without checking to see if a new version is available from the web server. They are “strong caching headers” that apply unconditionally; that is, once they’re set and the resource is downloaded, the browser will not issue any GET requests for the resource until the expiry date or maximum age is reached.

Browser applied its heuristic and decided that item should be revalidated by server based on

Last-Modified and ETag. These specify some characteristic about the resource that the browser checks to determine if the files are the same. In the Last-Modified header, this is always a date. In the ETag header, this can be any value that uniquely identifies a resource (file versions or content hashes are typical).

Last-Modified is a “weak” caching header in that the browser applies a heuristic to determine whether to fetch the item from cache or not. (The heuristics are different among different browsers.) However, these headers allow the browser to efficiently update its cached resources by issuing conditional GET requests when the user explicitly reloads the page. Conditional GETs don’t return the full response unless the resource has changed at the server, and thus have lower latency than full GETs.

Read more!