Kyle Shevlin (he/him)

@kyleshevl.in

13944 Followers 863 Following

Software engineer. Skilled with React, Astro, JS/TS, and frontend. Expanding my skills with Postgres more & more these days. Scratch golfer. AuDHD. https://kyleshevlin.com

About 150 sq ft of LVP flooring down.

8 piles of LVP flooring “boards”.

The floor of our downstairs covered with a thin layer of insulating foam to be a thermal break from the cement slab to our feet.

A somewhat colorful table of information related to a round of golf

Tali laying across my belly and lap, cuddling

My big chonky cat in my lap in a lawn chair outside

Me, holding the winners plaque.

type Variant = 'featured' | 'user-pick' | 'limited-time'

type Props = {
variant: Variant
// the rest
}

// I'm hiding a lot of details, but essentially we have a condition
// spreading out into many places. As this grows, this gets harder to
// understand, and you need shotgun surgery to update changes to
// conditions, updating every branch the condition creates.
function AdComponent({ variant, ...rest }: Props) {
return (
<div className={decisionHereAboutClasses(variant)}>
<div>
{decisionHereAboutLabelWords(variant)}
</div>

<div>
{decisionsHereAboutContentEtc(variant)}
</div>

<div>
{decisionsHereAboutActions(variant)}
</div>
</div>
)
}

// Move the decision up, condition assessed in a single place
// This makes one component per branch, and no downstream branches
// Changes can happen in the specific components without needing to
// impact other variants
function AdComponent({ variant, ...rest }: Props) {
switch (variant) {
case 'featured': return <FeaturedAd {...rest} />
case 'user-pick': return <UserPickAd {...rest} />
case 'limited-time': return <LimitedTimeAd {...rest} />
default: return <BaseAd {...rest} />
}
}

The cured concrete floor with swirls of different shades of gray

My cat tali napping in some ground cover ivy (non poisonous)

Me, holding my follow thru after a golf shot

My backyard, the grass covered with clover flowers

A 6 pack holder made of wood scraps and sisal rope.

The big cedar storage chest I built that doubles as bench, in the sun on my patio.

Bottom slats added. Gaps will allow airflow which should prevent anything like mold and mildew from starting (I live in a rainy climate)

Side panel dry fitting. Spacer blocks to figure out toe kick height.

Supplies: concrete mic, rebar, gravel and a tamper

Tali (cat) standing on my lap as I pet her

Table with the headings Score, Fairway, Green, Putts

My cat and I chilling in my backyard, laying in the grass.

const nextTees = changes.tees.map(changedTee => {
const currentTee = current.tees?.find(t => t.id === changedTee.id)

return {
...currentTee,
...changedTee,
}
})

A knockdown textured wall I did by hand with some dramatic shadowing due to a down light.

Kyle performs Olivia Dean’s “So Easy” on stage with an acoustic guitar

One of my git commits that says "I will not be told by claude to add lang=scss when it's unnecessary"

Strengths of Bottom-Up Thinking
Bottom-up thinkers often excel at identifying complex patterns that may not be immediately obvious to others. Their tendency to gather comprehensive information before drawing conclusions leads to thorough and nuanced analysis. By approaching problems without preconceived frameworks, they frequently discover novel solutions and make unexpected connections between seemingly unrelated concepts.

A div with the id of "app" and the class of ".app" and also a class of "app--app". I have no idea why.

Two sides that hook into my French cleat wall with dowel rods between each, holding 6 rolls of filament. 2 guitars hand from French cleats below.

Aloy looking at 3 sun wings sitting in air. Clearly a bug in the video game.

I explain that I wanted a custom spatula that fit the curve of the inside of a bucket and 3d printing made that possible.

Selfie, no mask, still covered in dust, beard matted from the mask, red spot on my nose from the pressure of the mask.

Selfie, but I have a respirator on and safety goggles, and my entire face mask glasses and hat are covered in drywall dust.

A CAD rendering of the adapter. Basically a tube that changes width.

The output of a git command showing all my unmerged branches and how long its been since I worked on them. One is nearly 5 years old.

discriminated-unions - 6 months ago - Kyle Shevlin
prefer-immutable-methods - 11 months ago - Kyle Shevlin
tree-traversal - 12 months ago - Kyle Shevlin
optional-chaining-post - 1 year, 1 month ago - Kyle Shevlin
better-messes - 1 year, 3 months ago - Kyle Shevlin
analytics-stuff - 1 year, 5 months ago - Kyle Shevlin
maze-algo-1 - 1 year, 5 months ago - Kyle Shevlin
twitch-overlays-post - 1 year, 9 months ago - Kyle Shevlin
further-thoughts-on-devin - 1 year, 10 months ago - Kyle Shevlin
dueling-pong - 1 year, 11 months ago - Kyle Shevlin
astro-conversion-post - 2 years ago - Kyle Shevlin
transducers - 2 years ago - Kyle Shevlin
guidelines-for-component-based-ui - 2 years, 2 months ago - Kyle Shevlin
merge-sort - 2 years, 11 months ago - Kyle Shevlin
upgrade-the-rest - 3 years ago - Kyle Shevlin
mutation-not-a-sin - 4 years, 1 month ago - Kyle Shevlin
functions-are-lazy - 4 years, 4 months ago - Kyle Shevlin
component-composition - 4 years, 8 months ago - Kyle Shevlin
how-to-generate-a-maze - 4 years, 9 months ago - Kyle Shevlin

A spiral featherboard on my table saw. A featherboard is a device with flexible fins that are designed to keep side pressure on a piece of wood as it runs through the blade.

// Linear recursion - build a stack of calls
function map(items, fn) {
if (items.length === 0) return []

const [first, ...rest] = items

// Notice we can't return the result of this function
// without the result of another map function call
// That's the stacking. Takes up a lot of memory.
return [fn(first), ...map(rest, fn)]
}

// Iterative - use a helper function with accumulator
function map(items, fn) {
return mapLoop(items, fn, [])
}

function mapLoop(items, fn, acc) {
if (items.length === 0) return acc

const [first, ...rest] = items

// Notice we're just calling the function again with
// new values. We're not waiting on its result to help
// formulate the result of this function call.
// Takes up (roughly) the same amount of memory no matter how many calls
return mapLoop(rest, fn, [...acc, fn(item)])
}

A screen shot of my progress through the Exercism Gleam course. I'm 49.2% of the way through.

Paneling with nickel gaps running vertically around an inside corner in an unfinished room.

A plastic container the perfect shape for holding those wide angular basket coffee filters.

My dryer fully open, drum exposed,

The LEGO Tallneck fully constructed.

A Lego Tallneck from Horizon Zero Dawn and a lighting kit next to it

class Maybe<T> {
/**
* We won't go over the full implementation, but basically Maybe holds
* an optional value. If it's not null or undefined, it's a Just, otherwise
* it's a Nothing.
*
* The way we do something with the value is to pattern match. If it's Nothing,
* do this function, if it's Just, do something else with the privately held value.
*/
match<J, N>(
{ Just, Nothing }: { Just: (value: T) => J, Nothing: () => N }
): J | N {
// You can imagine how `isJust` is implemented
return this.isJust() ? Just(this.#value) : Nothing()
}

// But then you get to start implementing methods by using `match`, like `map`
map<U>(fn: (value: T) => U): Maybe<U> {
return this.match({
Just: value => Maybe.of(fn(value)),
Nothing: () => Maybe.Nothing()
})
}

// Or filter
filter(predicate: (value: T) => boolean): Maybe<T> {
return this.match({
Just: value => (predicate(value) ? this : Maybe.Nothing()),
Nothing: () => this
})
}

// or something that unwraps the value with a default
getOrElse<U>(defaultValue: U): T | U {
return this.match({
Just: x => x // notice this is the identity function,
Nothing: () => defaultValue
})
}
}

A closer look at the code from the full example a few posts prior. Shows how the then of the promise we setState to AsyncData.Done(Result.Ok(data)) and similar in the catch, Async.Done(Result.Err(error))

Then shows how using pattern matching makes it easy to know which state results in what.

type State<T> = { status: 'not-asked' } | { status: 'loading' } | { status: 'done', value: T }

The union mentioned in post + three setStates, one to hold the union and two others to hold the data and the error

import { AsyncData, Result } from 'some-fp-lib'

function UserProfile({ id }) {
const [state, setState] = useState<AsyncData<Result<User, Error>>(
AsyncData.NotStarted()
)

useEffect(() => {
function fetchUser() {
setState(AsyncData.Loading())

fetch(`/api/users/${id}`)
.then(res => res.json())
.then(data => {
setState(AsyncData.Done(Result.Ok(data))))
})
.catch(err => {
setState(AsyncData.Done(Result.Err(err))))
})
}

fetchUser()
}, [id])

return state.match({
NotAsked: () => null,
Loading: () => <div>Loading...</div>
Done: (result) => result.match({
Ok: data => <div>{JSON.stringify(data)}</div>
Err: error => <div>{error.message}</div>
})
})
}

a flatten() method on a Maybe class. The code says:

flatten<U>(this: Maybe<Maybe<U>>): Maybe<U> {
return this.flatMap(identity)
}

a 3d model of a phone or tablet holder that hooks onto the side of a shelf. It's angled at 20 degrees to give the phone a nice tilt so it can be easily viewed while resting. it has a big hole in the back to reduce the necessary material for print and a hole in the bottom of the base to allow a cord to pass thru for charging.

My 10mm socket next to my cancelled print for holding the socket. The 10mm socket is clearly larger than the hole it was meant to fit in.

a 3D design with 9 holes from sockets 10-19mm large

A 4x8 gridfinity baseplate with some containers and organizers on top of it inside of a drawer from my workbench.

A puzzle depicting a stand of sequoias in Yosemite.

A partly finished puzzle depicting the Yosemite national park

An under desk mount for a PlayStation controller.

Tali sitting in front of the 3d printer watching its calibration attentively.

A pull out bed with bedding on it, next to it are two night stands with lamps. A rug sits under and around the foot of the bed. Zooming out, the walls clearly are just bare drywall and drywall mud, the floor a cement slab with various colors from years of stuff being dropped on it and embedding into the concrete.

Two identical night stands made out of plywood, a rudimentary box with tapered legs on the side.

One angle of my room showing the lower shelf, how it wraps around the perimeter of the room.

Scrolling a set of pet pictures left and right