experiments/website/

process & notes on building this website

building a personal website & learning library with wordpress: part I

I’ve been wanting to redesign my personal website ever since I stopped identifying as and tying my self-worth to being a designer. I wanted an online presence that told a better story of who I am and reflected my offline -self more accurately. I did try, but failed because I was trying to be too smart, and was also too concerned with the aesthetic. Apparently even though I no longer identified as a designer I still acted like one.

Philosophy, motivation and inspiration

I like the philosophy behind “The Long Now“: I believe we are in general shortsighted and due to the malleability of the web, we don’t usually build something that would last a long time. As a recovering designer, I was guilty of this. It is typical to redesign our websites every year or so and rearchitect it completely. I mean, we have to reflect the latest trends right (/s)? But we cannot achieve depth without time.

I am also inspired by the idea of “the commonplace book“, and I just wanted one place where I can keep all my notes, resources and journeys.

Previously I aspired to build a peer-to-peer learning network, but I am not sure how long it’ll be before I can start to use it. The nature of that project meant that I may have to be okay with wiping the data and start over, so I didn’t put too much effort in inputting actual data. I want a place where my data can grow, and I want to take a content-first approach.

I’ve collected a list of websites which reminded me having a wealth of content is more important than the form it takes, and I decided to stop obsessing over ingenuity in favour of doing something that will exist sooner rather than later (I am aware there is lack of diversity in this list so let me know if you know of someone):

Also, each time I think I am crazy for doing this, this reddit thread often brings me comfort.

Last of all, I really like the principles behind the Indie Web. I want this website to last, yet not afraid to be continually experimental, and to scratch all my own itches, eating my own dog food.

Choosing a CMS

Why not static or Medium

My writing was divided across Github pages and Medium. I loved Medium and the idea of it, but since becoming designed for members only it has become more painful for people to read my writing. My problem was less of centralisation (I liked aspects of that) and more of the user experience. I don’t want my content to be exclusive in any aspect.

I liked Github pages for its simplicity and the longevity – I mean, upgrading a CMS and maintaining a database is really not fun. I had several old sites I had to migrate when I changed providers, and they were painful to resuscitate when they no longer worked with the latest versions of the CMSes I had used. I really like the idea of everything existing in plain old flat html.

But the reality is there are limitations with what static sites can do (or at least what I can do with them), and publishing on mobile and uploading media for jekyll were painful. So I had to weigh all the tradeoffs. I also contemplated using newer-fangled CMSes like CraftCMS.

Why WordPress

I guess if I wanted to build something that will last for the long term, it makes sense to pick a CMS that has lasted a very long while, being actively developed, and something I really appreciate: a very large community of third-party developers.

Due to my previous experience of developing on WordPress I also knew you can pretty much get it to do anything with its in-built functions and perhaps a couple of plugins (you could probably do everything without plugins but they just make it easier). The site I wanted to build has complicated relationships and a few years ago I managed to develop a complicated prototype with just wordpress and advanced custom fields.

I’ve considerably aged, so I care more about getting things done versus pursuing the hippiest tech.

Complicated relationships

Maybe they are not that complicated, it is just that this site is not a blog with a linear display of chronological entries. My hope is that it will eventually become a interface where I can dynamically query a bunch of content related to each other.

I also want to have a space for my writing, experiments and also a repository for everything I have researched and learned, and their connections to each other should be surfaced, because I write things I learn about or was exposed to. There is a lot of content out there, but they are not connected to each other. I often write about health, specifically mental health. But I cannot write about health without bringing in psychology and the culture of the society I belong to.

People often ask me for resources, and I used to send them a long email of bulleted links. I have also personally used long lists of links and there is so little context to why they are useful. Moreover, sometimes they should be read in a deliberate order.

These were frustrations I had when I designed my p2p learning network. I wanted to wait for it to exist so that the content that is going to live here would have existed there instead. But I realised they were actually separate issues even though they manifested as one: I wanted to store, organize and share the resources I have, and I wanted a peer-to-peer network where anyone could easily share the resources they have.

I don’t have the skills to build an entire network now, but I will take this opportunity to learn what I need to build a personal learning library. The good news is since I am building it for myself, I don’t have to make it universally simple for the sake of scale and ease of use across various demographics, I can make my own library as rich as possible.

An example of content relationships

So take this post for example:

essays winnielim.org
On running, fitness and the narrative of sadness

on why do we associate “sadness” with certain feelings

0 responses

In that post there is this highlight:

“…conversely, exercise unleashes a cascade of neurochemicals and growth factors that can reverse this process, physically bolstering the brain’s infrastructure. In fact, the brain responds like muscles do, growing with use, withering with inactivity. The neurons in the brain connect to one another through “leaves” on treelike branches, and exercise causes those branches to grow and bloom with new buds, thus enhancing brain function at a fundamental level.”

Source: Spark by John J. Ratey, Eric Hagerman | link

Previously, I would link the quote to Goodreads, and that is it. But this is going to be a quote I am going to use repeatedly in other posts, and its source, “Spark”, is also a book that I reference repeatedly. Wouldn’t it be interesting if I can simply use the same link over and over again in a trackable way with accumulative metadata?

So if you click on “Spark” above, it takes you to a resource page. On it now, you can see metadata, as well as some other highlights and where else it exists. For now, you can see it exists in two collections:

image showing collection

A personal learning library

So you can click on a collection and see what other resources are linked to it. Each collection is personally curated to display my learning journey, with all the additional context necessary.

Each linked resource can exist in more than one collection, but wherever it is it will point to the same page, which is useful for collecting metadata and micro-content, like my learning notes. It may have a series of highlights. Every highlight also has its own page and you can see which post it is referenced in:

image showing single highlight page

I don’t know if people would do it, but they can comment on a highlight, book, or collection if they want. Or I could add my own comments.

I can attach collections to posts I write, essentially acting as an interactive bibliography. Again, instead of existing as just a bunch of links, they exist as a separate collection, so they can be referenced in future, built upon, or simply browsed in other contexts. Next time people ask me for resources on psychology I can forward them a link pointing to that collection, which is updated as I go along, so that link is alive, and they can learn along with me!

I am also building a site where it can encourage what people call “rabbit-hole” browsing: you can hit a link that brings you to ten other related links, and it can potentially go on forever…

an image I created to demonstrate the original p2p learning network idea

Everything is raw now as I am building the bare-bones functionality, but there is a whole lot to experiment with.

Design decisions

Visual design

As you can probably tell, I am focusing on the structure, content and functionality, so I am going for a barebones aesthetic now. There is also not much of a grid, and almost everything is displayed in single columns of text. I am aware that some things look odd, and I’ll probably refine it over time.

I have chosen to go for a native font stack because I don’t want people having to load 200kb each time they visit this website and I am also mindful of people with bandwidth constraints: basically Palatino for serif and the default system font for sans-serif, with appropriate fallbacks. I consulted this very useful website. My primary focus now is legibility, so I’ll come back to the typography later.

This will be continuously iterated, especially as I add more types of content.

Information architecture

The obsessive compulsive in me wants to group “journal”, “essays”, and “poetry” all under writing, but I prioritised clarity. What is the difference between journal entries and essays you may ask – sometimes I wonder too –but I’ll like a space where I can write streams of thought without much editing. So my former public journal on Github Pages was migrated to /journal and I’m still in the process of migrating posts from Medium to /essays. I am preparing to have another section titled “notebooks” where they are more wiki-style, and meant to be updated constantly. Notebooks are where I’ll be writing long-term research and learnings: an investigation into my chronic pain, for example.

What you see is what you get, and I saw that the other sites I referenced above were not held back by trying to limit top-level navigation, but I could change my mind.

I had the top level nav existing as a sidebar on the right at first, but I think that would restrict the options I would have in the main content column if I want to have a more complicated content grid. So again, practicality over aesthetic.

Data structuring for the learning library/collections

Right now, each resource is under a custom post type named “resource”, and they live in a custom post type named “collections”. There are other things I need to figure out, like how do I want to handle collections within collections? Right now the plugin I am using (Pods) does not support results from combining fields easily, but I could probably do it via a custom php function.

For a while I struggled if a notebook is just a collection, but I decided that notebooks will give me the space to add long-winded contexts if I need to.

So collections are like shelves of books, whereas notebooks are like an essay referencing those shelves of books. You can choose to browse just the shelves without the additional writing.

I also decided that I cannot overthink it, and the answers will come in trying to use it in actual scenarios. This was actually how there is now a post type named “highlights”, because I came across a highlight while importing an essay from Medium and I saw the loss of opportunity if it was just an orphan quote swimming in the hundreds of posts I write. Or duplicate quotes swimming in places I don’t know. They are titled “highlights” instead of “quotes” because there are different types of resources, and they may not always be text quotes.

In the spirit of experimentation, I cannot be afraid of restructuring things if push comes to shove. Hopefully by then I’ll be better at SQL.

Software

I couldn’t have done this without the Pods plugin (which I made a very small donation to out of guilt and appreciation). The creator made a very useful google spreadsheet that compared similar plugin-types and I went for it over ACF because it supports custom post-types. The documentation can be better but I was told they are getting updated soon, and they have an active Slack support channel…I mean it is a free plugin and they have someone there everyday to help you! It is nuts how much I can do with it, and I am still exploring.

I built the library feature entirely using Pods’ shortcode and its auto-templating feature without writing any custom php. This is an example of how a Pods template look like:

[if collection-item]
	[each collection-item]
		<li>[[pods name="resource" template="single-resource-card" ID="{@ID}"]]</li>
	[/each]
[/if]

Doesn’t that look easier than doing custom WP queries?

Because of the ease of using Pods shortcode I can display collections/resources/highlights in any format I want, like these cards you see peppered in this post. It’ll probably be even easier to display custom queries in future with Gutenberg blocks, I assume.

WordPress & database performance considerations

I am not sure if I’ll run into performance issues with all the micro-content and linked relationships later, honestly I don’t know enough of databases to know. I’ll add caching later – I mean only one person uses this website now: me – but currently WordPress has transient caching which seems to work well. Again, I have no idea what transient caching even means.

Data entry

…is a pain in the ass. I guess that is why I never really had notebooks. But I consciously want this to change in view of the long-term, so I will have to get used to it.

Right now there is not much data as I’ve only just begun, but I’ll add to it over time.

Migration process

There were not a lot of posts on how to migrate Jekyll to WordPress, and I found one, which I was very grateful for. This gives me warm fuzzy feelings about the web and the spirit of sharing what you’ve learned.

That is why I think the indie web movement is so important.

What’s next

I deliberately named this “part I” because it will probably be an on-going series as I work on the site. Let me know if you encounter any weird bugs. 🙂

Related posts

journal winnielim.org
Integrating my selves

on integrating the different parts of myself, both online and offline.

0 responses
journal winnielim.org
How to capture and distribute what we learn?
0 responses
experiments winnielim.org
Designing a p2p self-directed learning network

table of contents

0 responses
journal winnielim.org
the long view: note-taking and becoming a person
0 responses
website winnielim.org
this website as a learning and reflection tool

why and how I’m building this website as a tool for myself

1 responses

Related notes

2 thoughts on “building a personal website & learning library with wordpress: part I”

  1. Talita says:

    I honestly think all this is SO WONDERFUL. I found your work through the original p2p network and it’s one of the most interesting reflections/experiments I’ve encountered on using the internet for self-directed learning (i.e. for a pretty major thing the internet can be used for). I do feel a slight sense of overwhelm thinking about the amount of content that would be easily browsable all at once, lol. I’m currently investigating ways of keeping all my research projects well-delimited for the sake of manageability, without losing the useful connections I can make between them. Looking forward to seeing this develop!

Leave a Reply

Your email address will not be published. Required fields are marked *