Prettier and GitHub Actions logos

Prettier is a very popular code formatter which uses very opinionated but sensible styles to format your code and prevent the ongoing debates about code styles. When implementing Prettier into a project, the typical approach is to setup a pre-commit hook using a tool such as lint-staged which will run Prettier on your staged files prior to committing. While this works well in most cases, there are a number of challenges with this approach.


How to create and use Yarn constraints for managing your monorepos

Yarn package manager logo

Yarn 2 (aka berry) introduced a new feature referred to as “constraints” which allow developers to enforce rules for dependencies or manifest fields for some or all workspaces in a project. While constraints are still experimental and community examples of using them are a bit sparse, they are a very powerful tool to help you more easily manage your project.

What Are Yarn Constraints?

As previously mentioned, Yarn constraints allow you to enforce rules for your dependencies or manifest fields in your project. While they could be used for a project with a single workspace, their value comes in when used on projects with…


How to setup semantic-release with GitHub Actions

Photo by Paul Esch-Laurent on Unsplash

semantic-release is a tool which fully automates the process of releasing your code to the world. It determines the next version based on the commit messages (e.g. fix, feat) giving you full control over the next version but still automating the release process. This short article shows how to setup semantic-release for an npm package using GitHub Actions.

First, create a GitHub Action which calls npx semantic-release (or yarn semantic-release if you use Yarn). This should be run after any other pre-release steps such as npm run build and npm test.

name: Release
on: [push]
jobs:
release:
runs-on…

How to recognize and replace derived state in your React components

The hilt of a decorated sword sticking out of the ground.
Photo by Ricardo Cruz on Unsplash

A couple weeks ago, my fellow front-end developers at Widen had a conversation regarding one of our shared React components which we were struggling to implement in one of our applications. While most React components are fully controlled (via props) or fully uncontrolled (internal state), this component used what is known as “derived state” which is internal state that is controlled to some degree by props. Although derived state might seem like a good solution, it often causes many more problems than it attempts to solve.

My goal in this article is not to convince you that derived state should…


Three reasons why you should avoid shallow rendering when writing JavaScript component tests

Sign reading “danger no entry”.
Photo by Issy Bailey on Unsplash

In my article titled “A Tale of Two Ideas” I discussed my method for discerning between opposing ideas and used the topic of shallow rendering as an example of a topic which has very distinct and differing opinions. Although I did not tell my opinion in the article as I didn’t want to taint the purpose of the article, I did promise to publish an article with my opinions at a later point. And now, that time has come!

TLDR

Rather than making you scroll all the way to the end to see my list of reasons, they are listed succinctly…


Common challenges with environment variables and how to remedy them

Environment variables are very helpful for software development as they allow you to easily change certain aspects of your application based on the environment in which your application is used. However, environment variables do have some challenges which can cause some issues in certain scenarios. In this article, I’ll explore some of those challenges and explain why I don’t use environment variables in my applications.

Globally Available

The first challenge with environment variables is the fact that they are globally available to all applications. The main problem this can cause is naming conflicts between applications. For example, if two applications both have…


A few simple improvements to the npmjs.com package view styles

Like most front-end developers, I use npm quite often for finding new packages or checking out documentation for packages I use. I’ve also started to publish some npm packages of my own recently giving back to the open-source community.

As I have used npm more in the past few months, a couple of the styles used on the package view page were just bugging me as they gave the page an unfinished and poorly styled look. So, with the help of the Chrome Stylus extension I was able to add a couple quick styles to get the page looking nice…


GitHub Actions are a great way to setup CI/CD tasks directly in your GitHub repos for running tests, deploying code, publishing packages, and so much more. I’ve recently done some work to setup actions in my open source repositories for easily publishing npm packages without forcing me to run a bunch of commands from my local development machine. In this article, I’ll go through some basic jobs that you can run using GitHub Actions to simplify the process of publishing npm packages.

Basic Publish Action

To get our feet wet with publishing npm packages using GitHub Actions, let’s start by creating a simple…


What to do when encountering ideas from differing perspectives

A sticky note with a light bulb drawn on it pinned to a bulletin board.
Photo by AbsolutVision on Unsplash

Every day, we encounter ideas and viewpoints that affect our lives in one way or another. Sometimes we agree with the ideas we hear, other times we disagree, and many times we aren’t immediately sure if we agree or disagree with the ideas we encounter. The challenge we face is discerning which ideas are true and which are false.

While ideas come from a variety of sources, by far the easiest example of opposing ideas is politics (don’t worry, this is not a political opinion article). Each election cycle, candidates give speeches and participate in debates to make their ideas…


I created my GitHub account about 3 years ago while working at my first software development job. At the time, Python was one of my primary languages for personal projects and was the inspiration for my first StackOverflow and GitHub username: markypython.

Since that time however, my usage of Python has decreased dramatically as I moved into JavaScript and Node.js development. I also had begun to use the username mskelton for most of my other accounts and the inconsistency annoyed me. However, some initial research into changing my GitHub username got me pretty frightened and I seriously questioned if it…

Mark Skelton

JavaScript Engineer @Widen using TypeScript, React, and Playwright.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store