Wednesday, February 4, 2015

Bootstrap progress bar with markers and labels

Here is a gist to generate a progress bar with markers and labels. It results a progress bar like the following.


The code snippets are on github. It is based on an answer on stackoverflow.

Sunday, February 1, 2015

Shipping status checking and its implementations

It is the holiday season, and everyone hopes their shippings arrive on time. Checking shipping status is a basic service for online retailers. For the two largest retailers, checking shipping status is implemented as a service that returns a block of HTML including JavaScript. I assume the main rationale behind this design is the easiness for front end integration. So the implementation is a typical server-side mashup. The user clicks on the link/button, the request is sent to the mashup service, the mashup service sends a request or several requests to the shipping carrier services, then the mashup service generates the HTML snippet and sends it back. At the same time, the mashup service can log the data from both the user and the carrier services.

There must be more details in the real implementation. One interesting aspect is the carrier API's Service Level Agreement (SLA). Request throttling policy is one of the most critical pieces in SLA. A carrier service normally restricts the maximum number of service request from a client in a sliding time window and the maximum request rate, and some even have penalties (not just refusing the requests) if the client violates the restrictions. This can make the retailer's mashup service complicate when it tries to behave nicely in the face of a carrier's service and fulfills large amount of user requests.

There is an easier solution other than the server-side mashup approach. If the carrier's service allows cross-origin resource sharing, a client-side mashup can be implemented. Or simply a link to the carrier website with the tracking number in URL will work. What if the retailer wants to track the clicks? Then a link hosted by the retailer with the carrier's link encoded in the query like those in Google search results will work.