Callum Macrae

I'm a developer and occasional musician based in London, UK, with a passion for using JavaScript to solve complicated problems. My current enthusiasms are Vue and SVGs (but only sometimes at the same time).

I write and speak, some of which you can find below. I'm also available for work: contact me at

Callum Macrae


Vue.js: Up and Running

Vue.js: Up and Running

Get a brisk introduction to building fast, interactive single-page web applications with Vue.js, the popular JavaScript framework that organizes and simplifies web development. With this practical guide, you’ll quickly move from basics to custom components and advanced features—including JSX, the JavaScript syntax extension. O'Reilly Shop,,

Learning from jQuery

Learning from jQuery

If you’re comfortable with jQuery but a bit shaky with JavaScript, this concise guide will help you expand your knowledge of the language—especially the code that jQuery covers up for you. Many jQuery devotees write as little code as possible, but with some JavaScript under your belt, you can prevent errors, reduce overhead, and make your application code more efficient. O'Reilly Shop,,


  • Vue.js and SVG

    Event: Vue.js Amsterdam Virtual Meetup

    In addition to being able to use Vue.js to generate HTML documents, you can also use it to display SVGs. This talk will demonstrate how you can do just that!


  • Battle of the Frameworks meetup

    Battle of the Frameworks was a meetup hosted by Orbis Connect with three speakers; one representing React; one representing Angular, and one representing Vue.js. I represented Vue!


  • Climate change and the tech community

    Event: Vue.js Amsterdam 2020

    The internet is responsible for about the same level of carbon emissions as the aviation industry. This talk looks at the impact we as a community are having on the environment and what measures we can take to reduce it.


  • Data visualisation and Vue.js

    Events: London AJAX, Front-end London

    Vue.js is the latest big front-end framework. It's blazingly fast, easy to learn, and a valuable tool to have in your arsenal. Did you know you can work with SVGs directly in your Vue.js templates? This talk will explain the basics of Vue, explore some of the things you can do with SVGs, and show you how you can visualise some simple data without using a library like d3 or Highcharts.

  • Accessibility in Single Page Apps

    Events: VueConf Poland (2017), Vue Toronto (2018), and Vue.js Amsterdam (2019)

    As developers, we have a responsibility to make sure that as many people as possible can use the websites and applications that we create. But with a new generation of websites—single page applications—come a new set of challenges for users with disabilities, and the assistive technology they use to browse the web. Client-side routing, custom input elements, and shiny animated content: all things that screen readers can struggle with if the developer who implemented it didn't consider accessibility.

    During this talk, I'll explain what we as developers can do to ensure that our single page applications are usable by everyone, including people who might not use a keyboard, mouse and screen like the majority of us do. I'll show how some assistive technology is used, and demonstrate how some common mistakes we make affect people using that assistive technology.


  • Building with Gulp

    Event: London Ajax

    Gulp is a build tool which you can use to automate tasks involved in the development of a website, such as compiling Sass, minifying JavaScript, and generating sprites. The talk will introduce Gulp and some of the things you can do with it, and will also explain some of the differences between the current version of Gulp and the upcoming version of Gulp, Gulp 4.

This list is incomplete!


  • Turning a canvas into a perfect quality gif

    Recently I had to turn a canvas animation into a gif to post on social media. This article explains how I did it!
  • Building an animated COVID-19 tracker using Vue.js: part two

    Did you know that you can use Vue.js to create interactive, animated visualisations using SVGs? This article will explore how you can do just that, by building an animated COVID-19 tracker.
  • Building an animated COVID-19 tracker using Vue.js: part one

    Did you know that you can use Vue.js to create interactive, animated visualisations using SVGs? This article will explore how you can do just that, by building an animated COVID-19 tracker.
  • Interactive animations with transform-when

    transform-when is a library I wrote at SamKnows that allows you to combine a number of variables—scroll position, time, and user actions—to create beautiful, performant animations. This article demonstrates some of the functionality of the library.
  • Sorting algorithms visualised

    If you or a computer needs to sort a list of items, you'll use an algorithm to do it. There are lots of different sorting algorithms: this article explains and visualises some of the common ones.
  • Show more…