周报 2019.11.18-2019.11.22

(封面图作者: nys)

文章

• 从零开始写一个 React 框架

  挺不错的了解react的文章

• 中文文章写作规范

  阮一峰大佬写的关于中文文章的写作规范

• Introducing Concurrent Mode

  介绍了React仍处于实验室阶段的新特性 "并行渲染"，相关的使用场景以及和传统方式相比的差异。如果能投入生产环境，应该会对当前很多react的场景带来改变。 (非常值得关注) (英文)

• 如何监听 DOM 变化

  文章讲的很浅，但是其中提到的Mutation Observer这个特性很重要，如果要自己手写一个小框架练手，或者写网页工具，那么这个就很值得了解了

• drduh/YubiKey-Guide

  YubiKey 是一种目前较为流行的硬件密钥，这个仓库是网友写的使用手册（英文）(PS: 之前也打算过买一个试试，不过在amazon上价格还是有点稍贵，也有一些兼容方面的硬伤)

• GraphQL vs. REST: What's The Advantage?

  对比介绍GraphQL比REST好在哪里。不得不说GraphQL前景很高，不过在国内没有那么火 (英文)

• Deep dive: How do React hooks really work?

  介绍了React Hook的原理，然后介绍了怎么简单的自己实现一个React Hook功能 (英文)

• Using Gooey as a Universal Frontend for any Language or CLI Application

  介绍了怎么用Gooey这个库通过简单的描述，自动为python命令行工具生成gui页面，十分给力 (英文)

资源

• free-for.dev

  该仓库收集各种可以免费使用的（或有免费层的）互联网服务

• FCC 2019成都全栈大会

  2019年成都全栈大会PPT整理，不少值得关注的东西

工具

• Redis Manager

  作为一个 Redis 一站式管理平台，它支持 Redis 集群的管理、监控、创建以及告警等功能。它大大降低了 Redis 集群的运维成本，能做到对集群的实时监控，在 Redis 出现问题是进行准确的故障排查，亦或者通过分析历史数据还原 Redis 故障时的场景，同时还支持自定义监控规则的告警功能，让你随时了解 Redis 的运行状况。

  配图见附录2

• fiora

  一个功能丰富、支持多端的在线聊天室。它界面小清新，支持基本的聊天功能的同时还有好玩的消息朗读功能。项目上基于 TypeScript + React 16.9 代码逻辑清晰、注释较为完善，适合用来学习 node.js、 TypeScript、React 等技术

  配图见附录2

JS 库

• Mckinsey666/chart-race-react

  一个简单易用的 Bar Chart Race（长条图赛跑动画） React 组件：chart-race-react

• form-render

  阿里内部表单生成器开源，基于schema生成表单

• react-native-keyboard-manager

  好用的RN的键盘防遮挡库，同时还会为各类原生键盘添加Done按钮，非常实用 (来自Joe的投稿)

• HarryChen0506/react-markdown-editor-lite

  一款轻量的基于React的markdown编辑器

• sindresorhus/globby

  nodejs自带的glob库的扩展库，写命令行程序的时候会非常有用。如果你想批量匹配一个目录下的满足某些条件的文件并且惰性加载，这个库就很实用 (ps: 例如egg这类库，在config目录下写的所有js都会被加载到全局实例的属性中，就是靠这种方式的)

• swr

  一个React Hook工具，传入一个service函数作为驱动，可以用swr来依靠react hook的方式管理service的数据拉取操作，同时管理token的刷新和出错自动重试之类的操作

• yargs

  算是命令行工具commander的竞品，但是对多级子命令的支持更好 (代码示例见附录一)

• GunDB

  一个离线优先的去中心化数据库，数据存储在浏览器端，依靠一个轻量的服务器来做同步通讯。十分适合做端到端加密的应用以及一些比如AR之类的离线优先的应用

附录1 部分代码演示

• yargs

  #!/usr/bin/env node
  require('yargs')
    .command(['start [app]', 'run', 'up'], 'Start up an app', {}, (argv) => {
      console.log('starting up the', argv.app || 'default', 'app')
    })
    .command({
      command: 'configure <key> [value]',
      aliases: ['config', 'cfg'],
      desc: 'Set a config variable',
      builder: (yargs) => yargs.default('value', 'true'),
      handler: (argv) => {
        console.log(`setting ${argv.key} to ${argv.value}`)
      }
    })
    .demandCommand()
    .help()
    .wrap(72)
    .argv
  

附录2 部分截图演示

• Redis Manager

  

• Mckinsey666/chart-race-react

  

• fiora