Devin Schulz

Using React Component Variants to Compose CSS Classes

Sun, 20 Feb 2022 00:00:00 +0000

When it comes to styling variations of a component, we often concat classes together in a non-idiomatic way. In this post, I will outline one pattern I’ve been using to apply classes to an element that has been readable, typesafe, and flexible enough to keep adding variants easily.

Let’s get started.

We will create a generic button component with various styles depending on size and type. How we apply these classes is not button-specific and could be used to style inputs, dropdowns, or any other component you can think of.

My Definition of a First-Class Pull Request

Tue, 25 Aug 2020 00:00:00 +0000

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.

Handling an Event Callback Once

Sun, 12 Jul 2020 00:00:00 +0000

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);
});

In this example, an event listener is attached to the button element, and once clicked, the listener is removed.

Rename Fields by Using Aliases in GraphQL

Sun, 05 Jul 2020 00:00:00 +0000

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.

Imagine requesting data using the following query from an API:

Filter Out Multiple Console Messages in Google Chrome

Fri, 01 May 2020 00:00:00 +0000

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.

-term -analytics

Using regular expressions to filter entries also works:

-/term/ -/analytics/

Or a combination of the two:

-term -/analytics/

Restrictions While Styling Visited Links

Tue, 18 Feb 2020 00:00:00 +0000

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.

Limitations

First and foremost, you can only change the CSS properties of a visited link if the unvisited link already has that style applied. If your unvisited link does not have a background color, but the visited one does, it will not apply that background color. If your unvisited link has a background color, and you change that color for visited links, it will work.

Modify Create React App's Babel Configuration Without Ejecting

Sun, 02 Feb 2020 00:00:00 +0000

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 Lost Faith in Client-Side Analytics

Sat, 31 Aug 2019 00:00:00 +0000

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.

Accumulate Complex Objects With the Reduce Method

Mon, 29 Jul 2019 00:00:00 +0000

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.

Building the Inspect Measurement Engine

Wed, 17 Jul 2019 00:00:00 +0000

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.

From Hugo to Next.js and Back Again

Sat, 18 May 2019 00:00:00 +0000

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.

Reflecting on Four Years of Remote Work

Tue, 12 Mar 2019 00:00:00 +0000

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 co-working spaces like WeWork. All communication happens on Slack and meetings take place on Zoom.

Building a Likes API With Google Cloud Functions

Mon, 05 Nov 2018 21:41:18 -0400

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!

Copy React Props to Your Clipboard in Google Chrome

Sat, 14 Jul 2018 12:26:27 -0400

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

Open up the React Developer Tools tab within the Chrome inspector.
Select the component or element which contains the property you want to copy.
Right-click the {…} and select Store as global variable from the menu.
Navigate to the console tab.
You will notice a global variable was added with a naming convention similar to $tmp or temp1.
Copy the value to your clipboard by typing copy($tmp) into the console.

What’s great about this trick is almost any value which has the {…} beside it within the Chrome inspector can be set as a global variable. Therefore, this method is not limited to the React Developer Tools.

Combining Synchronous Actions Using Redux Thunk

Mon, 09 Jul 2018 16:20:02 -0400

Simple frontend 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.

A Potential Solution

Recently I’ve been using Redux Thunk for dispatching a single thunk action, and in turn, it dispatches several actions to modify independent areas of the application state. Think Redux Thunk is only for asynchronous actions? Think again! Never heard of Redux Thunk or the term thunk? No worries, I will go a bit more in-depth about how it works below.

Welcome Readers

Sun, 17 Jun 2018 00:00:00 +0000

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

I’ve struggled for years to get a decent blog up and running. It wasn’t because of the lack of content, on the contrary, it was the design aspect that was the obstacle. I designed countless mockups and developed fully functioning prototypes, but they never entirely made the cut. I was so critical of everything I designed; I always found something that I didn’t like, and then found myself rejecting each concept.