Blog (blog) - Fred Wu's Tech

Welcome to Persumi - A Modern Platform for Content Creation

2023-07-17T04:18:07.386547Z

Like many software engineers and indie hackers, I dream of and experiment with different product ideas every now and then.

Five years ago, in 2018, I toyed with an idea where personas and expressions are the enablers for showcasing people’s talents and interests.

I called it, Persumi.

The Origin

The original idea was to break the pattern of modern day social media platforms like Facebook, Instagram and Twitter, where every person is hidden behind a two-dimensional facade. Words and photos are often used to skew the way people see who we are.

After a while, everything becomes bland as information is being overloaded and people’s attention span starts to decrease drastically. The signal to noise ratio is so low that more and more algorithms and tracking are invented to help curate content so advertisers would keep spending their dime on those social media platforms.

It’s a vicious cycle. There is now even a term for it: enshittification.

Enshittification is when an online platform becomes more monetized and less user-oriented the longer it lasts.

The Goals

With Persumi, personas and expressions are the key concepts to modernise content creation, curation and consumption in a simple yet meaningful way.

I set out a few goals for Persumi, in the hope to change the social media landscape for the better:

Find ways to encourage the creation and consumption of long form content
Make it easy for people to create vastly different topics without confusing their audiences
Make it easy for people to follow different topics, rather than relying on following users
Allow people to decorate their pages with their own personality and style via HTML + CSS, bring back MySpace!
An API-driven, open marketplace that allows developers to build and extend advanced functionalities

Some example use cases outlined in my original “pitch deck”:

social personas for friends, family, work…
interest personas as a gamer, traveller, photographer…
functional personas for travel plan, marketing campaign…

It kind of makes sense, but there is one problem.

The Problem

The age-old “chicken-and-egg” problem of starting a platform that thrives on user-generated content - how do I get early-adopter users without a decent amount of users and content already?

These goals might be nice, but they probably aren’t enough to convince users to drop what they are used to for something experimental and without users or traction.

So I parked this idea…

Revisit the Problem

A few years have gone by, and with a whole pandemic thrown into the mix, this Persumi idea has all of a sudden awakened me yet again.

In early 2023, after wrapping up my last freelancing project I decided to tackle Persumi’s chicken-and-egg problem once more.

I reflected on how my own content consumption behaviour has changed over the past few years. Instead of reading physical books, e-books or blogs, I consume more and more podcasts and audio-books. Instead of consuming content fully concentrated, I often consume them while on the go or during my workouts.

Then a light bulb moment occurred - I don’t need to build a massive social network platform to compete with the likes of Twitter. I just need to build a “simple” blogging platform for my own use and my own content. If I find it useful, other people will find it useful too. It doesn’t need to go viral, it just needs to be steadly discovered by like-minded people who share my frustration and vision in content creation and consumption.

Iterate the Idea

With a few more years of experience of leading teams and building products under my belt, I thought about how to iterate on the original idea, and came up with three main “twists” if you will:

Long form text content needs to be consumable in audio form, to suit the modern lifestyle
An API-driven open marketplace is way too ambitious for a new platform, build the core concept first, then iterate
An aura system that helps in both curating content as well as driving away bad actors

The rest of the original goals are still as relevant as before. In hindsight, these are pretty obvious product direction pivots, the result is an MVP that builds on a simple core concept - to turn long form text content into audio. And to make it easy to organically grow the platform and audience.

Build a Sustainable Business

With the chicken-and-egg problem behind me, it’s time for me to think about how to build a sustainable business to support my product ambition.

Interestingly, in Feb/March 2023, I was thinking about what the VC funding model did to the social media platforms we all love and hate, and why it’s a bad idea. The fact that then during the short few months of developing Persumi, both Twitter and Reddit seemed to be actively imploding themselves just proved my initial hypothesis:

To build a truly user-oriented platform, it needs to be built for users and content creators, rather than investors and advertisers.

That means, no obnoxious ads, no annoying pop ups, every visitor can view content without being forced to sign in, etc, etc… We do what VC-backed companies don’t.

If you’ve seen the landing page then you probably would have noticed a few things either available now or later to help create more value for users, such as:

The hero feature - AI audio, will be a paid feature, however, every user will be able to listen to audio posts, as well as to preview their own content with audio
Advanced expressions such as HTML and CSS for those who want to customise their pages to their own style
Ad-revenue share and paid subscribers - coming later, to make Persumi a platform that shares its success with content creators

Keep on Building

The MVP was essentially built in three months in my spare time. It wasn’t easy juggling between having a day job as a CTO, and moonlighting on my side hustle every evening and weekend.

This is just the beginning. I have many things planned for Persumi, some of which are already mentioned on the landing page, but there are much more to come. Early alpha and beta users are also able to help shape what this platform can become.

In the next week or two I will write about how I managed to build Persumi in three months - the tech choices, architecture and feature prioritisation I went through to make this product a reality.

Like what you’ve read or listened to? Why not sign up and try the platform yourself, the Pro plan is free during the alpha and beta testing stages. Also check out Persumi’s founder @fredwu’s profile here to see what personas and expressions look like and can achieve.

Update: Read about How I Built a Mostly Feature-Complete MVP in 3 Months Whilst Working Full-Time, it covers the features, the tech stack, the global infrastructure and the machine learning…

]]>

New Blog with New Design and Gatsby.js - Loving JavaScript Again

2019-01-20T11:27:22.000000Z

In 2010 I set up this blog on Tumblr mostly due to the ease of publishing and not having to worry about the hosting. I also went through two design iterations done in Photoshop:

You can probably tell that these designs were done before the flat and minimalist design trend we are seeing in recent years.

As I decided to revamp my blog once again, I thought I’d use Sketch this time around and aim for a simpler, cleaner and more mature design approach that’s quicker to design and to build. And this is exactly what I did:

Thanks to Sketch, the design process was much better than I would’ve had in Photoshop.

Why the Revamp?

A big part of the reason for the blog revamp was to move away from Tumblr, now that it is part of the dying Yahoo!, and to invest in modern technologies to make the blog function better by adding responsive design and a proper grid system, etc.

As I was reading up on and researching technologies as I often do, I came across Gatsby, and I was immediately convinced that this was going to power my new blog as it appears super fast (by building static content and pre-fetching), is based on React and has a huge collection of useful plugins.

At work I often joke about how I hate JavaScript (rm -rf node_modules anyone?), the truth is I started off my career doing a lot of JavaScript, my most popular open source library by GitHub star count is in JavaScript, and I have always worked as a full stack dev until recent years.

Due to the shift of my responsibilities more into leadership over the past few years, I have opted to focus more on the backend, but deep down I love software in general and given the frontend scene has seen some major improvements in the past few years, not to mention that at work we have several React code bases, it’s time I dig my teeth into it again.

Disclaimer: until recently I had only done two React projects before and my exposure to ES6 has been somewhat limited.

Gatsby

The thing about Gatsby that impressed me the most is how fast it is due to its out-of-box support for pre-fetching. With a wealth of different starter templates it is also very easy to hit the ground running. I used gatsby-starter-netlify-cms as it supports Netlify and is fairly simple.

Export Tumblr Posts

First thing first, I will need to export all my tumblr posts into Markdown files so that Gatsby can consume them. There are heaps of such tools including Tumblr’s own export functionality. I ended up having to use these two:

Jekyll importer for converting all Tumblr posts into Markdown
tumblr-utils for downloading all images in the posts (Tumblr’s own export tool and many others only download images hosted on Tumblr)

Of course, many search-and-replace as well as manual massaging were required to get the new Markdown files to a useable state.

Add More Gatsby Plugins

The starter template was great, but I needed more functionalities so I ended up adding these over time:

gatsby-plugin-styled-components for supporting Styled Components
gatsby-remark-embed-video for embedding videos
gatsby-remark-prismjs for syntax highlighting
gatsby-awesome-pagination for pagination
gatsby-remark-reading-time for adding reading time
gatsby-plugin-feed for RSS feed
gatsby-plugin-google-analytics for Google Analytics
gatsby-redirect-from for page redirects (of old Tumblr pages)
gatsby-plugin-sitemap for sitemaps
gatsby-plugin-robots-txt for robots.txt

Using many of these plugins only requires you to add the plugin itself and some config, then off you go - it could not be any easier!

GraphQL

One other reason why I was interested in Gatsby was because of its out-of-box support for GraphQL. I came across GraphQL a while back but never had the chance to work with it. At work one of our projects started using GraphQL and the team behind it rates it highly, so I really wanted to get some first hand experience using it.

With the inclusion of GraphiQL the in-browser GraphQL IDE, the GraphQL experience in Gatsby is extremely simple and satisfying.

Querying Data using Gatsby’s Page Components and StaticQuery

It’s been a bit of journey.

The starter template I used has GraphQL queries in the page components, but I wanted the GraphQL queries in shareable components so I opted to using Gatsby’s StaticQuery.

Until I decided to add gatsby-awesome-pagination which requires the GraphQL queries to have variables therefore incompatible with StaticQuery.

Despite the back and forth between page components and StaticQuery, I still loved the GraphQL experience in Gatsby.

It’s All Just React (In a Good Way)

The great thing about Gatsby is that despite making things easier by including a bunch of useful functionalities and plugins, down to its core, everything is based on React Components.

What this means is that as long as you have a working knowledge of React and React Components, extending Gatsby’s capability is simple and straightforward.

CSS Powered by Bulma

The starter template also includes Bulma - a modern and popular CSS framework.

Until now I’ve always relied mostly on Bootstrap so it’s nice to get to experience another CSS framework. And it turns out, Bulma is quite nice and easy to use too.

Thanks to Bulma, supporting responsive design was a breeze.

Gotcha: CSS Rules and “gatsby-plugin-purgecss”

gatsby-plugin-purgecss is included as part of the starter template to reduce the size of the CSS files by removing unused CSS rules. It’s wonderful as it saves about 200Kb of CSS (before minifying and gzipping) from unused rules from Bulma.

One gotcha I soon realised though, is that it also purges any CSS rules that are only rendered in the Markdown components. My guess is that the purging happens before the static contents were rendered therefore it cannot detect them.

The fix was quite simple, given that by default it only purges the main css file (in my case, all.scss), and all the specific rules in this file were defined by me, all I had to do was to add the comment lines to tell the plugin not to purge these rules:

@import "~bulma";

/* purgecss start ignore */
.my-own-css-rules-here {
}
/* purgecss end ignore */

Gotcha: CSS Conflicts Between Bulma and Prism.js

One more issue with CSS was the conflicts between Bulma and Prism.js due to the way some of the CSS rules are defined in Bulma.

What I had to do was to “reset” those CSS rules so they can inherit from Prism.js instead:

.content {
  .number,
  .tag {
    align-items: inherit;
    background-color: inherit;
    border-radius: inherit;
    color: inherit;
    display: inherit;
    font-size: inherit;
    height: inherit;
    justify-content: inherit;
    line-height: inherit;
    margin-right: inherit;
    min-width: inherit;
    padding: inherit;
    text-align: inherit;
    vertical-align: inherit;
    white-space: inherit;
  }
}

Netlify: Deployment and Hosting Made Easy (and Free!)

Before Netlify and similar services were available, many people used GitHub Pages to host their static content sites. It worked reasonably well but in the end this isn’t GitHub’s core competency and the features are limited.

Netlify takes deployment of static content sites to a whole new level and I cannot be happier to have finally jumped on the bandwagon too.

Closing

Suffice to say, I am very satisfied with this revamp experience - Sketch, Gatsby, GraphQL, Netlify and many other software have made it a walk in the park.

It only took me around 50 hours to get to 99%, and a few hours more to add in things like Disqus and social sharing.

Oh, and for those who are curious, the source code of this blog is available on GitHub here.

Let me just say:

The last time I fell in love with JavaScript was when JQuery first came to the scene many moons ago. Ever since then I dread working on the JS stack mostly because I’ve been spoiled by the Ruby and Elixir ecosystems. It’s nice to fall in love JavaScript again after so many years of simply “getting by”.

I hope you like my new blog, and if you have a similar experience to share, I’d love to hear from you!

]]>

Blog Redesigned For 2012, And New Challenges Ahead

2011-12-26T18:28:29.000000Z

After four days of sketching, designing and cutting up HTML/CSS, the new design (as you are seeing now) is finally live!

The new design is structurally similar to the old design, but with a fresh header and better use of space.

A new year warrants a fresh start. Apart from the redesign, I have also started heading up the development effort at SitePoint - dozens of interesting and challenging projects ahead!

2012 will be an awesome year! :)

]]>