Postgresql INNER JOIN从多个表中选择数据。

Postgresql - LEFT JOIN


本章学习如何创建`turboReader`插件，如下图：

<video
  src={
    'https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/turboreader_ghlbnk.webm'
  }
  autoPlay
></video>

## 初始化项目

```bash
mkdir turboReader && cd turboReader
```

添加`manifest.json.json`

```json
{
  "manifest_version": 3,
  "version": "1.0",
  "name": "TurboReader",
  "description": "Become a faster reader with TurboReader",
  "action": {},
  "icons": {
    "48": "icons/icon-48.png"
  },
  "background": {
    "service_worker": "background.js"
  },
  "permissions": ["activeTab", "scripting"]
}
```

添加`background.js`，获取活动标签，并注入名为`turboMode`的函数。

```js
const turboMode = () => {
  // do something
}

chrome.action.onClicked.addListener(async () => {
  const [tab] = await chrome.tabs.query({active: true, currentWindow: true})
  chrome.scripting.executeScript({
    target: {tabId: tab.id},
    function: turboMode
  })
})
```

## 创建函数

首先获取页面内所有段落

```js
const paragraphs = document.getElementsByTagName('p')
```

判断当前是否是阅读模式

```js
const isTurboMode = document.body.classList.contains('trms')
```

遍历并处理段落

```js
for (const paragraph of paragraphs) {
  if (isTurboMode) {
    // 阅读模式已开启就返回当前段落
    paragraph.innerText = paragraph.innerText
  } else {
    // 阅读模式未开启，返回处理后的段落
    paragraph.innerHTML = paragraph.innerText
      .split(' ')
      .map((word) => {
        const length = word.replace(/[^a-zA-Z0-9]+$/, '').length
        const boldLength = length === 1 ? 1 : Math.floor(length / 2)
        return `<strong>${word.substring(
          0,
          boldLength
        )}</strong>${word.substring(boldLength)}`
      })
      .join(' ')
  }
}
```

在循环外部加入判断

```js
isTurboMode
  ? document.body.classList.remove('trms')
  : document.body.classList.add('trms')
```

完整代码

```js
const turboMode = () => {
  const paragraphs = document.getElementsByTagName('p')
  const isTurboMode = document.body.classList.contains('trms')
  for (const paragraph of paragraphs) {
    if (isTurboMode) {
      paragraph.innerText = paragraph.innerText
    } else {
      paragraph.innerHTML = paragraph.innerText
        .split(' ')
        .map((word) => {
          const length = word.replace(/[^a-zA-Z0-9]+$/, '').length
          const boldLength = length === 1 ? 1 : Math.floor(length / 2)
          return `<strong>${word.substring(
            0,
            boldLength
          )}</strong>${word.substring(boldLength)}`
        })
        .join(' ')
    }
  }

  isTurboMode
    ? document.body.classList.remove('trms')
    : document.body.classList.add('trms')
}
```

## Source Code

[【Source Code】](https://github.com/rebelchris/turbo-reader)


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

Chrome插件开发 - Creating the TurboReader browser extension


ReactJS 是一个声明性、高效和灵活的 JavaScript 库，用于构建可重用的 UI 组件。这是一个开源的、基于组件的前端库，仅负责应用程序的视图层。它最初由 Facebook 开发和维护，后来用于 WhatsApp 和 Instagram 等产品。

## 前置技术

- babel
- webpack
- nodejs && npm
- html && css

## 基本概念

- <a href="/blog/react/React Elements">React Elements</a>
- <a href="/blog/react/React Elements Attributes">React Elements Attributes</a>
- <a href="/blog/react/React Elements Styles">React Elements Styles</a>
- <a href="/blog/react/React Fragments">React Fragments</a>
- <a href="/blog/react/React Components">React Components</a>
- <a href="/blog/react/React Props">React Props</a>
- <a href="/blog/react/React Children Props">React Children Props</a>
- <a href="/blog/react/React Conditionals">React Conditionals</a>
- <a href="/blog/react/React Lists">React Lists</a>
- <a href="/blog/react/React Context">React Context</a>
- <a href="/blog/react/React Hooks">React Hooks</a>


Learning React.js


1. 复制`favicon`文件到`public`目录下

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

2. 编辑`pages/_app.js`

```js
import Head from 'next/head'

function MyApp({Component, pageProps}) {
  return (
    <>
      {/* the favicon */}
      <Head>
        <link rel="shortcut icon" href="/favicon.ico" />
      </Head>
      {/* the favicon */}
      <Component {...pageProps} />
    </>
  )
}

export default MyApp
```

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


Next.js是基于React的框架，具有服务器端渲染功能。

Next.js - Add Favicon


在 Swift 中，高级运算符是那些执行特定任务或操作的运算符。Swift 支持大部分标准 C 语言中的运算符，并增加了一些新的运算符。高级运算符可以用于自定义类型和类库中，也可以用于 Swift 标准库中定义的类型。Swift 中支持的高级运算符包括：

- 位运算符：按位操作二进制数据，包括按位取反、按位与、按位或、按位异或等。
- 移位运算符：用来对二进制数据进行左移或右移操作。
- 溢出运算符：对于数值类型，当其存储的值超出其所能容纳的范围时，就会发生溢出。Swift 中提供了溢出加法运算符（&+）、溢出减法运算符（&-）和溢出乘法运算符（&\*）来处理这种情况。
- 比较运算符：用于比较两个值的大小关系，包括等于、不等于、大于、小于、大于等于和小于等于等。
- 逻辑运算符：用于组合和操作布尔值，包括逻辑非、逻辑与和逻辑或。
- 匹配模式运算符：用于判断一个值是否匹配某个模式，包括元组模式、可选模式、类型转换模式等。

Swift 还提供了一些自定义高级运算符的功能。开发者可以通过运算符函数来定义新的运算符，并对其进行重载。这使得 Swift 具有更高的可读性和可维护性，并能够实现更简洁和灵活的代码实现。


在 Swift 中，高级运算符是那些执行特定任务或操作的运算符。Swift 支持大部分标准 C 语言中的运算符，并增加了一些新的运算符。高级运算符可以用于自定义类型和类库中，也可以用于 Swift 标准库中定义的类型

Swift - 高级操作符


## 通过 nvm 安装 nodejs

## 安装 nvm

```bash
curl https://raw.githubusercontent.com/creationix/nvm/master/install.sh | bash
```

或者

```bash
wget -qO- https://raw.githubusercontent.com/creationix/nvm/master/install.sh | bash
```

然后：

```bash
source ~/.bashrc
```

## 安装 nodejs

```bash
nvm install stable
```


安装nvm和nodejs


## 水平居中

### Text

```css
p {
  text-align: center;
}
```

### Blocks

![image](https://cdn.jsdelivr.net/gh/manonicu/pics@master/images/20190125091332.png)

```css
/*flexbox*/
#mysection {
  display: flex;
  justify-content: center;
}

/*margin*/
#mysection {
  margin: 0 auto;
  width: 50%;
}
```

## 垂直居中

### Text

![image](https://cdn.jsdelivr.net/gh/manonicu/pics@master/images/20190125092037.png)

```css
#mysection {
  display: flex;
  align-items: center;
}
```

## 水平垂直居中

![image](https://cdn.jsdelivr.net/gh/manonicu/pics@master/images/20190125091735.png)

```css
/*flex*/
#mysection {
  display: flex;
  align-items: center;
  justify-content: center;
}
/*grid*/
body {
  display: grid;
  place-items: center;
  height: 100vh;
}
```
