@allanzhuo 年前还有，年后回来突然有一天就发现没了，估计和开会有关系？

Gravatar 无法访问，我们有香港代理也不行

https://duan602728596.github.io/antd-schema-form/#/
antd-schema-form，基于 Ant Design，可以通过 JSON Schema 配置快速生成可交互的表单。可以支持相当复杂的嵌套数据

因为好多人对代码的要求太低了，没有好的编码习惯，加上一些“外行”来开发，代码的质量肯定高不了。

我个人是以开源项目的标准来要求自己，比如严格的 lint 、commit message 、测试、tag 、CHANGELOG 、文档、注释等等。这些只要稍微做一点，代码质量会提升一个台阶。

然后好多人上来就是 /* eslint-disable */或者直接关闭 lint，commit 直接随便写，都不知道提交了什么，代码没有注释，项目没有文档，每次有问题，还觉得你理所应当了解项目。这样维护起来相当痛苦。还有比如我碰到的，把一堆逻辑写到 redux 里面的、组件里面写纯业务逻辑然后 ref+回调的、组件瞎封装的。就这些坏习惯加起来，再 NB 的人也扛不住这种项目。

项目全部使用 hook，太香了，太爽了，太舒服了

因为缺少一个像 babel 那样的工具

已经不用了。ARV 三大框架，数据驱动，组件化开发，再也不用在业务逻辑里面写一堆选择器了，节省代码量，开发更轻松。
jquery 的一部分 api 都可以用原生的 javascript 来代替了。
兼容性也有 babel 来解决了。你要是觉得你的代码上能跑通 chrome87，下能兼容 ie7，无所谓了，随你开心。
webpack 编译、打包、压缩、上传 cdn，一个命令，一条龙服务。

前端上框架叫不好维护，后端上框架叫生态丰富。
前端加新的 api 叫瞎折腾，看不明白，后端加新的 api 叫 feature 。
老双标了

有真就有这个语法提案，不过需要 babel

https://github.com/ffmpegwasm/ffmpeg.wasm，ffmpeg 的 wasm 实现。可以满足基本的剪辑需求

没啥说法，推荐使用 useDispatch

除了`bin/webpack-dev-server`的错误（这个错误是 webpack-dev-server 的 v4 版本没有开发完，不支持 webpack-cli 的 v4 版本导致的），剩下的 webpack 不背锅。集成是 rails 该做好的，rails 没搞好，就把锅甩到前端、甩到 node 、甩到 webpack 这来了？
至于兼容性的，webpack 从 v3 到 v5 以后，配置项就没有多大的变化，照着 changelog 、迁移指南改一改就行。不想改的 package.json 锁版本也没人拦着啊。至于说改了一大堆 api 的，那是 loader 和 plugin 的开发者需要关心的事情。

找到了个正在维护的 ffmpeg.wasm 的项目，准备用来替换 gif 图裁剪和视频裁剪转 gif 的后台服务，直接在浏览器上处理

没错，就是定时爬

原来 b 站不是大项目啊

最近的项目完全使用 react-hook 开发，是真的舒服。
在 react-hook 里就不要想着声明周期那一套，原来生命周期那一堆反而写起来很乱。
拿 useEffect 和生命周期函数做对比，是为了让开发者能了解 useEffect，在 class 组件和 function 组件内如何实现相同的功能。

```javascript

// class
class ClassComponent extends React.Component {
constructor() {
super();

this.state = {
data: this.props.data,
list: []
};
}

componentDidUpdate(prevProps, prevState) {
if (this.props.data !== prevProps.data) {
// do something
}

if (this.state.list !== prevState.list) {
// do something
}

if (this.props.data !== this.state.data) {
// do something
}
}

componentWillUnmount() {
// do something 1
// do something 2
}
}


// function hook
function FunctionComponent(props) {
const [list, setList] = React.useState([]);

React.useEffect(function() {
// do something

return function() {};
}, [props.data]);

React.useEffect(function() {
// do something
}, [list]);
}

```

class 组件的声明周期是渲染 /重新渲染 /组件卸载时，你需要自己来判断是哪些值变了，哪些值没变，所以在 class 组件的生命周期内可能会充斥着一堆的 if else 的判断。
function 组件的渲染 /重新渲染 /组件卸载，是由哪个值的变化引起的，然后执行这个值被依赖的 hook，即当这个值变化时，执行什么操作，反而更一目了然。

用呗，访问量不大的话，还没到考虑性能的时候

const nextConfig = withLess({
webpack(config, options) {
// config.module.rules
// 在 rules 里面找到 less 文件的 loader，添加 exclude，忽略 node_modules 目录内的文件


// antd 的 less-loader
const { rules } = config.module;
const { use } = rules[rules.length - 1];
const loaders = options.isServer
? ['css-loader/locals']
: [isDev ? 'style-loader' : use[0], 'css-loader'];

config.module.rules.push({
test: /.*\.less$/,
use: [
...loaders,
{
loader: 'less-loader',
options: {
lessOptions: {
javascriptEnabled: true
}
}
}
],
include: []
});

if (options.isServer) {
// antd 打包，而不是使用 node 的 require 方法引入，然后可以配置 antd 的按需加载
const externalsFunc = config.externals[config.externals.length - 1];

config.externals[config.externals.length - 1] = function(context, request, callback) {
if (/(antd|rc-|css-animation|@ant-design|highlight)/i.test(request)) {
return callback();
}

return externalsFunc(context, request, callback);
};
} else {
config.node = {
fs: 'empty',
path: 'empty'
};
}


return config;
}
});

你可以试一试