Wednesday, 20 January 2010

WordPress Theme URL Tip

Lately I've been putting a lot of hours into developing a couple of sites using the WordPress and WPMU platforms. These platforms are a solid starting point for pulling a content/post based site together relatively quickly - the wealth of useful plugins also helps reduce the chance of you having to re-invent the wheel.

Having said that there is still a lot to do to create a professional website that has it's own look and feel - much of this can be achieved by creating a custom theme.

If you are creating a custom theme you will probably need to link to multiple elements within that theme's directory structure. The most common approach to do this is somthing like this:

<img src="<?php bloginfo('stylesheet_directory'); ?>/images/myimage.png">

<?php
echo '<img src="'.get_bloginfo('stylesheet_directory').'/images/myimage.png">';
?>


I've certainly been using a lot of the latter style, until today.

I decided to clean up my code a bit and put the following line at the top of my theme's functions.php file:

<?php
if(!defined('WP_THEME_URL')) {
define( 'WP_THEME_URL', get_bloginfo('stylesheet_directory'));
}
?>


Then I replaced all the get_bloginfo('stylesheet_directory') instances with the constant WP_THEME_URL. Now my code is a lot more readable and there is less typing.


<img src="<?php echo WP_THEME_URL; ?>/images/myimage.png">

<?php
echo '<img src="'.WP_THEME_URL.'/images/myimage.png">';
?>


Using a constant like this should provide a slight performance increase here too - I haven't done any performance tests, but the current get_bloginfo() process is a fairly convoluted chain of function calls.

Note: Just in case the WP platform does start using this constant in the future, the constant's value is not set if it is already defined.

UPDATE: After this post was made I discovered WordPress defines a TEMPLATEPATH constant, but no constant currently exists for the TEMPLATEURL.

Saturday, 9 January 2010

Animated "Loading" Image Generator

Yesterday somebody sent me an email introducing me to http://www.ajaxload.info/ and it's such a handy tool I thought I should share it here.

Generate a customised animated gif by choosing the style you want, the background and foreground colors and whether the background should be transparent.

Here are some quick examples...








Tuesday, 22 December 2009

Updating Google Map Marker's z-index

Lately I've been working on a web application that uses Google's Maps API. It's been an interesting and engaging project.

One of the limitations of the current Maps API is that the z-index of a marker cannot be changed after it has been created. The client requested that the selected marker "popped to the front" as some markers obscured others in certain map areas depending on zoom and closeness of coordinates. This was a reasonable request and would enhance the UI, but was not so easy to implement.


Mike Williams gives a good introduction to this issue and details of how to set the z-index of the marker when it is created with addOverlay() in his Google Maps API Tutorial. Having read this, I attempted to re-create each marker when it was clicked and keep track of the top most z-index. I had some success but had unpredictable z-index results and it was definitely an inefficient way to produce the desired effect.

I decided to browse the DOM and see if I could find a better way to do this. I found a guide to Undocumented Google API features which seems to be mostly out of date, but contained the very important details of how to calculate a Marker's default z-index:

Use marker.setZIndex(Math.round(marker.getLatitude()*-100000)) to get a moved marker to overlap correctly.

Even though setZIndex() and getLatitude() are not valid methods in the current API, it's easy to understand the calculation.

In my application I was already using a unique icon for each marker so that they displayed sequential letters (A,B,C...) and had added an index property to the marker object. I was able to leverage this with a bit of jQuery magic to find each icon in the DOM and alter the CSS z-index value. Since the default z-index is something like -108619296, I created a function to toggle the z-index between normal and front positions by multiplying it by -1.

icon = $("#mapbox div div div img[src='/images/markers/"+marker.index+".png']");
zidx = icon.css('z-index');
icon.css('z-index',zidx*-1);


Just to make sure that no other marker was still in the top position, I looped through my array of markers and reset the z-index with this function.

function reset_zorder(marker) {
$("#mapbox div div div img[src='/images/markers/"+marker.index+".png']").css('z-index',Math.round(marker.getPoint().lat()*-100000));
}


Obviously none of this is a copy+paste solution. but it should give anybody needing to manipulate Google Maps MAP Marker z-index a good example to work from.

Thursday, 17 December 2009

"X-Moz: prefetch" and skewed page-hits

Earlier today I installed a WordPress plugin recommend for tracking the popularity of posts. The plugin is unsurprisingly named "Recently Popular". After installing the plugin I ran some quick tests and found that I was getting extra hits recorded. I spent a bit of time back-tracking to find the source and after systematically disabling all other plugins and page elements found that it was firing in wp_head() in the page header.

After some more digging, I noticed that the extra hit was for the chronologically next published post and that the problem occurred in both WordPress and WordPressMU. This wasn't making a lot of sense so I decided to try a different browser - more of a sanity test than anything. That's when I found it didn't occur in Chrome, or Opera - just Firefox 3.5.6 that I'd upgraded to a few hours earlier.

I fired up the Live HTTP Headers add-on and checked out the requests Firefox was making. It was definitely making both post requests. I took a closer look at the second request and noticed the extra header "X-Moz: prefetch".

A quick search for X-Moz: prefetch turns up Mozilla's Link prefetching FAQ which gives a good description of what is happening and why. WordPress creates a tag similar to the following when wp_head() is executed:

<link rel='next' title='The Next Post' href='http://your_domain/year/month/day/the_next_post/' />

I am unaware of anyway to disable the prefetch hints. You could edit your header.php and remove the wp_head() statement, but many plugins rely on the execution of this function so results could be unexpected and undesirable. The issue for me was not that the hint was published but that the prefetch hits were being counted as real post requests, as well as the actual request when I clicked through a second or two later. This would seriously skew the perceived popularity of posts.

My solution was to ensure that the Recently Popular plugin ignored post requests that passed the "X-Moz: prefetch" header. Depending on your server configuration, the method of checking the header exists may differ - apache_request_headers() (alias getallheaders()) is only supported when PHP is installed as an Apache module. Most servers should support checking for $_SERVER['HTTP_X_MOZ'].

I wonder how many other people will wonder why their page hit stats have mysteriously increased without any increase in ad impressions, etc.

I will contact the plugin author to suggest an update once I've published this post.

Friday, 27 November 2009

How To: Android Scrollable Divs



Lately I've been working on a webapp for the Motorola Droid and a QNX CAR device. The application interface is a split screen with one half being a list of items of variable length. Neither of these browsers on these devices support iframes or scrollable divs, so the approach used in a traditional browser was not an option.

The application was using jQuery, so using the jQuery UI Draggable plugin was a natural choice. It was quick and easy to implement and worked well on the QNX device, but didn't work at all on the Android browser.

To get the prototype version of the application finished on time for the deadline, I resorted to adding up/down buttons to the interface that scrolled the div content by manipulating the margin-top via javascript. This satisfied the client, but as a solution it was less than optimal, and in my opinion it made the UI feel clunky.

At the time that I write this, there's not a lot of information about how to deal with this issue in the Android browser. It took me a while to discover that this issue is also a problem for the iPhone/iPod Touch browser and since Android's browser also uses WebKit, there is already a working solution called iScroll developed by Matteo Spinelli on Cubiq.org.

This code utilises WebKit's "touch" events, which are akin to click events, but are only fired by touch screens. You can find a great introduction to Javascript Touch Events on Michael's "Back To The Code" blog. If you're new to developing mobile webapps, you should probably also take a look at iPhone Webapps 101.

Hopefully posting these bits and pieces together here will help save somebody a lot of time searching on Google.

Friday, 20 November 2009

Skype vs XAMPP

I like Skype. I use it everyday. Most of the people I need to communicate with are Skype users. Skype handles chat, voice and file transfers to individuals and groups, and one-to-one video-chat, and allows you to cheaply connect to real-world telephony and SMS too. I'd have to say I am a bit of a fan.

The only annoyance I have found is that when I reboot my PC (which is not that often), Skype starts up and grabs port 80 before my XAMPP install starts. This means that my local XAMPP Apache install fails to start. In the past I've been forced to quit Skype, start Apache and then restart Skype. No big deal, but a little annoying.

Yesterday I had a closer look at Skype's Advanced Settings and found this problem can be resolved by simply unchecking the "Use port 80 and 443 as alternatives for incoming connections" option and restarting Skype. Simple stuff, but I though it was worth posting.

Monday, 9 November 2009

Parsing and visualising JSON

Over the last few days I've been working on a project that uses some fairly complex JSON objects. Because JSON (JavaScript Object Notation) is a lightweight data interchange format, it can be a great way to grab complex data structures via Ajax. It's been said that JSON is "the fat-free alternative to XML".

In theory JSON is easy to parse, but if your data structure starts to contain numerous nested objects and arrays, it can be come hard to keep track of and starts looking like a long jumble of punctuation.

I found Brenton Fletcher's JSON 2 HTML to be a quick and easy way to check your JSON syntax and visualize the data. You can either copy+paste a JSON string or sumbit a URL and the will page load the JSON string from the URL. It's definitely worth checking out if you're working with JSON.