💬 闲着说

💬 闲着说

• 📑 我最近的阅读
• 📜 收藏的代码表

🌎 你的价值和经验体现在

2020-12-13

🏆 工作多年之后

2020-12-12

1. 对技术的精通、业务的熟悉、沟通能力、任务拆解能力、全局思考能力
2. 任何需求都能准确评估并按计划实现，一个优秀的参与者。
3. 能够对项目提供坚强的支持，无论是技术、意见和都能有足够的参与度和靠谱度。
4. 能够熟悉整个大项目的关键点和和技术架构，自己负责的部分能够深入且有质量和工程化。

1. 独立负责项目：独当一面、逻辑推理、业务梳理、功能实现能力等，而不是仅仅完成别人布置任务。
2. 整体的思路很清晰，能够对别人的问询应付自如，能够简练的给别人讲清楚整个项目。
3. 对别人提出的需求和假设，能够当场给出靠谱的解决方案、业务评估。前提是被项目和需求大量训练出来的下意识思考，同时涉猎过大量的项目和技术范围。
4. 竞争力，能做别人做不到的事情。

😳 react-jsx

2020-12-07

😳 react-jsx

2020-11-26

// 转换前
const App = () => <h1>Hello World</h1>
// 转换后，里面包含了 React，必须要手动引入
const App = () => React.createElement('h1', null, 'Hello world')

// 转换后，不依赖于显式的 React，编译期自动引入 jsx 运行时
import {jsx as _jsx} from 'react/jsx-runtime';
function App() {
  return _jsx('h1', { children: 'Hello world' });
}

1. 如果命令行执行 eslint，那么可以用全局安装的文件，或者在 nodejs 中引入不同的位置
2. 如果是编辑器的语法检查或者插件，需要配置，默认是编辑器自带，可以手动指定

💡 方法论

2020-11-11

1. 每次对接项目都会花很多时间联调，为什么不去找提前对接的方法呢？
2. 每次产品提测都是很痛苦的过程，回归测试每次都出问题，为什么不完善代码规范、考虑自动测试等方法呢？
3. 产品清单、运行清单、测试清单
4. 抽象、规范、流程、标准化、工程化

1. 做事不靠谱？那就提高能力、多实践、从而更准确的项目评估，遇到哪些问题然后下次预先考虑。
2. 不善沟通？那就多沟通，把负面的心理惩罚降低，让自己更愿意去沟通，从而根据反馈调整自己的应答机制。
3. 效率低？那就列出提效清单一个个实践。

😲 猝不及防

2020-11-06

💾 Web 编辑器内容防丢失机制

2020-11-01

1. 文章变动立即存储内容和时间到本地，以一分钟粒度创建历史记录，随时可恢复
2. 闲置无操作 2s 后再次检查本地存储是否一致无误，以免内容未持久化
3. 有未保存到云端的内容时，关闭网页会触发提示组织关闭窗口
4. 有未保存内容时强制关闭页面，下次进入能够提示恢复
5. 本地内容比服务器内容更新时会主动提示恢复
6. 每次保存操作后，会拉取刚保存云端内容，检查本地内容保存是否确认无误
7. 删除操作提供标记废纸篓，而不是删除记录，删除操作可以云端恢复

💒 结婚啦！！！

2020-10-01

🤔 为什么没有人注意页面的音效了呢？

2020-8-09

🆗 你见到过整个鳄鱼，就不会奇怪为什么水面上有两个眼睛了

2020-7-22

• 浏览器和服务器的接口沟通走的时候 HTTP，浏览器发什么、服务器返回什么，在遵循 HTTP 规范的前提下都是很自由的。比如浏览器会根据服务器设置的 CORS 头来控制跨域的处理，但是如果不是浏览器来做 HTTP 请求，这个 CORS 头客户端就可能不去遵循。所以说白了这些 Headers 都是参数，其中有浏览器或者业界统一遵循的头规范，也可以自己定义、改写这些参数，然后达到自己的控制目的。
• 从这个角度来看，http 请求的发送，添加 application/json 头，服务器就知道应该返回 JSON 格式数据，如果协商说客户端添加 accept: text/xml 的头参数，服务器只要能控制，也能决定返回 JSON 格式数据，这个不是写死的，而是代码里的约定俗成而已。请求中手动添加 v:2 的参数，服务器也能知道返回高版本的数据响应。
• 再说很多的后端框架，比如 PHP 的 YII/ThinkPHP、JAVA 的 Tomcat 等框架，本身内置了很多的 HTTP 解析模块，能够将约定俗成的头参数进行解析，比如返回数据能够根据 accept 来自动的决定返回 JSON 还是 XML，这个行为是框架封装的，也是代码决定的。

• 正常一台机器，多任务的处理方案都是 CPU 运行一段时间后切换给其他任务，所以多任务的本质是 CPU 把自己的计算时间给谁的问题，MACOS 的活动监视器中能够看到每个进程所用的 CPU 时间总和。
• docker 或者虚拟机能控制某一个容器或机器最多用多少内存，但是没办法控制最多用多少 CPU，因为 CPU 的计量单位是时间和核，只能控制用几个核心用多久。
• 本质上也是计算送到 CPU，计算完毕之后返回，这个计算时间跟计算量和 CPU 的频率有关，多个容器在一台机器上，机器能分配的是每个容器的优先级和时间分配。
• 单个线程算一个计算，多线程就是将多个计算列队让一个进程循环处理，避免这一个进程出现空闲 CPU 时间，无论再快也是一个个计算，只是避免 CPU 等 IO 的情况，如果多线程全都是 CPU 计算的话，多线程的效率比单线程还要低，因为本质这个进程的 CPU 时间都是跑满的。（相当于三个队排队窗口打饭，如果每个人都要思考吃什么，师傅先给另一个队列打饭就行，整个队列会更快。但是如果每个人不思考上来就能打饭，那么排 100 个队伍打饭师傅也不可能比一个队更快）
• 多进程是利用多核 CPU 核心，每个进程中都能安排计算，每个进程同时有 CPU 时间给这些计算。（相当于窗口有 2 个打饭师傅，无论怎么打饭也比 1 个师傅更快）
• JS 这种单进程的执行逻辑一般都是用的 Event Loop，宏任务和微任务之类的执行逻辑，宏任务中的回调挂起，成功后被放到微任务中，宏任务完毕之后检查微任务，如果宏任务中有密集型的计算任务占据了 CPU 时间，那么用户操作的反馈在微任务中无法被调用响应，那么就会造成了卡顿。

🛅 数据层

2020-6-12

📠 客户端代理

2020-5-23

🔃 React 组件的泛型定义

2020-5-16

// 组件的泛型 props
type CommonFormProps<T> = {
  name: string
  value: T
}
// 带有泛型的函数组件
function CommonForm<T>(props: CommonFormProps<T>) => JSX.Element
// 添加一个 memo 包裹，可以透传
const NewForm = React.memo(NewFormComponent)
// ===> 
// 在使用的时候用 ComponentType + as 来实现泛型的限制
const NewString = NewForm as React.ComponentType<CommonFormProps<string>>
const NewNumber = NewForm as React.ComponentType<CommonFormProps<number>>

😄 LOL hahaha...

2020-4-29

😲 预期、不符预期、焦虑、忙起来

2020-04-06

1. 一个人基于自己的判断决定做某件事
2. 这个人对这件事有自己的预期
3. 但是事情的发展不符合自己的预期
4. 焦虑和严肃随之而来
5. way 1
   1. 顿悟、理智
   2. 找到明确的方法，坚持下去 / 说服自己跳出框架 / 变更思路
   3. 逐渐解决问题
6. way 2
   1. 没有有效的解决办法
   2. 尝试各种办法 keep busy，缓解自己内心的焦虑
   3. 接受现实

🕥 github.githistory.xyz

2020-3-22

🗿 npm mirrors

2020-2-12

👰 她在 24 岁打怪兽

2020-2-08

🔨 辅助工具

2020-1-8

• 录屏使用开源免费的 kap，能导出 mp4 效果比 gif 好很多，可控而且文件更小；
• 原型图之类的使用 Sketch 画图，无论是产品设计还是基本的图表绘图都很不错，导出 svg 直接作为图片引用，不好的地方是文字空格会合并，不过少量文字可以轮廓化，图表比截图展示好很多。
• 字符图使用 asciiflow 不用导出图片，直接使用字符画，简单图形来说更方便些

🌿 编程中常见的 Effect

2019-12-12

🛴 JSX <-> React

2019-12-10

let box = <div />;

var box = {
  elementName: "div",
  attributes: {},
  children: null
};

👻 内心强大的混蛋

2019-9-29

💭 Hooks 需要不一样的思想

2019-08-01