前端依赖包的种种往事
本文简单聊聊前端依赖管理器npm的大致逻辑npm基本上是目下的前端项目管理依赖的默认工具。一般项目工程中所涉及到的所有依赖包，均会记录在package.json文件中。去到公司，初次down下来的项目，需要我们通过命令npm install来安装所有依赖。那么承担依赖管理器的npm，具体是如何管理的呢？同时他跟其他的比如cnpm、yarn有什么区别呢？
一. 版本规则一般在package.json文件中，依赖的信息格式如下:
"dependencies": {
"antd": "3.1.2",
"react": "~16.0.1",
"redux": "^3.7.2",
"lodash": "*"
}
版本格式为：主版本号.次版本号.修订号版本号的递增规则如下：
主版本号：当你做了不兼容的 API 修改。大改，更新需谨慎。
次版本号：当你做了向下兼容的功能性新增。加功能的小改, 如antd新增了某些组件
修订号：当你做了向下兼容的问题修正。修复问题的版本
除了指定明确的版本号，也可以指定一个范围。
~：只升级修订号
^：升级 ...
屏幕刷新率的种种
本文简单聊聊显示器成像相关的点组内技术分享canvas的内容时，涉及到了屏幕刷新率的问题，感觉讲的还不是很全面，借此篇文章，好好总结一下。
古人云：耳听为虚，眼见为实。但这一套，显然已经不适用于当代, 因为眼见不一定为实。作为新时代的农民工，每天基本是对着两块显示屏度过的。在我们人眼看来，显示屏的画面就是静止的，但事实，并非如此。我们以为静止的显示器，实际上正以每秒至少60次的频率不断刷新着页面。学过图像的都知道，每秒24张图片的频率展示画面的时候，在人眼看来，就是连续着的动画。
每秒24张图片就是24HZ，当下的主流浏览器的屏幕刷新率都是60或者75hz。即：每秒钟切换了60次或者75次。基本就是16.6ms一帧的速度。在最近发布的iphone13系列的手机中，pro和promax版本最高能达到120hz的屏刷。自己稍微查了一下，公司的27英寸的三星显示器是主流的60hz，一般般。家里的34英寸的带鱼屏，屏刷高了一个档次，100hz。自己手头的那台macbook2019款，屏刷60hz。而自己一直心心念念的外星人显示器，没看错的话，全系列240起步。依稀记得之前某位大佬晒出的外星人显 ...
CSS系列：BFC
本文简单聊聊BFC(块级格式化上下文)1. 啥叫块级格式化上下文？具体指代的就是一个容器（如div等），这种容器具备的特性：
内部元素的任何样式改动，都不会影响到容器外的元素。
内部的浮动元素的高度也会计算在内
margin重叠
2. 触发场景
html根元素。毕竟他外头啥都没有。
浮动元素
overflow不为visible
position为absolute或者fixed
3. 应用场景
防止margin重叠。同一个BFC的元素标签内会出现margin重叠。因此BFC隔离开即可解决。
高度包含浮动元素。
不与浮动元素重叠
前端权限控制
管理系统之类的前端项目，权限控制几乎是标配，本文将以vue为例，稍微整理一下套路
路由权限： 用户登录后只能看到自己有权访问的菜单，也只能访问自己有权访问的路由地址，否则4xx初次加载只挂载无需权限的路由， 登陆后再挂载剩余的路由。
视图权限: 用户只能看到自己有权浏览的内容和有权操作的控件菜单与路由分开，由后端返回
接口权限: 路有可能配置失误，按钮可能忘加了权限，此时请求控制用来兜底，越权行为将在前端被拦截。一般使用JWT的方式验证，后端不通过直接401跳转登录。通过会返回token。前端拿到token后存储。之后的每一个请求都带上这个token即可。
React系列: 第一回(基础干货)
自本文开始，我们将逐步介绍react相关的所有内容。
是啥一个标准的数据驱动视图的前端开发框架。整体逻辑如下：
带来了啥？
声明式编码 + 虚拟dom + diff算法，一种编程范式，关注的是你要做什么，而不是如何做。主要区别之前jquery时代的开发模式，专注功能逻辑的开发，而无需关注dom实现。
组件化开发。基本标准：可组合、可维护、可复用
react-native中，使用js开发移动端应用
jsx语法JavaScript 中夹杂着 HTML 的语句在其中,称之为jsx语法，它是对 JavaScript 语法的扩展，jsx代码经过babel编译后，会生成React.createElement的调用，本质是React.createElement的语法糖。为了生成虚拟dom，两种写法：
// jsx
const element = <h1 className="title">Hello, React</h1>;
+ babel转换后，等同于下方 ↓
// React.createElement
const element = React.createElement( ...
HTTP版本演进：第四回
本文介绍HTTP3http1.x及http2都是基于tcp协议实现的应用层协议。同1.x比较，http2几乎解决了所有1.x的鸡肋点，除了必须的tcp三次握手。
HTTP/3的目标,是通过解决HTTP/2的传输相关问题，在所有形式的设备上提供快速、可靠和安全的Web连接。为此，它使用了一种不同的传输层网络协议，称为QUIC，该协议最初由Google开发的。
QUIC实际上就是在UDP基础上重写了TCP的功能，但是又比TCP更加智能，更高效的实现了TCP的核心功能。
Paperjs：坐标系相关
本文将详细介绍paperjs坐标相关的点在paperjs的坐标体系中，默认方向为右正下正，没记错的话，应该是同opencv一致。我们通常见到的右正上正的坐标系，是标准的笛卡尔坐标系。这是一点区别。那么如果现在我们要做一件事情，就是将paperjs的坐标系转换成标准笛卡尔坐标系，该如何实现呢？即使实现，对那些事件点击的操作有什么影响呢
首先我们老样子初始化那一套，然后把标准的缩放拖拽操作随意的加上，同时随意的加上图片、文本等：
图片、文本和矩形框位置信息如下：
showImg(new paper.Point(-200, -200), '@/assets/Sam.webp')
showText(new paper.Point(200, -200), '测试')
showRect(new paper.Point(-200, 200))
从坐标数据结合实际效果看出，这确实是标准的右正下正结构。
在上面的基础之上，我们借助matrix，将坐标系变更为标准的笛卡尔坐标系。关键代码:
this.project.view.matrix = new paper.Matrix().scale(1, -1 ...
前端数据库？sql.js
本文尽可能详细介绍sql.js。
sql.js为何方神圣？一个专门用于处理sqlite文件的前端数据处理库。它可以根据sqlite文件， 在内存中构造一个对象（虚拟数据库），然后我们可以使用类似sql语句的查询方式，输出我们想要的方式。示例代码如下：
import initSqlJs from 'sql.js'
export function openLocalSqliteDB(sqliteFileData, callback) {
const SQL = initSqlJs({
// TODO: replace with local file path
// locateFile: file => `https://sql.js.org/dist/${file}`
// should put `sql-wasm.wasm` to `public/dist/` folder
locateFile: file => `/dist/${file}`
}).then((SQL) ...
网络工程师：第一回
本系列文章开始，将会整理软考网络工程师的必备知识点，主要是为了拿下中级网工计算机分层结构物数网传会表应，各层各司其职，分工明确。详细如下所示：
一段信息从 A 机器到达 B 机器显示的过程，实质就是经历各层层层打标签，然后再层层去标签。当然上面分层结构主要是 OSI 的分层，在 tcpip 则分成了四层：物理层、网络层、传输层和应用层。核心概括：物理层传输比特流;数据链路层，提供节点到节点的传输， 将数据封装成数据帧；网络层主要是路由选择,将数据封装成数据包-package；传输层提供可靠或者不可靠的端到端的传输，将数据封装成数据报文，数据段；表示层，数据的压缩解压缩.
带宽相关计算
模拟信道： w = f2 - f1,单位 Hz.
数字信道无噪声：奈奎斯特定理 B = 2W（带宽），其中 B 为码元速率（单位时间内，传输的码元个数），单位为波特率。其中，B = 1 / T,T 为码元宽度（脉冲周期）。注意，若导线材质是确定，带宽就是确定的。无噪声情况下的极限速率：R(数据速率) = Blog2N = 2Wlog2N。其 ...