Ran Luo
Ran Luo
Hi， 大家好，很高兴来参加这次平安云主办的「我与 GitHub 的故事」的分享会，先简单的自我介绍下，我叫罗冉，GitHub 账号 @jocs，是一名前端工程师，之前在饿了么大前端，目前在石墨文档任职，工作之余，开发一款叫做 marktext 的 markdown 编辑器。 今天的分享主要分为以下三个部分： **汲取养分，茁壮成长** **参与开源社区，贡献微博之力** **主导开源项目的得与失** ### 汲取养分、茁壮成长 相信很多 GitHub 新人都遇到过这样的问题： **开源就是奉献和付出，但是我作为 GitHub 新人，我几乎什么都不会，怎么参与到开源呢？** 我认为上面的话，即对又不完全对，无论是普通开发者还是技术大牛在其职业生涯早期都有处于新手的阶段，在这个阶段我们参与到开源更多的是汲取一些养分，让我们的技术快速成长，作为一名前端工程师，我举一个自己的例子。我本科学习的是生物科学，在我 26 岁之前我几乎没有写过一行代码，后来我转行做程序员，在刚进入到新公司时，我几乎什么都不会，一切都需要从头学起，公司项目是使用 Angular.js 开发，但是当时我连 Angular.js 是什么都不知道，只会一些简单的 JavaScript...
> 文章发布在[饿了么大前端专栏](https://zhuanlan.zhihu.com/p/30669007) Hot Module Replacement（以下简称 HMR）是 Webpack 发展至今引入的最令人兴奋的特性之一 ，当你对代码进行修改并保存后，Webpack 将对代码重新打包，并将新的模块发送到浏览器端，浏览器通过新的模块替换老的模块，这样在不刷新浏览器的前提下就能够对应用进行更新。例如，在开发 Web 页面过程中，当你点击按钮，出现一个弹窗的时候，发现弹窗标题没有对齐，这时候你修改 CSS 样式，然后保存，在浏览器没有刷新的前提下，标题样式发生了改变。感觉就像在 Chrome 的开发者工具中直接修改元素样式一样。 本篇文章不是告诉你怎么使用 HMR，如果你对 HMR 依然感觉到陌生，建议先阅读[官网 HMR 指南](https://doc.webpack-china.org/guides/hot-module-replacement/#-hmr)，上面有 HMR 最简单的用例，我会等着你回来的。 #### 为什么需要 HMR 在 Webpack HMR...
# JavaScript Errors 指南 文章翻译自：https://github.com/mknichel/javascript-errors 在README文件中包含了这么多年我对JavaScript errors的学习和理解，包括把错误报告给服务器、在众多bug中根据错误信息追溯产生错误的原因，这些都使得处理JavaScript 错误变得困难。浏览器厂商在处理JavaScript错误方面也有所改进，但是保证应用程序能够稳健地处理JavaScript错误仍然有提升的空间。 关于本手册测试用例可以从下面这个网站找到：https://mknichel.github.io/javascript-errors/ **目录** - [Introduction](#introduction) - [Anatomy of a JavaScript Error](#anatomy-of-a-javascript-error) - [Producing a JavaScript Error](#producing-a-javascript-error) - [Error Messages](#error-messages) - [Stack Trace Format](#stack-trace-format)...
内存管理速成手册
> [原文地址](https://hacks.mozilla.org/2017/06/a-crash-course-in-memory-management/) > > 由于个人能力知识有限，翻译过程中难免有纰漏和错误，还望指正 *这是本系列文章中的第一篇：* 1. *内存管理速成手册* 2. *通过漫画形式来解释 ArrayBuffers 和 SharedArrayBuffers* 3. *使用 Atomics 来在 SharedArrayBuffers 中避免竞用条件* 在弄懂 ArrayBuffer 和 SharedArrayBuffer 为什么添加到 JavaScript 之前，你首先需要了解一些关于内存管理的知识。你可以把机器中的内存比喻成一组箱子，就像我把内存想象成办公室内部的信箱一样，或者是为学龄前儿童准备的用于存储杂物的小房间，如果你想给某位孩子准备一些礼物，你可以将物品放到某个箱子里。 [ 本篇文章将给读者阐述一种自动化生成上图骨架页面的方案，通过该方案，可以将自动化生成骨架页面与你的开发流程完美结合。 #### 为什么我们需要骨架页面 首先我们将该问题分解成两个子问题，第一我们为什么需要骨架页面。 - 正如上文已经提及，骨架页面是在页面真正解析和应用启动之前给用户展示页面的 CSS 样式和页面布局，并通过骨架页面的明暗变化，告知用户页面正在努力加载中，让用户感知页面似乎加载得比以前快了。当应用启动、数据获取后，通过真实数据渲染的页面替换骨架页面。 - 在骨架页面出现之前，很多应用在真实数据获取之前，都是采用 Loading 图标的形式告诉用户数据正在加载，请等待，但是用户此时无法感知即将呈现的页面，也无法确定等待的时长，千篇一律的 Loading 图标已经让用户产生了审美疲劳，长时间的等待促使用户产生等待焦虑，根据 Google Research 的研究显示，53% 的用户在等待加载 3s 后，选择关闭 Web...
## 聊聊 Git 「改变历史」 > 非常感谢你为 [mint-ui](https://github.com/ElemeFE/mint-ui) 修复了这个 issue。不过你的 commit 信息能修改成如下格式吗？「issue 666: Any message about this issue」。 > > 当我兴高采烈向 [Element](https://github.com/ElemeFE/element) 提交 PR 的时候，维护者告诉我你能把你多个 commits 合并成一个 commit 吗？我们需要保持提交历史清晰明了。 > >...
[原文地址](https://hacks.mozilla.org/2017/06/avoiding-race-conditions-in-sharedarraybuffers-with-atomics/) 这是本系列三篇文章中的第三篇： 1. *内存管理速成手册* 2. *通过漫画形式来解释 ArrayBuffers 和 SharedArrayBuffers* 3. *使用 Atomics 来在 SharedArrayBuffers 中避免竞用条件* 在上一篇[文章](https://hacks.mozilla.org/2017/06/a-cartoon-intro-to-arraybuffers-and-sharedarraybuffers/)中，我已经提到过 SharedArrayBuffers 如何导致竞用条件。这使得在使用 SharedArrayBuffers时变得困难，因此我们并不希望应用开发者直接使用 SharedArrayBuffers。 但是对于拥有其他语言多线程开发经验的库开发者而言，他们可以使用这些底层的 APIs开发出更高级的工具。应用开发者就能够使用这些工具而不是直接使用 SharedArrayBuffers 或者 Atomics。 [![Layer diagram showing SharedArrayBuffer +...
又是十点钟才离开公司，拖着疲惫的驱壳，挪着步子，走进地铁站，上海真的很多人，晚上十点多了，地铁上还是很挤，我习惯的拿出了手机，看一下微信群，放松下加班后劳累的身体。 打开了小区业主群，一个叫做「九哥哥」的邻居在小区群里竟然提了一个问题，准确的说是一道算法题： > 借此地问个问题，各位ITer看此题是否有解，有一个队列结构(FIFO)，如何对里面的元素进行从小到大排序，元素可以多次进出，而且允许有一个额外空间能暂存一个元素。 哎，本来想放松下心情的，结果又被这道算法题勾起了兴趣。。。脑子里迅速浮现了常见的排序算法：冒泡排序、快速排序、插入排序、归并排序。。。 果然，群里马上就炸开锅了（感觉我们业主群整个就是一个 IT 交流互助群了），迅速有一位「小毛」的业主回复了。 > 小毛：看上去是面试题呀，不考虑并发，不考虑性能， 用冒泡排序嘛 「unix」的业主跟着回复道： > Unix：[奸笑]冒泡啊。。不是有个空间能暂存一个元素的么。。 想想也就知道了，队列（FIFO）只提供了 pop(从队列末端推出元素)和 unshift(从队列入口推入元素)，而且只有一个额外的空间用于暂存元素，因此根本就没法交换两个来冒泡排序。 后面果然有人反驳道了。 > 秋风哥哥：@ unix 冒泡搞不了啊 > > 九哥哥（提问者）：肯定不是冒泡撒[捂脸] > > Unix：[捂脸]搞不了。。刚看到是队列。。 这时候，作为群主的「小毛」不服气了。怒怼众人。 >...
### 一、JavaScript异步编程背景 从去年ES2015发布至今，已经过去了一年多，ES2015发布的新的语言特性中最为流行的也就莫过于Promise了，Promise使得如今JavaScript异步编程如此轻松惬意，甚至慢慢遗忘了曾经那不堪回首的痛楚。其实从JavaScript诞生，JavaScript中的异步编程就已经出现，例如点击鼠标、敲击键盘这些事件的处理函数都是异步的，时间到了2009年，Node.js横空出世，在整个Node.js的实现中，将回调模式的异步编程机制发挥的淋漓尽致，Node的流行也是的越来越多的JavaScripter开始了异步编程，但是回调模式的副作用也慢慢展现在人们眼前，错误处理不够优雅以及嵌套回调带来的“回调地狱”。这些副作用使得人们从回调模式的温柔乡中慢慢清醒过来，开始寻找更为优雅的异步编程模式，_路漫漫其修远兮、吾将上下而求索_。时间到了2015年，Promise拯救那些苦苦探索的先驱。行使它历史使命的时代似乎已经到来。 每个事物的诞生有他的历史使命，更有其历史成因，促进其被那些探索的先驱们所发现。了解nodejs或者熟悉浏览器的人都知道，JavaScript引擎是基于事件循环或单线程这两个特性的。更为甚者在浏览器中，更新UI(也就是浏览器重绘、重拍页面布局)和执行JavaScript代码也在一个单线程中，可想而知，一个线程就相当于只有一条马路，如果一辆马车抛锚在路上了阻塞了马路，那么别的马车也就拥堵在了那儿，这个单线程容易被阻塞是一个道理，单线程也只能允许某一时间点只能够执行一段代码。同时，JavaScript没有想它的哥哥姐姐们那么财大气粗，像Java或者C++，一个线程不够，那么再加一个线程，这样就能够同时执行多段代码了，但是这样就会带来的隐患就是状态不容易维护，JavaScript选择了单线程非阻塞式的方式，也就是异步编程的方式，就像上面的马车抛锚在了路上，那么把马车推到路边的维修站，让其他马车先过去，等马车修好了再回到马路上继续行驶，这就是单线程非阻塞方式。正如Promise的工作方式一样，通过Promise去向服务器发起一个请求，毕竟请求有网络开销，不可能马上就返回请求结果的，这个时候Promise就处于pending状态，但是其并不会阻塞其他代码的执行，当请求返回时，修改Promise状态为fulfilled或者rejected（失败请求）。同时执行绑定到这两个状态上面的“处理函数”。这就是异步编程的模式，也就是Promise兢兢业业的工作方式，在下面一个部分将详细讨论Promise。 ### 二、Promise基础 怎么一句话解释Promise呢？**Promise可以代指那些尚未完成的一些操作，但是其在未来的某个时间会返回某一特定的结果。** 当创建一个Promise实例后，其代表一个未知的值，在将来的某个时间会返回一个成功的返回值，或者失败的返回值，我们可以为这些返回值添加处理函数，当值返回时，处理函数被调用。Promise总是处于下面三种状态之一： - _pending_： Promise的初始状态，也就是未被fulfilled或者rejected的状态。 - _fulfilled_： 意味着promise代指的操作已经成功完成。 - _rejected_：意味着promise代指的操作由于某些原因失败。 一个处于pending状态的promise可能由于某个成功返回值而发展为fulfilled状态，也有可能因为某些错误而进入rejected状态，无论是进入fulfilled状态或者rejected状态，绑定到这两种状态上面的处理函数就会被执行。并且进入fulfilled或者rejected状态也就不能再返回pending状态了。  ### 三、边学边写 上面说了那么多，其实都是铺垫。接下来我们就开始实现自己的Promise对象。go go go！！！ ##### 第一步：Promise构造函数...
这是本系列三篇文章中的第二篇： 1. *内存管理速成手册* 2. *通过漫画形式来解释 ArrayBuffers 和 SharedArrayBuffers* 3. *使用 Atomics 来在 SharedArrayBuffers 中避免竞用条件* 在上一篇[文章中](https://github.com/Jocs/jocs.github.io/issues/16)，我解释了一些自动内存管理的语言比如 JavaScript 怎么管理内存。同时我也解释了例如 C 语言，如何进行手动内存管理。那么这和我们将要讨论的 [ArrayBuffers](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) 和 [SharedArrayBuffers](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer) 有什么关系呢？这是因为 ArrayBuffer 也使得你能够手动处理数据，尽管这是在 JavaScript 中，一种具有自动内存管理的语言。那么，你为什么想要进行手动处理呢？正如上一篇文章所描述，在使用自动内存管理上有一个权衡。自动内存管理使得开发者开发程序变得相对容易，但是它也带来了一些困扰。在某些场景中，自动内存管理可能会带来性能上的问题。 [![A balancing scale...