WH

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.

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.

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.

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 {}

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.

Take a Frame from an Asciicast Recording

Using asciinema is a convenient way to create an accessible recording of your terminal if you want to demo features of a CLI app because the output media permits you to select the text that actually runs in the asciinema player.

On occasions, you might be only interested in taking a screenshot of the recording when focusing one command. With the help of "svg-term-cli", a select frame from asciicast recordings can be exported to a svg file.

It is also helpful to record a series of steps on the CLI at a time as to not disrupt your train of thought when you are going through each CLI command intended for something like an instructional tutorial.

# Record your cast
asciinema rec my-super-amazing.cast

Give Precedence to Greater Satisfied Criteria

Observables tend to be created from other observables through transformations by operators in a pipe. On some occasions, one observable is created from another, it creates a chain where you have the latter observable and initial observable both triggering when the initial base condition is met. However, there might be cases, where you would only want the latter observable to trigger because you want to find the observable which matches the most conditions.