loveky的流水账

大家对命令菜单(Command Menu)应该都不陌生。目前主流的编辑器中都内置了对该功能的支持。在 Sublime Text 和 Visual Studio Code 中你都可以通过快捷键 Ctrl + Shift + P 呼出命令菜单(在 Mac 上是 Cmd + Shift + P)。 在呼出的菜单中输入关键字选择自己需要的命令(支持模糊搜索哦),按回车即可执行命令。极大的提高了效率。 举个例子,以下的操作是为文件设置 JavaScript 的语法高亮: 很方便吧。 如果你已经习惯了这种操作方式,那么今天要告诉你一个好消息。Chrome 开发者工具现在也支持命令菜单了!激活的方式还是 Ctrl + Shift + P。 激活后,长这个样子: 熟悉的配方,熟悉的味道。有木有! 滚动菜单,查看支持的命令,基本涵盖了我们日常开发用到的所有功能。 举几个实用的小例子吧(这些例子不同命令菜单一样可以实现,但命令菜单可以极大的提高效率)。 1. 搜索所有资源文件 激活命令菜单,输入 search,选择 Search all files,回车。在弹出的输入框中输入关键字就可以在所有页面引入的资源文件中搜索该关键字了。还支持正则表达式哦。 2. 禁用/开启页面 JavaScript 激活命令菜单,输入 js,选择 Disable JavaScript。再次选择,即可开启。 3. 隐藏 HTML 中的注释 激活命令菜单,输入 comment,选择 Hide HTML Comments。 更多快捷功能,自己去发现吧!
图片来源 Node.js 中的流有着难以使用,更难以理解的名声。现在我有一个好消息告诉你:事情已经不再是这样了。 很长时间以来,开发人员创造了许许多多的软件包为的就是可以更简单的使用流。但是在本文中,我会把重点放在原生的 Node.js 流 API上。 “流是 Node 中最棒的,同时也是最被误解的想法。” — Dominic Tarr 流到底是什么呢? 流是数据的集合 —— 就像数组或字符串一样。区别在于流中的数据可能不会立刻就全部可用,并且你无需一次性的把这些数据全部放入内存。这使得流在操作大量数据或是数据从外部来源逐段发送过来的时候变得非常有用。 然而,流的作用并不仅限于操作大量数据。它还带给我们组合代码的能力。就像我们可以通过管道连接几个简单的 Linux 命令以组合出强大的功能一样,我们可以利用流在 Node 中做同样的事。 Linux 命令的组合性 const grep = ... // 一个 grep 命令输出的 stream const wc = ... // 一个 wc 命令输入的 stream grep.pipe(wc) Node 中许多内建的模块都实现了流接口: 截屏来自于我的 Pluralsight 课程 —— 高级 Node.js 上边的列表中有一些 Node.js 原生的对象,这些对象也是可以读写的流。这些对象中的一部分是既可读、又可写的流,例如 TCP sockets,zlib 以及 crypto。 需要注意的是这些对象是紧密关联的。虽然一个 HTTP 响应在客户端是一个可读流,但在服务器端它却是一个可写流。这是因为在 HTTP 的情况中,我们基本上是从一个对象(http.IncomingMessage)读取数据,向另一个对象写入数据(http.ServerResponse)。 还需要注意的是 stdio 流(stdin,stdout,stderr)在子进程中有着与父进程中相反的类型。这使得在子进程中从父进程的 stdio 流中读取或写入数据变得非常简单。 ... Read More
前几天有小伙伴来求救说页面上有一个 input 框,随着用户不断输入内容,页面响应会越来越慢直到完全失去响应。 简单沟通过后得知具体场景是这样的: input 框中允许用户输入一连串逗号分隔的商品id 在用户输入的过程中实时检测用户输入的内容是否符合规则,若不符合则给出提示信息 小伙伴的解决方案也很直接: 给 input 框绑定 keyup 事件。 在 keyup 事件回调函数中通过正则表达式判断是否符合规则,决定是否展示提示信息。 经过反复验证得到如下规律: 用户在输入商品 id 的过程中(连续输入多个数字)不会卡顿 当用户输入逗号时,出现卡顿。随着输入商品 id 的数量增加,卡顿越来越明显,直至浏览器失去响应。 于是打开 Chrome 开发者工具,选择 Performance (原 Timeline) 标签页。将整个过程记录下来,得到如下时间线: 其中黄色宽条表示 JavaScript 主线程的执行情况。连续的黄条越长,表示单次 JavaScript 运行的时间越长。也就意味着 UI 失去响应的时间越长。这一点从截图中的蓝色框中也可以得到印证。蓝色框中的红色长条表示浏览器一帧(一次渲染)所需要的时间。 那么到底是 JavaScript 中的哪些代码占中了这么长 CPU 时间呢?我们在底部的选项卡中选中 Bottom-Up ,按 Total Time 降序排列。得到如下结果: 可以看出,72.% 的 CPU 时间用在了一条正则表达式上。你肯定想到了,这就是小伙伴用来检查用户输入是否合法的正则表达式。 完整的正则表达式是这样的: /^\s*((\d+(\,|,)\d+)*|(\d+))\s*$/ 接着去 regex101 上测试一下,测试数据如下,由 10 个商品 ID 组成的字符串: 123456789,123456789,123456789,123456789,123456789,123456789,123456789,123456789,123456789,123456789 执行结果如下: ... Read More
在掘金翻译计划里翻译的一篇文章。感觉对自己挺有启发的。分享给大家。 原文地址:Why TypeScript Is Growing More Popular 原文作者:Mary Branscombe 校对者:Aladdin-ADD Germxu 为何 TypeScript 这么流行呢?许多主流的开发框架依赖于它,它还能提高开发者在不断变化的 JavaScript 世界中的生产力。 在最近的 Stack Overflow 开发者调查以及年度 RedMonk 编程语言排名中都显示 TypeScript —— 由微软发起的结合了编译高级 JavaScript 特性与静态类型检查及工具的开源项目 —— 正在达到新的人气高度。通过为 JavaScript 提供最基本的检查语法,TypeScript 允许开发者对他们的代码进行类型检查,这可以暴露 bug 并改善大型 JavaScript 代码库的结构和文档。 参与了 Stack Overflow 调查的开发者中有 9.5% 的人正在使用 TypeScript,这使得 TypeScript 成为了第九流行的编程语言,排名在 Ruby 之前,用户量是 Perl 的两倍。此次 Stack Overflow 调查中的受访者来自不同领域,使用最广泛的两种语言是 JavaScript 和 SQL,这说明此次调查并非只针对前端开发。事实上,TypeScript 程序员出现在了参与 Stack Overflow 调查的所有 4 种工作角色中:web 开发者、桌面开发者、系统管理员与 DevOps 以及数据科学家。 RedMonk 的排名将 Stack Overflow 的数据与 GitHub 上的 pull request 结合起来试图理解开发者的想法以及他们正在使用什么。TypeScript 同样受到了开发者的欢迎,排名从第 26 位上升到了第 17 位。其中一部分原因是 TypeScript 在 Stack Overflow 上关注度的提升,但主要还是因为在 GitHub 上参与的开发者在不断增多。 ... Read More

原文地址:http://jlongster.com/How-I-Became-Better-Programmer

译者注:本文作者 James Long,前 Mozilla 工程师,NodeJS, ReactJS 社区活跃开发者。NodeJS 著名模板引擎 Nunjucks 作者,JavaScript 格式化工具 Prettier 作者。在 Mozilla 工作 6 年后离开,年仅 32 岁自己创业开公司。其人生经历值得大部分程序员学习。

在React Conf上有几位朋友咨询我如何成为一名更优秀的程序员。由于某种原因,人们认为我是一个值得倾听的高级程序员。所以我想有必要把我这些年编程路上的『心路历程』写下来。

关于我的一些详细信息:我现年32岁,有10年以上扎实的工作经验。直到最近几年我才对自己所做的工作充满信心。即使是现在,我也在不断质疑自己。问题在于,这种质疑并不会消失,所以你要做的就是无视它,不断的解决问题,不断的积累经验。

首先我要说明的是以下提到的只是一些帮你提升技能的小贴士。最终你还是需要找到一条最适合你自己的路。这些只是我发现对我有帮助的点。

... Read More