minagawah / mapbox-gl-js-v2-experiment Goto Github PK

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