Programming
Articles

As a software engineer, programming is my bread and butter. I love to learn new programming languages and frameworks. I also like to share my knowledge with others. This category of collections is all about programming, covering a wide range of topics.

Use SVGs as React Components in Astro

Migrating a website from Next.js to Astro (v4/v3), 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 无法做到的”。

ZH

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 操作,然而数组的索引虽然唯一,但是并不"稳定",也难以预测

ZH

Introduction to Assumptions Made in React Reconciliation

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

ZH

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 之间的关系。

ZH

Hackability of DOM

DOM 属性迁移到 JavaScript 原型之后提升了 DOM 编程的可自定义能力,但却在 Safari 中出现了不同的行为,所以本文也只针对 Chrome/Firefox 浏览器通过这种可自定义能力实现一个非侵入式的 DOM 事件统计,同时意外发现另一处不同……

ZH

Chrome: DOM attributes now on the prototype

Chrome 团队为了与 Web IDL 规范保持一致,已经把 DOM 属性迁移到了原型上,带来了诸如自定义默认 DOM 行为等新特性,同时也带来了一些兼容问题……

ZH