Kyle Shevlin

At some point, “refactor” became a scary word, striking fear into the hearts of any manager who hears it. Let's reclaim the word, remove that fear, and recognize we cannot be good software engineers without developing an ability to refactor code effectively.

Sharing a fun coding exercise I came across and what the solution taught me. Plus, a few bonus steps you can take in the solution, too.

Let's learn a technique useful in string or array problems called the 'sliding window', where we use two pointers to expand and contract a subview of our data.

For years now, I've been using the phrase “the consciousness lottery” in conversation and I wanted to put it into writing finally. Come learn what it is and why you should add it to your vernacular.

In my previous post, I used a "Test Your Focus" mini-game as a metaphor for describing my ADHD. Let's learn how to build it using React.

While we have made great progress in understanding ADHD, it can still be difficult for some to grasp the impact it has on those who struggle with it. Let me show you what having ADHD sometimes feels like to me with a simple interactive game.

Sometimes we write unnecessary complexity without realizing it. Let's see how we often do this with ternaries and learn how using a map will remove complexity and improve maintainability.

Refactoring is a key part of my development process. Let me show you the git workflow I use to make refactoring just another step in building features or other code changes.

Calling impure functions with side effects like new Date() or Math.random() is a disaster waiting to happen. Learn what to do instead.

Learn how we can use composition to create subtle, pleasant animations that can be used on any component in our applications.

Small efforts can add up to big gains, given enough time. That's how I feel about alphabetizing my object keys. By always sorting them, I increase the speed at which I can read, and even write, code.

Responsive UI can be very challenging to write well and can often lead to some of the nastiest code you have ever encountered. Learn how to use multiple compositions to make responsive design a whole lot cleaner and easier.

I built a cross platform (React & React Native) design system at my last company. I'm in the middle of building another one for a client. Let me tell you what I learned, decisions I regret, and what I'm doing differently this time.

English grammar puts the adjective before the noun, but when it comes to file or function naming, I think you should do the opposite.

The flexibility of JavaScript and React means there are lots of ways to achieve the same result. Let's consider why we might choose one way over another when it comes to React. Specifically, when to choose a more verbose solution with composition over the DRYest code possible.

Learn when to use align-items: center or text-align: center in Flex columns.

I recently made a "curved bottom bar" in React Native for a client. Instead of using a library, let's build it from scratch with some handwritten SVG. It's no where near as intimidating as it sounds.

I've been using Tailwind CSS on a lot of projects lately. Almost all my layouts for these projects are some version of the "minimum full height" layout, and I wanted to quickly show you how I do that with Tailwind.

Learn how to create a simple Makefile to quickly create a "checkpoint" in your Git history when you are rapidly prototyping.

I created a VSCode theme inspired by Agathist's brand colors and released it as a VSCode Extension.

Not only is "composition" a confusing word, but there is more than one way to do it. Let's break those ways down into two types and learn about "nesting composition" versus "merging composition".

Agathist is my new software development firm. Learn about it in this self-directed question and answer post.

It is an anti-pattern to add margin to the outermost element of a component. It breaks encapsulation and makes components difficult to reuse. Let's learn what to do instead.

In TypeScript, sometimes any is our best option, but we can go a step further and give ourselves a little more signal than that.

TypeScript doesn't know whether you're returning an array or a tuple from a function, so let's learn a couple ways we can fix that problem.

Often we run into tricky UI situations as a result of overloading an element with styling responsibilities. We can solve this problem by separating the responsibilities and re-composing the individual components.

TypeScript is great at preventing bad things from happening, but it can prevent us from having some good things, too. When writing the types for functionality is onerously more difficult than writing the functionality itself, we might miss out on the good things that could have been.

Learn when adding yet another prop to a React component becomes a problem and how to fix it with composition.

Ever been given a requirement to keep all the existing functionality of a component working, but allow for arbitrarily different layouts? Here's how to handle that.

Using React Context and component composition, we can achieve both flexibility and different functionality

Learn the insertion sort algorithm in JavaScript and why it is slightly better than bubble sort

Learn the bubble sort algorithm in JavaScript, and why it is such a bad way to sort items

JSX makes writing UIs feel really familiar for frontend devs, but it can obfuscate a key detail of which we should remain aware.

Did you know you can declaratively handle events in the capture phase in React? I sure didn't until recently. Let's learn how.

Do you know why you might use `useReducer` instead of `useState`? There are a few key questions you can ask yourself to make that decision.

Let's explore two common function patterns for managing the complexity of conditional code.

Have you ever wanted to create a component like `Head` from `next/head` or `Helmet` from `react-helmet` that would update some state by using the `children` of a component? It's simpler than you might think.

Learn how to build Conway's Game of Life with JavaScript, React and the simulation pattern.

The “simulation pattern” is a useful tool for anyone's programming repertoire. Let's learn how to use it on almost any state problem that advances by discrete increments.

Sometimes we want to add functionality that happens with every call of a state setter. Learn how to wrap that state setter to add it.

Parametric design is the process of using adjustable parameters to modify and influence a design. Add it to your box of tools.

Many text editors allow you to fold, or collapse, blocks of code. I believe we can improve the design of our code by using this to our advantage.

I am about to launch a course platform of my own making at https://courses.kyleshevlin.com. It is not fancy. But it is my own.

UI Libraries are great for having a solid design system to build from. Here's a small architectural decision I would do to make them even nicer to work with.

Factory functions help us quickly create objects. They make use of closures to have private values and functions, all while avoiding the `this` keyword. Learn how to use them in this article.

Be careful with how you compose your UI when using Context. You might be making a common mistake causing extra rerenders.

People are often confused by `useRef`. Let's try and fix that confusion by comparing it with `useState`.

JavaScript closures are confusing for some, but they do not have to be. Learn what a closure is and why they are a powerful tool to have in your programming repertoire.

React state can be updated in two ways: replace the `currentState` with the `nextState`, or transform the `currentState` to the `nextState` with a function. Prefer the function.

Learn how to increase the flexibility and testability of your programs by passing dependencies in as function arguments alongside default parameters.

Discriminated unions in TypeScript can go awry when you use object or array destructuring. Learn why it happens and what you can do to fix the problem.

Learn how declarative state updaters improve the quality of your component's code.

React and modern JavaScript gives you the freedom to structure your React projects however you want. Learn how I structure mine.

Learn what "magic values" are in programming and how to avoid them to improve the quality of your code.

A short explanation on how I use `React.useMemo` to stabilize values for re-renders.

Symbolic logic, the study of reducing arguments to an algebraic notation, can be useful knowledge for debugging and reasoning about programs.

Learn the fundamentals of Sets and how understanding them may benefit you as a software engineer and programmer.

Learn the concept of a tuple, an ordered, finite list of items that represents an implicit key/value store, and where you might already be using them in JavaScript.

Learn how to conditionally use React Hooks by conditionally rendering a "renderless component".

Learn how to debounce or throttle a callback function with React hooks while avoiding an exhaustive deps ESLint error

Learn how to use React Context effectively in your web applications by using custom hooks and memoization.

Learn how the "facade pattern" can be used in JavaScript to make it easier to swap libraries, increase code flexibility, and hide complexity in your applications.

Improve the quality of your codebase with encapsulation and custom React hooks.

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.

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

Learn some helpful debugging hooks for improving React component performance.

Do you ever feel like you're always stuck in someone else's rearview, failing to ever catch up to them? Might be time to change your persective.

In this post, Kyle Shevlin demonstrates using a switch statement to replicate a form of pattern matching in JavaScript.

In this interactive article, Kyle Shevlin explains a seldom used feature of JavaScript: generator functions. Learn the basics of how they work and how they might be useful.

Having a component that receives multiple props that are booleans can be a sign of a code smell. It's likely your component now contains impossible states that should be avoided. Moving those props to a single prop that receives an enumerated set of strings is a better approach.

The React.useEffect hook can be challenging to get right. One way to easily mess it up is to incorrectly use the dependency array. This post demonstrates how to think about it correctly.

In this blog post, Kyle Shevlin teaches you how to build tic-tac-toe in React using CSS grid and the `useReducer` hook.

We can use the top level `React.memo` API to avoid unnecessary rerenders of our function components in a React app. In this post, Kyle Shevlin will teach you how it works.

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.

Learn the three ways to manage state in React applications from Kyle Shevlin

In this post, Kyle Shevlin demonstrates how to decouple the logic of a React component from its user interface through the use of a custom hook. This enables the encapsulation and reuse of a concern, contextualized for the particular use case.

In this post, Kyle Shevlin explains how to store and update infinite state data in a finite state machine built upon the useReducer React Hook.

In this blog post, Kyle Shevlin walks through an experiment in writing a state machine as a string of text following test driven development.

In this post, Kyle Shevlin demonstrates a way to make React's `useReducer` hook behave like a finite state machine.

Here are some guidelines for creating and using state machines with the XState library with React.

Understanding cyclomatic complexity and how to manage it can level you up as a programmer

React components are _just_ functions. We can use the same patterns on components that we do on other functions, including recursion. Let's make some recursive components.

We learn how to use booleans early and often, but they are not the right tool for the job sometimes. A enum may solve our problems with greater precision.

I started the Second Career Devs podcast in 2017 with a lot of excitement and hope. Let me tell you where my head is at now on the project

Learn how to render an object in React by using JSON.stringify

Learn how I added Algolia Search to my Gatsby site or blog. It was pretty easy and a lot of fun.

A graph data structure is a useful way to model many things in the real world. Take a look at data visualizations that show this.

In this article, Kyle Shevlin teaches us how we can simplify the conditional logic of our code by refactoring it without `else` blocks.

You have an imagination. I am asking that you use it.

Functional composition is the act of taking the output of one function and passing it directly as the input to the next function.

Pointfree programming is a style of programming that favors passing the function itself as an argument rather than using lambda functions to operate on data. It focuses on the composition of functions rather than micro-managing your data.

Learn about how argument order impacts the composability of higher order functions.

Learn what "partial application" is and why it matters in functional programming.

Learn what currying is, how to make curried functions, and what the pattern is useful for.

Learn what "immutability" is and why it matters in functional programming

Learn what a "pure function" is, why they are important for functional programming, and how they can improve the quality of your code.

Learn what a "higher order" function is and why they are important.

I released a course on Egghead about functional programming. Check it out.

People express FOMO regarding our regular gatherings for drinks and conversation here in Portland. I think you can start your own gathering and here's why.

Kyle Shevlin breaks down the steps it took to get Firebase, Gatsby, and Netlify to work for the new "beard stroke" post-liking feature of his blog

Sometimes seeing is understanding. XState provides a visualizer tool that allows us to see our state machine as a graphical interface, and not just code.

How do we create a state machine using the XState library. In this article, we will create our first state machine using XState.

What is a state machine? A state machine is a way to represent all the enumerated possible states and events of a given system. In this article, we will create a rudimentary state machine and interpreter in JavaScript.

Learn why I recently had to abandon my WordPress setup and opted for Gatsby instead.

Sometimes it's important to hold two or more competing thoughts at the same time.

A discussion on the role of timing in your job hunt.

Here are some of the best tips I have on making your next web developer job hunt more successful.

In this post, Kyle Shevlin shares several tips on how to make a career change into web development and software engineering

Allow me to share a deeply touching moment I shared with a local cat recently, and how I will never forget the encounter.

In this article, Kyle Shevlin explains how he made the career change from being a pastor to a programmer.

A not-so-small rant about why two JavaScript frameworks can feel so vastly different.

Learn how to write a JavaScript DOM element factory function from scratch.

A recap of my mock interview experience with a Googler.

Learn how to make your own data chart with React and SVG without using a data visualization library.

Learn how I stumbled my way into discovering normalizing Redux state.

Announcing a new library, ShevyJS, a vertical-rhythm library for CSS-in-JS.

Learn how to use ternaries for conditional rendering in React.

I recently asked developers what was most important to them. The results were a bit surprising.

Renderless components are a way to use React's component model for side effects and logic that isn't mapped directly to your UI

I recently learned a lesson eerily similar to a Greek paradox.

Read along as I solve a tricky problem with Array.reduce()

Learn how to dynamically render React components based on a discriminated object property.

Learn how to show a loading indicator for function components in React.

Learn how to use client-only libraries in server-side rendered React apps.

Learn how we can store a previous state as a "snapshot" in Redux.

A short rant on why forcing users to open links in new tabs is silly.

Learn a quick JavaScript tip for opening external links in new tabs.

Learn how to use `d3`, the popular data visualization library.

Learn how to use logical AND and OR in bash.

Learn some of my favorite git aliases.

Create a bash alias that copies your `pwd` to your clipboard.

Make a bash alias to make a new directory and change to it in one command.

A tiny rant about `target="_blank"`.