Background

My old laptop was bought ten years ago. I had never changed the thermal paste between its CPU and its fan. As a result, it had been getting hot during my online tutorials.

Photos

Background

jQuery provides many handy functions to speed up the development, for example document.ready(), element.toggle(), element.hide(), etc. My math editor used some of them. However, I replaced them with Vanilla JavaScript at commit 4a35c45b.

Goal

Some users complained about the white background in the past versions of my editor. That had motivated me to refactor the code, so that it would be easier to maintain and to add in new features.

HTML5 input types used

Actual appearance might vary across browsers.

Background

I’ve written about bringing user-defined KaTeX macros into Hugo a few years ago. Looking back, I realized that I only knew how to copy code at that time.

Goal

1. To replace the current code for my math editor with Showdown-KaTeX.
2. To bring mhchem into my LaTeX + Markdown sandbox.

Motivation

To get the benefits of the three free (as in “freedom”) technologies.

1. Markdown syntax is (much) simple(r than its LaTeX equivalent, especially for tables, ordered/unordered lists, etc).
2. LaTeX syntax for math is, in the long run, worth learning, so that your fingers can stay on the keyboard while editing math expressions.
3. mhchem allows writing chemical equations conveniently as in the previous point.

However, Rattle has pointed out the difficulties of mixing LaTeX and Markdown syntax. In his proposed solution for WordPress, he first renders KaTeX before moving to Markdown. He has provided an example use case with a dollar sign $ in a normal Markdown content (e.g. An apple costs $1.5.)

Motivation from compound interest

Increase the number of times that the interest is compounded each year ($n$), so as to increase the final amount of money ($A$)

$t$ and $r$ are the number of years and the interest rate per annum.

As $n$ becomes large, we can approximate the amount by

The value of $A$ in the above formula is the amount compounded continuously.

Settings

Let

• $P$ be an arbitrary reference point.
• $\triangle ABC$ be a triangle.
• $\vec{a} = \overrightarrow{PA}$, $\vec{b} = \overrightarrow{PB}$, $\vec{c} = \overrightarrow{PC}$

Remark: $O$ is reserved for circumcenter.

Centroid

Verify that $(\vec{a} + \vec{b} + \vec{c})/3$ satisfy the constraints.

Orthocenter

Let

• $H$ be the point of intersection of two altitudes $AA_H$ and $BB_H$
• $\vec{h} = \overrightarrow{PH}$

Add these two equations together.

Goal

To render a bordered box with multiple equations.

Background

My previous article about dot products contains some boxed math expressions: some are inline and some take up the whole line.

For inline math, that’s simple: either $\fbox{text}$ or $\boxed{a=1}$ will do. For displayed math, these two KaTeX commands will ignore the newline command \\.

Solution

A simple Google search ‘“katex” AND “box”’ saved the day. It led me to this relevant Stack Overflow question, whose accepted answer suggested the use of custom CSS. I copied the CSS class name boxedmath for my blog.

Goal

View SVG graphics generated from TikZ code in VS Code.

Part I: generate SVG using LaTeX Workshop

From the IDE’s parameters tab, I found the tools and recipes parameters. I clicked my user settings settings.json twice: once through the tools, and once through the recipes. Each click generated an array of default recipes or tools. Each of the former is a sequence of the later, which represents a command. The official examples and placeholders are easy to follow. Here’s the two JSON objects that I added.

Preface

There’s a simpler derivation using

1. the geometric defintion
2. linearity from the definition
3. orthogonality of the canonical basic vectors $\vec{i}$, $\vec{j}$ and $\vec{k}$.

If I had read that, I wouldn’t have type this document in LaTeX. The following content was transcribed from a PDF file that I made three days ago.

Content

Recall: $\sum_{i=m}^{n} a_{i}=a_{m}+a_{m+1}+a_{m+2}+\cdots +a_{n-1}+a_{n},$ where $m$, $n$ are integers.

Example: $\sum_{i=3}^6 i^2 = 3^2 + 4^2 + 5^2 + 6^2 = 86$

1. my HTML slides
2. You may view the source code of this blog to see the source files.

Goal

To provide an introduction to the formal definition of functions for arts stream students.

I aim to

1. minimize the calculations
2. use daily-life examples
3. favor pictures over text.

IT skills used

Inkscape

1. C-S-a for alignment.
2. C-S-f for boundary and colors, and line patterns (i.e. arrows).
3. C-S-d for document size.
4. clipping process:
   1. prepare the object to be clipped.
   2. prepare the clip, which is on top of the previous object.
   3. select Object → Clip and then the first option from the top menu.

dvisvgm

Use the TEX → DVI → SVG route with latex and this tool with options --font-format=woff and -b 5 -R -d 2 to save file size and to ensure that the SVG can be correctly opened on Inkscape.

Problem

I had issues in getting a SVG from a TikZ picture containing a pattern filling: https://github.com/mgieseki/dvisvgm/issues/158. The reported issue was created last year, and it’s marked as fixed. Nonetheless, I had this issue even though my MikTeX was up-to-date.

Discussion

1. I wanted to confirm whether my dvisvgm.exe, which had been shipped with MikTeX, was latest.
   • I first asked at https://github.com/mgieseki/dvisvgm/issues/184, but I was referred to MikTeX’s GitHub repository since it’s about the MikTeX-packaged version of this tool.
   • I am not sure about the technical explanation from the owner of dvisvgm at https://github.com/MiKTeX/miktex/issues/1112. It seemed that I was already using the latest stable version of this tool.
2. I gave a MWE illustrating the problem with the graph of y = (x + 1)² with region under the curve filled with a pattern in the above issue. I knew that’s probably off-topic, but the package owner might have some insights about the problem. It turned out that PDF → SVG was partly supported by dvisvgm. Using DVI → SVG, I managed to get the filling pattern, but I lost the beautiful Computer Modern Roman fonts—that’s another issue.
3. Hoping for a response from the owner for the previous problem, I started https://github.com/mgieseki/dvisvgm/issues/186. He suggested the use of --no-fonts or --font-format=woff. I observed no difference in the local filesystem. I uploaded everything I got through GitHub so that he could see what my dvisvgm.exe had output. I didn’t expected that the Computer Modern Roman fonts disappeared on GitHub side. If I hadn’t asked there, I would have never known that it’s the web browser’s security measure not to load the embedded font data in a SVG loaded from a server.

Skills learned

Meaning of some commonly used parameters of dvisvgm: