I recently got asked to implement a toy problem where there’s a autocompletion input box. As users enter a keyword in the box, the client would make a request to server to get back a list of suggestions to render. Normally I would use deferred value to make the application responsive, like so export default function App() { const [keyword, setKeyword] = useState(""); const deferredKeyword = useDeferredValue(keyword); function handleKeywordChange(e: React.ChangeEvent<HTMLInputElement>) { setKeyword(e.

I recently built a toy app that subscribes to a stream of text content and renders the content as it’s being delivered . The first approach I tried was to use a state and append chunks to the state as they come in. const [text, setText] = useState(''); // inside an event handler subscribe((chunk) => { setText(text => text + chunk); }); // rendering <pre> {text} </pre> This works, but the rendering is not smooth.

This New hook: useOptimistic gives an example of how useOptimistic is used const [optimisticName, setOptimisticName] = useOptimistic(currentName); const submitAction = async formData => { const newName = formData.get("name"); setOptimisticName(newName); const updatedName = await updateName(newName); onUpdateName(updatedName); }; and it states The useOptimistic hook will immediately render the optimisticName while the updateName request is in progress. When the update finishes or errors, React will automatically switch back to the currentName value.

When I need to get a substring, I usually use one of the following two methods: substring and substr. One thing that really bothers me is that the names of these functions are so similar that I almost always have to look them up. Today, I accidentally wrote string.slice() in an app because I had just been coding in Python. To my surprise, it worked! I didn’t know you could slice a string and get back a string in JavaScript, just like in Python.

List of safari extensions I’ve created: App Store Description Adds fuzzy search function to help you find tabs quickly, even when you can’t quite remember the exact title Automatically identifies and closes duplicate tabs, putting an end to unintentional tab duplication Simply opens Linkding page with your URL pre-populated. It also provides an Options page where you can customize your linkding server address Configures which websites to redirect using plain URLs or, for advanced users, regular expressions.

TLDR: https://github.com/tuan/yaws So I’ve been using Vscode’s Neovim extension for a while. This extension is, IMO, integrated better with VIM (or NeoVim to be exact) that the other VscodeVim extension. But lately, the neovim extension has been having problem with buffer synchronization, i.e. the vscode’s buffer and neovim’s buffer get out of sync. I’m not sure what the root cause is. It’s probably caused by conflicts or race conditions among multiple extensions that all try to update text editors at the same time, e.

Last weekend I spent some time playing with HTMX and created this app. While HTMX significantly simplifies the server and client interactions, for example I no longer need to create separate REST APIs to serve the client, but I feel like the DevX is not great. There are 2 things I had to deal with while working on that simple vacabulary app are: 1 - No REST API endpoints needed, but new endpoints to return partial HTMLs are needed.

I’ve been building a few toy projects. After leaving my previous job, I miss all the nice fancy DevOps systems or pipelines that I previously had, for example monitoring and CI/CD. So I looked around to see if I can find OSS alternatives. The good thing is that there are plenty out there, but the bad thing is that they are way too complicated for the kind of toy projects that I’m building.

Not sure which bubble I’m currently in now, but for some reasons I have heard a lot about HTMX lately. I’ve decided to build something with HTMX to see what it actually feels like in practice. The project is a simple page that allows users to look up a word and quickly add it to Anki, a flashcard program. The current working prototype is https://vocab.tentativeknowledge.com. The adding note to Anki feature currently only works on desktop and depends on AnkiConnect add-on.

TLDR: My notes on how to customize various templates used by django-allauth. django-allauth provides default templates for many scenarios such as authentication, registration, password reset, etc. These templates can be found at https://github.com/pennersr/django-allauth/tree/main/allauth/templates. You can see that there are quite a few of them. So in this notes, I just focus on login template used for username/password authentication. The approach to customize other templates will be similar. As of this writing Jan 2024, the current implementation has the following structure: