All posts by Matthew Lawson

Animated Selfie Maker for OS X

Download for OS X v0.1.0

This is more of a techy breakdown of how the app works. If you are more interested in learning more about it in terms of how it works for a user, check out this page

Challenge Post

This software was originally written and submitted to a competition on Challenge Post titled “re invent the selfie”. Originally I planned to make a timelapse of my entire day into an animated gif capturing a snapshot from the webcam every 30 minutes or so during my work day. I decided that was a little niche so I reduced the capture time down to a few seconds to add just a little extra to the moment of capturing a selfie.

How it works

The project is a node webkit packaged app for OS X. It opens the users webcam when the app is opened, then when the large “Make it” button is pressed 5 frames are captured from the webcam and converted into the gif image format. Then a save button appears and the user can save the gif to their filesystem for sharing on social networks.

What I learned

This was my first experiment using node webkit packaged apps. My day job is fairly varied and I spend most of my time either writing gallery2Spring java applications or using front end web tools such as angular for a large scale chat service. So it was was a different set of concerns for me to take into considering building this tool for desktop users. It could be argued that this tool is much more suited to be a mobile app as it is much easier to capture a moment using a mobile phone than pointing a laptop webcam at a situation. This is true but I wanted to quickly prove the concept on desktop and expand my skills into a more challenging environment for myself before porting to mobile, the desktop is more suited to the original time-lapse idea that the project stemmed from.

What’s next for Animated Selfie Maker for OS X?

  • Social sharing is my top priority to make it super easy to share your selfie to all the main social networks.
  • Settings to control how many frames to capture and at what speed – this will allow the quick selfie to be expanded into a timelapse if the user wishes.
  • Filters – Add Instagram style filters & shapes to the animated selfies to make a more interesting creation.

Other Platforms

The technology the app is packaged with make sit easy to release a version for windows and linux so they will be following behind the gallery1release of this app shortly. The medium of desktop is interesting to develop for but not realistically the most practical to take a selfie on, so depending on the feedback from this desktop release I may port to mobile.


Probably not, I may add an option to remove the watermarks from the selfies but as my time commitment has been fairly low to get it to this point this 0.1.0 version will always be free. If my plans above take me longer than I originally thought I may add add a paid for version to remove watermarks for a very minimal price.

My competition Entry

WordPress short tag attributes not parsing?

I recently had an issue with wordpress 3.9.1 short tags not parsing correctly. It would call the appropriate function but not populate any of the appropriate attributes. Infuriatningly the issue was only on my live server and not on my development machine so it was a lot of trial and error to track it down. After investigating the problem in the third party plugin for a while I eventually tracked the problem down to the following regular expressions returning NULL.

$text = preg_replace("/[\x{00a0}\x{200b}]+/u", " ", $text);

Checking the php logs had the following error:

Warning: preg_replace() [function.preg-replace]: Compilation failed: unknown option bit(s) set at offset -1 in /path/to/public_html/wp-includes/shortcodes.php on line 257

The problem was an I was running version 7.8 of PCRE (Perl-compatible regular expression) libraries. A quick update to 8.21 solved the problem straight away.

yum update pcre

WordPress and nginx infinite loop when using a reverse proxy

I have recently given my server setup a bit of an upgrade moving from an oldish version of lighttpd to nginx 1.6 compiled with the google pagespeed module. I wrote about the speed benefits in a seperate post.

When I was upgrading I had both servers setup side by side with nginx running on port 82 and setup a quick lighttpd reverse proxy from lighttpd to nginx so that I could keep all my sites up whilst experimenting with nginx config. When forwarding from lighttpd to nginx at a wordpress install it seemed to get itself into an infinite loop redirecting over and over to the homepage.  The problem could be tracked down to the redirect_canonical() function in wp-includes/canonical.php.

The check to see if we were on the canonical version of the url was failing and redirecting to itself.  I believe it was because the port in PHPs’ $_SERVER variable were different so the url did not match and WordPress would continue redirecting to the url forever. A quick fix was to remove the redirect_canonical filter with the following filter:

remove_filter('template_redirect', 'redirect_canonical');


The more permanent solution for me which may not be appropriate for everyone was to have all traffic go directly to nginx and remove the reverse proxy after I had finished testing other areas of the site. Using the filter above amy end up with you having multiple versions of the same page indexed by google if you have several versions of the same page setup for translations etc.

How to score 100/100 with google PageSpeed insights tool

A few days ago I came up with a few goals for this site as I have been a little lazy letting the content become fairly stale. I have preached many times to clients and people around of the importance of high quality content in modern SEO in 2014, so, I thought it was time to practice what I preach a little and see what kind of differences I could make to my own site. So as a software developer I thought the easiest problems to fix with this site first would be the technical performance. A good metric for measuring the technical performance of a site is googles PageSpeed Insights tool.  It takes multiple factors into account mostly around the two topics:

  • User Experience
  • Page Speed (Ranked separately for desktop and mobile)

User Experience

Before I started trying to improve my ranking I was using a wordpress theme that was a few years out of date. It wasn’t responsive so didn’t perform well on mobile at all.

Bad mobile score 56 / 100
Bad mobile score 56 / 100

So an easy first step was to update the design. I went with the default wordpress twenty fourteen theme as it performs well on all platforms.

Insights - new theme UX 93 / 100
Good mobile score 93 / 100

Ok, so that was easy. It has some suggestions for increasing the tap areas on the category and tag links but as this is a free off the shelf wordpress theme I am not too interested in that (for the time being). Interestingly my google analytics stats showed that before I changed this theme my visitors were 97% desktop and the remaining 3% mobile / tablet. 97.5% desktop visitorsThe main factor for this is undoubtedly that the content is mainly discovered my developers looking for WordPress plugins, but maybe I am being penalised by google for not having a mobile friendly site. I will keep an eye on these numbers in the coming months to see if they improve.


Next the trickier area of speed comes in to play.  The PageSpeed insights tool focuses on mostly front end speed improvements, such as removing removing render blocking javascript and optimising delivery of assets. This can be done in many ways such as minifying / inlining / combining assets so that the users browser makes as few requests as possible using the least amount of bandwidth.  A relatively small amount of weight is given to actual server response time. With the main focus on getting the user to a point they can browse your page in the quickest time possible.

Since January 1st 2014 the average page load time has been around 6.98 seconds (slow) and average page load time 2.70 seconds.  A quick first load test with firebug on the homepage of shows 23 requests, 636kb transfer and 3.26 seconds load time.

Slow firebug Net tab
Slow firebug Net tab

The PageSpeed Insights tool didn’t score too much higher either with a mobile speed score of 64/100 64 / 100 page speed

The problems

From a speed point of view there are many issues ranging from the modular nature of WordPress with each plugin adding more CSS or javascript requests to the head and the lazy nature in which I upload screenshots – not converting to jpeg or optimising etc. None of my css / javascript was compressed or combined + most of my javascript was not loaded asynchronously.


Rather than fixing all of these problems by modifying the websites core code I chose instead to use the PageSpeed Module for nginx. It is basically a set of filters that run at the web server level after your web backend has finished generating the markup. It will optimise the markup to web best practices as well as optomising the delivering of assets for bandwith savings and speed. For example it can rescale images to a size requested by the markup via height / width tags, preforming a lossless compression, delivering WEBP images to browsers that support them. It can also combine javascript files and make them non-blocking + minify. The main advantage being this is all a process that can run entirely separately from your development flow meaning you can still upload unminified css to you web server and not have to worry about manually combining files together for speed.

To Install I had to recompile nginx with the page speed module (Instructions here). There are filters for each of the different options and match fairly closely to the issues that the PageSpeed Insights tool will give you.  The complete list of filters are all documented but the config below is what worked for me to achieve a 100% speed ranking with the PageSpeed Insights tool. I added this config to a pagespeed.conf file and I include it for each virtualhost on my web server

pagespeed on;
# Needs to exist and be writable by nginx.
pagespeed FileCachePath /var/ngx_pagespeed_cache;

location ~ "^/pagespeed_static/" { }
location ~ "^/ngx_pagespeed_beacon$" { }
location /ngx_pagespeed_statistics { allow; deny all; }
location /ngx_pagespeed_global_statistics { allow; deny all; }
location /ngx_pagespeed_message { allow; deny all; }
location /pagespeed_console { allow; deny all; }
location /pagespeed_admin { allow; deny all; }

# Ensure requests for pagespeed optimized resources go to the pagespeed handler
# and no extraneous headers get set.
location ~ "\.pagespeed\.([a-z]\.)?[a-z]{2}\.[^.]{10}\.[^.]+" {
add_header "" "";

pagespeed EnableFilters combine_css,move_css_above_scripts,defer_javascript,lazyload_images;
pagespeed EnableFilters rewrite_images;
pagespeed EnableFilters prioritize_critical_css;

pagespeed EnableFilters rewrite_javascript;
pagespeed UseExperimentalJsMinifier on;
pagespeed EnableFilters inline_google_font_css;
pagespeed EnableFilters insert_dns_prefetch;
pagespeed EnableFilters combine_javascript;

The tool runs in the background so not every rule will be satisfied on the first page load with the new config turned on. Some processes such as the recompression of images and fetching / inlining of css scripts will only be served to the browser once the external process has completed. It would be a bit of an anti-pattern for a page speed module to make a request slower whilst it finishes its compression.

With all of those filters I was able to achieve a page speed rating of 100/100 for bot mobile and desktop Screen Shot 2014-06-14 at 22.48.37

The module runs as a cpu bounded process so it should not overload your server. This makes it not play terribly well with some caching tools as they can cache too early before the page or all assets has been fully optimised. There are experimental features for configuring a downstream cache with varnish but I have not yet implemented this.

Hopefully this will help if you are struggling to make sense of or make some of the improvements suggested by the the PageSpeed Insights tool. The nginx module certainly took a lot of the manual pain away fro me in reaching my speed goals. I will update in a few weeks time when I have more user data via google analytics if the changes have made a significant affect to real world users.

Search by Product Tag for Woocommerce

Download at

UPDATE 14/03/2014: Version 0.3.1 has been released on get it using the download above. It removes all duplicates and has compatibility with WPML plugin as well as testing up to wordpress 3.8.1 and woocommerce 2.1.5

The default install of woocommerce does not come with any searching capabilities based on the tags that can be assigned to each product.

I have written this plugin to add this capability to the search on both the front end of your woocommerce site and in the wordpress admin site. There is no extra config apart from installation and activation of the plugin.

You can search by multiple tags by splitting your search with a comma. For example to search for all products tagged with toys and helicopter enter into the search box: “toys, helicopter” and all products with those tags will be returned in the search.

The search functionality in woocommerce doesn’t search by product tags by default. This simple plugin adds this functionality to both the admin site and regular search. It is very useful if you want to add some extra meta information to a product that will increase the discoverability on certain products.

If you have any issues or feedback feel free to leave a comment on this post and I will try and sort is as soon as possible

Disclaimer: This plugin does a mysql query with several joins upon each search. If you have an extremely large store (Eg 20, 000 products) you may be better off using a more generic search solution that builds its own optimised indexes for more speedy searching. If however you own a comparatively small store (less than 5, 000 products) this plugin will probably suit you better.

(Image Credit Patrick Feller  Flickr)

Search by SKU for Woocommerce

Download: Search by product SKU v 0.6.1

I recently completed a project that had a requirement for site users to be able to search for woocommerce products by the SKU (Stock keeping Unit). I looked at using relevanssi search but the configuration was a headache and seemed a little overkill to add the search for something very specific.

Plugin Description: The search functionality in woocommerce doesn’t search by sku by default. This simple plugin adds this functionality to both the admin site and regular search. If a product variation is matched the parent is returned otherwise it will try and match on a regular product stock keeping unit.


Version 0.6.1

Better compatibility with Relevanssi search plugin

Version 0.6.0

Minor release functionally – Major release development wise :)

  • Compatibility with Woocommerce layered nav widget!
  • Fix issue with search results appearing in strange places.
  • Compatibility with Woocommerce Price filter widget!
  • Fix issue with incorrect result count.

This is probably the most significant release of the plugin so far as it addresses most of the issues previously raised, so please keep all bug reports / enhancement suggestions coming :)

Version 0.5

  • Improved support for sites running wpml for translations in woocommerce

Version 0.4

  • Remove hidden products from search results
  • “Total Found” search count works in more themes.

Old Versions

If anyone wants to revert back to an older version of the plugin at any point they are still hosted here:

If you have used any of my plugins successfully why not throw me a few $ here:

(Photo Credit Allan on Flickr

Using tables to replace images in HTML Newsletters, a tool using FileReader + Canvas javascript

OK, Yes I know it sounds mental, but consider the latest email that came from apple selling tickets for their WWDC tickets today. When it arrived in my inbox today it looked like this:

When you enable images it looks like this:

It’s nicer but wouldn’t it be nicer if there was a better in-between stage before the ‘display images’ button was pushed. What if there was a way to display the nice image as a html table so it could be sent in an email and look half decent before ‘display images’ is pressed.

I decided to knock up a quick tool that does exactly that. I wanted a completely client side solution so I used the FileReader api. This does mean that browser compatibility is not wide and the tool doesn’t do any degradation, if your browser doesn’t support it the error console is probably the best place to tell it hasn’t worked. You can also use the sample image if you run in to problems using your own. When I feed the apple artwork through the tool and replace the image the email now looks like this:

Also: view it in your browser. Once the image data has been accessed using the FileReader api it loads the data into a canvas element it samples the image at user defined intervals to get the rgb values. Each of the samples it takes is a <td> in the table with a individual colour. Use firebug / browser developer tools to view the tables output.

Youtube hit count spinner

As seen in countless TV adverts and movies. If you drag the button to your bookmark menu and click it whilst on a youtube video it will make your hitcount start growing really fast. If it needs to be said this is just an effect and doesn’t actually increase the amount of views your video has according to youtube its just a effect in your browser.

To to see it in action visit drag the button to your bookmarks to use it on

I wrote it mainly to practice some non-jquery javascript and I wanted to do a bookmarklet. So if you have any suggestions to improve the javascript let me know here or you can also fork me on github.