Iain J McCallum

GitHub CodePen Linkedin Twitter

Hi, I'm a Front End Developer. Professionally I work with performance, accessibility, styling, and everything JavaScript. Recreationally I work on Node apps, play with DevOps, study app architecture, and consume endless podcasts to keep up with our industry.

TLDR: I really enjoy writing code.


Professional Projects

I have a big spreadsheet to keep track of them all that I'm happy to share. Lets grab a cup of coffee (virtual or otherwise) and I can run through them with you!

Personal Projects

A mix of code & notes of learning, I keep them all in github where you'll find a lot more. These are the more polished ones.


An open source project that graphs arguments and their premises. React on the front end calls a node API backed by a graph database (ArangoJS) and fronted by an nginx proxy. All of it running in Docker.

Mini Site Generator

A very simple JavaScript template string literal based static site generator. I wanted a simple solution without the complexity, quirks, and expectations that I've found in other generators. This site is built with it!


A front end boilerplate / CSS starter kit / collection of useful tricks. As I work on and learn new things I'm collecting the best bits into this little starter kit in order to give future projects a familiar kick start. ('MSG' because it's using the Mini Site Generator!)

30 Days of MDN

A self imposed learning challenge to get to know more of the available Web APIs.


One of the best way to learn, for me, is to grok the docs of a project and summarize it in a blog post.

Two feds on Reactjs, Keeping Delphic on the Cutting Edge

An interview style post put together as we neared the completion of our first react apps for production. Also part of the drive to find more front end developers to add to our team.

Dockerizing Wikilogic

By this point the set up for WL was becoming quite a headache, not exactly an inviting prospect to attract new developers with. Also deployment was a nightmare. Now we're on docker - two birds with one stone! The article digs into the technical story of setting it up. Note that WL has evolved so the current set up is different, but this should still be helpful for those wishing to learn.

.htaccess: a FED guide to redirects

This dive into apache came about to try and help alleviate a bottleneck in our pipeline at work. Server configuration is not exactly the most popular subject in the office.

Redux: attempting a simple overview

This was part of my pitch to use some kind of state management for a complex product listing front end. The idea was turned down which at least gave me the experience of building complex state without a tool like Redux, I would be curious to know how much time we could have saved had we used it!

Regular expressions in Javascript, why so painful!?!

Sometime I'll just pick a subject and dive in. I don't use regular expressions very often, but for the times I do it's nice to know what's going on!

CSS Layouts (part 3): The Future - Grids

CSS Grids and also the viewport units. These only started sneaking into our work towards the end of 2017, and even then it's still experimental.

CSS Layouts (part 2): The Present - Flexbox

A dig into flexbox in my own words. I'm pretty sure writing this article was the 'click' point for my understanding of flexbox, hard to imagine life without it now!

CSS Layouts (part 1): The Past - Everything else

Floats, tables, and also display table. It's interesting to see the influence I felt from the community against display table, I've done a 180 since then, display table is magic.

SVG 101: Anatomy

In a previous life I knew SVG through illustration. Now, as a developer, I wanted to know the details - to dive into the guts of the thing. This is a fairly through post on the basic element types that make up an SVG.

SVG 101: Setting Up

Optimizing, embedding, and a dive into SVG's viewport / viewbox. Note that the date on the site is just a reflection of when this was published, it sat in the company 'todo' folder for a couple of years. Even made it through an acquisition and onto the new company's blog! Fancy that!

Sass (part 2): tips and Tricks

Essentially a miscellaneous bucket for small sass tips, from those we use at work to those that were found while writing the previous article.

CSS in 3D

A fun jaunt into the 3d world. Probably written in the hope that it might inspire some of our projects to take advantage of the more interesting capabilities of css.

Sass (part 1): Architecture

At work all our sass was organized the same way. This was my exploration of other strategies. Note the age of this article, things have evolved since then.

Google Analytics for Front End Developers

We are frequently asked to paste in that snippet of ga js, and occasionally other bits to go with it. I wanted to dig deeper into how it all worked. The title says 'for feds' but it's just another way of saying 'a bit technical'.

Service Workers

A technical introduction to service workers. Although on the public company blog I really wrote it with the rest of the team in mind in the hope that service workers would start to play a bigger part in our projects.

Chrome Dev tools

I read through the docs, noted the important parts, condensed it, and put it down in writing. Note that the chrome dev tools team have been quite prolific - they have added a lot more since I wrote this!

Git Commands cheat sheet

A quick run through of git for those who already have a little experience (while writing this I only had a little experience with git, this was my way of digging into it. This was also during the time that Delphic started switching over from SVN


A few of the development tools I use or have used, and some thoughts on them. It' not a full list, I've only included the tools that left a particularly good impression.

npm scripts, Grunt, Gulp, Webpack, Rollup

I'm a fan of using consistent npm scripts to run your development & build tools, so no matter which of the others you may or may not be using there's no need to figure out what command you need to run. `npm start`, `npm build` and be done with it!


I have predominantly used BEM to organise styles, but in teams split between front and back end devs - that naming convention has created some difficulties. The atomic like Tachyons library solves those difficulties beautifully! I'll still mix in some BEM but this Tachyons thing is just magic.


The more I learn about this, the more I love it. I'm using it throughout the WikiLogic project where it has allowed me to experiment very quickly with verious pieces of tech without spending any time on installation. Looking forward to getting stuck into some Kubernetes next!

Let's Encrypt

Certs are hard. But less so now with this beauty of a tool! And it's free - it's FREE! So there's no excuse, HTTPS all your sites! All your projects! All the things!


In my experience accessibility is like code style in that they're both treated as 2nd class concerns far too often. Work this into your build tools and have it yell a11y concerns at you - it's really worth it!


This has replaced Sass for me. The ability to write in standard (future) CSS (with a few small additions!) and have it transpiled into browser compatible "today" CSS just feels right.

Visual Studio Code

I love it! The plugin's I've got running at the moment are: 'Bracket Pair Colorizer', 'ESLint', 'Prettier', 'Project Manager', 'GitLens', 'Import Cost', 'TODO Highlight', and a few language syntax highlighting ones. Took a bit of effort to move over from Sublime, but since I've moved the speed of improvments coming through has been incredible!


If you are creating content for a website, kill your wordprocessor, they do unspeakable things to the formatting of your words. Learn markdown (it's really simple), find a Markdown editor that clicks for you, and use it. Your writing will be more consistent and, very important this part, it translates directly to html - perfect!


There are projects out there that still have a code style guide in document form - hilarious no?

Sass Lint

Because linting is always a good thing.


Used at work - a handy little tool to manage all your server connections: ssh / rdp / and others, just for the tabs really! It's easier than straight up putty or the windows rdp thing, or at least I find it easier.


This is my way of keeping up with the industry. Most are Front End Dev related, others are more general.


After getting hooked into podcasts by Serial I had a look around to see if any front end developer podcasts existed. I didn't expect to find much, so when ShopTalk showed up it was the only dev podcast I listened to for quite a while! Until they started mentioning other dev podcasts...

Codepen Radio

The story and tech behind Codepen, a lot of the subjects they cover here have helped point my thinking for the WL project.

This Developers Life

A short series of podcasts about life as a developer. I think this may have been my third development podcast, after this it gets a bit hazy - too many to remember!

Javascript Jabber

Weekly chats and interviews about javascript, it's pretty wide ranging between soft and hard skills too.

Does Not Compute

A couple of developers chatting about development, they lean more towards the back end but client side code does make appearances!

JS Party

Informal chats and interviews about a range of topics in JavaScript, frequently regarding Node.

Full Stack Radio

Interviews with developers, so far this one has the widest range of technologies of the podcasts I listen to.

Request for Commits

Interviews with people running open source communities and what it takes to keep those communities healthy.

Scale Your Code

A series of interviews with developers / tech directors / very impressive people from big companies about the challenges of developing at huge scales.

Soft Skills Engineering

Listeners submit questions, these two answer with examples from their own experience. Purely about the non technical stuff surrounding development careers.

Style Guide Podcast

From styleguides.io, this is a series of interviews with developers who have created styleguides.


2 developers chatting about development! These two run their own tutorial businesses & do contracting, so it's an interesting view into that world as well.

The Changelog

Interviews with open source developers, from dev ops to feds.


Themed chats about development tools by 2 front end devs at IBM. ~20mins and pretty informal with the occasional guest appearance.

Machine Learning Guide

A series that gives a high level overview of machine learning. A kick off point for getting into the area.