ALGORITHM

COMPUTATION

CRYPTOGRAPHY

FRONTEND

GAME-THEORY

INVESTMENT

JS&TS

LINUX

MATHEMATICS

NODE

OTHERS

PROJECT-PRACTICE

REACT

THOUGHTS

古文整理

文史哲艺


The idea I have is that those open-source developers generating electricity out of love might have taken the wrong path. **Open source is inherently a win-win situation**.

This reminds me of the Faker.js repository deletion incident and the well-received response from [@以撒 (Isaac)](https://www.zhihu.com/people/0a8c8a41d9b99d649639ce7b1c46fda4).

[Zhihu: How do you view the Faker.js open-source author deleting all the code?](https://www.zhihu.com/question/510180628)

Many dedicated open-source project authors contribute tirelessly, creating outstanding works and adding value to the open-source community. Their spirit is admirable, and I appreciate the contributions they have made.

However, what I find hard to understand is why authors, facing financial difficulties and struggling to maintain their own quality of life, would invest a significant amount of time and energy into projects, continuing to shine even at the cost of neglecting their own livelihoods.

In the end, it seems they are only moving themselves and, in the heat of the moment, neglecting their own well-being. They even have to endure criticism from freeloaders. Watching others benefit from forking their projects while they are left with empty hands, having to deal with a pile of issues on their own, is disheartening. Seeking donations is either futile or brings in barely enough, and they are told, "If you can't afford to play in the open-source arena, then don't play at all." The effort seems disproportionate to the lack of appreciation and returns.

The correct attitude is that **open source authors must first learn to be a sophisticated egoist. All open source is for their own sake, not others. Do not be a selfless contributor to generate electricity for love.**

**First of all, don't expect direct returns from open source projects. The open source model was inherently selfish when it first came out, and its goal was to reduce its own maintenance costs.** In the previous closed-source era, the larger the engineering project, the maintenance cost and demand analysis cost increased exponentially, and the software iteration and release cycle became longer. It was also difficult to directly feed back the software usage experience to the manufacturer. During the competition period, The harder it is to survive. In addition, there are still different users in the software audience who have different opinions, so what should we do?

Therefore, the source code is directly disclosed. If anyone has their own needs or finds any bugs, they can fork it themselves and the source code can be modified as you like. You are also welcome to submit your contribution. By the way, you can also gain some fame of the project, so that different software users can be taken care of. In addition, the open source model is open, and users' needs and problems can be responded to in a timely manner and pulled into the project. Users can help you solve them, and you can relax yourself. **Source code is not an asset, but a liability. The source code will change with the needs, exposing many potential problems, all of which require a lot of cost to maintain. Open source is a way to share liabilities and transfer costs to users, which is self-interested.** What if you want to make money with my project? No problem, MIT, Apache and other protocols have agreed: you are responsible for your own choices, you can make money, and the source code can be modified, but if you get in trouble, don't come to me.

So what about personal projects like faker.js and core.js? How do individuals make small projects big? Many open source works were originally written on a whim to solve and realize an idea in work or study. Linux is an example. The author originally wrote the project to learn about operating systems. If the idea is good, with promotion and fame gradually accumulated, more and more people will participate to help contribute Contribution, and the project will become bigger. Now that others have Contribution, it also incorporates ideas from many different users, **Then you actually have no natural obligation to protect yourself.** Because when you originally wrote it, it was for your own use, not to cater to users. **So since it is open source, users also have the obligation to maintain it after obtaining the rights to the source code, and the problems should be solved among them.**

In other words, I have tried my best on the project, and I have given you the source code and profit rights. If you have any ideas or requirements, you can fork and contribute, but if you encounter any problems, you can solve them yourself and do your best. Everyone can get what they need. **I just made my source code public. You can use it if you find it useful. If it doesn't, you can use it. If you like it, don't use it. Don't give me any trouble. After I open sourced it, it was you who begged me to use it, not me who begged you to use it.**

**Ok, this kind of "refined egoism" is the correct path for open source.** If you really want to use open source to gain fame and fortune, then it's not a big deal, and there's no shame in clearly stating the price.

**Remember that when doing open source, the important thing is for yourself, not for others, so don't wrong yourself.**


Remember: when doing open source, the important thing is for yourself, not for others, so don't wrong yourself.

Should I Do Open Source Selflessly?


[The introduction for functions compose is here](/post/functions-compose).

> **Definition : Functions Compose** \
> compose = (funa, funb) => (c) => funa(funb(c));

Now we are supposed to give the proof and derivation process of the following conclusions

> **Associate Law For Functions Compose** \
> compose((funa, funb), func)) = compose(funa, (funb, func))

It's simple to prove this proposition with the definition of functions compose.

according to

```javascript
compose(a, b) = (D) => a(b(D));
```

We assign the argument `b` with

```javascript
b = compose(x, y);
```

So we get

```javascript
compose(a, b) = compose(a, compose(x, y))
= (D) => a(compose(x, y))
= (D) => a(x(y(D)))
```

We find that

```javascript
(D) => a(x(y(D)))
= (D) => compose(compose(a,x),y)
```

So we have the conclusion

```javascript
compose(compose(a, x), y) = compose(a,compose(x, y));
```

QED.

We logically have the expanded conclusion: If there are n function combinations

$$
compose(...,a_{i},a_{i+1},...,compose(a_{j},a_{j+1},...),...,a_{n}) \\ = compose(...,a_{x},a_{x+1},...,compose(a_{y},a_{y+1},...),...,a_{n}); \\
i,j,x,y∈(0,n];

j-i = y-x
$$

The proof of this proposition is omitted.


The derivation process for functions compose

Associate Law For Functions Compose


Today, WeChat once again flooded my Moments with mini-programs, the previously rumored application-type.

However, this piece won't delve into the technical details of mini-programs, nor speculate (because we know very well...).

It also won't discuss what impact mini-programs will have on the Chinese Internet (product managers will discuss that...).

Let's talk about the Web, the Web.

When we commonly refer to the Web, we are actually abbreviating World Wide Web to "the Web."

Similar to H5, this term is an abbreviation of an abbreviation, so concise that in the end, nobody knows what it originally meant.

Don't say that the common people in China can't distinguish between the World Wide Web and the Internet; the same goes for ordinary Americans who can't differentiate between the Web and the Internet.

Many practitioners who don't seek in-depth understanding are not much better off. The term "Web" is consistently translated into Chinese technical articles in a way that leaves readers perplexed.

In the Chinese-speaking world, one of the clearest and most attentive explanations of this matter belongs to [@不鳥萬如一](https://www.zhihu.com/people/6bec872206d9884cd9535841b6a1f510).

For example, in his article [One Day World: WeChat does not "manage" external links, because in practice, WeChat Official Accounts do not allow any external links - 不鳥萬通讯 - Zhihu Column](https://zhuanlan.zhihu.com/p/20747514), he writes:

> The Chinese world has always confused [Internet](https://en.wikipedia.org/wiki/Internet)(internet) and [World Wide Web](https://en.wikipedia.org/wiki/World_Wide_Web)(web). The "open spirit of the Internet" that people remember so much is actually the open spirit of the World Wide Web. The openness of the World Wide Web is mainly reflected in one point: **Any article on the World Wide Web can be linked to each other at will through the URL** . If I want to introduce the website UbuWeb in the article, I can directly add its URL ubu.com to the six letters [UbuWeb](https://ubu.com/). You may think this is nonsense, but you can't do that in articles on WeChat public accounts; you can only add links within the WeChat ecosystem, such as [this](https://weixin.qq.com/cgi-bin/readtemplate%3Ft%3Dweixin_external_links_content_management_specification) (that is, the link to the above "Specification")

So Ruyi uninstalled WeChat ([Farewell to the world of WeChat for a day](https://blog.yitianshijie.net/2016/02/21/byebye-wechat/)) and wrote: [WeChat - the de facto local area network](https://blog.yitianshijie.net/2015/11/16/wechat-de-facto-lan/) , well, as someone who is increasingly hardcore about Open Web, I agree.

Ruyi may care most about articles, but what I care about more is applications, Web Apps.

The so-called Web App is an evolution of the Web: from providing text information (hypertext) to multimedia (hypermedia) to providing software application services. The translation of hard core is probably "World Wide Web-based applications", such as Youtube, Twitter, Medium, Github, etc. that you use in your web browser. **They can still be linked to each other at will through website addresses (URL), follow Web is an open standard, and you can use this service on almost any platform with a browser, so Web App is also open.**

If you've heard of Google's Progressive Web Apps, it actually stands for Progressive Open Web Apps, but that's just too long and wordy.

After all, the concept of the Web should include Open.

(The purpose of this article is not to advocate PWA, but if you are interested in PWA, you are welcome to read: [Next Generation Web Application Model — Progressive Web App](https://zhuanlan.zhihu.com/p/25167289))

If Hybrid architecture is just a concession to Web idealism, then the emergence of React Native has undoubtedly caused the collapse of some people's beliefs, followed by Weex, and then maybe WeChat as you guessed it.

Seeing that the method of "developing with the Web paradigm for Native platforms" is becoming more and more popular, although it seems that the people who benefit are Web front-end practitioners, I don't know whether I should be happy or not.

I'm not saying they are the “wrong technical direction”, from a pragmatic perspective they are great and solve problems.

**However, no matter how much they look like the Web, they are not part of the Open Web platform.**

RN/Weex doesn't have URLs at all (don't get me started on Universal Links or App Links, URLs and URIs are different)

Starting from the JS-SDK, WeChat has been a closed ecosystem.

Although this momentum originated from Facebook, it is more likely to spread wildly in China.

There are many people in the English world who are sensitive/hardcore about this kind of thing, such as Jeremy Keith, who wrote [Regressive Web Apps](https://adactio.com/journal/10708). Because PWA is not URL-friendly enough, it has nothing to do with Chrome development. The boss Alex had a quarrel, and Alex said anxiously:

> so, your choices are to think that I have a secret plan to kill URLs, or conclude I'm still Team Web.

You know, the reason Alex took Chrome to develop PWA was because he didn't like Hybrid destroying the Open Web.

If Twitter/FB is like WeChat and doesn't allow links to be linked casually, you may have to abandon Twitter, and then write a Byebye Twitter/FB article in anger like Ruyi.

However, what is being advocated every day in China is that XX helps the HTML5 ecosystem, but most of the time these so-called "HTML5 ecosystems" are contrary to the Web ecosystem, and there is no judgment.

I started to get a little incoherent.

In this Chinese world where HTML5 and the Web are extremely misused, I don't know how to cry out.

All I know is that when the Web can only survive as Native's "Markup Language", the Web will cease to exist.

When no one follows the Web standards and creates their own, the so-called cross-platform features of the Web disappear.

I've written about it before, and Chrome Product Leader Rahul also said it at I/O:

**The Web's Dicoverable, Linkable, Low Friction, Broad Reach, etc., are not the essence of the Web. The essence of the Web is Open and Decentralized. This is the original intention of the World Wide Web (WWW). This is the prerequisite for all these characteristics to be established.**

The belief in Open Web has brought browser manufacturers back together, and they are asking you:

**Hey, can we make the web great again?**

> Author : Xuan Huang \
> Origin Link: <https://huangxuan.me/2016/09/22/the-open-web/>


```ts
sss
```


The essence of the Web is Open and Decentralized. This is the original intention of the World Wide Web (WWW), and this is the prerequisite for all these features to be established.

The Open Web Is Leaving Us


The `function compose` borrowed thinking from pipeline in Unix-Shell Programming with taking out of a function's output as other function's input.

For example,

```bash
# The content of test.txt is 'Hello'
cat test.text | grep 'World'
# Output : Hello World
```

At above example the symbol `|` is treated as pipeline operator, it transfer the left output to right input.

So the compose in Functional Programming is simply defined as following implement in javascript

```javascript
const compose = (funa, funb) => (c) => funa(funb(c));
```

The compose function accepts two functions as arguments and returns new function that accepts an initial input and applys functions one by one.

In fact the above definition has same effects with

```javascript
const temp = funb(data);
const result = funa(temp);
```

Bear in mind that the order of function calls is inside out and appears in `compose` function is from right to left.

We also have expansion definition for multiple functions compose

```javascript
const composeN =
  (...funcs) =>
  (data) =>
    reduce(funcs.reverse(), (acc, fn) => fn(acc), value);
```


Definitions and examples for Functions Compose

Functions Compose


In software engineering, while module dependencies ideally form a **tree structure**, real-world implementations often adopt **Directed Acyclic Graphs (DAGs)** to enable practical code reuse. This article explores three fundamental patterns of module organization and their implications.

## Ideal Scenario: Hierarchical Tree Structure

### Characteristics of Tree Architecture

```plantuml
@startuml
top to bottom direction

rectangle "Core" as A
rectangle B
rectangle C
rectangle D
rectangle E
rectangle F

A --> B
A --> C
B --> D
B --> E
C --> F
@enduml
```

**Key Features:**  

- Unidirectional dependencies (parent → child)  
- Clear hierarchical separation (e.g., UI → Business Logic → Data Layer)  
- No circular references  

**Common Implementations:**  

- MVC Architecture  
- Clean Architecture  
- Three-Layer Pattern (Presentation/Logic/Data)

**Advantages:**  
✅ Straightforward dependency management  
✅ Explicit separation of concerns  
✅ Simplified testing and maintenance  

**Challenges:**  
⚠️ Limited code reuse opportunities  
⚠️ Potential for artificial module fragmentation  
⚠️ Suboptimal for complex systems with cross-cutting concerns  

## Practical Reality: Directed Acyclic Graph (DAG)

### Modern Dependency Management

```plantuml
@startuml
top to bottom direction

rectangle A
rectangle B
rectangle C
rectangle D
rectangle E
rectangle F

A --> B
A --> C
B --> D
B --> E
C --> F
C --> E
@enduml
```

**Key Features:**  

- Shared modules between components (E shared by B/C)  
- Multiple dependency paths  
- Strictly acyclic  

**Real-World Applications:**  

- React/Vue Component Systems  
- Webpack Module Federation  
- Bazel Build System  
- Database Schema Design  

**Advantages:**  
✅ Natural code reuse through shared modules  
✅ Flexible architecture for complex systems  
✅ Maintains dependency integrity  

**Implementation Considerations:**  
🔧 Requires robust tooling (TypeScript path resolution, Webpack aliases)  
🔧 Needs dependency visualization tools  
🔧 Demands strict code review practices  

## Anti-Pattern: Circular Dependencies

### Dangerous Dependency Loops

```plantuml
@startuml
top to bottom direction

rectangle A
rectangle B
rectangle C
rectangle D
rectangle E
rectangle F

A --> B
A --> C
B --> D
B --> E
C --> F
C --> E
E --> A
@enduml
```

**Consequences:**  
❌ Runtime initialization errors (`Cannot access 'X' before initialization`)  
❌ Compilation failures (ESM/TypeScript circular reference errors)  
❌ Unmaintainable "spaghetti code" structure  

**Common Culprits:**  

- Bidirectional controller-service relationships  
- Shared state management traps  
- Improper dependency injection  

## Architectural Strategies

### 1. Dependency Hoisting

Elevate shared dependencies to higher-level modules to prevent duplication while maintaining acyclicity.

### 2. Dependency Injection

Implement IoC containers to manage cross-module dependencies:

```typescript
// Angular-style DI example
@Injectable({ providedIn: 'root' })
export class SharedService {
  // Reusable business logic
}
```

### 3. Module Federation

Modern solutions for microfrontend architectures:

```javascript
// Webpack Module Federation Configuration
new ModuleFederationPlugin({
  name: 'app1',
  exposes: {
    './Widget': './src/components/Widget',
  }
})
```

## Industry Case Studies

| System Type        | Dependency Pattern | Notable Implementations       |
|---------------------|--------------------|-------------------------------|
| Frontend Frameworks | DAG                | React Component Tree, Vue SFC |
| Build Systems       | DAG                | Webpack, Turborepo, Bazel     |
| Microservices       | Tree/DAG Hybrid    | AWS Lambda Layers, NestJS     |
| Database Schemas    | DAG                | Foreign Key Relationships     |

## Best Practices Checklist

1. **Static Analysis**  
   - Enable TypeScript's `--noImplicitCircularity`  
   - Use ESLint `import/no-cycle` rule  

2. **Dependency Visualization**  

   ```bash
   npx madge --image graph.svg src/index.ts
   ```

3. **Architectural Guardrails**  
   - Enforce layer access rules in `tsconfig.json`  
   - Implement module boundary checks in CI pipelines

4. **Refactoring Techniques**  
   - Apply Dependency Inversion Principle (DIP)  
   - Utilize facade patterns for cross-module communication  

> "Good architecture maximizes the number of decisions not made."  
> ― Robert C. Martin (*Clean Architecture*)

By understanding these fundamental patterns and implementing appropriate guardrails, teams can create maintainable systems that balance architectural purity with practical reuse requirements.


In software engineering, the reference relationship of software modules should ideally be a tree, but in practical applications, in order to reuse certain module structures, a directed acyclic graph is often formed.

How to Organize Modules in Software Architecture


### Unary, Binary and Variadic

**Definition :** The function that only applies and receives one argument value.

For example, this is a typical unary

```javascript
const func = (para) => para;
```

Corresponding the defination of **Binary** : The function that applies and receives two argument values. We could expand this defination into the **Variadic** : The function that applies and recieves multiple argument values.

```javascript
const add = (x, y) => x + y; // Binary Function
const sum = (...args) => args.reduce((acr, cur) => acr + cur); // Variadic Function
```

### Currying

**Definition :** The currying is the process that transform a variadic into a nested unary.

It may be difficult to understand only by reading at this definition. Here is a detailed explanation by example.

We have an add function:

```javascript
const add = (a, b) => a + b;
```

It applies two argument values to get its sum. But if we need to apply this function for multiple arguments, it should be rewrite as:

```javascript
const add = (...args) => {
  let sum = 0;
  for (val of args) {
    sum += val;
  }
  return sum;
};
```

However, it pulls in a temporary variable `sum` to store the amount while traversing the array, it also called as `State`.

The one of the principles in functional programming is avoid pulling state into program for it may make effects, which causes bugs to make harder debugging.

So we should remove the state variable `sum` by currying.

For example, the Binary function of sum :

```javascript
const add = (a, b) => a + b;
```

We rewrite it such as:

```javascript
const add = (a) => (b) => a + b;
```

When I want to get the sum of 2 and 3:

```javascript
add(2)(3); // 5
```

The function calling process:

```javascript
add(2); // return a function (b) => (b + 2)
add(2)(3); // call to a function returned by the previous layer (3) => (3 + 2) , the b is assigned as 3.
```

Similarly, if we have three arguments, the currying should like:

```javascript
const add = (a) => (b) => (c) => a + b + c;
```

The javascript supports variadic functions, we could derive a generator functions for currying:

```javascript
const curry = (func) => {
  if (typeof func !== "function") {
    return;
  }
  return function curriedFn(...args) {
    if (args.length < func.length) {
      return curriedFn.apply(null, args.concat([].slice.call(arguments)));
    }
    func.apply(null, args);
  };
};
```

So we can curry a variadic functions by function `curry`;

```javascript
const add = (a, b, c) => a + b + c;
const curriedAdd = curry(add);
curriedAdd;
curriedAdd(1)(2)(3); // 6
```


Definitions and examples for Functions Currying

Functions Currying


Some times I need to deploy SPA (create-react-app, Vue, Angular) with nginx on my server. And here is the boilerplate for nginx configuration that allows you to modify it according to your requirements.

```nginx
server {
    listen 80;
    server_name your.server.name;

    root /path/to/your/server/name;
    index index.html;

    # For some static files that should return with http-status-code
    location ~* \.(?:manifest|appcache|html?|xml|json|md)$ {
        expires -1;
    }

    # For some necessary static files
    location ~* \.(?:css|js)$ {
        try_files $uri =404;
        expires -1;
        access_log off;
        add_header Cache-Control "public";
    }

    # If you set backend services such as nodejs, you can do local proxy here.
    # For example, the following code will lead http://your.server.name/api/your-api to http://localhost:3000/your-api
    location /api/ {
      proxy_pass http://localhost:3000/;
    }

    # location ~ ^.+\..+$ {
    #   try_files $uri =404;
    # }

    location / {
        try_files $uri $uri/ /index.html;
    }

    # PHP service here.
    # location ~ \.php$ {
    #     include snippets/fastcgi-php.conf;
    #     fastcgi_pass unix:/var/run/php/php7.4-fpm.sock;
    # }
}
```

For https deployment please refer to [This blog.](https://blog.terminels.com/post/how-to-use-certbot)


Some times I need to deploy SPA (create-react-app, Vue, Angular) with nginx on my server. And here is the boilerplate for nginx configuration that allows you to modify it according to your requirements.

Configuration Boilerplate for SPA with Nginx


## What's the Certbot

When we apply for and use Let's Encrypt's free HTTPS certificate, we need a certificate application and management tool. Then certbot is the officially recommended application tool. We use this tool to apply for and manage our certificates.

certbot supports most Linux distributions and is easy to use. We download and install them directly:

My system here is Ubuntu. If it is CentOS or other distributions, the installation method should be similar. I use the official package to install it directly and quickly.

You can read [here] about what HTTPS is (<https://juejin.im/entry/58d7635e5c497d0057fae036>), and you can read [here] (<https://letsencrypt.org/zh-cn/getting-started/>) about what Let's Encrypt is.

```bash
sudo apt update && sudo apt install certbot
```

After the installation is successful, you need to use the sudo command to run it. Let's run it and see:

```bash
sudo certbot -h
```

## Get certificate

After installing the management tools, we need to apply for a certificate. My web server here is NGINX, and I do not have a static directory for the website, so I use this command to apply:

```bash
sudo certbot certonly --standalone -d example.com -d www.example.com -d m.example.com
```

If your website has a static directory, you can change `--standalone` to `--webroot` and add the `-w` parameter to apply, similar to this:

```bash
sudo certbot certonly --webroot -w /var/www/example -d example.com -d www.example.com
```

When you use `--standalone` to apply for a certificate, you need to turn off nginx, because certbot will enable port 443 to verify your domain name information. If nginx is not turned off, the port will be occupied, so we turn off nginx. I am using ubuntu here. So use this command to shut down nginx:

```bash
sudo services nginx stop
```

## Configure certificate

After the certificate application is completed, the certificate will exist in the `/etc/letsencrypt/live/` directory. Let's check that there are no problems and then open the nginx configuration file to modify the certificate loading path:

```bash
cd /etc/nginx/site-enabled/
```

Edit configuration file

```bash
sudo vim example.com.conf
```

With such content,

```nginx
server {
        server_name example.com www.example.com;
        listen 443;
        ssl on;
        ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem;
        ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem;

        location / {
           proxy_pass http://127.0.0.1:3999;
           proxy_http_version 1.1;
           proxy_set_header X_FORWARDED_PROTO https;
           proxy_set_header X-Real-IP $remote_addr;
           proxy_set_header X-Forwarded-For $remote_addr;
           proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
           proxy_set_header Host $host;
        }
    }
```

After saving and exiting, use the nginx test command to check whether it work correctly:

```bash
sudo nginx -t
```

If there is no problem, reload it

```bash
sudo service nginx reload
```

Start the nginx

```bash
sudo service nginx start
```

After the startup is successful, you can enter the URL to visit and check whether the certificate activation is successful: `https://example.com` If the certificate is displayed normally, it means success.

## Update certificate

Because the Let's Encrypt certificate is only valid for 90 days, when it expires, we need to refresh the validity period of the certificate before we can continue to use it. Refresh the certificate validity period. Because we are using the `--standalone` mode to install the nginx certificate, we need to refresh the certificate. Sometimes you still need to shut down nginx. Use this command to shut down nginx:

```bash
sudo service nginx stop
```

Then run this command to refresh:

```bash
certbot renew --dry-run
```

Or we can use the system's timer and refresh it when the time is about to end. Let's Encrypt certificate officials say that the certificate expiration time must be less than one month before it can be refreshed. We can configure the refresh time _every_ more than two months That's it. Here we write a cron plan to perform the update operation at 2:15 am every two months.

```bash
15 2 * */2 * root certbot renew --pre-hook "service nginx stop" --post-hook "service nginx start"
```

Then the execution of this command requires the permissions of the root user. We log in as the root user:

```bash
sudo su
```

Then create a file, call it cronfile, and then write this timing plan:

```bash
touch cronfile
```

```bash
echo '15 2 * */2 * root certbot renew --pre-hook "service nginx stop" --post-hook "service nginx start"' > ./cronfile
```

After finishing, run the plan:

```bash
crontab -u root ./cronfile
```

After successful execution, use `-l` to view the plan:

```bash
crontab -l
```

## Finish

Our certificate application ends here, 👏

> This article is reprinted from the blog of [The Universe in the Shell](https://kuokuo.io/2019/08/05/get-lets-encrypt-cert/)


Let's Encrypt makes HTTPS available to everyone for free. In this article, we will introduce how to use the Certbot application tool to configure an SSL certificate for HTTPS of a domain name on a personal server.

Configuring SSL for HTTPS with Certbot + Let's Encrypt + Nginx


## Forward the domain name request to the local port

First, we will introduce the most commonly used ones. When separating front-end and back-end, sometimes we deploy some services locally such as Node.js as API service. On the local port 3300, assuming the host name is example.com, we need to access All HTTP requests on this host are forwarded to the service deployed at localhost:3300. The configuration can be written as follows:

```nginx
server{
  listen 80;
  server_name  api.example.com;
  index  index.php index.html index.htm;

  location / {
    proxy_pass  http://localhost:3300; # 转发规则
    proxy_set_header Host $proxy_host; # 修改转发请求头，让8080端口的应用可以受到真实的请求
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  }
}
```

In this way, when accessing http://api.example.com, it will be forwarded to the local port 3300.

## Forward the domain name request to another domain name

Suppose there is an alternate domain name: backup.example.com. When accessing the host backup.example.com, it is directly forwarded to the main domain name example.com. The configuration file can be written as follows:

```nginx
server{
  listen 80;
  server_name  backup.example.com;
  index  index.php index.html index.htm;

  location / {
    proxy_pass  http://example.com;
    proxy_set_header Host $proxy_host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  }
}
```

In this way, when you access http://backup.example.com, it will be forwarded to example.com

## Forward a local port to another port or another domain name

Assume that the HTTP service deployed locally needs to be forwarded to port 3300 or other domain names example.com

```nginx
server{
  listen 80;
  server_name localhost; # 公网ip
  index  index.php index.html index.htm;

  location / {
    proxy_pass  http://localhost:3300; # 或 http://example.com
    proxy_set_header Host $proxy_host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  }
}
```

In this way, when accessing http://localhost, it will be forwarded to the local port 3300 or http://example.com

## Note: adding / or not adding / at the end of location

When configuring proxy_pass proxy forwarding, if the following url is added with `/`, it indicates the absolute root path; if there is no /, it indicates the relative path.

For example

1. with `/`

```nginx
server_name example.com
location /data/ {
    proxy_pass http://localhost/;
}
```

Accessing http://example.com/data/index.html will be forwarded to http://localhost/index.html

2. without `/`

```nginx
server_name example.com
location /data/ {
    proxy_pass http://localhost;
}
```

Accessing http://example.com/data/index.html will be forwarded to http://localhost/data/index.html


This article gives three examples of Nginx proxy forwarding: forwarding domain name requests to a local port, forwarding domain name requests to another domain name, and forwarding a local port to another port or another domain name.

Some Examples of Nginx Proxy Forwarding


**Because browsers have inherent defects in DOM manipulation**. First of all, we need to know how the browser renders the code into a view after receiving the web page.

Different processes of a browser have different divisions of labor, among which the rendering process is responsible for rendering the page. \*\*
Taking Chromium-based browsers as an example, the workflow is roughly like this:

- Parse HTML and construct **DOM Tree**
- Parsing CSS, constructing **CSSOM**
- Generate the final **Render Tree** from the comprehensive construction of `DOM` and `CSSOM`
- Calculate layout parameters for Render tree\*\*
- The final Render tree, using the browser's rendering engine for **drawing**

It can be known that the process from HTML/CSS to Render Tree has gone through a very complicated process. Among them, the processes that take the longest time are the fourth and fifth steps: calculating layout parameters and drawing. When a DOM is added or removed from the page, the browser needs to start from scratch, construct the Render Tree, recalculate the layout and render the modified DOM tree again, which is a very resource-intensive and computationally intensive task.

The above is one reason, but there is another more important reason is that JavaScript accesses the information of DOM objects in the browser, and it also needs to build a bridge between JS and DOM, which needs to rely on the underlying implementation of the browser, which is also a very costly process. resource process. On the other hand, the resources of the main process are limited, and the JavaScript interpretation thread and rendering thread are mutually blocked. Manipulating the DOM requires JavaScript. Therefore, when JavaScript is executed, the view update will be blocked, and the rendering effect will be displayed externally, which will reduce the user experience.

Therefore, in order to reduce the adverse impact of manipulating the DOM on performance, there are two ideas:

- Reduce the number of visits to the DOM.
- Reduce the number of times to create and delete DOM objects, and reuse the existing DOM as much as possible.

For the first idea, the overhead of js accessing the DOM in the browser is very high, so you can **use virtual DOM** to solve this problem. Virtual DOM is a structure of simulated DOM that JS self-maintains. It stores the abstract information of real DOM, which can save the overhead of accessing real DOM. Changing the access to real DOM to virtual DOM, and changing the operation of real DOM to virtual DOM can reduce a lot of overhead.

For the second case, use the Diff algorithm to compare the information before and after the update on the virtual DOM. The Diff algorithm is essentially a tree traversal to find out the changed tree nodes. Therefore, after a bunch of operations on the virtual DOM, and then comparing the differences between the two trees before and after the operation, the original nodes can also be reused to a large extent to reduce overhead.

Take the Todo List as an example, use the `<li>` tag to store the item content. Now if you want to delete an item and add another item, then in the native method it is:

- Get the corresponding `<li>` element
- Remove the `<li>` element
- New `<li>` element
- Fill data and insert into current DOM tree, trigger Relayout and Repaint

But with Diff + Virtual DOM, it is:

- Store all `<li>` in a JS object in advance to construct a virtual DOM
- Remove `<li>` in virtual DOM
- Add `<li>` in the virtual DOM to get a new virtual DOM
- Using the Diff algorithm to compare the two new and old virtual DOMs, it is found that the number of DOMs has not changed, and the existing DOM objects can be reused, and there is no need to delete or create DOMs, just change the data.

Now front-end frameworks such as React\Vue use the Diff algorithm and virtual DOM to reduce the unnecessary performance overhead of operating and accessing DOM, roughly following the above ideas, and making up for the performance defects of front-end DOM operations.


Because browsers have inherent defects in DOM manipulation. First of all, we need to know how the browser renders the code into a view after receiving the web page.

MY BLOG

ALL POSTS