并发性是指系统中同时执行多个独立任务的能力。

Swift - 并发性


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

Cypress 包含测试网站所必须的所有组件，可以快速编写测试用例。

## 下载源码

```bash
git clone github.com/ahfarmer/emoji-search
#安装依赖
cd emoji-search && npm install
#启动项目
npm run start
#访问http://localhost:3000
```

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

## 安装 Cypress

```bash
#安装
npm install cypress —save-dev

#启动
npx cypress open
#或者
./node_modules/.bin/cypress open
#或者
$(npm bin)/cypress open
```

以上命令将会在项目根目录创建`cypress`文件夹，如下： ![09GuGd](https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/09GuGd.jpg)

## 创建测试用例

默认情况下，所有测试都存储在`cypress/integration`文件夹中，该文件夹在第一次`Cypress`启动时自动创建。在此示例中，我们将编写一个测试，该测试将：

检查输入单词`lollipop`后是否在页面上仅显示一个结果

检查标题类的标签是否包含正确的文本

首先在`cypress/integration`目录中创建一个`sample_spec.js`文件：

该文件应包含以下代码：

```js
describe('Sample test', () => {
  it('Search lollipop emoji', () => {
    cy.visit('http://localhost:3000/') // launch project website
    cy.get('input').type('lollipop') // enter 'lollipop' in search
    cy.get('.component-emoji-result-row').should('have.length', 1) // check if only 1 result is returned
    cy.contains('Lollipop').should('have.class', 'title') // check if returned element contains 'title' class
  })
})
```

你将会看到这样的窗口：

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

单击`sample_spec.js`后，将打开一个带有搜索引擎实例的窗口，您可以在其中实时预览执行的测试。结果应如下所示（请记住，带有示例性网站的项目应该正在运行）：

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


Cypress入门


## 隐式类型转换

**布尔值**

以下值会被转换为 `false`：

- undefined, null
- false
- -0,+0,NaN
- ''

其他值都将被转换成`true`。

**字符串**

字符串的隐式类型转换是指，当一个值被赋值给一个字符串类型的变量时，会被转换成一个字符串。例如：加号（`+`）符号会被转换成字符串，因此，`1 + 2` 会被转换成 `'1+2'`。

```js
var x = '5'
x + 1 // '51'
```

**对象**

只有在需要用到数字或者字符串的时候，对象才会被转换。

当需要将对象转换成数字或者字符串时，会调用对象的 `valueOf()` 方法。具体步骤如下：

- 调用`valueOf()`方法，如果返回值是一个数字，则直接返回该数字。
- 否则，调用`toString()`方法，如果返回值是一个字符串，则直接返回该字符串。
- 否则，抛出一个 `TypeError` 异常。

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


强制类型转换


颜色是设计中一个非常重要的元素，对于网站、移动应用、平面设计、产品设计等多个领域都有着至关重要的作用。在 Web 设计中，我们通常使用 CSS 来定义颜色。

CSS 中，颜色的表示方法有以下几种：

- 关键词表示法：通过关键词来表示颜色，如 red、green、blue 等。这种方法简单易懂，但是可用的关键词数量有限，且颜色表达不够精确。
- 十六进制表示法：通过三个或六个十六进制数值来表示颜色，如 #FF0000 表示红色。这种方法可以表示任何颜色，且具有较高的精确度和灵活性，是 Web 设计中最常用的颜色表示方法之一。
- RGB 表示法：通过三个 RGB 值来表示颜色，如 rgb(255, 0, 0) 表示红色。这种方法也可以表示任何颜色，与十六进制表示法相比，更易于计算和调整。
- RGBA 表示法：与 RGB 表示法类似，但是增加了一个 alpha 通道，用于表示颜色的透明度。如 rgba(255, 0, 0, 0.5) 表示半透明的红色。
- HSL 表示法：通过色相（Hue）、饱和度（Saturation）、亮度（Lightness）三个值来表示颜色，如 hsl(0, 100%, 50%) 表示红色。这种方法更接近人类感知颜色的方式，也更容易理解和调整。
- HSLA 表示法：与 HSL 表示法类似，但是增加了一个 alpha 通道，用于表示颜色的透明度。如 hsla(0, 100%, 50%, 0.5) 表示半透明的红色。

以上就是 CSS 中常用的颜色表示方法。除了这些方法，还有其他一些颜色表示方法，如系统色、渐变色等，但在 Web 设计中应用较少。在实际设计中，我们需要根据设计需求和效果选择最合适的颜色表示方法。

## 案例

使用十六进制表示法定义背景颜色：

```css
body {
  background-color: #f7df1e; /* 黄色 */
}
```

使用 RGB 表示法定义字体颜色：

```css
h1 {
  color: rgb(255, 0, 0); /* 红色 */
}
```

使用 HSLA 表示法定义边框颜色和透明度：

```css
div {
  border: 2px solid hsla(240, 100%, 50%, 0.5); /* 半透明的蓝色边框 */
}
```

使用关键词表示法定义按钮颜色：

```css
button {
  background-color: deepskyblue; /* 深天蓝色 */
  color: white; /* 白色文字 */
}
```

使用渐变色定义背景颜色：

```css
body {
  background-image: linear-gradient(
    to bottom,
    #2980b9,
    #6dd5fa,
    #ffffff
  ); /* 从上到下渐变色背景 */
}
```


css - Color


浅路由是在同一个路由中跳转，不会调用数据获取函数，比如：`getServerSideProps`、`getStaticProps`等。

启用浅路由的方式，在路由跳转中设置`shallow`为`true`

```jsx
import Router from 'next/router'
import Head from 'next/head'

function HomePage(props) {
  return (
    <>
      <Head>
        <title>Welcome to Next.js!</title>
      </Head>
      <div>Welcome to Next.js!</div>
      <span
        onClick={() => Router.push('/?counter=1', undefined, {shallow: true})}
      >
        Reload
      </span>
      <br />
      <div>Next stars: {props.stars}</div>
      <img src="/logo.png" alt="Logo" />
    </>
  )
}

export async function getServerSideProps(context) {
  const res = await fetch('https://api.github.com/repos/vercel/next.js')
  const json = await res.json()
  return {
    props: {stars: json.stargazers_count}
  }
}

export default HomePage
```

上面的代码仅接收路由的参数更新，且不会被替换。


浅路由是在同一个路由中跳转，不会调用数据获取函数。

Next.js - Shallow Routing


`Node.js`提供了一个`fs`模块，用于操作文件系统。通过`fs`模块，可以读取文件，创建文件，删除文件，移动文件，复制文件等。

```js
const fs = require('fs')
```

## sync 和 async

`fs`模块中的每个方法都有`sync`和`async`两种形式。异步方法会返回一个`Promise`对象，而同步方法会返回一个`callback`。

```bash
echo "hello world" > demo.txt
```

```js
const fs = require('fs')

// 异步读取文件
fs.readFile('demo.txt', function (err, data) {
  if (err) {
    return console.error(err)
  }
  console.log('Asynchronous read: ' + data.toString())
})

// 同步读取文件
var data = fs.readFileSync('demo.txt')
console.log('Synchronous read: ' + data.toString())

console.log('Program Ended')
```

## 打开文件

语法：`fs.open(path, flags, [mode], callback)`

- `path`: 文件路径
- `flags`: 打开文件的方式，可以是`r`，`r+`，`w`，`w+`，`a`，`a+`，`x`，`x+`，`t`，`t+`，`c`，`c+`
- `mode`: 打开文件的模式，默认是`0o666`
- `callback`: 回调函数，参数为 err,fd

```js
const fs = require('fs')
fs.open('demo.txt', 'r', function (err, fd) {
  if (err) {
    return console.error(err)
  }
  console.log('文件打开成功，文件描述符：' + fd)
})
```

## 获取文件信息

语法：`fs.stat(path, callback)`

- `path`: 文件路径
- `callback`: 回调函数，参数为 err,stats

方法：

- `stats.isFile()`: 判断是否是文件
- `stats.isDirectory()`: 判断是否是目录
- `stats.isBlockDevice()`: 判断是否是块设备
- `stats.isCharacterDevice()`: 判断是否是字符设备
- `stats.isSymbolicLink()`: 判断是否是符号链接
- `stats.isFIFO()`: 判断是否是 FIFO，如果是 FIFO，则返回 true，否则返回 false
- `stats.isSocket()`: 判断是否是 Socket

```js
const fs = require('fs')
fs.stat('demo.txt', function (err, stats) {
  if (err) {
    return console.error(err)
  }
  console.log(stats)
  console.log('文件类型：' + stats.isFile())
  console.log('文件大小：' + stats.size)
  console.log('文件创建时间：' + stats.birthtime)
})
```

## 写入文件

语法：`fs.writeFile(file, data, [options], callback)`

- `file`: 文件路径
- `data`: 写入的数据
- `options`: 可选参数，可以是`encoding`，`mode`，`flag`
- `callback`: 回调函数，参数为 err

```js
const fs = require('fs')
fs.writeFile('demo.txt', '我是写入的文件内容', function (err) {
  if (err) {
    return console.error(err)
  }
  console.log('数据写入成功！')
  console.log('--------我是分割线-------------')
  console.log('读取写入的数据！')
  fs.readFile('demo.txt', function (err, data) {
    if (err) {
      return console.error(err)
    }
    console.log('异步读取文件数据: ' + data.toString())
  })
})
```

## 读取文件

语法：`fs.read(fd, buffer, offset, length, position, callback)`

- `fd`：返回的文件描述符
- `buffer`：数据被写入的缓冲区
- `offset`：缓冲区写入的偏移位置
- `length`：读取的字节数
- `position`：从哪里开始读取
- `callback`：`err`、`bytesRead`、`buffer`

```js
var fs = require('fs')
var buf = new Buffer(1024)

console.log('Going to open an existing file')
fs.open('input.txt', 'r+', function (err, fd) {
  if (err) {
    return console.error(err)
  }
  console.log('File opened successfully!')
  console.log('Going to read the file')

  fs.read(fd, buf, 0, buf.length, 0, function (err, bytes) {
    if (err) {
      console.log(err)
    }
    console.log(bytes + ' bytes read')

    // Print only read bytes to avoid junk.
    if (bytes > 0) {
      console.log(buf.slice(0, bytes).toString())
    }
  })
})
```

## 关闭文件

语法：`fs.close(fd, callback)`

- `fd`：返回的文件描述符
- `callback`：回调函数，参数为 err

```js
const fs = require('fs')
fs.open('demo.txt', 'r', function (err, fd) {
  if (err) {
    return console.error(err)
  }
  console.log('文件打开成功，文件描述符：' + fd)
  fs.close(fd, function (err) {
    if (err) {
      return console.error(err)
    }
    console.log('文件关闭成功！')
  })
})
```

## 删除文件

语法：`fs.unlink(path, callback)`

- `path`：文件路径
- `callback`：回调函数，参数为 err

```js
const fs = require('fs')
fs.unlink('demo.txt', function (err) {
  if (err) {
    return console.error(err)
  }
  console.log('文件删除成功！')
})
```

## 创建目录

语法：`fs.mkdir(path, [mode], callback)`

- `path`：目录路径
- `mode`：目录权限
- `callback`：回调函数，参数为 err

```js
const fs = require('fs')
fs.mkdir('/tmp/test', function (err) {
  if (err) {
    return console.error(err)
  }
  console.log('目录创建成功！')
})
```

## 读取目录

语法：`fs.readdir(path, callback)`

- `path`：目录路径
- `callback`：回调函数，参数为 err、files

```js
const fs = require('fs')
fs.readdir('/tmp', function (err, files) {
  if (err) {
    return console.error(err)
  }
  files.forEach(function (file) {
    console.log(file)
  })
})
```

## 阅读目录

语法：`fs.readdirSync(path)`

- `path`：目录路径

```js
const fs = require('fs')
fs.readdirSync('/tmp')
```

## 删除目录

语法：`fs.rmdir(path, callback)`

- `path`：目录路径
- `callback`：回调函数，参数为 err

```js
const fs = require('fs')
fs.rmdir('/tmp/test', function (err) {
  if (err) {
    return console.error(err)
  }
  console.log('目录删除成功！')
})
```

[入门教程](http://nodejs.cn/learn/the-nodejs-fs-module)
[Node.js 文档](http://nodejs.cn/api/buffer.html)


File System是一个文件系统模块，用于操作文件系统。

Node.js - File System


## 前置

[【上一篇】](/blog/javascript/nextjs/tips/add-theme-mode-switch-to-blog)完成了使用 Next.js 构建 blog 并添加了主题切换功能。

好的 SEO 将有助于提高网站权重，带来更多流量。作为前端工程师的我们，就有着得天独厚的优势，我们不需要做到优化工程师的级别，我们只需要做好几个方面，就能完成一个网站 80%左右的 SEO 优化工作了～因为我研究下来发现 SEO 针对点大部分都是前端基础～

## 创建组件

创建`components/SEO/index.tsx`

```tsx
import {NextSeo} from 'next-seo'

export default function SEO(props) {
  const {url, cover, description, title} = props
  return (
    <NextSeo
      titleTemplate="%s - Manon.icu"
      openGraph={{
        type: 'website',
        url,
        description:
          description ??
          'The personal website for Manon, Frontend Web Developer.',
        site_name: title ?? 'Manon | manon.icu',
        images: [
          {
            url: cover ?? 'https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/9oh25b.jpg',
            width: 900,
            height: 900
          }
        ]
      }}
      canonical={url}
      twitter={{
        handle: '@Manonicu',
        cardType: 'summary_large_image'
      }}
    />
  )
}
```

修改`pages/_app.tsx`，引入`components/SEO/index.tsx`，在`Head`下添加 SEO 组件，组件加上 props`url`

在 blog 内页同样引入，分别传入`title`、`description`、`cover`

```tsx
// pages/[...slug].tsx
// <SEO
//   title={title}
//   description={description}
//   cover={cover}
//   openGraph={{title, description}}
// />
```

[Source Code](https://github.com/Manonicu/blog-demo/tree/feat-seo)


从性能、打包大小、SEO来看，Next.js可能是最适合写blog的React框架。