Why do you need to refactor your website code? Website upgrade and transformation!

foreword

Aha, the new website should be live by the time you read this!

Although the appearance of the interface has not changed much, the interior is different everywhere. Almost all the code has been deleted and modified, the naming rules of all classes and functions have been re-standardized, comments have been improved, performance has been optimized as much as possible, and countless bugs have been fixed.

The most important update is that the multilingual function of this site has been upgraded to 8 languages!

These eight languages ​​are: Simplified Chinese, English, French, German, Japanese, Korean, Russian and Spanish, so that search engines from different languages ​​will include my website.

The main content of this article is about: Do I need to refactor the code? And problems and precautions that may be encountered in refactoring code.

Why should I refactor?

1. Increase visitor dwell time

In the umami visitor statistics I built myself, I saw that many visitors from Europe and Africa stayed for a very short time. In addition to the unattractive content of the article, another obvious reason is the language barrier. .

According to the information I found on the Internet, the vast majority of people from small-language countries generally use English as their second language. So at present, these eight languages ​​can handle at least 80% of the world’s visitors.

In the foreseeable future, the number of multilinguals supported by this site will not increase.

2. Remove redundant code

As I explained in the article on migrating the website to Flask, the entire front-end and back-end were not specially developed for the blog, but a recycling of a failed project, which is why I urgently want to refactor the website system one.

When modifying it into a front-end and back-end program of the blog, because of unskilled coding skills and limited coding level, many logics were written in a messy and fragmented manner. It may happen that a references b, b references c, and c sometimes references a, resulting in a lot of redundant code in this system, and it cannot be deleted at once, because I can’t figure out some logical chains.

And in order to make it more suitable for my usage habits and add more functions, on this basis, the continuous superimposition of codes caused the system to become more and more bloated, and eventually turned into a mountain of shit, and now I want to add new functions , especially for the modification of the underlying logic, is almost an impossible task.

3. Optimize performance

When it was originally designed, it was designed to deal with the amount of data in units of tens of thousands, so ES was used. But I think the number of my articles at present and in the foreseeable future will not be in tens of thousands. Even if I write every day, there are only more than 300 articles a year, and only more than 2,000 articles including the multilingual version, which can break through 10,000 in five years.

So I plan to use Sqlite as the database of the website, so the performance requirements should be greatly reduced.

4. Add new functions

This site supports multiple languages ​​from the very beginning, but there are only two kinds of languages: Chinese and English.

But I saw in the background that I even had referrals from yandex, then I was thinking, maybe I can directly provide the russian version of the blog content, so that yandex can include more articles, and thus bring more traffic , Googled it, and simply provided versions in all major languages, so as not to add other languages ​​in the future.

Sometimes, as soon as an idea comes out, I want to realize it immediately, otherwise I will never forget it in my heart. I immediately started working on adding features.

After less than an hour, I gave up the idea of ​​adding new functions to the original code, because I hard-coded two languages ​​​​in the database structure design from the beginning. This is not only to change the database structure, but also to search the module , the caching module, and even the RSS generator all had to be redesigned .

After a little calculation of the workload, it is better to completely re-develop one instead of modifying the old code. Just do it, I really can’t stop for a moment, I immediately created a new project directory on the computer, and started to refactor the code.

How do I do it?

Here is a brief talk about how I did it, and various specific implementations, and I will open a separate article later.

1. Backup data

Guys, backing up your data is really a top priority, losing data is really unacceptable. Be sure to back up your data before doing any important operations.

Let me tell you about a real case I encountered during May Day. Because everyone wants to travel, and I am no exception. When I was waiting for the train transfer, I took out my laptop and remotely connected to Windows at home, and used VScode remote to connect to the Linux virtual machine to write code. Maybe the path is very winding, but VScode remote really saved my data.

The situation at that time was that I finished testing a certain .json test file and needed to delete it from the project directory. I don’t know why and I selected the app.py file at the same time, and then Delete + Enter operated smoothly. The screen flashed to find out why the code page I was writing just now disappeared, and when I realized it, I was dumbfounded.

The final way to retrieve the file is: Create a new file with the same name in the same directory, and use the timeline function to restore to the previous version.

2. Redesign the database structure

I completely transformed the database. First, I added the language identifier of each article and the corresponding article IDs in other languages, so that when visitors visit an article, they can use the multilingual switching button to jump to a different language.

Of course, because of my old blog, I am still compatible with the previous link format.

3. Coding

This part is too much to talk about, in order to support multiple languages, I translated all explicit text on the website and automatically used the most appropriate one according to the language of the visitor.

In order to better translate the article, the azure translator is built in the back end. After writing Chinese, click to translate the full text, and then manually proofread the following format before publishing, which saved me a lot of time.

In order to allow me to manage articles better, I created a function similar to aggregation. I can only see articles in Chinese, while articles in other languages ​​are all under the subpages of this article.

For SEO, every page of the new blog is a static page, and all Ajax asynchronous loading of page elements is removed, which is also more friendly to crawlers.

for……

More new features and technical details will be introduced in detail in new articles later.

postscript

It has been more than three weeks since the last update, which broke my previous goal [weekly update blog], but I think it is worth it, not only to satisfy my sense of accomplishment, but also to let my various skills Got plenty of exercise. ps: Subsequent updates will not affect blog posting.

Oh, by the way, in this update, ChatGPT contributed a lot. I have optimized about half of the code to improve readability and performance. Maybe ChatGPT often makes up things in reality, but when writing In terms of the ability of this part of the code, its reliability is not bad, and even if something goes wrong, you can throw the error directly to it and let it continue to debug.