Last night I noticed that the Lanyrd event info that was meant to be listed in my blog sidebar was no longer working. I was, at the time, using the My Lanyrd Widget which was up to a time working well… but then I noticed it had just stopped working.

I had a quick browse on the Lanyrd site and noticed that had some official JS and code which could be used to display a badge on your site showing pretty much the same info as the above mentioned widget had been doing.

And so, after an hour or so of coding the Lanyrd Splat Widget plugin for WordPress was born. I immediately requested a repo on the WordPress.org site and as soon as this was approved my checked in the code and the Lanyrd Splat Widget was launched!

The Lanyrd Widget in action

The plugin has settings for the maximum number of events to show as well as the format and of course the Lanyrd username of the info to use.

The Lanyrd Widget Settings

The plugin pulls the info from Lanyrd  every time the page is loaded, which is obviously not ideal. I had toyed with the idea of using the ics feed which Lanyrd provides and then using transient storage inside WordPress to temporarily cache the data. I decided to not use this for the time as the route I’ve taken pulls only the data needed and also supports richer data. My view on this may change in time… we will just have to see how this performs.

The Lanyrd Splat Widget can be downloaded from the official WordPress.org plugin repository.

Thanks for reading, check out Todd Halfpenny for more from Todd Halfpenny

This latest WordPress 1 Minute Wonder installation covers a couple of quick alternative steps that can be taken to dramatically increase your site performance… and yes I’ll be honest and say that actually to cover all 3 steps here it takes more like 10 minutes.

In the below investigation I based “performance” on Google’s PageSpeed rating and Yahoo’s YSlow and this was run against a newly launched online craft store site called Designs and Such.

Step 1 – Optimise Images

Using the PageSpeed tool (in Chrome) it was possible to  see that I had several un-optimised images on my site. I processed these with the free optipng tool and instantly saw an increase in 6 PageSpeed points and  2 YSlow points. Not bad for something which anyone can do.

Step 2 – W3-Total-Cache Plugin

Now there is some stigma around having lots of plugins on your WordPress site and the detrimental affect it can have on performance… now whether you back this line of thought or not* sometimes plugins can really benefit your site in this context. Now please be sure to backup your DB (or entire site) before using any plugins which might modify you’re .htaccess and potentially other files in your installation.

For my investigation I installed the W3-Total-Cache plugin and configured it just to cache and minify my HTML, JS and CSS. The results were staggering… I saw an overall increase of 11 Google PageSpeeed points and 12 YSlow points

Step 3 – .htaccess Tweaks

Another step, this time plugin-free, should immediately give some good results. Simply by adding the following lines to one of my site’s .htaccess file I saw a further 4 point increase in my PageSpeed score and a 1 point increase in Yahoo’s YSLow rating.

The following lines do 2 things, add expire headers to static files such as CSS, javascript and images and also removing ETags. Of course please backup your .htaccess before doing any of this.

#Expire Header
ExpiresActive On
ExpiresDefault A0
ExpiresByType image/gif A2592000
ExpiresByType image/png A2592000
ExpiresByType image/jpg A2592000
ExpiresByType image/jpeg A2592000
ExpiresByType image/ico A2592000
ExpiresByType text/css A2592000
ExpiresByType text/javascript A2592000

FileETag none

This is defining a 1 month expiry for all content covered by the files types listed above. Note if you do this there’ll be implications if you want to modify any of the files, like CSS, and have the changes to affect immediately.

This technique (and more info on it) was found over at Tips & Tricks HQ

The overall results

So in total by carrying out the above steps I saw the following performance increase. Of course the results will vary site by site but I believe that with Search Engines using site performance as a factor when ranking your site that 10 minutes spent here will be of value.

Google PageSpeed Increase = 21

Yahoo YSlow Increase = 15

* When speaking to @westi at WordCamp UK (or WordCamp Manchester) in 2010 he said that putting code in plugins rather than the core should result in no performance hit… of course it depends on the quality of code

Thanks for reading, check out Todd Halfpenny for more from Todd Halfpenny

Incompatible Archive.: PCLZIP_ERR_BAD_FORMAT (-10) : Unable to find End of Central Dir Record signature

Even for someone who may be technically minded this is a little unhelpful… but thankfully the solution (in my case at least) was to free up some space on my hosting account. So it seems that the cause of the issue (or at least one of the causes) is that there was not enough space available for the automatic WordPress upgrade to take place.

Thanks for reading, check out Todd Halfpenny for more from Todd Halfpenny

In this edition of WordPress 1 Minute Wonders I will answer a question which I frequently get emailed about… and that is how to style widgets next to each other when using my Widgets on Pages WordPress plugin.

In this post I have 3 widgets in one of the sidebars created by the plugin. I have named the sidebar horiz.

To get the Widgets to display as they do above there was some extra CSS that I had to add to my theme’s style.css file to get them to display like this… here it is.

#horiz {
  overflow: auto;margin: 10p;padding: 10px;
}

#horiz .widget {
  float: left;
  width: 25%;
  padding: 2%;
  background: #f1f1f1;
  border:1px solid #999;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  -moz-box-shadow: 3px 3px 7px #999;
  -webkit-box-shadow: 3px 3px 7px #999;
  -o-box-shadow: 3px 3px 7px #999;
  box-shadow: 3px 3px 7px #999;
  margin: 0 1%;
 }

I have put a fair amount of styling in there to make them look a bit more appealing but essentially the important bit that makes the widgets sit next to each other can be done with just the following;

#horiz {
  overflow: auto;
}

#horiz .widget {
  float: left;
  width: 25%;
  padding: 2%;
  margin: 0 1%;
 }

In the first section we style the whole sidebar (you would replace .horiz with whatever you had called your sidebar), making sure that the content overflow is set to auto. This makes sure that any content following the sidebar does not also creep up alongside the widgets.

The second section styles the widgets (all three in this case). The key part here is the float:left; which makes them site alongside each other.

Thanks for reading, check out Todd Halfpenny for more from Todd Halfpenny

Today though, I received an amazingly baffling (not to mention “blue”) transcription of a voicemail that was left for me… and I thought I’d share it with you all;

Translation:

Regards shit just wanted to have please go understand now Bridges a log so conflict legal due to any of the keeps issue and the construction any finance to.

Actual message left:

Hello Todd, Pankaj here. Just wanted to have quick chat to understand, erm, whether the logs are confirmatory or… do you see any other issue in that because the scripts are now running fine as expected.

Thanks for reading, check out Todd Halfpenny for more from Todd Halfpenny

As a sequal to the debut entry of the “WordPress 1 Minute Wonder” series which talked about styling author comments differently to other comments this post extends the usefulness of your comments by adding Gravatar Hovercards to you site/blog. This posts presumes that you know what Gravtars are (if not check them out).

Again, in true WordPress 1 Minute Wonder fashion this is a dead simple thing to enable and involves nothing more than copy and paste and (s)FTP access to your site. In fact before I show you the steps I should credit the guys at WebBlogToolsCollection for this… in this case I simply a messenger.

So to get this working simply copy and paste the following code into your theme’s function.php file (create one if it doesn’t exist).

wp_enqueue_script( 'gprofiles',
'http://s.gravatar.com/js/gprofiles.js', array( 'jquery' ),
'e', true );

This should give your comments’ avatars a nice hovercard affect if you hover over them.

It’s that simple and useful… brilliant.

To get the most out of this feature (on your site and on others that you comment on) make sure you update the info on your Gravatar profile.

Thanks for reading, check out Todd Halfpenny for more from Todd Halfpenny

This is the first in the series of my 1 Minute Wonder series for WordPress where I’ll be showing simple and quick tricks for WordPress to add a little extra to your blog or WordPress powered website. And in this series debut I’ll be showing you how to add extra styling to the comments made by the post author.

So a quick caveat… this trick depends on your theme’s implementation… hopefully it’s been created with all the correct semantic markup needed. If you find this doesn’t work then to resolve the issue may take slightly longer than the one minute.

So here we go, all you really need to do is add the following to your current theme’s style.css file (usually located in ~/wp-content/themes/<theme_name>/ directory);

.commentlist li.bypostauthor {
  background: #f1f1f1;
  border:1px solid #999;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  -moz-box-shadow: 3px 3px 7px #999;
  -webkit-box-shadow: 3px 3px 7px #999;
  -o-box-shadow: 3px 3px 7px #999;
  box-shadow: 3px 3px 7px #999;
}

What we’ve done here is added extra styling to give the author’s comments a background specific background colour with a nice rounded border and a subtle box shadow. The rounding of the corners and the shadow are created using CSS3 so may not show on older browsers.

Styled Author Comment

This styling can be seen on this very blog over at this post on the Responsive TwentyTen child theme for WordPress. Of course the comment can be styled in any manner of ways depending on the CSS you apply.

Thanks for reading, check out Todd Halfpenny for more from Todd Halfpenny

I received a mail today from a gentleman wanting to start up a joint venture with me. The proposal was based around creating an SEO business (something he said that he was already very good at). So how did I respond to the mail?

I suppose I could’ve been flattered by his approach, I mean it seemed financially to not be such a bad deal (apart from the 100 quid I’d have to fork over to show my commitment of course)… but even before I started looking into the key content of the mail 2 things struck me which meant I didn’t think that this guy really wanted to start a business with me.

Firstly he didn’t address me by name… this is something that unless you’re hidden deep in a large organisation, shouldn’t be too hard to find out. Yup, this was (content aside) starting to smell of a mass mail campaign.

Second up (though I should really have spotted this first) was the email subject line “SEO Experts – Information as requested”… so there we have it… I have never asked for any information from these guys. I honestly have never understood why spammers use such subject lines. Perhaps they think that my business is so big that someone else (who I don’t talk to but knows that I’d want the information) passed a request on for me?

Either way I filed it under spam and Keith Griggs can go suck an egg and see just how well this article will rank for “Keith Griggs send me spam mail”. I’ll check back in a few days to see if google index me for that.

I have also tweeted Keith Griggs to ask him to not send me spam… at the time of writing he hadn’t responded.

I don’t know for sure that this is spam… but to me it sure seems like it.

Thanks for reading, check out Todd Halfpenny for more from Todd Halfpenny

As someone who flits between different computers it’s nice to have a common set of tools to help me as a developer… and have a new Ubuntu setup in my home office I thought I’d document those which really help me in day to day work etc.

Development Tools

SciTE - As an all-round editor I just love SciTE (and it’s fun to say it’s name too). It’s a no-nonsense editor with a vast amount of languages supported.

Eclipse – OK, so I don’t really like eclipse but as a tool for developing for Android it does it’s job just fine.

Firefox – Yup, an excellent browser which also hosts some excellent add-ons (Firebug, Web Developer, ColorZilla)

Designer Tools

Balsamiq – For wireframing websites, web apps and mobile applications Balsamiq is pretty good.

Communication

Tweetdeck – What can I say about Tweetdeck apart from it’s a brilliant client for Twitter and Facebook.

Skype – The current Skype client on linux is a little ‘clumsy’ in my opinion and is a fair few releases behind it’s Windows counterparts. As a basic VoIP client though it’s second to none.

Utilities

Adobe Air – This cross platform runtime environment enables you to take advantage of some really super tools and applications.

Dropbox – This is just one of the dandiest apps around… brilliant cloud based storage with cross platforms clients. If you haven’t got it yet what are you waiting for… go get Dropbox now!

Evernote – Evernote is a brilliant cloud based note taking and management app

Filezilla – A few linux fans might not appreciate me mentioning GUI (s)FTP clients such as Filezilla but as an ex-Windows user having familiar tools to winSCP makes the migration much easier.

Thanks for reading, check out Todd Halfpenny for more from Todd Halfpenny

In a terminal start Dropbox with the following command.

dropbox start
Starting Dropbox...
The Dropbox daemon is not installed!
Run "dropbox start -i" to install the daemon

This tells us that the Dropbox daemon needs to be installed… so run the command as suggested

dropbox start -i

This will start the installer and if you have a proxy in the way then this process will throw you an error. What you need to do is specify the proxy settings (including username and password. For some reason setting it via Gnome (System->Preferences -> Network Proxy) does not seem to work and we need to set the Environment variable http_proxy.

export http_proxy=http://username:password@proxy:8080

If you re-run the dropbox start -i command now the install should proceed as required and you’ll have a nice working install of Dropbox running. Note also that during installation it is possible to set the Proxy information that will be used by Dropbox for everyday running so there is no need to put the previously mentioned export command in your .bashrc file.



Thanks for reading, check out Todd Halfpenny for more from Todd Halfpenny