PWA/WebUI

Photo by Matthew Guay

implement gRPC-Web client

When you want to access gRPC services from browsers, you need to implement gRPC-Web clients. Browsers’ fetch lacks several functionalities to implement full spec gRPC for years. While gRPC and protobuf was initially led by Google, protobuf-javascript is not maintained actively. At this time, ConnectRPC’s web client and protobuf-es set is more active.……

Graceful degradation of Custom Elements

WebComponents provides rich extra UI components for websites. You can create original HTML tags with Custom Elements API, or introduce external Javascript libs. Libs will be distributed as a separate JS files, and sometimes network error disrupts building Custom Elements on rendering. CSS for Not upgraded Custom Elements Custom Elements like <md-button></md-button> have its own definition.……

reveal.js: integrate slides

reveal.js is a Javascript library embedding presentations to HTML. Starting boilerplate with markdown functionality is as follows: <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.5.0/reveal.min.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.5.0/theme/black.min.css" /> </head> <body> <script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.5.0/plugin/markdown/markdown.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.5.0/reveal.min.js"></script> <script> Reveal.initialize({ plugins: [ RevealMarkdown ] }); </script> </body> The above code doesn’t include slides yet. It can be implemented any part inside of <body>.……

Build Sass with dart

Dart Sass provides a stable Sass compiler. It’s commonly used as sass npm via several JS bundler plugins. You can also use dart interface directly as CSS build itself has no relationship with Javascript in most cases. Dart Library section in the official instruction describes comilation procedure with dart script.……

Layout with D3.js

Rendering postion is a key point to draw a graph. D3.js has its own abstruction layer translating stastical values into SVG pixel postions. Render data to visual coordinates For basic graph area rendering, d3 provides a set of d3-scale sub-modules. The API reference shows example: var x = d3.scaleLinear() .domain([10, 130]) .……

Loading Stateful components

Stateful components like API client need data on their first rendering. For example, identifying 404 NotFound with some object needs load completion. If a framework provides lifecycle callbacks, you can utilize an initial hook. CustomeElements API for WebComponents provides connectedCallback() and Lit has one. If you want to wait API call, async connectedCallback() can simplify the workflow.……

Browser code coverage from E2E testing

Istanbul provides coverage metrics to Javascript code. It can work with broad range of testing framework including E2E. For browser testing, general steps are as follows: Transpile Typescript to Javascript with sourcemap. Convert source code with nyc instrument. Bundle without minify. Run test suite and collect metrics. Generate reports with nyc report Transpile Typescript Istanbul supports several Javascript flavor through nyc config plugins.……

Run Prettier command on Deno

Since v1.26, Deno introduces npm improvements without older --compat option. For example, Prettier can run on Deno with a wrapper as follows: #!/usr/bin/env -S deno run --unstable --allow-read --allow-env --allow-write --allow-sys import("npm:prettier/cli.js") .then(cli => cli.run(Deno.args)); This is rewritten from its node.js version bundled with Prettier npm. Since a wrapper runs outside of node polyfilled env, it needs to be written in a Deno way:……

WASM deployment for Webworker

wasm-bindgen is Rust tool for WebAssembly apps. Basic Usage wasm-bindgen requires 3 tools as bellows: Install wasm target to Rust toolchain. rustup target add wasm32-unknown-unknown Add wasm-bindgen to Cargo.toml. cargo add wasm-bindgen Install additional CLI tool. -f flag is for upgrade option. cargo install [-f] wasm-bindgen-cli Typical Cargo.toml looks like following:……