Work
A small selection of projects I've worked on with my clients and for open source
-
Nord Design System
Currently working full time on Nord Design System. We use modern technologies such as Web Components and CSS Custom Properties to provide the wider design and development team everything they need to design and build products such as Provet Cloud, Diarium, Navisec Health and many more.
-
Seccl Technology
I was commissioned by Seccl to completely rebuild their marketing website using modern Jamstack technology. This involved the use of Netlify, Eleventy cutting edge front-end techniques.
-
Ghost Developer Expert
Due to my strong experience in Ghost I've become an an official Developer Expert on the platform. Check out my official developer page and example of Ghost sites I've built
-
Netlify Functions
I was commissioned by Netlify to rebuild and refresh their official resource for Netlify Functions. Involving an entire rebuild using Eleventy and leveraging many of the features within Netlify.
-
Eleventy Starter Ghost
The Eleventy Starter for Ghost is designed to help developers build sites using the Ghost Content API and the popular Static Site Generator Eleventy. The starter uses nunjucks to expose Ghost site data as well as rendering pages, posts, tags and author pages.
-
Anchor Themes
Anchor Themes is a site I created to showcase the best themes available for Anchor CMS. I designed, built and manage the site so that people can easily browse and use themes for Anchor CMS.
-
Alembic theme for Jekyll
Alembic is a theme that has the ability to be used straight out of the box as well as a strong basis for any type of content based site.
-
Garth theme for Jekyll
Garth has been available on RubyGems.org since June 2016 and has been downloaded over 20,000 times. It has continued to be one of the most popular independent open source Jekyll themes.
-
BaseKit Developer Docs
After joining the Template Development Team at BaseKit I swiftly became an expert in creating templates and custom websites on the platform. This lead me to create a full open source documentation site, and video course, on creating custom BaseKit templates.
Blog
Articles about web design, development and some personal ones thrown in
-
Date pickers are hard, whodathunk it
Due to the new job I've given myself permission to consume even more design systems related content. In doing so I listened to a recent Syntax FM episode featuring the folks from Shoelace, now Web Awesome, where they talked about joining up with Font Awesome and their Kickstarter
-
link-peek Web Component
The link-peek Web Component allows you to turn a regular anchor link to a rich preview (also known as an 'unfurled' link) to show description, meta image, website name and more using a JSON API.
-
A crude way to find and follow Thread users from Mastodon
There are a handful of people I'm interested in on Threads that I want to follow from my Mastodon account, so to zero in on this awkward intersect I've used the following very crude method
-
mastodon-post Web Component
The mastodon-post Web Component allows you to turn a regular link to a Mastodon post into an embeddable post quote including metadata such as reply count, boost count, favourites and more.
-
sample-input Web Component
It's great that can upload audio and video files with the input element, but browsers don't make it very easy for the user to preview that file. The sample-input component allows you to use audio and video elements to preview an audio or video file that's been uploaded to an input.
-
play-button Web Component
Styling audio and video elements can be a bit of a pain, especially across browsers. At the same time current solutions are either hacky CSS or overly engineered JavaScript. The play-button component allows you to play, and pause, audio and video with a single button element.
-
What I did in 2023
Survived.
-
storage-form Web Component
storage-form is a Web Component to allow regular form elements to interact with the browsers local storage. This can be really useful when building websites or small applications that need to be able to store data for later use, such as website viewing preferences (also known as light/dark mode).
-
is-playing Web Component
is-playing is a Web Component that checks if an audio or video element is playing content and applies a playing attribute to itself and the element that is playing.
-
Web Component GitHub starter template
I made an open source GitHub template to help me spin up new Web Components, and I thought you might find it useful as well.
-
share-button Web Component
share-button is a Web Component that turns a regular button element into a button that can invoke the native sharing options within the OS.
-
Design Systems & Web Components: what works & what doesn't
I was invited by the Netherlands Government Digital Services to speak at their Design Systems Week on the topic of using Web Components in design systems.
-
Post previews with Ghost, Eleventy & Netlify
A while back, I updated my Eleventy plugin for Ghost so you get more data from your Ghost instance, including the ability to retrieve draft posts. Here's how I used it to preview draft posts using Eleventy and Netlify.
-
How Nordhealth uses Custom Properties in Web Components
The benefits of using Custom Properties in design systems and component libraries.
-
Web Components & Lit
Phil Hawksworth from Netlify invited me and Jack Franklin from Google to talk about Web Components and Lit in a YouTube livestream. It was great to share experiences and perspectives of using Lit and the current web components landscape
-
You should add a generator tag to your Eleventy site
Hear me out on this one, I've got a short but sensible list as to why.
-
Building tabs in Web Components
Part of my role at Nordhealth is to design, develop and expand upon our ever increasing roster of Web Components within the Nord Design System. One of my most recent contributions is arguably one component, but actually comprises of three Web Components. We're talking about tabs.
-
Using Display-P3 colour
I wanted really bright colours on my site, but in order to do that I needed to delve into a rabbit hole of using Display-P3 colour in CSS. Here's how I did it.
-
Using a GitHub repo directory as an npm package
The following tutorial explains how to use a GitHub repo directory, or folder, as if it were an npm package.
-
First monthly update for Nord Design System
This was my first monthly update as part of the Nordhealth Design System team. I go into detail on our CSS Framework and the recently completed command menu web component.
-
My home desk setup
After posting a picture of my desk covered in stickers I was asked to submit my desk setup to setups.co. Check out what I use for my remote working setup.
-
How to use Schema.org Markup for Your E-Commerce Sites
In this article I’ll dive into Schema.org, a tool for annotating web pages to provide search engines with more meaning about the content. You’ll better understand how we can use schema markup for e-commerce websites allowing people to find your products.
-
Add a Formspree Form to Your Static Sites
In this tutorial we’re going to look at a hassle-free way of adding dynamic, flexible forms to your static websites.
-
Jekyll alternatives: The benefits to JavaScript static site generators
Jekyll paved the way for an entire ecosystem of static site generators to flourish, but what do these new JavaScript SSGs offer over Jekyll? Let’s find out!
-
Blogging on the Jamstack with DropInBlog, Netlify & Eleventy
In this tutorial, I’ll show you how to switch from using client-side JavaScript to power your DropInBlog blog to using it as a fully functioning ‘headless blog’, with the assisted power of Eleventy and Netlify on the Jamstack.
-
What is Eleventy?
I was kindly invited onto the Smashing Podcast to talk with Drew McLellan about Eleventy. Follow the link to listen.
-
Switching to Netlify DNS
If you’re onboard with Netlify then maybe you should switch your custom domains to their platform as well. In this tutorial I’ll show you how to move your custom domain to Netlify DNS and how to link it with a project on Netlify.
-
Let’s Learn Ghost on the Jamstack! Livestream Q & A
I recently joined Jason Lengstorf on his Twitch show Learn With Jason. I didn’t get around to answering all the questions from the live chat. Thankfully with the power of Twitch Chat Reply I was able to go back in time and pull out all the questions. Here’s a somewhat brief Q & A on those questions.
-
Building a Netlify Build Plugin
Netlify Build Plugins let you tap into the different phases in the build process that happen on Netlify. After being invited to the beta I spent some time figuring out what I could do and built a plugin of my own.
-
Page translations and multi-language selects
Multi-language sites are straight up hard to do. You would think there’s standard HTML spec stuff to handle this kinda stuff? Well there is!
-
Minimum viable analytics
I recently switched all my personal project sites to Netlify. I’d like to share how I made the move, my experiences, and the tooling I use to manage domains and track analytics.
-
How to use Ghost with Jekyll
Someone made an interesting query recently that I couldn’t help but take on as a challenge: Is there any way to use Ghost with Jekyll?
-
Eleventy and Ghost
My full write up on the official Ghost changelog blog on what's possible with Ghost and Eleventy
-
Use Eleventy to generate a Ghost blog
Last night I had a thought: What if I could source a Ghost blog from the Ghost Content API and then generate a static blog all inside of Eleventy?
-
5 excellent examples of progressive web applications
Chrome 73 has just landed with the ability to install PWAs, but what is a PWA? Well as you’ve probably read in the title, PWA stands for Progressive Web Application.
-
Experiments in augmented reality with Apple’s ARKit
ARKit is a development platform created by Apple to allow developers to use augmented reality on iOS devices. We can use ARKit to create virtual objects, images and even working user interfaces that look like they are right in front of you.
-
Coding a festive puzzle game with modern front-end techniques
T’is the season, by which I mean the season where some of us have down-time to do a little practical learning with code. And what better way to learn this time of year than by making a toy you can actually play with.
-
5 tips for a happier front-end Development Team
During my time at Simpleweb I’ve learnt an incredible amount of tools, techniques, practices and general front-end development knowledge. In this article I’d like to share just a few of the things I’ve learnt that will hopefully make your front-end work easier, more productive or more enjoyable.
-
Dropping the mic on Netlify in 20 minutes
Alright, so I didn’t actually drop the mic on Netlify; I dropped a site on it. Netlify Drop is a tool where you can grab a folder containing a site or app or whatever and drop it straight into the Netlify hosting platform.
-
Making your first Jekyll theme: Part 2
In Part 1, I gave an overview of creating themes for Jekyll and a few tips for when you’re developing your own theme. In this second part, I’m going to give a full step-by-step guide to developing your own Jekyll theme gem.
-
Making your first Jekyll theme: Part 1
By nature, any well structured site that has easily editable content is ‘themeable’ — a layer, or skin, that presents content in the way the owner or creator intended; Jekyll is no different. Pages, posts and any other form of formatted content can be segregated from the templating files.
-
Adding heading links to your Jekyll blog
Just a brief JavaScript trick to get anchor links added to your Jekyll blog post headings.
-
What do we look for in a CMS?
I posed this question in several forms on Twitter to get feedback from the community. After some consideration, polls and great discussion, I came up with a list of aspects that people consider when looking for a CMS.
-
My worst job interview
My worst job interview didn’t get me very far; not even into their office. It was just a phone call. It was a brief and kind of upsetting moment in my early career. Allow me to explain why I think this was my worst interview.
-
How to create a Jekyll theme gem
One of Jekyll’s noteworthy new features is the ability create official themes in the form of Ruby gems. These themes can be installed by a Jekyll user to style their static blog or website with ease, leaving them to manage their content.
-
Adding Siteleaf to a GitHub Pages site
I’ve been using Siteleaf a lot recently, for both my day job and personal projects. In light of this, I decided to create a screencast of myself going through the process of adding Siteleaf to a pre-existing site running on GitHub Pages. As additional reference, I’ve documented the process below.
-
I put CSS in my HTML and nothing exploded
When I first felt comfortable with front-end web development, I thought inline CSS was a filthy thing to do; something that could only be done in haste or from poor implementation. Thankfully, I’m a little wiser now and can understand that there is almost always a reason behind the implementation.
-
My domain is my playground
Whenever I want to test or try something out, I do one of three things; I create a new pen on CodePen, push some files to a new Surge project, or I’ll try it out live on my personal site or blog. The last one in that list is my favourite thing to do.
-
Jekyll Conf lightning talk
Recently I was asked by CloudCannon to record a lightning talk for Jekyll Conf. It was a great opportunity to contribute to the Jekyll community. You can watch all the talks from the day on YouTube.
-
How to create an open source portfolio
One really useful aspect of GitHub repos is that they allow us to host static websites thanks to GitHub Pages. But did you know that you can dynamically display all your GitHub repos on your website as well? In this tutorial I’m going to show you how to use that metadata to create a portfolio.
-
Could GitHub make a CMS?
Following on from my previous article, I wanted to explore the idea of GitHub making a CMS. What would it be? How would it work? Why would they even do it? To break down this hypothetical concept, I’m going to use the Five Ws, otherwise known as “Who, What, Where, When and Why?”.
-
Building a site entirely on github.com
Have you ever thought: What’s the minimum I need in order to build a site? I’ve thought about it quite a bit. So much so, I like to test my theories out in personal projects; in this case, my own portfolio site. However, I might have taken it a bit too far...
-
My screencasting setup
A while ago I created a screencast series called ‘Baking Bread.li’, this was in preparation for a course for Tuts+ called ‘Building Websites with BaseKit’. In order to make the course I needed to get some equipment together.
-
GitHub Pages & custom domains
I love GitHub Pages. So much so that I’ve created several websites using it. This site runs on it, and a few others. What I don’t love is setting up domain records. It’s up there with setting up email accounts and doing the dishes.
-
I listen to too many podcasts
I’ve had to take a break from listening to podcasts as all I’ve been doing in playing catch up with every single episode of them, rather than listening to episodes I actually want to hear.
-
How to implement cross-browser SVG Sprites
In this tutorial I’m going to demonstrate a basic implementation of some SVG icons, how to provide a fallback, and how to turn them into an SVG sprite.
-
5 ways to be a better front-end web developer
Frontend web development can be a confusing area to work in. With new techniques, tools and technologies appearing daily, it can be difficult to maintain your skills and understanding of the latest best practices.
-
Anchor CMS – What is it?
Anchor is a lightweight CMS designed to be simple but effective. It was originally created by the mysterious web designer & developer Visual Idiot. It was born out of his frustration with current CMS platforms...
-
Creating a theme for Anchor CMS
We’re going to be making a custom theme for the ‘up and coming’ open source CMS, Anchor. Anchor is a super simple, lightweight and bullet fast content management system.
-
Web Dev Conference 2012: Look back
A week or so ago I attended WDC 2012 (Web Development Conference 2012), which was my first web design & development conference. And yes, I did put design, and you’ll see why in the following.
-
Tracking time
Not long ago I asked my Twitter followers what they suggest for a single person to track their time with. I was worried it might open up a can of worms, but I got an excellent response. Here’s what people suggested...
-
Just get it done
The scenario is that you've set yourself the task of creating an app, plugin, blog, android or (in my case) personal portfolio website. And thats great, working on your own work is always fun. However it can be far too easy to get stuck in a rut.