rust_regex_explanation_pwa

Rust regex explanations in PWA
version: 2020.810.640 date: 2020-08-10 author: bestia.dev repository: GitHub

Lines in Rust code Lines in Doc comments Lines in Comments Lines in examples Lines in tests

Licence Rust

Try it

https://bestia.dev/rust_regex_explanation_pwa/

Regex explanation and testing

Regex is great. But it is much easier to write and understand with a little help of explanations.
Regex has many flavors with subtle differences. This PWA uses Rust Regex crate.
It generates Rust code and shows that code results for the 6 important Regex methods.
Useful as learning tool and as development tool to edit/test/debug your regex first.

Minimal example of Wasm/Webassembly with vanilla Html, Css and Javascript

First decision - no frameworks. Just vanilla. Then no javascript.
Some basic html. Some basic css.
contenteditable - Every day something new. Modern browsers have a wysiwyg editor.
Just add the attribute contenteditable to a div or code.
All the rest is in Rust with web-sys/wasm-bindgen for all the programming needs.
No other special requirements.
Ok, I had to use the javascript library highlightjs to bring some colors to the code.
It is more like a coding tutorial for creating PWA in Rust.

PWA

I added the manifest, the worker and a bunch of icons.
Now it :

Change colors

Users can change the colors with the use of the Chrome extension User CSS:
https://chrome.google.com/webstore/detail/user-css/okpjlejfhacmgjkmknjhadmkdbcldfcb
Copy/paste and then edit the colors and watch changes alive:

:root {
    /* color palette */
    /* background color */
    --b_color_body: #24292E;
    --b_color_code: #1B1D23;
    --b_color_grid_header: #181A1F;
    --b_color_container: #333842;
    --b_color_button: dodgerblue;
    /* front color */
    --f_color_body: #dce0e9;
    --f_color_code: #78C379;
    --f_color_link: white;
    --f_color_05: yellow;
    --f_color_06: dark-white;
    --f_color_07: black;
    /* border color*/
    --brd_color_01: #000;
    --brd_color_02: #eaecef;
}

Development

We will need a web file server because security does not allow loading modules from local file.
Install this basic one: cargo install basic-http-server
Run the server in a separate terminal so it can stay running all the time:
Go to the content folder:
cd rustprojects/rust_regex_explanation_pwa/web_server_folder/web_content_folder
basic-http-server
Open the browser on:
http://127.0.0.1:4000