在 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 工程化