Hi, How Are You?

Welcome to my new blog! Gone is my former WordPress site. This is the first post on a new site I created myself. It’s JavaScript from head to heel using the amazing site generator Gatsby and styled-components for the design and layout. The latter relies heavily on the awesome CSS grid, by the way.

Why Did I Do This?

When writing papers in an academic environment, the goal is to make them as compact as possible, easy and quick to read and understand. In such writings, the inclusion of as many results as possible is often more important than pointing out the path that led to those results.

This is why it is so difficult to understand papers from topics other than one’s own and to find access to new fields. With this blog I want to try to create a more intuitive access for people who feel the same. Maybe we can find better insights into foreign fields while interacting and reading about each others works. That is my motivation and the goal of this project.

How Did I Do This?

The site is fully responsive, built with Gatsby, has fluid typography, relies heavily on React Hooks for stateful function components and CSS grid for layout. It uses the following libraries:

• MDX for interactive content.
• styled-components for appearance + DarkMode.
• KaTeX for typesetting math.
• gatsby-remark-vscode for syntax highlighting.
• Disqus for blog post comments - I’d appreciate if you left a comment under the blog posts
• Algolia for custom search.
• react-spring for animations.

In the following I will test a few of these libraries here.

Dark Mode

All the cool kids these days have websites with a dark color scheme. The really cool kids even have a dark and a light mode with a neat little toggle for you to pick your preference. Being regularly annoyed myself when browsing pages that insist on being eye-piercingly bright even late in the evening, I decided that my site needs a dark mode as well. In dark mode, the website adopts a darker color palette for all windows, views, menus, and controls. The system also uses more vibrancy to make foreground content stand out against the darker backgrounds.

The major parts of this implementation were heavily inspired by Joshua Comeau, a Gatsby core member. You can read about his dark mode implementation in this awesome post.

To try out the dark mode on this site, click/tap this toggle:

MDX

MDX is an authorable format that lets you seamlessly write JSX in your Markdown documents. You can import components, such as interactive charts or alerts, and embed them within your content. This makes writing long-form content with components a blast. The possibilities and authoring experience when creating content for the web have advanced by leaps and bounds in recent years. MDX — the latest in a long line of game-changing innovations — allows writers to sprinkle snippets of JSX directly into their markdown content (hence MDX). Think about WordPress shortcodes but fancier. Not only does this open up seemingly endless possibilities in terms of more interactive and engaging content, it also facilitates the clear separation of code and content (i.e. no more need to write text directly into .js files).

But let’s not lose too many words and experience MDX using two examples.

Framework Popularity

Let’s start simple with a 2d plot.

Frontend framework popularity over time measured by Google search frequency. Source: Google Trends

All the MDX this requires is

import fpProps from './frameworkPopularity'

### Frontend Framework Popularity

<LazyPlot {...fpProps} />

const colors = [`red`, `green`, `blue`, `orange`]

// prettier-ignore
const months = [`2012/01`, `2012/02`, `2012/03`, `2012/04`, `2012/05`, `2012/06`, `2012/07`, `2012/08`, `2012/09`, `2012/10`, `2012/11`, `2012/12`, `2013/01`, `2013/02`, `2013/03`, `2013/04`, `2013/05`, `2013/06`, `2013/07`, `2013/08`, `2013/09`, `2013/10`, `2013/11`, `2013/12`, `2014/01`, `2014/02`, `2014/03`, `2014/04`, `2014/05`, `2014/06`, `2014/07`, `2014/08`, `2014/09`, `2014/10`, `2014/11`, `2014/12`, `2015/01`, `2015/02`, `2015/03`, `2015/04`, `2015/05`, `2015/06`, `2015/07`, `2015/08`, `2015/09`, `2015/10`, `2015/11`, `2015/12`, `2016/01`, `2016/02`, `2016/03`, `2016/04`, `2016/05`, `2016/06`, `2016/07`, `2016/08`, `2016/09`, `2016/10`, `2016/11`, `2016/12`, `2017/01`, `2017/02`, `2017/03`, `2017/04`, `2017/05`, `2017/06`, `2017/07`, `2017/08`, `2017/09`, `2017/10`, `2017/11`, `2017/12`, `2018/01`, `2018/02`, `2018/03`, `2018/04`, `2018/05`, `2018/06`, `2018/07`, `2018/08`]

// prettier-ignore
const data = {
  React: [2, 2, 3, 3, 3, 2, 2, 2, 3, 3, 3, 3, 2, 3, 3, 3, 2, 2, 3, 3, 3, 4, 4, 3, 4, 4, 5, 5, 5, 5, 6, 7, 7, 10, 10, 10, 13, 18, 18, 19, 20, 21, 24, 25, 27, 28, 29, 29, 32, 39, 39, 41, 42, 43, 41, 43, 41, 47, 49, 50, 55, 65, 68, 68, 71, 79, 76, 83, 73, 80, 74, 66, 74, 82, 88, 89, 94, 95, 98, 100],
  AngularJS: [1, 1, 1, 2, 3, 3, 4, 4, 4, 6, 8, 9, 11, 13, 17, 17, 20, 22, 25, 24, 23, 30, 33, 35, 39, 41, 45, 49, 53, 53, 58, 51, 48, 52, 58, 61, 60, 61, 69, 74, 67, 67, 65, 58, 57, 53, 61, 62, 59, 59, 64, 56, 59, 51, 53, 51, 51, 54, 57, 62, 55, 55, 55, 51, 52, 47, 46, 41, 34, 37, 41, 38, 37, 38, 38, 35, 35],
  Angular: [2, 2, 2, 2, 2, 3, 3, 3, 3, 3, 5, 5, 6, 6, 8, 7, 9, 9, 12, 12, 11, 13, 15, 15, 16, 17, 20, 20, 21, 20, 24, 22, 20, 24, 27, 26, 29, 30, 33, 35, 33, 34, 31, 30, 29, 29, 32, 36, 33, 37, 40, 35, 36, 38, 36, 38, 36, 42, 48, 52, 49, 49, 55, 48, 55, 49, 52, 51, 44, 48, 53, 53, 54, 56, 54, 60, 56],
  Vue: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 2, 2, 1, 2, 3, 3, 3, 3, 3, 4, 5, 5, 6, 6, 8, 8, 8, 9, 10, 10, 12, 12, 12, 12, 12, 14, 14, 16, 16, 16, 18, 18, 19]
}

export default {
  data: Object.keys(data).map((key, index) => ({
    x: months,
    y: data[key],
    type: `scatter`,
    mode: `lines+markers`,
    name: key,
    marker: { color: colors[index] },
  })),
}

Trimodal Distribution

Let’s look at the following surface. This one is a trimodal distribution consisting of three unnormalized Gaussians.

$\exp[-\frac{1}{20}(x^2 + y^2)] + \exp\{-\frac{1}{10}[(x-10)^2 + y^2]\} + \exp\{-\frac{1}{10}[(x-7)^2 + (y-7)^2]\}$.

This is generated by

import triModalProps from './triModal'

### Trimodal Distribution

<LazyPlot {...triModalProps} />

const [points, middle] = [51, 25]
const range = Array.from(Array(points), (e, i) => 0.5 * (i - middle))
const z = range.map(x =>
  range.map(
    y =>
      Math.exp(-0.05 * (x ** 2 + y ** 2)) +
      0.7 * Math.exp(-0.1 * ((x - 10) ** 2 + y ** 2)) +
      0.5 * Math.exp(-0.1 * ((x + 7) ** 2 + (y - 7) ** 2))
  )
)

export default {
  data: [
    {
      z,
      x: range,
      y: range,
      type: `surface`,
      contours: {
        z: {
          show: true,
          usecolormap: true,
          highlightcolor: `white`,
          project: { z: true },
        },
      },
      showscale: false,
    },
  ],
  style: { height: `30em` },
}

KaTeX

People who know me are aware of the fact that I don’t like how LaTeX is used in many blogs. A form of implementing LaTeX is often provided, but unfortunately only a picture of it is rendered. Obviously, this is neither particularly practical, nor is it beautiful or contemporary. MathJax was also unable to completely convince me. Finally I came across KaTeX, which is not perfect at all, but for me personally it brings the most advantages. Some major advantages:

1. Fast: KaTeX renders its math synchronously and doesn’t need to reflow the page.
2. Print quality: KaTeX’s layout is based on Donald Knuth’s TeX, the gold standard for math typesetting.
3. Self contained: KaTeX has no dependencies and can easily be bundled with your website resources.
4. Server side rendering: KaTeX produces the same output regardless of browser or environment, so you can pre-render expressions using Node.js and send them as plain HTML.

Examples

Procreate

I would also like to thank the people of Procreate. Procreate is really a game changer when it comes to drawing on a tablet. With the help of this app, I was able to design the drawings and graphics on this website. Even if I’m far from being good at it, of course.

Outro

In case you’re considering switching your own site to Gatsby or more generally the JAMstack, I definitely recommend it. It was an incredibly enjoyable learning experience. Gatsby is open-source, has excellent docs and an awesome team of maintainers allowing you to contribute your own code and ideas to the project anytime you like.

At this point I’ve pretty much run out of things to say. And admittedly, this post is mostly for testing purposes anyway.

Next post →

General Relativity as a Field Theory