Localized Javascript countdown

These days many websites use a simple Javascript countdown clock to help promote the launch of a new service. Because many web applications are international, it’s important to ensure that your countdown is localized for all visitors.

Let me give you an example. Say you’re in Portland, OR and you’re launching a new web app on April 27, 2011 at 5:00 p.m. PST. Not only are you launching a new web service, but you’re also coordinating an iOS and an Android app launch. So it’s important to be precise. You want to ensure your Hong Kong visitors don’t expect your product to be launching at 5:00 p.m. HKT. Instead, you want them to know that your product is actually launching at April 28, 2011 at 8 a.m. local time.

One good way to do this is using the Date.UTC Javascript method.

// Get the current local time
var now = new Date();
 
// Get the localized end date for your countdown
var end = new Date(Date.UTC(
    2037, // Year
    3-1,  // Month (0 is January, so 3 minus 1 is 2, which is March)
    31,   // Day
    19,   // Hour
    0,    // Minutes
    0,    // Seconds
    0     // Milliseconds
));
 
// Toggle countdown
if (now < end) {
    // Show countdown
    alert(now + " < " + end);
} else {
    // Yay! We launched!
    alert('Launch day!');
}

If you run the script above, you’ll notice that while now is always increasing, end should stay constant. The only reason the value of end should change is if you change your computer’s local timezone.

You can now take these variables and pass them into a nice Javascript countdown script. I’ve used Keith Wood’s jquery.countdown.js jQuery plugin in the past, but I leave that decision up to you.

JSON-RPC 2.0 Implementation

Here’s another quick braindump post. A custom JSON-RPC library I wrote for a project at my last job. It should follow the JSON-RPC 2.0 Spec pretty closely. It does require the jQuery library as well.

You can pretty much ignore the MIKU references. Basically it’s just a way of namespacing objects to make them globally available. Try reading up on the YUI library for more information.

As always, feel free to post with any questions.

  1. var MIKU;
  2.  
  3. /*
  4.  * Method to allow namespacing of new objects within MIKU;
  5.  *
  6.  * Example:
  7.  * MIKU.namespace('objectname');
  8.  * MIKU.objectname = function() { return {'...'} }
  9.  *
  10.  */
  11. MIKU = function() {
  12.   return {
  13.     namespace: function(name) {
  14.       try {
  15.         if (MIKU[name]) {
  16.           throw 'Namespace exists.';
  17.         }
  18.         return {}
  19.       }
  20.       catch (e) {
  21.         this.throwError(e);
  22.       }
  23.     }
  24.   }
  25. }();
  26.  
  27. MIKU.namespace('throwError');
  28.  
  29. /*
  30.  * Method to catch MIKU errors
  31.  */
  32. MIKU.throwError = function(e) {
  33.   if (console) {
  34.     console.error((e.message || 'MikuError:'), e);
  35.   }
  36. };
  37.  
  38. /*
  39.  * Init the JsonRpc namespace into the MIKU object.
  40.  */
  41. MIKU.namespace('JsonRpc');
  42.  
  43. /*
  44.  * Miku Json-RPC Implementation
  45.  */
  46.  
  47. MIKU.JsonRpc = function() {
  48.   var _url = 'json-rpc/call';
  49.   var _timeout = false;
  50.   var _requests = [];
  51.   var _responses = [];
  52.   var _callbacks = {};
  53.   var _requestId = 0;
  54.   var _failures = 0;
  55.  
  56.   function _send() {
  57.     _request();
  58.     _t = false;
  59.     _requests = [];
  60.   }
  61.  
  62.   function _request() {
  63.     try {
  64.       if (!_url) {
  65.         throw('undefined post url.');
  66.       }
  67.       $.ajax({
  68.         type: 'POST',
  69.         url: _url,
  70.         data: ({
  71.           request: JSON.stringify(_requests)
  72.         }),
  73.         dataFilter: function(data, type) {
  74.           //check for php errors
  75.           try {
  76.             return JSON.parse(data);
  77.           }
  78.           catch (e) {
  79.             var phpError = /^.*?(Error|Warning|Notice).*?\:\s*(.*?) in .*?(\/[0-9A-Za-z\/\.\-\_\ ]+).* on line .*?([0-9]+).*$/i;
  80.             var lines = data.split(/\n/g);
  81.             $.each(lines, function() {
  82.               var error = this.match(phpError);
  83.               if (error) {
  84.                 MIKU.throwError({
  85.                   message: error[1] + ': ' + error[2],
  86.                   file: error[3],
  87.                   line: error[4]
  88.                 });
  89.               }
  90.             });
  91.           }
  92.         },
  93.         success: function(data) {
  94.           _success(data);
  95.         },
  96.         error: function(XMLHttpRequest, textStatus, errorThrown) {
  97.           // retry after connection failures
  98.           if (XMLHttpRequest.status != '200') {
  99.             _failures ++;
  100.             if (_failures < 3) {
  101.               _request();
  102.               return;
  103.             }
  104.           }
  105.  
  106.           // give up and throw errors...
  107.           MIKU.throwError([XMLHttpRequest, textStatus, errorThrown]);
  108.         }
  109.       });
  110.     }
  111.     catch(e) {
  112.       MIKU.throwError(e);
  113.     }
  114.   }
  115.  
  116.   function _success(response) {
  117.     $.each(jQuery.makeArray(response), function() {
  118.       try {
  119.         if (this.error) {
  120.           // check for error
  121.           throw(this.error);
  122.         }
  123.         else if(this.result) {
  124.           // trigger callback
  125.           var callback = _callbacks[this.id];
  126.           callback(this.result);
  127.         }
  128.       }
  129.       catch(e) {
  130.         MIKU.throwError(e);
  131.       }
  132.     });
  133.  
  134.     // reset callbacks
  135.     _callbacks = {};
  136.   }
  137.  
  138.   function _genId() {
  139.     return ++_requestId;
  140.   }
  141.  
  142.   return {
  143.     version: '2.0',
  144.     delay: 10,
  145.     setUrl: function(url) {
  146.       _url = url;
  147.     },
  148.     call: function(args) {
  149.       var id = _genId();
  150.  
  151.       var request = {
  152.         jsonrpc: this.version,
  153.         method: args.method,
  154.         params: args.params,
  155.         id: id
  156.       }
  157.  
  158.       _requests.push(request);
  159.       _callbacks[id] = args.onSuccess;
  160.  
  161.       if (_timeout) {
  162.         clearTimeout(_timeout);
  163.       }
  164.       _timeout = setTimeout(_send, this.delay);
  165.  
  166.       return request;
  167.     }
  168.   }
  169. }();
  170.  
  171. /*
  172.  * Testing Below
  173.  */
  174.  
  175. $(document).ready(function() {
  176.   var rpc = MIKU.JsonRpc;
  177.  
  178.   rpc.call({
  179.     method: 'System.getTitle',
  180.     params: [
  181.       'id_13'
  182.     ],
  183.     onSuccess: function(result) {
  184.       console.debug(result);
  185.     }
  186.   });
  187. });