Hi there 👋

Hi, this is Mina. I live in Japan 🗾 ⛩️ 🍣 and I practice martial arts . I love JS ⚡ and Rust! 🦀
I usually create repos for my own benefit 🥑, but I hope you will find them helpful to you as well! 🌱 🦩
I am currently looking for a job opening starting mid-February 2025 in HCMC, Vietnam!

sowngwala-js (2024)
JS library for calculating sun and moon's position ported from sowngwala written in Rust.
📌 Sun's Position · Astrology · Astronomy · JS
👀 View Demo

sowngwala (2021)
A library for calculating sun's position.
"sowng" stands for "sun" in Belter language (from sci-fi movie "The Expanse").
"wala" for "one who is professional at".
📌 Rust

mikaboshi (2021)
A Rust library for 風水 (风水) (Feng-Shui) providing basic Chinese astrological concepts such as 八卦 (Ba-Gua), 干支 (Gan-Zhi), 九星 (Jiu-Xing), 二十四节气 (Er-Shi-Si Jie-Qi), 二十四山向 (Er-Shi-Si Shan-Xiang), 生死衰旺 (Sheng-Si Shuai-Wang), etc. When bundled into a WASM (WebAssembly) app, you could associate the library with your Javascript apps as well.
📌 Rust

perlin-experiment-2 (2023)
Another attempt in using Perlin noise. Last time, only the noise calculation was done in WASM, and a canvas animation was done in JS. This time, everything is done in WASM. To better serve as an introductory WASM sample app, I made the codes as simple as possible.
Highlights: (1) Spawns a child process for animation, (2) Event listener for browser resize event, and (2) debounce to limit executions when resize happens.
📌 Rust · wasm-pack · wasm-bindgen · js-sys · web-sys · wasm-pack-plugin
👀 View Demo

perlin-experiment (2021)
This WASM app creates canvas elements for 2 divs, and runs animations. The WASM app is one, but handles 2 canvas elements. You may pass configs at initial startup. Clicking the upper canvas, you may toggle among 3 visualization modes. If you are only interested in Perlin Noise, see my JS project perlin-noise-world-map (which is quite old) which auto-generates geographic landscapes (source or demo). Or, see rust-perlin-wasm-test-2 (which is even much older) for particles moving in organic manner (source or demo).
📌 Rust · wasm-pack · wasm-bindgen · js-sys · web-sys · Perlin Noise
👀 View Demo

rust-wasm-canvas-example (2024)
The latest attempt for WASM app with Canvas API. The structure is much simpler than perlin-experiment or perlin-experiment-2.
Using wasm-pack-plugin. A good starter for using WASM for canvas animations.
📌 Rust · wasm-pack · wasm-bindgen · js-sys · web-sys · wasm-pack-plugin

very-simple-wasm-2023
Probably, the simplest example to get started with WASM apps.
Other WASM samples contain canvas animation examples, but this one only tell you how to wire your JS app with WASM.
📌 Rust · wasm-pack · wasm-bindgen · js-sys · web-sys · wasm-pack-plugin

solid-principles-crockford (2024)
Samples to demonstrate applying SOLID principles to FP codes.
📌 SOLID principles · FP · Crockford

rawjs-generate (2024)
While this piece demonstrates the use of RawJS (framework newly came out) with pub/sub messaging,
it is also the best showcase of using JSDoc as an alternative to TypeScript (for type checking).
📌 RawJS · JSDoc · Type Check
👀 View Demo

SVG Animations using SMIL (2024)
A blog post.
📌 SVG · SMIL · animation

Monads - In A World of Multipolarism (2024)
A blog post.
📌 Monad · Multipolarism

cloudflare-workers-d1-rust-example (2023)
A sample code for Cloudflare Worker written in Rust using D1.
📌 Cloudflare Worker · D1 · Rust

simple-i18n-solution (2023)
A simplified version of what I have for my website for i18n localization.
📌 i18n · NodeJS · Javascript

react-widget-airport (2020)
Bundling a React app into UMD library, embedded into another app. You can pass arguments at initial startup, or you can dynamically send/receive messages using SharedWorker.
📌 React · UMD library · SharedWorker
👀 View Demo

service-worker-experiment (2021)
Worker is a powerful tool, but when implementing the related Web APIs, it can easily drive you into a rabbit hole.
With this sample app, I am attempting to demonstrate how you can implement related APIs.
📌 Serrvice Worker · Client API · Cache API · Vue 2
👀 View Demo

mapbox-gl-js-v2-experiment (2020)
Mapbox GL JS v2 experiment. Using no React.
📌 Mapbox GL JS v2 · Tailwind CSS · ramda
👀 View Demo

webpack-webcomponent-example (2019)
While this is old, it presents 3 basic examples of how you can implement web components.
📌 Web Components
👀 View Demo

csp-nonce-for-emotion.md
Tricks to insert "nonce" for style tags in your HTML when using csp-html-webpack-plugin and emotion.
📌 csp-html-webpack-plugin · emotion