I built XUANZANG as an ongoing project to introduce Chinese-language writers and podcasts, and share information on where to find physical books, Chinese-supported podcast platforms, and related resources.
All text-based content is written by me, unless otherwise indicated.
The core of the website is organised as follows:
| Section | Description |
|---|---|
| 墨 INK | Introductions to writers and books |
| 嗓 VOICE | Introductions to podcast series |
| 源 SOURCES | Where to get hold of content and study materials |
More content will be added to these sections over time, with new sections also planned - watch this space!
Images used include artworks, photographs, official logos and so on. Attributions are explicit and I have sought permission from their owners to use these images; many have kindly granted this permission, but if you are the author of content here that you would like to be removed or amended, please contact me directly on [email protected].
To run on a local machine for local development, navigate to the root directory and run:
$ npx nodemon index.js
[nodemon] 3.1.3
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): *.*
[nodemon] watching extensions: js,mjs,cjs,json
[nodemon] starting `node index.js`
Serving on port 3000The key tools used to develop this website are Embedded JavaScript, HTML, CSS and Node. The original version of the site made heavy use of the Bootstrap 5 framework, but this has since been reduced to a minimum to exert more direct control on the site's aesthetic.
Images are hosted on Cloudinary, and the site is deployed through Vercel using a CI/CD workflow integrated with this repository.
XUANZANG uses Google Fonts for title text (Oswald: Latin script | ZCOOL QingKe HuangYou: Chinese script) and body text (Source Serif Pro: Latin script | Noto Serif TC: Chinese script).
ZCOOL QingKe HuangYou is primarily designed for simplified Chinese character sets: it contains traditional variants for many - but not all - characters.
XUANZANG makes use of traditional characters, most of which are featured in ZCOOL QingKe HuangYou, though there are a small number of exceptions for which I have had to make use of simplified variants. This isn't ideal, but I love the design of the font and feel it is a minor trade-off. Purists please 諒解 - or better yet, release more fonts! There aren't enough creative designs for Chinese scripts.
To optimise use of web fonts, practices have been adopted from CSS Wizardy's additive method:
- "&display=swap" at the end of the href link is now default with Google Fonts - this allows the system font to load if there is a delay in fetching the web font.
- media="print" to fetch Google Fonts File asynchronously.
- Preload the CSS file to make the asynchronous fetch high priority.
- Preconnect fonts.gstatic.com, disabling the default fonts.googleapis.com preconnect.
- A noscript fallback is also included for instances where JavaScript is disabled.
I learnt the skills needed to build this website by completing Colt Steele's excellent Web Developer Bootcamp on Udemy.