Over the years, I have worked on a few projects where I was the sole developer. Being a sole developer has its challenges since not everyone reviewing your pull requests (or merge requests for the Gitlab folks) has an understanding of the repository like I do. Because of this, I like to give a bit more context to every pull request I create so reviewers know what to expect when reviewing code.

In this post, I am primarily focusing on pull requests regarding front end development and working on SaaS software, but this format could work for others too. My typical pull request is broken into four main sections: context, testing, checklist items, and then any related GitHub issues or JIRA tickets that will be closed as a result of the merge.

An interesting tidbit I stumbled upon recently is the ability to remove an event listener once called.

In the past, I would have added an event listener to an element and then removed it within the callback function. It would have looked something like this:

const button = document.querySelector('button')

button.addEventListener('click', function onClick() {
  console.log('clicked')
  button.removeEventListener('click', onClick)
})

When working with a GraphQL API, you may want to rename a field to something other than what the API has to offer. Aliases exist as part of the GraphQL spec to solve this exact problem.

Aliases allow you to rename a single field to whatever you want it to be. They are defined client-side, so you don’t need to update your API to use them.

Google chrome gives you the ability to filter out messages within the console by prefixing a search term with the hyphen-minus (subtraction) character -. If you want to ignore multiple entries, add a space between the search terms.

The :visited pseudo-class is a unique state which provides visible feedback on links that a user has navigated to. This state behaves similarly to other pseudo-classes like :hover, :focus, and :active, but comes with a few limitations.

I love using Create React App to spin up an application swiftly, but one annoyance I continuously run into is the lack of ability to modify the Babel configuration. Why would you want to do this? Perhaps you want to use some of the latest ES.next features before they’re approved and merged into Create React App. In this case, you may eject the app, but there are several reasons why you don’t want to do that.

I’ve been using Google Analytics on this website since its inception, and according to W3Techs, 56.4 percent of sites on the internet do too. I use the data collected from Google Analytics to see which posts are popular, and features are used most often. If a particular article is more popular than others, I’ll make sure to write more about that subject in the future. If a specific feature is rarely used, I’ll most likely remove it.

Many people don’t realize the power and potential of the Array.reduce (MDN) method. What makes it so powerful is its ability to take in an array containing any values and then return almost any type of data. Because of this flexibility, I want to highlight one technique you can use to traverse an array containing an infinite number of nested objects. You’ll learn how to accumulate all objects and return a single object you can use to reference any entry by ID.

Not too long ago I had the opportunity to construct a measurement system inside of Inspect that depicts and calculates the distances between two layers. In-between each layer, a line is drawn with a label that displays the distance. Supporting lines are added to the nearest edges of the hovered layer to help give the user an idea where the measurement lines reach.

In this article, I’ll explain some of my ideas and how I managed to take a fairly complex problem, break it down, and deliver something of value to an end user. I hope by you reading through this article; you’ll have a better understanding of how to dissect a problem you may be encountering. I know when I was handed the ticket to implement this functionality, it was intimidating.

This post features my challenges, frustrations, and why I ultimately landed on using Hugo as a static site generator to build my blog. The past three iterations of this website were written using Hugo, Next JS, and then back to Hugo again. Hugo gave me so much out of the box, and practically everything I needed, whereas Next JS, required me to write the functionality I wanted explicitly. This article is not meant to hate on any frameworks and instead voice my own experience.

Throughout the past four years, I’ve had the opportunity to work for a unique, design focused company called InVision. For those not familiar with InVision, it is growing to be the operating system for digital product design. Its product line provides tools for designers, developers, and stakeholders to collaborate on designing and building websites, mobile applications, and almost anything else that is displayed on a screen.

The entire company is dispersed across the globe with people across all continents and in almost all time zones. There is no central office, but some make use of coworking spaces like WeWork. All communication happens on Slack and meetings take place on Zoom.

I took the challenge to build a likes button into this blog. Since the site is compiled and then deployed as flat files, there is no backend or database to manage. From a security aspect, there is no safer way to develop a website, but it does add a bit of complexity to incorporate dynamic content.

My first attempt was to add Firebase as a dependency and wire it up to the likes button. This worked great as it gave me real-time updates across multiple browser sessions whenever I clicked the button. However, looking at the compiled, minified bundle, I noticed it had added over 220 KB!

While working on a React project today, I was looking to copy a property that was passed down to a component. After searching around, I found out it’s surprisingly easy.

Simple front-end applications I’ve worked with have one event (click, keypress, input change, etc.), which dispatches a single action to modify part of the application state tree. At the time your application scales in complexity, that single event may need to perform several actions at once and perform some sort business logic before they are dispatched.

I’m a designer turned web developer that specializes in front-end applications. As an advocate for best practices and proper schematics, I believe that the web should be open and accessible for everyone.