What Happened?

So anyways, long story short, I started learning and after 3 weeks my new website was born. It just displayed my blogs and visitinfos and a message box.

Prev Posts

• 2023.3 How to Build a Personal Website
• 2023.6 My New Website
• 2023.6 MERN Stack Conclusion
• 2023.8 Website Design Doc Writeup

Problems without SSR

So the problem with frontend+backend+database, where your frontend calls your backend, and your backend calls the DB, is that the headless clients are not going to receive anything in the frontend. You need Javascript in the frontend for anything to run.

This technically works, but it's not the perfect solution.

It would be invisible to bots (Google can discover it but it's still very bad). And it's not just for SEO, it's also for user experience and navigation. The website would pause for a moment on initial load before rendering.

What is Next.js?

Next.js is a modern framework providing React-based web applications with server-side rendering and static rendering. Usually you would use react-router-dom.

Next.js has some good practices, it preconfigures lots of things.

1. It streamlines the frontend and backend together, so there is no need to start 2 services simultaneously. If you have a frontend and backend (it's not that difficult anyway), you probably need to write a complicated docker file, on top of that I used an Nginx config inside the docker. Overall it's complicated compared to the easy deployment of Next.js.
2. It uses those api routes predefined to be the name of the file so you don't have include every path or every route in the main.js everytime you add a route.
3. The file extensions for pages follow these conventions: .js or .ts: Standard JavaScript or TypeScript pages, .jsx or .tsx: Pages that use JSX syntax (which is most React components)
4. It seems the most popular framework as of 2024 (although other frameworks include Remix+React, Svelte, Vue, Alpine, or just React without Next.js)
5. There is a page router and an app router option, both are fine. Next.js 13 introduced the new App Router with new features and conventions, but it's debated among developers.

Complexity vs Simplicity

Over time there was more and more functions on my website,

1. In version 1 I added Comment and Likes to my Blogs, so anyone can like any blog and could comment on any blogs. That was the end of summer in 2023.

   That was also the time I decided to stop using GUIs in servers. Previously I was overwhelmed by the complexity of systemd(what a joke). I also didn't understand npm really well. So I was like, I couldn't do anything without a GUI, and I felt lost and hopeless working in the Linode shell.(ridiculous as hell right?)

   Anyways, I followed the guide step by step and installed vnc and ubuntu-desktop,(guys, Ubuntu-desktop, not even vanilla gnome, literally, on a server, the bloated crap), and connected to it with vnc.

   Well, you know what, I hate vnc so much now, it is just unnecessary. Why sacrifice the simplicity of a command line for something much more complicated?

2. In version 1 2 added Blog Types and Blog sidebars. So people can go to my preview page. That was in October 2023, and I

3. In version 3 I rewrite some of the code. Literally at this point there was all those style={{}} in my code just everywhere and I used vanilla CSS without utilizing te React Bootstrap components(which is so stupid). I also implemented a search function and added latex support(just using MathJax), and different color themes. That was in November 2023.

4. In version 4 there wasn't much changes. I just added personal logs(I wanted to do some note-taking or stuff, kinda like Joplin or Notion), and I fixed bugs in themes in the prev version.

   However, though, the log turned out the be a total failure, and I ended up not using it after all. I knew better now than to use something I wrote myself in daily life, it was just unstable and lacks lots of features.

About Frontend

As much as I was into frontend design, doing a frontend job was just not my thing. Everyone can do frontend jobs and it's not as important as backend. Your design depends almost entirely on the feedback, or, if the others like it or not.

What's ironic is about how much people around me like understand frontend. When I was in Berkeley I felt like literally everybody learned frontend or was enthusiastic about it (there was like at least 3-4 decals with 200 people each and at least 10 clubs teaching frontend). But here I am in USTC when I was like saying React people say they never heard about it. VB is still popular, and knowledge is just, outdated here.

And in the crappiest database course ever the outdated teacher force you to write a frontend (????), instead of designing a database. he was like "frontend was everything", and "really impressed people can do Kotlin or IOS developement", LMAO what a stupid course, like he was assuming students don't have brains, and it was one of the best courses this semester that at least got a decent website with https and decent TAs. The teacher also really liked closed source database, like "Oracle" or "Micro$oft" and didn't even talk about interesting ones like Postgres or MongoDB. I lost motivation to study and got addicted to servers and frontends and cloud more than I was addicted to gaming before and stayed up endless nights hooking up with them these days and there was just no way to get back to this shitpile.

Buiding with Next.js and Tailwind CSS

I built a task manager and a note taker with Next.js really quickly, so like basically with a MongoDB instance I can utilize with minimal frontend with Tailwind CSS. Tailwind is so cool and so easy to use like you literally don't have to learn css but only with html to build it and like tilt the frontend to be nice looking.

So like task manager is fairly easy to build, just specify add/delete/list tasks for each specific day, and the backend is quickly finished.

Then I build a Web Markdown Note taking app with password protection and pdf conversion, without having the cookie as a auth you can only like use it as a markdown parser, but that is good enough though.

PWA and Tauri

PWA and Tauri makes app cross platform and native on Android and Linux, (and Mac and Windows). I don't have to learn Kotlin to develop on Android. But even on Android I have no desire to download additional apps. I just memorize and visit everything in browsers.

Also there is tauri, a lightweight cross platform wrapper for Javascript(or Typescript) apps. Its backend is Rust but to use it as a wrapper, you don't really need Rust. Anyway, I don't really need a web app that much on my computer.

202408 What I did create with Next.js and Tailwind CSS

I did create a task manager backed with MongoDB, an LLM api frontend, a deprecated S3 frontend(because I found an awesome open source project), a markdown note taker backed with MongoDB. I am using these things daily and they are seeing wider adoption in my ecosystem than the unsuccessful video tube.

20241119 Moving Away from Tailwind CSS

I went back to React-Bootstrap somehow. I dislike Tailwind CSS. I don't know why.

Tailwind CSS typically have those elements like this

    <li className=shadow-lg rounded-lg p-6 max-w-screen-lg mx-auto transition hover:bg-gray-200>
      <h2 className=text-2xl font-bold text-gray-800 flex justify-between items-center>

This is a complete headache for me! Literally, I like the approach of using existing components

<Card > </Card>

or

<Accordion> </Accordion>

The more I tried, the less I could manage, and the more the website sucked.

I made a ton of junk with Next.js and Tailwind CSS. They were so fast to make, yet extremely difficult to maintain or update or change anything. I made a online text editor, I made a Task manager, I made a S3 frontend. It takes 3 hours to make something, but when you want to extend it's functionality or just hellish.

I also liked the feeling of being a developer instead of being subjective to other people's (a lot of subpar) softwares and a lot of rigid designs. Most designs require you to learn specific apis for them.

The main problems are basically

1. I couldn't solve CSS alignment problems with Tailwind despite repeated efforts
2. I started hating the project and abandoning it

Comparingly my first 3 projects with React-Bootstrap: My first personal website, a frontend from web-scraping, a full stack video tube, was much better.

1. I am not using any static site generators

Like, they are just quite bad and requires some hacking to get it working. Plus, if you have a million docs, they are not scalable at all without a backend for searching. The best cases is if you put your docs in the same Github repo and you can source control both, but it's obviously not a good idea to mix them up. They also require constantly rebuilding.

People be like "static site generators" are good for SEO. But I write for myself, not for other people.

It's not like they are scalable to millions of docs. I am not going to have a million blogs but it just made me seem less smart.

2. I am putting my blog in a Github repo.

Just like everything else, put in Git. For syncing, I am going to use a small Pandoc script to convert them first all to HTML locally then put them into database. I will also put the raw markdown into database.

202503 Migrating from previous React-Bootstrap to Next.js

So basically in November I switched back to my old website from the Tailwind CSS website because I hated Tailwind CSS.

Now I am migrating it to Next.js+React Bootstrap. It's very easy, just change all react-router-dom to the Next.js router.

Also I added the scroll-padding-top: 70px to address the problems of scrolling with a fixed navbar.

202504 Migrating to PostgreSQL

I changed to a SQL database from MongoDB. I now only use Vercel for my website, including domains, hosting, and Neon integration.

I used node-postgres instead of Prisma.