{"id":13671381,"url":"https://github.com/hoperyy/blog","last_synced_at":"2025-08-18T22:32:24.777Z","repository":{"id":21541201,"uuid":"93162379","full_name":"hoperyy/blog","owner":"hoperyy","description":"沉淀/体系化","archived":false,"fork":false,"pushed_at":"2022-10-22T12:10:05.000Z","size":28519,"stargazers_count":136,"open_issues_count":141,"forks_count":14,"subscribers_count":18,"default_branch":"master","last_synced_at":"2024-11-11T09:43:41.961Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hoperyy.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-06-02T12:14:07.000Z","updated_at":"2024-10-17T02:54:14.000Z","dependencies_parsed_at":"2023-01-12T03:45:44.283Z","dependency_job_id":null,"html_url":"https://github.com/hoperyy/blog","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hoperyy%2Fblog","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hoperyy%2Fblog/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hoperyy%2Fblog/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hoperyy%2Fblog/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hoperyy","download_url":"https://codeload.github.com/hoperyy/blog/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230286309,"owners_count":18202684,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-02T09:01:08.014Z","updated_at":"2024-12-18T14:27:13.895Z","avatar_url":"https://github.com/hoperyy.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","Interview/Blog"],"sub_categories":[],"readme":"### About Me\n\n- 👨  I'm a Front-End Developer.\n- ⚡   I'm now focused on **Tech Product** / **Teach Lead** / **Deep-In-Series**\n\n## Products\n\nNotely: https://notelyio.com/\n\n\u003e **Notely**: *Note* Friend*ly*\u003cbr\u003e\n\nFeatures as below:\n\n\u003e   Easy Using: Without Login\n\n\u003e   Type: Draw / Markdown / Text\n\n\u003e   Storage: Offline / Github / ... \n\n\u003e   Unlimited: Multi Level Directory\n\n## Projects\n\n+   [deep-in-babel](https://github.com/hoperyy/deep-in-babel)(2021 ~ now)\n\n    《深入理解 Babel》作者，图书编写中，[部分草稿](https://hoperyy.github.io/deep-in-babel)\n\n+   [sync-directory](https://github.com/hoperyy/sync-directory)(2017)\n\n    \u003e A sometimes popular package\n\n    \u003e [npm](https://www.npmjs.com/package/sync-directory) weekly download count 12k+ (the top download count)\n\n+   [what-does-tech-leader-do](https://github.com/hoperyy/what-does-tech-leader-do)(2021-12)\n\n    \u003e 《技术管理者的自我修养》，好的管理，可以最大限度的激发每个人的能力和善意\n\n+   [plugin-anything](https://github.com/hoperyy/blog/issues/150)(2020)\n\n    \u003e Make pluginable applications.\n\n+   [auto-compute-first-screen-time](https://github.com/hoperyy/auto-compute-first-screen-time)(2018)\n\n    \u003e Get first screen loading time automatically\n\n+   [fix-colors-out-of-memory](https://www.npmjs.com/package/fix-colors-out-of-memory)(2022)\n\n    \u003e You surely know what happed with [colors](https://github.com/Marak/colors.js/issues/285)\n    \n    \u003e Fix it!\n\n    \u003e [npm](https://www.npmjs.com/package/fix-colors-out-of-memory) was just publish for it!\n\n+   [snippets](https://hoperyy.github.io/snippets/#/)(长期更新)\n\n    \u003e 日常工作、学习中常用的代码片段收集、复用\n\n+   独立解析某个文件的依赖树：[get-dependency-tree](https://github.com/hoperyy/get-dependency-tree)(2019/07/03)\n\n    \u003e 用该工具可以快速解析出：`js / vue / scss / sass / less / css` 类入口文件的依赖树，不再依赖 webpack 获取依赖树（webpack 暴露的获取方式较晦涩）。\n\n+   [bio-cli: 前端开发一站式解决方案](https://github.com/weidian-inc/bio-cli)(2018)\n\n    \u003e 自动化流程：项目初始化 -- 开发环境启动 -- 打包。\n\n    \u003e 插件化。\n\n+   发起并维护着 [微店技术 blog](https://github.com/weidian-inc/weidian-tech-blog)(2019)\n\n## 深入理解 Babel\n\n+   图书《深入理解 Babel》编写中，[部分草稿](https://hoperyy.github.io/deep-in-babel)\n\n+   [项目地址](https://github.com/hoperyy/water)\n\n+   文章\n\n    +   [Babel概述](https://github.com/hoperyy/water/issues/6)\n\n+   工具\n\n    +   独立解析某个文件的依赖树：[get-dependency-tree](https://github.com/hoperyy/get-dependency-tree)\n\n        用该工具可以快速解析出：`js / vue / scss / sass / less / css` 类入口文件的依赖树，不再依赖 webpack 获取依赖树（webpack 暴露的获取方式极其晦涩）。\n\n+   分享\n\n    +   [babel 插件开发全面理解](https://github.com/hoperyy/water/issues/4)(2019-05-05)\n    +   [babel 插件开发实践过程](https://github.com/hoperyy/water/issues/5)(2019-05-19)\n    +   [babel架构图(2019-12-05)](https://raw.githubusercontent.com/hoperyy/water/master/img/structure.png)\n    +   [微信小程序知识图谱](https://raw.githubusercontent.com/hoperyy/water/master/img/miniprogram.png)\n\n## 思考\n\n+   [对技术 TL 的思考: what does tech leader do](https://github.com/hoperyy/what-does-tech-leader-do)(2021-12-22)\n+   [个人整理的知识体系思维导图](https://github.com/hoperyy/blog/issues/144)(2019/08/01)\n+   [业务 Sense 培养之路](https://github.com/hoperyy/blog/issues/143)(2020/05/06)\n+   [一种实现简单且舒服的前端接口异常处理方案](https://github.com/hoperyy/blog/issues/143)(2019/08/01)\n+   [如何在项目中做到 0 bug？](https://github.com/hoperyy/blog/issues/140)(2019/04/12)\n+   [如何维护并优化一个复杂项目](https://github.com/hoperyy/blog/issues/55)(2017)\n+   [推进业务落地的经验](https://github.com/hoperyy/blog/issues/92)(2017)**\n+   [收藏的文章](https://github.com/hoperyy/blog/issues/142)(2019/05)\n+   [聊一聊前端业务开发](https://github.com/hoperyy/blog/issues/135)(2019/03/18)\n+   [前端工作流](https://github.com/hoperyy/blog/issues/128)(2018)\n+   [一次难得的多团队协作项目](https://github.com/hoperyy/blog/issues/47)(2016)\n+   [优秀的前端要注意的素养](https://github.com/hoperyy/blog/issues/48)(2016)\n+   [前端技能图谱](https://github.com/hoperyy/blog/issues/50)(2016)\n+   [一次大促活动总结](https://github.com/hoperyy/blog/issues/46)(2016)\n+   [工作中的方法论](https://github.com/hoperyy/blog/issues/45)(2015)\n+   [何为优秀的前端？](https://github.com/hoperyy/blog/issues/49)(2015)\n+   [2014年工作总结](https://github.com/hoperyy/blog/issues/44)(2014)\n\n## 前端工程化\n\n+   [vite 源码解读 · 核心链路 ](https://github.com/hoperyy/blog/issues/156)(2022/05/28)\n+   [预检测 -- 微店的前端质量保证探索](https://github.com/hoperyy/blog/issues/153)(2021/05/31)\n+   [commander.js 原理解析](https://github.com/hoperyy/blog/issues/152)(2021/02/22)\n+   [2018 iWeb 峰会《微店前端工程化》分享 PPT](https://github.com/hoperyy/blog/issues/115)(2018/08/12)\n+   [微店前端工程化迭代史](https://github.com/hoperyy/blog/issues/145)(2019/08/09)\n+   [前端工程化简介](https://github.com/hoperyy/blog/issues/114)(2018)\n+   [谈谈前端产品质量控制](https://github.com/hoperyy/blog/issues/100)(2018)\n+   [远程同步文件的几种技术方案](https://github.com/hoperyy/blog/issues/4)(2017)\n+   [解决 webpack/webpack-dev-server 监听文件时频繁触发编译和回调的问题](https://github.com/hoperyy/front-end-engineering/issues/4)(2017)\n+   [webpack 深入配置](https://github.com/hoperyy/front-end-engineering/issues/15)(2017)\n+   [webpack 经验谈](https://github.com/hoperyy/front-end-engineering/issues/14)(2017)\n+   [启动一个 vue 项目](https://github.com/hoperyy/front-end-engineering/issues/1)(2017)\n+   [项目个性化配置策略](https://github.com/hoperyy/front-end-engineering/issues/11)(2017)\n+   [用纯 webpack 结构替代 gulp+webpack 结构开发脚手架](https://github.com/hoperyy/front-end-engineering/issues/10)(2017)\n+   [脚手架与业务目录的目录结构浅析](https://github.com/hoperyy/front-end-engineering/issues/16)(2017)\n\n## 性能优化\n\n+   [终端性能优化杂谈](https://github.com/hoperyy/blog/issues/147)(2019)\n+   [自动获取首屏时间原理](https://github.com/hoperyy/blog/issues/102)(2018)\n+   [前端性能优化知识集合](https://github.com/hoperyy/blog/issues/108)(2017)\n+   [《高性能 JavaScript》笔记](https://github.com/hoperyy/blog/issues/54)(2015)\n\n## 框架\n\n+   [vuex](https://github.com/hoperyy/blog/issues/117)(2018)\n+   [vue ssr 那些事](https://github.com/hoperyy/blog/issues/99)(2017)\n+   [vue 源码学习之：如何监听一个对象的变化](https://github.com/hoperyy/blog/issues/61)(2017)\n+   [React / Redux](https://github.com/hoperyy/blog/issues/118)(2018)\n+   [React 渲染性能提升](https://github.com/hoperyy/blog/issues/21)(2016)\n+   [用 React 实现移动端单页应用](https://github.com/hoperyy/blog/issues/43)(2016)\n\n## Node\n\n+   [Event Loop 理解总结](https://github.com/hoperyy/blog/issues/131)(2019)\n+   [koa-compose](https://github.com/hoperyy/blog/issues/132)(2019)\n+   [RESTful 风格](https://github.com/hoperyy/blog/issues/120)(2018/08)\n+   [SQL](https://github.com/hoperyy/blog/issues/119)(2018/08/24)\n\n## JavaScript\n\n+   [Currying Demo](https://github.com/hoperyy/blog/issues/146)(2019)\n+   [《你不知道的 JavaScript》读书笔记](https://github.com/hoperyy/blog/issues/95)(2017)\n+   [数组的几个方法](https://github.com/hoperyy/blog/issues/23)(2016)\n+   [TypeScript 学习笔记](https://github.com/hoperyy/blog/issues/105)\n+   [《JavaScript 设计模式》笔记](https://github.com/hoperyy/blog/issues/53)(2016)\n+   [underscore 源码了解](https://github.com/hoperyy/blog/issues/5)(2015)\n+   [事件冒泡](https://github.com/hoperyy/blog/issues/40)(2015)\n+   [正则表达式语法规则](https://github.com/hoperyy/blog/issues/7)(2015)\n+   [jQuery-1.7.1 源码阅读笔记](https://github.com/hoperyy/blog/issues/9)(2015)\n+   [js 基础](https://github.com/hoperyy/blog/issues/28)(2015)\n\n## CSS\n\n+   [css 样式的百分比都相对于谁？](https://github.com/hoperyy/blog/issues/18)(2016)\n+   [什么是 BFC？](https://github.com/hoperyy/blog/issues/16)(2016)\n+   [flex 属性快速记忆](https://github.com/hoperyy/blog/issues/41)(2016)\n+   [css 清除浮动的 3 个方法](https://github.com/hoperyy/blog/issues/17)(2014)\n+   [css3 速查手册](https://github.com/hoperyy/blog/issues/13)(2015)\n+   [css 书写顺序规范](https://github.com/hoperyy/blog/issues/6)(2014)\n\n## 基础知识\n\n+   [《图解 HTTP》 读书笔记](https://github.com/hoperyy/blog/issues/58)(2017)\n+   [跨域那点事](https://github.com/hoperyy/blog/issues/25)(2016)\n+   [聊聊 websocket](https://github.com/hoperyy/blog/issues/24)(2016)\n+   [HTTP/HTTP/2.0/SPDY/HTTPS](https://github.com/hoperyy/blog/issues/20)(2016)\n+   [gif/jpg/png/WebP 的区别](https://github.com/hoperyy/blog/issues/42)(2016)\n+   [从输入 URL 到页面加载完成的过程中都发生了什么事情？](https://github.com/hoperyy/blog/issues/19)(2016)\n\n## 工具\n\n+   [chrome 插件开发总结](https://github.com/hoperyy/blog/issues/126)(2018/12/05)\n+   [chrome 开发者工具](https://github.com/hoperyy/blog/issues/122)(2018)\n+   [每天一个 linux 命令](https://github.com/hoperyy/blog/issues/112)(2017)\n+   [配置你的 github pages](https://github.com/hoperyy/blog/issues/10)(2015)\n+   [Git 速查手册](https://github.com/hoperyy/blog/issues/51)(2014)\n+   [用油猴子定制你的个性化插件](https://github.com/hoperyy/blog/issues/8)(2014)\n\n# 碎语\n\n+   #2022/02/11 悲观者正确，乐观者成功\n+   #2021/05/07 为什么 npm publish 要忽略 package-lock.json?\n+   #2020/04/02 休息休息\n+   #2020/03/21 信息熵\n+   #2020/03/18 把复杂的事情做简单，把简单的事情做复杂\n+   #2020/03/16 着手建立完整的知识体系并产出\n+   #2020/03/12 研究下文件加密\n+   #2020/01/29 杭州超市的菜很贵！\n+   #2020/01/25 加油，武汉！\n\n+   #2020/01/17 对创业的感悟\n\n    +   商业化产品的特点：易用、稳定\n    +   All In: 时刻思考\n    +   角色：主导者\n    +   定位\n        +   该领域的 No.1\n        +   思考必须充分\n\n+   #2020/01/12 坦诚可沟通\n+   #2020/01/11 换个思路，海阔天空\n+   #2019/12/15 保持输出强度\n+   #2019/12/02 身体第一\n+   #2019/12/01 说话、做事，要优先**找**重点\n+   #2019/11/28 在做事的过程中，不断动态调整优先级\n+   #2019/09/26 深入再深入\n+   #2019/07/17 以天为单位回顾目标进展\n+   #2019/07/16 看到产品曙光\n+   #2019/06/28 “提效”是很多成果的直接指导思想\n+   #2019/06/25 越来越重视时间，重视单位价值最大化\n+   #2019/06/03 下阶段重点：知识的体系化，模块化\n+   #2019/05/30 知识管理方式确定为：markdown + 思维导图\n+   #2019/05/17 项目管理方法论需整理\n+   #2019/05/15 在别人的“事情”里做事，还是在自己的“事情”里做事\n+   #2019/05/15 随时“准备好”的能力\n+   #2019/05/06 创建了微信公众号，新阶段开始\n+   #2019/05/04 花时间学习时间管理\n+   #2019/04/25 严以做事，宽以待人\n+   #2019/04/07 学会写小程序，不错\n+   #2019/04/06 把时间用在可以积累的地方去\n+   #2019/04/03 [2018 房子装修存档](https://github.com/hoperyy/blog/issues/138)\n+   #2019/04/01# 发起了《多端统一开发》虚拟小组，希望有结果\n+   #2019/03/19# 沉下心，放长线，专注个人成长\n+   #2019/03/15# 重视代码可读性\n+   #2019/03/14# 整理知识思维导图中……\n+   #2019/03/11# 做事前，想好各个方案的性价比\n+   #2019/03/10# 规划，珍惜时间\n+   #2019/03/07# BEM 很好用\n+   #2019/02/08# 识货，是种能力\n+   #2019/01/28# 充足的时间是做好事情的保证\n+   #2019/01/03# 算法还是挺有意思的\n+   #2019/01/02# 做好知识输出\n+   #2019/01/01# [2018 年总结与 2019 年计划](https://github.com/hoperyy/blog/issues/130)\n+   #2018/12/29# [滑雪技巧](https://github.com/hoperyy/blog/issues/129)\n+   #2018/12/28# 没有稳定的职位，只有稳定的能力\n+   #2018/12/27# 忽略完美，持续交付\n+   #2018/12/07# 意外\n+   #2018/12/01# 职业规划考虑重点：业务方向、时间\n+   #2018/11/17# 数据化\n+   #2018/11/13# 结论需充分的理由\n+   #2018/11/09# 保持学习的强度\n+   #2018/11/01# 演讲前需频繁演练\n+   #2018/10/12# 需求梳理是一个技术活，值得花时间研究\n+   #2018/10/07# 个人品牌在平时\n+   #2018/10/04# 用图解的方式解说\n+   #2018/10/02# 提前处理，能够避免很多问题\n+   #2018/10/01# 懂得放弃边角问题，节省精力\n+   #2018/09/30# 多想，少做\n+   #2018/09/26# 工作需要有阶段化成果\n+   #2018/09/25# 产品化自己的工作\n+   #2018/09/21# 数据化工作效果，重视闭环\n+   #2018/09/13# 错误的做事方法浪费不少时间\n+   #2018/09/11# 保持强度，保持成长\n+   #2018/09/09# 详细记录日常工作，以备不时之需\n+   #2018/08/27# 觉得累了就休息\n+   #2018/08/23# 学习 “如何把事情讲清楚”\n+   #2018/08/07# 好好学习技术演讲\n+   #2018/05/19# 架构师的水平极大影响团队的水平\n+   #2018/04/28# 简单是稳定的前提\n+   [#2018/04/21# 有赞前端技术开放日](https://github.com/hoperyy/blog/issues/107)\n+   #2018/03/24# 不要过度设计\n+   #2018/03/23# 小步快跑\n+   #2018/03/20# 精力有限，关注一方面，另一方面可能会被忽略\n+   #2018/03/18# 职场角色：执行者、驱动者\n+   #2018/03/18# 完成搬家！和租房告别\n+   #2018/03/16# 你的客户是谁？做事情前需要想清楚这个问题\n+   #2018/03/03# 每个阶段都需要有技术突破\n+   #2018/02/25# 技术、运气、情商\n+   #2018/02/22# 好的技术人员的特点：做事快、质量高\n+   #2018/02/22# 注意力 \u003e 效率 \u003e 时间 \u003e 金钱\n+   #2018/02/20# 不断站在更高的角度思考\n+   #2018/02/17# 管理也是门技术\n+   #2018/02/05# 产品化和技术化都非常重要\n+   #2018/02/01# 系统化学习\n+   #2018/01/25# 分析问题的套路：拆解\n+   #2018/01/18# 评价在平时\n+   #2018/01/16# 同一个问题，有不同的描述方式\n+   #2018/01/15# 兜底方案是什么？正常服务之外是否有考虑？\n+   #2018/01/13# 多思考，再行动\n+   #2018/01/09# 低成本解决问题，高回报创造长期价值\n+   #2017/12/24# 要做技术扛把子\n+   #2017/11/22# 新起点，新机会\n+   #2017/11/20# 优雅的代码，让人有查看的欲望；杂乱无章的代码，让人没有食欲\n+   #2017/11/17# 如果把事情的完成度用百分比衡量的话，60% 可能是初步合格，90% 是优秀，100% 是很优秀，120% 是非常好。用百分比衡量一件事做的好的程度，是不错的角度。\n+   #2017/11/15# 解决问题一定要思考 A/B Question\n+   #2017/11/08# 通过看 issue 是解决开源项目问题的好办法\n+   #2017/11/06# 软件开发就是把一个复杂的问题**分解**成一系列简单的问题，再把一系列简单的解决方案**组合**成一个复杂的解决方案\n+   #2017/11/02# 三个技术角度：（1）深度：能够看到细节；（2）全局观：能够找到定位；（3）远瞻：能抓住核心\n+   #2017/10/30# 头脑风暴：如果在优化性能的时候遇到瓶颈，不妨尝试绕过该问题，先解决其周边问题，比如**代码可读性**\n+   #2017/10/27# 好好学习如何写 PPT\n+   #2017/10/26# 用技巧解决非技术问题\n+   #2017/10/25# 技术选型时要特别注意重要的技术节点\n+   [#2017/10/19# #得到# 如何提升自知力](https://github.com/hoperyy/blog/issues/91)（2017）\n+   #2017/10/17# 大局观，不能只关注一个点(2017)\n+   #2017/10/16# 化整为零(2017)\n+   #2017/10/09# 用方法论辅助自己(2017)\n+   #2017/10/08# 用规划和计划消除紧急事务(2017)\n+   #2017/10/08# 用方法论帮助自己(2017)\n+   #2017/10/07# 多领域专家(2017)\n+   #2017/10/06# 牢记目标和节点(2017)\n+   [#2017/09/27# 技术储备相当重要](https://github.com/hoperyy/blog/issues/60)(2017)\n+   [#2017/09/26# “需求池”这个概念不错](https://github.com/hoperyy/blog/issues/59)(2017)\n+   [#2017/08/22# 在做事的时候多考虑“方法论”](https://github.com/hoperyy/blog/issues/57)(2017)\n+   [#2017/08/19# 掌握一个新技能需要的时间其实挺短](https://github.com/hoperyy/blog/issues/56)(2017)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhoperyy%2Fblog","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhoperyy%2Fblog","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhoperyy%2Fblog/lists"}