s = 0
for i in range(101):
s = s+i
print(s)5050About the Blog @ Mark’s Math
The tech stack for this blog
Like Mark’s Math itself, the Blog @ Mark’s Math is built with Quarto, which isn’t a standard blogging tool like Wordpress or Medium or Ghost or some such. Quarto is a more general tool for publishing in many formats and it focuses, more specifically, on producing technical documents. If that makes no sense, perhaps I should show why Quarto is a great choice for a technical blog in academia and discuss the tech stack for this site more generally.
Sounds like a good first blog post!
Quarto
Quarto’s web site describes it as
An open-source scientific and technical publishing system
From my perspective, that means that it’s built to facilitate the process of creating webpages and PDFs using tools that those of us in the technical disciplines are familiar with. Here are a few of the highlights:
Input
For the most part, the primary content of Quarto documents are authored in markdown. Quarto’s markdown syntax is extended a bit but still much lighter than HTML or LaTeX, which is a major draw for me.
Output
Quarto can create documents in multiple formats, including HTML, PDF, Word, and Open Office. You can view this page in PDF format, for example. Quarto can also produce several presentation formats, such as Powerpoint, Beamer, and RevealJS. All of this is super convenient in an academic context; I can write my webpages, presentations, and exams all with this same tool. You can view this very post in PDF format, for example.
Mathematical typesetting
If you’re writing in a technical discipline, then you need mathematical typesetting. The de facto standard for writing mathematics is LaTeX, so Quarto translates LaTeX snippets into mathematics in HTML or PDF. For example, to write
If \(f(x) = e^{-x^2}\), then \[\int_{-\infty}^{\infty} f(x) \, dx = \sqrt{\pi}.\]
I could type
If $f(x) = e^{-x^2}$, then
$$\int_{-\infty}^{\infty} f(x) \, dx = \sqrt{\pi}.$$The result can be rendered using either MathJax or KaTeX in an HTML setting or using LaTeX itself within a PDF.
Computer code
Quarto makes it easy to incorporate code into your documents. You can display the input, display the output, or integrate that output into your document. We might sum the first 100 positive integers and display the result for example:
You can incorporate Python, Julia, R, or Javascript in this manner. For more complicated cases, you can fold the code or hide it all together.
Figures with Code
I find it particularly convenient to generate images using code that is embedded right in the document. It’s nice to have that code for the image tied to the source code for later reference. In this situation, I’ll typically hide the code or fold it up, as the next example shows. In that example, you can choose to to view a bar chart for letters by frequency sorted either alphabetically or by frequency.
Here’s an example that uses Python to do this. Note that you could just as easily use Julia or R for this purpose.
Code
import pandas as pd
import matplotlib.pyplot as plt
letters = pd.read_csv("./components/letters.csv")
plt.figure(figsize=(8, 4))
plt.bar(letters["letter"], letters["frequency"], edgecolor='black')
plt.xlabel("Letter")
plt.ylabel("Frequency")
plt.tight_layout()
ax = plt.gca()
ax.set_aspect(80)
plt.show()
Code
import pandas as pd
import matplotlib.pyplot as plt
letters = pd.read_csv("./components/letters.csv")
fig, ax = plt.subplots(figsize=(8, 4), facecolor="#222")
ax.set_facecolor("#222")
plt.bar(letters["letter"], letters["frequency"], edgecolor='white')
plt.xlabel("Letter")
plt.ylabel("Frequency")
plt.tight_layout()
ax.tick_params(colors="white")
ax.spines[:].set_color("white")
ax.set_xlabel("Letter", color="white")
ax.set_ylabel("Frequency", color="white")
ax.set_aspect(80)
plt.show()
Code
import pandas as pd
import matplotlib.pyplot as plt
letters = pd.read_csv("./components/letters.csv")
letters = letters.sort_values('letter')
plt.figure(figsize=(8, 4))
plt.bar(letters["letter"], letters["frequency"], edgecolor='black')
plt.xlabel("Letter")
plt.ylabel("Frequency")
plt.tight_layout()
ax = plt.gca()
ax.set_aspect(80)
plt.show()
Code
import pandas as pd
import matplotlib.pyplot as plt
letters = pd.read_csv("./components/letters.csv")
letters = letters.sort_values('letter')
fig, ax = plt.subplots(figsize=(8, 4), facecolor="#222")
ax.set_facecolor("#222")
plt.bar(letters["letter"], letters["frequency"], edgecolor='white')
plt.xlabel("Letter")
plt.ylabel("Frequency")
plt.tight_layout()
ax.tick_params(colors="white")
ax.spines[:].set_color("white")
ax.set_xlabel("Letter", color="white")
ax.set_ylabel("Frequency", color="white")
ax.set_aspect(80)
plt.show()
Note that the “Letters by frequency”/“Letters alphabetically” buttons (shown only in the web version) are created using a so-called tabset. There are quite a few of those kinds of goodies that come easy with Quarto.
Figures and interactivity
You can make your figures interactive, if you’re willing to work with Javascript a bit. In the image below, the bars are sortable in response to a radio selector in a dynamic way that Python can’t quite match.
The code for this example is about 135 lines long and can be viewed in the components folder of this document’s GitHub Repo.
Another obvious issue is that interactive content can only be included in HTML based formats. Quarto makes it easy, though, to web and PDF versions of in your output.
Light/Dark modes
Another HTML goodie that Quarto makes relatively easy is creating webpages that respect your user’s light and dark mode preferences. It turns out that Gen-Z (including today’s college students) generally dig dark mode so this is worth using, if you’re an academic. You might notice the icon in the navbar at the top of the page. This allows you to switch back and forth so you can check it out!
Deployment
This blog is hosted on a Digital Ocean droplet, as is Mark’s Math itself, which gives me complete control over the webserver configuration. There are easier ways to deploy websites, though, and Quarto facilitates the process that process to a variety of popular services like GitHub Pages, Netlify, Confluence, and more. They even support their own service called Quarto Pub.
Comments