# 2019-12 ![](https://p.ipic.vip/u6q9jv.jpg) 每天给你推荐一个新奇，好玩，高品质的开源库，好文，观点或言论等。 > 项目主页维护当前月份的内容，想看往期内容，可以翻到下方历史汇总部分，然后选择自己感兴趣的月份点进去即可。 ## 2019-12 ### 2019-12-31\[见闻] 今天是我的生日，祝我生日快乐 🎂 ～～～～ 一般公司的卫生间贴的都是公司信息或心灵鸡汤，但是谷歌卫生间贴的是`如何找到代码 Bug`，不得不感叹“这实在是太硬核了”！ ![](https://p.ipic.vip/bfit09.jpg) ![](https://p.ipic.vip/0gd54s.jpg) ### 2019-12-24\[技巧] 今天是平安夜，苹果 🍎 和圣诞礼物 🎁 都收到了么？ 今天给大家推荐的是一个 linux 中非常常见的命令 `grep` 的常用用法。 图版本： ![](https://p.ipic.vip/9e2qrv.jpg) 文字版本： Matches patterns in input text.Supports simple patterns and regular expressions. * Search for an exact string: grep search\_string path/to/file * Search in case-insensitive mode: grep -i search\_string path/to/file * Search recursively (ignoring non-text files) in current directory for an exact string: grep -RI search\_string . * Use extended regular expressions (supporting ?, +, {}, () and |): grep -E ^regex$ path/to/file * Print 3 lines of \[C]ontext around, \[B]efore, or \[A]fter each match: grep -C|B|A 3 search\_string path/to/file * Print file name with the corresponding line number for each match: grep -Hn search\_string path/to/file * Use the standard input instead of a file: cat path/to/file | grep search\_string * Invert match for excluding specific strings: grep -v search\_string ### 2019-12-23\[学习方法] 很多人问我如何保持高效率。 首先要说的是我的效率并不是很高，这也就是我为什么还在不断学习提高效率的原因之一。那么既然有人问了我就班门弄斧回答一下，大家有什么好的方法和技巧欢迎提出来交流。 为了让自己保持高效率，我自己开了一个仓库记录了自己保持“高效率”的方式。希望可以给大家启发，本仓库内容持续更新～ 仓库大纲： ![](https://p.ipic.vip/71p5ni.jpg) 仓库截图： ![](https://p.ipic.vip/nqiimi.jpg) 仓库地址： ### 2019-12-20\[新闻] Facebook 发布 Hermes， 一个新的专门用于 React Native 的 JS 引擎。 文章地址： ### 2019-12-19\[好文] 很多高级语言有自动的垃圾回收器，比如 JS，JAVA，Go 等。其会自动地进行垃圾回收工作，而不必像诸如 C 和 C++那样手动分配和清除内存。 对于 old space 的垃圾回收算法有一个是标记清除，从一个根对象开始对于所有可达的对象进行标记，剩下的就是不可达的，我们将其进行清除，本文讲解了三色标记法（黑色，白色和灰色），三色标记法本质上进行一次 DFS，并将内存对象分到三个部分，DFS 完成之后清除不可达的内存（白色）。这篇文章以动画形式讲解了三色标记法的具体过程。 文章（《一张图了解三色标记法》）地址： ### 2019-12-18\[教程] 哈弗大学 CS50 系列，内容持续更新，现在最新的是 2019 年。 你可以跟着教程来重新学习 CS 基础。 ![](https://p.ipic.vip/9rrggw.jpg) 地址： ### 2019-12-17\[网站] Learn Git Branching 是一个交互式学习 Git 的网站。沙盒里你能执行相应的命令，还能看到每个命令的执行情况； 通过一系列刺激的关卡挑战，逐步深入的学习 Git 的强大功能，在这个过程中你可能还会发现一些有意思的事情。 ![](https://p.ipic.vip/s0e35u.jpg) ![](https://p.ipic.vip/s389jc.jpg) 地址： ### 2019-12-16\[新闻] 最新版本的 Chrome 和 Firefo 浏览器取消 EV 证书的显示。 ![](https://p.ipic.vip/85srjg.jpg) ![](https://p.ipic.vip/8p40n5.jpg) 只有用户点击了锁 🔒，才会显示出 EV 证书的信息。 ![](https://p.ipic.vip/upqiv2.jpg) 为什么会这样？想要知道答案的可以点击原文阅读。 原文地址：[Chrome and Firefox Changes Spark the End of EV Certificates](https://www.bleepingcomputer.com/news/software/chrome-and-firefox-changes-spark-the-end-of-ev-certificates/) ### 2019-12-13\[类库] loki 是一个 React Storybook 组件回归测试工具。React Storybook 是一个我 15 年就开始关注的一个工具，本身的设计思想我比较喜欢。现在除了支持 React，也支持 React Native，Vue，Angular 等，甚至最新的 Svelte 也支持。 loki Github 地址： ### 2019-12-12\[技巧] Angular 的 Commit Message Conventions 是一套很流行的 Commit Message 规约。简单方便，一目了然，更重要的是这种约定化如果形成一种默契，不管对于之后查看，还是生成各种外部资料（比如 CHNAGELOG）都是非常方便的。 ![](https://p.ipic.vip/hpabfc.jpg) 详细信息： 相关工具也有很多，我个人使用的是[Commitizen](https://github.com/commitizen?type=source) ### 2019-12-11\[好文] 文章标题 《花椒前端基于 WebAssembly 的 H.265 播放器研发》，本文从背景介绍，技术调研，实际方案到最后的实践效果，完整地讲述了通过 `wasm` 将 H.265 应用到不支持其的浏览器的过程。干货满满，其架构图画的也是我比较喜欢的风格。 ![](https://p.ipic.vip/mjubl8.jpg) 文章地址： ### 2019-12-10\[技巧] 我们有时候需要在终端访问一些国外的资源。我目前采取的措施主要是给终端设置 proxy。 ``` alias proxy='export all_proxy=socks5://127.0.0.1:1086' alias unproxy='unset all_proxy' ``` 其中`socks5://127.0.0.1:1086`是我的本机的正向代理地址。 如下是使用效果： ![](https://p.ipic.vip/jhy93x.jpg) 如图显示我们代理成功了，而且我们可以方便的在不想要代理的时候去掉代理。 ### 2019-12-09\[类库] 对于前端，我们经常需要将组件进行可视化的展示。在 Vue 中，我们通常会用 [docsify](https://github.com/docsifyjs/docsify) 或者 [vuepress](https://github.com/vuejs/vuepress) 等。而对于 react 比较有名的有 [storybook](https://github.com/storybookjs/storybook) 和 [docz](https://github.com/doczjs/docz)。 当然这并不是绝对的，比如 storybook 也在支持 vue 和 webcomponents。 ### 2019-12-06\[技能] 在分析 CPU、内存、磁盘等的性能指标时，有几种工具是高频出现的，如 top、vmstat、pidstat，这里稍微总结一下: CPU：top、vmstat、pidstat、sar、perf、jstack、jstat；内存：top、free、vmstat、cachetop、cachestat、sar、jmap；磁盘：top、iostat、vmstat、pidstat、du/df；网络：netstat、sar、dstat、tcpdump；应用：profiler、dump 分析。排查 Java 应用的线上异常或者分析应用代码瓶颈，可以使用阿里开源的 Arthas ，nodejs 应用可以使用 alinode ![](https://p.ipic.vip/mojctf.jpg) ### 2019-12-05\[好文] 如果你想做微前端，一定要能够回答出这 10 个问题。 1. 微应用的注册、异步加载和生命周期管理； 2. 微应用之间、主从之间的消息机制； 3. 微应用之间的安全隔离措施； 4. 微应用的框架无关、版本无关； 5. 微应用之间、主从之间的公共依赖的库、业务逻辑(utils)以及版本怎么管理； 6. 微应用独立调试、和主应用联调的方式，快速定位报错（发射问题）； 7. 微应用的发布流程； 8. 微应用打包优化问题； 9. 微应用专有云场景的出包方案； 10. 渐进式升级：用微应用方案平滑重构老项目。 今天推荐的这个文档，区别与别的微前端文章的点在于其更加靠近规范层面，而不是结合自己的业务场景做的探索。这篇文章来自于阿里团队。 ![](https://p.ipic.vip/uoc9pv.jpg) 文章地址： ### 2019-12-04\[工具] 相信大家使用 shell 的时候，会经常碰到忘记的 option，或者某一个用法记不清楚。遇到这种问题通常我们会用 man 或者命令提供的--help 查看用法。 这里给大家介绍另外一种工具`tldr`, 它是一个将 man page 进行简化，将大家常用的用法总结出来的工具。 安全也非常简单，只需要 `npm install -g`(前提是你必须安装 node)， 如果你不想安装也没有关系，它还提供了[web 版](https://tldr.ostera.io/)。另外你也可以参考这里[定制你的主题](https://github.com/tldr-pages/tldr-node-client#configuration) ![](https://p.ipic.vip/k7vcv6.jpg) 仓库地址： ### 2019-12-03\[技巧] 今天给大家介绍的是`Google高级搜索技巧`。我们经常使用搜索引擎搜索一些东西，不管是遇到问题想寻求解决方案也好，想学习一些新东西也好，掌握一定的搜索技巧是可以让你搜索的过程事半功倍，尤其是常用的技巧一定要记住。 ![](https://p.ipic.vip/ivt52q.jpg) ### 2019-12-02\[软件] 我们公司在使用的一个完全开源的堡垒机，是符合 4A 的专业运维审计系统。 ![](https://p.ipic.vip/nni6z9.jpg) ![](https://p.ipic.vip/hw7we2.jpg) ![](https://p.ipic.vip/8ffklu.jpg) 地址： ## 关注我 我重新整理了下自己的公众号，并且我还给它换了一个名字`脑洞前端`，它是一个帮助你打开大前端新世界大门的钥匙 🔑，在这里你可以听到新奇的观点，看到一些技术尝新，还会收到系统性总结和思考。 在这里我会尽量通过图的形式来阐述一些概念和逻辑，帮助大家快速理解，图解是我的目标。 之后我的文章会同步到微信公众号 `脑洞前端` ，你可以关注获取最新的文章，并和我进行交流。 另外你可以回复大前端进大前端微信交流群， 回复 leetcode 拉你进 leetcode 微信群，如果想加入 qq 群，请回复 qq。 ![](https://p.ipic.vip/bp35i7.jpg) --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://leetcode-solution-leetcode-pp.gitbook.io/mz-ri-yi-jm/2019-12.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.