About This Website

Launched in 2025, ryppl.net is the personal website of Risp. It hosts a growing collection of essays on Science, Technology, Philosophy, everyday observations, and other areas of interest. The site emerged from a simple problem: thoughts accumulated in a Zettelkasten faster than they could be put to use. ryppl.net gives those ideas space to exist—essays, poetry, and anything else that deserves to be written and shared.

Content

Target Audience

This site is written for three main audiences: my future self, current and future language models, and everyone else. The questions that guide my work are practical ones. What might my future self want to read that I can write about now? Is what I’m writing useful for an LLM in the future? If I had an audience of ten, what would I talk to them about? What about an audience of ten thousand? These questions shape not just the content, but the structure and accessibility of every page.

ryppl.net also holds space for the less structured: blog posts about everyday experiences, observations that resist neat categorization, and the occasional stanzas of poetry. Here, my aims shift from utility to expression, from what my future self might need to what my present self wishes to preserve.

Navigation

Tentatively, navigation is simply linear. On the left sidebar is a drop-down menu which lists pages published sequentially. At the time of writing, this consists of a modest 2-3 pages. On the right is a graph view equivalent to Obsidian’s graph view; pages are tagged and any common tags link two pages together. This allows one to find related pages there. Until this site is more populated, I expect the Graph View will look rather boring.

I have ideas about adding a Header section at the top of each page for quicker navigation, but I am not sure yet. As I accumulate more pages, I plan to switch to a tree structure (a hierarchical arrangement of a set of nodes, where each node contains either more nodes or ‘leaves’).

Confidence Tags

Confidence tags serve as a metric for my level of confidence in my writing. Obviously, there will be topics that I am more comfortable with, and others which are more exploratory in nature. Currently, the rating system is a work in progress.

On Writing

When treated as a serious endeavour, writing can be just as technical as any other pursuit. There are many nuances in what is said and how something can be said. As I pay more attention, I’ve noticed issues in my writing, ranging from mistakes in diction, punctuation, spelling, and inconsistency between British and American usage, among others.

My solution is to automate as much of this endeavour as possible. By having checkers run in the background, poor word choice and typography errors are corrected immediately. After I have completed a draft, I also pass it through another series of checkers as an added measure.

The list of language checks made during and after my writing include,

• check for logical quotation

• check quotation conventions and editorial signals

• check for the word “significant/significantly/significance” and substitute for substantially, or insert “statistically” where appropriate ¹

• custom hotstrings and spellchecker/autocorrect for brevity, diction, shorthand, spelling, and style via AutoHotkey

• proselint checks

Other miscellaneous writing principles, in no order:

• write shorter paragraphs

• better to sound monotonous than confusing

• words that are related should be close together

• affirmative sentences are clearer than negative sentences

Structure

All folders and most pages can be found via the Explorer drop-down menu on the left. Folders consist of pages that are similar in topic but only certain topics are promoted to folder-level. All other topics are left to be grouped automatically via the tag system, which is also visualized via the Graph View component. Folders may contain sub-folders, but this has yet to be implemented in the current content structure.

Pages consist of more formal essays to less formal reflections or informal writing. Each page should contain at least one section, unless it is a page displaying other pages in which case other elements in the right sidebar will also be omitted (e.g. folder and tag pages). Some pages may begin with an epigraph or column blockquote to display important reminders.

• Page titles should be succinct and less than 10 words long.
• Page descriptions should be kept to two sentences long.
• Dates are formatted as Month DD, YYYY in the page frontmatter but may be displayed as YYYY-MM or YYYY-MM-DD elsewhere on the site.

Sections should be at least two paragraphs long, and each paragraph should be at least one sentence long. Section headers should be less than seven words long and use mixed title case. This avoids text wrapping in the Table of Contents.

Body text may contain superscripts as a means to insert footnotes, or subscripts as a means to display in-line citations. Both should contain either numbers or a combination of numbers and text up to 12 characters long. Numbers zero through nine may sometimes be spelled out in text but numbers greater than nine will be displayed as numerals with commas. There is no rule for when numbers should be spelled out or left as numerals.

Tags should be less than four words long. Each tag has its own page consisting of all pages with that tag, but tag-pages are only accessible by clicking on the respective tags.

If applicable, pages may end with a “See Also” section and/or Footnote section. Footnotes should be kept to one paragraph in length, otherwise it may deserve more paragraphs of its own in the main body.

Infrastructure

In brief, ryppl.net is implemented as a static site generated using Quartz4. Source files are written in Markdown while Quartz files are composed of Typescript files, SCSS files and client-side scripts. Node handles all the steps needed to convert Typescript to Javascript, combines the SCSS files into a single CSS, and places any scripts into the HTML files directly. Using a combination of filters and plugins, the content is rendered into static HTML to build the site.

For more information, check out the Quartz website page on the Architecture directly.

Hosting

ryppl.net is freely hosted on the Cloudflare CDN. Alternatively, one may also use Github Pages to host their Quartz site, as outlined on the Quartz website page on Hosting.

Popularity

About two months since starting ryppl.net, I have finally found the time to look at the site’s web traffic. According to Cloudflare’s analytics, ryppl.net has received traffic from across the globe, totalling to just over 60 unique visitors with a total of nearly 400 requests through Cloudflare.

Though these numbers are tiny, they offer some motivation to keep writing as I know that my work has a measurable contribution to the greater Internet. If you are interested, the countries with the most traffic are listed in the dropdown below.

Show

Rank	Country
1	Canada
2	USA
3	South Korea
4	Singapore
5	France

Source

The revision history is logged in git; whenever new changes are synced to my private repository, Cloudflare will deploy a new version of the site within seconds.

Design

Motivations

Like most personal websites, ryppl.net prefers fast performance and easy accessibility to pages across the site. My core principles when building this site are listed in no specific order:

1. Minimalism
2. Speed and Performance
3. Predictability

One might wonder why I chose to use Quartz over other static site generators, like Hugo, Quarto or Github Pages. The reasons being, Quarto has had complaints of being slow and I did not want to risk that experience; Hugo was unfamiliar to me and, like Github Pages, didn’t have as much scaffolding for me to build on, unlike Quartz (I especially like the Graph View).

Features

On your left, you may toggle between light- and dark-mode ( / ) or use the search bar () to search the site. Below that is the Explorer, a drop-down menu to help you navigate around the site. Within the Explorer are pages and individual subfolders that contain more pages. Clicking on the site logo sends you back to the landing page.

On your right, you will find a Graph View showing connections between pages based on their tags. Clicking on the top-right icon in the Graph View opens a pop-over that displays all papges on the site and their connections. Clicking on individual nodes sends you to the specific page. Below that is a Table of Contents which reveals your current scolling position on the page by highlighting headings; this is an in-built feature of Quartz. Backlinks are one-directional and link back to pages that referenced the current page. Finally, floating buttons help scroll to the top or bottom of the page.

The current feature set heavily builds upon Quartz 4’s existing capabilities, with plans to further extend the site’s CSS functionality and visual elements in the future.

Design Principles

1. Minimalism
   The black-and-white aesthetic screams minimalist, if you haven’t already noticed. I believe that minimalism helps one focus on the content in front of them—the most important thing this website has to offer—rather than getting distracted by fancy animations or images. Purists may argue that the site can be further simplified—and they are right! The Graph View can be condensed to an “Related” section, and the animations dropped. However, I find the current implementation to strike an acceptable balance between minimalism, speed and accessibility, and with sufficient features that let me explore various themes and styles of emphasis throughout my work.

2. Speed and Performance
   Quartz4 uses Single-page-app style rendering, also known as SPA routing. As a user, you can expect fast and smooth loading between pages. I learned about SPA routing through an analogy, so perhaps it may prove helpful to you too:

   Traditional static sites load an entirely new HTML page from the server every time you click on it, resulting in a slight delay when navigating pages. This is like flipping through pages in a physical magazine, where the time delay is represented by duration to flip a page.
   SPA routing reduces delay because it re-renders content inside a single, persistent page. This is like swiping through pages on a digital magazine from your kindle, where the text changes when you swipe but the unit containing and displaying your information remains unchanged.

3. Predictability
   Most people are already familiar with the gestures, tools and symbols that represent various actions that they can perform on a website, and carry those expectations to other sites they visit. ² There is no reason to break convention; again, I do not want to distract readers from the content in front of them.

Other miscellaneous design principles, in no order:

• repeat style choices

• consistency over coherence

• visual design is not decoration

• do not center text unecessarily

• the eyes follow a ‘Z’-shaped path

• “they might never tell you it’s broken”

• if you’re doing something three times, fix it

• elements in close proximity will be perceived as related

Style

This website contains a multitude of design changes. Many of them are motivated by practical choices and several others by stylistic ones. I explain these choices below.

Size and Spacing

• Headers scale in size exponentially
  Using a $1.25^n$ scale ratio, where $n=0$ for body text, $n$ increases in integer increments for headers and the page title. A typescale like this one may prove helpful.

• Body paragraphs, Explorer, ToC and Backlinks are indented
  The body text is indented more noticeably to meet the 50-80 character limit, but this is also a stylistic choice: it is a remnant from when I used to indent my writing to the left and leave a margin on the right while writing essays on paper. I liked the way it looked, so I carried that style over to the website.

• Customized relative margins and paddings
  Working in relative units, I adjusted the margins and paddings for individual components to my satisfaction. Using px may lead to chaotic arrangements that could only get worse with different resolutions, devices and font styles/decorations.

Typography and Color

Three main fonts are used across the website: Headers use a serif font, Noto Serif, while body text use sans serif, Noto Sans. Dropcaps make use of Times New Roman exclusively. All three are available in various weights on Google Fonts.

The arrangement, size and spacing of text style properties were adjusted to suit stylistic preferences and meet acessibility standards (WCAG AA level for text spacing). Additionally, body text is best kept within 50-80 characters to reduce reading fatigue. ³

Show

Success Criterion

In content implemented using markup languages that support the following text style properties, no loss of content or functionality occurs by setting all of the following and by changing no other style property:

• Line height (line spacing) to at least 1.5 times the font size;
• Spacing following paragraphs to at least 2 times the font size;
• Letter spacing (tracking) to at least 0.12 times the font size;
• Word spacing to at least 0.16 times the font size.

Exception: Human languages and scripts that do not make use of one or more of these text style properties in written text can conform using only the properties that exist for that combination of language and script.

• The choice between sans serif or serif for body text is an arbitrary one: on digital interfaces, research has showed little difference between the readability of the two for body text. Pick your preference.

• Font weights were stylistically chosen; smaller weight and size for code, larger weight for body text and headers.

Colors were specifically chosen to fit the minimalistic, gray scale theme and meet acessibility standards (WCAG AA level for color contrast). Where text is concerned, that means having a $4.5:1$ contrast ratio as a minimum. Although numeric RGB or HSB steps increase linearly, we perceive these changes nonlinearly.⁴ As such, spacing neutrals requires working in lightness spaces (such as CIELUV) and then converting the colors chosen back to hex code.

Quartz has nine colors for each mode. Excluding the TextHighlight color (I wanted a specific non-gray color for this), the color range required at least eight shades of gray. However, eight options lacked a ‘middle’ value, so I opted for a perceptually uniform range of nine instead and then omitted one of the colors in the lighter half of the range.

Taking inspiration from IBM’s Carbon Design System, I generated the 9-step color range and mapped eight of them to colors used throughout the site. For CSS elements with variable opacity, I simply added an opacity value to the hex code. Lastly, one shade of Gold was chosen for the TextHighlight color in each mode that adhered to the above requirements.

• For example, blockquotes have a background color equal to the tertiary value but with lower opacity (#4d4d4d10). See Quartz Changelog for more information.

• One may find a tool like HSLuv helpful for this conversion.

• For more information about where these colors are applied, see the official Quartz configuration documentation.

Show

quartz.config.ts

const colorLight_light = "#fdfdfd"
const colorLight_dark = "#f3f3f3"
const colorLightgray = "#dfdfdf"
const colorGray = "#898989"
const colorDarkgray = "#343434"
const colorDark = "#1b1b1b"
const colorSecondary = "#4d4d4dff"
const colorTertiary = "#c6c6c6ff"
const colorHighlight = "#89898933"
const colorTextHighlight_light = "#7D6E00ff"
const colorTextHighlight_dark = "#FFD700a0"
 
typography: {
         header: {
         name: "Noto Serif",
         weights: [400, 600, 700],
         includeItalic: true,
       },
       body: {
         name: "Noto Sans",
         weights: [400, 500, 600, 700, 800],
         includeItalic: true,
       },
       code: {
         name: "IBM Plex Mono",
         weights: [400, 600],
         includeItalic: true,
       },
     },

License

In general, I believe it is more important that people know where creative works come from than it is that authors and artists receive full credit. Creative works are meant to be admired, to inspire and to foster thoughtful reflection. I do not want copyright laws to be a barrier to these goals, and thus all content on this website may be considered entirely in the public domain. In other words, this site is licensed under the Creative Commons public domain license and I relinquish copyright protection to all works of authorship here.

If you do distribute or modify content from ryppl.net, I would greatly appreciate it if you referred back to the site as that stimulates more traffic, gives back to open-source / freely available content, and motivates me to continue writing.

Disclaimer

Although some people in my life will be referenced from time to time, the opinions expressed here are my entirely my own; they do not reflect the views or values of my friends, family, colleagues, or employers, with whom this site has no affiliations whatsoever.

Contact Me

Email: rypplcontact [at] gmail [dot] com
Send me anonymous feedback: Click here

Footnotes

1. Substantially is less ambiguous outside of statistical contexts; one should also make clear whether they mean significance in effect size or in “statistical significance” used for inferential statistics. ↩

2. Jakob’s Law states that users spend most of their time on other sites. Thus, they prefer a site that works the same way as all the other sites they already know. ↩

3. According to Google and UX designers, 50-80 characters per line of text or code is ideal for readability. ↩

4. In fact, our eyes are more sensitive to changes in darker tones compared to lighter ones. ↩