React是一个JavaScript库，致力于使UI开发变得简单

React Components


在上一篇文章[【Add Tailwind】](/blog/translate/build-chrome-extensions/add-tailwind)学习了集成 tailwind。

这篇文章学习使用 react 创建一个新标签插件，类似如图：

也可以使用其他自己喜欢的框架：vue、angular、svlete 等

<video
  src="https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/react-browser_jqqqkk.webm"
  autoPlay
/>

## 安装 React

```bash
npm install react react-dom
touch -p index.js src/{App,Counter}.js
vim new-tab.html
```

**new-tab.html**

```html
<body>
  <div id="app"></div>
  <script type="module" src="index.js"></script>
</body>
```

**index.js**

```js
import ReactDOM from 'react-dom'
import {App} from './src/App'

const app = document.getElementById('app')
ReactDOM.render(<App />, app)
```

**App.js**

```js
import Counter from './Counter'
export function App() {
  return (
    <div className="flex flex-col items-center justify-center w-screen h-screen bg-indigo-400 text-6xl font-bold text-white">
      <p>Welcome 👋</p>
      <Counter />
    </div>
  )
}
```

**Counter.js**

```js
import {useState} from 'react'

export default function Counter() {
  const [counter, setCounter] = useState(0)
  const increase = () => setCounter((count) => count + 1)
  const decrease = () => setCounter((count) => count - 1)
  return (
    <div>
      <button onClick={decrease}>-</button>
      <span className="px-4">{counter}</span>
      <button onClick={increase}>+</button>
    </div>
  )
}
```

跑起来

```bash
npm run build
```

## 测试插件

![FMA6T1](https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/FMA6T1.jpg)

可以在这里找到[【Source Code】](https://github.com/rebelchris/new-tab-extension/tree/react)


基于react、tailwindcss开发自己的chrome插件

Chrome插件开发 - 使用React开发扩展


## TLS & SSL

TSL 是一种安全传输协议，它是一种基于 SSL 的加密协议。

TSL 使用公钥加密数据，使用私钥解密数据。

公开密钥加密（public-key cryptography）也称为非对称密钥加密（asymmetric cryptography），是一种密码学算法类型。该加密算法使用两个不同的密钥：加密密钥和解密密钥。

私钥创建：

```bash
openssl genrsa -out private.pem 2048
```

证书创建：

```bash
openssl req -new -key private.pem -out csr.pem
```

使用 CSR 证书创建证书：

```bash
openssl x509 -req -in csr.pem -signkey private.pem -out certificate.pem
```

TLS 客户端实例：

```js
const tls = require('tls')
function connected(stream) {
  if (stream) {
    stream.write('GET / HTTP/1.0\n\rHost: encrypted.google.com:443\n\r\n\r')
  } else {
    console.log('Connection failed')
  }
}
var dummy = this
dummy.socket = tls.connect(443, 'encrypted.google.com', function () {
  dummy.connected = true
  if (dummy.socket.authorized) {
    dummy.socket.setEncoding('utf-8')
    connected(dummy.socket)
  } else {
    console.log(dummy.socket.authorizationError)
    connected(null)
  }
})
dummy.socket.addListener('data', function (data) {
  console.log(data)
})
dummy.socket.addListener('error', function (error) {
  if (!dummy.connected) {
    connected(null)
  }
  console.log('FAIL')
  console.log(error)
})
dummy.socket.addListener('close', function () {
  // do something
})
```

## Debugger

`Node.js`提供一个简单的基于 TCP 的调试器，可以在控制台中调试脚本。

语法：`node --inspect [script] [arguments]`或`node debug [script] [arguments]`

```bash
node demo.js
```

除此之外还可以使用`console.log`输出调试信息，这些信息将被输出到控制台。


TLS负责安全传输，SSL负责安全签名，Debugger负责调试。

Node.js - TLS & SSL & Debugger


CSS（Cascading Style Sheets）是一种用于网页样式设计的语言。通过 CSS 样式表，可以控制网页中元素的颜色、大小、位置、字体、背景等外观样式，使得网页在视觉效果上更加美观和易于阅读。

下面是一些 CSS 的基本概念和语法：

1. 选择器
   选择器是用于选择网页中的元素的名称或标识符，例如标签名、类名、ID 等。选择器用于定义需要应用样式的元素。下面是一些常见的选择器：

标签选择器：使用 HTML 元素的标签名作为选择器，例如 p、h1、div 等。
类选择器：使用 .class 作为选择器，例如 .header、.content、.footer 等。
ID 选择器：使用 #id 作为选择器，例如 #logo、#nav 等。
属性选择器：使用元素的属性作为选择器，例如 [type="text"]、[href] 等。
伪类选择器：使用元素的特定状态作为选择器，例如 :hover、:active、:focus 等。

2. 属性和值
   属性是用于控制网页元素外观的特定属性，例如字体、颜色、大小、边框等。属性值用于设置属性的具体值，例如字体类型、颜色代码、像素值等。

例如，以下代码中的 color 属性设置文字颜色，font-size 属性设置文字大小：

```css
p {
  color: red;
  font-size: 16px;
}
```

3. 注释
   CSS 中的注释用于在样式表中添加注释或说明，这些注释不会被浏览器解析或显示在网页中。注释使用 /_ ... _/ 的语法。

```css
/* 这是一条注释 */
p {
  color: blue;
}
```

4. 层叠和继承
   CSS 中的层叠和继承是两个重要的概念。

层叠指的是当一个元素被多个选择器选中时，浏览器会按照一定的规则决定哪些样式将被应用到该元素上。这些规则包括选择器的特殊性、选择器的位置等。

继承指的是当一个元素应用样式时，它的子元素也会继承这些样式。例如，如果给 body 元素设置了字体大小，那么网页中的所有子元素都会继承这个字体大小，除非它们自己定义了字体大小。

5. [盒模型](/blog/css/01-Box20%Model)


css样式表是一种用于网页样式设计的语言。通过CSS样式表，可以控制网页中元素的颜色、大小、位置、字体、背景等外观样式，使得网页在视觉效果上更加美观和易于阅读。

css -  样式表


`pages/api` 目录下的任何文件都将作为 `API` 端点映射到 `/api/*`，而不是 `page`。这些文件只会增加服务端文件包的体积，而不会增加客户端文件包的大小。

`Next.js`中创建 rest api 的方式如下：

```jsx
export default (req, res) => {
  console.log(req, res)
  return {}
}
```

- req: 请求对象，http.IncomingMessage 实例
- res: 响应对象，http.ServerResponse 实例

## 响应

- `res.status(code)`：设置响应状态码
- `res.json(data)`：设置响应数据
- `res.send(data)`：设置响应数据
- `res.redirect(url)`：重定向

创建一个响应：

```jsx
export default function handler(req, res) {
  res.status(200).json({message: 'Hello from Next.js!'})
}
```

## 创建路由

创建一个简单的 rest api

```jsx
export default (req, res) => {
  res.statusCode = 200
  res.setHeader('Content-Type', 'application/json')
  res.json({
    message: 'Hello World'
  })
}
```

创建动态 API 路由：`pages/api/post/[pid].js`

```jsx
export default function handler(req, res) {
  const {pid} = req.query
  res.end(`Post: ${pid}`)
}
```

创建匹配所有路由：`pages/api/post/[...slug].js`

```jsx
export default function handler(req, res) {
  const {slug} = req.query
  res.end(`Post: ${slug.join(', ')}`)
}
```

启动服务：

```bash
npm run dev
```

验证结果：

![Y72joU](https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/Y72joU.png)


Next.js - API Routes


在 CSS 中，z-index 和层叠上下文（Stacking Context）是用于控制元素的层叠顺序和叠放顺序的两个关键概念。它们通常用于解决重叠元素的显示问题。

1. z-index：z-index 是一个 CSS 属性，用于控制元素在层叠顺序中的位置。它的取值可以是数字或 auto。数字越大，元素越靠近视口，也就是显示在前面。如果两个元素的 z-index 相同，它们的顺序将由它们在 HTML 中出现的顺序决定。z-index 只对已经定位（position）的元素有效。

2. 层叠上下文（Stacking Context）：层叠上下文是一种 HTML 元素的层叠环境。每个层叠上下文都有自己的层叠顺序，元素在其中的位置由层叠顺序和 z-index 值共同决定。当一个元素有层叠上下文时，它的子元素的层叠顺序和 z-index 将相对于其父元素进行计算。

层叠上下文有多种创建方式，包括：

- 根元素（HTML）和 window 对象是层叠上下文的根元素。
- position 值为 absolute 或 relative 且 z-index 值不为 auto 的元素。
- position 值为 fixed 或 sticky 的元素。
- 具有 opacity 值小于 1 的元素。
- 具有 transform、filter、perspective、clip-path、mask、mix-blend-mode 等属性的元素。
- 具有 isolation 属性设置为 isolate 的元素。
- 具有 will-change 属性的元素（例如 will-change: transform）。

当元素发生重叠时，可以通过改变层叠顺序和 z-index 值来控制它们的显示顺序。但是，应该注意避免滥用 z-index 和层叠上下文，因为它们可能会导致布局问题和难以维护的代码。建议尽可能使用更简单和可预测的布局方法，如 Flexbox 和 Grid，来避免这些问题。

以下是一个示例，说明如何使用 z-index 和层叠上下文来控制元素的层叠顺序：

HTML 代码：

```html
<div class="parent">
  <div class="child child1"></div>
  <div class="child child2"></div>
</div>
```

CSS 代码：

```css
.parent {
  position: relative;
}

.child {
  position: absolute;
  width: 100px;
  height: 100px;
}

.child1 {
  background-color: red;
  z-index: 1;
}

.child2 {
  background-color: blue;
  z-index: 2;
}
```

在这个例子中，父元素 .parent 有定位属性 position: relative;，使它成为一个层叠上下文。子元素 .child 都有绝对定位属性 position: absolute;，并设置了相同的宽度和高度。.child1 的 z-index 值为 1，.child2 的 z-index 值为 2，因此 .child2 会显示在 .child1 的前面，即蓝色盒子会显示在红色盒子上面。

通过使用 z-index 和层叠上下文，可以方便地控制元素的层叠顺序，以达到所需的布局效果。


css - Z-index & Stacking Context


Docker 中的网络是像容器和镜像一样的另一个逻辑对象。就像其他两个一样，在 docker network 组下有大量的命令可以操纵网络。

要列出系统中的网络，请执行以下命令：

```bash
docker network ls

# NETWORK ID     NAME      DRIVER    SCOPE
# c2e59f2b96bd   bridge    bridge    local
# 124dccee067f   host      host      local
# 506e3822bf1f   none      null      local
```

在表格中查看 DRIVER 列。这些驱动程序可以被视为网络类型。

默认情况下，Docker 有五种网络驱动程序，如下：

- bridge：Docker 中的默认网络驱动程序。当多个容器以标准模式运行并需要相互通信时，可以使用此驱动程序。
- host：完全删除网络隔离。在主机网络下运行的任何容器本质上都附加到主机系统的网络。
- none：此驱动程序完全禁用容器的网络。我还没有发现任何使用场景。
- overlay：用于连接多个 Docker 守护进程的工具，超出了本书的范围。
- macvlan：允许分配 MAC 地址给容器，使它们在网络中像物理设备一样工作。

还有第三方插件，允许您将 Docker 与专用网络堆栈集成。在上面提到的五个中，只需使用桥接网络驱动程序。
