From a Problem to 100,000 Downloads

It was 1054 days ago that I first wanted to place a WordPress widget into a post I was writing. Whether it was for a client site or personal one I can’t remember… the important thing is that out of the solution I came up with emerged the Widgets On Pages WordPress plugin.

The plugin has undergone very little change since it’s 0.0.1 check-in to the WordPress.org plugin repository but since then it’s had very favourable reviews and been included in several blog posts and conference talks. But more importantly, for today at least, it’s now been downloaded over 100,000 times!

It has a current rating of 4.7/5 and at the time of writing sits as the 105th most highest rated plugin on the WordPress.org repository. 105th might not seem too good but it should be noted there are over 23,800 plugins in the repo.

Web Celebs and Sasquatches

Since my first forays into the world of Web design and development I was actutely aware of what seemed to be a circle of folk who were everywhere. There were those that were involved in The List Apart empire, those that contributed to .net, those that had authored books on the subject, those who spoke at conferences and so on. It was very common for those who were involved in one of the above to be actually involved in many.

Bigfoot Sighting by JD Hancock, on Flickr

Starting out, these were the folk I kept an eye out for; if they were doing something new with JS then I should take a look too… and if they had a view on clients then I should probably read up on what they were saying. They were our leaders, our chiefs.

Slowly it dawned on me (perhaps I’m not the sharpest tool in the box after all) that these chaps and chapesses were all quite well acquainted with each other.  After some time I formed the opinion that this smallish circle were actually very tight-knit. It appeared to be like some kind of site-cross-linking that had managed to manifest itself out of the virtual web. If one of the members had written a book then others of the group would be very quick to back it up… and sometimes this support seemed to be there regardless of how poor the material was. The pat on the back was always there… even for the most mundane insight or mediocre execution.

I remember one Boagworld podcast (a Christmas special I think) when some dude came on and started talking about a new approach to building sites. He was shouting about it like he’d had some crazy dream and now he had to teach the world. He was, however, just regurgitating the well-known verses of Graceful Degradation and Progressive Enhancement but trying to re-sell it. I was bemused at this.

Please excuse me if you think I’m saying that everything I received from this Web Celeb group was all drivel, it most definitely wasn’t. It was through these dabblers that I first learnt of media queries; it was this circle that brought the wonderful Silverback parallax affect to my attention… and it was these guys and gals who introduced me to cheese and Marmite on toast. I have a lot to thank them for.

And so it was that yesterday, the Responsive Day Out was mentioned on twitter by Jeremy Keith. An instant backlash of “it’s the same folk as at every other conf” appeared… and thus ensued a lovely conversation between Jeremy Keith and Zack Inglis. It was this conversation that sparked me to write my thoughts on the Web Celeb (non)existence.

Having been to a few conferences (note, not a lot) I can say that I’ve enjoyed the whole experience of meeting new folk, chatting about geekyness and drinking beers just as much as I’ve enjoyed the talks. And in general the talks have been good too. I was pleased to catch Jeremy at DIBI as I was initially sure it was he who had babbled on about re-inventing Progressive Enhancement… though I was proven to have made a mistake and loved his talk. I have also enjoyed talks by other Web Celebs but equally have been bored by some. In the same way I have very much been grateful to be in the audience for non-Web Celeb’s talks… as I have also been sad to be for others.

I suppose I should try and bring some clarity to my ramblings (too late, I hear you cry)… and I think it comes down to a couple of points;

What do we mean by Web Celebs?

Are these just anyone who’ll get a retweet by Elliot Jay Stocks or Jeffrey Zeldman. Are these people who we’ve seen on a handful of conference line-ups? Are these the people who appear on Boagworld or have A Book Apart published?

Why are the Conferences full of them?

The answer to this question, although is an easy answer, isn’t the one we all want. Surely a conference organiser wants to break-even if not make money, so why not get a Web Celeb on the line-up? It was these people I wanted to hear from when I was starting out… so surely these folk now starting off on their journey into web design and dev also want to see them too… and are more than happy to part with some cash to see them.

What makes a Web Celeb?

So a Web Celeb probably needs to be good at speaking and getting their point across. Those that don’t will probably fall out of the higher tier quite quickly.

Are they the best at what they do? If we mean designing, writing, developing, etc then the answer is “Probably not”… but that doesn’t mean they’re not good at selling their knowledge and experiecnce.

They also appear to need to work hard on getting where they are. I’ve never written a book (though I was a technical reviewer on Rachel McCollin’s WordPress Mobile Web Dev) but have been told by all who have that it’s very hard work. I’ve also never spent the time writing an article for .net or a tutorial for Smashing Mag. And I’ve never put in the hours needed to record a Podcast. But these Web Celebs have.

The Bottom Line

Do Web Celebs exist? Damn straight they do… but they’re there because in general they’ve grafted away. Perhaps they’re lucky to have a good personality or to know someone on the inside as well… but I can’t knock them for that

What about these conferences full of them? Try not to begrudge the organisers for this. It’s what a lot of people want. If you don’t then perhaps look to attend the smaller conferences… or get involved in organising one.

Do I like it? Nah, but that’s life… and to be honest that’s why I really like the Build It  track at the DIBI conferences. Full of folk who really know they stuff.

So Web Celebs and Sasquatch… let’s just say I believe in one of them.

WordPress 1 Minute Wonder – Quick Performance Boosts

WordPress One Minute Wonder

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

[jbox color=”blue” vgradient=”#fdfeff|#bae3ff” title=”Found this useful?”]If you’ve used this technique on your site for performance reasons and have some results then please leave them in the comments.[/jbox]

* 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

WordPress 1 Minute Wonder – Styling Widgets on Pages Horizontally

WordPress One Minute Wonder

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.

[widgets_on_pages id=”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.

[jbox color=”blue” vgradient=”#fdfeff|#bae3ff” title=”Found this useful?”]If you’ve used this tip why not subscribe to my feed or check out the first item in the WordPress 1 Minute Wonder series?[/jbox]

WordPress 1 Minute Wonder – Styling Author Comments

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
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.

[jbox color=”blue” vgradient=”#fdfeff|#bae3ff” title=”Found this useful?”]If you’ve used this technique on your site for styling comments then please leave me a comment below with a link so I can take a peak.[/jbox]