Category: Web Development

TailwindCSS is a configurable CSS tool that generates CSS utility classes. These utility classes each set one CSS property, and are combined with other utility classes to generate the styles for a layout. In a utility first CSS approach, elements generally have more classes attached to the DOM in favor of writing bespoke CSS. This is a high level simplification of the tool, but it is an important baseline of understanding before moving forward. Six months ago, I was skeptical about Tailwind's approach. I have since worked on three projects which utilized Tailwind, and now advocate for it on future work. In this blog post, we will cover points of skepticism, benefits, and some lessons learned about working with Tailwind. Skepticism The…

Over the past few months I have been moving most of my projects to Renovate for managing dependencies. From my experience, Renovate offers several key benefits over other solutions such as Greenkeeper and Dependabot. This blog post will focus on what Renovate is and what differentiates it from other dependency management solutions. For a higher level overview on dependency management, I recommend checking out how to manage dependencies with confidence. What is Renovate Renovate is a GitHub, or GitLab, application that monitors dependency updates for a given repository and opens Pull Requests when new versions are available. While I have used them for JavaScript dependency management, Renovate also supports the following languages and…

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…

I have recently been working on a Vue project which utilizes Vuetify for the base of some of it's components. Vue has the ability to register components globally, eliminating the need for importing base components. This works great in development, but I came across an error when testing the component with Vue Testing Library. Vue console error for using a globally registered component that could not be found This error occurred because Jest had not been configured to recognize Vuetify's global components. In order to resolve this, some additional information was required in the Jest setup file. First, we need to import both Vue and Vuetify in the setup file. By calling , Jest becomes aware of the plugin and the globally available components…

Maintaining an ESLint config has several benefits, a significant one being seeing new rules as they become available. ESLint shapes the way we use JavaScript, and now TypeScript too. As I prepared for the latest release of my own ESLint config, I became aware of several new and helpful rules for testing with Jest. In this post, I'll dive into what some of these new rules are and some considerations for why they aren't added to the options. The interesting balance of ESLint semver ESLint rules are an interesting interplay with semantic versioning or semver. Adding a new rule as an option is considered a feature and warrants bumping the package a minor version. However, enabling the rule as an error can cause new lint errors. This is…