Colophon
This site is the culmination of my endless experimentations in web design. I’m proud to admit that the site is built with visual delight in mind, with practicality and performance taking somewhat of a back seat.
Principled publishing
A colophon is where designers tell the world how they made the site. The practice dates back to ancient times, including Mesopotamian clay tablets, Buddhist sutras, and Medieval Islamic manuscripts. Some colophons contained book curses, though there are none in this one, that I know of.
Print publishing continued this tradition and it eventually made its way into digital and web publishing. If you share my strange habit of peeking under the hood of every beautiful site to see how they are made, this is for you. I know the joy of finding colophons. Let’s dive in.
Technical tools
The site is built with Astro using Vanilla JS and Tailwind CSS. It’s deployed as a static site with minimal client-side JavaScript rendering. I try to use pure CSS wherever possible for the motion and interactive design.
Server-side rendering, image optimisation, and routing are done during the build process to turn my notes into web pages. I write my notes in Markdown and decided to keep them free of component elements. I toyed with the idea of using MDX to supercharge the design process, but I prefer to keep my notes free of such distractions so I can focus on the writing.
I worked on the creative direction of the site’s design, information architecture, and feature set. The coding is done in Cursor, an AI code editor, using the updated Claude 3.5 Sonnet model. I’m well-versed in HTML and CSS, but JavaScript has always been my Achilles heel. Cursor helped me power through bugs and errors, improved my code, and did the heavy lifting for tedious and repetitive tasks.
Content crafting
My notes start as ideas that I write down in bullet points to quickly capture my thoughts. Bear is my preferred PKM system. These are then fleshed out into full articles before publication. Being the perfectionist, I often let these articles sit and marinate in my notes for months or years before they ever see daylight.
While I still believe in giving my writing time to grow, such as through getting inspired by adjacent or completely unrelated topics, I’ve come to value giving them wings before they mature to help them grow even more.
When the notes are ready, I move them into Markdown files that are committed to my personal GitHub repository. These are then pushed to Cloudflare Pages where this site is hosted. I know it would be easier to use tools like Obsidian or Logseq to write notes directly as Markdown files, but I have a weak spot for beautiful design, and writing in Bear is such a delightful process that I feel it helps me think and write better.
Typography touches
The site uses Sofia Pro by Mostardesign Studio for headings and body text in English, Source Han Sans by Adobe Originals for Simplified Chinese, and Calling Code by Dharma Type for monospaced text. All web fonts are served by Adobe Fonts.
While I prefer reading long-form writing in serif, I’ve always felt that geometric sans-serif type is closer to my personality.
The taglines in featured images are set in Corporate S by URW Type Foundry, the brand typeface used by Leica. This is a nod to my love for Leica cameras – if the red dot favicon and logo haven’t given enough hint already.
Fonts are preloaded rather than lazy loaded to ensure my opinionated typography loads fast. I use modern fluid typography technique that combines mathematical calculations and CSS clamp to allows smooth scaling of font size based on the screen.
Editorial style
I took a module in New Media Design in university and discovered both the importance of and my obsession for style guides. I prefer to write in British English with Hart’s Rule, also known as the Oxford Manual of Style, as my personal style guide.
Over the years, I’ve adapted Hart’s Rule to develop my own style guides for sites that I create and edit, depending on the needs and how information is presented for each of them. They generally include the Oxford comma, en dashes for ranges, and em dashes for parenthetical phrases—a practice you’ll notice throughout this site.
My typographic choices extend beyond font selection to minute details like the use of proper quotation marks (“curly quotes”) over straight ones, true em dashes — rather than improvised substitutes with double hyphens --, and maintaining consistent spacing around punctuation marks. While these subtle refinements might go unnoticed by most readers, they contribute to an intangible sense of polish and professionalism that enhances the reading experience, even at a subconscious level.
For Chinese content, I have developed my personal preferences developed from years of bilingual writing. This includes precise spacing around Chinese punctuation and thoughtful breathing room between Chinese and English characters. For example, I maintain careful spacing in mixed-language phrases like “使用 Git 作版本控制” rather than “使用Git作版本控制” to improve readability.
History
My journey in web publishing began on Blogger shortly after its launch in 1999. When I realized the importance of having my own corner of the internet, I purchased my first domain iamjenxi.com and built my self-hosted personal site in 2002.
The site first ran on Movable Type, a content management system (CMS) that generated webpages as HTML files. It loaded fast as a fully static site, but required rebuilding each time something changed. So I started playing with dynamic CMS options such as Drupal, Joomla, and Typo3. My experimentation with hosted Wordpress.com sites as an alternative to Blogger and my frustration with Movable Type led me to switch to WordPress within a year. The site has been powered by WordPress for well over twenty years.
I’ve experimented with static site generators like Jekyll, Gatsby, and Hugo, but full static sites lacked features that prevented me from switching. When Anysphere launched Cursor, an AI editor that took the programming world by storm, I tested it on several pet projects to explore NuxtJS and NextJS, two web frameworks I’d been eager to try.
However, I soon realized that using these to build my personal site would be overkill since I wouldn’t need most of their dynamic and interactive features. Astro has impressed me since its launch, and I had been tracking its growth. So it was no surprise that I found myself rebuilding my blog with Astro.
Claude AI helped me complete this iteration in a couple of days, and I was able to run it concurrently on a staging instance before I was happy enough to point the domain over. Thanks to Cloudways, I’m able to set things up in such a way that I can easily switch back to WordPress if needed.
Future plans
This site remains a living document of my web experiments. As a testbed for my latest ideas, these experiments are bound to cause some bugs. Feel free to reach out via any of my social handles in the footer if you encounter issues.
Some features in the pipeline include:
- Improved bilingual content management, preferably with articles available in both languages as a not so subtle flex of my translation abilities
- Refinement of my custom pure CSS photo galleries for a better browsing experience
- Presenting Markdown footnotes as Tufte-style side notes