Tear Down and Rebuild

The Issue

Hello readers of 2coffee.dev, it's been a while since I last met you. After completing and launching the OpenNotas project in early June, a week later was dedicated to "fixing bugs," and recently I took a short trip to "reset" myself after six months of hard work. By the way, have you all made plans for your next trip? Take some time to rest and enjoy life; don't dive too deep into work or you might get "overloaded".

Currently, my work has become busier than before; I am juggling many tasks at a higher frequency. But what's important is that I still value writing; it is an essential part of my life.

Whenever I "dive" somewhere for a while, it's either because I'm very busy (like traveling, for example :XD), or I'm working on something big. That's right; going on vacation is just a secondary reason; the main reason is that I am planning to "refactor" this blog.

Current Blog Status

Thanks to the support of readers, the blog has been getting more visitors, but alongside that, many new issues have also been discovered.

In just a few days, by the end of June 30th - Nuxt 2 will officially reach its End Of Life (EOL) and will no longer be supported, or in other words, it will be "deprecated." In its place will be Nuxt 3. The blog is currently using Nuxt 2 along with the Static Site Generator (SSG) mechanism to create web pages for readers.

SSG is a technique that generates static web pages from dynamic data. Instead of continuously querying the database for each client access (SSR), SSG generates HTML files containing the content of the articles in a single "build" process. At this point, the server simply hosts static files, ready to be returned to users, thereby increasing processing speed.

There is an issue not only with Nuxt but also with many JavaScript-based web-building frameworks: they have too much JavaScript code. So what? To be honest, it's not a big deal. As we increasingly own more modern electronic devices, what's a bit of JavaScript? That's true, but it's also worth noting. Over-reliance on JS can cause many websites to become sluggish unnecessarily. Are you willing to wait 5-10 seconds for a page to load just to read a short article, or are you ready to spend several dozen MB of 4-5G data to view a quick news item? For me, definitely not!

If you are familiar with Nuxt, upgrading to Nuxt 3 will be easier. In fact, I have worked with Nuxt 3 in several other projects and noticed that the issue of excess JavaScript code still persists. I then turned to static site generators like 11ty and Hugo with the hope of creating completely static websites. After weighing the options, the name 11ty was settled, but on second thought, as someone who values user experience, sometimes it's necessary to add JavaScript somewhere. The common feature of static site generators is that they do not prioritize JS, so adding JS can have many drawbacks, and of course, I don't want to spend too much time on that.

Recently, in the article Angular, React, Vue, Svelte… what's next?, I mentioned a new name Fresh. This is a very new framework based on Deno. Fresh stands out with Interactive Islands -- meaning your website is static, but only the "interactive islands" contain JavaScript code. By doing this, we won't be overwhelmed with JS code; it should only be returned where necessary.

At this point, I'm sure you readers can guess what I'm planning to do.

Plans

Once again, I will rewrite 2coffee.dev using a newer "technology stack." Over the past 1-2 years, the article The Future of the Web is on the Edge has sparked many new research endeavors for me. Instead of deploying everything on a centralized server and sweating to operate it, "Web is on the Edge" emphasizes that everything can become services -- and we benefit greatly from speed and server maintenance costs.

Fresh will definitely be the framework for the blog. Fresh is still quite new, but it is sufficient to create a simple blog. Fresh does not have SSG but instead uses SSR, which has a significant advantage in that data is updated quickly rather than going through a costly "build" step. Fresh requires Deno Runtime to run.

The database is an essential component. Previously, Supabase -- based on Postgres was a choice, but now we have several newer services available. The advantage of Supabase is clear -- it has most of the implementations of a Postgres server, but it has a critical weakness in low storage capacity, only 500MB for free. Therefore, Turso is the perfect candidate.

Turso is a serverless SQLite database. You don't need to worry about where the data is; just write SQL commands to interact with your data. Turso also offers a generous amount of storage, up to 9GB along with 1 billion reads and 25 million writes to the database per month. Additionally, Turso benefits from "Web is on the Edge" as it allows database replication in multiple locations around the world. This means you will be connected to the nearest database when querying data.

Deno was launched several years ago, and although it has many advantages over Node.js, it seems to still need more time to gain warm acceptance from the community. Fresh requires Deno Runtime to run, and that is also an issue because, up until now, very few providers offer a Deno runtime environment, including Cloudflare.

2coffee.dev is fully deployed on Cloudflare Pages and Cloudflare Worker. If you're curious, you can check out the article Completing the Transition of the Blog to "Web is on the Edge". Since the current services like the interface page and API server are all deployed based on JavaScript Runtime, they are well supported by Cloudflare, but Deno is not. That means Fresh cannot be deployed here yet.

Well, it seems there are many emerging issues.

Perspective

Amidst the myriad of problems, fortunately, Deno also offers a service called Deno Deploy that allows for quick deployment of applications requiring Deno Runtime.

At first glance, Deno Deploy is quite similar to Cloudflare Worker, both providing a serverless environment for Deno or Node.js. You just need an account and use the CLI to deploy through command lines.

Like Cloudflare Worker, Deno Deploy comes with services such as Deno KV (key-value database), Deno Cron (cron jobs), and Deno Queue for sequential processing tasks. However, the services of Deno Deploy are still relatively simple and cannot be compared equally with Cloudflare.

A major drawback is the low free tier. While Cloudflare allows unlimited usage of Pages and 100,000 calls to Workers (which can be simply understood as API calls) daily, Deno Deploy only has 1 million queries to API endpoints monthly. Additionally, the limit for KV is only 450,000/300,000 reads/writes of data.

Overall, not all features will be carried over to the new version, but I will strive to keep the interface familiar. A sneak peek for readers: in the next version, there will be a feature called "A Cup," which is similar to a Tweet or Threads. By sharing my thoughts through a short topic, I hope to engage with readers even more.

Ultimately, it's all about learning while doing; I will read and study the documentation as I go along. Fresh is a new name, and Deno has not had much practical experience. However, that does not discourage me; I hope to gain more experience from this deployment.

Conclusion

With all of the above, it is clear that we are facing many challenges. Instead of choosing a safe, old-fashioned approach, let's experiment with a new tool and see how it goes. We often hear the phrase "step out of your comfort zone" to achieve more, and this is the time to reflect on whether that is true!

Let’s return to the original purpose of this blog, which is to learn while doing. Not only through the articles but also through the entire process of building and developing the blog. Therefore, I’m not afraid to apply new technologies; whether successful or not, it will be a lesson for me as well as for many others.

I hope that in one to two weeks, I will be able to introduce a completely new version of 2coffee to all readers. Once again, thank you all for taking the time to follow me. If you have any questions, please leave a comment below the article!