I'm Timothy Vernon

Timothy Vernon

I build beautiful, modern web applications with Javascript. This is my website where I write about what I am learning and my experiences.


Find me online

My Github ProfileMy LinkedIn ProfileMy Twitter Profile

Check out my open source work, professional experience, and tweets.

Visual regression testing with Jest

April 23 2020

Developers write tests to gain confidence.

Confidence that their application or site is working as expected for every user. Confidence that every logical flow has a proper ending. And confidence that when they modify existing code, they aren’t accidentally breaking something else.

Of all the different testing strategies, one of the least mentioned methods is that of visually confirming that the design looks as intended. It’s much easier to write unit, integration, or end-to-end tests to confirm that user flows are functional. All these tests are written with more code, and as developers, we’re comfortable with this.

But it’s traditionally been a manual process to go through the application to visually check that the application appears as your designers intended. This article looks at new approaches to automating visual regression tests and unlocking greater confidence in releasing.

Read More

Copy AWS DynamoDB data between regions

October 20 2019

I messed up. I was developing a website that would take user data submitted through a form and save it to a database in AWS DynamoDB. However, I chose my default region as us-east-1 (Northern Virginia) instead of somewhere in the European Union (maybe Ireland) like I should have for GDPR reasons. It wasn't until I had some submissions and user data that I realized my mistake and quickly looked for a way to move that data to a different AWS region.

Searching for a way to copy a AWS DynamoDB table from one region to another is more complex that I had anticipated. Google searches and StackOverflow boards weren't giving me anything that worked despite trying some advanced AWS services for data pipelines or migrations. In the end, I realized that the simplest approach for my situation was to write a script that would read everything from the original table and write it to a new table in the correct AWS region. This article is documentation of the NodeJS script I wrote to move DynamoDB data between regions.

Writing your own React custom hooks

July 27 2019

Hooks are hot right now in React. You might be writing your React components now using the hooks useState, useEffect, useRef, and others but the real power of hooks is being able to extract logic from one component and share that logic in other components across your application. Understanding how and when to write your own custom React hooks will enable you to extract reusable logic and even clean up your code a bit.

Let's look at some code and explore how a custom React hook can help.

Does modern JavaScript need strict mode?

May 18 2019

I was modifying some legacy code this past week, as most developers find themselves doing at some point in their employment. Now when I say legacy - it's pretty legacy. There was no build process, transpilation, or minification and all the JavaScript files were just imported one by one at the bottom of the index.html file. Remember those days? One of the things I noticed when getting familiar with the code was that for each function there was a “use strict” statement at the very beginning. Now I have to be honest, but the “use strict” statement at the beginning of a function or JavaScript file isn’t something that I’ve thought much about in the past few years. My recent professional work has been primarily in the Angular, React, and Vue frameworks and I haven't dealt with strict mode in JavaScript in any of the those projects to my memory. So I began thinking: does modern JavaScript need strict mode anymore? Why haven’t I been needing to add the 'use strict'; statement to my code recently? This article explains what I found:

A use case for point-free programming

March 29 2019

There’s a lot to love about functional programming. While this isn’t the place to layout the benefits or tradeoffs of the functional programming style, its safe to say that the concepts can bring a lot of order, power, and simplicity to your code. However, in all of that, it’s also easy to get lost in the weeds of terminology and mathematical jargon. My goal in this post is to take a shallow dive into the world of functional programming, currying, and point-free functions in JavaScript and explain one use case where functional programming improves the readability of a simple function.

Automating Netlify Deployments

February 26 2019

Serverless has been a hot topic recently, and for good reason. Chris Coyier has a talk called “The All Powerful Front End Developer" about how this serverless approach is empowering frontend developers to accomplish more than was previously possible with the same skills. While the title of Chris’ talk sounds a bit audacious, the premise is becoming very true as JavaScript developers are discovering that their skills are reaching further than ever before.

If serverless is a new concept for you, or even if its not, I’d recommend that you check out The Power of Serverless, a website put together by Chris to catalog the different services and resources available to developers to use traditionally frontend-only skills to build complete, dynamic solutions on the web. One of the services listed on The Power of Serverless is Netlify, a service that helps build, deploy, and manage modern web projects. As a frontend developer, I have enjoyed using Netlify for the past year to build and host static sites for my personal website and hobby projects. The integration with GitHub has allowed me to painlessly get a website set up with continuous integration and automatic HTTPS on custom domains. It’s been really great! But this past month I ran into a small issue with this serverless approach to building web projects.

Data flow in Svelte components

January 14 2019

Svelte handles passing data between components much like React or Vue. If you have experience with either of these frameworks, understanding what is happening should be pretty straight forward for you. One of the important concepts that React has brought to frontend development over the last couple years is that components are best understood as functions of state. Given a specific state, the component will always render this particular way. When state is passed down to a component, either from a parent or a store, developing that component in isolation to everything around it is much easier. This philosophy can be applied with Svelte components as well.

Reflecting on 6 years of web development

January 02 2019

As 2018 drew to a close, I started reflecting over where I’ve come in my software development career thus far. It's been quite the adventure and the year ended with me settling into a new company and picking up a new(ish) tech stack to work with. In the process of picking things up in a new place, I was actually reminded of many experiences from the past which had enabled me to be at the point where I am today. This article serves in-part as a look back - a kind of origin story of where I’ve come from and what I’ve learned. It is also a look ahead and a testament to the resiliency of a software language that I’ve come to enjoy writing so much.

Migrating to Gatsby 2 in 10 minutes

December 16 2018

This site is being generated by a JavaScript framework called Gatsby. When I first started getting this site up and running in the summer of 2018, Gatsby was at version 1 and making waves as a “blazing fast modern site generator for React”. I had listened to a really interesting podcast on Gatsby plus tried out a couple demos and decided that I wanted to build my website with the combination of React and Gatsby. My experience thus far has been all that I could have asked for.

In September 2018, Gatsby 2.0.0 was released and offered a host of improved features and the latest of everything, including React 16, Webpack 4, Babel 7, and reach-router. Hats off to the Gatsby team and all that they’ve done to improve the project! 🚀 However, I was just about to roll out my site and didn’t want to bother updating the Gatsby package until I had things up and running in a good place.

I released my website (work always in progress 😅) in October but I was in the middle of changing jobs and countries and had too much going on to update Gatsby. This weekend I decided it was time to update and that I would document my steps in blog form. In hindsight updating was super smooth and I experienced minimal breaking changes along with some immediate wins. Should have done it sooner!

Conditionally Add to Object in Javascript

August 26 2018

I have recently been using a certain Javascript pattern to conditionally add to an object based on whether some conditions are true or not. Here’s what it looks like:

const a = {
  b: 10,
  ...(someTruthyCondition && { c: 5 }),

If you are new to modern Javascript this might look really confusing but let’s take a minute to break down what is happening. It is far too easy to find some snippet of code on Stack Overflow or elsewhere on the internet and use it without understanding how it works. Being able to understand how each little section of code is evaluated is important for mastering the Javascript language as well as generally helpful for debugging or writing new code. When evaluating Javascript statements, it is often to helpful to look at the inner-most operations and work outwards and that’s what we will do with this example.

Tech Conferences Aren’t Worth Your Time

July 20 2018

Yes, thats right: the web industry's event of choice might not be as beneficial as you or your employer think it is.

To be fair, I’ve been attending tech conferences at least once a year since 2013 and have been massively helped each time. There are just some things you can’t get from Twitter, YouTube, newsletters, Hacker News, etc. but can get from a conference focusing on your particular language or framework. Being at an event with hundreds of people who have the same interests and similar experiences is invaluable for both learning and networking. For many of us, attending a conference also means the chance to travel and see a new city. These are all great things! But I want to propose that as software developers we can be wiser in how we spend our time and resources.

4 Web Development Podcasts You Should Be Listening To

July 09 2018

Podcasts have become an integral part of my weekly routine in keeping up with what is happening in the world of web development. As a web developer, it is easy to become overwhelmed at the pace at our industry changes! There are only so many hours in a day and we all have many responsibilities outside of work. Things are changing constantly though, even to the point of “Javascript Fatigue” phrase becoming a term. Part of my answer in how to keep up and continue learning has become podcasts.

My commute to work daily is about 35 minutes each way. That works out to be 70 minutes each day and 350 minutes weekly for just about 6 hours of total driving time each week. Listening to a podcast while I drive is the perfect solution for me because that time in the car is largely wasted otherwise. Instead of flipping through the radio or mindlessly driving, I am able to listen to some informed folks talk about the next new thing in Javascript or a best practice in React to consider. Even if some concepts of web development are difficult to grasp audibly, I can always go back through the show notes to follow links and review points mentioned.

Here's a list of podcasts that are queued up for my drives:


July 01 2018

I'm starting a blog today. It probably won't be much or that great but I want to at least try. My goal in this is three-fold: learn in public, practice my writing, and experiment on a site that can reflect my design and technology tastes.