可选链（Optional Chaining）是 Swift 中一种用于在调用属性、方法或下标脚本时处理值可能为空的机制。

Swift - 可选链


Swift 有三种条件判断：

- if else
- switch
- ternary `三元运算`

### if else

> if 语句 后可以有可选的 else 语句, else 语句在布尔表达式为 false 时执行。

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

```swift
let level = 9001
if level > 9000 {
  print("It's over 9000! You can proceed with your quest.")
} else {
  print("Bummer, you definitely need to go for a training arc")
}
```

### switch

> switch 语句允许测试一个变量等于多个值时的情况。

```swift
let level = 10000

switch level {
   case 7000 :
     print("Muda Muda Muda Muda Muda Muda")
   case 8000 :
     print("You are not strong enough")
   case 9000 :
     print("You are strong enough! You can proceed with your quest")
   case 10000:
     print("It's over 9000! You can proceed with your quest.")
   default :
     print("Please try again")
}
```

### ternary

> switch 语句允许测试一个变量等于多个值时的情况。 Swift 语言中  只要匹配到 case 语句，则整个 switch 语句执行完成。

```swift
let level = 9000
print( level > 9000 ? "It's over 9000! You can proceed with your quest." :  print("Bummer, you definitely need to go for a training arc")
```


Operators and conditions - 操作符、条件判断


Flexbox 是一种 CSS 布局模式，用于在容器中快速、灵活地排列和对齐子元素，可以有效地实现自适应布局和响应式设计。Flexbox 的全称是 Flexible Box Layout，即“弹性盒子布局”。

Flexbox 的核心是容器和子元素之间的关系，容器称为 flex container（弹性容器），子元素称为 flex item（弹性子元素）。通过在容器上设置 display: flex 或 display: inline-flex 属性，可以将容器变为一个 flexbox，然后可以使用一系列的 CSS 属性来控制子元素的排列和对齐方式。

以下是 Flexbox 常用的属性和其作用：

- flex-direction：定义 flex container 的主轴方向，取值包括 row、row-reverse、column 和 column-reverse 四种方向。
- justify-content：定义 flex container 中子元素沿主轴方向的对齐方式，包括 flex-start、flex-end、center、space-between、space-around、space-evenly 六种取值。
- align-items：定义 flex container 中子元素沿交叉轴方向的对齐方式，包括 flex-start、flex-end、center、baseline、stretch 五种取值。
- flex-wrap：定义 flex container 中子元素在一行放不下时如何换行，取值包括 nowrap、wrap 和 wrap-reverse 三种。
- align-content：定义多行子元素在交叉轴方向的对齐方式，仅当 flex-wrap 属性为 wrap 或 wrap-reverse 时生效，包括 flex-start、flex-end、center、space-between、space-around、stretch 六种取值。
- flex-grow：定义子元素的放大比例，如果容器有多余的空间，子元素会按照各自的放大比例分配这些空间。
- flex-shrink：定义子元素的缩小比例，如果容器空间不足，子元素会按照各自的缩小比例缩小。
- flex-basis：定义子元素的基准尺寸，用于计算子元素的放大和缩小比例。
- order：定义子元素的排列顺序，数值越小的子元素越靠前。

Flexbox 的优点是可以简化布局代码，减少使用 float 和 position 的情况，同时可以实现自适应和响应式设计，提高页面的可维护性和可扩展性。但是需要注意的是，Flexbox 不适用于所有场景，例如多行文本的垂直居中需要结合其他技术实现。

以下是一个使用 Flexbox 实现的简单的响应式布局案例，包含一个 header、一个 sidebar 和一个 content 区域，可以根据屏幕尺寸自适应布局：

HTML 代码：

```html
<div class="container">
  <header>Header</header>
  <div class="content">
    <div class="sidebar">Sidebar</div>
    <div class="main">Main content</div>
  </div>
</div>
```

CSS 代码：

```css
.container {
  display: flex;
  flex-wrap: wrap;
}

header {
  width: 100%;
  background-color: #333;
  color: #fff;
  padding: 20px;
  text-align: center;
}

.content {
  display: flex;
  flex-wrap: wrap;
  flex-grow: 1;
  justify-content: flex-start;
  align-items: stretch;
}

.sidebar {
  flex-basis: 200px;
  background-color: #eee;
  padding: 20px;
}

.main {
  flex-grow: 1;
  padding: 20px;
}

@media screen and (max-width: 768px) {
  .sidebar {
    flex-basis: 100%;
  }
}
```

解释：

首先将容器设置为 flex 布局，使用 flex-wrap 属性允许子元素在需要时换行。

- header 元素使用宽度为 100%，背景颜色为深灰色，颜色为白色，使用 padding 属性来增加内边距，使其看起来更美观。

- content 元素作为 flex container，使用 flex-grow 属性让其占据剩余的空间，使用 justify-content 和 align-items 属性分别对子元素进行水平和垂直对齐。

- sidebar 元素使用 flex-basis 属性指定其基准尺寸为 200px，背景颜色为浅灰色，使用 padding 属性增加内边距。

- main 元素使用 flex-grow 属性让其占据剩余的空间，使用 padding 属性增加内边距。

- 在屏幕宽度小于 768px 时，将 sidebar 元素的基准尺寸设置为 100%，让其占据整行宽度。

这个案例展示了 Flexbox 的基本用法，通过简单的 CSS 属性设置，可以实现自适应和响应式布局。

更多请参考：[Flexbox 指南](/blog/css/tips/Flexbox指南)


css - flexbox


![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)


强制类型转换


在`Next.js`中支持全局样式，并且仅可在`_app.js`中引入。

创建全局样式

```css
html,
body {
  padding: 0;
  margin: 0;
  line-height: 1.6;
  font-size: 18px;
  background-color: lime;
}

* {
  box-sizing: border-box;
}

a {
  color: #0070f3;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

img {
  max-width: 100%;
  display: block;
}
```

在`_app.js`中引入全局样式

```js
import '../styles/styles.css'

export default function App({Component, pageProps}) {
  return <Component {...pageProps} />
}
```

启动服务

```bash
npm run dev
```

检查结果

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


Next.js - Global CSS Support


[Chrome Store](https://chrome.google.com/webstore/devconsole)

向 chrome store 发布插件需要账户，并且一次性支付 5 刀

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

注册并支付后，点击做侧边栏选项卡，点击新建项目

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

提交`zip`文件后，需要填写一些必须的字段：

- 描述：关于此扩展做什么的
- 类别：扩展类型
- 语言：插件的主要语言
- 图标：商店图标（128\*128）
- 屏幕截图：提供至少一张 1280*800 或 640*400 的屏幕截图

在`隐私`选项上：

- 简短介绍
- 权限：使用了哪些权限
- 数据：需要使用哪些数据

如无法提交，点击以下链接查看可能的原因。

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

## Source Code

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


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