Table of Content
Ranting Time#
This blog is built using Lume static site generator, which is written in TypeScript and runs on Deno, which not only means countless JavaScript libraries is right on the fingertip to be called, but also, unfortunately, the user and maintainer, have to swallow the bitterness comes out of it.
The very first rant on this project would be how awful Deno's dependency management is. It's like newbie wild survivor packs 500mL of juice instead of 1L of water happily thinking this move not only reduces the weight but also carry extra sugar. Import map helps a lot, but it immediately got beaten to the ground by the fact that Deno has no official tool of upgrading dependencies, despite it has been actively developed for almost 10 years.
The second rant and main concern is, will this project become another e-waste?
One type of e-waste is device that is perfectly fine but abandoned due to reasons like not having enough processing power or simply not fun to play with anymore. That would also be the worst future of this blog.
JavaScript is a poor language that hasn't aged well, and the its dependency ecosystem is straight up garbage in terms of manageability and security. Developers praise for "velocity", praise for the unrestricted ability to pull in dependencies, but the tax of having such freedom isn't noted anywhere.
The feeling of reading and writing clean code is good, and the feeling of having clear overview of dataflow in project is the greatest pleasure. JavaScript with its ecosystem offers none of those. Ah, Motivation is Dead.
The fact this blog is built on top of such a foundation makes me uneasy. If $life takes a lot of time from me, keeping me from gardening my JavaScript for months, will it still build? Or worse, is the motivation still there for me to re-pickup the JavaScript garbage? Is it really, the right choice to do my blog in such way? Let's find out in the future.
Some nice minimalistic text based blog (and platform) for reference:
The remaining of the post will be notes for things learnt from building this blog, also serve as a playground for testing styling and custom features.
Typography#
There's no article without paragraphs, pay some attention to them and the reading experience will level up instantly.
Max Width#
Some study says x characters wide is best and another says y percent is better. I'm comfortable with 70ch so that's it.
lang Attribute#
Every HTMLer learnt to write <html lang="en"> at some point and never gives it another thought ever again.
This may not be relevant for English that much since the characters and punctuations are relatively simple, but the problem unveils itself once someone reaches out for Asian languages. See this demonstration1.
These two phrases have same characters, but the left one is attributed with lang="ja" while the right one is lang="zh", making the browser render them using Japanese and Chinese fonts correspondingly.
This is well-known phenomena caused by the diverged definition of writing and hinting of the same grapheme in different languages, which may result in really really ugly typography if mixed up.
Another pitfall learnt fresh while building this website is that system-ui or ui-* shouldn't be used in font family if i18n is still a concern. Check out this post Never, ever use system-ui as the value of font-family for the reasoning behind it, and see a picture of what the experience of reading Chinese characters looks like, back to the low-DPI-screen-Windows-XP/7 era.
Layout#
This part talks about some layout issues.
Cumulative Layout Shift (CLS)#
web.dev has an excellent article discussing CLS, so no need to repeat the words here.
To combat CLS while keeping the effort low, this website 1) doesn't do complex layout, 2) doesn't use webfonts, 3) uses a Lume plugin to add height and width to <img>s. It ends up pretty well.
Unintentional Horizontal Scroll on Mobile Devices#
Ever visited another person's blog on your phone while taking the subway, the page didn't follow your finger, instead maneuvering left and right? This is almost always caused by element overflow, like embedding a video without capping its maximum width.
Some efforts were put into this site to ensure elements don't overflow, and pray for Safari to not screw things up once again.
Headings#
My rule of thumb is, headings in online articles should be limited to at most two levels, like <h1> with some <h2>. Deeply nested headings may cause the reader to lose their sense of structure of the article.
<h2> Heading#
<h3> Heading#
<h4> Heading#
Styled the same as <h3>, since it's very rarely used (on this website).
<h5> and <h6> Headings#
Never used so they are not styled, Tailwind Preflight should remove default styles from them.
Text Styling#
This part checks out some basic text styling.
italic
bold
bold italian
Monospace Code
Various Blocks#
Quote of another quote
Someone somehow said:
"Somebody at sometime will inevitably do something somewhat without some meaning"
Code block with no language specified.
// highlight.js works well enough (tm)
fn fw() -> ft {
let fm = f!();
fm.fq();
fm
}
All Sorts of Lists#
- Several lists are more lister than others.
- Often the moon stops orbiting to have a rest.
- Mocking what other monkeys do is what makes salt to not spoil.
- Epic examination took place in nyctophobia tunnel.
- W
- H
- A
- T
- G
- ET
- B
- ORED
No sense no problem. It simply makes me feel relaxed.
Links and Multimedia Resources#
Notice there's a mark indicating external links.
Can't see the image? Too bad because it's AVIF. Try to upgrade your browser or smash your outdated iPhone and never buy one again.
Formulas and Charts#
rehype-mathjax is used for adding math support. Formulas are rendered to SVGs during building, no JavaScript or CSS is shipped to client.
Inline
- An
test for recently amspackage.
Charts are not used yet.
Github Flavored Markdown#
Footnotes#
Footnote2 might be useful3 in the future4. By the way, footnotes aren't required to be placed at the bottom of article. They can be inserted anywhere and aggregated later on, at least with the Remark plugin this site is using.
Tables#
Not used for now.
Sidenotes#
May be really nice to have but it will take some efforts to implement and tweak On TODO list for now.
MDX#
This section demonstrates some custom components.
Note, Warning and Caution#
Mimic what Github has, ref: https://github.com/orgs/community/discussions/16925
Note
Note to you, also to me.
Warning
Despite being yellow, it still reads "Note" to a lot of people.
Caution is not yet used.