Categories
Code

JavaScript the WordPress Way / Part 2

In Part 1 we discussed the conflicts that can occur on a WordPress site if themes and plugins add JavaScript using <script> tags. We introduced the wp_register_script and wp_enqueue_script functions developed to avoid these conflicts.

In this section we’ll deal with a more complicated example and use Google’s AJAX libraries API to lower your bandwidth costs. We’ll also take what we’ve learnt about including JavaScript and apply it to our CSS.

Categories
Code

JavaScript the WordPress Way / Part 1

Two of the most important WordPress functions are often ignored by WordPress theme and plugin developers. This is the fault of the functions themselves, they need to improve their PR and hire better publicists.

It’s also possible your theme or plugin will work perfectly well without these functions on its own. Problems will arise when your theme or plugin both use the same JavaScript library or if Prototype and jQuery are both used on the same site.

These functions are used to add JavaScript to the html, either in the head or the footer.

Introducing wp_register_script and wp_enqueue_script

Categories
Code

Rounded Corners Everywhere

Spending some time looking at CSS3 support on caniuse.com, I noticed how similar browser support for border-radius and rgba colours is:

rgba-vs-border-radius

The striking similarity allows us to use both the old graphical and new css3 methods for rounded corners, giving us the same look in almost all browsers but without wasting the bandwidth of users with modern browsers.

On a previous version of this website, I used this method with the following CSS:

.aktt_widget .aktt_tweets {
  background: #999
              url(10pxrounded-210w-24.png)
              no-repeat top center;

  background: rgba(153,153,153,1) none;

     -moz-border-radius: 10px; /* FF1+ */
  -webkit-border-radius: 10px; /* Saf3+, Chrome */
          border-radius: 10px; /* Opera 10.5, IE 9 */
}

Browsers that don’t support rgba colours use the first background call which includes an image to emulate rounded corners. Browsers that do support rgba use the second background call, which includes a fully opaque colour but no background image, for the most part these browser can interpret the border-radius calls that follow.

This method falls over in Opera 10.1, which displays a square border, and will fall over in IE9, which will interpret the border-radius call and download the image. I don’t see these couple of exceptions as a big problem, as browser support always involves catering to the majority.

Categories
Opinion

Confirming a caller’s identity

The ATO called me last week and asked for my middle name and date of birth to confirm my identity. I told the operator that I wasn’t in the habit of giving out my personal details to incoming callers.

Rather than try to convince me that anyone could answer my mobile phone, the operator agreed it would be foolish to give out such details. He gave me his extension number, and a phone number where I could verify he was from the tax office.

Being the cynical sort, or paranoid (I’ll let you decide), I googled the ATO’s website to confirm the number. It was legitimate. I called back and reconnected to the operator immediately. The entire process took less than 30 seconds.

It got me thinking: Googling ‘<number> site:ato.gov.au’ in hope the ATO had slipped up and the non-public number was on their website was an inefficient step.

A more efficient way to confirm the number would be for the operator to give out an ATO URL: ato.gov.au/<number> being the logical choice. At the URL, there could be a short message informing the visitor that the number is an ATO phone number. Robots.txt would be used to exclude search engines from indexing that URL.

It’s a simple fix that costs the ATO very little and protects them and their tax payers.

Categories
Opinion

10 Ways to Draw Traffic to Your Site

Once you’ve started your site, your blog, or real time web app, there’s no point publishing and just hoping people will come. With that in mind, let me present ten ways to increase your visitor numbers.

1. Top Ten Lists

Create spurious top ten lists for an immediate spike in traffic. 24 hours later, you can go into Google Analytics and get a warm fuzzy feeling as your visitor numbers increase. It’s best to ignore bounce rate, and average time on site.

While your first time visitor numbers have increased, it’s unlikely that many of them will convert to regular visitors or subscribe to your RSS feed; but that was never the goal. The goal was to increase your visitor numbers: always handy for boardroom presentations.

Categories
Opinion

Never too old

My grandfather passed away last Sunday, November 22nd 2009, at the grand old age of 97.

There are many reasons I respected my grandfather. After all, he was my grandfather. I could have chosen to write that he became a full-time carer of my grandmother in his 80s, how active he was in his church community, or any number of things.

But it’s his decision to get a computer and onto the internet about three years ago, aged 94 that prompts this piece. Not that this was his greatest achievement, but because we write about the internet here.

To put this into perspective, he was 25 when Alan Turing described the Turing Machine and 65 when the Apple II launched. He was already 80 years old when Microsoft released Windows 3.1.

It would be re-writing of history to say that granddad was the most competent computer user in the world. A few months ago he left this message on my answering machine:

Oh dear, oh dear, oh dear. <click>

I called back a few minutes later and he was slightly upset because he’d lost an email he’d written to my sister. For people my age, this wouldn’t be a big deal — we know how and where to look for a stray email. If the message is completely lost, using computers and sending emails is our second nature so it takes only a few moments to recompose ourselves and the email.

Another time, he’d managed to block my aunt and uncle’s email address in Outlook and needed help unblocking it.

Aged 94, Granddad gave it a try. Years later and weeks before he passed away, he was still trying to learn more about the software on his computer. I could not be prouder of having a man like that as my granddad. He learnt from us and we learnt from him.

If you’re not willing to try something because you think you’re too old, try anyway and you might surprise yourself. If you don’t want to try, that’s fine too.

Dedicated to Ron Feltscheer, Jan 1st 1912 ? Nov 22nd 2009.

Categories
Opinion

Charging for themes? Do the right thing!

Of all the WordPress functions, I think wp_register_script, wp_register_style, wp_enqueue_script, and, wp_enqueue_style are the most elegant. It’s possible to get away with using only the wp_enqueue_* functions, but I prefer to use both for a little bit more control.

For the uninitiated, these functions allow you to add JavaScript and CSS files to the header (or footer, in later versions of WP) without running of the risk of another plugin adding the same file, that is, you avoid the following:

<script type="text/javascript" source="http://.../a-plugin/jQuery.js"></script>
<script type="text/javascript" source="http://.../a-plugin/plugin.js"></script>
<script type="text/javascript" source="http://.../my-theme/jQuery.js"></script>
<script type="text/javascript" source="http://.../my-theme/theme.js"></script>

If you develop themes or plugins for WordPress and are unaware of these functions, you should refer to the codex to get the low down on at least wp_enqueue_script, and wp_enqueue_style – these register and queue the files, the wp_register_* functions register the file ready to be queued for output.

The Rant

Despite the value these functions can add to themes and plugins, they are under-utilised in development. The functions have wider adoption in plug-in development, but it’s still well below 100%. In theme development adoption is virtually non-existent (at least in the themes I’ve used).

This failure to code properly is evenly spread across both free and paid themes. I?m happy to look the other way for free themes. After all, the motivation behind the theme may have been to learn WordPress development.

In commercial themes, particularly those above the US$30-$35 price point, it’s downright frustrating that these products haven’t been developed properly.

When someone purchases a theme, they shouldn’t have to debug the product to find out why a JavaScript framework is being included twice. The reason for the purchase is that they either don’t want to, or know how to, develop.

Avoiding costly mistakes

Evaluating a commercial theme on behalf of a client triggered this rant. At $195, it’s quite expensive in the world of WordPress. As I was viewing the source code of the online demo, I discovered the faux pas. We’ll advise against using that theme as a starting point. In fact, within short time we’d found a theme $195 cheaper that would do the job.

Looking at the source code of a demo site is usually enough to tell you how the theme is inserting its scripts:

  • Both <link> and <script> tags will use single quotes around attributes (‘), rather than double quotes (“),
  • CSS <link> tags will have an ID attribute ending in -css, eg: id=’shadowbox-css-css’, and,
  • JavaScript and CSS files include the version number as a query string eg jQuery.js?ver=1.3.2 (although a hook can be used to remove this)

Making sure that the wp_register_script, wp_register_style, wp_enqueue_script, and, wp_enqueue_style are included properly will save time, bandwidth and also avoid some detrimental conflicts.

Categories
Code

Partying like it’s 1999

A little under twelve months ago I wrote a post on a JavaScript base file I’d set up:

I could have used an existing frame work, such as the increasingly popular jQuery; I decided to use my own, which contains only the very basics, rather than have a larger file containing rarely used functions

source (emphasis added for this post)

Within a couple of months of writing that, I was a convert to jQuery. There was no single reason for my conversion, from memory some of the reasons where:

  • the selector engine,
  • plugin availability,
  • documentation — both official and unofficial tutorials, and,
  • lazyness

It’s the last one that probably had the biggest influence, I’m too lazy to reinvent the wheel, and without using a framework that’s what I was going to be doing. Frequently. Examples in blogs I read, weather it be group blogs, such as A List Apart, or one person shows, such as CSS-Tricks were all beginning to use jQuery. If I were to stick to my guns and not use a framework, I’d be doing a lot of rewriting.

As for the functions that are rarely used? It’s really only the Ajax group of functions that I’ve never used, for the simple reason that I don’t like Ajax. In many of the situations it’s used, it is often fanciness without necessary function. Then again, ask me about Ajax in a couple of months’ time.

Categories
Opinion

How to get 4.3 stars for customer service!

Coincidently, a few days after deciding to write this post, I was listening to NPR’s On the Media reporting on the problem with online reviews:

When it comes to rating products online, it turns out we’re way too nice. The average out of 5 stars for things like dog food, printer paper or boots is 4.3 and … all that kindness is actually kind of a problem.
Source

Which presents a problem: I’m about to give a positive review to Soupgiant’s host, QuadraHosting, due to their customer service, despite some major technical problems in recent months. This leads to one question: Am I being too nice?

In July, all sites on our hosting account — fortunately none of them belonging to clients — experienced an outage due to a data centre power failure.

Since then, it appears both Quadrahosting and Equinix have been working to ensure such a problem doesn’t happen again.

Another outage on Sunday Oct 12, 2009, between 8:20am and mid-afternoon, and my thoughts were that a change of webhosts was not only necessary, but probably urgent. As the outage was long enough to trigger an SLA credit, I wrote to QuadraHosting and requested a 10% credit to our account, which they subsequently denied:

Section 4a states that we do not cover loss of external power due to ‘[an] inability to obtain raw materials, supplies, or power used in or equipment’

If this was related to our internal power set up, then we could credit you, though it was the main power source that was [affected].

We apologise for this.

I responded that I disagreed with their assessment ‘as it was an upgrade by the data centre’ but that I accepted their decision. Rather than leave it at that, I detailed my real concerns which was rather more than the $2.99 I was hoping to get back. My concerns are:

…that since the external / power company outage a couple of months ago, I’ve found that my server is going down more frequently. I don’t know if the timing is a coincidence, but the result is I no longer am able to recommend you to my clients.

(Pro tip: at no point did I call them thieves, or worse, reality TV contestants)

Rather than leave respond with a cursory, ‘thank you for your comments,’ Brendan, who was handling my case, responded:

We appreciate you taking the time to provide us with some feedback. The upgrade was related to the power of the Data Centre. Please note that we do purchase power from them and this is considered as a third party source.

The upgrades to the systems in recent weeks were planned and announced to all our customers.

With this in mind, we have decided to give you credit to cover one week of your hosting plan.

Hopefully you will see major improvements in our systems once this power issue has been completed.

I believe there will be a similar incident in two weeks which we be very similar to the power outage we have recently experienced.

It seems there are major power upgrades at the data centre related to expansion. We will announce this to our customers when we have more information.

The end result, after some fine customer service, an explanation of how they obtain their power, and a little bribery, is that I’ve decided to stick with QuadraHosting while they and their data centre fix the power issues. If the problems continue after the upgrades, then I’ll reconsider my options.

Having dealt with a number of hosts and the kind of customer service that involves a student reading a script, I do think good customer service at a host is worth sticking around for. While their servers at the moment are a little up and down, the customer service outweighs that disadvantage.

All in all, I give QuadraHosting a 4.3 star rating for their customer service.

Categories
Code

Including WordPress’s comment-reply.js (the right way)

Since threaded comments were enabled in WordPress 2.7, most themes include the following line in header.php

<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>

This code checks if the visitor is browsing either a page or a post and adds the JavaScript required for threaded comments if they are.

I prefer a slight variation

<?php
if ( is_singular() && comments_open() && get_option('thread_comments') )
  wp_enqueue_script( 'comment-reply' );
?>

My variation checks if the visitor is browsing either a page or a post, if comments are open for the entry, and finally, if threaded comments are enabled. If all of these conditions are met, the JavaScript required for threaded comments is added.

If you run your wp_enqueue_script calls in functions.php, as I do, this is the code to use:

<?php
function theme_queue_js(){
if ( (!is_admin()) && is_singular() && comments_open() && get_option('thread_comments') )
  wp_enqueue_script( 'comment-reply' );
}
add_action('wp_print_scripts', 'theme_queue_js');
?>

The call is added to the wp_print_scripts action as is_singular and comments_open are unknown during the init action.

 

Note: I’ve written a plugin to make the comment-reply JavaScript unobtrusive, it’s call Rapid Comment Reply.