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.
Bits and bytes of code
Bytes is my collection of short-form posts, tips, and things I learn as I build software.
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.
Ever wanted to run a super simple timer directly from the command line? Oh, you haven't? Well, you can still read this anyway since you might learn something 😂.
The sr-only class is a common convention for visually hiding an element while keeping it visible to screen readers. If not implemented properly though, it can cause some unexpected overflow due to absolute positioning.
In a recent side project I came upon the need to securely store credentials in a database that I can later retrieve and use as part of the application. I know that Node.js has a very extensive crypto module, so I knew it was possible, though I wasn't sure on the specifics.