WH

Configure a Snowpack Plugin

Snowpack is a frontend build tool that promotes itself as an alternative to Webpack because it uses new JS modules features, and the workflow is "unbundled" which skips the build steps during development to make for a faster workflow.

Snowpack has some sensible defaults which permits the import of commonly used asset files such as scss, .css, .svg in your JavaScript files.

Logical Evaluation

In traditional JavaScript, one would use the logical operators "&&", "||", "!" when evaluating variables for the "and", "or", and "not" conditions respectively. Similarly, there are RxJS operators which looks like the ones found in JavaScript when you wish to treat observable like values that needs to be compared against one another.

For the examples below, "true" in this sense refers to the observable have "truly" emitted a value and not have it base upon the actual underlying value within the observable.

AND

Use the "forkJoin" operator when every single observable must be activated for the subscription to run.

// When the observables will emit at least once in any order

import { forkJoin, of, interval } from 'rxjs';
import { take } from 'rxjs/operators';

const timer$ = interval(1000).pipe(take(1)),
  truthfulness$ = of(true);

forkJoin([
  timer$,
  truthfulness$
])
.subscribe(() => {
  console.log('All completed once');
});

Alternatively, you might be able to use "combineLatest" when you have long-lived observables. Tangentially, "concat" or "zip" will work if a strict order needs to be imposed for activation of observables in a series.

Conditional Activation of an Observable

Only make an observable run based on a ternary matching criteria.

// Third party modules
import { NEVER, of } from 'rxjs';

const evaluateToTrueCriteria = true;

// 'conditional$' will not run 'subscribe' when the ternary
// evaluates to the false branch
const conditional$ = evaluateToTrueCriteria ? of(true) : NEVER;
conditional$.subscribe((res) => console.log(res));

Output file Manipulation

When working with a document format conversion, such as converting over a Markdown file to LaTeX, there will be occasions where you might want to manipulate the output when Pandoc is not able to completely infer the output that is desired.

Scaffolding for Angular and Storybook with Cypress

First, use npx to localize the install of NX (v11.0.20) and Angular CLI (v11.0.20).

# Create a nx workspace
npx create-nx-workspace@latest

Static Site Generator Configuration

Zola is a decent static site generator written in Rust. This post will list some of my impressions and settings I made to get it customized to my liking to emulate the look and feel of my previous blog design.

Generating a new project

After using the init command, empty folders are generated, but it isn't quite clear on what needs to be modified. Running the server on the newly generated project yields a welcome page, but the physical page is not to be found in any folder. To get started quickly, I recommend that you use a theme and then customize it to your needs.

Common Help Information

All NPM and Github repos have README.md as the primary means of communicating the purpose of a specific module or project. In some situations, such as a CLI module, there is almost always a command to list help for the module’s use.