Chris Price
Blog

Chris Price

My name is Chris Price, I'm based in Newcastle upon Tyne and work as a Software Engineer at Scott Logic. I spend my days developing desktop/tablet/mobile web apps for financial services companies (unfortunately mostly hidden behind paywalls). I do like to blog about things when I can and do some interesting stuff on GitHub.

Resources
WebAssembly is a new runtime for the web; a fast and efficient compilation target for a wide range of languages that could have a far-reaching impact on the web as we know it. This paper looks at at the performance limits of JavaScript and how WebAssembly was designed to tackle them.
Tech
In highly-visual, rapidly-updating, multi-window, buzzword-laden apps performance is a big concern. With WebWorkers, SharedWorkers and ServiceWorkers we have a number of options for moving complex scripting tasks off the critical path. However, rendering can be more of a dark art. In this post I'll dig into how one browser (Chromium) uses renderer processes and how you can use this knowledge to your advantage.
Tech
This post demonstrates one way to add Selenium e2e tests to a `create-react-app` generated app. It uses Jest as the test runner, embraces modern JavaScript features (including async/await, modules, fat-arrow functions, templated strings, etc.) and attempts to ensure that modern editors are able to provide useful auto-complete suggestions when authoring tests.
Tech
When creating d3 visualisations it's common to want some form of responsive layout. However, SVG and canvas don't provide a native way to do this. Most examples found online either use fixed dimensions or resort to some form of manual layout to achieve the required effect. This post introduces an alternative approach using CSS and custom elements.
Tech · Video
Pull up a comfy seat and listen to Chris Price tell a story about the Tortoise and the Hare, the App Store and Progressive Web Apps.
Tech
My highlights from the inaugural JSConf.IS 2016 hosted at Harpa, Reykjavik.
Tech
This post describes my entry into one of the hack events at JSConf.IS which challenged us to take control of the Northern Lights. It hopefully also serves as a nice introduction to creating visualisations with d3-force.
Tech
This post quickly introduces data join before moving on to some of the edge cases we've run into when building components on top of data join. It covers how you can solve them with vanilla D3 and why you might find our d3fc-data-join component useful.
Tech
A quick walk through ES6 iterators and iterables. It covers extending d3fc’s random data component to implement the required protocols and how this can lead to greater interoperability with utility libraries like RxJS/IxJS. The d3fc-random-data stochastic generator d3fc contains a component for generating random data series based on stochastic processes....
Tech
Inspired by Colin’s article on building an expenses app with the Mondo API, I wanted to create something to make use of the webhook API which fires in real-time (ish) whenever a transaction happens. In this post I’ll cover subscribing to the Mondo webhook, creating the glue code as an...
Tech
This post introduces a new feature of D3 version 4: the d3-path package. d3-path is an abstraction over SVG path creation which uses the canvas element’s Context2D interface. Previously creating path generation code involved a lot of concatenating SVG path commands like M0,0 or L2,2, and the somewhat more cryptic...
Tech
I recently created a site which I’m proud to say now hosts an impressive collection of tweet-sized D3 creations from the hugely creative people of the internet. In this post I’ll talk through deconstructing one or two of those creations with the aim of giving any aspiring artists a starting...
Tech
Hot-reloading UI is a hot topic at the moment. I want to take some time to explain why, in the class of applications I typically work on, I believe it to be such an important feature for future UI frameworks to have. Fundamentally it’s about improving the developer workflow, improving...
Tech
While d3fc (a toolkit of charting components built in the d3 style) embraces the philosophy of simplicity over performance, there’s no point in creating a chart with lousy performance. In this post I’ll run through some of the tips and tricks for squeezing the best performance out of d3fc without...
Tech
I’ve been working on an open-source charting library called d3fc. And following Colin’s lead, was looking for a creative example to replicate: I think I found it… Once upon a time The story starts with Coinbase, a well-known(/funded) Bitcoin company. I was hunting for a freely available streaming data feed...
Tech
A quick run through of the steps involved in integrating a Node.js client with Active Directory Federation Services for authentication using OAUTH2. I recently had the dubious pleasure of proving the feasibility of authenticating apps against ADFS using its OAUTH2 endpoints. In short, whilst it is possible to securely prove...
Tech
I’ve recently completed an ELK (Elasticsearch, Logstash & Kibana) real-time log processing implementation for an HTML5 FX trading platform. Along the way I’ve learnt a few things I wish I’d known beforehand. This post shares some more details of the project and hopefully some time saving tips. ELK The ELK...
Tech
Recently, Knockout’s original author Steve Sanderson released a plugin called knockout-projections which optimises the performance of the observable array methods filter and map. In this post, I’ll take a peek into the future by combining this plugin with the forthcoming ES6 arrow functions to produce some very terse and highly...
Tech
Recently I contributed a change to Knockout which allows it to run without hacks in a non-browser JavaScript environment. My original intention was to allow Knockout.js to be used with Titanium for the PropertyCross project however, a convenient side-effect is that it now also runs in Node. In this post...
Tech
Outrageous pun intentionally… hyde-n… We’re very soon to launch a site documenting an open source project we’ve been hard at work producing. As the project is hosted on github, we’ll be making use of the Github Pages hosting feature which itself is built on top of Jekyll. As all my...
News
Hot on the heels of Reject.js was JSConf EU, a weekend conference about, well, JavaScript! It was my first time there so I was a little unsure what to expect, I was absolutely blown away by the venue, the organisation, the food, the drinks, the talks and most importantly the...
News
Last Thursday I headed to Berlin for Reject.js, a community JavaScript conference organised to coincide with JSConf.eu. I was very impressed by the professionalism with which the event was run, which in turn allowed everyone to learn a lot and have a great time. Thanks goes to Robin Mehner, Thorsten...
Tech
How does Microsoft's TypeScript, the new kid on the block, compare to Google's Closure?
Tech
In this post Colin Eberhardt's Property Finder app gets another outing, but this time with a native twist. Titanium is a popular open-source framework for building multi-platform native apps in JavaScript. Here I've used it to port the existing MVVM application to iOS and Android whilst trying to maintain as...
Tech
Most of us have had a play with CSS3 3D transforms, stacked a few elements, rotated them, maybe even made a cube out of them. And somewhere along the way, you'll probably have set the perspective property, tweaked it, wondered what it did, tweaked it some more, figured it looked...
Tech
Intellisense for JavaScript has always felt to me like an unfinished addition to Visual Studio, something that promises so much but doesn't deliver for larger projects. Manually adding and then maintaining another set of dependency references just for Intellisense has just never seemed worth it. However, with the launch of...
Tech
HTML5 versus native (iOS:Obj-C, Android:Java) mobile development is a hot topic at the moment, with Facebook's ditching of a hybrid HTML5/Obj-C app in favour of an Obj-C-only app the latest blow to land. However, independent observers will already have noted that the battle, as always, is not without it's fair...
Tech
Captured webcam frames arranged in a 3D rotate-able cube for your viewing pleasure. A simple tech demo trying out the new getUserMedia API in Chrome 21, with some 3D transforms and canvas based pixel manipulation thrown in for good measure. Try it outMake sure you're using Chrome >= 21 and...
Tech
This post introduces a Maven plugin for easily building native PhoneGap apps for iOS, Android, WP7 (and more) from any WAR project, in any environment. It assumes that you are familiar with using Maven and have a WAR project you wish to build. In return, when you run your build...
Tech
This series of posts (part 1) are attempting to do the impossible, to try and give desktop developers a brief introduction to developing on the web. I say impossible because the web is such a vast topic. On one side sits stacks of bizarre and nuanced APIs, but on the...
Tech
A little while ago Colin showed me a tool for inspecting the visual tree of a Silverlight/WPF application (Snoop thanks Colin!). The bit I remember was a 3D view of the app, where an element's on-screen depth represented it's depth in the visual tree. I thought it could make a...
Tech
This is a quick post relating to a Rhino bug I've just fallen foul of. This probably isn't very interesting for most folk, but if you've come here from Google then hopefully I can help you out! Let's start with a definition (from the excellent MDN) of how the delete...
Tech
This post is an attempt to do the impossible, to try and give desktop developers a brief introduction to developing on the web. I say impossible because the web is such a vast topic. On one side sits stacks of bizarre and nuanced APIs, but on the other mountains of...
Tech
I recently had a need to create a demonstration application showcasing some of the features of the Closure toolkit. Whilst I was trying to think of a suitable example to implement, I remembered coming across a project called TodoMVC. TodoMVC is a GitHub project which aims to re-create the same...
Tech
I recently came across the mustachify.me service. Inspired by Movember, I just had to spread the mo-ssage. One bookmarklet later, I can now man-up any page* I deem appropriate. I've picked some likely stooges from Scott Logic for you to test the link out on. Admire them first with their...
News
Last Friday I headed down to Brighton for the annual Full Frontal conference. It was my first time there and I'm very glad I made the trip. The quality and breadth of the talks given far exceeded my expectations. Thanks to Remy Sharp for his organisational and timekeeping skills, and...
Tech
Colin's post on Dart and the other fallout from Google's announcement across the web sparked a few thoughts in my mind, so I thought I'd share them. Firstly I think it's important to point out how much of what is currently being said is speculative. Most people's opinions on Dart...
Tech
I was reading over one of the tutorials over at html5rocks.com (if you haven't had a look through them before I'd thoroughly recommend it!) and came across an article by Ilmari Heikkinen on creating a "kiosk-mode" for chromeexperiments.com (another thoroughly recommended site!). The article itself was pretty interesting but it...
News
Last Thursday night saw a tense battle for the podium at the inaugural Scott Logic Newcastle grand prix. The race was held south of the river at Karting North East in Sunderland, but most people didn't let that, or the afternoon of torrential rain put them off! The race started...
Tech
In part one I discussed my objective to create a "web-less webapp" which could masquerade as a native application on all modern mobile platforms. I covered the gotchas of developing with the cache, but stopped short of discussing the problems that come about when you wrap it up for each...
Tech
In this first installment, I'll introduce the appcache, talk about some gotchas of using the appcache and hopefully give some helpful hints for debugging it based on my experience. Introduction The appcache is a new DOM feature added in the unholy bundle we call HTML5. It aims to allow your...
Resources
When meeting current and prospective clients the subject of web technology choice often arises. There has been a great deal of confusion and uncertainty out there, even before Microsoft’s perceived change of stance with respect to Silverlight emerged. This white paper is intended to help technology decision makers come to...
Tech
This post follows on from the comparisons by Colin, of two Silverlight chart libraries, and Graham, of Flex and Silverlight chart libraries. In this post I add an HTML5 chart library into the mix. The results show that the HTML5 Charts perform easily as well as the others in HTML5...
Tech
This post discusses the this keyword, what it represents, how it can catch you out and how to avoid those problems. It also introduces the functions call and apply from the Function prototype. Let's start with a definition - The value of this is determined at the point at which...