观察浏览器的任务管理器可以发现，打开浏览器的一个页面需要多个进程，包括浏览器进程、GPU 进程、网络进程、渲染进程等，有插件的话还会包括各种插件进程（Chrome 选项 -> 更多工具 -> 任务管理器）。

背景centos系统升级openSSH后，服务器上无法再拉取代码，报错如下：原因服务器重新安装SSH后公钥改变，需要重新安装ssh-keygen -t rsa -C "邮箱地址"生成公钥，删除gitlab原有公钥，但是git pull依然报错如下：依然提示公钥有问题，没有pull权限解决方案1、删除.ssh/known_hosts里面的内容2、如果重新生成公钥还是没法pu...

TS使开发人员能够掌握各种组件的交互方式，并使代码重构变得更加容易；但对于需要准确定义的类型，在使用时会比较麻烦。特别是涉及数个及数十个后端接口数据的类型定义，会有大量的转换和的时间成本。通过VSCode插件实现一键生成TS声明，可以节省编程过程的开发成本。

M1执行nvm install安装node报错404 {代码...} 经过分析发现命令安装node版本时，M1电脑自动拼接路径如下：[链接]arm64是M1特有的软件命令方式 目前node官网不提供此类的压缩包 压缩包官网 解决方案执行install命令前先执行M1兼容命令：arch -x86_64 zsh然后再执行install会自动修复下载版本的链接：[链接] {代码...}

副作用问题：诸如数据获取、订阅、定时执行任务、手动修改ReactDOM这些行为都可以称为副作用；而Hooks的出现可以使用useEffect来处理这些副作用

Charles 是一个 HTTP 和 SOCKS 代理服务器。代理请求和响应使 Charles 能够在请求从客户端传递到服务器时检查和更改请求，以及从服务器传递到客户端时的响应。

业务线长期的积累产生了许许多多重复性的工具方法，业务功能模块等， 我们正好可以用 rollup 构建一个 npm 私服工具包，便于后期业务使用，减少重复性的代码编写。

TouchableHighlight、TouchableNativeFeedback、 TouchableOpacity 、 TouchableWithoutFeedback

命令安装 {代码...} 路由配置包引用 {代码...} 路由列表 {代码...} 属性参数详解Stack.Navigator导航全局配置，再次配置的参数在所有路由页面的导航上面全部生效，具体属性如下 {代码...} 以上基础配置基本上能满足绝大多数业务的日常开发了Stack.Screen页面导航配置，此处的配置会覆盖全局配置，具体属性参数如下： {代...

还有一种情况brew install watchman是clone Homebrew那个可以打开GitHub的[链接]手动进入目录clone相关依赖包

1、撤销本次pullgit reflogreset到某个版本git reset --hard 91ae6ad2、撤销本次merge如果merge了其他分支代码造成了大量的冲突 想撤销本次merge如果操作1、使用上面的reset命令撤销到上一个提交版本2、执行以下命令直接撤销了本地合并git merge --abort3、git log高阶用法查看每次提交的文件修改列表，和分支变化的图形...

我们在布局中使用ScreenUtil().screenWidth获取屏幕宽度是，在初始化未装载视图时，第一次获取时拿不到，会出现如上的崩溃。

在业务开发中我们经常会有滚动吸顶的效果，目前Flutter也有很多种实现方式，这里介绍一下本人在开发中使用到的基于NestedScrollView实现的滚动吸顶组件；以及中间涉及的各种定位的布局操作；

阴影样式中flutter和css对应关系如下图的阴影 UI给出的css样式 {代码...} flutter样式布局 {代码...} 对应关系属性css（box-shadow）flutter（boxShadow）offset前两个值offset: Offset(0, 0.5)blurRadius第三个值blurRadius: 5,spreadRadius第四个值spreadRadius: 0colorrgba(0, 0, 0, 0.08)color: Color.fromRGBO(0, 0...

组件在业务开发中经常会使用到timeline时间轴，来记录数据操作记录等，在这本人封装了一个相对较通用的时间轴组件。示例参数参数类型必填说明timelineListList是时间轴数据lineColorColor是时间轴轴线颜色heightdouble否时间轴右侧容器高度（默认80）titleStyleTextStyle否时间轴标题样式（已定义初始值 如无特殊样式无...

鉴于读者对React有一定的认识，且本书所有案例均使用React Hooks编写，以及在React Router源码中使用了Context等React特性，因此本章仅对React的Context、Hooks等部分特性进行介绍。对于其他React相关特性，读者可查阅相关资料进行学习。

Middleware（中间件）本意是指位于服务器的操作系统之上，管理计算资源和网络通信的一种通用独立的系统软件服务程序。分布式应用软件借助这种软件在不同的技术之间共享资源。而在大前端领域，Middleware 的含义则简单得多，一般指提供通用独立功能的数据处理函数。典型的 Middleware 包括日志记录、数据叠加和错误处理等...

以下文章来源于iCSS前端趣闻 ，作者SbCocoiCSS前端趣闻 不止于 CSS本文略长，耐下心好好读读，应该会有所收获~其实标题应该叫，Web 用户体验设计提升指南。一个 Web 页面，一个 APP，想让别人用的爽，也就是所谓的良好的用户体验，我觉得他可能包括但不限于：急速的打开速度眼前一亮的 UI 设计酷炫的动画效果丰富的个性...

性能优化是把双刃剑，有好的一面也有坏的一面。好的一面就是能提升网站性能，坏的一面就是配置麻烦，或者要遵守的规则太多。并且某些性能优化规则并不适用所有场景，需要谨慎使用，请读者带着批判性的眼光来阅读本文。

本篇文章主要从react-hooks起源，原理，源码角度，开始剖析react-hooks运行机制和内部原理，相信这篇文章过后，对于面试的时候那些hooks问题，也就迎刃而解了。实际react-hooks也并没有那么难以理解，听起来很cool，实际就是函数组件解决没有state，生命周期，逻辑不能复用的一种技术方案。

Babel 是一个强大的 js 编译器。有了 Babel， 我们可以放肆的使用 js 的新特性，而不用考虑浏览器兼容性问题。不仅如此，基于 babel 体系，我们可以通过插件的方法修改一些语法，优化一些语法，甚至创建新的语法。

Plugin 是一个扩展器，它丰富了 webpack 本身，针对是 loader 结束后，webpack 打包的整个过程，它并不直接操作文件，而是基于事件机制工作，会监听 webpack 打包过程中的某些节点，执行广泛的任务。

说到webpack，可能很多小伙伴会觉得既熟悉又陌生，熟悉是因为几乎在每一个项目中我们都会用上它，又因为webpack复杂的配置和五花八门的功能感到陌生。尤其当我们使用诸如umi.js之类的应用框架还帮我们把webpack配置再封装一层的时候，webpack的本质似乎离我们更加遥远和深不可测了。

前言在平时前端开发时，前端代码在浏览器上能很方便的断点调试，那么如果要调试node后端接口的话，该如何实现断点调试呢？配置vscode打开node项目点击左侧调试按钮点击Run and Debug选择语言为nodejs点击设置按钮添加配置更改lanuch.json配置文件添加自己的项目启动脚本文件和配置 {代码...} 再次点击断点调试按钮启动断...

简介MongoDB 中聚合(aggregate)主要用于处理数据(诸如统计平均值，求和等)，并返回计算后的数据结果。有点类似 SQL 语句中的 count(*)。常用操作表达式描述$match用于过滤数据，只输出符合条件的文档。$match使用MongoDB的标准查询操作。$project修改输入文档的结构。可以用来重命名、增加或删除域，也可以用于创建计算...

背景目前Mac自带的终端不是很好用，好多常规的Linux命令都不支持 比如：ll命令；那么我们可以安装第三方的终端安装国内地址： {代码...} 使用效果如下： 后续如果安装其他的命令需要更改zsh环境变量的话 输入如下命令：vim ~/.zshrc更改终端背景打开终端偏好设置打开描述文件选中文本点击图像-》点击选取选取本地图片如...

$group 按某些指定的表达式对文档进行分组，然后将每个不同的分组的文档输出到下一阶段。输出文档包含一个_id字段，其中包含按关键字区分的组这里以文档名称docName为关键字进行分组统计

or为 $or 条件指定参数； {代码...} 数据筛选or是或查询满足下面的条件其中之一就可以查询出相关数据如果数据库参数是数组，直接会从数组里面匹配是否包含相关数据 如上：memberand为 $and 条件指定参数； {代码...} 直译：docKey == "public" && owner == "zhangsan"需要满足枚举的两个条件才能筛选出相应数据...

打开Chrome浏览器新开一个窗口地址栏输入 chrome://flags/ 搜索qr code 下拉框选择Enable选项 重启浏览器即可 点击需要生成二维码的网页地址栏 出现如下图标 点击小图标即可吧当前网址生成二维码

注册码 {代码...} 操作打开Charles找到help选项-》点击register Charles选项弹出如下输入框输入对应的name和key点击注册即可重启查看已完成注册