CryingPotato

When You Don’t Have Docs, Look at Tests #

Jan 13

Anytime you do something off the beaten path in the world of software, you have one of two choices:

• reverse engineer the base concept from a couple of RFCs and a reference implementation
• find a couple of libraries that do exactly what you want, but are poorly documented

As a concrete example, I was trying to figure out how you connect to the Astro LSP locally. I started off by reading the LSP specification, but quickly got bogged down by details around how to give requests. I learn best with experimentation, so I moved on to finding a library I could use to connect to LSPs locally. I found ts-lsp-client and pylspclient, both of which are sparsely documented. The VSCode reference implementation looked way too complex. And then I realized both those libraries had tests, and the tests had a working way to connect to those LSPs!

My original goal was to connect to the Astro LSP, so sticking to the pattern above, it’s time to take a deep dive into the Astro LSP test suite.

Building DevTools-Like UI in React #

Dec 30

I’ve been working on a new DevTools experience I’m calling Tailor. I was inspired by Tailscan and wanted to understand how I’d build a clone of it as a starting point.

• The most annoying interaction problem I faced was when/ how to activate and deactivate DevTools. Tailscan does this super well, you have a button to activate/ deactivate DevTools. When you click on an element the toolbar remains but the hover behaviour is disabled. When you click anywhere outside the toolbar again you reactivate the hover behavior.
• Make the toolbar follow the cursor for a more natural feeling placement instead of making it relative to the element you place.
• When you add and remove mouseover listeners for document inside a React component, make sure you wrap the callback function you pass in inside a useCallback. Otherwise React creates new functions each time the component re-renders and you won’t properly remove the event listeners.
• pointer-events: none is your best friend for the overlay/ toolbar UI you build.
• css-box-model is a great package to do math for you.