Posts

Quarto - SVG Charts

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.

Categories: #Python
Tags: #quarto
Quarto in Docker Container

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.

Categories: #Python
Tags: #quarto
Astrowind - Image Component

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.

Categories: #JavaScript
Astro Theme - Astrowind Styles Organization

Moving Css Variables into tailwind.css

The original Astrowind theme has a CustomStyles.astro file that stores color variables and font asset resources, but this theme also uses tailwind. To make the shared content more localized, the css variables should be stored in the tailwind.css file because then the color variables will then be usable in the tailwind.config.cjs file.

Intuitively, the initial thought would be to also store the font assets in the tailwind.css, but the fonts used are downloaded with fontsource, which uses the import to load the fonts in a JavaScript file. This means that the fonts are better suited to be imported into the CustomStyles.astro file because astro files can handle JavaScript.

Categories: #JavaScript
Tags: #CSS
Batch XCF to Jpg Conversion

Gimp's Default Editing Format to JPG

When saving multiple edited images into Gimp's native image editing format, there will be a need to export them to a readily used format such as JPG. By using the bash script written by Eli you can achieve this task.

However, his bash script requires you to place that file into the same directory as to where the xcf files are located for conversion, which can be improved if you wish to operate on multiple folders with xcf, it would be inconvenient to copy the script to all those folders.

Modifying the script, we have the following file, "convert_xcf_to_jpg.sh", which can take an input and output directories to control where the conversion will take place without the restriction of leaving the script in the same directory as the xcf files.

Categories: #shell
Typst - Reusability

Sharing String Contents

Typst offers the capability of content reuse by allowing for file imports. It makes extensive use of functions to perform special manipulation of text.

Shared Function - Load Function from File

Reusable content can be defined in another file within a function. This function when called will yield the shared content.

// shared-function.typ

#let content() = {
[ 
  = Content from another file
 Shared appears here.
 ]
}

The sample.typ will load the content from shared-function.typ.

// sample.typ

#import("shared-function.typ"): *
#content()
Categories: #shell #typst