Posts

RxJS - Library Picks #1

Rxdeep

For the easier determination of a value change inside a deeply nested object, use Rxdeep's state's output observable for wrapping an object to subscribe to the change events.

import { state } from 'rxdeep';
 
const s = state([ { name: 'John' }, { name: 'Jack' }, { name: 'Jill' } ]);

// Listen to changes on 'name' property of index 1 on the list:
s.sub(1).sub('name').subscribe(console.log);     // --> logs `Jack`
Categories: #JavaScript
Tags: #RxJS
Pandoc - Quick Tips #1

Render Full Html Site

By default, converting a LaTeX file into an HTML file only produces a partial HTML page. Pandoc conversion strictly contains the content wrapped in the basic HTML equivalent tags, which is spartan as the following example would only output a paragraph tag without a html, head, nor body tag available.

\documentclass{article}

\usepackage[margin=0.5in]{geometry}
\title{Tex}
\date{}

\begin{document}
\maketitle

some content

\end{document}

To fix this problem, the "full html" page requires the "-s" flag (standalone mode) to achieve the proper conversion.

pandoc -o 'my-output-file.html' 'my-input-file.tex' -s
Categories: #shell
Tags: #pandoc
Webpage Svg Screenshots

Accessible screenshots of web pages

Taking a screenshot on a webpage illustrates and preserves the layout information with accompanying text, however, taking a screenshot where the content is primarily text implies a lost of useful information because you can no longer select the text nor zoom into the image without significant quality lost as is the case with most commonly used image formats such as png and jpeg.

Categories: #browser
Tags: #svg
RxJS - Key Combination Detection

Hot Keys

A hot key combination such as "ctrl + shift + alt + a" could be used to trigger a behavior in a web application such as the opening of a dialog or panel. It also provides a convenient shortcut when an action is often repeated in a workflow. There are certainly many libraries out there designated for such a task, but if you are already using RxJS, it is flexible enough that this functionality can be replicated without using an additional library.

Categories: #JavaScript
Tags: #RxJS
Selenium - Python - Quick Tips #1

Webdriver Manager

Use the latest version of the web driver for your browser of choice when testing by installing the webdriver_manager package.

pip install webdriver-manager

The package will automatically download the newest version when tests are run with Selenium. This will relieve you of having to manually download the driver for inclusion in a folder while testing.

Categories: #testing #python
Tags: #selenium
Angular - Module for Routes

Organize Routes into Modules

In Angular, to make routing cleaner, routes may be defined inside modules to localize the path definition to where a specific component is associated.

Here, we have the "/useful/" route and nested child route of "/useful/stuff" defined for our "useful component".

//useful.module.ts

import { UsefulComponent } from "./useful.component";
import { NgModule } from "@angular/core";

import { RouterModule } from "@angular/router";
const routes = [
  {
    path: "",
    component: UsefulComponent,
    children: [{ path: "stuff", component: UsefulComponent }],
  },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
})
export class UsefulModule {}
Categories: #typescript
Tags: #Angular
TypeScript - Descriptive String Arrays

Strings from a Union Type

Often times, an array would contain one of many possible string values, and it would be expressed as such

interface BuildFlagsStatus {
  optionalArgsFlagKeys: Array<string>
}

However, this is a not very helpful approach because usually the string values allowed placement inside the array comes from a select group of strings.

To be more descriptive, create a string union type and use that for typing an array.

Categories: #typescript