However, if you want to really make sure that your installation is working as efficiently and securely as possible, there are a few extra tweaks I tend to add in to most sites I set up.

Table Prefix

During the setup, you are prompted to set a couple of site variables. It’s easy to skip these and leave them as their default values, but don’t.

Changing the default table prefix from ‘wp_’ to something else means that:

• You can have multiple WordPress sites on one database without overwriting eachother’s tables.
• If a hacker gains access to your database, they will have a harder time working out what tables you have.

Admin Username

Don’t leave the default admin user called ‘admin’. Brute force attacks can more easily gain access if they only have to guess the password.

This must be done when you first set up the site as it’s lots more difficult to change the admin username after the initial setup.

Limit Previous Post Versions

WordPress keeps previous versions of posts which is handy in case you accidentally save something and you want to revert a post. However this can result in bloated database tables if your site has a lot of posts or is updated frequently.

By adding this setting in to your wp_config.php file you can limit post revisions to something reasonable, or disable revisions altogether.

define('WP_POST_REVISIONS', 3);

or

define('WP_POST_REVISIONS', false);

 Autosave Interval

WordPress automatically saves posts as you write them every 60 seconds. This adds a little more overhead to the page, and is usually a bit unnecessary.

Adding this setting into wp_config.php allows you to amend this interval to something more reasonable like 5 minutes.

define('AUTOSAVE_INTERVAL', 300);   // 5 mins

 Move wp_content Directory

There are some security advantages to moving your wp_content directory away from the site root. It may deter some automated bots which scan your domain for recognised directory patterns.

Anybody who looks even a little more closely at your site will still be able to work out where wp-content is, but it’s another small step towards making your site look a little less like a standard WordPress installation.

define('WP_CONTENT_DIR', $_SERVER['DOCUMENT_ROOT'].'/path/wp-content');

define('WP_CONTENT_URL', 'http://mysite.com/path/wp-content');

 Thumbnail Sizes

One of my biggest problems with WordPress is its greedy habit of creating thumbnails of all sizes for every uploaded image, whether that thumbnail is used or not. This can cause your uploads directory to grow very large very quickly, so anything that can be done to keep this in check is useful.

If your theme uses custom image sizes, update the thumbnail sizes in Settings > media to be the same as those in your theme. If you don’t need any of the default image sizes like ‘medium’ or ‘large’ set the width and height values to zero to prevent WordPress from generating these thumbs.

Cache Plugin

It’s useful to have a cache plugin like WP Super Cache set up on your site, even if you don’t think you need it right now.

When your site becomes so popular that the server starts to fall over, it’s a lot harder to start installing a cache plugin. Have the plugin ready to go, and you can just activate the cache or even use the ‘lockdown’ mode if your site happens to get tweeted by Stephen Fry.

Comments

If your site is going to use comments, definitely sign up to Akismet which will help filter out spam comments.

If you’re not using comments, make sure you disable all the comments features in Settings > Discussion to make sure people can’t sign up or submit content.

You shouldn’t be trying to style selects!

When you search for help on this matter, you often come across people arguing that select inputs get their style from whatever browser you are in and you should under no circumstance by trying to overrule browser behaviour.

That’s all well and good, but when a client asks for a website with a custom designed select, you can’t just say “You can’t have it”.

You’ve just got to get it done.

Plugins

There are already some great plugins out there, which take different approaches to solve this problem. My favourite is

DropKick

My Solution

My aim is to have the look of the select styled completely outside of the original element, however it should still use the native select dropdown options when it is clicked.

Some plugins, including DropKick, hide the select and completely re-create the behavior using css and JavaScript. This is all very nice, and lets you have the most control over how the element and the options look, but it does present problems. The main issue is on touch devices like phones and tablets. These devices have their own way of handling dropdown behavior, which is usually quite nice and useable, while the functionality introduced by the JavaScript plugins is usually a little clunky and difficult to use.

Here’s my solution:

Use a jQuery selector to wrap the select in a div

$('select').wrap('<div class="style_select"></div>');

Add a span element into the div which will mimic the select text

$('.style_select').append('<span></span>');

Attach a change event to update the span caption whenever the select is updated

$('select').change(function(){
$(this).parent().find('span').html($(this).find('option:selected').text());
});
$('select').change();

Now for the css…

The aim is to hide the original select element, but still have it clickable. By setting the opacity to zero, and positioning the select absolutely above its holder it still receives the click event but is invisible until the dropdown is triggered.

.style_select{
position: relative; display: block; float:left; padding:17px; width:175px; margin-right:20px; overflow: hidden;
background: url('../images/select-arrow.png') #f1f1f1 center right no-repeat; cursor: pointer;
color: #3b4043; border:solid #e7e5e5 1px;
}
.style_select select{
-webkit-appearance: none;
position: absolute; top:0; left:0; width:100%; height:48px; cursor:pointer;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
-moz-opacity: 0;
-khtml-opacity: 0;
opacity: 0;
}
.style_select span{ display: block; width:160px; height:1.14em; overflow: hidden; color: #888888; }
.style_select select option{ padding:5px; border: none; }

I think this is a good compromise between getting your form element to fit in with the house styles while preserving the native browser behavior.

The only drawback is that you are still using the native dropdown which remains difficult to style, but the functionality is great on mobile devices and the other browsers all handle it as they see fit.

Check out an example

What’s new?

The most important changes can be broken down in to two main principles:

1. All requests to the Twitter API must tied to a developer’s account. If the number of requests a developer makes passes a threshold, then charges may be imposed.

Deep integration of the API including anything with account details has always required a secure request tied to a developer’s account. However requests to the public timeline and search pages has until now been available to anonymous requests.

In theory this shouldn’t affect small-scale projects with just a few thousand requests per month but it will discourage people from creating even small scale applications because of the fear that they may become too successful and start becoming expensive before the app really makes the money to justify it.

One of my projects is Tweetedtrips.com which makes use of anonymous client-side requests to the Twitter API to fetch data by all the visitors to the site, creating a type of cloud-computing resource that I couldn’t afford to pay for at a server farm. It would be possible to re-write this to the all the requestsa re signed to my developer account, but it’s risky to spend all that time when the site may be shut down by the second change.

2. If you want to request a Tweet and display it on your own website or app it must be in a format specifically defined by Twitter. No re-formatting Tweets.

This is the most perplexing rule which in theory will mean the millions of websites which display their latest tweets on the home page will be outlawed. Lots of very successful services which make use of the rich data made available through Twitter have already started closing down because they simply can’t exist without the flexibility to display the tweet data in different ways.

I don’t know how or if they are planning on enforcing this rule. Presumably they will pursue site which they see as competition or don’t like the look of and ignore any small infringements like personal blogs. But once again, having this threat that you could be shut down at any moment is going to discourage a lot of developers from pursuing ideas based upon Twitter data.

The end is nigh

These changes come in to force in March 2013, so until that date we won’t know how strictly this will be enforced or how many services will be affected.

What does this mean for me?

There are already some big names which have had to change the way they work, or drop their Twitter integration altogether like Instagram.

This move has angered a lot of developers and many may think twice before selecting Twitter as a data source to play with in the future. Twitter has reached a size now where it is ubiquitous and invaluable for a lot of companies. It’s a bold move to try and start to dictate how their service should be used after it has grown so quickly due to massive public uptake, but when you hold all the cards you also get to dictate the terms.

I actually don’t have a problem with them needing to authenticate all requests, and to charge for larger users after all they have to make money somehow. I do have a problem with them potentially charging to retrieve Twitter data then dictating how it may be displayed.

Gone are the .mobli sites. Goodbye m.mysite.com. Hello media queries, fluid layouts and data driven designs. Here are my top tips for creating responsive front end builds:

Content is king

Responsive design isn’t something that can be tagged on to the end of a project, it needs to be integral to the planning and design from the beginning. Rather than concentrating on specific design elements the site should be built based upon the content which is going to be most important.

By deciding initially which messages and content is most important and which content is ancillary you can then build up a layout which highlights the most important content throughout as the site gracefully falls back to a basic layout.

Widths are all relative

Responsive designs all start from a fluid layout. That is to say a layout in which all the widths are considered as percentages rather than having fixed pixel or em values. The design you are building from will be a specific width, so as you’re building the layout you need to keep a calculator to hand and for each element width you use measure the pixel width of the element and its container in your design, then work out that as a percentage. Don’t be tempted to round these values down to neaten up the stylesheet, keep 5 0r 6 decimal places otherwise you will begin to get rounding errors creeping in and disrupting the total width.

Pixels aren’t evil

Some fans of fluid layouts will tell you that in a responsive design there shouldn’t be any references to sizes measured in pixels. I don’t necessarily agree with this. There are cases when having a fixed pixel size is important. For example if you’re using a background image for an element, and you don’t want to use background-size to stretch it for compatibility, it’s quite acceptable to set it to a fixed pixel width and height. Maybe for the company logo, or a graphical button.

Also, element heights and vertical margins and paddings may be set in pixels or ems. Column heights may resize based on the amount of content in them, and especially if the widths are resizing responsively you can’t expect the height to be fixed. Therefore to set the margins and paddings based on a percentage of their height is nonsense. It makes more sense to have a fixed margin of say 1em, then perhaps collapse that to 0.5em below a certain screen size.

Resolutions aren’t always what they first seem to be

It may seem like a simple question to find out what size design to use for say, the iPhone4 or the Samsung Galaxy Tab, but ti’s not always that straight forward.

The iPhone 3 has a resolution of 320 x 480, and the iPhone 4 has twice that… but it also has twice the pixel density so although it still reports the same screen size there is actually twice the resolution based on the retina display.

There are also issues in the Android browsers whereby the browser is actually more intelligent than simply having a set screen size. It will attempt to provide a resolution that will best fit the content being provided.

The bottom line is to remember you aren’t building for specific devices, you are building for all devices. So just make sure it scales well over a range of screen resolutions, then let the device choose which size it wants to display your site at.

CSS3 content is naughty but nice

It’s nice to be able to have shorter captions on mobile devices, for example a button might say “Login to Shop” on larger screens, and simply “Login” on mobile devices. You can use the css3 content attribute to achieve this, by setting the text for the mobile version initially then using a conditional css3 tag to append “to Shop” for screens larger than, say, 800px.

/* Add extended button caption for larger screens */
.button:after{
content: ' to Shop';
}
@media only screen and (max-width: 800px){
/* Remove 'to shop' from button caption */
.button:after{ content: ''; }
}

This is a bit naughty really. CSS is supposed to only be used to describe styles and what you’re doing here is using it to hold content. It’s certainly bad if you’re expecting any of this content to be picked up by search engines. But I think that if it’s used sparingly and in the right place it can be another useful tool in the Responsive shed.

Choose your image sizes carefully

There is no standard way of serving different image sizes for responsive sites. Ideally, you would just use a css attribute in the stylesheet and a media query to target different resolution images to different browser resolutions. However often browsers will pre-load all images in the stylesheet, whether they are used or not, which defeats the point of providing low-res images for small screens.

The two main options are:

1. Use JavaScript to set a cookie with containing the browser resolution. Then point your images src to a server side script which will look at this cookie and serve up the relevant image. The downside of this technique is the extra server overhead placed on every image call.
2. Always point your image paths to the low-res version, and include the hi-res path in an element attribute. Then use JavaScript to switch out these paths based on the screen size. The downside of this is that larger devices will have to load both images and there is the chance that if the page is a little slow in loading you may see the low-res images for a moment before the JS kicks in.

There is no right answer here, other than to look at each project and each image instance  individually and make a decision based on the requirements. Maybe there is only a main showcase image that you need to provide a fallback for, maybe mobile load times are crucial so the images should be as light as possible.

IE still takes up all your testing time

As much as HTML5 saves us time by offering us rounded corners, transforms, transitions and gradients without having to add endless plugins, the truth is that you still end up spending the most amount of time fixing legacy internet explorer issues. We hoped that once ie6 got decommissioned, life would become easier, but ie7 and ie8 still throw up a lot of problems, not least their lack of support for media queries.

HTML5 and CSS3 – the time is now

HTML5 allows us to write neater, more concise code and create great effects without having to rely on external libraries or tool kits. However as soon as you decide you want to make these features work on anything but the newest generation of browsers you quickly find yourself delving back into fallbacks, hacks and JS plugins. This puts a lot of people off using HTML5 and CSS3 but the truth is that HTML5 is designed to be used now.

Most of the features like rounded corners and background gradients can degrade gracefully without any extra code. A great tool for finding out which features you can use safely and which need fallbacks in place is http://html5please.com/.

Use it now or loose it!

 Some Useful Links

• html5please.com – Directory of HTML5 and CSS3 features with their browser compatibility and fallback requirements
• alistapart.com/articles/responsive-web-design – Great introduction to Responsive Design
• coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design – Smashing Magazine’s Responsive Design overview with links to articles on each aspect
• resizemybrowser.com – Great tool for testing browser sizes based on common devices

Their site features some stunning design and a really nice implementation of infinite scrolling. It’s the kind of site that is designed to be played with, it’s very usable, intuitive and begs to be explored.

Check Out GerberGear.com

The Magnum Boots Fieldtesters campaign won the Insider Magazine 2012 award for Best Digital Marketing Campaign in April 2012.

Other winners at the awards included top brands like First Direct, NHS, Halfords, Ebuyer, and Belling.

Congratulations to the whole team at 9XB including the terrific designers and SEO experts who helped make this site such a runaway success.

Captcha

Adding a test to the form that the user must complete before submitting it is the most resilient way. One of the most popular is reCaptcha which uses imperfectly scanned books to test the user by presenting them with two scanned words. The first word, Captcha knows what it should be and the second word is used to help identify the scan. If enough users provide the same identify the second word, it is promoted to a known word.

Cleverly, this helps translate imperfect book scans as well as providing a robust identity check.

However this can be annoying for users, and will reduce the chance of a user completing the form. This should only be used where the level of security is more important than the volume of submissions you require.

Javascript

Spambots are the automated scripts which crawl the web looking for forms to fill in. Since these are usually performed using server-side page scrapes rather than browsers, Javascript usually isn’t run before the form is submitted.

One solution is to have a field on the form which is filled by Javascript before the form is submitted. The downside of this is that your page will fail if Javascript isn’t enabled, and it wouldn’t take much for a hacker to manually inspect the page and add the extra field in to their spam.

You may want to combine client-side Javascript form validation with spam checking. This provides a neater and quicker form submission process, but unless you provide a Javascript fallback you are cutting off accessibility and non-Javascript users.

Cookies

In the same way that bots don’t execute Javascript, they usually won’t carry site cookies around with them either. Using a server-side or client-side cookie to make sure the user has visited the site before submitting the form could be quite a neat way of validating them. Once again though, some users may choose to turn off cookies in their browsers, and depending on how your validation script works, it may fail if the first page a user lands on is the contact page.

Time Dependence

If a bot submits your form it is likely that it will either load your page and then imminently submit the form, or scrape the contents, store it somewhere and at some later date start sending submissions.

By creating an encoded token based upon the time of page creation and sending that though with the form you can get a good idea of whether the user may be real or not. For example I may create a field with the value of

time()/date('d')

Which is the unix timestamp, divided by the day of the month, to obscure the value and make it difficult for bots to spot a pattern.

When the form is submitted, check that this field is passed though, and if it took less than say, 5 seconds to submit the form after the page loaded or more than 30 minutes, return a form error.

Conclusion

The best solution is probably to use a combination of some of the above techniques, depending on how high profile the form is going to be and the security you require from respondents.

Relying on the same technique for all your sites introduces the inherent danger that once one form is compromised, it’s likely that they all will be. Keeping the bots on their toes is the only way of staying ahead of them.

Here is a cycle ride around Ecuup Reservoir.

The new version of the plugin supports shortcodes and allows the frame size and position to be controlled.

Find out More

This makes it easier if you need to update common pieces of text or code as they can all be found in one place.

You may find this useful for defining advertising code that you want to appear only in certain posts, or common pieces of information like addresses or phone numbers.

It also avoids problems with the WordPress WYSIWYG editor cleaning up JavaScript or CSS snippits entered in the post editor.

Usage

• Download and install the plugin
• Use the Settings > Post Snippits page to define your snippits. You can create as many snippits as you like, just give each one a different name.
• Include the snippit in a post or page by using the shortcode [snippit name] where “name” is the name you defined in the settings page

Download the Plugin

Donate

If you like this plugin, why not donate? Donations make free plugins possible.

The Acer Aspire One is a small, lightweight netbook with all the features I’d need in a laptop but at only £199 I could treat it as roughly as I like and not have to worry too much if it gets damaged or stolen.

The Specs

Processor: Intel Atom Processor N450 (512KB L2 cache, 1.66GHz)

Chipset: Mobile Intel NM10 Express

Memory: 1GB DDR2 667 SDRAM

Video: 10.1″ (1024 x 600) high-brightness (200-nit) TFT display

Video Conferencing: Integrated Acer Crystal Eye webcam, 1280 x 1024 resolution, stereo speakers, Integrated digital microphone

Storage: 250GB hard drive, 5400RPM

Ports: Multi-in-one card reader, headphones, line-out, microphone, ethernet, USB x 3, VGA out

Wireless: Acer® InviLink Nplify 802.11b/g/n

Dimensions: 10.2″ (258.5mm) W x 7.3″ (185.0mm) D x 0.9” (24.0) H, 2.8 lb. (1.25kg) with six-cell battery

Operating System: Windows 7 Starter and Android dual boot

The Pros

Small and light enough to easily slip into a bicycle pannier. It spent days rattling around, survived freezing nights in the desert and days on end of 100F+ temperatures. After a year of frequent use the battery life still seems good and apart from a few cosmetic scratches and scrapes it is still holding up well.

Perfect for backing up photos along the way. The camera’s SD card fits straight in and the good capacity hard drive easily supports a year’s worth of photos and downloads.

Quick and powerful wifi receiver would always find points that the iPhone couldn’t see, and wouldn’t drop out or fail.

In-built webcam and mic meant I could keep in touch with home using Skype.

The Cons

Windows 7 Starter edition doesn’t include all the features of the full package. The only instance of this that troubled me though was not being able to change the desktop wallpaper. If you can put up with that though, the operating system runs surprisingly quickly.

The duel boot option with Android seems like a most pointless endeavour which I can’t believe anybody has ever made use of. There’s really nothing useful you can do with Android on a netbook and if I could have been bothered I’d have removed the Android partition altogether. It’s not difficult to set it up to boot straight into Windows though and then you can simply ignore Android (sorry Google).

The pre-installed Acer Video Conferencing software seemed to fail sometimes when trying to Skype, meaning the video would only be available to one side of the call. Updating the drivers, or removing this extra layer of management might solve this issue, but I never quite got around to trying that for fear of losing it altogether.

Conclusion

Other people have recommended iPads or other tablets as a more light-weight solution for touring with, but for the cost involved and the extra features you can get from a netbook I would definitely recommend this option. I probably wouldn’t use this as a day-to-day laptop once I’m home, but as a travelling companion you can’t get much better.

“No, it’s not up to a site to determine how a link should work, the user can decide that when browsing.”

Not only is it bad practice but the target=”_blank” tag has been depreciated now and will cause a page to fail strict validation.

The truth is though that it is important to avoid taking traffic away from your site and whenever I have launched my own sites I find myself trying to achieve the same thing.

So here’s my solution

Use JavaScript to look through all links, determine whether they link to another domain and add the target after the page loads. This way the page will still validate, the code will be tidier and you won’t have to remember to manually change the link target every time one is added.

$("a[href^=http]").each(
function(){
nonwww = location.hostname.replace("www.", "");
if(this.href.indexOf('http://'+location.hostname) == -1 && this.href.indexOf('http://'+nonwww) == -1) {
$(this).attr('target', '_blank');
}
}
)

Here are my top tips that take very little implementation and will imminently improve your visibility in search. If you’re interested in getting a more thorough review of your site’s SEO performance, get in touch.

Insist on www.

It doesn’t matter whether your URL starts with www. or not, but it is important that you don’t have duplicate content at http://www.mydomain.com and http://mydomain.com. A simple solution is to add an entry in to your .htaccess file in the domain root to 301 redirect any addresses which aren’t prefixed with www. to the equivalent address with www.

RewriteEngine on

# insist on www
RewriteCond %{HTTP_HOST} !^(www.|$) [NC]
RewriteRule ^ http://www.%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

Insist on Trailing Slashes

Make sure your URLs don’t have duplicate content with and without a trailing slash. If your URLs don’t end in a file extension like .html then it is good practice to insist on a trailing slash which will mark the end of the URL. Once again, your .htaccess file can keep an eye on this and make sure that any URLs which don’t end in a slash are 301 redirected to a URL with a slash. For example mydomain.com/page1 would redirect to mydomain.com/page1/

RewriteEngine on

# insist on trailing slash
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_URI} !(.*)/$
RewriteRule ^(.*)$ %{REQUEST_URI}/ [L,R=301]

XML Sitemap

Make sure you have an XML sitemap which lists all the pages in your site. The location of the sitemap should be referenced in your robots.txt file. It doesn’t matter what your sitemap file is called, just make sure it is correctly named in the robots file.

robots.txt
User-agent: *
Sitemap: http://www.mydomain.com/sitemap.xml

Title Tags

Make sure your page title tags are unique, not too long and contain the page title followed by the brand. e.g.

<title>10 Easy SEO Wins | Sandjam</title>

Only One H1

Make sure there is only one H1 tag on each page, and it should be around the actual content title on the page. Not around the logo, or header image or nav button.

Verify Your Site

Set up your site in Google Webmaster Tools and Bing. Each will ask you to add a tag to your header or a file to your domain to prove you own it. Once verified you will be able to track any crawl errors, sitemap errors and other ways of improving your site’s visibility.

Home Page Content

You can easily get tied up in the design and functionality of your site and end up creating a home page which has very little text on. Make sure there is space on your home page for a couple of sentences of text explaining what the site does, including all your main keywords. It doesn’t need to be prominent for the user, just prominent for search engines.

Canonical Links

Some pages in your site are going to produce duplicate content, that’s unavoidable. For example search results, category indexes, preview pages. These types of pages should all include a canonical tag in the header to tell search engines which page you would rather they used. This will avoid you getting penalised for the duplicate content on these pages.

<link rel="canonical" href="http://www.mydomain.com/product/black-hat/"/>

Alt Tags

It may seem like an obvious one, but remembering to add good alt tags to images is something I often see getting missed out. Good image alt tags will not only help the page ranking, but help your images appear in image searches too.

Why stop at images? adding title tags to links or buttons is less important, but still good practice and gives you the option to add different keywords in the title to those in the link. e.g.

<a href="gallery.html" title="Photos from Antigua and Barbuda">View Gallery</a>

Just Make a Great Site

SEO is an important tool, but I think it’s also important to not loose focus on what really matters. You can spend hours trying to trick search engines in to thinking that your site is important. The best thing you can do is to create good, clean HTML markup with genuine well constructed content that your market will appreciate. Sell your site well, and you’ve already got a good head start on your SEO strategy.

Often I will have to ask users or a web service for YouTube videos, and these may come in the form of share URLs, embed code or video URLs. This class allows you to extract the video ID from each of these sources, which can be saved separately and used to either retrieve video data or embed the video in a page at a later date.

Try the Demo

<?php
/**
* Simple class to extract YouTube Video ID and display video details
*
* @author     Peter Smith - sandjam.co.uk
* @version    1.0 10-9-12
*/
class YouTube {
public function __construct(){

}

/**
* Extract the video id from a YouTube URL or share code
*
* @param $str:String - URL or share code from YouTube
* @return $vid:String/False
*/
public function getVideoId($str){
// get video id from url in the format http://anything/videoid
preg_match("/(.*\/)([0-9a-zA-Z_-]*)$/i", $str, $matches);
if (isset($matches[2]) && $matches[2]!='') { $vid = $matches[2]; }

// get video id from url in the format http://anything/watch?v=videoid&anything
preg_match("/(.*\/)watch\?v\=([0-9a-zA-Z_-]*)\&?.*$/i", $str, $matches);
if (isset($matches[2]) && $matches[2]!='') { $vid = $matches[2]; }

// get video id from embed code in the format <iframe width="xxx" height="xxx" src="http://www.youtube.com/embed/videoid" frameborder="0" allowfullscreen></iframe>
preg_match("/iframe.*\/embed\/(.*)\"/iU", $str, $matches);
if (isset($matches[1]) && $matches[1]!='') { $vid = $matches[1]; }

if (!isset($vid)) { return false; }

$vid = trim($vid);

return $vid;
}

/**
* Get the video details from YouYube data api
*
* @param $vid:String - YouTube Video Id
* @return $details:Array
*/
public function getVideoDetails($vid){
// attempt to load video to check it exists. This returns 404 if any errors with the videoid
$response = @file_get_contents('http://gdata.youtube.com/feeds/api/videos/'.$vid);

// response is not xml (error code)
if (substr($response, 0, 5) !='<?xml') {
echo "$vid - This does not seem to be a valid YouTube video";
return false;
}

// assume thumbnail image exists in the usual location
$image = "http://i.ytimg.com/vi/$vid/0.jpg";

// parse video details xml
$videoXml = new SimpleXMLElement($response);

$title = $videoXml->title;

$details = array(
'title'        => (string) $videoXml->title,
'description'    => (string)$videoXml->content,
'author'        => (string)$videoXml->author->name,
'author_url'    => (string)$videoXml->author->uri,
'date'            => (string)$videoXml->published,
'image'        => (string)$image
);

return $details;
}

/**
* Compose the embed html code from a video id
*
* @param $vid:String, [$width:Int, $height:Int]
* @return $html:String
*/
public function getEmbedCode($vid, $width=600, $height=400){
$html = '<iframe frameborder="0" width="'.$width.'" height="'.$height.'" allowfullscreen="" src="http://www.youtube.com/embed/'.$vid.'?fs=1&amp;feature=oembed&amp;wmode=opaque"></iframe>';
return $html;
}
}
?>

This JavaScript class looks for texfields with a class of captionate and adds the label as the default text which will clear when a user clicks it.

The benefits of this method are that it retains the proper markup by requiring field labels and it falls back gracefully by not hiding the label if the browser doesn’t support Javascript.

Demo

Code

<script type="text/javascript">// <![CDATA[
captionator = {
	captions:Array(),

	init:function() {
		$.each($('input.captionate'), function() { 
			id = $(this).attr('id');
			label = $("label[for='"+id+"']");
			if (label.length==0){ label = $(this).val(); }
			$(label).css('display', 'none');
			captionator.captions[id] = label.text();
			if ($(this).val()=='') { $(this).val(captionator.captions[id]); }

			$(this).click(function() {
				id = $(this).attr('id');
				if ($(this).val()==captionator.captions[id]) { $(this).val(''); }
			});

			$(this).blur(function() {
				id = $(this).attr('id');
				if ($(this).val()=='') { $(this).val(captionator.captions[id]); }		   
			});		
		});	
	}
}

$(document).ready(function() {
	captionator.init();
});
// ]]></script>
<fieldset><label for="namefield">Your Name</label>
<input id="namefield" class="captionate" type="text" name="namefield" /></fieldset>

The method uses a box with zero size and coloured borders to create the effect.

div.arrow-up {
float:left;
width:0px;
height:0px;
border-left:5px solid transparent; /* left arrow slant */
border-right:5px solid transparent; /* right arrow slant */
border-bottom:5px solid #2f2f2f; /* bottom, add background color here */
margin:0 auto; /* centers the arrow within the parent container */
font-size:0px;
line-height:0px;
}

Produces the following:

I like the fact that it’s using really creative CSS to produce a solution which is, I think, lots neater and reusable than cutting out little triangle graphics. I could imagine using this in breadcrumb trails for example.

Home Categories Page

To see this effect taken to the extreme, take a look at the Union Jack created using just CSS.

Sitemaps help users find pages on the site

• If a user needs to go to a sitemap to find something on your site then it means the navigation structure and layout isn’t good enough.
• A site search tool is a better way of finding content than a sitemap. Make sure the search works well and is easy to interpret.
• How many times have you actually clicked on a sitemap to find something recently? Most of the time, if I can’t find something straight away I will go back to Google, or find a different site that will serve me the information more easily.

Sitemaps help search engines index the site

Sure, a sitemap will help make sure that all your site pages are linked to from the front page and help indexing. But this is the job of an XML sitemap, and there’s no need to duplicate the work on a front-end sitemap.

The XML sitemap is essential and should link to all the site pages, providing information on their importance and update frequency. The name of the sitemap should be specified in the robots.txt file and doesn’t necessarily have to be sitemap.xml.

There are server side tools like Google Sitemap Generator which will crawl your site internally and create xml sitemaps or you can dynamically create your sitemap.xml file using a php script.

In order to make a sitemap useful to search engines you need to include absolutely all the site pages on there. However, if you have a site with hundreds of old news stories on, for example, you may only only want to show the highlights to users on a front-end sitemap to avoid making it look too complicated.

It’s just something people expect to see there, isn’t it?

Maybe some people do expect to see it there, but in my opinion it is looking increasingly old fashioned to have a sitemap link. Modern savvy web users may look down on sites with dated phrases like “sitemap” or “webmaster”. My advice is to use that important header or footer space to push your SEO message or highlight a site search that will help users far more than sitemaps ever have.

A bit too clever in fact.

The integration allows you to pass the url and title though to the sharing window. The sharing window then goes and take s a look at the page and selects the first few images it finds as likely candidates to use as thumbnail options.

However there’s no functionality built in there to tell Facebook which images you’d like it to use.

The Facebook Developers documentation suggests specifying the image in a meta tag

<link rel="image_src" href="http://media.clickonf5.org/image/logo.png" />

However it seems that the sharing window doesn’t actually pay any attention to this, and certainly doesn’t allow you to specify multiple images.

I discovered this problem recently when I wanted to allow users to post a link to Facebook, but none of the images on the page were relevant to use as thumbnails.

The solution I ended up using was to look at the the header information before the page loaded, and if the client requesting the page was the Facebook sharer page, I present just a page with the thumbnails I want to choose from. Then exist the script as the sharer doesn’t need to see any more of the page.

if (strstr($_SERVER['HTTP_USER_AGENT'], 'facebookexternalhit')) {
  ?>
  <img src="http://mysite.com/images/facebookimage1.gif" alt="" />
  <img src="http://mysite.com/images/facebookimage2.gif" alt="" />
  <?php
  exit();
}

Graphics

Cutting up graphics and embedding them as images is time consuming, a nightmare to update and doesn’t allow for dynamic text. It’s the best way to make sure your site looks exactly like the design you’re working from, but don’t let an SEO guy see it.

Flash

I’ve used Flash based font replacement with Sifr in the past. It always felt clunky though, I worry about the overheads of using lots of Flash font replacement on a page and you risk it failing for browsers which don’t support Flash like iPhones.

Javascript

The new families of Javascript based font replacement are really clever. Cufon, for example, lets you upload a font file which it converts into path information which it then uses to draw the fonts using the HTML 5 <canvas> element.

Google love their Javascript apis so its not surprising that they’ve jumped on the bandwagon over at the Google font directory. Google are a bit more concerned about copyright though and so they provide a  small selected of open source fonts rather than allowing you to upload any font.

Let’s have a go at an example:

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">

<style>
p.tangerine { font-family: 'Tangerine', serif; font-size: 48px; }
</style>

<p class="tangerine">Sandjam goes Tangerine!</p>

Produces:

Sandjam goes tangerine

It works! Thanks Google, now just build up your font collection and I’m in.

Usually…

This one tripped me up and it took me a while to pin down what the problem was. Turns out the variable name “class” is reserved in IE but not in other browsers (Firefox/Chrome).

My code used a variable to insert a css class onto an element, something like:

var class = "blue";
element.innerHTML = "<span class='" + class + "'>comment</span>";

I think this is because IE allows you to reference the css class of an object through this attribute, rather than using the “className” attribute.

I guess this is another example of IE trying to make our lives “more compatible” but actually making it hard work for everyone.

I also discovered IE8′s new debugger during this time though which actually tells you where your JS errors lie, rather than just saying “Line 1 character 2342″.

Finally something to make a developer’s life easier in IE!

One of the biggest problems I have with it is that an IPhone battery will last maybe 3-4 hours while constantly logging GPS. This is fine when running, but on a  bike you might be out all day.

I’d like to be able to manually drop “breadcrumbs” along my way, which will be logged and show my route in real time to friends online.

I’m not going to pretend I’ve made a tool that’s going to compete with runkeeper, this is purely me playing around with the Google Maps API.

I’m using the Google Gears Geolocation functionality which gets your latitude and longitude either from your browser’s location settings or your GPS if you are on a mobile device. I’m using an HTC Hero which runs the Android operating system, so Google Gears is already bundled. Looks like IPhones don’t (unsurprisingly!).

I’m going to try and get it up and running for the Leeds to Amsterdam ride so that people can track my progress along the way… should they want to.

Check it out: http://sandjam.co.uk/runpeter/

and

http://sandjam.co.uk/runpeter/add/

(You will need to install Google Gears on your machine to use it)

Take a look at an Example of the plugin in action.

Version 2.0

The new version offers two options for adding maps in to posts:

• Create a custom field called “runkeeper” and paste in the “Share” link from your activity on Runkeeper
• Use the shortcode [runkeeper url="example"] at any point in your post where you would like the map to appear, replacing “example” with the “Share” link from Runkeeper.

The new version also allows you to change the width, height and offset of the preview using the Settings page. Go to Settings > Runkeeper in the admin menu. The default values are: Width: 600px, Height: 400px, X: 300px, Y: 300px

Find Out More and Download

Custom Fields in Posts

If you’ve not used custom fields in your posts before, it’s really simple.

When you add a new post, look down the page to the section called “Custom Fields”. Click “Enter New”, then add the “Name” “runkeeper” and the value is the address of the activity you want to embed. If you don’t have the Custom Fields section on the page, you may need to select it from the Screen Options menu in the top right.

Take a look at the example below.

Shortcodes

Shortcodes are tags enclosed in square brackets which can be entered anywhere in the post. When the post is displayed on the front end, the shortcode will be replaced with dynamic content, in this case a Runkeeper map.

An example shortcode for the Runkeeper plugin is:

Donate

If you like this plugin, why not donate to help keep this project going.

Leeds to Hull

Set off at 10am on Friday from Leeds city centre. Weather looks promising and we made it to Selby in good time and spirits (25 miles). After lunch we join the Trans-Pennine trail eastwards to Hull. Nice route, well signed and over a lovely sunny afternoon we couldn’t ask for anything more.

Unfortunately, as we arrived at the outskirts of Hull it turned out that the route was going to be a bit longer than we expected and worst, the heavens opened. The last hour of the ride through Hull to the port was wet and not very pretty.

Leeds to Hull – 72 miles

Rotterdam to Amsterdam

Day two brought us a morning of rain, and setting off on the wrong foot found us a bit lost cycling through Europort. It’s around 25 miles to get to Rotterdam city from the port, which took us the morning in the rain. Pretty miserable by time we got there, but decided to press on and luckily it brightened up after lunch.

It’s no surprise that the cycle routes in Holland are just amazing – well signed, big and well kept. Some of the cycle paths in Holland are in better nick than some of the roads in Leeds! The route out of Rotterdam takes you North past canals and windmills, through pretty villages and fields. The wind can be a bit rough over the flat open fields, but the good news is there are no hills to contend with! The slightly longer route can take you through Gouda but at that stage we didn’t want to make things more difficult for ourselves.

My rough measurements on Google Maps had placed the route at around 60 miles. The final count came out nearer 84, which was a bit of a shock. It was hard work and we arrived in Amsterdam around 7pm. A long day, but so rewarding when we made it there.

We stayed at the Hotel Hestia which I can’t recommend highly enough – very reasonable and great homely quality.

Amsterdam to Rotterdam

The next day was forecast to be rainier still so we decided to have a good night out then get the train back to Rotterdam. We still had the ride to Europort to deal with, which was a pretty wet affair. Found the cycle route to the port though, which certainly was better that the route through in the industrial estates on the way out.

Hull to Leeds

We were all worn out by this point, but the last leg was straight forward enough. Dry, but an awful wind which made for hard riding.

Overall, I’d really recommend the ride – it would have been loads better if we’d had sun all the way but you can make the best of it either way. The next question is… where next?