Localized Javascript countdown

Posted on June 3, 2011 by tristan

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.

Multiple Base Templates in Django

Posted on December 18, 2010 by tristan

I’ve been working on a pretty big project at work that’s heavily oriented towards mobile devices. We have a Django site running with a lot of custom ecommerce code, but wanted to serve up an optimized experience for mobile devices.

There are a lot of ways to do this, but ultimately we wanted to serve up a different base template for visitors on small-screen mobile devices. We wrote a piece custom view middleware that sets request['is_mobile'] = True. Unfortunately, Django currently requires any {% extends %} template tag to be the first tag in your template. This means you can’t do something like this:

{% if request.is_mobile %}
    {% extends 'mobile_base.html' %}
{% else %}
    {% extends 'default_base.html' %}
{% endif %}

After racking my brain all day my coworker suggested trying the yesno template filter. It worked like a charm!

{% extends request.is_mobile|yesno:"mobile_base.html,default_base.html" %}

So in our view templates we now do {% extends 'base.html' %} which then loads the proper base template depending on the status of is_mobile.

Simple clock using standard Javascript

Posted on August 5, 2010 by tristan

Ah the challenge for making your first clock in Javascript, I remember those days. It seems like such a daunting task at first, but it’s really quite simple. Continue reading →

Detecting mobile devices with Javascript

Posted on June 14, 2010 by tristan

Today at work we were struggling with a way to detect the iPad and similar devices without relying on the browser user agent string.

We ended up checking the value of window.onorientationchange like so:

function is_mobile_device() {
    if (typeof window.onorientationchange != "undefined") {
        return true;
    }
    else {
        return false;
    }
}

This function will return false in all current desktop browsers because typeof window.onorientationchange is “undefined.” On the iPad and other mobile devices it will return a type of “object.”

What other ways are you using to detect mobile devices?

Export data as a CSV with PHP

Posted on February 10, 2010 by tristan

This is a very simple class for constructing basic comma-separated value (CSV) files in PHP. The export method forces the correct headers to initiate a file download. More information can be had in the PHP documentation.

Continue reading →

JSON-RPC 2.0 Implementation

Posted on December 5, 2009 by tristan

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.

```
var MIKU;
```
```
 
```
```
/*
```

 * Method to allow namespacing of new objects within MIKU;

```
 *
```
```
 * Example:
```
```
 * MIKU.namespace('objectname');
```

 * MIKU.objectname = function() { return {'...'} }

```
 *
```
```
 */
```
```
MIKU = function() {
```
```
  return {
```
```
    namespace: function(name) {
```
```
      try {
```
```
        if (MIKU[name]) {
```
```
          throw 'Namespace exists.';
```
```
        }
```
```
        return {}
```
```
      }
```
```
      catch (e) {
```
```
        this.throwError(e);
```
```
      }
```
```
    }
```
```
  }
```
```
}();
```
```
 
```
```
MIKU.namespace('throwError');
```
```
 
```
```
/*
```
```
 * Method to catch MIKU errors
```
```
 */
```
```
MIKU.throwError = function(e) {
```
```
  if (console) {
```

    console.error((e.message || 'MikuError:'), e);

```
  }
```
```
};
```
```
 
```
```
/*
```

 * Init the JsonRpc namespace into the MIKU object.

```
 */
```
```
MIKU.namespace('JsonRpc');
```
```
 
```
```
/*
```
```
 * Miku Json-RPC Implementation
```
```
 */
```
```
 
```
```
MIKU.JsonRpc = function() {
```
```
  var _url = 'json-rpc/call';
```
```
  var _timeout = false;
```
```
  var _requests = [];
```
```
  var _responses = [];
```
```
  var _callbacks = {};
```
```
  var _requestId = 0;
```
```
  var _failures = 0;
```
```
 
```
```
  function _send() {
```
```
    _request();
```
```
    _t = false;
```
```
    _requests = [];
```
```
  }
```
```
 
```
```
  function _request() {
```
```
    try {
```
```
      if (!_url) {
```
```
        throw('undefined post url.');
```
```
      }
```
```
      $.ajax({
```
```
        type: 'POST',
```
```
        url: _url,
```
```
        data: ({
```

          request: JSON.stringify(_requests)

```
        }),
```

        dataFilter: function(data, type) {

```
          //check for php errors
```
```
          try {
```
```
            return JSON.parse(data);
```
```
          }
```
```
          catch (e) {
```

            var phpError = /^.*?(Error|Warning|Notice).*?\:\s*(.*?) in .*?(\/[0-9A-Za-z\/\.\-\_\ ]+).* on line .*?([0-9]+).*$/i;

            var lines = data.split(/\n/g);

```
            $.each(lines, function() {
```

              var error = this.match(phpError);

```
              if (error) {
```
```
                MIKU.throwError({
```

                  message: error[1] + ': ' + error[2],

```
                  file: error[3],
```
```
                  line: error[4]
```
```
                });
```
```
              }
```
```
            });
```
```
          }
```
```
        },
```
```
        success: function(data) {
```
```
          _success(data);
```
```
        },
```

        error: function(XMLHttpRequest, textStatus, errorThrown) {

          // retry after connection failures

          if (XMLHttpRequest.status != '200') {

```
            _failures ++;
```
```
            if (_failures < 3) {
```
```
              _request();
```
```
              return;
```
```
            }
```
```
          }
```
```
 
```

          // give up and throw errors...

          MIKU.throwError([XMLHttpRequest, textStatus, errorThrown]);

```
        }
```
```
      });
```
```
    }
```
```
    catch(e) {
```
```
      MIKU.throwError(e);
```
```
    }
```
```
  }
```
```
 
```
```
  function _success(response) {
```

    $.each(jQuery.makeArray(response), function() {

```
      try {
```
```
        if (this.error) {
```
```
          // check for error
```
```
          throw(this.error);
```
```
        }
```
```
        else if(this.result) {
```
```
          // trigger callback
```

          var callback = _callbacks[this.id];

```
          callback(this.result);
```
```
        }
```
```
      }
```
```
      catch(e) {
```
```
        MIKU.throwError(e);
```
```
      }
```
```
    });
```
```
 
```
```
    // reset callbacks
```
```
    _callbacks = {};
```
```
  }
```
```
 
```
```
  function _genId() {
```
```
    return ++_requestId;
```
```
  }
```
```
 
```
```
  return {
```
```
    version: '2.0',
```
```
    delay: 10,
```
```
    setUrl: function(url) {
```
```
      _url = url;
```
```
    },
```
```
    call: function(args) {
```
```
      var id = _genId();
```
```
 
```
```
      var request = {
```
```
        jsonrpc: this.version,
```
```
        method: args.method,
```
```
        params: args.params,
```
```
        id: id
```
```
      }
```
```
 
```
```
      _requests.push(request);
```
```
      _callbacks[id] = args.onSuccess;
```
```
 
```
```
      if (_timeout) {
```
```
        clearTimeout(_timeout);
```
```
      }
```

      _timeout = setTimeout(_send, this.delay);

```
 
```
```
      return request;
```
```
    }
```
```
  }
```
```
}();
```
```
 
```
```
/*
```
```
 * Testing Below
```
```
 */
```
```
 
```
```
$(document).ready(function() {
```
```
  var rpc = MIKU.JsonRpc;
```
```
 
```
```
  rpc.call({
```
```
    method: 'System.getTitle',
```
```
    params: [
```
```
      'id_13'
```
```
    ],
```
```
    onSuccess: function(result) {
```
```
      console.debug(result);
```
```
    }
```
```
  });
```
```
});
```

Writing a custom WordPress multi-instance widget

Posted on December 3, 2009 by tristan

While working on a soon-to-be finished WordPress theme for a client, I ran into a situation where it would be useful to create a custom widget that they could use to organize content on their site. Basically, they wanted to be able to select a random post or page and display some associated meta data. Essentially a custom image and content teaser.

They were going to be doing this several times throughout the site, but in slightly different configurations. A post here, a page there. It seemed silly to hard-code these features. Using a widget would allow them to swap them out for a Twitter stream, or an RSS news feed in the future.

Making multi-instance widgets in WordPress 2.8+ couldn’t be easier. Here is a good example to start with from the WordPress codex.

```
<?php
```
```
class My_Widget extends WP_Widget {
```
```
	function My_Widget() {
```
```
		// widget actual processes
```
```
	}
```
```
 
```
```
	function widget($args, $instance) {
```
```
		// outputs the content of the widget
```
```
	}
```
```
 
```

	function update($new_instance, $old_instance) {

		// processes widget options to be saved

```
	}
```
```
 
```
```
	function form($instance) {
```
```
		// outputs the options form on admin
```
```
	}
```
```
}
```
```
register_widget('My_Widget');
```
```
?>
```

And here is my finished widget (evolved from the above example).

```
<?php
```
```
/*
```
```
 * Custom mini-post widget
```
```
 */
```

class FGX_MiniPost_Widget extends WP_Widget {

```
	function FGX_MiniPost_Widget() {
```
```
		// widget actual processes
```

		parent::WP_Widget(false, $name = 'Floragenex MiniPost', array(

			'description' => 'Display a teaser for a post or a page.'

```
		));
```
```
	}
```
```
 
```
```
	function widget($args, $instance) {
```
```
		// outputs the content of the widget
```
```
			global $post;
```
```
 
```
```
			extract( $args );
```
```
			$type = $instance['type'];
```

			$include = (!empty($instance['include']) ? explode(',', $instance['include']) : '');

			$category = (is_numeric($instance['category']) ? (int)$instance['category'] : '');

```
 
```

                        // Set up query for posts with the provided filters

```
			query_posts(array(
```
```
				'post_type' => $type,
```
```
				'post__in' => $include,
```
```
				'post__not_in' => array($post->ID),
```
```
				'cat' => $category,
```
```
				'post_status' => 'publish',
```
```
				'meta_key' => 'teaser_value',
```
```
				'meta_value' => '',
```
```
				'meta_compare' => '!=',
```
```
				'orderby' => 'rand',
```
```
				'posts_per_page' => '1'
```
```
			));
```
```
 
```
```
			echo $before_widget;
```
```
 
```

                        // Output widget, if a post exists that matches our query

```
			if ( have_posts() ) :
```

				while ( have_posts() ) : the_post();

					$post_meta = get_post_custom($post->ID);

					echo (!empty($post_meta['image_value'][0]) ? '<a href="' . get_page_link() . '">' .

							 '<img alt="image" src="' . get_bloginfo('template_url') . '/scripts/timthumb.php?src=' . htmlentities($post_meta['image_value'][0]) . '&h=62&w=180&zc=1" />' .

```
							 '</a>' : '') .
```

							 '<h3><a href="' . get_page_link() . '">' . get_the_title() . '</a></h3>' .

							 '<p>' . htmlentities($post_meta['teaser_value'][0]) . '</p>' .

							 '<p><a class="learn-more" href="' . get_page_link() . '">learn more</a></p>';

```
				endwhile;
```
```
			else:
```
```
				echo '<p>No posts found.</p>';
```
```
			endif;
```
```
 
```

                        // Very important to reset the query here.

```
			wp_reset_query();
```
```
 
```
```
			echo $after_widget;
```
```
	}
```
```
 
```

	function update($new_instance, $old_instance) {

		// processes widget options to be saved

```
		return $new_instance;
```
```
	}
```
```
 
```
```
	function form($instance) {
```
```
		// outputs the options form on admin
```
```
		$type = esc_attr($instance['type']);
```

		$include = esc_attr($instance['include']);

		$category = esc_attr($instance['category']);

```
 
```

                // Get the existing categories and build a simple select dropdown for the user.

```
		$categories = get_categories();
```
```
 
```
```
		$cat_options = array();
```

		$cat_options[] = '<option value="BLANK">Select one...</option>';

```
 
```
```
		foreach ($categories as $cat) {
```

			$selected = $category === $cat->cat_ID ? ' selected="selected"' : '';

			$cat_options[] = '<option value="' . $cat->cat_ID .'"' . $selected . '>' . $cat->name . '</option>';

```
		}
```
```
 
```
```
		?>
```
```
			<p>
```

				<label for="<?php echo $this->get_field_id('type'); ?>">

```
					<?php _e('Content type:'); ?>
```
```
				</label>
```

				<select id="<?php echo $this->get_field_id('type'); ?>" class="widefat" name="<?php echo $this->get_field_name('type'); ?>">

					<option value="post"<?php echo ($type === 'post' ? ' selected="selected"' : ''); ?>>Post</option>

					<option value="page"<?php echo ($type === 'page' ? ' selected="selected"' : ''); ?>>Page</option>

```
				</select>
```
```
			</p>
```
```
			<p>
```

				<label for="<?php echo $this->get_field_id('include'); ?>">

					<?php _e('Include post IDs (optional):'); ?>

```
				</label>
```

				<input id="<?php echo $this->get_field_id('include'); ?>" class="widefat" type="text" name="<?php echo $this->get_field_name('include'); ?>" value="<?php echo $include; ?>" />

```
			</p>
```
```
			<p>
```

				<label for="<?php echo $this->get_field_id('category'); ?>">

					<?php _e('Include category (optional):'); ?>

```
				</label>
```

				<select id="<?php echo $this->get_field_id('category'); ?>" class="widefat" name="<?php echo $this->get_field_name('category'); ?>">

					<?php echo implode('', $cat_options); ?>

```
				</select>
```
```
			</p>
```
```
		<?php
```
```
	}
```
```
}
```
```
 
```
```
// register widget
```
```
register_widget('FGX_MiniPost_Widget');
```
```
?>
```

Just paste this code in your theme’s functions.php file and the widget should appear under your available widgets.

This was a quick braindump post, so please feel free to post with any specific questions.

Create and list new tickets through the Assembla API

Posted on October 23, 2009 by tristan

A while back I created a PHP library for interacting with the Assembla Ticket API. I thought it might be useful to someone, so here it is.

You can use this library to create and list tickets that exist for one of your Assembla spaces. It’s useful for integrating bug reporting and other feedback features into an application that you may be developing. This code is very much a work in progress, so please let me know if you encounter any bugs or have any new feature requests.

You can view and download the code on GitHub:

Moving your blog off Blogger to a self-hosted WordPress site

Posted on October 19, 2009 by tristan

I have a client who absolutely loves WordPress, but one of her long-time blogs has been hosted at Blogger since the dawn of time. Luckily, thanks to some persistence and a handy WordPress plugin, she’s now happily blogging with WordPress.

Continue reading →

New Post on Open-Source in Academia [EMU Marketing]

Posted on September 5, 2009 by tristan

Just wanted to direct your attention to my new post over at EMU Marketing on open-source software in academia:

http://emumarketing.uoregon.edu/tristan/2009/09/04/coding-open-the-benefits-of-free-and-open-source-software-in-academia/

Check it out and leave us a comment!

Tristan Waddington

Web and Mobile Development

Category Archives: Software Development