Front-end web developer that writes about the programming craft and its tools
Throughout my career, a staple React library in every team was React Hook Form, for good reasons — it’s pretty easy to use. Unfortunately, it’s also easy to misuse. When working with it, I often saw code that got the job done but was inefficient or non-idiomatic. Let’s talk about them.
It’s not news that nektos/act works well to debug GitHub actions locally, but I wanted the fast feedback loop of an interactive shell instead of re-running act push each time I changed echo commands in the workflow file.
Infinite scroll is a common UX that web developers need to be comfortable implementing. In this post, we’ll see how to implement this experience using standard web APIs such as IntersectionObserver and React hooks.
Debouncing a callback in a React component may not be as straightforward as you might think. In this post I want to explore the source of this difficulty and how to solve it.
In this post we’ll explore all the different ways animate on the web, with only CSS and vanilla JavaScript.
I’ve been happy with my Zsh prompt for some time now, it probably isn’t worth of a blog post but I did need to read the manual to come up with it so maybe it is.
zod is a library to validate if an arbitrary user-generated data conforms with a specific type at runtime. In this post, I want to talk about using it to validate URL search params.
A TypeScript pattern I like to use is to derive types from data. Types in TypeScript only exist at build time, so this pattern has the benefit of types being automatically linked to the runtime values they represent.
A polymorphic component is a design pattern that allows you to customize the HTML tag used by a React component via props:
In this blog post, I’m gonna show how to get a good enough syntax highlighting for MDX files in Neovim.
At first, I didn’t understand how to use git worktrees, but now I find myself using it more and more for code reviews.
In this blog post, we’ll see how to use treesitter in neovim to automatically convert a JavaScript string into a template string if it contains ${.
Vim allows you to format text with an arbitrary external program with the :h gq operator. For example, say you want to format with prettier, you just need to set :h 'formatprg' option to npx prettier --stdin-filepath %, and gqip will format the paragraph with it (it also works if you select the text first and then use gq — vipgq).
The details HTML element doesn’t seem to work well when used as a controlled component in React, as pointed out in this open GitHub issue. At first, I thought it was a React bug, but at the end of my investigation while writing this, I concluded it’s simply a mistake — not having a single source of truth for state.
Forms are easy to get wrong with React because we can achieve their goal, which is to make a network request when on submission, with any arbitrary HTML and JavaScript.
In this post I want to share my favorite custom git commands — from aliases to shell scripts.
If there is one technology every developer has to deal with, no matter the stack, is the shell. But most do not bother learning it, so in this post we’ll dive deep into one of the most common shells, Bash, by comparing it with a more familiar programming language to most developers, JavaScript.
A dotfiles repo will help you manage configuration over time and synchronize them across machines, but it won’t help you with your dependencies — you still have to install git, tmux, vim, etc. Let’s see how Ansible can help with that.
This is the story about how I’m moving away from a tiling window manager, dwm, to a full-blown desktop environment, GNOME. It’s hardly an interesting story, but I feel like writing about it.
git rebase is a command for rewriting history, which sure seems scary at first but you’ll learn to love it.
The integration between Storybook and Mock Service Worker enables you to develop components isolated from your app and your back-end server.
adb is a CLI that lets you control your Android device from your computer. In this post I want to share its features that made me enjoy more mobile development.
Imagine we have the following JSON file and we want to use the highlighted line’s value in a script.
In this post, I want to share how I started to change dwm source code in order to improve my experience with Android Emulator.
Vim has this well-known feature of opening the path under cursor with :h gf. This article explains well how this works.
Transforming SVG files into JSX is boring and prone to error. We can handle it better with svgr. Its defaults are good enough, but you’ll likely need to customize it for your needs, which is made possible by writing a template.
In this post I want to talk about how I use ripgrep in Vim.
Implementing dark mode for a static website is not as simple as you may initially think. There are some hacky things we should do to provide the best experience and avoid things like flash of incorrect theme on reload, handling transitions, persistence etc.
Testing is not easy, it’s a trade-off: either you slow down new feature development by writing test to avoid regressions later, or you develop untested features and bugs will inevitably be introduced later.
I started to learn React with create-react-app like everyone else, and it really does its job well. I never had to worry too much about tooling but… it is slow to start up.
The way we’ll get this to work is by using a generic Language Server called efm-langserver, which is written in Go.
Getting Python syntax highlighting to work in Vim requires very little code, to my surprise.
Recently, I had trouble deploying a Flask application using gunicorn as the WSGI server on a Heroku’s free dyno tier.
I really like Vim’s :h errorformat feature, but only when I manage to get it right. Until then, I’m sure it will frustrate me more than once. It’s very awkward to write one if the program’s output you’re trying to capture is not trivial (e.g., LaTeX).
The :make command in Vim is quite useful, it runs whatever program is under the makeprg option and returns its output in the quickfix list, where you’ll be able to hop through the errors if they were parsed correctly by the errorformat option.
For those who find themselves in an environment which heavily relies on Excel and Salesforce, you may be interested in a way to automate the process of downloading reports from inside Excel with VBA only.