Bits and bytes of code

I have several bash scripts that require the remote URL of a Git repository, so a while back I wrote a script to build the URL. I recently rebuilt it with support for SSH host aliases.

For a recent work project, I had to downscale a video to a fixed size to fit into our application as designed. Though I didn't know the exact options, I new this was a perfect task for my good friend ffmpeg.

One challenge I ran into recently after starting a new role at Ramp was managing SSH authentication multiple GitHub accounts. Being able to access personal repositories like my dotfiles while also accessing work repositories which are managed by a separate GitHub enterprise account was something I hadn't done before.

I started a new job at Ramp this week, and I quickly found out that they value the number of days since the inception of the company. What started as bit of copy/paste in a slide deck, became a core part of the company culture. Wanting to join the fun, I wrote a simple shell script to keep track of how long I've been at Ramp.

While working on a recent side project, I had the idea to build a simple API like styled components that works with Tailwind. The idea is given a list of class names, create a component that you can easily share without writing all the normal boilerplate.

I build a custom ESLint plugin for my personal website to prevent using unescaped single or double quotes in JSX and instead use "smart quotes" which are handled properly and also display consistently with the rest of my website. The plugin is surprisingly simple, and hopefully helps relive your fears about writing your own simple plugins like this one!

If you ever have needed to use the requestAnimationFrame API in an async method where you wait for an animation frame before executing additional logic, the callback nature of it might get annoying. With a super small wrapper, you can make a function that returns a promise instead!

Emmet support for JSX is somewhat limited in Neovim as it is not able to easily distinguish between when it should provide JSX completions in render methods or CSS completions in styled components or similar CSS-in-JS libraries. If you only care about CSS completions and you are okay with a few config changes, you can make it work pretty easily with an entry_filter for your completions.

Have you ever added a scrollbar to a rounded container just to realize that the scrollbar looks ugly and square? Thankfully, the solution is pretty simple with just an extra div.

CSS has a relative new feature for building relative colors based on a source color. This allows you to make small changes to a color value without fully redefining it. One interesting use case for this syntax is changing the opacity of hex colors.