Qwen3.6-27B Quantization Benchmark
This is my attempt to benchmark and compare the quality of some of the well known Qwen3.6 27B quantizations on HuggingFace (unsloth, mradermacher, IQ4\_XS from cHunter789 and Ununnilium), from Q8 all ...
huy.rocks
Huy's development blog
Latest posts
Claude Code Notifications on macOS
When Claude Code needs your attention — whether it's waiting on a permission request, finished a long task, or just has something to tell you — it's easy to miss if you've switched to another window. ...
Teaching an LLM a Niche Diagraming Language
Text-to-diagram seems to be an area that has been solved perfectly by LLMs, but only with popular languages like Mermaid or PlantUML. There are many other less popular diagramming languages like D2, S...
Using Zig for Advent of Code
This year, I decided to use Zig to solve Advent of Code. I started learning Zig sometime ago but took a break. It was not something easy from the beginning, so in the first few days, I had to use eit...
Test parameter passed into a function with Jest
OK, this one is super useful, I promise! As you may already know, we can use `toHaveBeenCalledWith` on a spied function to check if that function has been called with a set of arguments. For example, ...
Optional Chaining and Code Coverage
For the uninformed, **optional chaining** is a new JavaScript feature that allows you to access property values deep inside an object without checking that each reference in the chain is valid. For ex...
Mocking File and FileList in Jest
Sometimes we need to mock a `FileList`, for example, when we need to test file upload features. First, create a mock `File` object: ```typescript...
Testing localStorage in Jest
One approach to testing the `localStorage` function in Jest is to mock the `setItem`/`getItem` methods. To mock something with `localStorage`, we can do it via the `Storage.prototype`, for example: ``...
Migrating docker-compose application
Previously, I hosted [Plausible](https://plausible.io) on my Linux server. It's a Google Analytics alternative, that runs as a set of 4 Docker containers, managed with `docker-compose`. Which is cool....
Recursive Descent Parser
A parser is a program that usually takes a stream of lexical tokens and transforms them into another data structure, usually in the form of a parse tree that satisfies the language's grammar rules. ##...
Variable declaration in Virtual Stack Machine
In the [previous article](/everyday/04-21-2022-compilers-how-virtual-stack-machines-executed), we get an overview of how bytecode is executed in a stack machine. In this article, we continue to dive i...
Virtual Stack Machines
Different programming languages have different approaches to executing their code. Some languages execute the code as they travel the *AST* (Tree Walk approach), and some languages compile the code in...
Using the browser's CustomEvent
An event system is a mechanism for globally receiving and broadcasting messages, which can be used in a Web Application to allow different components that do not have any parent-child relation to comm...
Extract digits of a number from both ends
Let's say, we have a problem that requires us to print all the digits of a number from the left to right. A simple approach would be extracting the digits from the right to the left, storing them in a...
Detect chess piece movement with Bitboard
In [the previous article](/everyday/04-17-2022-data-structures-introduction-to-bitboard), we learned about Bitboard and how to use it in a simple board game. In this article, let's see how Bitboard ca...
Structures Bitboard Tic Tac Toe
[Bitboard](https://www.chessprogramming.org/Bitboards) is a widely-used technique in many computer chess programs for efficiently representing and extracting information on the chessboard. It seems to...
Circle and Ray Intersection
Let $P$ be the intersection point, $A$ is the anchor point of the ray, $B$ is the endpoint of the ray (assuming the ray is length-limited) and $C$ is the circle's center point, with radius $r$. $$ \\b...
Prime Factorization
In mathematics, the [fundamental theorem of arithmetic](https://en.wikipedia.org/wiki/Fundamental_theorem_of_arithmetic) states that: **"Any integer number larger than 1 can be written as a product of...
Understanding keyof typeof
In the ["Use String as Enum Key"](/everyday/04-11-2022-typescript-use-string-as-enum-key) article, we use the **keyof typeof** keywords to create a union of an enum's keys. ```typescript enum Editor {...
Notes Control Flow Graph and Infinite Recursive Detection
[**go-staticcheck**](https://github.com/dominikh/go-tools/) is a static code analysis tool for Go. It has an interesting ability to detect infinite recursive calls. For example, infinite calls like th...
Notes Monotonic Clock
In a computer system, there are 2 types of clocks: 1. **Wall Clock** (or **Real-Time Clock**): is the clock that is synchronized with NTP (Network Time Protocol), which is subjected to jump (moving f...
String as enum key
In TypeScript, you can define an enum and access its value with a _string-like value_, like this: ```typescript enum Editor {...
Tracking letter frequency
Sometimes, you will need to count the frequency of letters in a string and do something with that count. For example, with a simple algorithm to check if a string is a permutation of another one, we c...
Use Delve on M1 Mac
[Delve](https://github.com/go-delve/delve/tree/master/Documentation/installation) is a GDB-alike debugger for Golang, with better support for Go's data structures and Goroutine. To install Delve on M1...
Cyclic Sort
Cyclic Sort is an easy to implement and efficient algorithm. The only caveat is that it requires an input array to be a continuous range of values. It can be applied to the problems of finding *duplic...
Fast and slow pointers for Linked List
In a Linked List, traversal is restricted to forward only, you can't really go back to previous nodes once you go past them. When working on a problem that requires us to do some lookup in a Linked Li...
Code organization when using Nx
Nx is a tool to create and manage multiple-project workspaces. One of its most important features is the ability to track the changes in your projects in your workspace and only rebuild what is affect...
Some random notes about Classes
Some notes about some not-so-well-known things about TypeScript Classes. ## Parameter properties In TypeScript, you can define a class's properties in two ways: Define it as a class property in the no...
Notes Dry Run
OK, this one is embarrassing, I still remember the first time I was taught to dry run the code. It was many years ago when I started learning how to program. But I've never actually tried it properly....
Sliding Window
For the problems that require us to do something a stream of values, or a subsequence of an array, the typical approach is to use a sliding window.  A naive way to impleme...
Merge two sorted arrays with extra space
**The problem** Given two non-decreasing arrays `a` of length `m`, and `b` of length `n`. Merge the two arrays into array `a`. Since it’s an in-place merge, `a` has some extra spaces to fit the result...
Compilation Process
This article is inspired by the talk [How the TypeScript compiler compiles](https://www.youtube.com/watch?v=X8k_4tZ16qU), you should really check it out for a more in-depth understanding about the Typ...
The intrinsic keyword
In the [previous post](/everyday/03-30-2022-typescript-how-some-utility-types-are-implemented), we learned how some utility types are implemented. The fact that they're all done at the type level is v...
How some utility types are implemented
TypeScript provides several [utility types](https://www.typescriptlang.org/docs/handbook/utility-types.html) to help us manipulate types easier, like: `Partial `, `Required `, `Pick `,... ...
A note about lib.dom.d.ts
In TypeScript, all the type definitions for the Web API are implemented in the [lib.dom.d.ts](https://github.com/microsoft/TypeScript/blob/main/lib/lib.dom.d.ts) file. One interesting thing is, this f...
Memorization with React.memo
[Memoization](https://en.wikipedia.org/wiki/Memoization) is the technique to let an expensive function return the cached value if all of its arguments remain unchanged. When a React component is wrapp...
Respect default font size
When working with text and CSS, we usually assume that the default font size of the browser is always a fixed number (for example, 16px), therefore, we don't think much when setting the base font size...
Hanging Punctuation
Hanging punctuation is the practice of pulling the punctuation marks into the margin of a text so that it does not disturb the _vertical [reading flow](https://betterwebtype.com/articles/2018/10/15/rh...
Counter Reset respects start attribute
In CSS, we can create a custom list numbering with `counter-reset`, `counter-increment` and `counter()` functions. For example: ```css...
Source Code Walkthrough InlayHints
So, I want to look into the TypeScript source code to understand how things work and maybe contribute to the project as well. This is a quite big project but I think the code organization is pretty go...
Active Listening
Active Listening is a process to **engage** and **empathize** with the speaker when talking about something. The most important part of active listening is to: - Try to understand the topic you're lis...
Component CSS Isolation
In Angular, component styles are isolated (a.k.a [View Encapsulation](https://angular.io/guide/view-encapsulation)). That means CSS styles of a component are only affect the component itself, **not it...
Skip some fields when serializing
Using serde, we can serialize a data structure into different formats, for example, JSON: ```rust #[derive(Serialize)]...
Notes Collector Fallacy
Collector's Fallacy is **the urge to collect something that you never use or need**, but the act of collecting gives you a good feeling (cognitive reward). For example: - Save every article on the int...
A quick guide to getting started
## Definition Angular is: - A component-based framework to build web apps...
Notes Contributing to complex projects
As a developer, our main job is contributing to code projects, it can be a work project or an open-source project. With work projects, we might have access to more resources (other developers to learn...
Partial update an object in IndexedDB
Let's say, you have the object store called **characters** as the following table: | Key | Value | |:----|:------|...
Moving to IndexedDB
LocalStorage is a popular solution to persists data (locally) across sessions for web applications, but there are some limitations, for example: - It is limited to 10MB on most browsers. On Safari, it...
Notes How to Edit Your Own Writing
**Article:** https://www.nytimes.com/2020/04/07/smarter-living/how-to-edit-your-own-writing.html ## Why editing? Writing is like thinking. You will not know precisely what you are going to say before ...
Building large applications
Coming from React or other UI frameworks, when it comes to building large applications, you might have the habit of breaking it into smaller components. This mental model does not fit in Elm, in fact,...