# UML and OpenAPI for full stack development

There are many good articles introducing how to become a full stack developer. Lots of technologies — HTML, CSS, JavaScript, Express, React are mentioned. They are really good resources. However, I think they miss some importatnt things and here are two importatnt things.

## UML: Data Model of Service

Before implementing a service, it is important to construct concrete a data model, definitions and relationships between entities. Without a concrete data model, design and implementation of service are highly likely to be changed during development, resulting in an unstable product and risk of missing feature.

To design a class diagram, you can use one of software (or others):

## OpenAPI: Protocol between Backend and Frontend

After designing data model, a developer needs to implement backend service provider and frontend service request. OpenAPI enables a developer to define a protocol: which paths, parameters and body contents to use, how responses will be.

To design OpenAPI, you can use one of software (or others):

# Embedding worker in Electron app using Webpack and electron-builder

Disclaimer: as per electron-boilerplate

Make webpack bundle your worker code. I’ll skip the entire code here because it’s too long.

Remeber the output path

Make electron-builder copy your worker bundle file .

This will place your worker bunlde file inside resources/app.asar.

Adjust worker path and working directory for fork in main.dev.ts.

# Installing Electron manually for electron-builder

This article tries to resolve an uncommon issue when you encounter the following error and it cannot be resolved automatically, e.g. behind proxy, etc.:

Download the right version (with consideration of package.json) of Electron from https://github.com/electron/electron/releases

Unpack the downloaded Electron and put all files under node_modules/electron/dist.

Create path.txt file under node_modules/electron with the following content:

• Windows: electron.exe
• Linux: electron
• macOS: Electron.app/Contents/MacOS/Electron

Note: Make sure there is no whitespace characters (including a newline character) after the filename. This is a problem that I struggled for minutes and hours.

# Quick start on ANTLR4 in Rust - part3

This is my note in adopting and learning ANTLR4Rust

Series

In the previous article, we implemented a parser with internal state variables. However, if a grammar is huge, it is practically impossible to manage a huge number of state variables. Alternatively, a visitor-like approach can be used.

In an exit method of the root rule in the Listener, we can grab the current context and its children and call custom parser methods:

The minimal working example can be found here.

# Quick start on ANTLR4 in Rust - part2

This is my note in adopting and learning ANTLR4Rust

Series

In the previous article, we built the minimal working example walking a parse tree using a listener. In this article, we are going to store a parsed CSV structure into a variable to use in the future.

Define a CSV structure:

csv will be a resultant CSV structure. add_to_header and row_to_add are internal state variables to generate a CSV structure.

Implement a listener:

Feed an input to a parse and extract the result:

A tricky part is that we have to extract csv from listener. And to this end, we have to extract listener with listener_id.

The minimal working example can be found here.

# Quick start on ANTLR4 in Rust - part1

This is my note in adopting and learning ANTLR4Rust

Series

Install nightly version of Rust (and make it default if you want for convenience).

Get ANTLR4 runtime for Rust from here:

Prepare a grammar. I will use an example grammar: https://raw.githubusercontent.com/antlr/grammars-v4/master/csv/CSV.g4

Generate a parser:

You will get csvlexer.rs, csvlistener.rs , csvparser.rs . Place them into your project src directory.

Add dependencies in Cargo.toml:

Add a feature and import lazy_static macros to the root module:

Import common and essential things:

Import grammar-specific things:

Implement ParseTreeListener, a supertraint of CSVListener:

Implement CSVListener:

Read and parse an input. Note that csvFile in the last line is a rule name in CSV.g4:

The minimal working example can be found here.

# Trilateration using the Levenberg-Marquardt method

True range multilateration is a method to determine the location of a movable vehicle or stationary point in space using multiple ranges (distances) between the vehicle/point and multiple spatially-separated known locations (often termed ‘stations’). — True range multilateration, Wikipedia

We can define a trilateration as an optimization problem to minimize a cost function $$S$$ for a given estimate $$\beta$$, a tuple of $$(x, y, z)$$

\begin{aligned} S(\beta)&=\sum_{i=1}^{N}f_i(\beta)\\ &=\sum_{i=1}^{N}\left[r_i-\sqrt{(x-X_i)^2+(y-Y_i)^2+(z-Z_i)^2}\right]^2 \end{aligned}

where $$r_i$$ is a measured distnace between an Anchor (i), whose coordinates are $$(X_i, Y_i, Z_i)$$.

Levenberg-Marquardt method is defined by:

$$\beta_{k+1}=\beta_k-\left(J^TJ+\mu_kdiag\left(J^TJ\right)\right)^{-1}J^Tf(\beta_k)$$

where $$J$$ is the Jacobian matrix and $$f$$ is a column vector composed of $$f_i$$:

\begin{aligned} J&=\begin{bmatrix} \frac{\partial f_1}{\partial x} & \frac{\partial f_1}{\partial y} & \frac{\partial f_1}{\partial z} \\ \frac{\partial f_2}{\partial x} & \frac{\partial f_2}{\partial y} & \frac{\partial f_2}{\partial z} \\ \vdots & \vdots & \vdots \\ \frac{\partial f_N}{\partial x} & \frac{\partial f_N}{\partial y} & \frac{\partial f_N}{\partial z} \end{bmatrix}\\ &=\begin{bmatrix} F_1(x-X_1) & F_1(y-Y_1) & F_1(z-Z_1) \\ F_2(x-X_2) & F_2(y-Y_2) & F_2(z-Z_2) \\ \vdots & \vdots & \vdots \\ F_N(x-X_N) & F_N(y-Y_N) & F_N(z-Z_N) \end{bmatrix} \end{aligned}

where $$F_i$$ is a shorthand of each derivative:

$$F_i=\frac{r_i}{\sqrt{(x-X_i)^2+(y-Y_i)^2+(z-Z_i)^2}}$$

Now, we can estimate $$\beta$$ by iterating the equation until it converges.

# Git Hooks with stderr

For example, it’s tricky to validate a commit with pre-commit hook if an app does not return a proper exit code. Here’s a way to validate with the stderr.

1. Make a temporary file
2. Redirect stderr to the temp file
3. Count the length of its content

You can understand it with code snippets below:

PowerShell

Unix/Linux shell

# Preventing privacy leak with TuringFonts (substitution cipher)

Download one of web fonts (.woff2) from TuringFonts. Assumed Zebra is used here

Put the font to the web directory and define the below in a stylesheet:

Assign zebra-substitution class to where it needs

See how it looks.

TuringFonts also provides Encoder to get a ciphered text.