SimpleNote is a note taking app that works in a web browser or through an iOS app. It synchronises your notes almost instantly when you pause typing.  I discovered that I could use it alongside the new iPad’s dictation feature to quickly write things on my PC.

It’s so quick that you don’t see the synchronisation happen in the video – the text has appeared on my PC’s screen before I get the camera up to it.

I’m totally aware of the irony that if you can afford an iPad then you can almost certainly afford dictation software.

As I started a new project today I decided to quickly review my CSS compatibility habits. Here are my findings!

History

I suppose, relative to some developers, I’m pretty new to the intricacies CSS and, in particular, browser compatibility bugs.

When I started front-end web development developing seriously, around two years ago, I was determined to be as browser-compatible as possible. I’d come from a large corporate where the monolithic IT was running on Windows XP and with Internet Explorer 6, so I worked on the assumption that it was still around.

My first few projects were a bit slow and painful as I both learned about the details of CSS and how it’s properly used, and worked through the browser layout bugs.

As time has gone on I’ve adopted more CSS2.1 and CSS3 selectors and declarations as I attempt to implement complex designs as efficiently as possible. And as I’ve done that I’ve dropped support for IE6, unless it’s really needed, in which case it’s a chargable extra. If I don’t need compatibility with IE6 then I can work more quickly and produce a better result.

As I went along I learned a few tricks that have become second nature. As I started work today on a new project I chose to quickly review these habits and see which I can kick with either:

• no loss of quality – given that I no longer support IE6 by default; or
• no loss of quality using compatibility libraries

ALL of the tricks and tools I use are fine on Mozilla Firefox, Chrome, and Safari, so my only real concerns are IE compatibility.

IE6 double-margin bug

I discovered this the hard way. See the write up on positioniseverything.net for details if you don’t know about it.

Since discovering this bug I’ve always deliberately coded with opposing float/margins. So if I float: left, I apply right margin.

This bug is only present in IE6, which I’m no longer supporting. So I can drop that way of thinking for standard developments.

CSS 2.1 Selectors

caniuse.com compatibility

I make good use of the > selector and :first-child/:last-child selectors for styling nested lists and WordPress widget/sidebar areas. These are not compatible with IE6 and before, but are fine for IE7 and greater.

So these are safe to use with no modification to my methods.

I can achieve IE6 compatibility if I need to with with Selectivizr as long as JavaScript is enabled.

Generated Content

caniuse.com compatibility

I use :before/:after a fair bit – mostly for implementing image overlays and complex bullets on list items.

These are not compatible with IE6 OR IE7. IE8 or greater is fine. My options here are to drop support for IE7 by default (a distinct possibility) or accept slightly downgraded appearance on IE7. Both are acceptable approaches and result in the same thing – I use :before and :after without hesitation.

nth-child

I don’t use nth-child a lot, but it is useful to have in your armoury. :nth-child doesn’t appear in IE until IE9 – it’s not supported in IE6, 7 or 8. But use of Selectivizr again gives you compatibility.

So as long as I use Selectivizr, I can use nth-child at will.

CSS3: border-radius and box-shadow

I use these CSS styles to efficiently implement some of the effects that are commonly found on designs. They only work in IE9+ though. There are two options here:

• Accept the limitation and “progressively enhance” on newer browsers.
• Do something to fix it – such as CSS3 PIE or one of the other solutions

I think I’ll choose to do this on a case-by-case basis based on the website audience and needs of the site.

Summary

So, it looks like I’ll do the following in future:

• Drop support for IE7 by default, unless specifically required
• Install and use Selectivizr where appropriate
• Ignore the IE6 double-margin bug
• Use CSS2.1 selectors (>, :first-child, :last-child)
• Use generated content (:before, :after)
• Use nth-child (and other Selectivizr-supported selectors)
• Use border-radius and box-shadow – implementing alternatives or accepting degradation for IE8 or lower if required

Notes

You’re STILL debating this old-hat stuff?

Well, yes. I pride myself on doing things well. I’ve been using progressive enhancement tricks, but they slow me down, and one of the things I try to do is get as much VALUE as possible for clients. The less fiddling I have to do to get something to work, and the less cross-browser testing I have to do, the better.

The future holds much good stuff, but as yet I don’t, for example, use HTML5: it’s widely supported, but far from universal and doesn’t add much value to what I’m doing at the moment.

Selectivizr

Selectivizr is dependent on one of the very common JavaScript libraries (jQuery, Prototype, Moo Tools), and as most of my work uses jQuery too, this isn’t a problem.

The only issue is if scripts are disables in the browser. I’m guessing that if a user is still on IE6 or 7, they’re probably not the kind of user that will have scripts disabled – unless their administrator has done it for them. In any case, if the percentage of visitors with those browsers is small, then the percentage with scripts disabled as well is minute. I accept this as a limitation of my approach.

References

The following places were useful in putting this review together:

• caniuse.com
• QuirksMode CSS Reference

I use the Options Framework plugin as a way of quickly adding theme options to custom themes that I build.  I’ve been using it to store timeout values for data that’s cached using transients, but I wanted to force a refresh of the cached data whenever the theme options got saved.

After scouring the code and learning a little about WordPress’ settings API (which, while not strictly necessary for this job, was an interesting diversion) I eventually worked out that I just needed to hook into the update_option_{optionname} action hook.

The trick is to know what option name the Options Framework is using.

Well, I can reveal that it uses an option name of the form optionsframework_themename, so if your theme is called “mytheme” then it uses option name optionsframework_mytheme

UPDATE: I love the WordPress community – within a few hours of posting this the plugin developer added a comment explaining that one of the features of this plugin is that you can change the option name used. See his comment for details, or look in the plugin’s sample files to see how it works. And big thanks Devin!

Here’s some code:

// This refreshes the tweet cache
function mytheme_refresh_caches() {
	delete_transient('mytheme_cached_tweets');
	// mytheme_get_tweets() sets the transient cache if the
	// transient has expired or doesn't exist
	$tweets = mytheme_get_tweets();
}
add_action( 'update_option_optionsframework_mytheme', 'mytheme_refresh_caches' );

But I’ve always struggled with using them for bullets for list elements of variable height. Yes, I’ve used the :before and :after pseudo elements for such things, but I’d like to avoid doing so if possible: browser support is mostly OK, but not completely backwards compatible, and they’re harder to diagnose problems with.

Then, yesterday, while I was trying to fix such and issue with list elements that got bigger than I thought they would, I came across a really neat technique that solves this issue. I’m indebted to the The Bright Lines blog and it’s the third tip in their post about sprites.

The trick is to align your images diagonally, from top-right to bottom-left. As these images will always appear in the top left of the block/element in which they’re displayed, you need to make sure that there is nothing below or to the right of each image. Aligning them this way achieves just that.

I’m sure this is a complete novice CSS sprite trick, but it’s one I’ve so far missed out on in all my reading about the topic. Hopefully it’s useful to you too?

So, here’s the deal. I want to add some JavaScript globally to a WordPress site in my theme. The print_footer_scripts action hook is ideal so I do:

function prefix_add_script() {
?>
<script type="text/javascript">
  // Script here
</script>
<?php
}

add_action( 'print_footer_scripts', 'prefix_add_script' );

With the code in place everything seemed fine on the front-end of the site, but in the back-end, it was disabling other JavaScript. I ran my console and there were no errors (the usual cause of JS failures). Baffled, I commented out each bit of JavaScript until is was all gone, and then, even just the bare script tags made the JS stop working. I even got my ever patient wife to check my spelling in the tags.

But it wasn’t a JavaScript problem.

My PHP was preventing other code written by actions hooked onto print_footer_scripts from even being printed.

“I wonder…”

It turns out that adding a “return true;” to my little prefix_add_script callback fixes it. I haven’t investigated the WP source, but is suspect that if a callback on a hook doesn’t return true – or, at least, if it returns null, which is the default return value from a non-returning function in PHP, it bails and doesn’t run anything else attached to that hook.

So…key lesson…make sure your action callbacks return a value!

As a newcomer to the charity sector I was slightly nervous and not sure what I would get from and be able to contribute to the conference, which is very much participatory. But I was warmly welcomed, found my place, and contributed usefully to several discussions. I left feeling like a real eCampaigning geek!

I’m sure there will be other posts as I process what I experienced and learned, but this first one is an attempt to reconcile two talks that I went to about communications and behaviour change. The talks seemed to be slightly at odds with each other – competing approaches possibly. But I think they are complementary approaches and we can take useful learnings from both of them and use them together.

I will summarise, at a very high level, what I consider to be the main points of each talk, and then give my own views on how the approaches complement each other.

Remember, I’m new to the campaigning world, so I’m a total novice. I do, however, have a great (and mostly unfulfilled) interest in psychology, philosophy and sociology, and how people behave so I find this stuff fascinating and I hope you don’t mind me giving an opinion.

Prospectors, Settlers and Pioneers

The first talk, on day one of the conference, was by Chris Rose of campaignstrategy.org. He talked about some research that he’s been involved with about how to motivate people.

See the slides and notes from Chris Rose’s talk

The work is based on Maslow’s hierarchy of needs. Maslow suggests that that people have different levels of need.

The lowest levels are basic needs, the people seeking these needs are security driven, they look for safety, security and belonging.

Once people have those needs they look for outer-directed needs. The people seeking these needs are looking for success and esteem.

The highest level of need – the final things people seek to obtain – are inner-directed needs. These are related to creativity, coming up with new ideas.

Rose then groups people at each of the levels of need. He calls security-driven people ‘settlers’, outer-directed people ‘prospectors’, and inner-directed people ‘pioneers’. And he suggests that we can have greater impact by tapping into the different motivational values of each group.

Take the test and find out if you’re a Settler, Prospector or Pioneer

Most eCampaigners, we think, are pioneers. And pioneers are great at trying to communicate with other pioneers, but don’t normally target the values of other groups.

Common Cause

On the second day Casper ter Kuile spoke about his ‘Common Cause‘ approach to campaigning.

See the slides and notes from Casper’s talk

The Common Cause approach says that we all have a common set of values. We hold the values to different extents and with different strengths. But values can be engaged and strengthened by repeated exposure to messages about those values.

This approach takes a longer term view. By repeatedly engaging with people on a particular issue we can get them to care about our cause.

Spot the Difference

It wasn’t made explicit, but I felt that people thought that these approaches were incompatible. That one is short-termist and focused on single issues, and the other is a long-term approach that has potentially greater impact by affecting peoples values.

I’ve been thinking about these approaches though and I think they can go hand in hand for even more power.

Initially the ‘Unconscious Motivation Values’ approach struck me as much more powerful. It helped me understand how other people work a bit more and I will use the ideas in more than just my work on eCampaigning.

The Common Cause approach seemed a little more theoretical (and it’s true that Casper’s work is only about 50% complete) and so had less immediate punch and impact. But I think it has real value too.

What I’d like to do is try combining the two approaches. To make Common Cause work you have to engage people about an issue or value. What I didn’t get from Common Cause was how you go about doing that. But what I got from the Unconscious Motivational Values work was exactly that: principles for engaging people from across the spectrum of Maslow’s hierarchy of needs.

We can repeatedly use the targeting of motivational values to effect a Common Cause type change in people’s underlying value strengths.

An example

I think the example of an energy saving lightbulb was used by Chris Rose. He says that you can ‘sell’ an Eco lightbulb to settlers, prospectors and pioneers using different messages.

I can’t quite twist that example to my needs, so I’m going to take another ‘green’ idea as an example: cycling.

The Common Cause approach says we want people to engage with the issues: road safety, climate change, energy security, sustainable transport, so let’s send messages to people that engage the related values.

The Unconscious Motivational Values approach says ‘How can we sell the idea of cycling to people with different motivational values?’

There’s an organisation called Challenge for Change who run ‘Workplace Cycle Challenges’. These fortnight-long events pitch employers in a town against each other in a challenge to get the most employees to cycle one mile, or for ten minutes.

There are employer leaderboards showing who is ‘winning’. There’s a prize-draw that everyone who takes part is entered into, plus entrants get rewards, such as cinema tickets, just for taking part.

I think this is VERY clever. Advocates of cycling are probably pioneers who become challenger co-ordinations for their employers. They’ll be great at communicating to other pioneers about the positive benefits of cycling. They won’t be bothered by rewards and will possibly see that as a distraction from the real business of saving the planet.

Prospectors are motivated to take part through the rewards and the challenge. They can get their name, and their employers name, up on the website. It’s a matter of pride.

Settlers are motivated probably also by the rewards, but also by the nostalgia: ‘I used to ride a bike as a kid…perhaps I’ll give it a go again’.

But the beauty of the challenge is its subtlety. You only have to ride that one mile or ten minutes. But it has a Common Cause-type of value strengthening. While out riding people might find themselves exhilarated, connected to nature, exercised, free, or aware of the other health and environmental benefits.

To engage a value in a person Common-Cause-style, we need to understand what their motivational values are. Challenge for Change do this brilliantly, and even their name suggests that they use both approaches: a ‘Challenge’ brings about a ‘Change’

Wrapping Up

While Chris Rose’s Unconscious Motivational Values approach seemed initially more useful, I could definitely see the long-term value of Casper’s Common Cause. I’m no expert, and I apologise to both Chris and Casper if I’ve mis-represented or mis-interpreted their research. But I hope I’ve summed up what I learned and how I think these approaches can be used together.

So…who’s got a campaign?

Don’t get me wrong – I love my Heart Hosting and would highly recommend them, but if you’re hosting WordPress you need to know about this particular thing (and the WP-cron thing too!)

This same issue may apply to other hosts too, I’m not sure. If your Twitter Widget Pro isn’t updating then read on and find out.

Update 1:

Knocked up hastily, and it’s my first foray into modifying other people’s work, so I hope I’ve done a good job, but I’ve put together a modified version of 2.3.8 that fixes the problem, for me at least.  I won’t promise to update this when the main plugin gets updated. Discussion seems to be ongoing about whether this issue deserves attention or not.

Twitter Widget Pro – No Background Updates Fix

Heart Internet’s Security Feature

Heart Internet’s security is pretty good.  That’s one of the things I like about them. But one of their features is that they don’t allow a website’s server process to make HTTP requests to it’s own website.  By this I mean that a PHP script serving a page on the domain http://your-domain.com can not make an HTTP request to anywhere on http://your-domain.com

I’m not entirely sure what this prevents – my guess is that it stops you making a PHP script that calls itself and loops forever.

I’ve so far discovered that this has two unforseen consequences:

1. It stop WP Cron scheduled jobs working.
2. It stops Twitter Widget Pro version 2.3.0 and above from working properly.

I did a write up for a post on the Twitter Widget Pro forums.  I’m awaiting a response but thought I’d copy (an edited version of) it here for reference.

My Investigation

I’ve had problems with numerous installs of Twitter Widget Pro not updating tweets and I’ve discovered – I think – that it’s all down to a problem with my hosting and the plugin’s use of TLC Transients. This MAY (or may not) also be the cause of other people’s lack of updates.

The behaviour I was seeing was that I appeared to have different versions of my tweet stream “cached” and I could flick between the different cached versions by changing the settings. So, for example, with one lot of widget settings I might see Tweets A, B and C. With a different set of widget settings I would see Tweets C, D and E. Changing the widget’s settings between the two brought up to two different cached lists. BUT…when I posted a new Tweet NEITHER cached list of Tweets got updated.

I checked the database and noted a few timestamps in transient values in there and then went and checked the code.

TWP uses a hash of the widget options as a key for the transient “cache” of fetched Tweets. See line 710 of the plugin in the _getTweets function:

$key = 'twp_' . md5( $this->_getFeedUrl( $widgetOptions ) );

So that explains why different Tweet settings have different cached lists of Tweets, and how I can switch between them.

But why are they never updating?

Well, I’ve not done a too-thorough inspection of the code but TLC transients seems to use a “loopback” URL to fetch the cached list of Tweets without holding up the user – similar to how WP-Cron works. When scheduled it does:

add_action( 'shutdown', array( $this, 'spawn_server' ) );

And the spawn_server callback looks like this:

public function spawn_server() {
  $server_url = home_url( '/?tlc_transients_request' );
  wp_remote_post( $server_url, array( 'body' => array( '_tlc_update' => $this->lock, 'key' => $this->key ), 'timeout' => 0.01, 'blocking' => false, 'sslverify' => apply_filters( 'https_local_ssl_verify', true ) ) );
}

NOW…my hosting company don’t actually allow me to make these ”loopback” HTTP requests. So, all my installed instances of TWP are broken.

Options for me seem to be:

1. The TWP developer make use of TLC Transients optional
2. I could put some hack in that deletes the transients every now and then. I DO have WP-Cron working (via a Unix cron job), so I could setup a job to clear the transients from the database using that.
3. I could use another plugin.

I know that TLC Transients is a clever way of making some big efficiencies. And I know that my hosting issue is probably a rare thing. But I could really use some feedback on whether TLC Transients will continue to be used or not, or if I have to consider one of the other options.

I hope that write up is useful to someone else too.

The Problem

I had a custom loop that was on the homepage, which is printed using the special front-page.php page template. I was picking up the “page” query var in my loop to print the right items, and then trying to use next_posts_link() and previous_posts_link() to print, well, the links that you’d think those functions printed from within a WordPress loop. (Remember that these might work backwards to what you expect – see the excellent Digging Into WordPress article for more)

But they weren’t working, always printing just the “next posts” link from the first page, regardless of what page I was actually on.

Technical Details

The problem is that next_posts_link() and previous_posts_link() use a global variable $paged to work out what page you’re on (see code from v3.3.1 here), and $paged is not set set on a per-loop basis, is only set during the initial page redirect (see code in canonical.php).

So, when I do the query_posts() call for my custom loop, I’m not setting the $paged, variable. In fact, because I’m working inside a page template rather than an archive/index type template, I don’t think $paged is set at all!

Solutions:

A couple of solutions present themselves:

Set $paged manually for your loop

Something like:

<?php
  global $paged;
  $this_page = $_GET['page'];
  $paged = $this_page;

  # Custom loop code 
?>

<?php next_posts_link(); ?> - <?php previous_posts_link(); ?>

Do Your Own Thing

In the end this is what I did. next_posts_link() and previous_posts_link() didn’t give me enough control to be able to do the AJAX as I wanted, so I just hand-rolled a solution.  It looks kinda link this:

<div id="latest-news-nav">
  <?php
    // Set up next and prev links
    $this_page = $latest_news_query->get('paged');
    $max_page = $latest_news_query->max_num_pages;
    if ($this_page > 1) {
      printf('<a class="latest-news-newer" href="%s">Newer posts</a>', get_bloginfo('wpurl') . '/wp-admin/admin-ajax.php?action=latest_news&page=' . ($this_page - 1) );
    }
    if ($this_page < $max_page) {
      printf('<a class="latest-news-older" href="%s">Older posts</a>', get_bloginfo('url') . '/wp-admin/admin-ajax.php?action=latest_news&page=' . ($this_page + 1) );
    }
  ?>
</div>

I won’t go into how the AJAX works here – that’s the topic of another post, or possibly the next Oikos plugin.

Anyway, hope that helped someone.

I’ve seen this a lot with hosts that use the “cPanel” control panel, though I’m told it applies to some other web hosting control panel systems too.  The trick is to tell the web server to use a remote mail exchanger for that domain, and tell it which one. Here’s how to do it (hat-tip to Chris Jones of Cultivate Consulting for reminding me how to do this). Here’s cPanel version 11′s mail setting – you’ll see the MX Entry option that I’ve highlighted. You’ll need to click this. Then you’ll need to select the “Remote Mail Exchanger” option as highlighted below.

Then at the bottom of that page you’ll need to add the MX records for your mail server. If this is Google Apps then the MX records are listed on this page.

With all those settings saved you should be receiving emails from your website as expected.

If you’ve done this and still have problems then I suggest contacting your web host – they may be able to help.

The issue is specific to Heart Internet’s hosting and results in any scheduled jobs not running!  Scheduled jobs could include automatic updating, database cleaning and posting of scheduled posts, but could also include other features provided by plugins, such as automated database backup.

wp-cron – how WordPress does scheduled jobs

WordPress normally runs on a Linux or Unix server, and, as such, you could use the “cron” feature of Linux/Unix to run scheduled jobs. BUT…most web hosts don’t let you have access to cron – and rightly do: you could do a lot of damage through incorrect use.

WordPress, though, needs to be able to do some useful scheduled tasks, things like cleaning up deleted items, and publishing posts scheduled for future posting.

So, WordPress uses what is often called “pseudo-cron”. There is a script – wp-cron.php – that runs all the scheduled jobs, and WordPress tries to run this script whenever someone visits your website.  It does this by loading the web page http://<your-domain>/wp-cron.php  It will do this at most once per minute.

You can use a plugin like cron-view to see what’s in your list of scheduled jobs. For me, it was some automated digest emails not sending that brought the issue to my attention!

A Heart Failure

Heart Internet don’t allow a PHP script (or any script) running on its server to make an HTTP request back to the domain that the script is running on. It’s possible, though I’ve not investigated it, that they don’t allow a request back to the server, or to any of their servers, potentially blocking HTTP access to other domains that they host too.

So, the short story is that if you’re running an out-of-the-box WordPress install on Heart, none of its scheduled jobs will work!

I discovered this thanks to numerous forum posts, including this 6-day-old one on the WordPress support forums for a backup plugin.

A Solution

There’s another very helpful discussion over on the WordPress Forums that both explains why wp-cron is implemented the way it is, and offers a workaround: add the following to your wp-config.php

define('ALTERNATE_WP_CRON', true);

The fix is described as “a bit iffy sometimes”, and I’ve not tested it, but I would recommend giving it a go if you’re running WordPress on Heart’s servers.

Another Solution

Another way to tackle this is to make use of the fact that Heart let you run cron jobs anyway, so you can just set up a cron job to run once every 15 mins to run wp-cron.php.  This is probably a better solution but it’s a bit of a pain setting it up for every WordPress install you’ve got…if, like me, you have many!