“Help” Doesn't Mean What it Meant
A recent exchange with a colleague made me feel something very poignant. Here's a short essay expressing my feelings.
Kyle Shevlin's Blog RSS Feed
Kyle Shevlin is a software engineer who specializes in JavaScript, TypeScript, React and frontend web development.
Latest posts
<code>AsyncData</code>
We've talked about enumerating states. We've talked about using state machines. Now let's talk about functors. For managing state, that is.
Nothing is Something
If this, do that; else, do nothing. A programmer's story as old as time. But what if doing nothing is actually doing something. And what if our code can get a lot simpler by recognizing that?
<code>data</code> Attributes for Testing
Sometimes our tests are too imperative and know too much about the implementation details of the component. Learn how `data` attributes might be able to help you out.
Prefer Gaps To Margins
Prefer using gaps to margins when it comes to your component layouts.
“Refactor” is Not a Scary Word
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.
Fun Coding Exercise: Pyramid Slide Down
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.
Algorithm: Sliding Window
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.
The Consciousness Lottery
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.
How I Built “Test Your Focus”
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.
What ADHD Feels Like to Me
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.
Prefer Explicit Maps
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.
My <code>git</code> Workflow for Refactoring
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.
Never Call <code>new Date()</code> Inside Your Components
Calling impure functions with side effects like new Date() or Math.random() is a disaster waiting to happen. Learn what to do instead.
Composable Flourishes
Learn how we can use composition to create subtle, pleasant animations that can be used on any component in our applications.
Prefer Alphabetized Object Keys
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 Design and Composition
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.
Design System Retrospective
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.
Prefer Noun-Adjective Naming
English grammar puts the adjective before the noun, but when it comes to file or function naming, I think you should do the opposite.
Prefer Multiple Compositions
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.
<code>align-items: center</code> vs. <code>text-align: center</code>
Learn when to use align-items: center or text-align: center in Flex columns.
Creating a React Native “Curved Bottom Bar” with Handwritten SVG
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.
Tailwind “Minimum Full Height” Layout
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.
Make Checkpoint
Learn how to create a simple Makefile to quickly create a "checkpoint" in your Git history when you are rapidly prototyping.
Agathist VSCode Themes
I created a VSCode theme inspired by Agathist's brand colors and released it as a VSCode Extension.
Two Types of Composition
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 Q&A
Agathist is my new software development firm. Learn about it in this self-directed question and answer post.
No Outer <code>margin</code>
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.
Type <code>TODO</code>
In TypeScript, sometimes any is our best option, but we can go a step further and give ourselves a little more signal than that.
Wrangling Tuple Types
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.
UI Composition
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 Prevents Bad Things... and Good Things
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.
Quit Your YAP-ing
Learn when adding yet another prop to a React component becomes a problem and how to fix it with composition.
Compound Components
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.
Context, Composition, and Flexibility
Using React Context and component composition, we can achieve both flexibility and different functionality
Algorithms: Insertion Sort
Learn the insertion sort algorithm in JavaScript and why it is slightly better than bubble sort
Algorithms: Bubble Sort
Learn the bubble sort algorithm in JavaScript, and why it is such a bad way to sort items
JSX was a Mistake
JSX makes writing UIs feel really familiar for frontend devs, but it can obfuscate a key detail of which we should remain aware.
Capture Phase Event Handling in React
Did you know you can declaratively handle events in the capture phase in React? I sure didn't until recently. Let's learn how.
Why Use <code>useReducer</code>?
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.
Patterns for Functions with Conditionals
Let's explore two common function patterns for managing the complexity of conditional code.
Updating State with a Component
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.
Conway's Game of Life
Learn how to build Conway's Game of Life with JavaScript, React and the simulation pattern.
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.
The Wrapped State Setter Pattern
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
Parametric design is the process of using adjustable parameters to modify and influence a design. Add it to your box of tools.
The “Folded Code” Test
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.
My Course Platform
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.
How I Would Use a UI Library
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.
What is a Factory Function?
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.