My Vue.js Direct Install CodePen Collection

Published: 3rd June 2018

I built these CodePen examples for a Vue.js training session I ran at work, the training was an introduction to Vue and the pens are very basic examples showing how different parts of the framework function.

Read more

Google Maps JavaScript API CodePen

Google Maps JavaScript API – Autocomplete address search

Published: 26th April 2018

I work with application forms daily and often specifically address lookup and input population functions. I had read about the Google Maps API years ago but never looked into it, and having been working on an address lookup API recently it reminded me of the service, so I decided to have a look at the Autocomplete API.

Read more

Angular2 Debt Calculator Screenshot

My Angular Debt Calculator

Published: 27th November 2017

This is an Angular2 debt calculator which I built as a learning project with help from the Angular-CLI. The calculator will accept multiple debts (provided each debt amount, monthly payments and term or APR) and display the total debt, total monthly payments, cost of the credit borrowed and the total time to repay based on current debt and payments.

Read more

an introduction to knockout.js

An Introduction to Knockout.js Form Tracking and Validation

Published: 23rd July 2017

Knockout.js is a powerful JavaScript framework which allows you to easily bind website (DOM) elements to the underlying data model. This guide will provide an introduction to tracking form inputs with Knockout.js and then validating your inputs with knockout-validation.js’s built-in validation rules and custom validation rules.

Read more

CSS 3D Photo Canvas Mock-up

CSS 3D Picture Canvas Mockup

Published: 19th January 2017

I built this photo canvas mock-up using just HTML and CSS, the CodePen demo is styled using SCSS and uses variables to define the image url, canvas dimensions, depth and frame type.

Read more