Knowledge: Tech Blog

Where we share our thoughts on technology and design.

JavaScript

Colin Eberhardt

Exploring different approaches to building WebAssembly modules

In this blog post I'll explore the various different ways you can create WebAssembly modules, using Emscripten, LLVM and AssemblyScript, comparing the tooling and performance.

Colin Eberhardt

Asynchronous Recursion with Callbacks, Promises and Async.

Creating asynchronous functions that are recursive can be a bit of a challenge. This blog post takes a look at various different approaches, including callbacks and promises, and ultimately demonstrates how async functions result in a much simpler and cleaner solution.

Jan Akerman

Thoughts on Jest Snapshots

Jest is a testing framework that provides the testing tools we now expect to see in a modern software project. It provides fast parallelised test running, with a familiar assertion syntax, built in code coverage, Snapshots and more. In this post, I'll be investigating Snapshots and laying out some thoughts!

Chris Price

Adding WebDriver tests to create-react-app generated projects

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.

Colin Eberhardt

Creating a Market Profile Chart with D3

Market profile charts are relatively complicated and specialised charts used by financial traders. This blog post looks at how to render a market profile chart using D3.

Colin Eberhardt

cla-bot a GitHub bot for automating Contributor Licence Agreements

A few months ago we contributed a project, ContainerJS, to the Symphony Software Foundation, an organization that fosters open source and collaboration within financial services. The Foundation has various legal requirements that must be adhered to, including that all contributors (i.e. committers) sign a Contributor License Agreement (CLA). Unfortunately as...

Colin Eberhardt

Mapping UK place name endings (With command line cartography tools)

Place names in UK and Ireland are very much influenced by their surroundings, with endings such as -hill, -ford, and -wood quite clearly referencing local geography. This blog post uses the new NDJSON command line tools for processing, transforming and joining datasets to create an optimised visualisation.

Nick Owen

Does NPM 5 deprecate yarn?

Does npm 5 deprecate yarn? With promises of increased speed and consistent package versions yarn has a new competitor, but in this post I'll show the reasons for why, for the time being, I'll be sticking with yarn.

Nick Owen

Creating semantic components in Angular and React

Using two of the currently most popular web frameworks I'll demonstrate how to create semantic looking code.

Nick Owen

White-labelling using PostCSS path resolution

Theming an application is a concern for many organisations and products. In this post I'll present a simple way to manage branding using current tooling.

Colin Eberhardt

gifbot - Building a GitHub App

This post takes a look at the recently launched GitHub App platform, that allows developers to create integrations and services which can be shared with others. The post describes the development of gifbot, a simple and fun App!

Colin Eberhardt

Developing a GitHub Bot with AWS Lambda

This blog post describes the process of creating a GitHub bot, hosted as an Amazon Web Services (AWS) Lambda function, that performs various checks on pull requests.

Chris Price

Efficient SVG layout with d3

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.

Ali Sheehan-Dare

The Power of the Higher Order

A practical look into higher order components and what they bring to the table, along with a general discussion of code reuse in React

William Ferguson

Creating a Pebble Watchface with JavaScript

In this article, I take a look at writing a watchface for Pebble using their newly released JavaScript SDK.

Drew Miley

Reading the Riot Act: Exploring a Lightweight React Alternative

Migrating a Knockout project to a webpack redux application using Riot, and why I didn't use React.

Chris Price

Using d3-force to control a massive tiny display

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.

Chris Price

Highlights from JSConf.IS

My highlights from the inaugural JSConf.IS 2016 hosted at Harpa, Reykjavik.

James Friel

Interview Questions Explorer - Edinburgh Interns 2016

An overview of the Edinburgh Interns summer project: A react application to filter and search interview questions stored on Google Drive

Chris Price

Building Components with D3 Data Join

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.

Chris Price

ES6 Iterators, RxJS, IxJS and the Async Iterators proposal

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....

Colin Eberhardt

Recursive Pattern Matching and Transformation of JavaScript AST

I’ve recently been playing around with the JavaScript Abstract Syntax Trees (AST), with the aim of transforming some JavaScript code into various other languages (Java, C#, Objective-C). As part of my research, I looked at how Babel performs AST transforms. If you’re not familiar with Babel, and the plugins which...

Colin Eberhardt

Six tips for cleaner javascript promises

This blog post shares a few quick tips and patterns that I've been using to structure JavaScript promises; keeping them clean, simple and readable.

Luke Page

Seven Surprising JavaScript 'Features'

A look at some of the more unusual parts of JavaScript by examining seven things I've learnt recently.

Luke Page

Learn ES6 from Airbnb's coding standards

Airbnb's JavaScript coding standards are now based around ES6 and contain many guidelines to help you take advantage of its features. In this blog post I'll present some resources I created to help you learn ES6 through their guidelines.

Luke Page

var, multi-var or anywhere var?

When it comes to coding style in JavaScript, what makes most sense - one var declaration, multiple at the start or scoped?

Joe Bandenburg

JavaScript ES6 generators

The upcoming JavaScript standard ES6 introduces generators, which provides us with a new pattern for writing asynchronous code. I compare this pattern to the established patterns of callbacks and Promises.

Luke Page

How IE confuses JavaScript context when running in multiple windows

This is a blog post about IE and how it handles windows running code which interacts with each other. I've created a test case that shows IE combine together two stacks so that code runs in a context which, when looking at the source code, seems impossible.

Ian Sullivan

Writing Desktop and Web-Based JavaScript Applications

This post demonstrates how JavaScript and HTML5 related technologies can be used to create an application that can run in both a web browser and as a cross-platform desktop application using node-webkit.

Chris Price

Arrow functions in Knockout.js

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...

Colin Eberhardt

Understanding JavaScript Object Creation Patterns

This article explores the various ways you can create objects with the JavaScript language, and through this exploration finds that there is much to learn about the language!

Chris Price

Knockout.js + Node.js = What.js?

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...

Nicholas Wolverson

Async, where can I use it?

With the recent release of Windows 8 and VS 2012, you've probably heard of the bold move in the WinRT API (that is, the target platform for Windows Store apps) to only offer asynchronous versions of operations which take any significant time (ie 50ms+) - and the corresponding async/await feature...

Chris Price

TypeScript versus Closure

How does Microsoft's TypeScript, the new kid on the block, compare to Google's Closure?

Chris Price

Making the most out of JavaScript Intellisense in VS2012

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...

Chris Price

Does delete walk the prototype chain?

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...

Mark Rhodes

Blake 512 in Javascript

This post describes an implementation of the Blake 512 hashing algorithm in JavaScript. This algorithm is one of the finalists for the SHA-3 competition due to be completed in the next month or so. The source code for the implementation is available here: blake512.js You can try it yourself by...

Chris Price

A TodoMVC Closure Example

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...

Colin Eberhardt

Can Microsoft 'fix' JavaScript and make HTML5 applications viable?

Microsoft's recent change in stance over Silverlight, promoting HTML5 as "the only true cross-platform solution for everything", seems to have sidelined Silverlight as a niche framework. This has understandably caused a great deal of upset and confusion in the .NET development community. Despite this, Microsoft are remaining steadfast and tight-lipped...

Luke Page

JSLint Changes

At the weekend I released a new version of my JSLint for visual studio plugin. There have been some big changes made by Douglas Crockford in the last month, so given the lack of an official JSLint blog (most major updates are announced by Douglas Crockford on the mailing list)...

Jonathan Cardy

JavaScript Anonymous Functions

Up until now I have found the term "anonymous" pretty confusing in the context of JavaScript. In this post I'll explain how to define anonymous functions, what "anonymous" means, and what uses these functions have. The ECMAScript specification does not have any mention of the term anonymous, so in a...

Jonathan Cardy

CodeProject article on JavaScript strangeness

At the weekend I published a CodeProject article titled "A Collection of JavaScript Gotchas". The target audience is JavaScript developers and also any other developer who might have an interest in JavaScript. I think it covers pretty much all of the wacky features that give JavaScript a bad name. [caption...

Luke Page

JSLint vs JSHint

In January of this year Douglas Crockford decided that some of the options in JSLint were generally accepted and should always be on. One of those options was eqeqeq, the option to show an error if just two equals was used. For some time JSLint has complained about double equal...

Luke Page

Implementing eqeq in JavaScript using eqeqeq

Introduction So, in a previous post I pointed out some == coercing that was far from obvious. But despite gradually picking up edge cases, I've never had a true understanding of the various cases where x == y. So, prompted by Jonathan's link to the specification explanation and figuring that...

Luke Page

JSLint in Visual Studio Part 2

A while ago I blogged about creating an extension in visual studio 2010 that ran JSLint on files. I started by getting a JavaScript interpreter based on the V8 engine to run JSLint and then just before publishing I discovered someone else had already started an extension. Luckily, that person...

Steven Hall

JavaScript Array.push Performance

I was recently reading Google's JavaScript Style Guide when I came across the following claim: "Note that since assigning values to an array is faster than using push() you should use assignment where possible." I had always used push to assign a value to the end of an array, so...

Luke Page

JSLinting existing JavaScript and eqeqeq

Introduction As I've previously mentioned JSLint is a tool by Douglas Crockford that checks code against various rules in order to find code that could potentially be buggy or ambiguous. One such rule is that users should not use two equals (==) but should use three (===). There is an...

Luke Page

JSLint in Visual Studio Part 1

Introduction Js Lint is a tool created by Douglas Crockford to parse JavaScript, report errors and ensure good coding practices. If you write JavaScript, it's a good idea to at least have read and understood the rules - quite often they are because something that is common in a language...

Steven Hall

Closure Library on the Server

Over the past few months I've been using the Closure Library to create my own JavaScript library that carries out some graphical processing. This is done entirely in JavaScript, using Closure's graphics package. An important factor in the development of this library was compatibility. I wanted assurance that, no matter...

Steven Hall

Integrating Closure Tools with Maven

Apache Maven is a popular build management tool that we use at Scott Logic to handle our internal projects. When I began using the Closure Tools, integrating the Compiler into the Maven build process became an important task. Having the compilation of code in the build process assures that the...

Steven Hall

Introducing.. Closure Tools

In November 2009, Google released their previously internal Closure Tools package, consisting of the Closure Library, Compiler and Templates, to the open-source community with the intention of allowing users to create web applications as advanced as their own. Initially considered a "20% project" for a selection of Google employees, the...

Luke Page

VS 2010, vs-doc and Javascript Intellisense

Recently I read Scott Guthrie's post on improved JavaScript Intellisense in Visual Studio 2010. Whilst the post is very impressive, showing off Visual Studio's ability to parse the JavaScript in order to provide intelligent Intellisense, when I came to apply it to more real world examples and use vs-doc to...

Chris Price

What is this?!

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...