mikeup.church RSS feed

Kitchen remodel

Mon, 21 Oct 2024 17:42:00 GMT

Before / After

My wife and I purchased our first house 1 year ago. The kitchen was nice enough looking on the surface. However, there were some usability issues that we needed to address. And like any good HGTV show, we had a time constraint (baby on the way!)

Issues

No storage
No trash bin
Stove in corner - cannot open oven door without smacking cabinet handles 🤦‍♂️
Fridge in corner - cannot fully open the door
No range hood

Solutions

Ikea will solve all our problems. Or, at least, their web-based kitchen planning tool will help us out. Below, you will find iteration number 6,253 😮‍💨

The master plan

Should be straightforward, I just have to move every appliance and the kitchen sink. I started by ripping everything out. Interesting to find burgundy walls and checkerboard linoleum flooring.

Hulk smash

The cabinets were ready to assemble Lowe’s brand. I ended up painting them Benjamin Moore “Manchester Tan”. I converted the lower cabinet to the left of the stove into a slide out trash bin. This was a huge upgrade for us.

I hired an electrician to wire everything. He wired low voltage wires to all the right spots ahead of time and all I had to do was buy the LED strips and a driver and hook it up. Doing it myself helped saved a fair bit of money.

Storage galore-age

As usual, I handled the plumbing. Luckily I had full access to a wall on the backside of the kitchen. I had to move hot/cold for the sink, reroute the sink drain, and add a hookup for the fridge. For the sink drain, it is now hooked up to an existing vent I found in the wall. Previously, some remodeler had just S-trapped the drain into the floor.

Business in the front, party in the back

I cut and painted MDF beadboard for backsplash, and fastened it to the studs with brad nails. The butcher block counter was also purchased from Lowe’s.

For appliances, we actually love the fridge and dishwasher from LG, but hate the stove from GE. The build quality is extremely poor - we had to get the touch pad controls replaced immediately (under warranty). Also, the stovetop is crooked to the body and the drawer is bent.

The last thing I did was cut a hole in the wall and vent the microwave range hood outside.

Whole house water filter (hydrogen sulfide)

Sun, 03 Dec 2023 17:42:00 GMT

The finished product :)

My wife and I purchased our first house this year. A couple of months after moving in, we started to notice a rotten egg odor coming from our water. We had a water test done before purchasing the house, so it left a bad taste in our mouths. Thankfully, only metaphorically.

Diagnosing the source of the stink

I called a local well company and then employed the scientific method in the mean time. The smell was coming from both hot and cold water - this ruled out any bacteria growing in the hot water heater. Also, we have a tankless water heater, so if there was any doubt before, it definitely wasn’t the culprit.

Next item of investigation - water softener. Could it be adding the smell? Let’s check the water from the spigot in the basement that is just after the water enters the house from the well. Verdict: stinky.

Ok, so if the well water smells, how is it that we made it a couple months before experiencing this unpleasantness?

For starters, let's "regenerate" the water softener to see if it is able to remove the smell when it's in tip-top shape. A water softener flows water over resin beads to remove unwanted minerals. Once the resin beads are sufficiently "gunked up", the regeneration cycle of a softener backwashes a bunch of salty water over the resin beads to clean them and then dumps it outside the house.

After regeneration, the egg smell in the water is gone, but only for a day or two. Interesting. But that means this wasn't what was stopping the smell for the first couple months. And on top of that, I definitely don't want to regenerate my softener every single day - that would waste an incredible amount of water.

It was around this point where the well company arrived. They agreed with what we know so far, and they suggested that perhaps the small cartridge filter was enough to remove the smell for a bit.

They did a water test from the well water directly - before the softener. Because we had a test from when we purchased the house, we could compare before and after the softener. Good to have readings from both ends. Ultimately, the iron readings were on the lower end, so they were looking for the presence of manganese, but ultimately, the test came back negative.

The conclusion from the well company was that our water contains Hydrogen Sulfide gas (H2S) - something that wouldn’t show up in a test. This is because the gas will immediately begin separating from the water upon collection.

It’s something we can easily verify by collecting water in a drinking glass and then letting it sit out. The gas will remove itself from the water over time and the smell will eventually go away.

The well company suggested an aeration system. After a bit of research, it’s not difficult to purchase and install - I’ll give it a shot.

Concocting a plan

To begin, let’s take a look at the current plumbing setup, which is where water enters from the well, gets pressurized, goes through a sediment filter, and then a softener.

Initial plumbing setup.

It’s a bit of an odd rollercoaster loop. And it’s pex and copper, with some interesting transitions. It’s like the rollercoaster is half wooden track, half steel track - I wouldn’t ride it.

I think there’s a few key things we can improve with this re-pipe:

Better layout
- Easier to understand
- Easy access to sediment filter for changes
- Saves us floor space
Pex A instead of pex B + copper
- Pex B fittings can reduce flow rate
Better sediment filter - why not?
- I went with the Pentair Pentek Big Clear - Don’t forget the cartridge, wrench, and mounting bracket! (We’ll need to mount it since pex isn’t rigid)
Add an off-shoot for garden hose bib (We have none!)
And of course, we’re adding an aeration filter

So after a couple of (even more complex) iterations, I came up with the following plan.

The master plan.

It shouldn’t be too bad! Although it did take me a bit of time to figure out which fittings I needed to make the connections between pipes/devices. For tools, I needed a pipe cutter, and a pex A expansion tool. I went with the manual one (used from eBay) as I’m not planning to become a professional :)

Plumbing

To minimize down time, I’ll be installing as much as I can alongside the existing system, and then doing the switch over at the last possible minute. The first step is to install the new sediment filter. This meant adding something to mount it to - some scrap wood I had from the shed build. After that, we have the water shutoff valve, which also needed mounting. I got a valve with mounting holes specifically for this purpose.

Installing new sediment filter behind old.

It takes some muscle to use the expansion tool. I’d definitely get the electric one if I was doing a whole house.

Next up, we’ll tee off for the hose bib. I left extra pipe just in case, since we’ll be installing the spigot in the spring. I already had purchased the Sharkbite fitting and the pex B pipe for a hose install far before I planned this bigger project, so it made sense to use that here, despite it not being ideal. It also made it easier for me to transition between these two types of pipe, and so I didn’t have to buy any pex B crimping supplies.

I also piped two 90 degree transitions into and out of the new aeration filter.

Hose bib and new filter installed!

Next, I piped from the new filter to where the softener would be. The softener uses a different valve assembly from the new filter - Clack instead of Fleck, so I was able to find these fittings, which handled the 90 degree transition into and out of the device. On the Fleck, I had to plumb the 90 degree transition myself - not bad at all, but something I had to plan for.

The rest of the piping above was fairly straightforward. I was able to put two 90 degree bends instead of 90 degree fittings - bends are better for flow.

Rest of plumbing is in place - ready for switch over.

I cut the old pex/copper piping out along with the old sediment filter. Removing the fitting on the well outlet was difficult - I had to buy I pipe wrench for that (New tool! 🎉). Also, it’s crazy to see the difference in fitting size.

New pipe wrench and comparison of fittings.

And just like that, we’re done!

Project completed.

Useful git commands that I always forget

Wed, 29 Nov 2023 12:12:03 GMT

Here are a couple of git commands I always seem to forget. I’m writing them down, so I can stop googling them every time (doubt). You probably have these commit-ted to memory, but my brain refuses to stash ‘em.

Basic but essential

Pull changes and rebase my commits on top

No merge commits needed - keeps history looking tidy.

git pull --rebase origin main

Interactive rebase for the last 2 commits

git rebase -i HEAD~2

Undo the last commit but keep the changes

git reset --soft HEAD~1

Quickly stash/un-stash changes without a message

I have to jump branches a lot at work.

git stash
git stash pop

See what I’m about to commit

Just gotta be sure…

git diff --staged

Create a new branch

There’s other newer ways to achieve this, but this is the one command here that actually lodged itself into my brain.

git checkout -b [branch_name]

For when you’re feeling ~fancy~

Reset to a better state

Sometimes you need to blow away your changes.

git reset --hard HEAD

And sometimes you messed up your local branch and want to get it back to the state it’s at on the remote.

git reset --hard origin/[branch_name]

Clean up references locally that are gone from remote

git fetch --prune [remote]

`git revert [commit-hash]`

Undo the changes in a commit

Create a new commit, reverting changes from the specified commit. It generates an inversion of changes.

git revert [commit-hash]

Grab a specific commit from another branch

git cherry-pick [commit-hash]

Pray you don’t have to use these

Show a log of all reference changes

Lifesaver when you’ve really messed up and need to recover a lost commit or branch. Is it ref log or re-flog? 🤔

git reflog

Start a binary search

Finds which commit introduced a bug.

git bisect start

Shed build

Tue, 21 Nov 2023 17:42:00 GMT

My wife and I purchased our first house this year, built in 1795. There is a dirt basement and a detached barn that can only be described as “hanging in there”. Suffice to say, we have no storage space. However, we found a concrete pad near the driveway underneath years of leaves and decomposing firewood - a blank canvas - perfect for a shed?

The plan

The plan was simple: Buy a shed. The concrete pad was about 13’ x 13’, so a 10’ x 12’ shed would fit nicely. After too many hours of research, I found a couple options:

$2000 - A “build-it-yourself” shed kit from the hardware store
$4500 - A fully built shed
$10 - A shed plan

Option 3 it is! We can hopefully build it stronger, cheaper, and prettier anyway. Thankfully, my father has the knowledge and tools to make this project possible.

A render of the shed we are aiming for, but we'll be mirroring it!

Wall framing

I ordered the lumber online from Home Depot. Despite not picking it myself, all the pieces were straight and usable.

The shed plan included instructions for building the floor, which we didn’t need thanks to our trusty concrete. We started off by making sure the pressure-treated base was square and laid on foam sill sealer to keep any water out.

You gotta have a good base to build on.

We then built and raised the first wall, which will have a 6’ x 6’ double door opening that I will be able to drive my mower (and snowblower) in and out of. We angled a 2x4 and staked it into the ground to prop the wall and maintain square.

Next, we built the “rear” wall - it faces a retaining wall, so will not be seen much at all. I intend to store firewood on a rack beneath the overhang of the roof. Since the shed is a slightly smaller footprint than the concrete pad, we cheated it “forward” a bit to leave more room at the rear.

Two walls - it's an open concept shed.

The next wall was another simple one - no doors or windows to worry about. Couldn’t say the same for the final wall… It’ll have both a window and a door. The plans I purchased weren’t super clear for the spacings on this wall, so it took a bit of time to try to figure out what would end up looking most natural.

We've been framed. Window will be on left and door on right.

Roof framing

In this chapter, my dad convinces me to transcend the plans. We decided it’d be the best use of space to add an attic. To do this, we pitched the roof to be steeper and redesigned the trusses to be open in the center. The plans called for a lot of vertical support pieces, which the boss (dad) deemed unnecessary if we beefed up some of the other pieces.

The roof truss plan, with too many bits and bobs.

My dad was proud of his “forks” he made to hold the ridge beam in just the right spot 🤌. We then added the rafters, tied them to the ridge beam with metal brackets, and fastened them to the walls with hurricane ties. For good measure, we also added collar ties across connecting rafters. Finishing the roof frame allowed us to put a tarp over the whole structure to keep it - and the rest of our precious lumber - dry!

Roof framed. And tarped.

Roof sheathing and window framing

With the roof fully framed, it was time to add the sheathing and underlayment. The plans also called for purlins - long, thinner pieces of wood stretching across the rafters. We decided it was unnecessary - the sheathing should provide enough rigidity and support.

My father-in-law and I handled all of the rest of the roofing. We used OSB (Oriented Strand Board) and laid it the long way parallel to the rafters, which allowed us to do less cuts overall and work quickly from left to right. Unfortunately, I don’t have any photos of the sheathing itself. As the one climbing all over the roof, I almost wished we hadn’t increased the pitch - it was definitely a steep one.

Next, we rolled the underlayment on from bottom to top and stapled it down. And with that done, we said goodbye to our tarp - the roof is much more water-resistant going forward.

Sheathing and underlayment complete. We put the "roof" in waterproof.

I also framed all the windows at this time. In the picture above, the window on the front has been fully framed. The transom windows, which will be above the double doorway and in the same place on the opposing wall, were framed next.

Let there be light. Transom window frames.

Walls (part 1)

The plans called for T1-11 siding, which is pressure treated and slots together easily. I think because we skipped building the floor, we ended up having to trim each one shorter, but it ain’t rocket science. We installed the siding right over our door and window openings and used a reciprocating saw to cut them out. The cut-outs will be used when building the doors.

Siding covering our window and door holes.

Finishing the roof

I decided to go with a green metal roof. It will look good with the gray metal roof on the house and it will last a long time. We put drip edge on the ends, installed all the metal panels, and fastened on the ridge cap. This type of metal roof uses screws with rubber washers to keep water out. The panels were the perfect length, but for the width, we had to cut one panel in half to use to finish off each side. The metal roof installation was the hardest part - moving around on the slippery metal was awkward.

Metal roof 🤘

Walls (part 2)

The rest of the walls were installed and I also installed the window. I waterproofed it as best I could, taping from bottom to top.

The rest of the walls.

Meanwhile, my dad built the doors in his shop. The plans said to use 2x4s for the trim (and structure), but we decided to build a frame on the back and trim the door nicely. He did a test fit while I finished the triangular upper walls and installed the transom windows.

Then we added trim to the doors and hung them. I used these hinges and these locking handles. This is the moment where it got really exciting - it was starting to look like a finished shed.

Also, you’ll notice I made some cuts on the ends of the roof rafters to prepare for roof trim and the soffit on the under side.

Doors trimmed and hung. Transom windows transomed.

Priming

You may have noticed - winter is coming, so I wanted to get everything primed in order to protect it. The siding is pressure-treated, but the trim definitely needs the protection as soon as possible. Also, we’ll be going with a white paint, so priming it means we’ll get to see it in white.

Before that, it’s important to note that we added some aluminum Z channel along the bottom of the siding, to protect it, and the frame behind it, from moisture.

The priming process.

The priming process was a bit slower than I expected. The T1-11 siding was quite “thirsty” - I ended up using 2 gallons of KILZ 2 All-Purpose Primer. I used a roller for the siding, and a brush for the grooves in the siding and for the trim (I bought a kit like this one).

Finishing touches

To wrap up, we added soffits and finished the trim on the transom windows. Not much more to say!

Soffits and trim. So close.

Unfortunately, dirt was splashing up onto the siding, so before I could paint it, I had to dig a shallow trench around the perimeter of the concrete, add a border of edging stones, lay weed barrier, and fill it with gravel.

Gravel border and mostly painted.

Fixing lawn mower spindle

Thu, 02 Nov 2023 17:42:00 GMT

I have a John Deere D140 from 2003. While mowing my lawn, I hit a small rock with one of the blades. All seemed fine and I continued. The next time I started to mow, I heard this knocking, metal-on-metal noise. I immediately stopped and assumed the blade had broken to a point where it was nicking the deck.

The diagnosis

So I bought new blades, a breaker bar, and a 15/16 socket. I borrowed some RhinoRamps, so I could get under the mower deck easily.

I drove the mower up onto the ramps, unplugged both spark plugs, and took a look at the blade that was making the noise. What I saw was a bit more than I anticipated - the spindle assembly had started destroying itself - the metal housing was stripping off.

The damaged spindle.

There are 4 bolts that hold the spindle assembly to the mower deck. When I smacked that rock, I had sheared one of those bolts and the entire assembly became unstable, violently rocking itself to death. Looks like I would have to replace the whole spindle.

The sheared bolt location.

The fix

As any project goes, we have some scope creep. The plan now was to remove the mower deck and replace all 3 spindles, blades, and the belt. It’s my assumption that the belt and blades are originals from 2003. The belt appeared to be a couple millimeters from snapping.

The mower deck removed.

I disconnected the belt and removed the pins connecting the mower deck to the mower. Deck removal was simpler than I expected. I then removed the spindle to ensure the bolt holes were not rusted through. There was minor wear on one hole due to our issue, but it should be okay. During this process, I broke 3 separate pieces of my old, hand-me-down socket set. Finally, a good excuse to “upgrade” to a set from this century. I got a $45 (59-Piece) Craftsman set, which included some deep drive sockets.

The spindle bolt holes.

In the meantime, I ordered 3 new spindles, a belt, and these spindle reinforcement rings to add some strength, as the area is getting some rust. Hopefully I can have time to address the rust in the spring (doubt).

I also removed the blades and cleaned the underside of the deck. Satisfying.

Before(ish) and after of the underside of the mower deck.

With the new parts installed, I used a (borrowed) grease gun to lube the new spindles, and then it was time to reinstall the deck to the mower and fire it up.

Success! Everything worked great - back to mowing!

My npm cheatsheet

Mon, 23 Oct 2023 17:42:00 GMT

I’ve compiled an overview of the npm commands I use frequently. Mostly so that I’m able to come back here if I ever forget anything. Please note that I’ve chosen React as the “package of honor” for all the examples below.

Initialize new project

It’s nice to pass -y to skip the prompts. If I’m starting a new project, then it’s in the early stages, and I likely don’t know any of the answers to those prompts.

npm init -y

Dependency management

Note: For commands in the block below, you can specify an exact package version like <package>@1.2.3.

npm i react # Install to dependencies
npm i react -D # Install to devDependencies
npm un react # Uninstall
npm up react # Update

Semantic versioning

Packages hosted on npm generally use Semantic Versioning, or SemVer. The dependencies in package.json have version ranges containing notation that can be tricky to remember - these are defined in the table below. Additionally, npm provides this nice SemVer calculator if you ever need to do a sanity check against a specific package.

Range	Description
~version	Approximately equivalent to version. Only accept new patch versions. `~1.2.3 == 1.2.3 to <1.3.0`
^version	Compatible with version. Accept new minor and patch versions. `^2.3.4 == 2.3.4 to <3.0.0`
version	Exact match.
>version	Must be greater than version.
>=version	Must be greater than or equal to version.
<version	Must be less than version.
<=version	Must be less than or equal to version.
1.2.x	`1.2.0, 1.2.1, etc., but not 1.3.0`
*	Any version
latest	Most recent release

List installed dependencies (node_modules)

npm ls --depth=0

List all scripts

npm run
Lifecycle scripts included in <package>@1.2.3:
  start
    npm run build && node index.js

available via `npm run-script`:
  build
    npx tsc
  lint
    npx eslint .

Search npm registry

npm search react
NAME                      | DESCRIPTION          | AUTHOR          | DATE       | VERSION  | KEYWORDS
react                     | React is a…          | =gaearon…       | 2022-06-14 | 18.2.0   | react   
rxjs                      | Reactive Extensions… | =cartant…       | 2023-04-26 | 7.8.1    | Rx RxJS Re
react-dom                 | React package for…   | =gaearon =zpao… | 2022-06-14 | 18.2.0   | react
react-dropzone            | Simple HTML5…        | =rolandjitsu…   | 2022-10-12 | 14.2.3   | react-comp
styled-components         | Visual primitives…   | =geelen…        | 2023-05-06 | 6.0.0-r… | react css

View package information from registry

View general info about a package

npm view react
react@18.2.0 | MIT | deps: 1 | versions: 1335
React is a JavaScript library for building user interfaces.
https://reactjs.org/

keywords: react

dist
.tarball: https://registry.npmjs.org/react/-/react-18.2.0.tgz
.shasum: 555bd98592883255fa00de14f1151a917b5d77d5
.integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==
.unpackedSize: 316.1 kB

dependencies:
loose-envify: ^1.1.0 

maintainers:
- gaearon <dan.abramov@gmail.com>
- gnoff <jcs.gnoff@gmail.com>
- fb <opensource+npm@fb.com>
- sophiebits <npm@sophiebits.com>
- react-bot <react-core@meta.com>

dist-tags:
beta: 18.0.0-beta-24dd07bd2-20211208
canary: 18.3.0-canary-5309f1028-20230517
experimental: 0.0.0-experimental-5309f1028-20230517
latest: 18.2.0
next: 18.3.0-canary-5309f1028-20230517
rc: 18.0.0-rc.3

published 11 months ago by gnoff <jcs.gnoff@gmail.com>

View published versions of a package

Note: I’ve simplified the output here, since React has so many versions.

npm view react versions
[
  '18.0.0',
  '18.1.0',
  '18.2.0'
]

Clear local registry cache

Sometimes, you need to rule out that you don’t have some strange version of a package cached. Especially if your company hosts an internal npm registry that may have been acting up. This command is rare, but I figured I’d include it since I use it sometimes.

npm cache clean --force

nvm: Node Version Manager

Install latest version of node 18

nvm i 18

Start using this version of node for this bash session

nvm use 18

Set version of node for your workspace

nvm alias default 18

List all installed versions

nvm ls

List all published versions

nvm ls-remote

split-diff: How I fumbled my way to a top Atom package

Sat, 20 May 2023 12:12:03 GMT

This post is probably long overdue, but at the same time, it’s not, because I’ve never written a blog post before. Nonetheless, I’d like to share my rather accidental rise to OSS - Open Source Stardom. A metric that is, of course, measured in Github stars.

VSCode usurped the Atom text editor a while ago now, but there was a long point in time where if you wanted to compare two files, you had to go through me. Or, I don’t know, use another tool or something, I guess.

Up and Atom

I was introduced to Atom at my first full-time job. Within a few months of starting, I was pair programming with my team’s Tech Lead, and he showed me this new text editor he had set up to his liking.

I installed these open source packages to improve my workflow, I can write my own JS snippets to do anything, AND I can style any part of the UI with CSS. - Mr. Tech Lead, 2015

I could use skills I had already acquired to customize my work environment. Sold.

Immediately, I changed themes and tried out packages and created JS snippets and wrote CSS. I could bend reality to my will - my power knew no bounds. Yes, that was an outline/boundary pun about another package I wrote.

After about a month, I realized a major issue in my workflow. I use MacOS at work. In order to compare two files, I would boot up a Windows VM just so I could use WinMerge. Kind of like taking a flight because I wanted some peanuts. This realization spurred me to try every single Atom package that dared to mention the words compare, diff, or merge. Nothing quite fit the bill.

My very real search for a side-by-side comparison package.

Hacking the “hackable text editor”

I was floored. How could this free product that just exited Beta not provide exactly what I need? No matter, it should be easy enough to build. I went into research mode. I found a StackOverflow post, which pointed me to a research paper titled An O(ND) Difference Algorithm and its Variations. My eyes glazed over. This was out of my wheelhouse - I could barely vertically align text in a <div>.

But wait, I’ve seen websites where you can paste in the contents of two files that you want to compare. How do they do it? Hold on, what is jsdiff? Some poor soul already did the dirty work! 🎉

I followed Atom’s documentation and slapped together a very bare-bones package. At that time, packages were built using CoffeeScript, so I stumbled a bit in the beginning. To be honest, I never fully boarded the CoffeeScript train (and I eventually refactored much of the supporting logic to JavaScript files), but I can appreciate its successful influence on ES6.

Regarding my new package, things started out slow, but I persevered:

The first commit to show signs of life.

Cool, I’m done. That was quick and easy… Except everything gets misaligned if the number of lines added doesn’t equal the number of lines removed! I needed some way to insert “fake lines”, so related differences remained properly aligned. The only issue was, at the time, there was zero support for what eventually became “block decorations”.

Something isn't quite lining up here...

From the eventual block decorations announcement post:

Users and package authors have come up with hacks that circumvent the problem by monkey-patching DisplayBuffer and the way it constructs tokenized lines.

Guilty 🙋‍♂️

After 3 days of bashing my head against my keyboard, I finally did it. Just kidding, I took some ~~slight~~ heavy influence from a package that Facebook released called Nuclide. Consider me the Robin Hood of side-by-side file comparison.

I also realized how massive of a pain it is to have to scroll both editors separately. Again, I ~~stole~~ borrowed a file from Nuclide, and now the editors’ scroll positions were in sync at all times.

Hello, World!

I named this thing split-diff and shipped v0.1.0.

I couldn’t believe the kind of traction it gained. Something I had created for myself, slowly but surely started racking up a not insignificant amount of downloads. 1,000… 10,000… 100,000… 500,000… and eventually near the end of Atom’s life - 1,000,000 downloads 😱

However, let’s not celebrate too soon. Far before all that, myself, and at least one person in my growing userbase, had run into a problem: Diffing large files completely froze Atom.

I did some research (the Atom API documentation was fantastic) and found my solution: BufferedNodeProcess. This is pretty much what it sounds like — I could run arbitrary JavaScript in a separate Node.js process, write its output to the buffer, and parse it back in the main thread. This freed up Atom to continue actually functioning while I computed the diff results asynchronously. More importantly, I could display a loading indicator if the diff was taking longer than 1 second. MORE importantly, the user now had the choice to be able to cancel out of this painfully slow package, and even proceed to uninstall it!

Goodbye, World!

Addressing the UI lockup was what I consider the last interesting issue that I fixed. Although I did go on to add quite a few more features:

Moving to the next/previous diff “chunk”
Quickly moving a “chunk” of changes from one editor to the other
A bottom bar in the UI to show the number of differences and also provide easy buttons for the aforementioned features
Highlighting which words changed between each line
Diffing with the previous git commit (if available)

Looking back with my current experience level, there was still a lot of performance to be gained. No dig at jsdiff, but it might have been a better idea to call a C/C++ module using the BufferedProcess API. I also always wanted to just use the info from git diff if it was available, but never had the time or ambition to add another fork in the code.

I’ll end this post by sharing the best moment to come out of split-diff. At work, we had started hearing rumors that my company was thinking of creating an internal Atom package to help our frontend engineers with some development pain points. My team’s Tech Lead (the same one who had introduced me to Atom), was included on a demo of the new package. He noticed the package could compare files… and it installed split-diff to do it.

Wait you guys know Mike made that package, right?!

I had poured countless hours into fixing bugs and creating features. I never expected any money or notoriety - I was doing it for free and for fun. Strangely, I was even yelled when things broke. But as it turns out, it literally ended up paying off. That coincidence at work helped advance my career on more than one occasion.

mikeup.church

Sun, 02 Feb 2020 00:00:00 GMT

What is it?

A personal website where I can showcase projects and write blog posts.

The space-themed homepage of mikeup.church.

What did I learn?

I used this as an opportunity to learn Gatsby. I appreciated the opportunity to write my personal website in React, and also wanted the ability to write blog posts using Markdown.

I wanted to improve the design for this latest iteration and spent a lot of time researching, learning, and sketching.

View the source on Github.

Technologies

Gatsby, React, Sass

updash

Sat, 02 Feb 2019 00:00:00 GMT

What is it?

Updash is a personalized information dashboard for my home. It displays helpful things about my life such as commute time, currently playing music, weather, calendar, Instagram photos, etc.

The updash dashboard, displaying personalized information.

What did I learn?

It is built using Smashing (a Ruby-based framework for quickly constructing dashboards) and runs on a Raspberry Pi connected to a monitor. I had to customize many of the widgets as they were either no longer working or did not exist.

View the source on Github.

Technologies

Smashing, Ruby, Coffeescript, CSS

upchat

Fri, 02 Feb 2018 00:00:00 GMT

What is it?

Upchat is a web app heavily inspired by Slack. It supports channels, nested sub-channels, single/multi user direct messages, channel/user mentions, profile pictures, and more.

The messaging interface of upchat.

What did I learn?

This project started as an excuse to learn Node.js, then exploded into an opportunity to learn many more aspects of creating and running a web app:

I began with MongoDB and Mongoose, which I eventually outgrew. I realized what I actually needed was a relational database, so I chose Postgres with node-postgres. Choosing a lower level library like node-postgres allowed me to gain more experience writing SQL queries.
I chose to roll my own user authentication via JSON Web Tokens, as this was another aspect of web apps that I wanted to learn more about.
All server APIs are unit tested. All unit tests run with each commit via CircleCI.
I learned how to set up a production Node.js server running via PM2 on a Digital Ocean droplet with an SSL certificate.

Technologies

Webpack, Node.js, Express, Websockets, JWT, Postgres, React, Sass, Mocha, Chai, CircleCI

split-diff

Tue, 02 Feb 2016 00:00:00 GMT

What is it?

split-diff is an Atom text editor package that compares files side-by-side and highlights any differences. When I began using Atom, it was freshly out of beta and I noticed there was no package available to diff files.

What did I learn?

Developing split-diff provided a great stepping stone into the open source community. Another popular Atom package, git-time-machine, is built on top of split-diff. I worked with the package maintainer to provide an API so that split-diff could be easily used as a dependency. Even though I don’t use the package as much anymore, I have continued to support it, as it still has a significant userbase, and I enjoy contributing back to open source.

I have encountered and overcome a fair amount of interesting problems as I developed split-diff, and maintained it over the years:

Keeping the two editor scroll positions in sync, both vertically and horizontally, and handle files with different line counts and widths. There was, and still is, no provided API for doing this.
Adding empty lines, so the diff chunks stay visibly next to each other, despite having differing amounts of lines. There was no API for doing so at the time, but I was able to refactor at some point to use a newly released API for specifically this reason.
Running the diffing calculations on a separate child process, so the UI wouldn’t lock up.

View the source on Github.

I have also developed two other smaller Atom packages: minimap-split-diff and outline-selection.

Technologies

Coffeescript, Javascript, Less

ET-NavSwarm

Mon, 02 Feb 2015 00:00:00 GMT

What is it?

My senior project at UNH was Extraterrestrial Navigational Swarm. The goal of the project was to create a swarm of robots that would be able to implement any swarming algorithm thrown at it - specifically the Partical Swarm Optimization algorithm. This algorithm would allow the robots to cooperatively search an area to find the lowest altitude.

A rendering of an ET-NavSwarm robot.

To achieve the goal, I was tasked with getting all of the devices on the robot to communicate with one another. The Arduino Mega was used to drive the motors and collect locational data. This data needed to be passed to the Raspberry Pi Model B+ for the swarming algorithm. Then a subset of the data needed to be broadcast to the rest of the swarm in mesh networking mode via Zigbee devices.

What did I learn?

The ET-NavSwarm project was an invaluable experience - we were given the opportunity to visit NASA’s Goddard Space Flight Center and present our research to NASA engineers. We were also given a tour including the Hubble Space Telescope Operations Control Center and the assembly of the James Webb Space Telescope in the world’s largest clean room.

Technologies

Java, C, Google Protocol Buffers

kappafeed

Sun, 02 Feb 2014 00:00:00 GMT

What is it?

Kappafeed is a program that listens in top Twitch.tv channel chatrooms for whichever emoticon the user has selected, and displays all messages in one collective feed. It integrates with Twitch APIs and IRC servers in order to merge the top chat channels into one feed.

I also created a Kappafeed Overwolf app for a contest they were hosting and won a gaming headset. Overwolf app source.

The Kappafeed Overwolf app running over League of Legends.

What did I learn?

I learned a lot about maintaining servers and keeping a service running reliably 24/7. Admittedly, the code for this project got a bit unruly as more features were added and more error handling of edge cases was added. I learned valuable lessons about code refactor and structure for future projects.

View the source on Github.

Technologies

Python, Tornado Web Server, IRC, Websockets, HTML, JQuery, CSS