Hi, I'm Kyle Shevlin, a software engineer and online instructor. This is where I share all the content I create. I mostly write articles and create courses, focusing on breaking concepts down to their fundamentals.

Peruse my blog posts, check out one of my courses (or all of them), and sign up for my newsletter if you like what you read.

If you need to reach out to me, Twitter is by far the best way to do so.

Enjoy your time here and thank you.

Unsure Where to Start?

Try one of these curated collections.

ReactState MachinesFunctional ProgrammingSoftware Engineering

Recent Posts

Facade Pattern

or why this pattern might save your bacon

0 strokes bestowed

With the facade pattern, we're able to hide details "under the hood", changing them when necessary without affecting the API exposed by the facade and consumed by the rest of your application.

Read More
JavaScriptReactComputer ScienceSoftware Engineering
0 strokes bestowed

If you're using React Hooks, I want to show you a pattern for using them that I think will improve the legibility and organization of your codebase. Let's apply encapsulation to the use of React Hooks.

0 strokes bestowed

Typically, functions are written for their reusability, but I want to convince you that the reason to reach for a function is to encapsulate a concern.

0 strokes bestowed

Disclaimer: This might be a bad idea.

Let's kick it old school and create a custom React hook that takes a callback second argument for setState.

0 strokes bestowed

Recently, I needed to do some debugging to improve a few components that were rerendering unexpectedly. In that process of research and trial & error, I came away with a few useful hooks that I want to share with you.

0 strokes bestowed

I've been struggling a lot lately with my inner self-talk. It's never been all that fantastic but even worse than usual lately. I think this is the result of the difficult year we're all facing and a new venture I'm undertaking that has me really doubting myself. "Great opener, Kyle! Really got us…

0 strokes bestowed

When using a switch statement in JavaScript, we most commonly use the expression as if it's the left half of a strictly equals check, and each case as the right half. What if we set the left half to true, and make each case an expression instead? We would have a form of pattern matching.

0 strokes bestowed

Have you ever heard of the Baader-Meinhof phenomenon ? It's a cognitive illusion where once you become aware of some thing , you see that thing every where. It's called an illusion because the thing was always there, you were just unaware of its presence. I feel like generator functions are a…

0 strokes bestowed

You learn a lot working on a large, complicated codebase for an extended period of time. It's the kind of environment that exposes you to particular patterns often enough to develop thoughts and opinions around them. I want to share a quick opinion I have regarding a particular pattern here…

0 strokes bestowed

One thing I have found challenging about React.useEffect is the mental model regarding the dependencies array. It's very easy to get it in your head to use the dependency array as a means to constrain the calling of the effect, essentially treating it as a guard or conditional. "If this value…

0 strokes bestowed

Tic-tac-toe is a very simple game, and because it's so simple, it makes for a good introduction to some of the principles of grid and turn-based games. Let's learn how to build tic-tac-toe with React.

0 strokes bestowed

If your component is a pure function, i.e. given the same inputs you get the same output, you can wrap the component in `React.memo` to prevent the component from rerendering if `props` haven't changed.

0 strokes bestowed

Recently, I spent an hour with one of my protégés demonstrating some common advanced techniques we use at Webflow. One of the techniques I showed them was memoization. Let's learn what memoization is, why you might use it, and how do we write it from scratch.

0 strokes bestowed

No matter what it is you're building with React, when you boil it down, there are only three ways you can manage data in a React app: locally, parentally, and remotely.

0 strokes bestowed

The next part in our useReducer finite state machine journey is adding "guards". If you haven't read the previous posts in this collection, I encourage you to do so before reading ahead. Those posts are: How to Use useReducer as a Finite State Machine Adding Infinite States to a useReducer…

Looking for more posts?

If you're looking for more posts, visit the All Posts page.

Let's talk some more about JavaScript, React, and software engineering.

I write a newsletter to share my thoughts and the projects I'm working on. I would love for you to join the conversation. You can unsubscribe at any time.

Introduction to State Machines and XState Logo
Introduction to State Machines and XState

Check out my courses!

Liked the post? You might like my video courses, too. Click the button to view this course or go to Courses for more information.