Hi. I live in Japan 🗾 ⛩️ 🍣 and I practice martial arts . I love Rust! 🦀
I usually create repos for my own benefit 🥑, but I hope you will find them helpful to you as well! 🌱 🦩
sowngwala-js
A JS library for calculating sun & moon's position. It was ported from another library of mine written in Rust.
📌 Sun's Position
· Astrology
· Astronomy
· JS
👀 View Demo
rawjs-generate
A sample RawJS app with PUB/SUB messaging to generate/destroy DOM elements.
📌 RawJS
· JSDoc
👀 View Demo
cloudflare-workers-d1-rust-example
A sample code for Cloudflare Worker written in Rust using D1.
📌 Cloudflare Worker
· D1
· Rust
resize
A very simple CLI program written in Rust for resizing an image with specified width.
📌 Rust
· image
· resize
· CLI
perlin-experiment-2
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
simple-i18n-solution
A simplified version of what I have for my website for i18n localization.
📌 i18n
· NodeJS
· Javascript
very-simple-wasm-2023
A sample WASM app using wasm-pack-plugin
prepared as a learning material.
📌 Rust
· wasm-pack
· wasm-bindgen
· js-sys
· web-sys
· wasm-pack-plugin
widgets-react-vs-solidjs
Comparing widgets implemented with React vs SolidJS.
This is more about using Emotion CSS and Tailwind CSS for React and SolidJS apps.
📌 Web Components
· SolidJS
· React
· Emotion & Tailwind
👀 View Demo
latest-ts-setup-2022
Let me have a boiler plate for Babel + TypeScript.
📌 Babel
· TypeScript
· React
· Emotion & Tailwind
flight-pack
A demo app using wasm-pack-plugin, drawing flight information on Google Map.
📌 Rust
· wasm-pack
· wasm-bindgen
· js-sys
· web-sys
· wasm-pack-plugin
👀 View Demo
sowngwala
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
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
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
react-widget-airport
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
react-widget-setup-2021
Just like the above react-widget-airport
, but much simpler!
📌 React
· UMD library
· SharedWorker
👀 View Demo
service-worker-experiment
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
solid-setup-2021
A template for Solid.js projects. Always nice to have Tailwind.
Basically, this is for my own use...
📌 Solid.js
· Tailwind CSS
yew-setup-2021
A template for yew
projects. This is basically for my own use.
📌 yew
· Rust
· wasm-pack-plugin
👀 View Demo
wasm-pack-react-markdown-example
A React app using WASM for converting markdown contents into HTML.
📌 Rust
· wasm-pack
· wasm-bindgen
· React
· CRA
· markdown
reveal-yourself
An example using Github Actions to automate cargo build for multiple binaries.
📌 Github Actions
· rust
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
mapbox-gl-js-v2-experiment
Mapbox GL JS v2 experiment. Using no React.
📌 Mapbox GL JS v2
· Tailwind CSS
· ramda
👀 View Demo
mini-actix-react-example
actix-web is an amazing, fast Rust web framework.
Although I have more complicated configurations for my own website, ideas are about the same.
📌 Rust
· actix-web
· heroku-buildpack-rust
· CORS
webpack-webcomponent-example
While this is old, it presents 3 basic examples of how you can implement web components.
📌 Web Components
👀 View Demo