Blog Index

Jest Snapshots can be a valuable utility for monitoring code changes for UI components. They can also become a scourge if they become too large. The line between the two isn't always clear. Snapshots don't offer a clear mechanism to determining how large they are. This makes it easy to create large snapshots that are hard to diff. The likelihood of a thorough review on a snapshot diff decreases in relation to the size of the snapshot. I have both observed and committed broken snapshot updates into repositories as part of a branch. The danger lies in making intentional changes to a particular feature and updating the snapshot without checking for other breakages. If the snapshot diff is large, it will likely not receive as thorough a review…

Over the past month I have been adding features to the blog that I had put off for long enough. As I aim to write more, it was time to address some glaring omissions in my initial implementation. This included adding proper category and tag pages, post metadata, and other small features. Gatsby's tight integration with GraphQL enabled quick iteration and development of these new features. Some features required as little as adding a utility field to a GraphQL query to implement. Data selection per query One of GraphQL's core features is the ability to select only the required data. A selection set is the specific data requested within a given type. GraphQL uses a declarative data structure. This means that the API consumer specifies the…

Managing dependencies is a core part of maintaining a project long term. Projects run the risk of decay if not maintained. The evolution of the environment around them can also introduce decay. Dependency management can be an intimidating and error prone process, if not approached with a plan. About a year ago, I went to update the dependencies for a full stack JavaScript application for the first time in over four months. Not knowing any better at the time, I ran and updated all the server and client dependencies in one fell swoop. Looking back I shudder even thinking of that and what happened next. It took two to three hours to get beyond the red React error screen. It was another hour or two until I felt comfortable that everything was…

Last week I decided to install the React 16.8 alpha on a branch and experiment with React Hooks in preparation for their release on February 6, 2018. The site utilized a render prop based Slideshow component in several places as well as a handful of other class based components. Through this process, I was able to consolidate the application code and eliminate all class based components from the site's code base. The React team does not recommend refactoring your entire codebase to Hooks on their release. I did this primarily as a means to engage with the Hooks API in a relatively small codebase. You can find the code conversion to Hooks discussed in this post at the related PR. Converting to Hooks and lessons learned The Hooks…

It’s no secret that I love GraphQL. I first encountered it when transitioning this site to Gatsby at the start of the year. Gatsby incorporates GraphQL into their data layer and exposes multiple plugins to incorporate data sources. When I started exploring GraphQL in more detail, the number of resources and their detail was substantially less. I won’t even go into how long I spent trying to find information on testing strategies. One of my personal missions has been to help break down barriers to learning GraphQL amongst people in my circles. It is substantially less intimidating to get started than first glance may appear, and the reference material has increased. I have given several talks on the topic, breaking down the core concepts and…