Alien ZHOU
Alien ZHOU
之前在使用一些开源项目时，经常会看到在控制台输出项目大大的 LOGO。例如： - hexo minos 主题启动时在控制台里会显示「MINOS」文案 - fis3 启动时也会有显示「FIS」 添加这种大号「艺术字」可以达到「品牌露出」的效果，当然，也是程序员特有「情趣」的体现。 😄 但它们的实现方式无外乎把编排好的 Logo 通过 `console.log` 输出。这种方式问题在于它几乎没有任何复用能力，而且一些需要转义的情况还会导致字符串的可维护性极差。因此，我花了一个周末的时候，实现了一个易用的、可复用的控制台「艺术字」lib。这样，下次有新的需求，只需要把正常的文本传给它，它就可以帮你**自动编排与打印**。  ## 1. 目标 正如上节所说，目前一般项目的做法都是自定写一串特定的文本，例如 minos： ```JavaScript logger.info(`======================================= ███╗ ███╗ ██╗ ███╗ ██╗ ██████╗...
近期，随着 vue3 的各种曝光，[vite](https://github.com/vitejs/vite) 的热度上升，与 vite 类似的 [snowpack](https://github.com/pikapkg/snowpack) 的关注度也逐渐增加了。**目前（2020.06.18）snowpack 在 Github 上已经有了将近 1w stars。** snowpack 的代码很轻量，本文会从实现原理的角度介绍 snowpack 的特点。同时，带大家一起看看，作为一个以原生 JavaScript 模块化为核心的年轻的构建工具，它是如何实现“老牌”构建工具所提供的那些特性的。  ## 1. 初识 snowpack 近期，随着 vue3 的各种曝光，[vite](https://github.com/vitejs/vite) 的热度上升，与 vite 类似的...
> 《PWA学习与实践》系列文章已整理至[gitbook - PWA学习手册](https://alienzhou.gitbook.io/learning-pwa/)，文字内容已同步至[learning-pwa-ebook](https://github.com/alienzhou/learning-pwa-ebook)。转载请注明作者与出处。 本文是《PWA学习与实践》系列的第五篇文章。文中的代码都可以在[learning-pwa的push分支](https://github.com/alienzhou/learning-pwa/tree/push)上找到（`git clone`后注意切换到push分支）。 PWA作为时下最火热的技术概念之一，对提升Web应用的安全、性能和体验有着很大的意义，非常值得我们去了解与学习。对PWA感兴趣的朋友欢迎关注《PWA学习与实践》系列文章。 ## 1. 引言 在之前的几篇文章中，我和大家分享了如何使用manifest（以及meta标签）让你的Web App更加“native”；以及如何使用Service Worker来cache资源，加速Web App的访问速度，提供部分离线功能。在接下来的内容里，我们会探究PWA中的另一个重要功能——消息推送与提醒（Push & Notification）。这个能力让我们可以从服务端向用户推送各类消息并引导用户触发相应交互。  实际上，消息推送与提醒是两个功能——Push API 和 Notification API。为了大家能够更好理解其中的相关技术，我也会分为Push（推送消息）与Notification（展示提醒）两部分来介绍。在这一篇里，我们先来学习如何使用Push API进行消息推送。 > Push API 和 Notification API其实是两个独立的技术，完全可以分开使用；不过Push...
## 引言 近期在做一个 DNS 服务器切换的演练中发现我们在 NodeJS 中使用的 axios 以及默认的 `dns.lookup` 方法存在一些问题，会导致切换过程中的响应耗时从 ~80ms 上升至 ~3min（具体参见[node中请求超时的一些坑](https://acemood.github.io/2020/05/02/node%E4%B8%AD%E8%AF%B7%E6%B1%82%E8%B6%85%E6%97%B6%E7%9A%84%E4%B8%80%E4%BA%9B%E5%9D%91/)）。计划的部分解决方案是使用 lookup-dns-cache 来替换默认的 `dns.lookup` 方法。 ## 需要解答的疑问 如果使用 lookup-dns-cache 来替换默认的 `dns.lookup`，需要确认以下三个问题： 1. 使用该 package 后，DNS 查询与缓存的具体实现细节是怎样的？ 1....
> 《PWA学习与实践》系列文章已整理至[gitbook - PWA学习手册](https://alienzhou.gitbook.io/learning-pwa/)，文字内容已同步至[learning-pwa-ebook](https://github.com/alienzhou/learning-pwa-ebook)。转载请注明作者与出处。 本文是《PWA学习与实践》系列的第四篇。是我在测试其他demo时遇到的一个问题，算是一篇TroubleShooting。 PWA作为时下最火热的技术概念之一，对提升Web应用的安全、性能和体验有着很大的意义，非常值得我们去了解与学习。对PWA感兴趣的朋友欢迎关注《PWA学习与实践》系列文章。 ## 引言 在前一篇文章《让你的WebApp离线可用》中，我们使用Service Worker来做缓存与离线支持。是有一个重要的问题：**Service Worker必须要在HTTPS协议下才能运行（或者localhost）**。当然，对于一些只有前端资源（不涉及后端服务）的demo，我们完全可以将这些前端（静态资源）托管在一个HTTPS服务下，使得Service Worker可以使用。我选择了google的[FireBase](https://firebase.google.com/)来托管demo（其实github page也是个不错的选择）。 使用FireBase非常简单，只需要`firebase login` -->`firebase init`-->`firebase deploy`即可。但是在`firebase login`的过程中，遇到了一些问题。这篇文章主要总结了我在`firebase login`遇到的问题及解决方式： 1. 无法获取authorization code 2. ` Authentication Error: Your credentials are...
https://www.alienzhou.com/2020/03/02/a-strategic-guide-to-the-network-economy/  今天的许多管理者“只见树木不见森林”，仅仅关注技术变革，而忽视决定生死的经济规律。如果你无法理解网络经济（network economy），那么如何能够理解信息时代（例如互联网）的商业运作模式呢？ 记得读书时老师曾经推荐过一篇 Hal Varian 的微观经济学论文，文章很多，没有那种论文里面常见的“弯弯绕绕”的措辞，数学模型计算与推理简洁明了，看着就像是一份随堂作业一般的随笔之作。然而文章发在了经济学的重要期刊上，不得不让人佩服，大师就是大师。 而这本[《信息规则》](https://book.douban.com/subject/27179558/)不是网上那种充斥着博人眼球的小知识点的“伪学术”书，也不是那种在学校图书馆里的枯燥的教课书。书中没有晦涩的专业知识，艰深的模型公式，而是通过一个个现实案例来对书中提到的论点进行解释和印证。让即使不具备经济学基础的读者也能很好理解其中的内容。 --- 网络经济和以前的经济规律有区别么？ **有也没有。** 之所一说有是在于，书中提到，作者们经常听到别人抱怨说经济学在现今的经济活动中已没什么用了。之后他们了解到：“抱怨针对的是大多数在校学习的古典经济学，其核心是供给需求曲线和完全竞争市场，比如农产品市场”。显然，针对当今信息经济的一些经济学研究是与传统古典经济学存在差异的。而正是有这些差异，才需要这么一本书来进行分析与归纳。 而说它没有，也是因为信息经济并非是一种横空出世、超脱于所有经济规律的“神物”。如果你仔细分析，会发现仍然有许多经济规律在其中运行，只是现在的限制条件、前提变了。书中经常会指出一些经济活动或形式背后的本质逻辑，并提供一些历史上的先例来告诉你 —— 它并不是什么新鲜事。例如数字化拷贝带来的更便宜的生产和分销机制，在历史上的图书馆、打印机、复印机也一样导致了这些变革。又例如在阐述“锁定”的章节，作者说：“摩擦并没有消失，它们只是变换了形式”。 所以我们更应该辨证地看待网络经济：既要认识到它的独特之处，学习新时代的“玩法”；也要避免“神话”这种现象，因为它也是符合经济学规律，很多历史先例更我们提供了一些蓝本。 书中信息还是比较丰富的，整理了如下的思维导图以供参考： 
 > 这是一本非常真实的虚构小说，反应了今天 IT 部门几乎所有常见问题。。。 [《凤凰项目：一个 IT 运维的传奇故事》](https://book.douban.com/subject/34820436/)虽然是一本和 DevOps 相关的“技术书”，但主体内容其实是使用小说的形式呈现的。 故事的主人公比尔原本只是一个中型机管理部的技术经理，但公司面临 IT 项目危机，他临危受命，出任 IT 运维副总裁。别以为这是个美差，对于他来说，走出舒适圈，在经验不足的同时，面临的是几近崩溃的 IT 状况 💢： - 😵管理混论不堪，没人能说清楚大家都在做什么； - 🕳项目不断延期，永远没有能按时完成的需求； - 💣事故不断，几乎每天都要处理安全、财务等相关的 IT 事故； - 🧟♂️核心项目失败，“凤凰”延期两年多，耗资 2000 万美元，眼看着就要血本无归；...
## 引言 平时经常会逛 Github，除了一些 star 极高的大项目外，还会在 Github 上发现很多有意思的小项目。项目或是想法很有趣，或是有不错的技术点，读起来都让人有所收获。所以准备写一个「漫游Github」系列，不定期分享与解读在 Github 上偶遇的有趣项目。  好了下面进入正题。本期要介绍的仓库叫 [one-click.js](https://github.com/jordwalke/one-click.js) 。 ## 1. one-click.js 是什么 [one-click.js](https://github.com/jordwalke/one-click.js) 是个很有意思的库。Github 里是这么介绍它的：  我们知道，如果希望 CommonJS 的模块化代码能在浏览器中正常运行，通常都会需要构建/打包工具，例如 webpack、rollup 等。而 one-click.js 可以让你在不需要这些构建工具的同时，也可以在浏览器中正常运行基于 CommonJS...
✨仓库地址：[fe-performance-journey](https://github.com/alienzhou/fe-performance-journey) ✨  ## 前端需要性能优化么？ 性能优化一直以来都是前端工程领域中的一个重要部分。很多资料[1][2][3]表明，网站应用的性能优化对于提高用户留存、转化率等都有积极影响。可以理解为，提升你的网站性能，就是提升你的业务数据（甚至是业务收入）。 性能优化广义上包含前端优化和后端优化。后端优化的关注点更多的时候是在增加资源利用率、降低资源成本以及提高稳定性上。相较于后端，前端的性能优化会更直接与用户的体验挂钩。从用户体验侧来说，前端服务 5s 的加载时间优化缩减 80%(1s) 与后端服务 50ms 的响应优化缩减 80%(10ms) 相比，用户的体验提升会更大。因此很多时候，与体验相关的性能的瓶颈会出现在前端。  ## 如何学习前端性能优化？ 作为前端工程师，大家其实都具备一定的性能优化意识，同时也有自己的优化“武器库”，例如懒加载、资源合并、避免 reflow 等等。虽然大家对性能优化都有自己的思路，不过大多是分散在某几个点，较难形成一个完整的体系。业界也有很多优质的资料，例如[雅虎的性能优化 35 条](https://github.com/creeperyang/blog/issues/1)[4]，但是 **性能优化作为一个系统性工程**，大家想要系统性地去学习并不容易。 从用户开始访问你的网站应用，到最终它在上面浏览信息、操作交互，其间经历了非常多的环节，每个环节都有可能出现性能问题，同时也是我们实现性能提升机会。所以，前端性能优化会要求你从整体维度来分析系统，甚至是业务。 那么如何能够更有效地梳理与理解性能优化呢？回想到每每面试都会被问到：“从地址栏输入XXX到访问之间经历了什么？”其实我们也可以从这个视角来看待性能优化。 从访问开始，用户可能会经历类似「查询缓存 -> 发送请求 ->...
# 遇到了什么问题? 去年接触了公司内一个开发运行了两年多的项目，整体应用是基于 React 技术栈的，多个单页应用有构成了多页应用。可以理解为比较独立的子业务之间是 MPA 形式跳转，而子业务内部则是 SPA 形式。 项目的构建使用了 webpack，发现存在较大问题： - 在生产环境上线编译大致需要 13 min+； - 本地开发环境下，代码改动后的热更新（增量编译）需要大概 10～20s 的时间，使得开发体验很差。  相信这些问题在很多上线迭代了很长时间的、使用了 webpack 的团队中都会遇到，所以把自己的优化实践经历写出来，和大家交流下。我在优化的时候也参考了许多网络上介绍的优化手段，当然，有些具有不错效果，有些可能对我们来说不适用。这并不是一篇罗列各种 webpack 优化技巧的文章，除了优化实践，还会有一些期间的反思。 # 如何分析性能问题? 优化前自然需要找到问题点。 首先，你可以使用一些开源工具来分析。针对 webpack...