在 react 中优雅的使用 grid 实现页面布局 场景吾辈在做 electron 应用的时候遇到了这种布局，顶部是 header，然后是页面中的 toolbar，紧接着右边有一个侧边栏列表，左侧的内容又分为了两块区域。这种布局在中后台系统中应该很常见，但之前并未特别留意过布局通用化。 使用 css calc() 计算高度 基于 css calc() 封装 Col/Row 组件，然后使用组件进行布局（主要模仿 antd grid） 使用 css 2020-12-02 react css grid
VSCode 与 WebStorm 横向对比 前言 不能认清自己，怎能看清别人？ 最近很长一段时间，VSCode 似乎成为了前端口中的标准开发编辑器，前端圈到处都在推荐 VSCode，劝说其他人放弃 Sublime, WebStorm, Atom 之流，仿佛真的是信巨硬，得永生一般。而吾辈作为一个长时间使用 JetBrains 系 IDE 的全沾开发者，这里就来对比一下 WebStorm 与后起之秀 VSCode 之前的异同点吧 比较插件生 2020-02-02 工具
使用 React Context 结合 EventEmitter 场景EventEmitter 很适合在不修改组件状态结构的情况下进行组件通信，然而它的生命周期不受 react 管理，需要手动添加/清理监听事件很麻烦。而且，如果一个 EventEmitter 没有使用就被初始化也会有点麻烦。 目的所以使用 react context 结合 event emitter 的目的便是 添加高阶组件，通过 react context 为所有子组件注入 em 对象 添加 2020-08-02 react
Windows 使用技巧 快捷键系统 Win-E：打开系统文件浏览器 Win-Tab：打开程序网格面板，类似于 C-Tab，但默认不会切换，而是展开全屏面板选择一个正在运行的程序切换过去 Win-R：打开运行 Win-S：搜索任何东西 Win-A：展开右侧通知面板 C-Tab：切换程序 CS-Esc：打开任务管理器 C-F：在当前页内容中搜索关键字 Enter：下一个匹配关键字 S-Enter：上一个匹配关键字 非常 2020-03-30
Windows 下 Git 中文乱码 场景在公司的电脑上碰到了 Git 中文乱码的问题，例如想要查看一下仓库的状态，中文全部变成了 umber 的形式。 1234567891011121314git statusOn branch masterYour branch is up to date with 'origin/master'.Changes not staged for commit: (use &q 2020-02-02 git windows
为什么有那么多笔记工具 真是疯了，吾辈发现网络上有太多的笔记工具了。 起因吾辈在大约半年前选择开始使用笔记工具，记录自己的日常知识碎片，并最终选择了 Joplin，也花费了许多时间为其编写 VSCode 插件。就在今天，吾辈在编写插件的一个功能时，需要查看类似插件是如何实现的时候，发现了许多类似的插件存在，甚至包括吾辈想在 VSCode 中管理和编辑笔记的想法也已然有人实现。 让我们看一下玩家有哪些 老牌产品 Ever 2020-11-15 个人
使用 jest 和 babel 测试 博客, GitHub 示例 场景最近想为吾辈的工具函数库 rx-util 添加单元测试，因为目前还在学习 ReactJS，所以最终选择了 Fackbook 家的 jest 进行测试。这里记录一下整个过程，以供他人参考。 注：Babel 是现代前端库的天坑之一，不保证不同版本按照该教程能正常完成。如果出现了错误，请对比示例项目库 jest-example。 过程添加依赖使用 yarn 安装 2020-02-02 javascript
JavaScript 规范整理 场景 圣人走过的道路，荆棘遍布，火焰片片焚烧…… 日常 review 代码时看到一些奇怪的代码，这里记录一下重构方案以及原因。 命名规范不要使用拼音命名如果不熟悉英语，可以使用 Codelf 或者 Google 翻译，避免使用拼音命名。 错误示例 12// 这里是用户状态const yongHuZhuangTai = 1; 正确示例 1const userStatus = 1; 函数中的变量js 2020-02-02 工程化
关于前端组件通信的一些理解 场景 吾辈同时是 vue/react 的使用者。 在使用现代前端框架时，我们经常要要面对的问题之一就是组件之间的通信，目前我们有着很多选择，包括但不限于以下这些。 Super Component Props: 将状态或操作放在父组件，然后传递到子组件。该特性在 vue/react 都存在 Context/Provider Pattern: 将状态放在父组件，然后所有的子组件都可以获取到。例如 2020-08-02 工程化
Windows 上的工具清单 但弄雕虫之技，尘芥草莽，于泥泞自勉…… 开发MS VSCode：前端标准 IDE[便携版], [开源], [跨平台], [免费] 具体可以参考：官网, GitHub, GitBook 中文介绍 MS VSCode 是微软出品的一个跨平台，基于 Web 的，免费的开源文本编辑器。目前已经使用了半年多了，对其的了解也更加深入。就目前看来，VSCode 应该是前端生态最好的 IDE 了。作为一个 2020-02-02 windows 工具 待更新
读书 [浪潮之巅] 简介前些时日，吾辈读完了 [浪潮之巅] 这本书。 它是 Google 开发者吴军所写的 IT 行业各个重要公司的兴衰历史，并进一步探讨了其中的原因。那些曾经无比耀眼的新星，压在每个公司头上的庞然大物，是如何一步步变成这样的。 起因最初是在一位朋友的推荐下了解到这本书的，当然，那位推荐了不少有趣的书籍: 黑客与画家、浪潮之巅、人月神话等。 感想 书中最有趣的一个观点是: 公司是由基因决定的，转基因 2020-02-02 读书
有限状态机 xstate.js 官网, 中文（繁体）教程参考 场景 为什么要引入状态机？ 吾辈希望使用有限状态机管理程序中的状态及状态的流转，以避免使用各种 flag + if/else 控制程序的运行。 为什么吾辈会突然觉得 flag + if/else 这种方式不好呢？ 原因在于吾辈最近在看设计模式相关的书籍：JavaScript 设计模式与开发实践，其中涉及到了[状态模式]，里面就提到了[有限状态机 2020-07-10 工程化