X.d 笔记

前端项目打包发布后，时间一久，项目上出了问题，就很难知道当时的打包状态，甚至什么时候发的版本都忘了。

介绍一个本人开发的插件，每次打包时，记录打包时依赖库的版本号信息，和打包时间，可以给事后定位问题多带来一点点信息。

例如：

/**  build at 2022-05-17 14:57:45 ,  version info : {"react":"16.8.0","lodash":"4.17.21"} */
// ... 你的代码

插件 Github 地址 : https://github.com/ada87/vendor-version

安装

npm install --save-dev verdor-version

WebPack 是我一直不是很喜欢但又不得不用的一个工具。主要原因：

1. 配置很奇怪 : 尤其是前几年升到5后，还要引一些 plugin 去 licence，经常看到一些几百行的 webpack.config。
2. 性能也很慢 : 虽然有一些非主流的工具比它快一点，但基实提升并不明显，没有成为主流之前，风险大于收益。
3. 生态太完善 : 这个应该是优点才对，但对于一个工具，不干本质工作，什么都想搞，导致团队里面很多人过度滥用，引一大堆的 loader,plugin,进一步放慢打包速度，且严重降低代码可读性。

最近发现了一个新的工具：esbuild ，主要特性一个字 快 ！

EsBuild : https://esbuild.github.io/

当然，眼见为虚，Run了才为实

业余时间写了个玩具项目，发现可以 ServerLess 部署基本不费钱，于是研究了下。

因为心得体会有点多，准备写几篇文章记录一下，今天比无聊，写点发布网络服务的历史。

虽然互联网没发明几十年，但要想做一个应用，向人们提供网络服务，其实已经经历了几个时代：

上古时代

我还年轻，没经历过那个时代 ^—^！

书上说那时候一个服务器都一栋房子那么大，可以想象价格是很贵的。

除了成本高，还需要非常专业的技术人员，一般的企业很难提供网络服务。

最近开始在项目中完成了一轮 React Hooks 升级，记录一下 React Hooks 的基础使用。

什么是 React Hooks

在写 React 组件时，有两种方法：

一种是常用的 class 写法形式，例如：

class XXX extends React.Component {

    render(){
        return xxx
    }

}

出于好奇，昨天搜 Web 3.0 了解一下，由于没有太权威的材料，大都是商业、投资之类的，整理的时候也感觉很懵，到底 Web3.0 为什么会是下一代互联网，以下是我个人的思考。

内容形式的变化

我觉得，不同的几代网络表现上来看，还有一个很明确的特征区别，就是 内容形态

Web 1.0 = 内容不够
Web 2.0 = 内容太多

在 1.0 时，上网的人都是探索者，网络上病毒泛滥、内容稀少、网速慢，很多内容都需要找到专业圈，甚至需要订像《电脑报》这样的杂志才能解决，网络公司提供的产品功能都不一定齐全，要上网要先会电脑，门槛太高了。

而在 2.0 时候，网络环境好了很多，网络环境变的规范，网络公司提供的产品不仅功能全，用户体验度也在蛮好，使用门槛也直线下降，后面智能手机这样产品几乎是消除了上网的门槛，所以 Web2.0 指的就是人人都上网的这个时代。

由于身体抱恙，好久没更新了，近两年住了三次院，真是老了就行不了，写博客的事还是要捡回来。

最近 Web 3.0 这个词比较热，看名字也是和技术人员的生计想关，于是整理下看下是什么情况。

不同的图形表达，体现的差异会不同，应该使用什么图形？目前最流行的 Extreme Presentation 介绍的选图步骤。下载英文原版PDF 。

根据PDF的内容，我重新制作了一个更方便的 我的在线中文脑图版 | 下载中文脑图版XMind :

视觉变量

据科学研究， 人类获取外界信息主要依赖于视觉，占总信息量的 83%, 听、嗅、味、触觉占17%。
人与外界交换信息大部分都是靠视觉，优秀的可视化更可以加快信息交换的效率，今天说说视觉变量。

上篇：《关于可视化的一些理论基础》说到，数据可视化的奠基人之一 Bertin，在他 1967 年发表的《符号图形学》中，给视觉定义了七个基本的视觉变量。
人眼在这些通道，有着很强的识别能力，这些视觉通变量成为可视化的一项理论基础。