Devin Schulz

Building a Chat Interface That Doesn't Fight Your Scroll Position

Thu, 29 Oct 2026 00:00:00 +0000

A chat interface that scrolls to the bottom on every update makes it difficult to read anything except the latest response. Scroll up to check an earlier message and the next chunk pulls you straight back down.

I mentioned this problem in my post about the decisions around frontend code. It’s a good example of a small interaction that needs more thought than its first implementation suggests.

I’d start by separating two things: whether a response is streaming, and whether someone wants to follow it. Scrolling up should pause the following without stopping the response. Loading earlier messages should preserve the message they’re reading, even if new text is still arriving below it.

Reflecting on Twelve Years of Remote Work

Wed, 21 Oct 2026 00:00:00 +0000

Nearly twelve years into remote work, I still value the flexibility and the time I’ve saved commuting. I also still have to work at knowing when to stop for the day.

I started working remotely when I joined InVision in December 2014. The entire company was distributed, and working with people I’d mostly see through a screen took some getting used to.

When people found out I worked from home, the questions were usually pretty similar. How do you stay motivated? Don’t you get lonely? Do you actually get dressed in the morning?

The Hardest Part of Frontend Development Isn't Writing Code

Sun, 18 Oct 2026 00:00:00 +0000

After more than a decade of frontend development, I find deciding how an interface should behave harder than writing the code. A failed request, a slow connection, or an unexpected interaction can expose decisions that were never made during design.

When I first started building websites, most of my time went into getting things to work. I’d take a design, write some HTML and CSS, add JavaScript, and eventually get something that looked and behaved the way I wanted.

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. It has stayed 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 it’s 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:

code#scroll turbo:before-cache@document->code#clear">

JavaScript

.js

const button = document.querySelector("button");

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

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.

code#scroll turbo:before-cache@document->code#clear">

Plain text

.txt

-term -analytics

Restrictions While Styling Visited Links

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

The :visited pseudo-class is a unique state that 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 keep running into is not being able 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 could eject the app, but there are several reasons you might not want to.

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 which 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 any 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 build a measurement system inside Inspect that calculates and displays the distances between two layers. Between the layers, 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 of 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 that after reading this article, you’ll have a better understanding of how to dissect a problem you may be facing. I know that when I was handed the ticket to implement this functionality, I found it intimidating.

From Hugo to Next.js and Back Again

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

This post covers my challenges, my 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, then Next.js, and then 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 isn’t meant to hate on any framework; it’s just 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 on the challenge of building a like 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 standpoint, 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 that 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 that 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.) that dispatches a single action to modify part of the application state tree. As your application grows in complexity, that single event may need to perform several actions at once and run some sort of 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 who specializes in frontend applications. As an advocate for best practices and proper semantics, 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 a lack of content. On the contrary, the design 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.