Category Archives: technology

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.

Ubuntu 2d – Some tweaks

Recently my install of Ubuntu on my work desktop started complaining about now being out of support… so I decided to upgarde to the latest LTS version (Ubuntu 12.04). Overall the install went fine apart from a couple of little things that I needed to address

Desktop size to big for Unity 3D

Sadly my graphics card did not support running Unity 3D across my dual-head setup (2 x 24 inch monitors). This, I didn’t feel, would be too much of an issue as I wasn’t too interested in all the desktop eye-candy. All I did here was then choose the Unity 2D option at the login prompt.

The 2D setup itself was not hassle free though;

Quick Synergy, Very Laggy

I noticed that for some reason the usually great Quick Synergy (which I highly recommend if you want to share mouse/keyboard across multiple PCs… including different OS) was very laggy. This was not the case if I used Unity 3D in mirrored monitor mode or if I used any of the other Gnome desktops at login. I had no luck in finding a solution to this… that was until I decided to solve my next issue… read on for the Quick Synergy lag issue solution.

Terminal Window Always on Top

I found that the Terminal windows always remainded on top (in front of) other windows I had opened. Now I’m the kind of guy that uses the Terminal a lot, so this was going to be a show-stopper if I couldn’t find an answer.

After a brief search I came across this link which details a solution. In essence it just tells you to disable metacity from being the composting manager (and how to do it too).

I’m not sure what adverse side-affects might be suffered from this… so far I’ve not noticed any. One good bi-product of this chnage though was that Quick Synergy sped right back up again and became super-responsive once more… WIN!

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.

Ubuntu & Windows 8 Dual boot on Asus ux31a

Having been in the market for a new lightweight laptop for some time I pounced on the Asus ux31a Ultrabook when it dropped £300 last week (it has since gone back up to its original price). And being an avid Linux fan the end-plan was to wipe the pre-installed version of Windows and have the whole thing running Ubuntu.  When it first arrived though I thought of trying out a dual boot of the stock Windows 8, which I can have a play around with, and also the recently released Ubuntu 12.1o. This wasn’t completely plain sailing as I ran into some issues with the booting of the live USB… anyway, these instructions document what I did to solve the problems I was having and led me to having a running system.

Creating the Windows 8 Recovery Disk

I essentially followed the instructions here but have added some screenshots here too as they show what my system looked like. NOTE: I have not tested my recovery disk

Bring up the run dialog by pressing the key combination [WinKey]+[R] and enter the command RecoveryTools, then OK

In the next Create Recovery Drive window check the Copy the recovery partition from the PC to the recovery disk and click Next

The next window to appear asked me to choose the destination device… I only had the one USB drive inserted so this was the only option.

The process took quite some time (at least an hour) and ended up using just shy of 10GB of space on the USB drive.

Decrease the Windows 8 Partition Size

The next task was to reduce the amount of disk space the Windows 8 was using so I could free some space for the Ubuntu install to sit alongside. Since my dual boot setup was to be fairly temporary I took the option of just using the majority of one of the 2 SSDs for Ubuntu.

Again I brought up the run dialog by pressing the key combination [WinKey]+[R]. I then then entered the command diskmgmt.msc, then OK to run Windows built in Disk Management tool.

This is what the partitions looked like out of the box.

I simply reduced the partition on the 2nd SSD (D) by 97280MB (95GB) which left me with this;

Trying and Installing Ubuntu on the Asus ux31a

Now comes the fun bit… and also the bit that caused me to run through some trial and error steps. Oh, I won’t go into details about creating a bootable Ubuntu USB as this has been covered many times.

So anyway, I plugged the USB into the ux31a (which was off) and pressed the power button. Then, holding down [esc] to enter the boot menu, I saw the options to boot from the USB drive (prefixed with UEFI which is some secure boot stuff… this is what foxed me). After clicking the option to boot from the USB I was given Ubuntu options menu screen which has the familiar Try Ubuntu, Install Ubuntu etc items. However, on clicking any of these all that happened was some brief USB activity and then the screen would go black/blank… nothing more.

After some hunting around I found an option called Secure Boot from within the BIOS Security tab in the BIOS setup (which you can get to by holding down [esc] during boot. This setting was originally set to Enabled so I swapped it to Disabled then saved the changes, exited the BIOS setup and the rebooted. This time, after clicking Try Ubuntu I was greeted by more USB activity and then a running Live Install instance of Ubuntu… perfect!

I then ran the Ubuntu install making sure to check the Install Ubuntu alongside Windows 8 option. This install went without any issues.

Repair the boot of the Computer

I had already read that the first boot back into Windows 8 might fail, which it did due… throwing some UEFI path error. This was no concern as I already knew that this could be fixed by downloading, installing and running the Ubuntu Boot Repair tool. This I did and that fixed my boot into Windows 8 (not that I’ve used Windows again since installing Windows).

Other Small Tweaks

Getting USB Ports Working Again

I had noticed that when I plugged in USB flash drives that they won’t showing at all. It wasn’t that they weren’t mounting (I don’t think) but actually that the ports were not enabled. To get them working again I had to change the “XHCI Pre-Boot Mode” from auto to disabled in the BIOS. Once this was set any devices inserted into the USB ports were auto mounted.

Middle-click Mouse Button with the Trackpad

One other thing I did was to modify the multi-touch settings so that the 3-finger-click was handled as a middle-click on a conventional mouse. I had grown very use to this middle-click for pasting over my time with Ubuntu on my other machines. This setting is handled, quite crudely by having the following in my ~/bashrc file. I know this isn’t pretty but I always have terminal windows open so it does the trick.

synclient TapButton3=2

And that is it… for now… and I’ve got to say I’m really enjoying it.

Possible Erlang Bad Transform Function Solution

Just a quick thing to try if you’re running round in circles trying to work out why your mnesia:transform_table(Tab, Fun, NewAttList, NewRecName). isn’t working and returning you with something like this;

{aborted,{"Bad transform function",test,...}

Now, if you’re table is distributed then make sure the beam file has been loaded onto all nodes first.

This particular one had me for almost an hour before I sussed it, so I hope this quick blog post saves some of you some time too.

Ubuntu Software Center Behind a Proxy with Authentication

Just a quick post on how I managed to get my Ubuntu Software Center working at work where I had a proxy between me and the Internet which required username and password authentication.

Security Camera
Image: Jake Setlak 2002

Now really this should have not been an issue I think, since there’s a “Network Proxy” setting in the “Preferences” for Ubuntu but for some reason the Ubuntu Software Center doesn’t seem to take note of this (or the authentication details for username and password at least).

So anyway, this is how I got it working through a proxy on my 11.04 Ubuntu. Basically you need to edit the /etc/apt/apt.conf file with a line like the following and replacing user, pass, host and port with the relevant dertails.

Acquire::http::proxy "http://user:pass@host:port/";

Hope this helps.

Lanyrd Splat WordPress Widget Plugin

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!

Lanyrd info as a WordPress widget
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.

Lanyrd Widget Settings
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.

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 Upgrade Error – Incompatible Archive Solution

Just a quick post to highlight the solution to a recent WordPress issue I had when trying to upgrade WordPress release using the “Upgrade Automatically” option. The error I was seeing was:

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.

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]