Detect the intersection of multiple ranges in JavaScript

Published on Monday, June 20, 2022

Recently, while working on a feature for Octo, I had to figure out how to test the intersection of multiple ranges using JavaScript. Specifically, I needed to come up with a performant solution to detect when any text-selection ranges intersected with specific syntax node ranges in the editor. This was a fun problem to work on, so I hope you like the solution.

javascriptmathematicstypescript

Today I Learned (Series)

Print the underlying command whenever you run a Git alias

Published on Friday, June 10, 2022

In a recent pair programming session, someone mentioned that it was a little hard to follow my command line workflow due to my regular use of Git aliases. As someone who enjoys pair programming, I decided to take that feedback to heart and figure out a way to make the experience better for my future pairing partners. I landed on a solution that prints the underlying command of a Git alias any time I run one.

bashgittil

A Practical Cheat Sheet for CSS Flexbox (Containers)

Published on Tuesday, July 27, 2021

In this guide, you will learn how to use CSS Flexbox to manage some common layout patterns.

I originally posted this Flexbox cheat sheet on Twitter, but the response was so positive that I decided to write it up here too! I've made a few updates since the original, and it's become a great resource to share with colleagues.

css

A Guide to Installing the Windows Subsystem for Linux (WSL) and Windows Terminal

Published on Saturday, January 2, 2021

As a developer that typically works on Mac or Linux, you will be disappointed with the out-of-the-box terminal in Windows. Lucky for us, Windows supports a fairly smooth Linux integration called the Windows Subsystem for Linux (or WSL for short). If you are unfamiliar with it, Microsoft has a pretty concise explanation:

The Windows Subsystem for Linux lets developers run a GNU/Linux environment -- including most command-line tools, utilities, and applications -- directly on Windows, unmodified, without the overhead of a traditional virtual machine or dual-boot setup.

This guide is meant to serve as a quick reference for setting it up yourself (as I recently had to do).

bashlinuxwindows

A Guide to Web Development on the Windows Subsystem for Linux (WSL)

Published on Monday, December 28, 2020

This guide assumes you already have the Windows Subsystem for Linux (WSL) 2 installed. If that is not the case, I highly recommend you read through my previous article, A Guide to Installing the Windows Subsystem for Linux (WSL) and Windows Terminal, first. We are going to cover some of the most common web development tools that we need to get up and running, but there might be something missing. If that is the case, please leave a comment below! While I am using my own experience as a foundation, I am happy to amend this article as needed to make sure we cover the most common tools.

bashlinuxwindows

An Introduction to vue-markdown-editor

Published on Monday, December 28, 2020

One of the biggest challenges I faced while building Octo was the markdown editor. When it comes to implementing a markdown text input, there is usually one way to go about it: a plain text input field with an optional preview mode. This approach obviously works, but the experience can be a bit clunky when writing larger bodies of content.

In this article, we will cover an alternative approach that - while being a bit heavier - offers a smoother user experience for the author. This will be accomplished with a standalone Vue component called vue-markdown-editor (MIT-licensed) which was extracted from the core of Octo. This component acts as a plain text input, but it renders headers, syntax highlighting, and images in place. This is especially helpful for overall readability and catching syntax errors without interrupting focus by switching between edit and preview panels. Feel free to try it out at octo.app!

javascriptvue

A Practical Guide to the Web Cryptography API

Published on Wednesday, September 9, 2020

Client-side encryption is a feature I had wanted to implement in Octo for a while now. When it finally came time to tackle it, I was surprised at the sparse real-world examples on the topic. The documentation on MDN is robust, but it requires a lot of jumping around to individual method APIs. I hope this article is helpful for anyone out there looking for guidance.

Note: The Web Cryptography API is asynchronous, so I use the async/await syntax in this article for concision.

encryptionjavascript