Our products

We are passionate about building niche multi-platform products that provide real utility to our customers.

Keep up to date with Liverpool FC news from across the web.
Domain Bites
Domain name industry news and resources.
Pub Reviews
Find the best pubs near you. Share your thoughts and photos.
Capture your taste and share it with the world.


We like to blog about software. Our stack, engineering problems, open source developments.. you will find it all discussed here.

Paying back my Javascript/React knowledge debt

Recently I was suffering from a little bit of work induced burnout and as such I took the opportunity to step back from 12 hours of daily coding to attempt to reduce my knowledge debt and refactor our various products.

At the most basic level this would involve updating and implementing newer/updated versions of the various frameworks that we utilise on both the front and backend of our various products.

I however wanted to delve a little deeper and make sure that our codebases (across various platforms) were written in a clean, commented manner, and that they followed appropriate design patterns and paradigms.

In the process I was made aware of my lack of knowledge of some relatively simple (yet powerful) concepts. I filled in these gaps.

I explored ES6 and current best practices for utilising React. Here are some of the things that I discovered.

Refactoring some aspects of the front end of our web applications was somewhat arduous, and demonstrated that common situation - that whereby after hours of work to the viewing public absolutely nothing has changed.

  • displayName

I saw the displayName property being utilised in an open source project that I was working with. Whilst 'Non-standard' I see no harm in setting this property. It is utilised by browser consoles to display a more informative name for your functions. It can make debugging a little easier.

  • Spread syntax (...)

This syntax is really useful. It allows much simpler usage and manipulation of arrays, including:

  • passing arrays as function parameters
  • more succinct copying and pushing

To read more, take a look here.

  • map

Whilst I was aware of the map function on the Array prototype, I never used it. I found/find that traditional for loops are clear and concise (enough).

In certain situations however map is not appropriate. For example it doesn't allow you to break out of the loop.

Whilst working with React I have had situations whereby I have wanted to inline an array loop, and using map is the logical choice for code readability.

You can specify the this context as the second parameter. It is all really quite simple.

  • reduce

I was not aware of the reduce function on the Array prototype. I discovered it as a result of wanting to flatten an array of arrays. It is simple and powerful.

To read more, take a look here.

  • Hoisting

This is one of those buzzwords utilised in every beginner Javascript book/tutorial. That said I have never attributed a concept which I fully understand and appreciate to its 'term'. It is weird how one just gets things.. understands things, and uses them. Concepts like 'hoisting' are second nature, and are subconsciously understood.

Hoisting refers to the situation whereby a variable declaration is hoisted to the top of its enclosing scope.

The declaration is 'hoisted' but the initialisation is not. See here for more.

  • const, let, and var


As outlined on the Mozilla website, "The const declaration creates a read-only reference to a value. It does not mean the value it holds is immutable, just that the variable identifier cannot be reassigned."

You must assign it a value when you initialise it as the value can not be changed.

You can however modify object properties, and array values when an object/array respectively is defined as a const.

const protects from reassignment but object properties can still be changed. Use Object.freeze to stop that.

You can have block scoped const definitions.

let and var

Again as outlined by Mozilla, in my opinion the most important difference between let and var is with scoping.

let is scoped to its defining block, whilst var is defined to its enclosing function.

This Stack Overflow answer demonstrates this well.

  • Loop labels

You can name for loops so you can break them by name.

A label allows you to identify a particular loop such that when nested you can break or continue from a specific loop.

This makes your code considerably easier to follow, and comes in handy when you are not using map ;)


  • ES6 Syntax

I was aware of ES6 but had not investigated it (until now). With a significant amount on my plate I was of the view that the time investment was not worth it. In hindsight, having now gained a thorough understanding of the new functionality this was foolish. Going forward writing Javascript code (generally) will be significantly easier with the new and powerful functionality provided by ES6.

This post outlines a number of ES6 changes that directly relate to React.

  • Arrow functions

One aspect of the new ES6 syntax which is particularly powerful is arrow functions.

One downside? of moving to ES6 class syntax is that you lose some of the behind the scenes benefits of the createClass syntax such as autobinding of component context.

Implicitly having to set context is a little strange (when you have gotten used to it being done for you), but it is relatively simple to do, and makes your code better - I like to minimise the amount of 'magic' in my code.

  • Stateless functions

As outlined in the docs, stateless functions allow a simpler syntax for defining components which do not need to maintain. For example 'presentational components' (mentioned below).

  • Presentational components

Dan Abramov has written a detailed piece on separation of concerns within React.

I had gotten somewhat complacent in my approach to writing Reactive components. I could write code quickly, but everything knew about everything and as such following the chain up the virtual DOM to discern where/why a particular value was set as it was was becoming somewhat arduous. This would have been much worse had the components in question been more complex.

Refactoring such that a singular container component 'controls' and interacts with the backend has essentially 'contained' my complexity which in fact makes things significantly simpler.

As a result of investigating and implementing these changes I also took the time to investigate..

  • Redux

Redux is a state management system developed by Dan Abramov at Facebook. He has created a 30 part (2 hours) series of screencasts which explain how to get started.

Whilst I have not implemented Redux across our products (for the most part our state requirements are simple enough that it is not currently worth the time investment), I certainly will utilise it in new products.

Its simplicity is incredible.

  • Scaling

During my research I stumbled upon this post about scaling React applications. It mentions generators, and more complex implementations of data fetching alongside Redux. An interesting read, and something I will be looking into further..

It mentions redux-thunk which defines a 'thunk' well - "A thunk is a function that wraps an expression to delay its evaluation.". I mention this because a thunk is another one of those things that I understand and utilise daily yet have never attributed to its associated buzzword. Fun stuff.

Thats it..

Thats it for now. Nothing particularly complex or exciting.. simply an overview of some interesting and useful 'things'. Enjoy !

phpv8 and php-v8 are different

phpv8 and php-v8 are different.

Recently I chose to upgrade our servers to php7. At the same time it seemed appropriate to upgrade our Ubuntu installations to Xenial Xerus.

Having upgraded to Xenial Xerus, installing php7 (with aptitude) was no issue. I did however have to reinstall the various PHP extensions that our projects utilise.

For example I had to install Phalcon 3 which is now disgustingly easy - it is now hosted on PackageCloud.io.

I also had to install the latest version of the v8 engine and its PHP extension. I previously wrote about compiling the latest versions of v8 and v8js on Ubuntu, but decided to see if anything had changed in terms of the packages available on the latest version of Ubuntu.

Installing the v8 Javascript engine

The READMEs for both phpv8 and php-v8 note that one can install the v8 Javascript engine using the the pinepain/libv8-5.4 PPA. That is easy enough:

$ sudo add-apt-repository -y ppa:pinepain/libv8-5.4
$ sudo apt-get update -y
$ sudo apt-get install -y libv8-5.4-dev

Installing v8.. for PHP

This is where I got a little confused. Having Googled 'v8 PHP', I had found the above link and installed v8.

Not appreciating the dash (-) in the project name I also went about installing php-v8. It wasn't until I was looking at phpinfo() that I noticed the extremely low version number. I also saw some errors in my error log about the class V8js not existing.

A little head scratching later and it hit me that php-v8 is not phpv8. Instead of installing the latest version of phpv8 I had installed a completely different project.

The moral of the story.. no server admin when tired.

It does not help that the phpv8 README links to @pinepain's repos as a recommended way of installing the v8 engine. It is organised confusion :)


  • Install the v8 engine using @pinepain's PPA - it is super easy and much simpler than compiling it yourself.

  • Compile and install phpv8 OR php-v8 as required (it is easy, and both have informative READMEs) depending on what you need. Note that they are different :P

  • Enjoy the ability to execute Javascript on the server. Isomorphic Javascript - Woo !

Implementing the Paypal PHP SDK

I was recently asked to implement a subscription offering for a client on their web application.

I was initially apprehensive based on the naive assumption that taking payments had to be complicated.

Given that the client offers a single product at a single price and that the subscription is 'digitally delivered', I was essentially looking for a way of implementing a payment process that could be completed in a few clicks.

I am aware of products such as Square and Stripe, and I believe that they have APIs which one can utilise. Given the specification however I felt that these offerings would be overkill (disclosure - I did not actually investigate).

During my time at Uniregistry I had also had the experience of working with more traditional payment processors. Again, I did not want to implement a full checkout process. I was aware that their application processes were complex and that they had significant minimum transaction volumes, and (if my memory serves me correctly) the APIs offered were somewhat complex.

As such I went back to the original payment behemoth - Paypal, and began to investigate their API.

I thought that Paypal's API would be extremely complex and that they would have an arduous application process. Whilst their API might be complex, they provide an extremely well documented PHP SDK as well as detailed example source code.

Implementing the above mentioned specification took a matter of hours. It was simply a case of:

  • Installing the SDK with composer.
  • Creating an application within the developers console.
  • Reading the sample source code.
  • Implementing and adapting the 'PayPal Payments - similar to Express Checkout in Classic APIs' example.
  • Testing the implementation in the Paypal sandbox.
  • Changing a configuration parameter to 'live'.

The one (and only) complexity that I encountered was that when a prospective buyer was checking out, the payment screen would display 'Double Negative Solutions' in the header.

Whilst strictly correct, I wanted to display the clients product name to make it clear to the buyer that everything was in order, and that they were in the correct place.

After a little investigation I discerned that this could be achieved by creating a 'Web experience profile', as demonstrated here. You can also create the profile by executing a CURL request directly to the appropriate endpoint.

This little extension in my requirements allowed further investigation into their offerings..

My personal interactions with Paypal have sometimes been complex - recurring payments, multiple currencies, partial refunds etc. This is why I had assumed that integrating with their API would be tough.
In reality they have created a simple, modular, and well documented API which allows you to utilise as much or as little as you need. Were my client to want to implement more complex payment functionality it would be a step-wise process - implementing things as/when they are needed.

No huge time investment is required to learn and work with the Paypal API, and that makes it great for time constrained developers (all developers).

A brief investigation indicates that PayPal offer Java, PHP, Node, Python, Ruby, and .NET SDKs as well as mobile SDKs for both iOS and Android. Assuming that they are as well written (and documented) as the PHP SDK then implementing Paypal payments on any platform should be an absolute doddle.

Good job Paypal !

Sublime Text 3 Cheat Sheet

One of my favourite pieces of software is Sublime Text 3. It is my text editor of choice, and is well worth the cost given the number of hours I use it each and every day.

I utilise Sublime in a rather simplistic way. It looks fantastic, and its syntax highlighting functionality allows me to follow my code with ease. It also offers a number of customisable shortcuts and keyboard commands to allow you to navigate through my code in an efficient manner. These include:

  • CMD + R which allows you to navigate to a specific function.

  • CMD + P which allows you to navigate to a specific file.

Recently I have been working extensively with JSX. I noticed that my .jsx files did not have any syntax highlighting.

Fortunately Sublime offers 'Package Control' which allows you to easily and quickly install plugins developed by third party developers.

I quickly found the Babel package and installed it within seconds.

Whilst I now had syntax highlighting for .jsx the colors were a little garish. Installing new color schemes is just as easy as installing new packages. Another developer has created a package called ColorSublime which allows you to choose, preview, and install new color schemes instantly.

Other useful tricks

Whilst I was at it I figured I'd investigate (and collate) any other useful tricks I could find for Sublime so as to make my workflow more efficient.

These are listed below.

  • Option + ⌘ + 2 displays two panes side by side.

  • Shift + Option + ⌘ + 2 displays two panes one above the other.

  • ⌘ + Control + Shift + F goes into 'Distraction Free Mode'. This essentially makes Sublime fill the screen, and removes any unnecessary panes etc.

  • Cmd + / comments the selected code.

  • Cmd + Shift + J selects all adjacent lines with the same level of indentation.

  • Cmd + Shift + V pastes the copied code at the level of indentation where your cursor is.

  • Cmd + Ctrl + G selects all instances of whatever you have selected.

  • If you select a CSS properties list and hit F5 it will sort them alphabetically.

  • Ctrl + M takes you to the opening/closing tag counterpart of that positioned where the cursor is.

My packages

To finish off this brief 'cheat sheet' I figured I'd also outline the 'Packages' that I have installed and utilise.

  • Babel (as mentioned above).

  • ColorSublime (as mentioned above).

  • PHPUnit. Yes, there is a plugin for running your unit tests directly from Sublime !

  • Sublime PHP Coverage. Yes, there is a plugin for showing your test coverage inline within Sublime !

  • Sidebar enhancements. Provides additional useful functionality when you right click within the sidebar. For example I regularly use 'Open in Finder'.

  • Emmet. This makes writing your code quicker by proxy of a number of shortcuts (which you have to learn). I have only recently installed this, and need to investigate further.


I have used Sublime Text daily for over three years. It is awesome.

I thought that before I realised the full extent of what it can do. That says a lot about how good it is.

Hopefully this basic overview of useful functionality will make you more efficient when writing code in Sublime (which at this point you should have definitely bought.. :P)

If you have any questions, or know of any other 'must know' shortcuts, please do let me know.