WH

Read Observables Values Correctly

As the JavaScript world have adopted promises to handle asynchronous events, it would be no surprise that Vitest would also support promises.

Stepping away for Vitest for a moment, the general method of testing RxJS observables was through marble diagram testing such as using TestScheduler, but the TestScheduler is more suited for testing the order of emitted values from observables.

If your observable only emits one final value, it is more suitable to convert the observable to a promise and check the return value in Vitest as shown below

import { lastValueFrom } from 'rxjs';

// Depending on your application, you might need to switch
// out lastValueFrom with firstValueFrom for the conversion to work.
const promiseResults = await lastValueFrom(returnsObservable());
expect(result).toBe(valueExpected);

One plugin for Multiple Programming Languages

To quickly look at the output of a variable, you can use the print or console statement in your programming language of choice. Most of the language packages you add with the vscode extensions do not have a shortcut hotkey combination to quickly print or log out a variable. A good majority of the extensions also caters to the more common programming languages such as JavaScript or Python.

It would be most beneficial to have a general logger where you can activate the statement with a use of a shortcut key combination if you tend to work with multiple languages. There are a couple of general print loggers on the vscode extension marketplace, but the variable-print plugin stood out in that it was the one that offered the option of adding new languages to support custom print statements.

Hide Code Description Display and Chart and Render Svg Charts Instead

The Matplotlib charting outputs unwanted content in your document related to the description of chart. Something similar to this might appear right above the chart that you want to display.

<Figure size 960x576 with 0 Axes>

Presentations in Quarto

Not only is quarto good for document publishing needs, it can also be used as presentation tool. With quarto, you can leverage revealjs to display your charts and graphs.

Columns

There might be a situation where you would want to present your graphs in two columns. This makes better use of the space in one slide to accommodate two figures.

:::: {.columns}
:::: {.column}
First column
::::

:::: {.column}
Second Column
::::
::::

Render GGplot in R as SVG Images

When you enlarge the view of a qqplot chart, you would like to see a crisp zoomed in version of the chart. We will achieve this by using svg charts.

For one to use svg charts in ggplot, it requires a download of another package called 'svglite'. However, R dependency manager doesn't quite install sub-dependencies for you, which makes it challenging to get all the dependencies you need for a project. To alleviate this issue, install renv to make managing R dependencies a less complicated ordeal.

The following example assumes that you are on an Ubuntu machine.

Reproducible Quarto Environment

Quarto a tool to help with technical and scientific publishing which incorporates programming languages and typesetting support in all-in-one solution. Since quarto relies on python and many other dependencies, it is safer to run Quarto in a docker container to avoid significant changes on your host machine. In addition, it will help with a repeat set up when you need to bring up the same environment again.

Searching for Images

Astro comes with a default image component that you can use to load your images from the /src/assets folder.

From the actual documentation page,

---
// import the Image component and the image
import { Image } from 'astro:assets';
import myImage from "../assets/my_image.png"; // Image is 1600x900
---

<!-- `alt` is mandatory on the Image component -->
<Image src={myImage} alt="A description of my image." />

Using Astro's Image component is useful in that it helps you perform optimizations to your images on the final build. It is able to output to webp format as well as set the width and height for them to improve site layout performance.

However, one of the downside of using the default component is that you have to load the images one by one. Astro also has a suggestion for dynamic images using import.meta.glob, but it still is not as dynamic as compared to that of Astro's glob method.