An ECMAScript 6 (Javascript) based text, element and node highlighter – this base project allowed for certain criteria to be passed to the script and it would then highlight the relevant sections in supplied HTML pages. Multiple highlights were allowed per page (and item), tool tips were automatically added and users could click on the relevant highlighted sections to be returned to the reason of highlighting.

Example usage:
Highlight Text starting `this` exactly 31 characters long as a `Grammar` test with a tool tip of `Exactly 31 characters long`:

"test": "Grammar",
"status": "unconfirmed",
"title": "Check this grammar",
"tooltip": "Exactly 31 characters long",
"highlight": {
"regexp":"this.*",
"minLength":30,
"maxLength":32
}


All links going to example.com (http or https)

"highlight": {
"querySelector": "a[href=\"http://example.com/\"],a[href=\"https://example.com/\"]"
}


All links with the text “sixth”

"highlight": {
"querySelector": "a[href]",
"word":"Sixth"
}


Bad capitalization of Facebook:

"highlight":[
{
"word":["facebook","faceBook","FaceBook","Face-book","face-book","Face-book"],
"caseSensitive":"true"
},
{
"querySelector": "img[alt=\"facebook\"]"
},
{
"querySelector": "img[alt=\"face-book\"]"
},
{
"querySelector": "a[href*=\"face-book.com\"]"
}
]
},


A client had the requirement that they wanted to be able to capture screenshots of web pages, emulate user interactions (such as scrolling, key presses and mouse interactions), record all images and other assets transferred and have all the data returned to a PHP backend.

For this end, an approach to use NodeJS with the Google Chrome Headless web driver kit was made ( a previous incarnation of the project was using PhantomJS) with excellent results.

As a proof-of-concept, we were asked to come up with a “simple web based emoji calculator” (where the operators were emoji characters/symbols instead of the traditional +, – etc signs). The condition is that, apart from the frontend (powered by jQuery and Bootstrap), all of the code had to be developed by us – so this meant no using frameworks (such as Slim or Silex) or third party code. It also had to show quite a large degree of “best practice” usages: oh, and it had to be written within 4 hours: making what would be a very simple quick project into one that took the whole four hours to write a PSR-7 style “request/response” system, with MVC pattern usage, a container (following the PSR-11 container-interop style) and routing. After this we spent a few hours writing lots of unit tests for it and generally bringing it up to an even higher standard.

Once Comprobo had their facial detection system in place (also developed by Bairwell), they then wanted a way of being able to compare two faces to each other an receive back a “match confidence” as to how identical they were.

This information needed to be “called back” to the main Java based workflow system using a JSON API, but also be available for simple testing on a “test harness” – necessitating a simple front end.

Using OpenBr (also known as OpenBiometrics) and some C++ code in the background, we developed a Slim3 Framework driven PHP application to handle the input and output of the data.

A UK company approached us asking for a brief specification document to support their range of low-powered GRPS based Identicom Lone Worker Device products. These are safety lanyards which when activated, communicate with a central server to indicate help is required and the urgency of that help.

The specification was 10,000 units communicating at least every 30 minutes (to “check-in”/location updates): a minimum of 20,000 requests per hour: our specification would safely handle 360,000 messages an hour but could theoretically go up to 61,200,000 messages an hour.

Within a day, a basic document detailing the proposed load balancers, receiving stations, message brokers (using Redis) and file/data storage was put together as a topic of discussion.

Comprobo needed the ability to be able to accept user uploaded videos and ensure the later playback of them on a variety of browsers in different video encoding methods.

We constructed for them a Slim3 Framework (PHP) powered API microservice, which accepted JWT (JSON Web Token) signed JSON requests which included an input video location, video output location and additional various parameters. This information was then taken and the video fetched, analysed for length, resolution, name etc (with this information being able to be “called back” at this point) and then encoded using ffmpeg to the various output video parameters. Once completed, thumbnails were automatically generated at key parts of the video (such as 5 seconds in and every 10%) and then all these files were then pushed to the output location before a further callback for “completion” was made.

This project involved a custom ffmpeg build script (to cope with the variety of video encodings).

Comprobo had the requirement that, for user identification purposes, somebody should sit in front of a web camera and have their picture taken. The system then should check the picture to see if there was a human face in it, how confident it was in finding the face, and return various biometric details about the face. This should be returned in a JSON API format for consumption by the rest of the system. Working on a microservices development pattern and integrating with both a Java based workflow engine, an Amazon S3 data store (accessed via another microservice), JSON Web Tokens (JWT) for authentication and Javascript for the frontend: we developed a Slim3 framework based PHP application which validated the request, fetched the image, passed it to the C/C++ facial detection system and returned the results using a JSON callback (along with caching the results)

Comprobo needed a simple way of allowing users to login to their system using either email authentication or OpenId/OAuth with Facebook, Google, Bitbucket, LinkedIn or Microsoft Live. Users then had to be assigned a time limited signed JWT (JSON Web Token) which could be renewed until their login expired – this allowed them to authentication themselves against other parts of the system without information needing to be passed from one part of the system to another.

This system used the PHP libraries “PHP League/OAuth2” for the main authentication, but then integrated that with a custom written email authentication system, form validation and JWT creation (all using the Slim3 framework as a backend and documented in Swagger/OpenAPI standards).

Clarks Shoes needed 36 (initially 32) different WordPress sites for different geographical regions setup with slightly varying content depending on shoe availability and locality targeting. This information came from many different Excel spreadsheets (each could contain 800+ different products) and a file storage of images (with many images per shoe).

Un.titled asked us to design and build a “multi-site data importer” to read in the multiple spreadsheets, validate the data therein (in case of transcript/export errors), resized the “print ready” images to “web ready” sizes (and automatically upload them to Amazon S3) and then populate the sites with the appropriate categories, page data and product data.

We also took the supplied web page designs from Un.titled and made the responsive functional WordPress templates from them to allow this easy deployment of many sites into many regions (powered by Amazon Web Services running on RDS, EC2 and S3): along with the flexibility to create a “static” version of the site to be able to be easily deployed into a web host in China for the local market there.

They also required easy uploads for the biannual seasonal refreshes, country specific marketing imagery and multi language content, consolidating the British manufacturer’s international reach.

ViewAssure was a “proof of concept” project for Comprobo. It was, in its essence, a “web browser recorder” – allowing clients to record user interactions (and load times) of their website for later playback and monitoring (such a scenario being of a user reading through a terms and conditions agreement).

It achieved this by allowing either a single Javascript file being included on the client’s website, the user having the “ViewAssure Chrome Extension” enabled (allowing “injection” of the Javascript file into any website of the users choosing) or the user having the ViewAssure server configured as a web browser proxy (which then injected the Javascript file). The Javascript then recorded page load information and “browser profile” information (user agent, IP address and cookie information) and all mouse/touch-pad/pointer and keyboard interactions with the website and recorded it (along with generating screenshots at the same time) for later playback.

Richard Bairwell constructed this entire project from scratch using a combination of the PHP Symfony2 framework, hand-coded Javascript, WKHTMLtoImage (for screenshot generation), ImageMagick for image resizing, Beanstalkd Queue Manager to enable fast responses/queuing system and a custom written Chrome extension.