Winnie Lim

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:

In that post there is this highlight:

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:

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:

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…

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