四轴无人机研究：第一回
无人机在现今社会的各个角落，都扮演着极其重要的作用。那么对于我们普通人而言，其最大的价值角色，就是航拍。鄙人的第一台机器，就是大疆的mini一代。带着他去了无数的地方，给我留下了很多珍贵的镜头。但是很不幸，两年的时间，已经飞不起来了。本着充分利用资源的原则，我想借其尸骨，来稍微深入的研究一下四旋翼无人机的飞行原理，然后尝试能否，借尸还魂。
四旋翼无人机（Unmanned Aerial Vehicle, UAV）的大体构成
飞控系统（大脑）。 一块芯片。一般包括GPS记录经纬度的,气压计记录气压的、IMU惯性测量单元，计算三维空间中飞机姿态的各个参数的，指南针等。。。。
遥控系统。 就是手柄遥控器。遥控器发出信号，飞控的信号接收模块接收信号后，执行相应的指令。
动力系统。 多部分组成，一般包括：电调（电子调速器，将电池提供的直流电转换为能够驱动电机的三相交流电）， 电机（驱动浆叶），桨叶（提供升力），电池。
图传。 一小块芯片。搜集飞控返回的图像和其他飞行参数的各项信息。
机体框架。 一般机翼、机身，是无人机的主体部分，用来承载其他所有组件。
电调： 控制电机转速基本流程： 操控手 ...
Webkit系列：开篇谈谈
本系列的目标：尝试深入理解当前浏览器（谷歌）的大体逻辑。内容严重参考《Webkit 技术内幕》
现代浏览器的渲染逻辑，就是下图的流程。
一个经典的面试题：从输入url到最终页面的呈现，这其中都经历了些啥？坦白讲这个问题非常大，因为涉及到的点巨多。但是这问题既有深度也有价值，可以根据你的描述，看出你对现代浏览器执行机制的整体把握和理解，所以成了面试高频题。
总体可分为网页加载过程（DOMContent事件）和渲染过程（onload事件）。具体步骤如下
浏览器根据输入的内容做识别，如果输入的是网址，调用 DNS 解析目标 IP，建立连接。如果是关键词，调用搜索引擎去搜索。
依赖网络模块，三次握手建立连接后获取到各种资源，包括 js、html、css 等等。
html 文件被交给 HTML 解释器转变成一系列词语，然后构建节点生成 DOM 树（树形结构的对象document），css 文件被交给 css 解释器生成样式树,也就是stylesheet。在这过程中，碰到 js 代码，中断 dom 树的构建，权限会给到jscore引擎解释处理，谷歌浏览器中的就是大名鼎鼎的 v8。此处涉及到进程切 ...
Webpack系列：第四回
以前面的先验内容为铺垫，本文将会仔细的介绍webpack的基本打包思路，最终目标，手撕一个自己的webpack。
前期准备首先再次重申一个重点：webpack的根本目的,是为了将我们写的代码转换成浏览器能够执行的代码,并且将分散的各个模块，揉成一个统一的文件。然后直接在index.js中引入即可那么我们的mywebpack.js的目标就是一个，从入口文件读取各个模块，生成转换后的代码，写到bundle.js文件，成功与否检验的标准就一个，index.html引入该bundle.js，看看浏览器能否正确显示。
实际讲解之前，准备好一些相关的文件。index.html、index.js、helloGirl.js和hello.js、template模板文件，当然还有我们最为重要的mywebpack.js。
// 1. 其中index.js入口文件，四段极为工整的代码块。：
import helloGirl from "./helloGirl.js";
const helloWorldStr = helloGirl();
function component() {
const ...
Webpack系列：第三回
本文可以看成是我们开始diyWebapck前的开胃内容，介绍一些必备的知识点，为之后做铺垫。babel相关api的功能。
@babel/parser：能够将通过readfile读取的文件内容，转化为ast数据。使用方式: const parser = require(“@babel/parser”);
借助https://astexplorer.net/, 查看结果。示例代码中的四段代码分别对应body中的四种类型。
重点关注body字段。由图中能清楚的看到，左侧完整的四段代码块，解析出来的ast数据，对应着body中的四个不同类型节点。
@babel/traverse：遍历ast中所有节点，根据需求，重写节点内容
@babel/types: 构建新的babel的ast类型数据
@babel/generator：与parser为互逆操作，ast–> 字符串数据
ejs： 模板生成。
从总体的逻辑，大概介绍下webpack最终的产物bundle.js生成的逻辑generateCode入参就是我们已经处理好的ast， ...
Webpack系列：第二回(前端模块化迭代史)
前端模块化的演进历程模块化是webpack的基石，本文就尝试着缕一缕。
阶段一：文件划分最原始的方法就是文件划分。其具体操作就是第一回中我们举的a、b、c三个js文件的例子。
// 文件内部结构：
var x = 100
function A() {
...
}
function B() {
...
}
然后通过script标签引入：
<script src="./moduaA.js"></script>
<script src="./moduaB.js"></script>
<script src="./moduaC.js"></script>
该方法的弊端显而易见，所有模块共用全局作用域，变量全局污染，命名冲突在所难免。，且模块之间的依赖关系难以控制。
阶段二：命名空间同样还是三个文件，只是文件内部的所有内容，都是用一个对象包裹，对外使用时则通过这个对象。
var modulA = {
x = 100,
methodA: function A() { ...
Webpack系列：第一回
本文开始， 我们尝试深入理解一下前端神器webpack。最终的目标：能够理解前端模块化，理解webpack打包的核心思路及执行，理解webpack中的“关键人物”。解锁这三点，最终彻底掌握。
Webpack干啥的打包用的，简单说就是将项目的各种零散的文件揉成一个完整的js。比如我们的项目一共用到了a.js,b.js,c.js共三个文件，打包后就成了一个bundle.js。那问题来了，为什么要打包？我就喜欢零散的，咋了？
客观存在的需求
其一： 零散文件使用，各个文件之间的依赖关系顺序，需要人为的梳理。比如在a文件里用到了b文件的某个属性，那么，b文件就应该先于a文件加载，否则error。可想而知此等操作，项目的复杂度一上来，开发人员直接崩溃。
其二： 零散文件意味着，请求的数目随文件个数线性放大。那么遵循不发请求或者少发请求的终极性能准则，此方法依旧鸡肋。
因此，我们的神器webpack应运而生。当然啦，除了他还有很多其他的如gulp、parcel等的工具，非独此一款。
webpack具体的能力
合并文件。在项目中，我们可能会到处import各种依赖，这些依赖又分布在各个文件中。we ...
Pantheon-Upload Intelligence
Recently, with some free time on my hands, I binged an AMC drama called Pantheon. Maybe dealing with mundane chores for too long made me lose interest in gazing at the stars, but this show instantly pulled me back in. It also introduced me to a new concept: UI (Upload Intelligence).
The idea of Upload Intelligence is to completely digitize the data of a physical human brain, converting it into a “cloud” existence that can be copied and pasted—essentially the fundamental step toward human immorta ...
Preparing the Preliminary Actions
The new-era software laborer is the official term for people working in software development (hehe), and today the group roughly splits into frontend and backend. Their roles are well-defined, and occasionally there are full-stack masters who can handle every tricky issue without batting an eye (but are exhausted to the bone).
Putting aside the backend Java ecosystem, a single frontend role already offers endless topics to study. The three frameworks—Angular, Vue, React—do you master all of them ...