在 cnb.cool 的任务集功能区中，我们使用了 bun 作为服务端，负责任务集视图的相关读写能力，积累了一定的经验。整体来说 bun 的写法和 Nodejs 几乎一致，但对于“提供 gRPC 服务”相关的知识，现网所能找到的资料较少，因此专门记录下来。

任何的前端组件库，无论是业界内有名的 tdesign，ant-design 还是 element-ui 也好，它们都有着自己的一系列图标。经过观察发现，这些图标都是在组件库发布的时候就已经基本稳定了，鲜有调整，所以可以一直存放于组件库的 git 仓库中。

说到 Vue 的组件库，大家肯定早已耳熟能详，随随便便就能列举出一大堆。那为什么还需要自己去搭建呢？结合自身的经验，在业务中往往需要高度定制化的组件，无论是 UI 和交互，可能都会跟市面上现有的组件库有着较大的出入。这个时候如果是基于现有的组件库进行修改的话，其理解成本和修改成本也不小，甚至比自己搭建一套...

在项目初期的时候，我们是根据第三方提供的 d.ts 文件，手动地去撰写 JS SDK。由于这个 d.ts 经常会变动，我们需要不停地同步 JS SDK；同时由于我们的项目是多人维护的，手写的 JS SDK 难免会有许多的冲突，这些问题对于研发效率来说都是不利的。

一直觉得 Codepen 的在线代码预览系统很神奇，能够所见即所得地实时展示代码的运行效果，无论是代码演示，还是测试功能，都是非常方便快捷的存在。刚好最近手头有业务需要用到类似 Codepen 的能力，经过一番调研之后开发了一个具有基本的在线运行代码能力的 demo 出来。

apng 格式的动图是我第一次使用到的，我对它的了解仅仅局限于“会动的png图片”。后来几经搜索，总算是把 apng 的一些知识点给补全了。由于网上关于 apng 的资料非常多，因此就不在这里对 apng 进行过多的介绍了。

我们知道，在计算机中数据其实都是以二进制的形式所储存的，而位运算符则可以对二进制数据进行操作。举个简单的例子，给定两个二进制数据（其中 0b 是二进制数据的前缀）：

在 Chrome 浏览器种，我们可以使用 window.navigator.connection API 中的 downlink 属性来获取实时网速：

在最近的业务中，接到了一个需要处理约十万条数据的需求。这些数据都以字符串的形式给到，并且处理它们的步骤是异步且耗时的（平均处理一条数据需要 25s 的时间）。如果以串行的方式实现，其耗时是相当长的：

想不通为啥之前维护项目的同学能够忍受这么难以维护的代码……既然现在这个锅被我拿下了，怎么着也不能容忍如此丑陋的代码继续存在着，必须把它优化一下。

统一资源定位符，缩写为URL，是对网络资源(网页、图像、文件)的引用。URL指定资源位置和检索资源的机制(http、ftp、mailto)。

软件应用程序在计算机的主存储器中运行，我们称之为随机存取存储器(RAM)。JavaScript，尤其是 NodeJS （服务端 JS）允许我们为终端用户编写从小型到大型的软件项目。处理程序的内存总是一个棘手的问题，因为糟糕的实现可能会阻塞在给定服务器或系统上运行的所有其他应用程序。C 和 C++ 程序员确实关心内存管理，因为隐藏...

在搜索领域，早已出现了“查找相似图片/相似商品”的相关功能，如 Google 搜图，百度搜图，淘宝的拍照搜商品等。要实现类似的计算图片相似度的功能，除了使用听起来高大上的“人工智能”以外，其实通过 js 和几种简单的算法，也能八九不离十地实现类似的效果。

随着 Vue 3.0 Pre Alpha 版本的公布，我们得以一窥其源码的实现。Vue 最巧妙的特性之一是其响应式系统，而我们也能够在仓库的 packages/reactivity 模块下找到对应的实现。虽然源码的代码量不多，网上的分析文章也有一堆，但是要想清晰地理解响应式原理的具体实现过程，还是挺费脑筋的事情。经过一天的研究和整理，我把...

最近在做 Node 服务端需求的时候，遇到了几次服务端报错的问题。打 log 发现均是一些 Error，但是它们都没法很好地透传给前端浏览器，出现问题只能查看服务端机器的日志，调试起来非常不方便。思考了一下，服务端的内容都是通过 JSON.stringify() 处理，然后设置 Content-type: text/json 的响应头以后再传给前端的，如...

在使用 GraphQL （以下简称 gql）的前端项目中，往往需要等待后台同学定义好 Schema 并架设好 Playground 以后才能进行联调。如果后台同学阻塞了，前端只能被动等待。如果对于 gql 项目来说也能够和 REST 一样有一套 mock 方案就好了。经过一系列实践，我选择了 mocker-api 加 Apollo 的方案来实现。

虽然 Vue 3.0 尚未发布，但是其处于 RFC 阶段的 Composition API 已经可以通过插件 @vue/composition-api 进行体验了。接下来的内容我将以构建一个 TODO LIST 应用来体验 Composition API 的用法。

上周发布了一款名为 Smartour 的工具，是完全采用 TypeScript （以下简称 ts）来开发的。抛开以前做业务的时候的不完全使用，这次实践可以算是我第一次真正意义上的使用 ts。由于写法上的不同，以及对不熟悉事物的新鲜感，在这次项目开发的过程中着实有着许多感悟，于是打算写篇小东西好好记录下来。

在遇到网页内容有着较大调整的时候，往往需要一个导览功能去告诉用户，某某功能已经调整到另外一个位置。比较常规的办法是添加一个蒙层，高亮显示被调整的区域，然后通过文字介绍去完成引导。我们把这个功能称为“导览”，而 Smartour 则把这个导览的功能抽离出来，提供了一个开箱即用的解决方案。

在原生开发小程序的过程中，发现有多个页面都使用了几乎完全一样的逻辑。由于小程序官方并没有提供 Mixins 这种代码复用机制，所以只能采用非常不优雅的复制粘贴的方式去“复用”代码。随着功能越来越复杂，靠复制粘贴来维护代码显然不科学，于是便寻思着如何在小程序里面实现 Mixins。

之前在使用 Github issues 搭建博客平台的时候，研究过一番如何取得 Github 授权并调用 API 的办法。后来选择了较简单的账号密码和 Token 的方法。但是有读者反馈这样的操作依然稍显麻烦，且在第三方的页面输入账号密码总感觉不安全。后来经过研究，总算找到了 Github App 这种更为优雅的办法。

对于爱写东西的人来说，挑一个合适的博客平台是非常重要的。而作为一个 Web 开发者，我们肯定都希望能够拥有一个高度定制化的博客平台，用以展示我们独一无二的个性以及记录长久以来的学习工作等。与此同时，我们也希望这个平台可以让我们方便地发布内容，提供完整的点赞、留言等操作。在经历过 Hexo，Wordpress，自行搭...

最近基于 Github API 开发了一款图床 Chrome 插件 Picee，现在已经开源并上架 Chrome 应用商店。当中的过程涉及到一些有趣的知识点，故将其记录下来。

在做 Vue 相关项目的时候，总会遇到因为页面刷新导致 Store 内容丢失的情况。复杂的项目往往涉及大量的状态需要管理，如果仅因为一次刷新就需要全部重新获取，代价也未免太大了。

最近折腾 Websocket，打算开发一个聊天室应用练练手。在应用开发的过程中发现可以插入 emoji ，粘贴图片的富文本输入框其实蕴含着许多有趣的知识，于是便打算记录下来和大家分享。

首先是工作上面的变化。自16年毕业以后就在招联消费金融有限公司上班，一直到今年的五月份。在招联的期间，有幸得到老大的赏识，也学到了非常多的东西，积累了不少项目经验，认识了许多优秀的人。为了见识一下更大的世界和谋求更高的薪水，经过慎重的决定之后来到了腾讯，好好感受一番国内顶级互联网公司的打法。

说起编译原理，印象往往只停留在本科时那些枯燥的课程和晦涩的概念。作为前端开发者，编译原理似乎离我们很远，对它的理解很可能仅仅局限于“抽象语法树（AST）”。但这仅仅是个开头而已。编译原理的使用，甚至能让我们利用JS直接写一个能运行JS代码的解释器。

在近期使用CocosCreator（以下简称CC）开发HTML5游戏的工作中，发现公司许多游戏都有着相同的元素，比如倒计时条、结算页面等等。在早期的开发中，我们并没有摸索到复用的办法，只能在不同的游戏项目中从头开始写。随着需求越来越多，重复造轮子肯定不是一个好办法，那么对于CC项目来说，能不能把这些可复用的游戏元素作...

前端模块化成为了主流的今天，离不开各种打包工具的贡献。社区里面对于webpack，rollup以及后起之秀parcel的介绍层出不穷，对于它们各自的使用配置分析也是汗牛充栋。为了避免成为一位“配置工程师”，我们需要来了解一下打包工具的运行原理，只有把核心原理搞明白了，在工具的使用上才能更加得心应手。

作为与用户联系最为密切的前端开发者，用户体验是最值得关注的问题。关于页面loading状态的展示，主流的主要有loading图和进度条两种。除此之外，越来越多的APP采用了“骨架屏”的方式去展示未加载内容，给予了用户焕然一新的体验。随着SPA在前端界的逐渐流行，首屏加载的问题也在困扰着开发者们。那么有没有一个办法，也...