Added a radar chart and intro.

I kind of want to write longer, but let's keep it brief.

I am revamping my websites to make it align with what I've been doing.  Because I've been learning Japanese and Spanish seriously, I want to share my findings and learning methods on my websites.  However, I'm still in the process of figuring out how and where should I put them.

Added A Radar Chart To This Site

## Capacitor on Android is too annoying...
Old webview.  Couldn't get tailwind to work on it.
Even if I can style it, the state is not reactive on Android for some reason.

Or, there will be a navigation problem.

## Reconsidering React Native With Expo 
Dependency hell is true, but, my next project has to be offline first, local installable app.  So, RN for mobile and wrap it with Electron makes more sense over a local React wrapped app.

However, I still need to see if Appwrite + RxDB works well with RN. If not, I will have to build the sync myself, though not ideal, it's doable.

It's going to take some time...

## ZenTube
There are a couple more things I need to do with ZenTube, I will slowly implement them.

## Green Stock Calculator
I've been trying to make it into a paid app. Yet, there has been a hurdle to remove the Google Ads SDK to make it pass the App Connect Review team. Still waiting for the approval.

Next Big Thing Stack Reconsidering...

## ZenTube 4.1 - Waiting For Review...

Fixed some bugs today for 4.1 and submitted to App Store Review.
Like usual, waiting...

I will need to implement the deep link in the next update.

## Struggles Between React Native Web VS Next.js Web App + Capacitor

I was trying to use Capacitor with my Next.js web app.  However, I figured a few things:

### 1. Capacitor <Link> Issue on Android

While iOS works nicely, I faced a major hurdle with the Android app working with <Link>.  I made sure to use static export for my project, but the Link route handling just doesn't work on Android.  It turns out that Android web view is too old to support it. So, my file based page routes in Next.js didn't work using Link. 

To investigate the matter a litter further, I tried using useRoute, route.push and a href with no avail.  Later on I realised that most people are using Capacitor with React or Svelte.  But most importantly, they are using it as a Single Page Web App, not a multipage web app.  As far as I want to keep my route working, I can't really leverage the benefit of having only one web codebase by using Capacitor.  Maybe there's a way to solve it, but I'm yet figured it out.  At this stage, I'm working on making it a PWA with offline sync ability, because web is the most important thing.

### 2. Why Not React Native Web?

I had another project using React Native Web with Expo, it was a great experience.  I'm actually thinking that, maybe, that's the way to go. Even for a web app, using RN web offer a nice foundation for future mobile app development.  If I decided not to release a mobile app, it would be fine too.  Moreover, I can use JS libraries with RN web, and I can still have routes.

The only downside would be the dependency hell, which I kind of want to avoid.  Next.js is just way simpler and manageable.

---
I guess I'll try to see if my stack works also using RN web.  And/Or, try to fix the weird route with Capacitor on Android.

What do you think?

ZenTube 4.1 Submitted & Problem with Capacitor + Next.js

## New Features
- Options to toggle (for Explore) :
	- Shorts in search result
    - Search history text
    - Comments
 - Add to watch later directly from Explore tab 
 - Hides the search suggestions when tapping on search bar
 
 ## Log & Lesson
Spent a whole day working on ZenTube. It has been awhile, but I'm glad I did.  

I can also see there are 2 more 1-star review for ZenTube.  My gut feeling told me that's because I didn't update the app as I said I will be working on those features?  Or there are just some angry users. I have no clue, as they don't leave a review at all.

Anyway, lesson learned.  User won't care about how busy your personal life is while they are just  having theirs.  It doesn't hurt them to leave a bad review, it's an easy thing to do.  They expected the best quality with the cheapest price, with no waits. And roughly, they have a month or two of patience.

But these experiences are good to me because I know more about the cycle now. And, how should I  improve my workflow to meet customer expectations.

ZenTube new release should be ready in a few days, then I need to work on the grand picture of ZenTube again, before I go to, well, travel for a bit.  Haha.

## About Giscus
I've installed it on my website here, as you can see when you drag to the bottom of this page.
It is a plugin to use GitHub discussion to store the comments to implement it on any website.

### How-To
It is actually pretty easy to use. ELI5 version is to:
1. Create a public empty repo
2. Turn on Discussion for that repo
3. Install Giscus app and allow it to access your created repo.
4. Go to [giscus.app](https://giscus.app) to set up the looks and settings.
5. Copy the generated code block
6. Paste it where you want it to be shown
7. Done.

### However...
Giscus is good because it provides GitHub auth by default.  So, only users with GitHub account can comment.  I'd think it's only good for tech people, as we have GitHub accounts for sure. Although it is limited to that, it is very suitable for this kind of tech or programming posts.


ZenTube 4.1 (Features to be released) & Added Gicus Comment on This Log

## Intro
It wasn't hard, but I wouldn't say it's plug-and-go. It took me a few weeks to make the foundation running correctly, as the major difficult being lacking examples and tutorials. Comparing to Powersync + Supabase or just use Firebase, this definitely requires some set up.

## Implementation
There was an official blog post with git exmaple about how to achieve Appwrite + RxDB.  However, when I tried it, it was kind of buggy, and it doesn't do real-time sync.  So, I ended up building my own from scratch by reading both Appwrite and RxDB documentations.

## Major Hurdles
### State management handling with RxDB
I am using LegendState, there are occasions where I try to .set() the instance of my rxdb collection because it causes a loop in my view. So, I have to make sure I use .get() for the rxdb collection, and use LegendState to read and monitor updates.  On the other hand, in my viewModel, I have all the functions that manipulate the rxdb directly. The Appwrite replica modification happens in the viewModel functions.

### Realtime sync updaing view in loop
Related to the last point. I'm not familiar with LegendState, but I'm getting better now. I added debounce to resolve the issue.

### Sync delay messes up local state
Because RxDB Appwrite replication can only perform one write at a time, whenever I performed multiple actions in a short amount of time, the local states have a racing issue.  It is because I have subscribed the collection in real-time, yet the data locally changed and received isn't in sync.  Therefore, I created an updatedAt to handle the conflicts.

### Deleted fields
You can set deleted field for the replication.  It is instructed that to perform deletion using .remove().  However, this delete method would result in no "undo delete". It is because RxDB hides whatever is soft deleted via its .remove() method, the client cannot access the item just by checking !deleted.  There's a get/findone method for just retrieving a deleted file, kind of troublesome, but I get that rxdb needs its own soft delete mechanism. Therefore, I added an extra deleted field for myself. So, in totoal, there are 3 deleted fields - rxDeleted, isDeleted, deleted(Appwrite default).

Now, when a user deleted an item, I only toggle isDeleted, so it can go to the bin for recovering. On client side, set up a 30 days if isDeleted check to perform rxdb softdelete that toggle rxDeleted.  Then, on serverside, perform another check say 30 days of rxDeleted, really delete them. 

Soft delete via rxDeleted is necessary for RxDB to sync devices deleted field. But, I also want the user can easily recover the item, so I added isDeleted on top of that.

## Conclude
It wasn't too easy for me, it took me weeks to solve all these, as I started with SwiftUI where Apple CoreData took care every syncing procedures for me. This is the first I actually need to do more for just syncing.   But, I'm glad I did it.  

---

Now, I can work on the next big thing!

Finally Making Offline Sync Working For Appwrite And RxDB

I spent half the day after work just trying to add a new API endpoint for my ZenTube app. The return from JSON came out gibberish in the browser but perfectly fine with curl.  So I knew it wasn't the source that's causing the issue, but the way the API digesting or returning the response. 

I did found the fix after a few hours, you can read about it [here](https://theaveragelearner.com/post/how-to-fix-gibberish-json-return-in-the-browser/).

Will continue to develop for ZenTube to deliver what I promised to my users.  I wanted to play with Svelte though! 

Adding New Features To ZenTube Backend

## Expanded My Timeline Devlog to standalone pages
Spent a few hours after working on this website.
I know you are a geek.  My site is built on top of self-hosted local Directus, static output NextJS.

## Why Directus is Great
I built this timeline using Directus as CMS.  I had experience messing around with it before, so this came in natural.
### Pros
- Very versatile 
- Self-hosted, of course
- Can use it as a backend for everything I build for myself
### Cons
- None :)

## What's Next
1. I think I will add the GitHub comment to my devlogs.
2. Pagination for front page logs.
3. Add PageFind? or Agolia to this site for full text search.

Time to do other stuff now.  
I don't want to go back to my dead-end job tomorrow without doing a lot of things today.

Updated The Devlog Timeline to Generate Static Standalone Page

I've been trying to figure out how to self-host everything so that I can escape capitalism, and it has been hard. 

Economies of scale and capitalism goes hand-in-hand.  The bigger the company, the cheaper and better service they can offer.  I have to make some sacrifices in order to say no to these monopolies.

I've spent my time learning and tinkering, I really hope it's worth it.

For the past few weeks, I've tried a lot of stacks to achieve cross-platform, local-first synchronisation.  That includes native platforms, RN Expo, LegendState, Flutter, RxDB, Powersync, Appwrite, MongoDB, Realm and Supabase. Looked into Brick, WatermelonDB, IndexDB, etc. Also, understanding the difference between all these solutions and how I can mix and match them. For example, Expo with LegendState with Supabase/Appwrite, Flutter with Supabase + Powersync/ElectricSQl, etc. 

In the end, I figured, if I were to use any platform, say Flutter (by Google), RN (by Facebook) or SwiftUI, Kotlin, etc, you name it. It is still very much platform reliance.  If they aren't maintaining it or start charging or changing their policies, I will be held hostage.  Especially, if I spent my time to build for Apple to enhance their App Store by releasing a great app using their SwiftUI, I feel like I'm just working for them.

I know some developers will just embrace it.  They use what's convenient to them in order to quickly launch an MVP.   But I still don't want to do that.  I don't want to use Flutter with Firebase just because it is convenient, scalable, and relative cost-effective.  Ignoring how Google, the company, profiling and tracking users to make profit out of us, like we are dumb.

Therefore, I concluded, the only solution is the Web.  Like it has always been. Web technology is stable, and I don't need to read through pages of Terms of Service just to know that I might get randomly shut down for my project because I don't follow their monopoly rules.

If, in the end, a cross-platform framework needs compilation anyway, building a web app first, then wrap it with Capacitor just to release it to App Store and Google Play Store makes perfect sense.  As they should be treated as second class priority anyway. 

 It was never about device performance, device API, not multi-thread.
 It's a matter of pride and the goal of achieving something big.
 
 abcd.com is the same as google.com, and I should start from there.

Final stack decision for my next big thing project - Appwrite + Capacitor + RxDB

Spent another day trying to figure out the ultimate stack.  I was still trying Appwrite, but I've never gotten it working 100%.  It seems that this Supabase + LegendState combination is good enough out of the box. I'll use it for my next project.
Next step would be fine-tuning the instance with mail support etc. So I will be ready to build the next big thing, haha.

Will work on ZenTube tomorrow.

Learned Self-Host Supabase + LegendState to achieve offline sync

### ZenTube
Since the new release, I haven't received any complaint email, so I think it's working alright!
Will continue to bug fix and add new features from now on as the big deal (database migration) is done.  Something in my mind would be: 
1. Adding watching timestamp
2. Category timer - so you can have a chart revisiting yourself as to how much time you've spent on each category, or even set a time limit to it.

### Learning Appwrite and LegendState
Deciding between Appwrite and Supabase basically, as I can use offline-first sync enabled LegendState.  I only found out about LegendState not long ago, it's interesting and suits my need.  But the documentation is not the best, especially for Appwrite. I'm trying to make it work with Appwrite using their CRUD plugin but without success so far.

### Flutter vs React Native (Expo)
A decade old debate, still haunts me for each project I'm about to start.  Flutter is easy but there's no offline support for anything other than Firebase/Realm afaik. So, I've been trying to make LegendStates works as I can self-host Supabase or Appwrite, but it has to be React Native...

I might need to make a detailed versus table to help me choose.


ZenTube 4.0 released; Learning and deciding between LegendState, Appwrite, and Supabase.

- Submitted ZenTube 4.0.3 to Apple for review.  Hopefully everything goes well! (Finger crossed)
- Continue to work on my brother's website, namely the other pages.  However, it's taking longer than I thought, because I wanted stunning animation like the slides comes in and out like the original does. But those takes a long time to do.  I'll have to skip some jaw dropping elements for now to finish the first iteration for him to use.

Submitted ZenTube 4.0.3 update to review; Continue to work on my brother's website.

Finally finished making [ZenTube](https://zentube.app) sync. I've rewritten the app logic from using GRDB to CoreData, took me quite a while.  It helps users sync more efficiently instead of manual uploading and downloading for all devices.

Further Testing ZenTube before Submitting to App Store

I've been working on my brother's website.  He loves Final Fantasy VII, so I decided to make him this:
  
![ff7UI](/downloaded-images/ece7e07f-ac93-4d9b-a593-2d91cf273145)

Final Fantasy 7 Menu as Profile Website

I've done a lot before this date.  


That includes my journey of self-learning programming for 2 to 3 years.  Along the way I've built some apps and websites.


I've decided to start documenting my progress on my website, mainly because I don't want to rely on big tech or any third party to store my legacy.  


My way of saying no to capitalism in some form, I guess.

... about me