Sets对象允许存储唯一的值，而Map对象允许存储键值对。

Sets & Maps


## 闭包的定义

闭包(Closures)是自包含的功能代码块，可以将闭包视为无名函数，可以将其分配给变量或将其作为参数传递给函数。
闭包主要用于在将来满足条件时执行某项操作。例如，成功下载文件后，将其内容存储到数据库中。

全局函数和嵌套函数其实就是特殊的闭包。

闭包的形式有：

| 全局函数               | 嵌套函数                       | 闭包表达式                                         |
| ---------------------- | ------------------------------ | -------------------------------------------------- |
| 有名字但不能捕获任何值 | 有名字，也能捕获封闭函数内的值 | 无名闭包，使用轻量级语法，可以根据上下文环境捕获值 |

## 创建闭包

```swift
let helloWorldClosure = {
  print("hello")
}

helloWorldClosure()
```

上面的代码创建一个打印`Hello`的闭包，并将该闭包分配给`helloWorldClosure`变量。然后，可以像调用函数一样简单地调用闭包。

## 接收参数

```swift
let driving = { (place: String) in
    print("I'm going to \(place) in my car")
}
driving("London")
```

## 闭包返回值

```swift
let addClosure = { (first: Int, second: Int) -> Int in
    return first + second
}

let sum = addClosure(1,2)
```

上面的代码创建一个以两个数字为参数的闭包，并返回数字的总和。

## 作为参数传递

```swift
let saveFile = {
   //code to save file
}

func downloadFile(imageUrl, onSuccess: () ->) {
  //code to download file
  if(downloadSuccessfull){
     onSuccess()
  }
}

downloadFile(imageUrl: "Instagram", onSuccess: saveFile)
```

闭包强制返回值，`()->Void`表示不接受参数并且不返回任何内容。可以将`Void`替换为任何类型，如`Int`或者`String`，强制闭包返回值。

```swift
func travel(action: (String) -> String) {
    print("I'm getting ready to go.")
    let description = action("London")
    print(description)
    print("I arrived!")
}

travel { (place: String) -> String in
    return "I'm going to \(place) in my car"
}

# 闭包简写
travel {
    return "I'm going to \($0) in my car"
}

# 多参数传递
func travel(action: (String, Int) -> String) {
    print("I'm getting ready to go.")
    let description = action("London", 60)
    print(description)
    print("I arrived!")
}

travel {
    return "I'm going to \($0) at \($1) in my car"
}
```

## 闭包总结

- 可以将闭包赋值给变量
- 闭包接收参数和返回值
- 可以将闭包作为参数传递到函数中，这些闭包可以有自己的参数和返回值。
- 如果函数的最后一个参数是闭包，则可以使用尾随闭包语法。
- Swift 自动提供速记参数名称，如$0 和$1，但并非所有人都使用它们。
- 如果在闭包中使用外部值，它们将被捕获，以便闭包稍后可以引用它们。


闭包(Closures)是自包含的功能代码块，可以在代码中使用或者用来作为参数传值。

Closures - 闭包


## cli

`Next.js`提供了一个简单的命令行工具，可以帮助我们快速部署和管理应用。

```bash
npx next -h

#设置端口
npx next dev -p 4000 #开发模式
PORT=4000 npx next dev #开发模式

npx next start -p 4000 #生产模式
PORT=4000 next start #生产模式

next lint #检查代码规范

next build #构建静态资源
next export #导出静态资源
```

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

```bash
➜  demo npm run build

> demo@1.0.0 build
> next build

info  - Checking validity of types
warn  - No ESLint configuration detected. Run next lint to begin setup
info  - Creating an optimized production build
info  - Compiled successfully
info  - Collecting page data
info  - Generating static pages (3/3)
info  - Finalizing page optimization

Page                                       Size     First Load JS
┌ λ /                                      470 B          75.4 kB
├   /_app                                  0 B            74.9 kB
├ ○ /404                                   193 B          75.1 kB
├ λ /api                                   0 B            74.9 kB
└ ○ /posts/first                           2.75 kB        77.7 kB
    └ css/9871d7e98c5c71df.css             103 B
+ First Load JS shared by all              74.9 kB
  ├ chunks/framework-a87821de553db91d.js   45 kB
  ├ chunks/main-d8b1ff545a609496.js        28.6 kB
  ├ chunks/pages/_app-05a4472bc3e8727e.js  507 B
  ├ chunks/webpack-69bfa6990bb9e155.js     769 B
  └ css/5d2c4ba91281dd0f.css               175 B

λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
○  (Static)  automatically rendered as static HTML (uses no initial props)
```

## deployment

通过`next build`构建静态资源，然后通过`next export`导出静态资源。

- `.next/static/chunks/pages`–此文件夹中的每个 JavaScript 文件都与具有相同名称的路由相关联。例如，.next/static/chunks/pages/about.js 将是在应用程序中查看/about 路由时加载的 JavaScript 文件
- `.next/static/media`–从 next/image 静态导入的图像在这里散列和复制
- `.next/static/css`–应用程序中所有页面的全局 CSS 文件
- `.next/server/pages`–从服务器预呈现的 HTML 和 JavaScript 入口点`.nft.json` 文件在启用输出文件跟踪时创建，并包含依赖于给定页面的所有文件路径。
- `.next/server/chunks`– 在整个应用程序的多个地方使用的共享 JavaScript 块
- `.next/cache`–从 Next.js 服务器输出构建缓存和缓存的图像、响应和页面。使用缓存有助于减少构建时间并提高加载图像的性能

部署方式

- Vercel
- netlify
- github pages
- firebase
- self-hosted
- node.js server
- docker

## SSG vs SSR

[SSG vs SSR](https://blog.logrocket.com/ssg-vs-ssr-in-next-js/)


Next.js - CLI & Deployment


在上一篇文章[【First Extension】](/blog/translate/build-chrome-extensions/first-extension)学习了创建第一个插件。

这篇文章学习创建一个主题插件。

## 结构

```bash
mkdir theme-extension && cd theme-extension
```

更改`manifest.json`

```json
{
  "manifest_version": 3,
  "version": "2.6",
  "name": "daily dev tips theme",
  "theme": {
    "images": {
      "theme_frame": "images/frame-background.png",
      "theme_frame_overlay": "images/frame-background.png",
      "theme_tab_background": "images/tab-background.png",
      "theme_ntp_background": "images/ntp-background.png"
    },
    "colors": {
      "toolbar": [0, 185, 232],
      "tab_background_text": [255, 255, 255],
      "tab_text": [255, 255, 255],
      "bookmark_text": [255, 255, 255],
      "ntp_text": [218, 0, 96],
      "ntp_link": [218, 0, 96],
      "ntp_section": [255, 255, 255],
      "ntp_background": [255, 255, 255]
    },
    "tints": {
      "buttons": [1, 1, 1]
    },
    "properties": {
      "ntp_logo_alternate": 0,
      "ntp_background_alignment": "center"
    }
  }
}
```

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

上图解释了每个配置对应的效果

Images:

- `theme_frame`:无法为外部框架设置颜色，但是可以选择 1x1 像素的图像。
- `theme_frame_overlay`:左上角
- `theme_tab_background`:tab 每个标签的背景，包括标签栏的其他按钮背景
- `theme_ntp_background`:当前 tab 背景，建议用大图

Colors:

- `toolbar`:工具栏颜色
- `tab_background_text`:标签背景字体颜色
- `tab_text`:标签字体颜色
- `bookmark_text`:书签字体颜色
- `ntp_text`:新标签导航字体颜色
- `ntp_link`:新标签链接字体颜色
- `ntp_section`:新标签模块字体颜色？
- `ntp_background`:新标签背景颜色

Tints:

有六个值，分别是`background_tab`,`buttons`,`frame`,`frame_inactive`,`frame_incognito`,`frame_incognito_inactive`
他们的用法都一样，都是色调在色调饱和度（HSL）格式，使用范围 0 - 1.0：色调是绝对值，在 0 和 1 之间饱和是相对于当前的图像的。0.5 没有变化，0 完全不饱和，1 是完全饱和度。亮度也是相对的，0.5 没有变化，0 像素黑色，1 作为所有像素白色。

Properties:

- `ntp_logo_alternate`:新页面大图是否重复-`no-repeat`、`repeat_x`、`repeat_y`、`repeat`
- `ntp_background_alignment`:新页面大图的位置-`center`、`left`、`top`、`right`、`bottom`

## 测试扩展

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


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

Chrome插件开发 - 第一个主题


Dart是一种由Google开发的针对任何平台快速应用程序的客户端优化语言。它是Flutter开发中使用的主要语言。本文将介绍Dart的基础知识和面向对象的原则。

## 基本的Dart语法

Dart语法清晰简洁，对于初学者来说易于学习，对于有经验的程序员来说使用起来也很愉快。以下是一些基本概念：

- 变量：变量用于存储数据。在Dart中，您可以使用var关键字声明变量，后跟变量名和值。例如，var name = 'John';。
- 数据类型：Dart支持多种数据类型，包括int表示整数，double表示浮点数，String表示文本，bool表示布尔值。Dart可以自动推断数据类型，但您也可以显式指定类型。
- 运算符：Dart包含各种运算符，用于对数据执行操作。这些包括算术运算符（\+、\-、\*、\/）、比较运算符（\=\=、\!\=、\<、\>、\<\=、\>\=）和逻辑运算符（\&\&、\|\|、\!）。
- 控制流结构：Dart提供了多种控制流结构，用于管理程序的执行流程。这包括用于条件执行的if和else，用于重复执行的for和while循环，以及用于多选择执行的switch和case。
- 函数：函数是执行特定任务的代码块。在Dart中，您使用void关键字（如果函数不返回值）定义函数，后跟函数名、参数（放在括号中）和函数体（放在大括号中）。

## Dart中的面向对象原则

Dart是一种面向对象的语言，这意味着它使用对象（类的实例）来表示和操作数据。以下是Dart中的一些重要的面向对象原则：

- 类：类是创建对象的蓝图。它定义了对象可以具有的一组属性（变量）和方法（函数）。
- 对象：对象是类的实例。您可以使用new关键字后跟类名和括号来创建对象。
- 继承：继承是一种允许您基于现有类创建新类的机制。新类继承现有类的所有属性和方法，还可以添加新的属性和方法或覆盖现有的属性和方法。
- 多态：多态是一种允许使用单个名称执行不同类型操作的特性。在Dart中，通过使用接口和抽象类来实现多态。

通过理解这些基本原则，您将建立起编写Dart代码和构建Flutter应用程序的坚实基础。在下一个单元中，我们将深入探讨小部件（widgets）的概念，它们是Flutter应用程序的构建块。


Getting Familiar with Dart


## 原始值和引用值

> 了解如何将对象，数组和函数复制并传递给函数。要知道引用时复制了什么。理解原始值是通过复制值来进行复制和传递的。

## 作用域

> 了解全局作用域，函数作用域和块作级用域之间的区别。了解哪些变量在哪些地方可用。知道 JavaScript 引擎如何执行变量查找。

## 提升

> 理解变量和函数声明会被提升到可用作用域的顶部。 理解函数表达式不会被提升。

## 闭包

> 知道一个函数保留，并且可以访问创建它的作用域。知道这些可以让我们做什么，例如数据隐藏、内存化以及动态函数生成。

## this

> 知道 this 绑定的规则。知道它的工作机制，知道如何弄清楚在一个函数中它等同于什么，或者说指向什么？并知道为什么它是有用的。

## new

> 知道它如何与面向对象编程相关。知道用 new 调用的函数会发生什么。理解如何使用 new 来继承函数 prototype(原型) 属性生成的对象。

## apply、call、bind

> 知道这些函数的工作机制。 知道如何使用它们。了解它们对 this 做了什么。

## 原型和继承

> 了解 JavaScript 中的继承是通过 [[Prototype]] 链实现的。了解如何通过函数和对象来设置继承，以及 new 是如何帮助我们实现的。知道 **proto** 和 prototype 属性是什么，以及他们的作用。

## 异步和同步

> 理解事件循环，理解浏览器是如何处理用户输入、Web 请求和一般事件的。知道如何识别并正确实现异步代码。理解 JavaScript 中异步和单线程分别是怎样的。

## 高阶函数

> 理解这些函数是 JavaScript 中的一等公民，以及这意味着什么。 知道从另一个函数返回一个函数是完全合法的。 了解闭包和更高阶函数允许我们使用的技巧


JS概念扩展


在做 UI（页面重构）的时候，免不了和各种小图标打交道，这其中最多的应该是三角形以及箭头，一般情况下可以通过伪类使用 unicode 解决大部分问题。

现在我们来总结下几种使用 css 绘制三角形的方法，dom 结构如下：

```html
<div class="triangle"></div>
```

## 最简单最方便的办法 background

```
代码忽略
```

## unicode

```css
.triangle:after {
  display: block;
  content: '\25B2';
  color: '#fd5353';
  font-size: 20px;
}
```

> 注意，伪类必须加上 content 属性，否则不生效

[unicode 图表](http://www.w3cplus.com/solution/css3content/images/html.png)

## border

```css
.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
}
```

使用 border 绘制三角形是什么原理？事实上，宽度相等的 border 是以 45 度对接的，如下图：

![image](https://i.stack.imgur.com/hZefy.png)

那么没有了上 border 就是如下图：

![image](https://i.stack.imgur.com/uV9Q5.png)

再设置 div 的宽度为 0，就是如下图：

![image](https://i.stack.imgur.com/K1A7G.png)

再设置 div 的高度为 0，如下图：

![image](https://i.stack.imgur.com/NsmsW.png)

最后设置左右 border 的颜色为透明，如下图：

![image](https://i.stack.imgur.com/B42zY.png)

再来个动图：

![image](https://i.stack.imgur.com/vYvqa.gif)

通过这种原理，我们可以做更多的图形，比如五角星、六角星等，更多图形请移步[shapesofcss](https://css-tricks.com/examples/ShapesOfcss/)

## 使用 css3 transform rotate

![image](https://i.stack.imgur.com/mEaS1.jpg)

```css
.triangle {
  width: 30%;
  padding-bottom: 21.27%; /* = width / 1.41 */
  position: relative;

  //划重点
  overflow: hidden;
}

.triangle: before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #0079c6;

  //划重点
  transform-origin: 0 100%;
  transform: rotate(45deg);
}
```

> 为什么是 1.41，因为正方形的对角线长度是约等于 1.414。

## 使用 clip-path

```css
.triangle {
  width: 200px;
  height: 200px;
  background: #fd5353;
  clip-path: polygon(50% 0, 0 100%, 100% 100%);
}
```

clip-path 不支持安卓 4.4 以下，其余均需使用浏览器前缀-webkit，[caniuse](http://caniuse.com/#feat=css-clip-path)

详细请移步 [clip-path](https://developer.mozilla.org/zh-CN/docs/Web/css/clip-path)


在做UI（页面重构）的时候，免不了和各种小图标打交道，这其中最多的应该是三角形以及箭头