Bryan Pieper's Blog : 2011

Nov
08

Mobile Orientation Detection JavaScript

Posted by Bryan in Web Development

Looking for a plugin for realtime detection of the orientation of a mobile device using JavaScript?

I wrote a small jQuery plugin that allows you will bind to the window and attach the current mobile device orientation to the body using either 'portrait' or 'landscape' in the body tag. This will allow you apply CSS rules based on the orientation.

Source Code:
https://github.com/bryanpieper/mobilejs/blob/master/js/jquery-mobileorientation.js

When the device is in the portrait orientation, the body tag will have the 'portrait' class:

<body class="portrait" ...>

When the user rotates the device into the landscape orientation, the body class will be:

<body class="landscape" ...>

It leaves your custom classes in place and only replaces the two class names above.

Aug
13

Django JavaScript and CSS Compressor/Minifier

Posted by Bryan in Web Development

Looking for a bolt on DJango app to compress/minify your JavaScript and CSS files? I created the staticcomp Django app for just that purpose.

Benefits:

  • Ability to compress/minify JS/CSS files on-demand
  • Increase website performance by reducing the total number of JS/CSS file requests
  • Build modular JS/CSS files by page / section instead of relying on large files
  • No need to use date-based file names or query string values to force the browser to download changes to your JS/CSS files
  • Improved Google Page Speed score and SEO benefits from a faster overall website
  • Integrated with UglifyJS, the same JavaScript compressor used by jQuery
  • Allows you to create your own backends or use one of the four existing
Jul
16

jQuery Hashchange Event Plugin

Posted by Bryan in Web Development

Looking for a Javascript plugin to react to the hash value changing on your page?

The jQuery Hashchange Plugin will enable to you attach to the hashchange event for all clients.

<script type="text/javascript">
// the callback will receive the new and old hash values as arguments
$(window).hashChange(callbackFunction);

// or you can bind to the "hashChange" event
$(window).bind("hashChange", function(e, newHash, oldHash) {
    console.log("new: " +  newHash);
    console.log("old: " + oldHash);
});
</script>

Basically, everytime the hash value changes, you can respond as needed by the requirements of your page. This is useful for ajax views, tabs, and other layout changes in your page that need to be based on the hash state.

The plugin also supports Modernizr v2.0+ to detect the "hashchange" event for modern browsers.

The jquery.hashable.js the source code.

View an example HTML page.

Jul
02

Memcached Key Not Found using Nginx and Django 1.3

Posted by Bryan in Web Development

memcachedThePiepers.net serves the compressed JS and CSS files using the nginx memcached module. The python backend compresses the content and stores the content in memcached to be served via nginx.

This weekend, I upgraded to Django 1.3. After some testing, the JS and CSS files were bypassing memcached and being served by python. As you can imagine, this is not the most efficient method to serve static content.

Jun
12

Use Google Analytics to Track 404 Pages

Posted by Bryan in Web Development

Looking for a way to track your 404 pages using Google Analytics? Modify the ‘_trackPageview’ function call.

By default, Google Analytics doesn’t have a way to classify the 404 pages. Before you begin, you’ll need to be able to detect a 404 page on the server side. If you cannot determine the response status, this will not work for you.