本地搭建ChatGPT
1.下载并安装Docker 【官网下载】
2.使用开源项目：潘多拉 (Pandora)
3.一键安装命令(注意以下步骤如果安装不成功，有可能需要科学上网)：先执行
1docker pull pengzhile/pandora
然后再执行
1docker run -e PANDORA_CLOUD=cloud -e PANDORA_SERVER=0.0.0.0:8899 -p 8899:8899 -d pengzhile/pandora
4.登录自己的chatgpt，然后获取自己的 Access TOKEN：http://chat.openai.com/api/auth/session有了Access TOKEN，则可以半个月之内免登录。
5.访问本地链接：http://127.0.0.1:8899 即可搞定！
js中一个好玩的api之queueMicrotask
介绍今天闲来无聊，偶然看到个api – queueMicrotask，其MDN地址为queueMicrotask，觉得挺有意思的，于是想写一篇文章来跟大家分享一下。
用法首先，这个api看字面意思就知道和微任务有关，至于js中的宏任务和微任务，我就不多说了，默认大家都知道这些东西，不了解的读者可以去查阅相关的资料。
1queueMicrotask(function() {/* ... */})
可以看到，此api需要传入一个回调函数作为参数，然后以微任务的形式执行此回调函数，换言之，就是把此回调函数放入此次js事件循环的微任务队列中。
我们不妨来看几个例子：例子1：
12345678910console.log(111)setTimeout(() => { console.log(222)})queueMicrotask(() => { console.log(333)})console.log(444)
那么，此例子中的代码执行结果是什么呢？
1234111444333222
你猜对了吗？
兼容性详情见que ...
css画正方体
怎样利用css画一个正方体呢？话不多说，直接上代码：首先是html结构：
12345678910<div class="app"> <div class="box"> <div class="inner top">1</div> <div class="inner bottom">2</div> <div class="inner left">3</div> <div class="inner right">4</div> <div class="inner front">5</div> <div class="inner back">6</div> </div></div>
然后是样式：
12345 ...
typescript学习日记《三》常用的内置工具类型
RecordRecord<keyType, valueType>Record的内部定义，接收两个泛型参数；Record后面的泛型就是对象键和值的类型。定义一个对象的 key 和 value 类型该怎么做呢？这时候就需要用到 TS 的 Record 了。源码：
1234type Record<K extends string | number | symbol, T> = { [P in K]: T;}
1234567891011interface PageInfo { title: string;}type Page = "home" | "about" | "contact";const nav: Record<Page, PageInfo> = { about: { title: "about" }, contact: { title: "contact" ...
TypeScript学习日记《二》类型兼容性（协变、逆变、双变和抗变）
类型父子关系的判断像 java 里面的类型都是通过 extends 继承的，如果 A extends B，那 A 就是 B 的子类型。这种叫做名义类型系统（nominal type）。
而 ts 里不看这个，只要结构上是一致的，那么就可以确定父子关系，这种叫做结构类型系统（structual type）。
TypeScript结构化类型系统的基本规则是，如果x要兼容y，那么y至少具有与x相同的属性。ts 类型兼容：当一个类型 Y 的值可以赋值给另一个类型 X 的值时， 我们就可以说类型 X 兼容类型 Y。也就是说两者在结构上是一致的，而不一定非得通过 extends 的方式继承而来；接口的兼容性：x = y 只要目标类型 X 的值x中声明的属性变量在源类型 Y 的值y中都存在就是兼容的（ Y 中的类型可以比 X 中的多，但是不能少）；函数的兼容性：x = y Y 的每个参数必须能在 X 里找到对应类型的参数，参数的名字相同与否无所谓，只看它们的类型（参数可以少但是不能多。与接口的兼容性有区别）。
支持子类对象赋值给父类对象的情况称之为协变；反之，支持父类对象赋值给子类对象的情况称之为 ...
typescript学习日记《一》特殊符号的含义
?. 可选链 遇到 null 和 undefined 可以立即停止表达式的运行;
?? 空值合并运算符 当左侧操作数为 null 或 undefined 时，其返回右侧的操作数，否则返回左侧的操作数;
! 非空断言运算符 x! 将从 x 值域中排除 null 和 undefined;
!. 在变量名后添加，可以断言排除undefined和null类型;
_ 数字分割符 分隔符不会改变数值字面量的值，使人更容易读懂数字 1_101_324 = 1101324;
** 求幂,比如3**2 = 9;
http判断缓存是否有效，为什么有了last-modified还需要etag呢？
If-Modified-Since：作用： 把浏览器端缓存页面的最后修改时间发送到服务器去，服务器会把这个时间与服务器上实际文件的最后修改时间进行对比。如果时间一致，那么返回304，客户端就直接使用本地缓存文件。如果时间不一致，就会返回200和新的文件内容。客户端接到之后，会丢弃旧文件，把新文件缓存起来，并显示在浏览器中.
ETag：是实体标签（Entity Tag）的缩写， 根据实体内容生成的一段hash字符串（类似于MD5或者SHA1之后的结果），可以标识资源的状态。 当资源发送改变时，ETag也随之发生变化。
ETag是Web服务端产生的，然后发给浏览器客户端。浏览器客户端是不用关心Etag是如何产生的。
问题是，我们知道last-modified可以用来判断浏览器的本地缓存是否有效，那为什么还要使用ETag呢？ 主要是为了解决Last-Modified 无法解决的一些问题：
某些服务器不能精确得到文件的最后修改时间， 这样就无法通过最后修改时间来判断文件是否更新了。
某些文件的修改非常频繁，在秒以下的时间内进行修改. Last-Modified只能精确到秒。
一些文件的 ...
postcss简介
前言css预处理器在目前的开发中是很受欢迎的，但是它们也有一些缺点。在今天的介绍中，我们将探讨postcss的优势以及它是如何工作的，还有其一些丰富而且实用的插件。
css预处理器的价值和局限性大多数CSS开发人员都非常熟悉css预处理器，像sass、less、stylus等，以及伴随着这些预处理器出现的一些概念，比如file partials, nesting, variables 和 mixins等。随着css的发展，预处理器的一些功能正在渐渐的被原生css所实现，但是还有大量非常实用的功能对于开发者开发大型项目以及维护保持代码的一致性方面是及其有用的。
你可能很难想象没有 CSS 预处理器的生活，但它也有缺点：
预处理器不可扩展或受限。大多数预处理器都是一个黑匣子，它为您提供一组特定的受支持功能。可以编写自定义功能，但超出该工具范围的功能仍然是不可能的——例如将 SVG 内联为背景图像。同样，您不能阻止开发人员使用您宁愿避免使用的选项，例如@extend深度嵌套。Linting 可以提供帮助，但它不会阻止预处理器编译有效文件。
预处理器提供自己的语法。预处理器代码可能类似于 C ...
react+typescript正确的开发姿势之正确使用hooks之useReducer
在react + typescript项目中正确使用useReducer我们在Home页面增加一个组件Counter，用来保存一个数值count，来记录点击按钮的次数，如下：
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354// Counter.tsximport React, { useReducer } from 'react'type StateType = { count: number;}type ActionType = { type: string; payload: number;}const initialState = {count: 0}function countReducer(state: StateType, action: ActionType) { switch (actio ...
react+typescript正确的开发姿势之正确使用hooks之useState
写在前面要想在react + typescript 项目中正确的使用 hooks ，请务必掌握泛型的使用，关于泛型的讲解，我在上一篇博文中详细的进行了介绍，如果你还不了解 typescript 中的泛型请看上一篇：正确认识typescript中的泛型。
如何结合typescript正确使用hooks在react中使用函数式组件，难免会使用到hooks，hooks赋予了函数式组件可以像 class 组件那样拥有状态的能力，那么如何结合typescript正确的使用hooks呢？
在react + typescript项目中正确使用useState如果想编写一个 Header 组件，使其具备一个登录和退出的功能，登录的时候，显示一些提示已经登录的文字，退出的时候显示欢迎的文字，那么我们很容易知道：如果使用函数式组件来编写此 Header 组件，那么就一定会用到 useState ，因为登录与否的状态是该组件自身的状态，所以就会用到hooks中的 useState 来赋予函数式组件状态。如下：
12345678910111213141516171819202122// Header.tsxi ...