Iain J McCallum

Work

I'm a Front End Developer at Hero Digital and a core contributor to the WikiLogic Foundation.

To get in contact with me, try Twitter which I check semi-regularly, or (if you're up for something more interesting) use a pull request!

Writing

The things I add to the Internet

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

Going through all the basics of SVG land.

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

Web

The things I pull from the Internet, and my opinions

Harp

Static site generator with a collection of front end build tools built in (and server if you want it). This site is built with Harp! All that's missing from my static site knowledge is a good admin technology for non tech users. Once that's figured out there are going to be some phenomenal speed gains around this internet.

Docker

I'm on a constant campaign to get everyone I work with onto Docker, don't throw away time by making people manually set up complex projects - Dockerize it! Although caveat, I've found front end build tools are more easily managed on your host system, especially when you're the one setting those build systems up.

Let's Encrypt

SSL (HTTPS) certs aren't hard and they don't cost money (unless you want a fancy one) - so there's no excuse, HTTPS all your sites!

Markdown

If you are creating content for a website, kill your wordprecessor, 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!

NPM scripts

Another work campaign I'm on - every front end development project should install with `npm install`, start the build tools & watchers with `npm start`, and compile a production build with `npm run build`. It's completely up to you to choose which build tools are run. I'm not saying drop them and just use npm scripts, I'm saying run them with the one thing that is common to every project. Be consistent!

ESLint

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.

Pa11y

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!

display: table;

I don't know why it seems so many developers are still against this. It's very good. Combine it with `table-layout: fixed;` and it's pretty much magic. So I'm adding it here in support. I like `display: table;`

Podcasts

These things have become such a big part of my dev learning, they had to have their own section. There are non dev podcasts in my feed too but to list them would reveal the extent of my podcast addiction and I can't be having that! It seems like a lot when listed out like this, but that 2x button really makes them fly :)

ShopTalk

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.

Syntax

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.

Toolsday

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.