Introduction

Hi, I'm Lachlan. I'm a full-stack developer who specializes in Vue.js, React.js, and TypeScript. I'm passionate about testing and mentoring. I am located in Brisbane, Australia.

You may have seen my posts on Medium, or my open source book, the Vue Testing Handbook. I'm also a maintainer of Vue Test Utils.

You can find me on GitHub, which also has my contact information if you want to talk to me. My resume is here. I occasionally post on Twitter, too.

Blog Articles

20201202 Reflecting on a Year of Content Creation
In 2020, I decided to start taking content creation more seriously. This post will detail my content creation journey, which started in 2017. I will share the different things I tried, what I learned, and how much I made.

20201121 Mocking Lower Layers for Better Test Coverage and Confidence
Something almost every Vue.js application is going to do is make HTTP requests to an API of some sort. This could be for authentication, loading data, or something else. Many patterns have emerged to manage HTTP requests, and even more to test them.

20201119 Cypress and X11 in Docker
Setting up a complex stack for end-to-end tests is difficult and time consuming. Docker and docker-compose help solve this, at least in terms of running the various systems. You won't get a GUI though. Thit post looks at how you can run Cypress in a docker container and still use the interactive test runner using X11 to forward the UI to the host machine.

20201107 Renderless Components in Vue 3
The "renderless components" pattern is something that has been around for a while, but hasn't gained (much) mainstream popularity. It's a really powerful abstraction to build re-useable components.

20201011 Inserting Rows and Columns
This is the fifth and final entry in a series where we build a simple spreadsheet engine, with Vue frontend. In this section we clean up some edge cases, and add the final feature: the ability to add increase the size of the sheet by adding new rows and columns. You click on a row/column, then click "insert before" or "insert after" to add a row/column.

20200927 Immutability, Undo and Redo
This is the fourth entry in a series where we build a simple spreadsheet engine, with Vue frontend. In this section, we see how to implement undo/redo, a common feature in almost any application where you enter data.

20200920 Lazily Evaluated Formulas and a useSheet Composable
In the previous post, we build a nice little UI layer on top of our spreadsheet engine. The UI is currently read only - our goal will be to allow the user to update cells now, as well as implement basic support for formulas (such as `=SUM(a1, b1)`). We will create a `useSheet` composable, and explore some optimizations using lazily evaluated functions.

20200913 A Vue Powered Spreadsheet UI
In the previous blog post, we built a simple spreadsheet engine. It doesn't support all the features we'd like to support yet, like formulas, but now is good time to see how our design holds up when we try building a UI. This will help us catch any poor design decisions before it's too late.

20200908 Building a Spreadsheet Engine and UI Layer
Over the next few blog articles, I will build a mini spreadsheet clone (like Excel). The goal isn't really to build a spreadsheet, but to show how thinking about data structures and how to represent concepts will help you separate your business logic and your UI layer.

20200904 Retrospective on Launching my First Course
I have been working on my website and course, Vue.js: The Composition API since early 2020. Here is the timeline, how much money I made, and some of my learnings.

20200828 Diving into the Virtual DOM
In this article, we do a dive into the *virtual dom* in Vue.js 3, and how we can traverse it with the goal of finding a specific component (or what we will call a `vnode` - more on this soon).

20200814 Dependency Injection with Provide and Inject
Vue has a pair of functions, `provide` and `inject`, making it easy to utilize dependency injection, making it easy to have a globally accessible object (such as a router or a flux store) as well as making it easy to test components in isolation. Let's see how `provide` and `inject` work with an example, some of the things to look out for, then upgrade an existing by writing a `useStore` composable to make a reactive store available in all the components.

20200803 Kanban Board with Typesafe GraphQL Part 6
In the sixth and final part of this series, we will implement drag and drop, as well as our first GraphQL mutation (as opposed to a query) to update data, rather than just fetching it.

20200720 Kanban Board with Typesafe GraphQL Part 5
In this article, we continue building our the front-end of kanban board. We previously added the ability to select a project; now we need to fetch the relevant categories and tasks, store the data somewhere in our store, and render a column for each category!

20200712 Kanban Board with Typesafe GraphQL Part 4
The first three parts of this series focused on building the back-end - now we move onto the frontend!

20200705 Kanban Board with Typesafe GraphQL Part 3
In the previous two articles, we looked at how to use TypeORM and Express to create a REST API in a modular, testable fashion. This was in preparation for our real goal: a GraphQL server.

20200624 Kanban Board with Typesafe GraphQL Part 2
In part 2 of this series, we see how to add relationships in TypeORM, as well as load related data in an optimal manner, as well as add a simple express app on top of our well tested business logic.

20200615 Kanban Board with Typesafe GraphQL Part 1
Over the next few articles, I will be building a Kanban board app using GraphQL, Vue.js 3, postgres, Vite and some other technologies.

20200608 Integrating the form validation library with Vue
This article is part two, where we integrate the framework agnostic validate library we designed in the previous article with Vue 3 via a `useForm` composable.

20200602 A modular form validation library for Vue
Over the next few articles, I will be building a simple validation framework and integrating it with Vue. In doing so, I'll discuss how I like to design libraries and the process I like to follow, while pointing to some other libraries which exhibit what I consider to be best practices.

20200522 A better way to structure your flux store
This article discusses flux-entities, an abstraction I noticed after working on many different Vuex/Redux apps over the last few years. A more technical explanation and some example app can be found [on the GitHub page](https://github.com/lmiller1990/flux-entities).

20200519 A useModal hook and Proxies
While working on my course, The Composition API, a very clean abstraction for handling modals using the composition API emerged in the form of a `useModal` hook. In this article we will build it from the ground up.

20200510 Vite the Fastest Development Environment Ever
Today we explore Vite, an extremely fast development environment based on ES modules.

20200503 Vue 3 Async Components and Bundle Splitting
Today we will explore the new Asynchronous Component API for Vue.js 3, and some practical use cases.

20200427 Bundling with Rollup
In this article we will write a rollup config from scratch to compile a project written in TypeScript. Our goal will be three separate bundles:

20200420 User Centric Tests with Testing Library
Explore Testing Library, a framework agnostic library for testing applications in a user centric manner.

20200411 Introducing Teleport aka Portal
Let's take a look at the new `` feature, recently renamed from ``, in Vue.js 3, and some of the interesting things you might do with it.

20200406 Webpack for Vue 3
In this article we build a webpack configuration from scratch for developing Vue.js 3 apps. Specifically, we will support `.vue` files, TypeScript, and hot reload.

20200330 Intro to Vue 3's Suspense and Testing
Vue 3 has a new feature called "Suspense". I find the naming to be a bit unintuitive - I had no idea what to expect when I first heard the name. I feel like a more descriptive name would be "LoadWithFallback" (although not as sexy). Anyway, today we will explore this new feature by building a simple app that shows some Covid19 (aka coronavirus) data.

20200320 A Jest Transformer for Vue Components
In this article, we build a transformer to change Vue 3 `.vue` component into a format Jest can understand. This is what `vue-jest` does, and how Vue Test Utils works. We will do this using a TDD like process: write what we want, and follow the errors to success.

20200313 Best Practices for Testing Vue 3 Components Part 2
In this article, we continue developing the TodoApp from the previous post.

20200301 Best Practices for Testing Vue 3 Components
In this article, we will look at what I consider to be best practices when writing tests for Vue components. We will also take a sneak-peak at the new version of Vue Test Utils, built in TypeScript for Vue 3.

20200221 A Custom Renderer with vue-runtime-dom
Vue 3 is highly modular, exposing different packages for reactivity, rendering, and runtime. Let's explore the `runtime-dom` and `runtime-core` packages, published as part of Vue 3, and build a custom DOM renderer.

20200215 Vuejs 3 and TypeScript
Options Composition API, JavaScript and TypeScript - one API and language to rule them all?

20200203 Building a Vue Testing Framework from Scratch
UI Libraries like Vue and React and their Testing libraries, Vue Test Utils and Enzyme, can seem like "magic" sometimes. To remove this magic and see exactly how a test framework works, let's build a simple unit testing framework for Vue.js 3, from scratch. Will will see that testing frameworks are just simple wrappers that provide an abstraction around basic usual DOM APIs.

20200126 A Vuex Clone for Vue 3 From Scratch
Vue 3's alpha has been out for a while now, however most of the core libraries have not caught up yet - namely Vuex and Vue Router. Vuex, in particular, is fairly simple to implement with the new APIs exposed by Vue, namely `reactive` and `computed`. In this article, we will build a Vuex replacement (let's called it Hackex).

20200119 Separating UI and Business Logic in Vue Components
One common occurrence I've observed across large Vue and React apps is that, over time, the UI logic and business logic becomes so entangled that UI changes break the business logic and vice versa. Let's look at an example of this, and how we can separate the concerns.

20200112 Reducing Boilerplate in Vue Unit Tests
Reducing boilerplate in your unit tests can improve readability. In this article, we refactor the unit tests for a component using Vuex and VueRouter, and extract a useful utility function that can be used throughout the entire codebase.

20200104 Migrating a Large Project from Flow to TypeScript
Vue Test Utils uses Flow for type checking. I wanted to know what it would take to move to TypeScript.

20191206 Building a Tech Crunch style Progress Scroller
In this article, I'll look at how you can replicate the circular progress scroller [Tech Crunch](https://techcrunch.com/) use to gamify their articles, encouraging users to scroll to the end (and view the advertisement on the end of the article).

20191114 Compiling Vue 3 and try Composition API
In this article we compile Vue 3 from the latest source and try out some of the new APIs, include the upcoming composition API. This is the app we will be building:

20191007 Notifications in Swift 5 and iOS 13
Today I decided to start learning iOS programming. I've had a great experience with React Native, but some things are just nicer done native. This article covers local notifications, using `UNUserNotificationCenter`. I'm using Swift 5, Xcode 11 and iOS 13.

20190901 An Introduction to Docker, NGINX with Node
I started to learn devops recently. This article is basic tutorial on how to set up a node server, which receives requests via nginx.

20190711 Consistency in your Vue and Vuex App with Axios transformRequest and transformResponse
## Consistency in your Vue/Vuex app with Axios's `transformRequest` and `transformResponse`

20190606 Introducing the Flux Entities Pattern
The flux entity pattern aims to simply the design and implementation of flux stores, such as Redux or Vuex. It is based on common patterns I identified and extracted over the last few years of working on various single page apps, mainly in Vue and React, using Vuex and Redux respectively.

20190505 Organizing Rails Controllers with REST actions
This post describes my experience organizing Rails controllers using only REST actions, an approach popularized by the mighty DHH and his cronies.

20181224 How I Do Vue 2019 Typescript and TSX
In this article, I will talk about how I have been using Vue, and plan to do so in 2019. The main new technologies I've found useful over the last year have been TypeScript and `.tsx` instead of `.vue` files.

20181117 Intro to Perl
I am learning Perl, a sysadmin language from the late 80s for my job at DoseMe, where we create precision dosing software.

20181111 Intro to TypeScript
I have been learning about TypeScript lately, since I will be using it at my new job, and I think type-safety can be valuable. This posts discusses some of the basic features of TypeScript.

20180830 Predictions for NA LCS Semifinals
This is some predictions for various "first" markets (blood/dragon/turret/baron) for the upcoming NA LCS semifinals on the 1st and 2nd of September, 2018. This article was published on the 30th of August, 2018.

20180828 Integrating Cypress with Rails
Traditionally, Rails gives us a full stack development framework including E2E tests with Selenium to develop websites. Let's see how to transition an app using Rails' built in system tests to using Cypress, a new E2E framework built on Node.js, targetting modern JavaScript heavy applications.

20180823 Pandas For LOL Data
In this article, I demonstrate some basic techinques using the pandas data analytics library for python3. I will be using the League of Legends 2018 Summer Split data from [Oracle's Elixir](http://oracleselixir.com/match-data/). This was written on the 23th of August, 2018.

20180816 A First Look at League Data with Pandas
I wanted to learn more about pandas, a popular Python data handling library, and to motivate myself, I used the League of Legends dataest provided by Oracle's Elixir to do some simple data handling. This was written on the 16th of August, 2018.

20180809 Adding Commits to an Incoming PR
One of my projects starting getting some PRs recently - I learned how to add their branches as remotely, and add and push commits to them.

20180806 A Simple Vuex From Scratch
Build a simple Vuex implementation from scratch, in just 40 lines of code, complete with a reactive state and mutations.

20180728 Getting Started with Regex
Regex is something I have always been slighly afraid of - long, intimidating and barely readable strings. Today was the day I learned regex, and started to use them to be more productive.

20180728 Detecting and Outlining Lakes with Python 3 and OpenCV 3
In the article, I will go over some basic shape and contour detection using Python3 and OpenCV to identify a lake in a given screen capture from Google Maps.

20180709 Splitting Bundles with Webpack 4
In this article, I will introduce the concept of **bundle splitting**, and provide two simple examples that illustrate how to implement bundle spltting and it's benefits.

20180709 Server Side Hydration with Vue and Webpack
This article will continue on from my post, setting up weback for ssr with Vue, where we implemented basic server side rendering. Now we will add hydration.

20180618 Mocks and Stubs: Testing API Requests with Vue
Almost all single page applications will make many calls to external services, so testing those parts of your applications is important.

20180606 Server Side Rendering with Vue
In this article, I will continue on from the a webpack config from scratch for Vue, where I set up a webpack config from scratch for Vue. I will now add support for server side rendering, with `vue-server-renderer`.

20180531 A Webpack Config from Scratch For Vue
In this article, I will show how to prepare a webpack setup from scratch to develop Vue apps, complete with `webpack-dev-server` and hot reload. We will see how to use create `rules` for `loaders`, and how to use `plugins`.

20180530 Adding Foreign Key with Rails
Rails makes it easy to add keys and indexes using migrations. Here is a quick example.

20180501 ActiveRecord and the Database
If you do things the Rails Way, including using the standard table names that come with the migrations generated using `rails generate migration`, you barely need to think about the underlying database. If you are interfacing with an existing database, or your models and the corresponding tables have different names, it can be a little more tricky. Luckily, ActiveRecord lets us specify the table, keys, and so on in these situations.

20180428 A Simple JavaScript Testing Framework from Scratch
In this article, I build a simple JavaScript framework from scratch. The framework will then be used to unit test itself

20180422 A Simple Router with Ruby and Rack
Rack is the web server that powers many Ruby web frameworks, including Rails. Let's see how you can make your own simple HTTP router, using Rack.

20180417 Introduction to Events in ReactVR
ReactVR is an exciting new way to build 3D and VR environments, which can be easily deployed and accessed in a browser. One of the first things you will want to do in any web app is allow the user to interact with your creation. This leads to the topic of this post, handling events in ReactVR.

20180414 A first look at ReactVR
I tried out ReactVR today, and so far I really like what I see! It was really easy to get going and when viewed from a phone, you really feel like you are in the scene.

20180411 Getting started with Google Analytics events
Recently I became more interested in how users are interacting with my sites. Google Analytics is a great tool for tracking this kind of data.

20180408 Integrating Apollo with Vue and Vuex
My previous article discussed how to setup a simple GraphQL server and query it from a Vue frontend. For my personal projects, I believe this is adequate, however a more common solution in complex, production applications is a framework to bring some structure and extra features to your stack. Apollo is one such framework.

20180404 Custom Middleware in Rails 5
Rails is built on top of Rack, a general purpose Ruby HTTP server. Much of Rails comprises of Rack middlware (ActionDispatch, etc). Let's see how to add a custom middleware, as of Rails 5.