Hey, I'm Doray available for hire

My passion for productivity and creativity has driven me work on various projects, from front-end development to full-stack development and from desktop apps to mobile apps. I strive to push the boundaries of technology to streamline workflow for developers and enhance the experience for users.

githubhey@doray.dev
articles

Use SVGs as React Components in Astro

Migrating a website from Next.js to Astro, one challenge was faced using SVGs as React Components in Astro. While Next.js easily converts SVGs to React Components, Astro's default setting processes them as a base64 data URL. The solution involves utilizing the Vite bundler's vite-plugin-svgr. The approach is versatile, supporting multiple frameworks, but we should use updated Astro versions to ensure smooth SVG conversions.

EN

Five Challenges When Using WebAssembly, Golang, and TypeScript

Five challenges encountered while using WebAssembly as a bridge between Golang and NodeJS runtimes. The issues include a WASM file compilation error, missing WASM import arguments, unavailable crypto.getRandomValues, declaring variables in globalThis in TypeScript, and treating Golang + WASM as an application instead of a library. The solutions include setting environment variables, importing wasm_exec.js file, providing a polyfill for crypto.getRandomValues, augmenting global type definitions, and using Golang's Channel to prevent the runtime from shutting down.

EN

Why Angular Uses NgModules With ESModules

一月份面试时遇到位面试官,他问道:为什么 Angular 至今依然坚持使用 NgModules 而不是 ESModules 呢?当时回答得比较肤浅,主要提到“Angular 对模块理念的重视与推崇,因而需要一套更好的机制解决模块的依赖问题,而这套机制遵循了控制反转原则并以依赖注入的方式实现,这是 ESModules 无法做到的”。

CN

Repertoire Method for Solving Recurrences

《具体数学:计算机科学基础(第二版)》第一章的“约瑟夫问题”中,介绍了一种求解递归式的奇妙技巧 —— Repertoire Method。这种技巧帮助我们将特殊解推向一般解:通过一些已知其解的参数函数,从特殊的情形推向一般的情形。

CN

A Variation of Hanoi Problem

这道题目来自《具体数学:计算机科学基础(第二版)》第一章习题中“热身题”部分的第二题:把有 N 个圆盘的塔从左边的桩柱 A 移动到右边的桩柱 B,不允许在 A 和 B 之间直接移动,求最短的移动序列(每一次移动都必须是移动到中间的桩柱或者从中间的桩柱移出。较大的圆盘永远不能放在较小的圆盘的上面)。

CN

Caveats of ngVue: Using Vue2 Into AngularJS

The ngVue module allows you to use Vue components in AngularJS applications, making change detection efficient but complicated. AngularJS uses a dirty checking mechanism while VueJS uses a reactivity system. ngVue makes use of the reactivity system in the dirty checking mechanism, but has limitations in detecting changes to models. Solutions include using Vue.set() to add properties and Array.prototype.splice to mutate arrays.

EN

Why Array Index as Key Is Bad in React

从上一篇笔记分析,key 属性是优化列表结点的主要方式,而稳定、唯一、可预测的 key 属性有助于 Diff 算法计算出准确的 DOM 操作,然而数组的索引虽然唯一,但是并不"稳定",也难以预测

CN

Introduction to Assumptions Made in React Reconciliation

每当 state 发生变化,ReactJS 就会重新渲染新的 Virtual DOM,接着执行 Diff 算法与旧的 Virtual DOM 比较,计算出差异,最后执行 DOM 操作。ReactJS 基于以下两个假设优化了标准实现的 Diff 算法

CN

Unary map(parseInt) to Fix the Not-A-Number Issue

The example of numbers.map(parseInt) in JavaScript shows how the Array.prototype.map method calls the provided parseInt function once for each element in the array and converts strings into integers. However, the actual result failed and made the last two elements NaN. This is because parseInt only defines two parameters: string and radix, and the third argument in numbers.map(parseInt) is ignored. Solutions include using Lodash's unary method or Vanilla JS's unary and ary-like functions, or simply using numbers.map(str => parseInt(str, 10)).

EN

Define Static Constant Properties In JS Objects

在 Java 中在类中定义静态常量是一件非常轻松的事情;当我把这种定义转移到 JavaScript 上明显感到吃力,不过结合 ES5 API 和 ES6 特性以 TDD 方式讨论如何定义静态常量,同时讨论了常量 constant 与不可变性 immutable 之间的关系。

CN