Tech Demo

posted on 2024-05-08 updated on 2024-07-02

This is just a little playground to test if I can get what I want to use for my blog working.

Twemoji

I’ve set up Twemoji injection a long while ago, but here it is:

:people_hugging:

PS: I’ve also set up remark-emoji to make typing emoji less of a pain. :people_hugging: doesn’t work right now and I’ll look into it when I’m free.

PPS: It’s caused by emojilib. There’s progress made by people far smarter than me done at Issue muan/emojilib#194 and Pull Request muan/emojilib#226 and it’s quite encouraging.

LaTeX

Here’s the (in)famous Euler’s formula written using remark-math and rehype-katex.

PS on 2024-07-01: I’ve removed KaTeX CSS and opted to just use MathML with an increased font size. KaTeX’s CSS bundle is quite large and since I’d probably write very little math on this website, it’s best to keep it lightweight.

Syntax Highlighting & Image support (It’s there but I wanted to add some CSS)

Python code snippet with line numbers and highlighting

Here’s a code snippet I wrote for my assignment for EIE3331 Communication Fundamentals:

#!/usr/bin/env python3

from numpy import pi, cos, linspace
import matplotlib.pyplot as p

ABCD = 5227 # last four digits of student ID to be sent

t = linspace(start=0, stop=10**-4, num=10**4) # time range = [0, 10^-4]

f_c = 10**6 # carrier frequency 10^6 Hz

v_ct = 1000 * cos(2 * pi * f_c * t) # carrier signal v_c(t)

f_m = 10**4 # message frequency 10^4 Hz
mt = ABCD/1000 * cos(2 * pi * f_m * t) # message signal m(t)

v_at = mt * v_ct # DSB-SC signal v_a(t)

p.plot(t, v_at, color='k', linewidth=.5, clip_on=False)

p.ticklabel_format(style='scientific', axis='both', scilimits=(0,0), useMathText=True) # make the tick labels look less ugly
p.grid(visible=True, alpha=.5)
p.margins(0)

p.title('Waveform of DSB-SC signal $v_a(t)$ for $abcd = 5227$')
p.xlabel('$t$')
p.ylabel('Amplitude Level')

p.savefig('q1.eps', bbox_inches='tight')
p.savefig('dsb-sc.svg', bbox_inches='tight')
p.show()

Console output without line numbers

Here’s a console output without line numbers:

tim@x13 ~> echo  | cowsay
 _______
<  >
 -------
        \   ^__^
         \  (oo)\_______
            (__)\       )\/\
                ||----w |
                ||     ||

Weather Cards

I wrote some code to fetch weather data from the Hong Kong Observatory a while ago dynamically. Since this website ships no JavaScript to the client, it’s only rendered on the server and not updated client-side. Just keep that in mind.

PS on 2024-07-02: I originally planned to do this, but this would mean the website would no longer be statically generated, which is not something I would to forgo. Sad!

Jyutping

Some Jyutping injection! No JavaScript needed! Powered by @CanCLID/to-jyutping.

睇tai2得dak1明ming4嘅ge3話waa2，同tung4我ngo5講gong2 「」啦la1！

昔sik1者ze2莊zong1周zau1夢mung6為wai4胡wu4蝶dip6，栩heoi2栩heoi2然jin4胡wu4蝶dip6也jaa5！不bat1知zi1周zau1也jaa5。俄ngo4然jin4覺gaau3，則zak1蘧keoi4蘧keoi4然jin4周zau1也jaa5。不bat1知zi1周zau1之zi1夢mung6為wai4胡wu4蝶dip6與jyu5，胡wu4蝶dip6之zi1夢mung6為wai4周zau1與jyu5？

Note that the result is not perfect. For example, 與 was rendered as jyu5, but which should have been jyu4 in the literary/archaic sense.