hijiangtao

hijiangtao

Yet another web developer.

Posts by Tags

2016

2017

2018

2019

2020

2021

2022

2023

AI

2018 Google 移动技术最新进展速览

这周在 Google 上海办公室参加了一场分享会，他们的华人工程师向与会人员同步了 Google 在移动技术上的最新动态。我尝试从一名前端开发者的视角总结了这次分享会的内容，如有理解不准确的地方欢迎指出。

AMD

JavaScript 模块化方案总结

本文包含两部分，第一部分通过简明的描述介绍什么是 CommonJS、AMD、CMD、UMD、ES Module 以及它们的常见用法，第二部分则根据实际问题指出在正常的 webpack 构建过程中该如何指定打包配置中的模块化参数。

AMP

2018 Google 移动技术最新进展速览

这周在 Google 上海办公室参加了一场分享会，他们的华人工程师向与会人员同步了 Google 在移动技术上的最新动态。我尝试从一名前端开发者的视角总结了这次分享会的内容，如有理解不准确的地方欢迎指出。

Algebraic

Android

2018 Google 移动技术最新进展速览

这周在 Google 上海办公室参加了一场分享会，他们的华人工程师向与会人员同步了 Google 在移动技术上的最新动态。我尝试从一名前端开发者的视角总结了这次分享会的内容，如有理解不准确的地方欢迎指出。

Angular

TypeScript 装饰器介绍与示例教程

如果你使用过 Angular，那么在日常的开发过程中，你已经大量使用过由 Angular 官方提供的各类由装饰器封装的特性了，比如 @Component 以及 @ViewChild 等等。即便不了解其实现原理，这也不影响我们熟练的通过它来实现各种需求。但如果我们深入了解隐藏在其背后的装饰器，便能将这个黑盒变成我们...

Coding with Angular - Tips and Tricks

当你第一次从其他框架切换到 Angular 是否会有些迷茫，在感叹框架大而全的同时却对其中很多概念不尽了解？近期，为了给不断加入团队的新同学营造一个快速上手的环境，于是把团队的项目代码仔细阅读了一遍，从中挑出了一些在大家提交代码中反复会「犯的错误」，并总结成一系列值得 Angular 新手注意和学习的一些最佳实践。

Application

AsyncSubject

BIT

Babel

BehaviorSubject

Blob

CA

网络安全科普：详解 HTTPS 与 TLS

作为普通用户，当我们上网冲浪时，是否想过为什么越来越多的域名输入时是 HTTPS 开头而非 HTTP 么？HTTPS 相比 HTTP 多出来的 S 到底多了些什么？TLS 和 SSL 又是什么，握手机制是如何进行的？其在七层协议中处于什么位置，与 HTTPS 相关的概念比如 CA 证书、Keyless、DTLS、...

网络安全科普：奇妙的 SSL/TLS 证书（进阶篇）

如果某个网站受 SSL 证书保护，其相应的 URL 中会显示 HTTPS（超文本传输安全协议）。单击浏览器地址栏的小绿锁，即可查看证书中的详细信息。但你是否曾好奇过一本证书是如何诞生的，以及 HTTPS 背后的 SSL/TLS 是如何在工作过程中发挥功效以保证通信安全的，什么是 CA、PCA，什么又是证书链和 X...

网络安全科普：奇妙的 SSL/TLS 证书（基础篇）

如果某个网站受 SSL 证书保护，其相应的 URL 中会显示 HTTPS（超文本传输安全协议）。单击浏览器地址栏的小绿锁，即可查看证书中的详细信息。但你是否曾好奇过一本证书是如何诞生的，以及 HTTPS 背后的 SSL/TLS 是如何在工作过程中发挥功效以保证通信安全的，什么是 CA、PCA，什么又是证书链和 X...

CHANGELOG

前端开发中的流程自动化与提效实践

随着前端的发展，越来越多的工具库、方法被用在日常研发流程中，这大大提升了业务开发的效率，而随着各类自动化流程的建设，开发同学也不再需要关注到每一个细节。前段时间项目阶段性交付，在推进的过程中也做了不少尝试，虽然从长期看，这类工作最后可能都该收敛到基础设施部门或者标准的自动化流程中去，但并不妨碍我通过实践来落实一些...

CMD

JavaScript 模块化方案总结

本文包含两部分，第一部分通过简明的描述介绍什么是 CommonJS、AMD、CMD、UMD、ES Module 以及它们的常见用法，第二部分则根据实际问题指出在正常的 webpack 构建过程中该如何指定打包配置中的模块化参数。

CORS

前端跨域请求解决方案汇总

同源策略限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的关键的安全机制。但是有时候跨域请求资源是合理的需求，本文尝试从多篇文章中汇总至今存在的所有跨域请求解决方案。

CR

CSR

网络安全科普：奇妙的 SSL/TLS 证书（进阶篇）

如果某个网站受 SSL 证书保护，其相应的 URL 中会显示 HTTPS（超文本传输安全协议）。单击浏览器地址栏的小绿锁，即可查看证书中的详细信息。但你是否曾好奇过一本证书是如何诞生的，以及 HTTPS 背后的 SSL/TLS 是如何在工作过程中发挥功效以保证通信安全的，什么是 CA、PCA，什么又是证书链和 X...

网络安全科普：奇妙的 SSL/TLS 证书（基础篇）

如果某个网站受 SSL 证书保护，其相应的 URL 中会显示 HTTPS（超文本传输安全协议）。单击浏览器地址栏的小绿锁，即可查看证书中的详细信息。但你是否曾好奇过一本证书是如何诞生的，以及 HTTPS 背后的 SSL/TLS 是如何在工作过程中发挥功效以保证通信安全的，什么是 CA、PCA，什么又是证书链和 X...

CSS

如何用 CSS 强调标记文本元素

当我们在 Web 上做文本编辑器时，最常见的一个场景便是和文字样式打交道了。比如像语文课本那样需要在每篇文章要学习的生字上标上一个小黑点，这个时候就该用到 CSS 中 text-emphasis-style 这个属性。

谈谈 App Shell 与 Skeleton Screen 实现

作为前端开发老生常谈的话题之一，提升用户体验的口号一直不绝于耳。但怎样的体验改进才算是有提升，用户一方是否认可你的改进与优化，这些都是可以展开详细讨论的话题。

知识点整理 - 前端涉及的各种像素概念以及 viewport 汇总

什么是物理像素、虚拟像素、逻辑像素、设备像素，什么又是 PPI, DPI, DPR 和 DIP？有关 viewport 以及苹果安卓设备上的页面呈现为什么效果不一样，又有哪些方法去改变和统一呢？网络上有很多资源对这些知识点进行了介绍，但是查看之后我发现大都比较零散且阅读顺序容易让新人疑惑，在这里我尝试根据几篇文章...

Cache

[译] JavaScript 引擎基础：Shapes 和 Inline Caches

本文就所有 JavaScript 引擎中常见的一些关键基础内容进行了介绍——这不仅仅局限于 V8 引擎。作为一名 JavaScript 开发者，深入了解 JavaScript 引擎是如何工作的将有助于你了解自己所写代码的性能特征。

Chrome

用 puppeteer 实现网站自动分页截取的趣事

最近因为工作中的一个需求，需要针对用户数据页面进行分页并截屏并返回 PDF 文件，期间用到了 puppeteer 与 HTML 分页算法，还找到了一个不错的插件，于是来聊些有趣的事。

Class

CommonJS

JavaScript 模块化方案总结

本文包含两部分，第一部分通过简明的描述介绍什么是 CommonJS、AMD、CMD、UMD、ES Module 以及它们的常见用法，第二部分则根据实际问题指出在正常的 webpack 构建过程中该如何指定打包配置中的模块化参数。

D3

绘制 D3 TreeMap 动画的一些设计思路

在 Google 里输入 D3 TreeMap 两个关键词，结果就能出来一大堆，但查到的几个 demo 都还不太能满足我的需求，相比基础的 TreeMap 布局，除了 demo 一般抽象粒度都不太够外，我还希望……

DNS

TLS/ESNI/ECH/DoT/DoH/JA3 - 谈谈 HTTPS 网络下浏览体验安全性的最后缝隙

有了 HTTPS 我们的网络访问就完美无缺了吗？TLS 在握手 Client Hello 阶段的数据包，包含客户端想访问的地址等信息，而这些信息是明文传输的，这使得第三方可以通过监听等手段知道你想访问哪些网址。本文会按照加密方式的加工流程倒序介绍，先介绍关于 TLS 握手阶段的 SNI 相关信息，再谈谈 DNS ...

DOM

结合 React Fiber 结构与 chrome 插件，谈谈无侵入自动化表单的技术尝试

作为一名前端工程师，不论你处于什么业务方向，肯定都与表单打过交道，当然如果你是服务端、产品、测试同学，想必也早已接触过表单这类场景。让我们试想一下，如果研发需求的功能测试依赖一个复杂表单的填写而得以继续，那么频繁的表单填写在研发自测和 QA 验证过程中就会占用过多碎片化的时间，此类需要频繁执行以生成测试数据或推进...

如何实现一个前端监控回放系统

本文通过组合介绍了各类 Web API 及一些新技术，试图通过技术调研以及实际项目开发中总结的经验，为大家在考虑解决「如何实现一个前端监控回放系统」这一问题上提供思路，本文介绍中若有未涉及到的缺漏之处，也欢迎评论告知补充。

如何监听页面 DOM 变动并高效响应

最近在做 chrome 插件开发，既然是插件那就难免不对现有页面做一些控制，比如事件监听、调整布局、对 DOM 元素的增删改查等等。其中有一个需求比较有意思，便整理一下顺便把涉及到的知识点复习一遍。

DTLS

网络安全科普：详解 HTTPS 与 TLS

作为普通用户，当我们上网冲浪时，是否想过为什么越来越多的域名输入时是 HTTPS 开头而非 HTTP 么？HTTPS 相比 HTTP 多出来的 S 到底多了些什么？TLS 和 SSL 又是什么，握手机制是如何进行的？其在七层协议中处于什么位置，与 HTTPS 相关的概念比如 CA 证书、Keyless、DTLS、...

Daily

我和他一个月了

我每次来都能遇到他，我的意思是说，就这家星巴克，每次周末来，我都能跟这个小哥相遇。

希望

先生之风，山高水长。大师精神，千古流芳。

中年女子

天气渐暖，七点多这天还没完全黑下来，我像往常一样小碎步走着。

Dart

让我们在2019年重新认识 Flutter

现在是2019年，让我们认真来看看备受瞩目的 Flutter，重新认识一下它。本文首先简要回顾移动开发（跨平台开发）的发展历史，并谈谈不同阶段跨平台解决方案的优劣；接着从 WHAT / HOW / WHY 三个方面详细来聊聊 Flutter，并结合简单的 Dart 代码说说开发者该如何上手，随后展示几个 Demo...

Decorator

TypeScript 装饰器介绍与示例教程

如果你使用过 Angular，那么在日常的开发过程中，你已经大量使用过由 Angular 官方提供的各类由装饰器封装的特性了，比如 @Component 以及 @ViewChild 等等。即便不了解其实现原理，这也不影响我们熟练的通过它来实现各种需求。但如果我们深入了解隐藏在其背后的装饰器，便能将这个黑盒变成我们...

Deno

Design

DoH

TLS/ESNI/ECH/DoT/DoH/JA3 - 谈谈 HTTPS 网络下浏览体验安全性的最后缝隙

有了 HTTPS 我们的网络访问就完美无缺了吗？TLS 在握手 Client Hello 阶段的数据包，包含客户端想访问的地址等信息，而这些信息是明文传输的，这使得第三方可以通过监听等手段知道你想访问哪些网址。本文会按照加密方式的加工流程倒序介绍，先介绍关于 TLS 握手阶段的 SNI 相关信息，再谈谈 DNS ...

DoT

TLS/ESNI/ECH/DoT/DoH/JA3 - 谈谈 HTTPS 网络下浏览体验安全性的最后缝隙

有了 HTTPS 我们的网络访问就完美无缺了吗？TLS 在握手 Client Hello 阶段的数据包，包含客户端想访问的地址等信息，而这些信息是明文传输的，这使得第三方可以通过监听等手段知道你想访问哪些网址。本文会按照加密方式的加工流程倒序介绍，先介绍关于 TLS 握手阶段的 SNI 相关信息，再谈谈 DNS ...

Docker

Docker 学习新手笔记：从入门到放弃

一篇了解与使用 Docker 的新手笔记，记录了 Docker 的相关概念与基本组成，以及从 Docker 环境安装、运行加速、镜像使用、镜像构成到镜像定制与发布等过程的实践笔记。

Drag

HTML Drag/Drop API 介绍

HTML 的拖拽接口有 DragEvent, DataTransfer, DataTransferItem 和DataTransferItemList。本文着重介绍前两者。

Drop

HTML Drag/Drop API 介绍

HTML 的拖拽接口有 DragEvent, DataTransfer, DataTransferItem 和DataTransferItemList。本文着重介绍前两者。

ECH

TLS/ESNI/ECH/DoT/DoH/JA3 - 谈谈 HTTPS 网络下浏览体验安全性的最后缝隙

有了 HTTPS 我们的网络访问就完美无缺了吗？TLS 在握手 Client Hello 阶段的数据包，包含客户端想访问的地址等信息，而这些信息是明文传输的，这使得第三方可以通过监听等手段知道你想访问哪些网址。本文会按照加密方式的加工流程倒序介绍，先介绍关于 TLS 握手阶段的 SNI 相关信息，再谈谈 DNS ...

ECMAScript

Diff ECMAScript 2019

ECMAScript® 2019 已定稿，通过 ECMA 可以查看到 ECMAScript 第十版语言标准的所有内容。由于该语言于几年前开始的年更节奏，每年的变化并不如当初 ES5 到 ES6 的改动大，于是想知道标准有哪些改动，看看在今年发布期内完结的提案倒是更有帮助些。

ES2018

ES6

JavaScript 模块化方案总结

本文包含两部分，第一部分通过简明的描述介绍什么是 CommonJS、AMD、CMD、UMD、ES Module 以及它们的常见用法，第二部分则根据实际问题指出在正常的 webpack 构建过程中该如何指定打包配置中的模块化参数。

ESM

Tree Shaking 简介

本周分享会上，给团队同学分享了 Tree Shaking 的相关内容。哈哈是的，这已经不是一个新鲜事了……

ESNI

TLS/ESNI/ECH/DoT/DoH/JA3 - 谈谈 HTTPS 网络下浏览体验安全性的最后缝隙

有了 HTTPS 我们的网络访问就完美无缺了吗？TLS 在握手 Client Hello 阶段的数据包，包含客户端想访问的地址等信息，而这些信息是明文传输的，这使得第三方可以通过监听等手段知道你想访问哪些网址。本文会按照加密方式的加工流程倒序介绍，先介绍关于 TLS 握手阶段的 SNI 相关信息，再谈谈 DNS ...

Enum

Event

鼠标事件基础回顾

回到图形化编辑器的开发上，当用户添加文字、图片或者任何其他素材时，选中、取消选中以及成组等复杂操作是必不可少的功能之一，这里要用的便是鼠标事件了。

如何监听页面 DOM 变动并高效响应

最近在做 chrome 插件开发，既然是插件那就难免不对现有页面做一些控制，比如事件监听、调整布局、对 DOM 元素的增删改查等等。其中有一个需求比较有意思，便整理一下顺便把涉及到的知识点复习一遍。

Expressjs

[译] 掌握 Koa 中间件

随着 Node 默默的实现了 async-await 的用法，Koa2 也在最近发布了。Express 似乎还占领着这场人气比赛的上风，但自 Koa2 发布以来我一直愉快的使用着，并且总是害怕回到老项目中去使用 Express…

FAQ

[译] WebAssembly FAQ - 常见疑惑与解答

WebAssembly 或者 wasm 是一个可移植、体积小、加载快并且兼容 Web 的全新格式，针对刚了解该概念的新手来说，肯定充满不少疑惑。WebAssembly 官网针对常见的疑惑进行了解答，本文基于该内容对其进行了翻译，希望能够给大家进一步了解 WebAssembly 这项新技术带来帮助。

FE

Flutter

Google I/O 2019 - Flutter for Web

Google I/O 2019 来啦，作为一名 Web 开发，今年比较关注的是 Flutter 的动态，一起来看看都有哪些动态吧。

让我们在2019年重新认识 Flutter

现在是2019年，让我们认真来看看备受瞩目的 Flutter，重新认识一下它。本文首先简要回顾移动开发（跨平台开发）的发展历史，并谈谈不同阶段跨平台解决方案的优劣；接着从 WHAT / HOW / WHY 三个方面详细来聊聊 Flutter，并结合简单的 Dart 代码说说开发者该如何上手，随后展示几个 Demo...

ForceLayout

FrontEnd

[译] 从2.4万篇文章中挑出的最棒的 JavaScript 学习指南（2018版）

原文作者研究了近2.4万篇 JavaScript 文章得出这篇总结，全文包含学习指南、新人上手、Webpack、性能、基础概念、函数式编程、面试、教程案例、Async Await、并发、V8、机器学习、数据可视化、调试、单元测试等章节，非常适合用于对自己 JavaScript 技术栈的比对，用于查漏补缺，适合收藏...

GAN

GLSL

Git

Google

Google I/O 2019 - Flutter for Web

Google I/O 2019 来啦，作为一名 Web 开发，今年比较关注的是 Flutter 的动态，一起来看看都有哪些动态吧。

2018 Google 移动技术最新进展速览

这周在 Google 上海办公室参加了一场分享会，他们的华人工程师向与会人员同步了 Google 在移动技术上的最新动态。我尝试从一名前端开发者的视角总结了这次分享会的内容，如有理解不准确的地方欢迎指出。

HTML

HTML Drag/Drop API 介绍

HTML 的拖拽接口有 DragEvent, DataTransfer, DataTransferItem 和DataTransferItemList。本文着重介绍前两者。

组合 a 标签与 canvas 实现图片资源的安全下载

普通用户下载图片时只需一个「右键另存为」操作即可完成，但当我们做在线编辑器、整个 UI 都被自定义实现时，如何解决不同域问题并实现页面中图片资源的安全下载呢？本文就解决该问题过程中所涉及的正则表达式、Web API 和 canvas 操作进行记录。

HTTP

网络安全科普：详解 HTTPS 与 TLS

作为普通用户，当我们上网冲浪时，是否想过为什么越来越多的域名输入时是 HTTPS 开头而非 HTTP 么？HTTPS 相比 HTTP 多出来的 S 到底多了些什么？TLS 和 SSL 又是什么，握手机制是如何进行的？其在七层协议中处于什么位置，与 HTTPS 相关的概念比如 CA 证书、Keyless、DTLS、...

前端跨域请求解决方案汇总

同源策略限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的关键的安全机制。但是有时候跨域请求资源是合理的需求，本文尝试从多篇文章中汇总至今存在的所有跨域请求解决方案。

HTTPS

网络安全科普：详解 HTTPS 与 TLS

作为普通用户，当我们上网冲浪时，是否想过为什么越来越多的域名输入时是 HTTPS 开头而非 HTTP 么？HTTPS 相比 HTTP 多出来的 S 到底多了些什么？TLS 和 SSL 又是什么，握手机制是如何进行的？其在七层协议中处于什么位置，与 HTTPS 相关的概念比如 CA 证书、Keyless、DTLS、...

网络安全科普：奇妙的 SSL/TLS 证书（进阶篇）

如果某个网站受 SSL 证书保护，其相应的 URL 中会显示 HTTPS（超文本传输安全协议）。单击浏览器地址栏的小绿锁，即可查看证书中的详细信息。但你是否曾好奇过一本证书是如何诞生的，以及 HTTPS 背后的 SSL/TLS 是如何在工作过程中发挥功效以保证通信安全的，什么是 CA、PCA，什么又是证书链和 X...

网络安全科普：奇妙的 SSL/TLS 证书（基础篇）

如果某个网站受 SSL 证书保护，其相应的 URL 中会显示 HTTPS（超文本传输安全协议）。单击浏览器地址栏的小绿锁，即可查看证书中的详细信息。但你是否曾好奇过一本证书是如何诞生的，以及 HTTPS 背后的 SSL/TLS 是如何在工作过程中发挥功效以保证通信安全的，什么是 CA、PCA，什么又是证书链和 X...

TLS/ESNI/ECH/DoT/DoH/JA3 - 谈谈 HTTPS 网络下浏览体验安全性的最后缝隙

有了 HTTPS 我们的网络访问就完美无缺了吗？TLS 在握手 Client Hello 阶段的数据包，包含客户端想访问的地址等信息，而这些信息是明文传输的，这使得第三方可以通过监听等手段知道你想访问哪些网址。本文会按照加密方式的加工流程倒序介绍，先介绍关于 TLS 握手阶段的 SNI 相关信息，再谈谈 DNS ...

History

Hook

Jest 配置与 React Hook 单元测试教程

本文基于 Jest 框架的集成配置以及如何编写 React 单元测试进行介绍，本文不关注 UI 层的测试实现，且不关注常规的 util 方法类测试实现，只围绕如何就 React 特性 Hook 进行单元测试用例编写展开。

IO19

Google I/O 2019 - Flutter for Web

Google I/O 2019 来啦，作为一名 Web 开发，今年比较关注的是 Flutter 的动态，一起来看看都有哪些动态吧。

IndexedDB

Service Worker 实践指南

本文就利用 Service Worker 解决问题的过程中遇到的不少问题加以总结，进行记录，主要关注点在 Service Worker 的注册注销、运行时判断、线程间通信及调试几方面，涉及的内容从技术细节上包含 postMessage、MessageChannel、IndexedDB 及开发者调试工具等。

JA3

TLS/ESNI/ECH/DoT/DoH/JA3 - 谈谈 HTTPS 网络下浏览体验安全性的最后缝隙

有了 HTTPS 我们的网络访问就完美无缺了吗？TLS 在握手 Client Hello 阶段的数据包，包含客户端想访问的地址等信息，而这些信息是明文传输的，这使得第三方可以通过监听等手段知道你想访问哪些网址。本文会按照加密方式的加工流程倒序介绍，先介绍关于 TLS 握手阶段的 SNI 相关信息，再谈谈 DNS ...

Jasmine

JavaScript

Service Worker 实践指南

本文就利用 Service Worker 解决问题的过程中遇到的不少问题加以总结，进行记录，主要关注点在 Service Worker 的注册注销、运行时判断、线程间通信及调试几方面，涉及的内容从技术细节上包含 postMessage、MessageChannel、IndexedDB 及开发者调试工具等。

如何实现一个前端监控回放系统

本文通过组合介绍了各类 Web API 及一些新技术，试图通过技术调研以及实际项目开发中总结的经验，为大家在考虑解决「如何实现一个前端监控回放系统」这一问题上提供思路，本文介绍中若有未涉及到的缺漏之处，也欢迎评论告知补充。

HTML Drag/Drop API 介绍

HTML 的拖拽接口有 DragEvent, DataTransfer, DataTransferItem 和DataTransferItemList。本文着重介绍前两者。

组合 a 标签与 canvas 实现图片资源的安全下载

普通用户下载图片时只需一个「右键另存为」操作即可完成，但当我们做在线编辑器、整个 UI 都被自定义实现时，如何解决不同域问题并实现页面中图片资源的安全下载呢？本文就解决该问题过程中所涉及的正则表达式、Web API 和 canvas 操作进行记录。

JavaScript 考古史闲聊

今天在整理 JavaScript 月刊新一期内容时，看到一篇文章感觉不错，遂推荐一下。文章标题是 How JavaScript Grew Up and Became a Real Language，讲述的是 JavaScript 一路走来是如何一步步成为一门真正的编程语言的故事。

JavaScript 模块化方案总结

本文包含两部分，第一部分通过简明的描述介绍什么是 CommonJS、AMD、CMD、UMD、ES Module 以及它们的常见用法，第二部分则根据实际问题指出在正常的 webpack 构建过程中该如何指定打包配置中的模块化参数。

Diff ECMAScript 2019

ECMAScript® 2019 已定稿，通过 ECMA 可以查看到 ECMAScript 第十版语言标准的所有内容。由于该语言于几年前开始的年更节奏，每年的变化并不如当初 ES5 到 ES6 的改动大，于是想知道标准有哪些改动，看看在今年发布期内完结的提案倒是更有帮助些。

社交网络配图安全指南

这两天「视觉中国」上了热搜，图片的版权问题成为了公众焦点。暂不就该新闻做进一步的讨论，我想以自己长期发水文的经验来聊聊，如何正确的在社交网络发图时规避版权问题风险。

[译] JavaScript 引擎基础：原型优化

本文就所有 JavaScript 引擎中常见的一些关键基础内容进行了介绍——这不仅仅局限于 V8 引擎。作为一名 JavaScript 开发者，深入了解 JavaScript 引擎是如何工作的将有助于你了解自己所写代码的性能特征。

谈谈 App Shell 与 Skeleton Screen 实现

作为前端开发老生常谈的话题之一，提升用户体验的口号一直不绝于耳。但怎样的体验改进才算是有提升，用户一方是否认可你的改进与优化，这些都是可以展开详细讨论的话题。

精读 The Cost of JavaScript In 2018

如今，JavaScript 仍然是我们向移动终端分发页面时成本最高的资源，因为它可以在很大程度上延迟页面的交互性。一个页面在开发时都要考虑哪些问题，用户实际访问页面的效果与感受又是如何，Google 开发 Lighthouse 的初衷以及其具体用途，JavaScript 的成本究竟有多高，如何降低 JavaScr...

[译] JavaScript 引擎基础：Shapes 和 Inline Caches

本文就所有 JavaScript 引擎中常见的一些关键基础内容进行了介绍——这不仅仅局限于 V8 引擎。作为一名 JavaScript 开发者，深入了解 JavaScript 引擎是如何工作的将有助于你了解自己所写代码的性能特征。

[译] 从1.6万篇文章中挑出的最棒的 Web 开发学习指南（2018版）

原文作者研究了近1.6万篇 Web 生态相关的文章得出这篇总结，全文既包含 Web 开发入门（前端相关），进阶和综合应用专题，也包括对 Web 生态中 Git/HTTPS/设计模式/Vim/性能/PWA 等内容的专题介绍，非常适合 Web 前端开发者用于查漏补缺，同时扩充自己的知识广度、并将眼界拓宽到前端领域之外...

[译] 从2.4万篇文章中挑出的最棒的 JavaScript 学习指南（2018版）

原文作者研究了近2.4万篇 JavaScript 文章得出这篇总结，全文包含学习指南、新人上手、Webpack、性能、基础概念、函数式编程、面试、教程案例、Async Await、并发、V8、机器学习、数据可视化、调试、单元测试等章节，非常适合用于对自己 JavaScript 技术栈的比对，用于查漏补缺，适合收藏...

[译] 从1.8万篇文章中脱颖而出45个最棒的 React.js 学习指南（2018版）

原文作者研究了近1.8万篇 React.js 文章得出这篇总结，全文既包含 React 入门，进阶和综合应用专题，也包括对路由、React Native、动画、PWA等内容的专题介绍，非常适合用于对自己 React 技术栈的比对，用于查漏补缺，适合收藏阅读。译者保留了原文链接以及对应作者的 medium 或者 t...

[译] 掌握 Koa 中间件

随着 Node 默默的实现了 async-await 的用法，Koa2 也在最近发布了。Express 似乎还占领着这场人气比赛的上风，但自 Koa2 发布以来我一直愉快的使用着，并且总是害怕回到老项目中去使用 Express…

如何监听页面 DOM 变动并高效响应

最近在做 chrome 插件开发，既然是插件那就难免不对现有页面做一些控制，比如事件监听、调整布局、对 DOM 元素的增删改查等等。其中有一个需求比较有意思，便整理一下顺便把涉及到的知识点复习一遍。

[译] WebAssembly FAQ - 常见疑惑与解答

WebAssembly 或者 wasm 是一个可移植、体积小、加载快并且兼容 Web 的全新格式，针对刚了解该概念的新手来说，肯定充满不少疑惑。WebAssembly 官网针对常见的疑惑进行了解答，本文基于该内容对其进行了翻译，希望能够给大家进一步了解 WebAssembly 这项新技术带来帮助。

您的第一个 Progressive Web App 实践笔记

Google 在 Web 领域持续投入的两个技术 PWA 和 AMP 吸引了很多人的目光, 我今天尝试通过 Google 的介绍文档体验了一个构建 PWA 应用的过程, 以下为实践过程中对 PWA 结构与开发关键细节的整理笔记.

[译] JavaScript 中至关重要的 Apply, Call 和 Bind

昨天参加百度的春季实习生招聘, 二面面试官人出了一道极其简单的 JavaScript 内置函数的基础实现题, 但由于自己太弱鸡没有答出来. 不过面试官人还是特别好, 认为可能正好说到了我的知识盲点, 看了我的简历就从别的入手点和我聊了起来, 非常羞愧… 遂找了一篇介绍 Apply, Call 和 Bind 比较详...

Three.js 入门与扫盲-基础结构,坐标系与几何类型介绍

WebGL 是基于 OpenGL ES 2.0 的 Web 标准，可以通过 HTML5 Canvas 元素作为 DOM 接口访问。Three.js 封装了底层的的图形操作接口,使用户可以便捷的操作构建空间物体与场景,实现 3D 可视化. 一个完整的 Three.js 必定包含一些必要的结构,例如场景,相机等等,而...

Some tips about learning JavaScript

When I had my internship in DeepGlint, my supervisor gave me a lot of advice about how to obtain the ability to develop the interesting web world.

JavaScript 运行环境

面向微前端，谈谈 JavaScript 隔离沙箱机制的古往今来

随着微前端的不断发展、被更多的团队采用，越来越多开始对沙箱这个概念有所了解。沙箱，即 sandbox，意指一个允许你独立运行程序的虚拟环境，沙箱可以隔离当前执行的环境作用域和外部的其他作用域，外界无法修改该环境内任何信息，沙箱内的东西单独运行，环境间相互不受影响。本文计划谈谈微前端的 JavaScript 隔离，...

Jest

Jest 配置与 React Hook 单元测试教程

本文基于 Jest 框架的集成配置以及如何编写 React 单元测试进行介绍，本文不关注 UI 层的测试实现，且不关注常规的 util 方法类测试实现，只围绕如何就 React 特性 Hook 进行单元测试用例编写展开。

Karma

Koa

[译] 掌握 Koa 中间件

随着 Node 默默的实现了 async-await 的用法，Koa2 也在最近发布了。Express 似乎还占领着这场人气比赛的上风，但自 Koa2 发布以来我一直愉快的使用着，并且总是害怕回到老项目中去使用 Express…

Koajs

[译] 掌握 Koa 中间件

随着 Node 默默的实现了 async-await 的用法，Koa2 也在最近发布了。Express 似乎还占领着这场人气比赛的上风，但自 Koa2 发布以来我一直愉快的使用着，并且总是害怕回到老项目中去使用 Express…

Linux

Location

MDN

鼠标事件基础回顾

回到图形化编辑器的开发上，当用户添加文字、图片或者任何其他素材时，选中、取消选中以及成组等复杂操作是必不可少的功能之一，这里要用的便是鼠标事件了。

MessageChannel

Service Worker 实践指南

本文就利用 Service Worker 解决问题的过程中遇到的不少问题加以总结，进行记录，主要关注点在 Service Worker 的注册注销、运行时判断、线程间通信及调试几方面，涉及的内容从技术细节上包含 postMessage、MessageChannel、IndexedDB 及开发者调试工具等。

Methods

[译] JavaScript 中至关重要的 Apply, Call 和 Bind

昨天参加百度的春季实习生招聘, 二面面试官人出了一道极其简单的 JavaScript 内置函数的基础实现题, 但由于自己太弱鸡没有答出来. 不过面试官人还是特别好, 认为可能正好说到了我的知识盲点, 看了我的简历就从别的入手点和我聊了起来, 非常羞愧… 遂找了一篇介绍 Apply, Call 和 Bind 比较详...

Middleware

[译] 掌握 Koa 中间件

随着 Node 默默的实现了 async-await 的用法，Koa2 也在最近发布了。Express 似乎还占领着这场人气比赛的上风，但自 Koa2 发布以来我一直愉快的使用着，并且总是害怕回到老项目中去使用 Express…

MutationObserver

如何实现一个前端监控回放系统

本文通过组合介绍了各类 Web API 及一些新技术，试图通过技术调研以及实际项目开发中总结的经验，为大家在考虑解决「如何实现一个前端监控回放系统」这一问题上提供思路，本文介绍中若有未涉及到的缺漏之处，也欢迎评论告知补充。

NASA

NgZone

Node

Nodejs

[译] 掌握 Koa 中间件

随着 Node 默默的实现了 async-await 的用法，Koa2 也在最近发布了。Express 似乎还占领着这场人气比赛的上风，但自 Koa2 发布以来我一直愉快的使用着，并且总是害怕回到老项目中去使用 Express…

OCSP

网络安全科普：奇妙的 SSL/TLS 证书（进阶篇）

如果某个网站受 SSL 证书保护，其相应的 URL 中会显示 HTTPS（超文本传输安全协议）。单击浏览器地址栏的小绿锁，即可查看证书中的详细信息。但你是否曾好奇过一本证书是如何诞生的，以及 HTTPS 背后的 SSL/TLS 是如何在工作过程中发挥功效以保证通信安全的，什么是 CA、PCA，什么又是证书链和 X...

网络安全科普：奇妙的 SSL/TLS 证书（基础篇）

如果某个网站受 SSL 证书保护，其相应的 URL 中会显示 HTTPS（超文本传输安全协议）。单击浏览器地址栏的小绿锁，即可查看证书中的详细信息。但你是否曾好奇过一本证书是如何诞生的，以及 HTTPS 背后的 SSL/TLS 是如何在工作过程中发挥功效以保证通信安全的，什么是 CA、PCA，什么又是证书链和 X...

PKI

网络安全科普：奇妙的 SSL/TLS 证书（进阶篇）

如果某个网站受 SSL 证书保护，其相应的 URL 中会显示 HTTPS（超文本传输安全协议）。单击浏览器地址栏的小绿锁，即可查看证书中的详细信息。但你是否曾好奇过一本证书是如何诞生的，以及 HTTPS 背后的 SSL/TLS 是如何在工作过程中发挥功效以保证通信安全的，什么是 CA、PCA，什么又是证书链和 X...

网络安全科普：奇妙的 SSL/TLS 证书（基础篇）

如果某个网站受 SSL 证书保护，其相应的 URL 中会显示 HTTPS（超文本传输安全协议）。单击浏览器地址栏的小绿锁，即可查看证书中的详细信息。但你是否曾好奇过一本证书是如何诞生的，以及 HTTPS 背后的 SSL/TLS 是如何在工作过程中发挥功效以保证通信安全的，什么是 CA、PCA，什么又是证书链和 X...

PWA

谈谈 App Shell 与 Skeleton Screen 实现

作为前端开发老生常谈的话题之一，提升用户体验的口号一直不绝于耳。但怎样的体验改进才算是有提升，用户一方是否认可你的改进与优化，这些都是可以展开详细讨论的话题。

精读 The Cost of JavaScript In 2018

如今，JavaScript 仍然是我们向移动终端分发页面时成本最高的资源，因为它可以在很大程度上延迟页面的交互性。一个页面在开发时都要考虑哪些问题，用户实际访问页面的效果与感受又是如何，Google 开发 Lighthouse 的初衷以及其具体用途，JavaScript 的成本究竟有多高，如何降低 JavaScr...

2018 Google 移动技术最新进展速览

这周在 Google 上海办公室参加了一场分享会，他们的华人工程师向与会人员同步了 Google 在移动技术上的最新动态。我尝试从一名前端开发者的视角总结了这次分享会的内容，如有理解不准确的地方欢迎指出。

您的第一个 Progressive Web App 实践笔记

Google 在 Web 领域持续投入的两个技术 PWA 和 AMP 吸引了很多人的目光, 我今天尝试通过 Google 的介绍文档体验了一个构建 PWA 应用的过程, 以下为实践过程中对 PWA 结构与开发关键细节的整理笔记.

Performance

Pixel

知识点整理 - 前端涉及的各种像素概念以及 viewport 汇总

什么是物理像素、虚拟像素、逻辑像素、设备像素，什么又是 PPI, DPI, DPR 和 DIP？有关 viewport 以及苹果安卓设备上的页面呈现为什么效果不一样，又有哪些方法去改变和统一呢？网络上有很多资源对这些知识点进行了介绍，但是查看之后我发现大都比较零散且阅读顺序容易让新人疑惑，在这里我尝试根据几篇文章...

Promise

Proxy

面向微前端，谈谈 JavaScript 隔离沙箱机制的古往今来

随着微前端的不断发展、被更多的团队采用，越来越多开始对沙箱这个概念有所了解。沙箱，即 sandbox，意指一个允许你独立运行程序的虚拟环境，沙箱可以隔离当前执行的环境作用域和外部的其他作用域，外界无法修改该环境内任何信息，沙箱内的东西单独运行，环境间相互不受影响。本文计划谈谈微前端的 JavaScript 隔离，...

R

React

基于一次应用卡死问题所做的前端性能评估与优化尝试

在上个月，由于客户反馈客户端卡死现象但我们远程却难以复现此现象，于是我们组织了一次现场上门故障排查，并希望基于此次观察与优化，为客户端开发提供一些整体的优化升级。当然，在尝试过程中，也发现了不少适用于通用前端项目开发的一些故障排查与性能评估的手段，于是总结此文，希望可以对读者有所帮助。

Jest 配置与 React Hook 单元测试教程

本文基于 Jest 框架的集成配置以及如何编写 React 单元测试进行介绍，本文不关注 UI 层的测试实现，且不关注常规的 util 方法类测试实现，只围绕如何就 React 特性 Hook 进行单元测试用例编写展开。

绘制 D3 TreeMap 动画的一些设计思路

在 Google 里输入 D3 TreeMap 两个关键词，结果就能出来一大堆，但查到的几个 demo 都还不太能满足我的需求，相比基础的 TreeMap 布局，除了 demo 一般抽象粒度都不太够外，我还希望……

[译] 从1.8万篇文章中脱颖而出45个最棒的 React.js 学习指南（2018版）

原文作者研究了近1.8万篇 React.js 文章得出这篇总结，全文既包含 React 入门，进阶和综合应用专题，也包括对路由、React Native、动画、PWA等内容的专题介绍，非常适合用于对自己 React 技术栈的比对，用于查漏补缺，适合收藏阅读。译者保留了原文链接以及对应作者的 medium 或者 t...

React 与 Vue 的实践总结

最近花了比较大段的时间用于了解和实践主流三大框架其中的两个 - Vue 和 React, 总结一下自己在使用中感受到的两者在提升开发效率上的一些异同之处。

Redux

ReplaySubject

Rust

RxJS

Coding with Angular - Tips and Tricks

当你第一次从其他框架切换到 Angular 是否会有些迷茫，在感叹框架大而全的同时却对其中很多概念不尽了解？近期，为了给不断加入团队的新同学营造一个快速上手的环境，于是把团队的项目代码仔细阅读了一遍，从中挑出了一些在大家提交代码中反复会「犯的错误」，并总结成一系列值得 Angular 新手注意和学习的一些最佳实践。

SSL

网络安全科普：详解 HTTPS 与 TLS

作为普通用户，当我们上网冲浪时，是否想过为什么越来越多的域名输入时是 HTTPS 开头而非 HTTP 么？HTTPS 相比 HTTP 多出来的 S 到底多了些什么？TLS 和 SSL 又是什么，握手机制是如何进行的？其在七层协议中处于什么位置，与 HTTPS 相关的概念比如 CA 证书、Keyless、DTLS、...

网络安全科普：奇妙的 SSL/TLS 证书（进阶篇）

如果某个网站受 SSL 证书保护，其相应的 URL 中会显示 HTTPS（超文本传输安全协议）。单击浏览器地址栏的小绿锁，即可查看证书中的详细信息。但你是否曾好奇过一本证书是如何诞生的，以及 HTTPS 背后的 SSL/TLS 是如何在工作过程中发挥功效以保证通信安全的，什么是 CA、PCA，什么又是证书链和 X...

网络安全科普：奇妙的 SSL/TLS 证书（基础篇）

如果某个网站受 SSL 证书保护，其相应的 URL 中会显示 HTTPS（超文本传输安全协议）。单击浏览器地址栏的小绿锁，即可查看证书中的详细信息。但你是否曾好奇过一本证书是如何诞生的，以及 HTTPS 背后的 SSL/TLS 是如何在工作过程中发挥功效以保证通信安全的，什么是 CA、PCA，什么又是证书链和 X...

ServiceWorker

Service Worker 实践指南

本文就利用 Service Worker 解决问题的过程中遇到的不少问题加以总结，进行记录，主要关注点在 Service Worker 的注册注销、运行时判断、线程间通信及调试几方面，涉及的内容从技术细节上包含 postMessage、MessageChannel、IndexedDB 及开发者调试工具等。

Shading

ShadowRealm

面向微前端，谈谈 JavaScript 隔离沙箱机制的古往今来

随着微前端的不断发展、被更多的团队采用，越来越多开始对沙箱这个概念有所了解。沙箱，即 sandbox，意指一个允许你独立运行程序的虚拟环境，沙箱可以隔离当前执行的环境作用域和外部的其他作用域，外界无法修改该环境内任何信息，沙箱内的东西单独运行，环境间相互不受影响。本文计划谈谈微前端的 JavaScript 隔离，...

Shapes

[译] JavaScript 引擎基础：Shapes 和 Inline Caches

本文就所有 JavaScript 引擎中常见的一些关键基础内容进行了介绍——这不仅仅局限于 V8 引擎。作为一名 JavaScript 开发者，深入了解 JavaScript 引擎是如何工作的将有助于你了解自己所写代码的性能特征。

Shell

SideEffects

Tree Shaking 简介

本周分享会上，给团队同学分享了 Tree Shaking 的相关内容。哈哈是的，这已经不是一个新鲜事了……

Slides

Software

[译] 从1.6万篇文章中挑出的最棒的 Web 开发学习指南（2018版）

原文作者研究了近1.6万篇 Web 生态相关的文章得出这篇总结，全文既包含 Web 开发入门（前端相关），进阶和综合应用专题，也包括对 Web 生态中 Git/HTTPS/设计模式/Vim/性能/PWA 等内容的专题介绍，非常适合 Web 前端开发者用于查漏补缺，同时扩充自己的知识广度、并将眼界拓宽到前端领域之外...

[译] 从2.4万篇文章中挑出的最棒的 JavaScript 学习指南（2018版）

原文作者研究了近2.4万篇 JavaScript 文章得出这篇总结，全文包含学习指南、新人上手、Webpack、性能、基础概念、函数式编程、面试、教程案例、Async Await、并发、V8、机器学习、数据可视化、调试、单元测试等章节，非常适合用于对自己 JavaScript 技术栈的比对，用于查漏补缺，适合收藏...

[译] 从1.8万篇文章中脱颖而出45个最棒的 React.js 学习指南（2018版）

原文作者研究了近1.8万篇 React.js 文章得出这篇总结，全文既包含 React 入门，进阶和综合应用专题，也包括对路由、React Native、动画、PWA等内容的专题介绍，非常适合用于对自己 React 技术栈的比对，用于查漏补缺，适合收藏阅读。译者保留了原文链接以及对应作者的 medium 或者 t...

State

Stream

Student

校招结束，谈谈我对第一份工作的认识

刚将三方寄给了签约公司，我的校招终于结束了。正好看到这个问题，看到很多人力资源相关的人士解读收获很大，那我就从自身的经历来聊聊这几个月里我对「第一份工作的重要性，以及我们都需要考虑清楚什么」这个问题的认识吧。总结自己求职过程的所见所闻所想，算是对自己的一个交代，也希望让大家看到一个普通校招生的思考。

Subject

Summary

TLS

网络安全科普：详解 HTTPS 与 TLS

作为普通用户，当我们上网冲浪时，是否想过为什么越来越多的域名输入时是 HTTPS 开头而非 HTTP 么？HTTPS 相比 HTTP 多出来的 S 到底多了些什么？TLS 和 SSL 又是什么，握手机制是如何进行的？其在七层协议中处于什么位置，与 HTTPS 相关的概念比如 CA 证书、Keyless、DTLS、...

网络安全科普：奇妙的 SSL/TLS 证书（进阶篇）

如果某个网站受 SSL 证书保护，其相应的 URL 中会显示 HTTPS（超文本传输安全协议）。单击浏览器地址栏的小绿锁，即可查看证书中的详细信息。但你是否曾好奇过一本证书是如何诞生的，以及 HTTPS 背后的 SSL/TLS 是如何在工作过程中发挥功效以保证通信安全的，什么是 CA、PCA，什么又是证书链和 X...

网络安全科普：奇妙的 SSL/TLS 证书（基础篇）

如果某个网站受 SSL 证书保护，其相应的 URL 中会显示 HTTPS（超文本传输安全协议）。单击浏览器地址栏的小绿锁，即可查看证书中的详细信息。但你是否曾好奇过一本证书是如何诞生的，以及 HTTPS 背后的 SSL/TLS 是如何在工作过程中发挥功效以保证通信安全的，什么是 CA、PCA，什么又是证书链和 X...

TLS/ESNI/ECH/DoT/DoH/JA3 - 谈谈 HTTPS 网络下浏览体验安全性的最后缝隙

有了 HTTPS 我们的网络访问就完美无缺了吗？TLS 在握手 Client Hello 阶段的数据包，包含客户端想访问的地址等信息，而这些信息是明文传输的，这使得第三方可以通过监听等手段知道你想访问哪些网址。本文会按照加密方式的加工流程倒序介绍，先介绍关于 TLS 握手阶段的 SNI 相关信息，再谈谈 DNS ...

TensorFlow

TikTok

Translation

[译] 掌握 Koa 中间件

随着 Node 默默的实现了 async-await 的用法，Koa2 也在最近发布了。Express 似乎还占领着这场人气比赛的上风，但自 Koa2 发布以来我一直愉快的使用着，并且总是害怕回到老项目中去使用 Express…

[译] WebAssembly FAQ - 常见疑惑与解答

WebAssembly 或者 wasm 是一个可移植、体积小、加载快并且兼容 Web 的全新格式，针对刚了解该概念的新手来说，肯定充满不少疑惑。WebAssembly 官网针对常见的疑惑进行了解答，本文基于该内容对其进行了翻译，希望能够给大家进一步了解 WebAssembly 这项新技术带来帮助。

[译] JavaScript 中至关重要的 Apply, Call 和 Bind

昨天参加百度的春季实习生招聘, 二面面试官人出了一道极其简单的 JavaScript 内置函数的基础实现题, 但由于自己太弱鸡没有答出来. 不过面试官人还是特别好, 认为可能正好说到了我的知识盲点, 看了我的简历就从别的入手点和我聊了起来, 非常羞愧… 遂找了一篇介绍 Apply, Call 和 Bind 比较详...

[译] Vue.js 2.0 Introduction

Vue.js 2.0 于今天早上发布，尝试对 Introduction 进行了中文翻译, 该版本已被收录进 Vue.js 2.0 官方中文版.

TreeMap

绘制 D3 TreeMap 动画的一些设计思路

在 Google 里输入 D3 TreeMap 两个关键词，结果就能出来一大堆，但查到的几个 demo 都还不太能满足我的需求，相比基础的 TreeMap 布局，除了 demo 一般抽象粒度都不太够外，我还希望……

Tutorial

Docker 学习新手笔记：从入门到放弃

一篇了解与使用 Docker 的新手笔记，记录了 Docker 的相关概念与基本组成，以及从 Docker 环境安装、运行加速、镜像使用、镜像构成到镜像定制与发布等过程的实践笔记。

TypeScript

TypeScript 装饰器介绍与示例教程

如果你使用过 Angular，那么在日常的开发过程中，你已经大量使用过由 Angular 官方提供的各类由装饰器封装的特性了，比如 @Component 以及 @ViewChild 等等。即便不了解其实现原理，这也不影响我们熟练的通过它来实现各种需求。但如果我们深入了解隐藏在其背后的装饰器，便能将这个黑盒变成我们...

Jest 配置与 React Hook 单元测试教程

本文基于 Jest 框架的集成配置以及如何编写 React 单元测试进行介绍，本文不关注 UI 层的测试实现，且不关注常规的 util 方法类测试实现，只围绕如何就 React 特性 Hook 进行单元测试用例编写展开。

Coding with Angular - Tips and Tricks

当你第一次从其他框架切换到 Angular 是否会有些迷茫，在感叹框架大而全的同时却对其中很多概念不尽了解？近期，为了给不断加入团队的新同学营造一个快速上手的环境，于是把团队的项目代码仔细阅读了一遍，从中挑出了一些在大家提交代码中反复会「犯的错误」，并总结成一系列值得 Angular 新手注意和学习的一些最佳实践。

UCAS

校招结束，谈谈我对第一份工作的认识

刚将三方寄给了签约公司，我的校招终于结束了。正好看到这个问题，看到很多人力资源相关的人士解读收获很大，那我就从自身的经历来聊聊这几个月里我对「第一份工作的重要性，以及我们都需要考虑清楚什么」这个问题的认识吧。总结自己求职过程的所见所闻所想，算是对自己的一个交代，也希望让大家看到一个普通校招生的思考。

我的2017年终总结

每年临近年终都会以遇到一件似乎很衰的事来结束这一年，而此时便安慰自己这预示着新的一年会事事如意。然而未来究竟怎样，只有切身去感受了才会知道。到了这个时候，我又可以回顾过去的一年，好好感伤一番了。

UMD

JavaScript 模块化方案总结

本文包含两部分，第一部分通过简明的描述介绍什么是 CommonJS、AMD、CMD、UMD、ES Module 以及它们的常见用法，第二部分则根据实际问题指出在正常的 webpack 构建过程中该如何指定打包配置中的模块化参数。

URL

组合 a 标签与 canvas 实现图片资源的安全下载

普通用户下载图片时只需一个「右键另存为」操作即可完成，但当我们做在线编辑器、整个 UI 都被自定义实现时，如何解决不同域问题并实现页面中图片资源的安全下载呢？本文就解决该问题过程中所涉及的正则表达式、Web API 和 canvas 操作进行记录。

VM

Docker 学习新手笔记：从入门到放弃

一篇了解与使用 Docker 的新手笔记，记录了 Docker 的相关概念与基本组成，以及从 Docker 环境安装、运行加速、镜像使用、镜像构成到镜像定制与发布等过程的实践笔记。

Viewport

知识点整理 - 前端涉及的各种像素概念以及 viewport 汇总

什么是物理像素、虚拟像素、逻辑像素、设备像素，什么又是 PPI, DPI, DPR 和 DIP？有关 viewport 以及苹果安卓设备上的页面呈现为什么效果不一样，又有哪些方法去改变和统一呢？网络上有很多资源对这些知识点进行了介绍，但是查看之后我发现大都比较零散且阅读顺序容易让新人疑惑，在这里我尝试根据几篇文章...

Visualization

绘制 D3 TreeMap 动画的一些设计思路

在 Google 里输入 D3 TreeMap 两个关键词，结果就能出来一大堆，但查到的几个 demo 都还不太能满足我的需求，相比基础的 TreeMap 布局，除了 demo 一般抽象粒度都不太够外，我还希望……

Three.js 入门与扫盲-基础结构,坐标系与几何类型介绍

WebGL 是基于 OpenGL ES 2.0 的 Web 标准，可以通过 HTML5 Canvas 元素作为 DOM 接口访问。Three.js 封装了底层的的图形操作接口,使用户可以便捷的操作构建空间物体与场景,实现 3D 可视化. 一个完整的 Three.js 必定包含一些必要的结构,例如场景,相机等等,而...

Voyager

Vue

React 与 Vue 的实践总结

最近花了比较大段的时间用于了解和实践主流三大框架其中的两个 - Vue 和 React, 总结一下自己在使用中感受到的两者在提升开发效率上的一些异同之处。

Web

Service Worker 实践指南

本文就利用 Service Worker 解决问题的过程中遇到的不少问题加以总结，进行记录，主要关注点在 Service Worker 的注册注销、运行时判断、线程间通信及调试几方面，涉及的内容从技术细节上包含 postMessage、MessageChannel、IndexedDB 及开发者调试工具等。

如何实现一个前端监控回放系统

本文通过组合介绍了各类 Web API 及一些新技术，试图通过技术调研以及实际项目开发中总结的经验，为大家在考虑解决「如何实现一个前端监控回放系统」这一问题上提供思路，本文介绍中若有未涉及到的缺漏之处，也欢迎评论告知补充。

JavaScript 考古史闲聊

今天在整理 JavaScript 月刊新一期内容时，看到一篇文章感觉不错，遂推荐一下。文章标题是 How JavaScript Grew Up and Became a Real Language，讲述的是 JavaScript 一路走来是如何一步步成为一门真正的编程语言的故事。

Google I/O 2019 - Flutter for Web

Google I/O 2019 来啦，作为一名 Web 开发，今年比较关注的是 Flutter 的动态，一起来看看都有哪些动态吧。

谈谈 App Shell 与 Skeleton Screen 实现

作为前端开发老生常谈的话题之一，提升用户体验的口号一直不绝于耳。但怎样的体验改进才算是有提升，用户一方是否认可你的改进与优化，这些都是可以展开详细讨论的话题。

精读 The Cost of JavaScript In 2018

如今，JavaScript 仍然是我们向移动终端分发页面时成本最高的资源，因为它可以在很大程度上延迟页面的交互性。一个页面在开发时都要考虑哪些问题，用户实际访问页面的效果与感受又是如何，Google 开发 Lighthouse 的初衷以及其具体用途，JavaScript 的成本究竟有多高，如何降低 JavaScr...

2018 Google 移动技术最新进展速览

这周在 Google 上海办公室参加了一场分享会，他们的华人工程师向与会人员同步了 Google 在移动技术上的最新动态。我尝试从一名前端开发者的视角总结了这次分享会的内容，如有理解不准确的地方欢迎指出。

[译] 从1.6万篇文章中挑出的最棒的 Web 开发学习指南（2018版）

原文作者研究了近1.6万篇 Web 生态相关的文章得出这篇总结，全文既包含 Web 开发入门（前端相关），进阶和综合应用专题，也包括对 Web 生态中 Git/HTTPS/设计模式/Vim/性能/PWA 等内容的专题介绍，非常适合 Web 前端开发者用于查漏补缺，同时扩充自己的知识广度、并将眼界拓宽到前端领域之外...

[译] 从2.4万篇文章中挑出的最棒的 JavaScript 学习指南（2018版）

原文作者研究了近2.4万篇 JavaScript 文章得出这篇总结，全文包含学习指南、新人上手、Webpack、性能、基础概念、函数式编程、面试、教程案例、Async Await、并发、V8、机器学习、数据可视化、调试、单元测试等章节，非常适合用于对自己 JavaScript 技术栈的比对，用于查漏补缺，适合收藏...

[译] 从1.8万篇文章中脱颖而出45个最棒的 React.js 学习指南（2018版）

原文作者研究了近1.8万篇 React.js 文章得出这篇总结，全文既包含 React 入门，进阶和综合应用专题，也包括对路由、React Native、动画、PWA等内容的专题介绍，非常适合用于对自己 React 技术栈的比对，用于查漏补缺，适合收藏阅读。译者保留了原文链接以及对应作者的 medium 或者 t...

您的第一个 Progressive Web App 实践笔记

Google 在 Web 领域持续投入的两个技术 PWA 和 AMP 吸引了很多人的目光, 我今天尝试通过 Google 的介绍文档体验了一个构建 PWA 应用的过程, 以下为实践过程中对 PWA 结构与开发关键细节的整理笔记.

WebAssembly

[译] WebAssembly FAQ - 常见疑惑与解答

WebAssembly 或者 wasm 是一个可移植、体积小、加载快并且兼容 Web 的全新格式，针对刚了解该概念的新手来说，肯定充满不少疑惑。WebAssembly 官网针对常见的疑惑进行了解答，本文基于该内容对其进行了翻译，希望能够给大家进一步了解 WebAssembly 这项新技术带来帮助。

WebGL

从零开始学习时空数据可视化（一）

glmaps 是一个包含多个时空数据可视化示例代码集与学习教程的开源项目。该项目中的可视化效果基于可视化库 three.js 与 deck.gl 实现，非常容易上手，希望本项目对正在时空可视化学习之路上探寻的你有所帮助。

从零开始学习时空数据可视化（序）

glmaps 是一个包含多个时空数据可视化示例代码集与学习教程的开源项目。该项目中的可视化效果基于可视化库 three.js 与 deck.gl 实现，非常容易上手，希望本项目对正在时空可视化学习之路上探寻的你有所帮助。

Worker

X.509

网络安全科普：奇妙的 SSL/TLS 证书（进阶篇）

如果某个网站受 SSL 证书保护，其相应的 URL 中会显示 HTTPS（超文本传输安全协议）。单击浏览器地址栏的小绿锁，即可查看证书中的详细信息。但你是否曾好奇过一本证书是如何诞生的，以及 HTTPS 背后的 SSL/TLS 是如何在工作过程中发挥功效以保证通信安全的，什么是 CA、PCA，什么又是证书链和 X...

网络安全科普：奇妙的 SSL/TLS 证书（基础篇）

如果某个网站受 SSL 证书保护，其相应的 URL 中会显示 HTTPS（超文本传输安全协议）。单击浏览器地址栏的小绿锁，即可查看证书中的详细信息。但你是否曾好奇过一本证书是如何诞生的，以及 HTTPS 背后的 SSL/TLS 是如何在工作过程中发挥功效以保证通信安全的，什么是 CA、PCA，什么又是证书链和 X...

base64

组合 a 标签与 canvas 实现图片资源的安全下载

普通用户下载图片时只需一个「右键另存为」操作即可完成，但当我们做在线编辑器、整个 UI 都被自定义实现时，如何解决不同域问题并实现页面中图片资源的安全下载呢？本文就解决该问题过程中所涉及的正则表达式、Web API 和 canvas 操作进行记录。

canvas

组合 a 标签与 canvas 实现图片资源的安全下载

普通用户下载图片时只需一个「右键另存为」操作即可完成，但当我们做在线编辑器、整个 UI 都被自定义实现时，如何解决不同域问题并实现页面中图片资源的安全下载呢？本文就解决该问题过程中所涉及的正则表达式、Web API 和 canvas 操作进行记录。

chrome

结合 React Fiber 结构与 chrome 插件，谈谈无侵入自动化表单的技术尝试

作为一名前端工程师，不论你处于什么业务方向，肯定都与表单打过交道，当然如果你是服务端、产品、测试同学，想必也早已接触过表单这类场景。让我们试想一下，如果研发需求的功能测试依赖一个复杂表单的填写而得以继续，那么频繁的表单填写在研发自测和 QA 验证过程中就会占用过多碎片化的时间，此类需要频繁执行以生成测试数据或推进...

Service Worker 实践指南

本文就利用 Service Worker 解决问题的过程中遇到的不少问题加以总结，进行记录，主要关注点在 Service Worker 的注册注销、运行时判断、线程间通信及调试几方面，涉及的内容从技术细节上包含 postMessage、MessageChannel、IndexedDB 及开发者调试工具等。

如何实现一个前端监控回放系统

本文通过组合介绍了各类 Web API 及一些新技术，试图通过技术调研以及实际项目开发中总结的经验，为大家在考虑解决「如何实现一个前端监控回放系统」这一问题上提供思路，本文介绍中若有未涉及到的缺漏之处，也欢迎评论告知补充。

city

class

craco

前端开发中的流程自动化与提效实践

随着前端的发展，越来越多的工具库、方法被用在日常研发流程中，这大大提升了业务开发的效率，而随着各类自动化流程的建设，开发同学也不再需要关注到每一个细节。前段时间项目阶段性交付，在推进的过程中也做了不少尝试，虽然从长期看，这类工作最后可能都该收敛到基础设施部门或者标准的自动化流程中去，但并不妨碍我通过实践来落实一些...

data

Spark的单机部署与测试笔记

前言：Spark作为最有可能代替mapreduce的分布式计算框架，正受到广泛的关注。相比Hadoop来说，Spark的中间计算结果存于内存无疑给计算过程节省了很多时间，于是想试试看其与Hadoop有什么不一样的地方，就有了这篇Spark的单机部署与测试笔记。

大数据利器：浅谈数据可视化

前言: 什么是数据可视化？数据可视化主要旨在借助于图形化手段，清晰有效地传达与沟通信息。为了有效地传达思想概念，美学形式与功能需要齐头并进，通过直观地传达关键的方面与特征，从而实现对于相当稀疏而又复杂的数据集的深入洞察。

debug

基于一次应用卡死问题所做的前端性能评估与优化尝试

在上个月，由于客户反馈客户端卡死现象但我们远程却难以复现此现象，于是我们组织了一次现场上门故障排查，并希望基于此次观察与优化，为客户端开发提供一些整体的优化升级。当然，在尝试过程中，也发现了不少适用于通用前端项目开发的一些故障排查与性能评估的手段，于是总结此文，希望可以对读者有所帮助。

deck.gl

从零开始学习时空数据可视化（一）

glmaps 是一个包含多个时空数据可视化示例代码集与学习教程的开源项目。该项目中的可视化效果基于可视化库 three.js 与 deck.gl 实现，非常容易上手，希望本项目对正在时空可视化学习之路上探寻的你有所帮助。

从零开始学习时空数据可视化（序）

glmaps 是一个包含多个时空数据可视化示例代码集与学习教程的开源项目。该项目中的可视化效果基于可视化库 three.js 与 deck.gl 实现，非常容易上手，希望本项目对正在时空可视化学习之路上探寻的你有所帮助。

download

组合 a 标签与 canvas 实现图片资源的安全下载

普通用户下载图片时只需一个「右键另存为」操作即可完成，但当我们做在线编辑器、整个 UI 都被自定义实现时，如何解决不同域问题并实现页面中图片资源的安全下载呢？本文就解决该问题过程中所涉及的正则表达式、Web API 和 canvas 操作进行记录。

electron

基于一次应用卡死问题所做的前端性能评估与优化尝试

在上个月，由于客户反馈客户端卡死现象但我们远程却难以复现此现象，于是我们组织了一次现场上门故障排查，并希望基于此次观察与优化，为客户端开发提供一些整体的优化升级。当然，在尝试过程中，也发现了不少适用于通用前端项目开发的一些故障排查与性能评估的手段，于是总结此文，希望可以对读者有所帮助。

fiber

结合 React Fiber 结构与 chrome 插件，谈谈无侵入自动化表单的技术尝试

作为一名前端工程师，不论你处于什么业务方向，肯定都与表单打过交道，当然如果你是服务端、产品、测试同学，想必也早已接触过表单这类场景。让我们试想一下，如果研发需求的功能测试依赖一个复杂表单的填写而得以继续，那么频繁的表单填写在研发自测和 QA 验证过程中就会占用过多碎片化的时间，此类需要频繁执行以生成测试数据或推进...

form

git hooks

前端开发中的流程自动化与提效实践

随着前端的发展，越来越多的工具库、方法被用在日常研发流程中，这大大提升了业务开发的效率，而随着各类自动化流程的建设，开发同学也不再需要关注到每一个细节。前段时间项目阶段性交付，在推进的过程中也做了不少尝试，虽然从长期看，这类工作最后可能都该收敛到基础设施部门或者标准的自动化流程中去，但并不妨碍我通过实践来落实一些...

hadoop

hexo

husky

前端开发中的流程自动化与提效实践

随着前端的发展，越来越多的工具库、方法被用在日常研发流程中，这大大提升了业务开发的效率，而随着各类自动化流程的建设，开发同学也不再需要关注到每一个细节。前段时间项目阶段性交付，在推进的过程中也做了不少尝试，虽然从长期看，这类工作最后可能都该收敛到基础设施部门或者标准的自动化流程中去，但并不妨碍我通过实践来落实一些...

iOS

造砖指南

人生已经如此艰难，今天就说个自己的故事让大家开心一下好了。

iframe

面向微前端，谈谈 JavaScript 隔离沙箱机制的古往今来

随着微前端的不断发展、被更多的团队采用，越来越多开始对沙箱这个概念有所了解。沙箱，即 sandbox，意指一个允许你独立运行程序的虚拟环境，沙箱可以隔离当前执行的环境作用域和外部的其他作用域，外界无法修改该环境内任何信息，沙箱内的东西单独运行，环境间相互不受影响。本文计划谈谈微前端的 JavaScript 隔离，...

Service Worker 实践指南

本文就利用 Service Worker 解决问题的过程中遇到的不少问题加以总结，进行记录，主要关注点在 Service Worker 的注册注销、运行时判断、线程间通信及调试几方面，涉及的内容从技术细节上包含 postMessage、MessageChannel、IndexedDB 及开发者调试工具等。

如何实现一个前端监控回放系统

本文通过组合介绍了各类 Web API 及一些新技术，试图通过技术调研以及实际项目开发中总结的经验，为大家在考虑解决「如何实现一个前端监控回放系统」这一问题上提供思路，本文介绍中若有未涉及到的缺漏之处，也欢迎评论告知补充。

jdk

js

[译] Vue.js 2.0 Introduction

Vue.js 2.0 于今天早上发布，尝试对 Introduction 进行了中文翻译, 该版本已被收录进 Vue.js 2.0 官方中文版.

mTLS

网络安全科普：详解 HTTPS 与 TLS

作为普通用户，当我们上网冲浪时，是否想过为什么越来越多的域名输入时是 HTTPS 开头而非 HTTP 么？HTTPS 相比 HTTP 多出来的 S 到底多了些什么？TLS 和 SSL 又是什么，握手机制是如何进行的？其在七层协议中处于什么位置，与 HTTPS 相关的概念比如 CA 证书、Keyless、DTLS、...

metadata

TypeScript 装饰器介绍与示例教程

如果你使用过 Angular，那么在日常的开发过程中，你已经大量使用过由 Angular 官方提供的各类由装饰器封装的特性了，比如 @Component 以及 @ViewChild 等等。即便不了解其实现原理，这也不影响我们熟练的通过它来实现各种需求。但如果我们深入了解隐藏在其背后的装饰器，便能将这个黑盒变成我们...

mock

结合 React Fiber 结构与 chrome 插件，谈谈无侵入自动化表单的技术尝试

作为一名前端工程师，不论你处于什么业务方向，肯定都与表单打过交道，当然如果你是服务端、产品、测试同学，想必也早已接触过表单这类场景。让我们试想一下，如果研发需求的功能测试依赖一个复杂表单的填写而得以继续，那么频繁的表单填写在研发自测和 QA 验证过程中就会占用过多碎片化的时间，此类需要频繁执行以生成测试数据或推进...

ngrx

ngxs

npm

npx

plugin

poj

postMessage

Service Worker 实践指南

本文就利用 Service Worker 解决问题的过程中遇到的不少问题加以总结，进行记录，主要关注点在 Service Worker 的注册注销、运行时判断、线程间通信及调试几方面，涉及的内容从技术细节上包含 postMessage、MessageChannel、IndexedDB 及开发者调试工具等。

puppeteer

如何实现一个前端监控回放系统

本文通过组合介绍了各类 Web API 及一些新技术，试图通过技术调研以及实际项目开发中总结的经验，为大家在考虑解决「如何实现一个前端监控回放系统」这一问题上提供思路，本文介绍中若有未涉及到的缺漏之处，也欢迎评论告知补充。

用 puppeteer 实现网站自动分页截取的趣事

最近因为工作中的一个需求，需要针对用户数据页面进行分页并截屏并返回 PDF 文件，期间用到了 puppeteer 与 HTML 分页算法，还找到了一个不错的插件，于是来聊些有趣的事。

react

结合 React Fiber 结构与 chrome 插件，谈谈无侵入自动化表单的技术尝试

作为一名前端工程师，不论你处于什么业务方向，肯定都与表单打过交道，当然如果你是服务端、产品、测试同学，想必也早已接触过表单这类场景。让我们试想一下，如果研发需求的功能测试依赖一个复杂表单的填写而得以继续，那么频繁的表单填写在研发自测和 QA 验证过程中就会占用过多碎片化的时间，此类需要频繁执行以生成测试数据或推进...

spark

Spark的单机部署与测试笔记

前言：Spark作为最有可能代替mapreduce的分布式计算框架，正受到广泛的关注。相比Hadoop来说，Spark的中间计算结果存于内存无疑给计算过程节省了很多时间，于是想试试看其与Hadoop有什么不一样的地方，就有了这篇Spark的单机部署与测试笔记。

spatio

student

temporal

three.js

从零开始学习时空数据可视化（一）

glmaps 是一个包含多个时空数据可视化示例代码集与学习教程的开源项目。该项目中的可视化效果基于可视化库 three.js 与 deck.gl 实现，非常容易上手，希望本项目对正在时空可视化学习之路上探寻的你有所帮助。

从零开始学习时空数据可视化（序）

glmaps 是一个包含多个时空数据可视化示例代码集与学习教程的开源项目。该项目中的可视化效果基于可视化库 three.js 与 deck.gl 实现，非常容易上手，希望本项目对正在时空可视化学习之路上探寻的你有所帮助。

threejs

Three.js 入门与扫盲-基础结构,坐标系与几何类型介绍

WebGL 是基于 OpenGL ES 2.0 的 Web 标准，可以通过 HTML5 Canvas 元素作为 DOM 接口访问。Three.js 封装了底层的的图形操作接口,使用户可以便捷的操作构建空间物体与场景,实现 3D 可视化. 一个完整的 Three.js 必定包含一些必要的结构,例如场景,相机等等,而...

tree-shaking

Tree Shaking 简介

本周分享会上，给团队同学分享了 Tree Shaking 的相关内容。哈哈是的，这已经不是一个新鲜事了……

tslint

typing

vis

Learning in IEEE VIS 2016

I went to Baltimore, USA last week. It’s a city near Washington D.C, and IEEE VIS 2016 returned to there after ten years, finally. I shared this keynote at i...

visualization

Learning in IEEE VIS 2016

I went to Baltimore, USA last week. It’s a city near Washington D.C, and IEEE VIS 2016 returned to there after ten years, finally. I shared this keynote at i...

vue

[译] Vue.js 2.0 Introduction

Vue.js 2.0 于今天早上发布，尝试对 Introduction 进行了中文翻译, 该版本已被收录进 Vue.js 2.0 官方中文版.

webpack

Tree Shaking 简介

本周分享会上，给团队同学分享了 Tree Shaking 的相关内容。哈哈是的，这已经不是一个新鲜事了……

上海

冬日打车日记

今晚打车，司机停在一个靠近上车点拐弯口的路边，一直没开进来，期间他一直跟我站内信确认“出来了吗”，我和往常一样，快速回复说我就在定位点等他。回复完，貌似司机也没有动弹。

事件

结合 React Fiber 结构与 chrome 插件，谈谈无侵入自动化表单的技术尝试

作为一名前端工程师，不论你处于什么业务方向，肯定都与表单打过交道，当然如果你是服务端、产品、测试同学，想必也早已接触过表单这类场景。让我们试想一下，如果研发需求的功能测试依赖一个复杂表单的填写而得以继续，那么频繁的表单填写在研发自测和 QA 验证过程中就会占用过多碎片化的时间，此类需要频繁执行以生成测试数据或推进...

鼠标事件基础回顾

回到图形化编辑器的开发上，当用户添加文字、图片或者任何其他素材时，选中、取消选中以及成组等复杂操作是必不可少的功能之一，这里要用的便是鼠标事件了。

五四

五四运动

五四青年

交叉证书

网络安全科普：奇妙的 SSL/TLS 证书（进阶篇）

如果某个网站受 SSL 证书保护，其相应的 URL 中会显示 HTTPS（超文本传输安全协议）。单击浏览器地址栏的小绿锁，即可查看证书中的详细信息。但你是否曾好奇过一本证书是如何诞生的，以及 HTTPS 背后的 SSL/TLS 是如何在工作过程中发挥功效以保证通信安全的，什么是 CA、PCA，什么又是证书链和 X...

网络安全科普：奇妙的 SSL/TLS 证书（基础篇）

如果某个网站受 SSL 证书保护，其相应的 URL 中会显示 HTTPS（超文本传输安全协议）。单击浏览器地址栏的小绿锁，即可查看证书中的详细信息。但你是否曾好奇过一本证书是如何诞生的，以及 HTTPS 背后的 SSL/TLS 是如何在工作过程中发挥功效以保证通信安全的，什么是 CA、PCA，什么又是证书链和 X...

人生

2023年终总结

这一年里充满了各种变化，也有不少东西值得记录，比如令人满意的健身打卡，逐步调整的投资仓位，以及通过阅读学习和出行游玩收获的喜悦。

2022年终总结

不管怎么说，挑挑拣拣，还是能拾的一些值得记录的片段。

人脸识别

代数效应

优化

Tree Shaking 简介

本周分享会上，给团队同学分享了 Tree Shaking 的相关内容。哈哈是的，这已经不是一个新鲜事了……

Coding with Angular - Tips and Tricks

当你第一次从其他框架切换到 Angular 是否会有些迷茫，在感叹框架大而全的同时却对其中很多概念不尽了解？近期，为了给不断加入团队的新同学营造一个快速上手的环境，于是把团队的项目代码仔细阅读了一遍，从中挑出了一些在大家提交代码中反复会「犯的错误」，并总结成一系列值得 Angular 新手注意和学习的一些最佳实践。

[译] JavaScript 引擎基础：原型优化

本文就所有 JavaScript 引擎中常见的一些关键基础内容进行了介绍——这不仅仅局限于 V8 引擎。作为一名 JavaScript 开发者，深入了解 JavaScript 引擎是如何工作的将有助于你了解自己所写代码的性能特征。

依赖

依赖注入

TypeScript 装饰器介绍与示例教程

如果你使用过 Angular，那么在日常的开发过程中，你已经大量使用过由 Angular 官方提供的各类由装饰器封装的特性了，比如 @Component 以及 @ViewChild 等等。即便不了解其实现原理，这也不影响我们熟练的通过它来实现各种需求。但如果我们深入了解隐藏在其背后的装饰器，便能将这个黑盒变成我们...

储备

食物储备清单

食物储备清单，分为摄入量建议、储备清单简介、必需大类、非必需大类等几个章节。与此同时，本计划因为个人常识所限，可能存在缺漏，如有偏差后续会纠偏补充，如有迭代会及时更新至 https://hijiangtao.github.io

儿童节

元数据

TypeScript 装饰器介绍与示例教程

如果你使用过 Angular，那么在日常的开发过程中，你已经大量使用过由 Angular 官方提供的各类由装饰器封装的特性了，比如 @Component 以及 @ViewChild 等等。即便不了解其实现原理，这也不影响我们熟练的通过它来实现各种需求。但如果我们深入了解隐藏在其背后的装饰器，便能将这个黑盒变成我们...

公募基金

风雨过后见彩虹：公募基金2022年度报告摘录与解读

去年，我通过问答的形式将阅读完公募基金年报后的一些感想进行了总结。如今，已过去一年，按照《公开募集证券投资基金信息披露管理办法》规定，所有公募基金过去一年的年报也已经全部生成，我计划今后将其作为一个年更栏目发表于个人博客，暂且就叫《时间的朋友》吧。那么，接下来就让我们开始2023年版的报告解读吧。

内卷

我和他一个月了

我每次来都能遇到他，我的意思是说，就这家星巴克，每次周末来，我都能跟这个小哥相遇。

内核

写信活动

冬天

冬日打车日记

今晚打车，司机停在一个靠近上车点拐弯口的路边，一直没开进来，期间他一直跟我站内信确认“出来了吗”，我和往常一样，快速回复说我就在定位点等他。回复完，貌似司机也没有动弹。

分页算法

用 puppeteer 实现网站自动分页截取的趣事

最近因为工作中的一个需求，需要针对用户数据页面进行分页并截屏并返回 PDF 文件，期间用到了 puppeteer 与 HTML 分页算法，还找到了一个不错的插件，于是来聊些有趣的事。

刷机

造砖指南

人生已经如此艰难，今天就说个自己的故事让大家开心一下好了。

前端

结合 React Fiber 结构与 chrome 插件，谈谈无侵入自动化表单的技术尝试

作为一名前端工程师，不论你处于什么业务方向，肯定都与表单打过交道，当然如果你是服务端、产品、测试同学，想必也早已接触过表单这类场景。让我们试想一下，如果研发需求的功能测试依赖一个复杂表单的填写而得以继续，那么频繁的表单填写在研发自测和 QA 验证过程中就会占用过多碎片化的时间，此类需要频繁执行以生成测试数据或推进...

前端开发中的流程自动化与提效实践

随着前端的发展，越来越多的工具库、方法被用在日常研发流程中，这大大提升了业务开发的效率，而随着各类自动化流程的建设，开发同学也不再需要关注到每一个细节。前段时间项目阶段性交付，在推进的过程中也做了不少尝试，虽然从长期看，这类工作最后可能都该收敛到基础设施部门或者标准的自动化流程中去，但并不妨碍我通过实践来落实一些...

Service Worker 实践指南

本文就利用 Service Worker 解决问题的过程中遇到的不少问题加以总结，进行记录，主要关注点在 Service Worker 的注册注销、运行时判断、线程间通信及调试几方面，涉及的内容从技术细节上包含 postMessage、MessageChannel、IndexedDB 及开发者调试工具等。

用 puppeteer 实现网站自动分页截取的趣事

最近因为工作中的一个需求，需要针对用户数据页面进行分页并截屏并返回 PDF 文件，期间用到了 puppeteer 与 HTML 分页算法，还找到了一个不错的插件，于是来聊些有趣的事。

Coding with Angular - Tips and Tricks

当你第一次从其他框架切换到 Angular 是否会有些迷茫，在感叹框架大而全的同时却对其中很多概念不尽了解？近期，为了给不断加入团队的新同学营造一个快速上手的环境，于是把团队的项目代码仔细阅读了一遍，从中挑出了一些在大家提交代码中反复会「犯的错误」，并总结成一系列值得 Angular 新手注意和学习的一些最佳实践。

JavaScript 考古史闲聊

今天在整理 JavaScript 月刊新一期内容时，看到一篇文章感觉不错，遂推荐一下。文章标题是 How JavaScript Grew Up and Became a Real Language，讲述的是 JavaScript 一路走来是如何一步步成为一门真正的编程语言的故事。

JavaScript 模块化方案总结

本文包含两部分，第一部分通过简明的描述介绍什么是 CommonJS、AMD、CMD、UMD、ES Module 以及它们的常见用法，第二部分则根据实际问题指出在正常的 webpack 构建过程中该如何指定打包配置中的模块化参数。

让我们在2019年重新认识 Flutter

现在是2019年，让我们认真来看看备受瞩目的 Flutter，重新认识一下它。本文首先简要回顾移动开发（跨平台开发）的发展历史，并谈谈不同阶段跨平台解决方案的优劣；接着从 WHAT / HOW / WHY 三个方面详细来聊聊 Flutter，并结合简单的 Dart 代码说说开发者该如何上手，随后展示几个 Demo...

[译] JavaScript 引擎基础：原型优化

本文就所有 JavaScript 引擎中常见的一些关键基础内容进行了介绍——这不仅仅局限于 V8 引擎。作为一名 JavaScript 开发者，深入了解 JavaScript 引擎是如何工作的将有助于你了解自己所写代码的性能特征。

谈谈 App Shell 与 Skeleton Screen 实现

作为前端开发老生常谈的话题之一，提升用户体验的口号一直不绝于耳。但怎样的体验改进才算是有提升，用户一方是否认可你的改进与优化，这些都是可以展开详细讨论的话题。

精读 The Cost of JavaScript In 2018

如今，JavaScript 仍然是我们向移动终端分发页面时成本最高的资源，因为它可以在很大程度上延迟页面的交互性。一个页面在开发时都要考虑哪些问题，用户实际访问页面的效果与感受又是如何，Google 开发 Lighthouse 的初衷以及其具体用途，JavaScript 的成本究竟有多高，如何降低 JavaScr...

2018 Google 移动技术最新进展速览

这周在 Google 上海办公室参加了一场分享会，他们的华人工程师向与会人员同步了 Google 在移动技术上的最新动态。我尝试从一名前端开发者的视角总结了这次分享会的内容，如有理解不准确的地方欢迎指出。

[译] JavaScript 引擎基础：Shapes 和 Inline Caches

本文就所有 JavaScript 引擎中常见的一些关键基础内容进行了介绍——这不仅仅局限于 V8 引擎。作为一名 JavaScript 开发者，深入了解 JavaScript 引擎是如何工作的将有助于你了解自己所写代码的性能特征。

前端优化

基于一次应用卡死问题所做的前端性能评估与优化尝试

在上个月，由于客户反馈客户端卡死现象但我们远程却难以复现此现象，于是我们组织了一次现场上门故障排查，并希望基于此次观察与优化，为客户端开发提供一些整体的优化升级。当然，在尝试过程中，也发现了不少适用于通用前端项目开发的一些故障排查与性能评估的手段，于是总结此文，希望可以对读者有所帮助。

前端基础

鼠标事件基础回顾

回到图形化编辑器的开发上，当用户添加文字、图片或者任何其他素材时，选中、取消选中以及成组等复杂操作是必不可少的功能之一，这里要用的便是鼠标事件了。

前端监控

Service Worker 实践指南

本文就利用 Service Worker 解决问题的过程中遇到的不少问题加以总结，进行记录，主要关注点在 Service Worker 的注册注销、运行时判断、线程间通信及调试几方面，涉及的内容从技术细节上包含 postMessage、MessageChannel、IndexedDB 及开发者调试工具等。

如何实现一个前端监控回放系统

本文通过组合介绍了各类 Web API 及一些新技术，试图通过技术调研以及实际项目开发中总结的经验，为大家在考虑解决「如何实现一个前端监控回放系统」这一问题上提供思路，本文介绍中若有未涉及到的缺漏之处，也欢迎评论告知补充。

加密

网络安全科普：奇妙的 SSL/TLS 证书（进阶篇）

如果某个网站受 SSL 证书保护，其相应的 URL 中会显示 HTTPS（超文本传输安全协议）。单击浏览器地址栏的小绿锁，即可查看证书中的详细信息。但你是否曾好奇过一本证书是如何诞生的，以及 HTTPS 背后的 SSL/TLS 是如何在工作过程中发挥功效以保证通信安全的，什么是 CA、PCA，什么又是证书链和 X...

网络安全科普：奇妙的 SSL/TLS 证书（基础篇）

如果某个网站受 SSL 证书保护，其相应的 URL 中会显示 HTTPS（超文本传输安全协议）。单击浏览器地址栏的小绿锁，即可查看证书中的详细信息。但你是否曾好奇过一本证书是如何诞生的，以及 HTTPS 背后的 SSL/TLS 是如何在工作过程中发挥功效以保证通信安全的，什么是 CA、PCA，什么又是证书链和 X...

TLS/ESNI/ECH/DoT/DoH/JA3 - 谈谈 HTTPS 网络下浏览体验安全性的最后缝隙

有了 HTTPS 我们的网络访问就完美无缺了吗？TLS 在握手 Client Hello 阶段的数据包，包含客户端想访问的地址等信息，而这些信息是明文传输的，这使得第三方可以通过监听等手段知道你想访问哪些网址。本文会按照加密方式的加工流程倒序介绍，先介绍关于 TLS 握手阶段的 SNI 相关信息，再谈谈 DNS ...

北京

北漂青年的租房维权日记

这么些年，租过二房东、小中介的房子，也租过大平台的房子，但第一次遇到需要扯皮才能退租的”黑中介”，可能是因为第一次住在”郊区”，地头蛇过于强势，但终于在各种折腾下完成了第一次系统性的维权，将所有调研和行动记录于此，希望帮到有缘人。

北漂

北漂青年的租房维权日记

这么些年，租过二房东、小中介的房子，也租过大平台的房子，但第一次遇到需要扯皮才能退租的”黑中介”，可能是因为第一次住在”郊区”，地头蛇过于强势，但终于在各种折腾下完成了第一次系统性的维权，将所有调研和行动记录于此，希望帮到有缘人。

单元测试

Jest 配置与 React Hook 单元测试教程

本文基于 Jest 框架的集成配置以及如何编写 React 单元测试进行介绍，本文不关注 UI 层的测试实现，且不关注常规的 util 方法类测试实现，只围绕如何就 React 特性 Hook 进行单元测试用例编写展开。

卡顿问题

基于一次应用卡死问题所做的前端性能评估与优化尝试

在上个月，由于客户反馈客户端卡死现象但我们远程却难以复现此现象，于是我们组织了一次现场上门故障排查，并希望基于此次观察与优化，为客户端开发提供一些整体的优化升级。当然，在尝试过程中，也发现了不少适用于通用前端项目开发的一些故障排查与性能评估的手段，于是总结此文，希望可以对读者有所帮助。

卫生

拔牙日记

上两周去拔牙，遇到一个操作非常仔细的医生，不仅细心交待，还给我分析牙齿生长情况，以及可能存在的术后问题。

原型

[译] JavaScript 引擎基础：原型优化

本文就所有 JavaScript 引擎中常见的一些关键基础内容进行了介绍——这不仅仅局限于 V8 引擎。作为一名 JavaScript 开发者，深入了解 JavaScript 引擎是如何工作的将有助于你了解自己所写代码的性能特征。

原生

发热原理

新型冠状病毒感染日记暨读者朋友QA发布会

因为看到游泳馆开门营业了，但是需要48小时核酸证明，于是上周四出门做了个核酸，就是这唯一一次不到10分钟的出门经历，让我🐑了。因为想游泳于是做核酸，然后做核酸阳了，不能游泳，我属于是那个纯纯的大怨种了。

口腔

拔牙日记

上两周去拔牙，遇到一个操作非常仔细的医生，不仅细心交待，还给我分析牙齿生长情况，以及可能存在的术后问题。

可视化

绘制 D3 TreeMap 动画的一些设计思路

在 Google 里输入 D3 TreeMap 两个关键词，结果就能出来一大堆，但查到的几个 demo 都还不太能满足我的需求，相比基础的 TreeMap 布局，除了 demo 一般抽象粒度都不太够外，我还希望……

从零开始学习时空数据可视化（一）

glmaps 是一个包含多个时空数据可视化示例代码集与学习教程的开源项目。该项目中的可视化效果基于可视化库 three.js 与 deck.gl 实现，非常容易上手，希望本项目对正在时空可视化学习之路上探寻的你有所帮助。

从零开始学习时空数据可视化（序）

glmaps 是一个包含多个时空数据可视化示例代码集与学习教程的开源项目。该项目中的可视化效果基于可视化库 three.js 与 deck.gl 实现，非常容易上手，希望本项目对正在时空可视化学习之路上探寻的你有所帮助。

Learning in IEEE VIS 2016

I went to Baltimore, USA last week. It’s a city near Washington D.C, and IEEE VIS 2016 returned to there after ten years, finally. I shared this keynote at i...

咖啡店

我和他一个月了

我每次来都能遇到他，我的意思是说，就这家星巴克，每次周末来，我都能跟这个小哥相遇。

响应式编程

四千周

回顾

图形学

图片下载

组合 a 标签与 canvas 实现图片资源的安全下载

普通用户下载图片时只需一个「右键另存为」操作即可完成，但当我们做在线编辑器、整个 UI 都被自定义实现时，如何解决不同域问题并实现页面中图片资源的安全下载呢？本文就解决该问题过程中所涉及的正则表达式、Web API 和 canvas 操作进行记录。

在家办公

在家办公这一个月

从来没想过如果有一天在家办公，会是什么样的感觉，直到这突如其来的变数，不知觉中已在家办公一个月了。

基金

十问十答，从公募基金年报中读懂未来

相比季报，通过阅读公募基金年报，我们可以了解更多，这里不仅有基金的所有持仓明细、管理人及内部人员的持仓占比，更多的是还能辅助完善我们对身边这个世界运转的认知，并帮助我们在投资上走的更远。我总结了自己从年报中获得的十问十答，分享给大家。

基金经理

风雨过后见彩虹：公募基金2022年度报告摘录与解读

去年，我通过问答的形式将阅读完公募基金年报后的一些感想进行了总结。如今，已过去一年，按照《公开募集证券投资基金信息披露管理办法》规定，所有公募基金过去一年的年报也已经全部生成，我计划今后将其作为一个年更栏目发表于个人博客，暂且就叫《时间的朋友》吧。那么，接下来就让我们开始2023年版的报告解读吧。

多播

央行

货币制度：货币、供给与中央银行

在广义的货币形式没有出现之前，人们通过物物交换到达交易的目的。这种经济需要需求的双向一致性，即刚好彼此都有对方想要的物品或服务。

字符

如何用 CSS 强调标记文本元素

当我们在 Web 上做文本编辑器时，最常见的一个场景便是和文字样式打交道了。比如像语文课本那样需要在每篇文章要学习的生字上标上一个小黑点，这个时候就该用到 CSS 中 text-emphasis-style 这个属性。

学生

宇宙

实战

居家隔离

新型冠状病毒感染日记暨读者朋友QA发布会

因为看到游泳馆开门营业了，但是需要48小时核酸证明，于是上周四出门做了个核酸，就是这唯一一次不到10分钟的出门经历，让我🐑了。因为想游泳于是做核酸，然后做核酸阳了，不能游泳，我属于是那个纯纯的大怨种了。

食物储备清单

食物储备清单，分为摄入量建议、储备清单简介、必需大类、非必需大类等几个章节。与此同时，本计划因为个人常识所限，可能存在缺漏，如有偏差后续会纠偏补充，如有迭代会及时更新至 https://hijiangtao.github.io

展望

工作

2023年终总结

这一年里充满了各种变化，也有不少东西值得记录，比如令人满意的健身打卡，逐步调整的投资仓位，以及通过阅读学习和出行游玩收获的喜悦。

2022年终总结

不管怎么说，挑挑拣拣，还是能拾的一些值得记录的片段。

踏入社会这两年

明天，便到了工作满两年的日子，习惯上还是写些什么，留以纪念吧。

回复2019的信件

当准备开始写年终时，我突然紧张自己一事无成，但仔细想想，还是能拼凑出几件事来说一说。

感谢2018所给予的这些

临近年终，在这充满故事的一年里，虽有惊喜收获，但也难免时不时失落沮丧。感谢2018所给予的这些，用文字记录下这跌宕起伏的一年。

校招结束，谈谈我对第一份工作的认识

刚将三方寄给了签约公司，我的校招终于结束了。正好看到这个问题，看到很多人力资源相关的人士解读收获很大，那我就从自身的经历来聊聊这几个月里我对「第一份工作的重要性，以及我们都需要考虑清楚什么」这个问题的认识吧。总结自己求职过程的所见所闻所想，算是对自己的一个交代，也希望让大家看到一个普通校招生的思考。

工具

结合 React Fiber 结构与 chrome 插件，谈谈无侵入自动化表单的技术尝试

作为一名前端工程师，不论你处于什么业务方向，肯定都与表单打过交道，当然如果你是服务端、产品、测试同学，想必也早已接触过表单这类场景。让我们试想一下，如果研发需求的功能测试依赖一个复杂表单的填写而得以继续，那么频繁的表单填写在研发自测和 QA 验证过程中就会占用过多碎片化的时间，此类需要频繁执行以生成测试数据或推进...

希望

希望

先生之风，山高水长。大师精神，千古流芳。

年度总结

2023年终总结

这一年里充满了各种变化，也有不少东西值得记录，比如令人满意的健身打卡，逐步调整的投资仓位，以及通过阅读学习和出行游玩收获的喜悦。

2022年终总结

不管怎么说，挑挑拣拣，还是能拾的一些值得记录的片段。

回复2019的信件

当准备开始写年终时，我突然紧张自己一事无成，但仔细想想，还是能拼凑出几件事来说一说。

年报

风雨过后见彩虹：公募基金2022年度报告摘录与解读

去年，我通过问答的形式将阅读完公募基金年报后的一些感想进行了总结。如今，已过去一年，按照《公开募集证券投资基金信息披露管理办法》规定，所有公募基金过去一年的年报也已经全部生成，我计划今后将其作为一个年更栏目发表于个人博客，暂且就叫《时间的朋友》吧。那么，接下来就让我们开始2023年版的报告解读吧。

十问十答，从公募基金年报中读懂未来

相比季报，通过阅读公募基金年报，我们可以了解更多，这里不仅有基金的所有持仓明细、管理人及内部人员的持仓占比，更多的是还能辅助完善我们对身边这个世界运转的认知，并帮助我们在投资上走的更远。我总结了自己从年报中获得的十问十答，分享给大家。

序列化

如何实现一个前端监控回放系统

本文通过组合介绍了各类 Web API 及一些新技术，试图通过技术调研以及实际项目开发中总结的经验，为大家在考虑解决「如何实现一个前端监控回放系统」这一问题上提供思路，本文介绍中若有未涉及到的缺漏之处，也欢迎评论告知补充。

引擎

[译] JavaScript 引擎基础：原型优化

本文就所有 JavaScript 引擎中常见的一些关键基础内容进行了介绍——这不仅仅局限于 V8 引擎。作为一名 JavaScript 开发者，深入了解 JavaScript 引擎是如何工作的将有助于你了解自己所写代码的性能特征。

[译] JavaScript 引擎基础：Shapes 和 Inline Caches

本文就所有 JavaScript 引擎中常见的一些关键基础内容进行了介绍——这不仅仅局限于 V8 引擎。作为一名 JavaScript 开发者，深入了解 JavaScript 引擎是如何工作的将有助于你了解自己所写代码的性能特征。

弱方兑换保证

香港联系汇率制度

香港联系汇率制度是香港货币金融稳定的支柱，其自1983年10月17日在香港实施，透过严谨、稳健和透明的货币发行局制度，使港元汇率保持稳定在7.75至7.85港元兑1美元的区间内。

强调标记

如何用 CSS 强调标记文本元素

当我们在 Web 上做文本编辑器时，最常见的一个场景便是和文字样式打交道了。比如像语文课本那样需要在每篇文章要学习的生字上标上一个小黑点，这个时候就该用到 CSS 中 text-emphasis-style 这个属性。

微前端

面向微前端，谈谈 JavaScript 隔离沙箱机制的古往今来

随着微前端的不断发展、被更多的团队采用，越来越多开始对沙箱这个概念有所了解。沙箱，即 sandbox，意指一个允许你独立运行程序的虚拟环境，沙箱可以隔离当前执行的环境作用域和外部的其他作用域，外界无法修改该环境内任何信息，沙箱内的东西单独运行，环境间相互不受影响。本文计划谈谈微前端的 JavaScript 隔离，...

态度

2023年终总结

这一年里充满了各种变化，也有不少东西值得记录，比如令人满意的健身打卡，逐步调整的投资仓位，以及通过阅读学习和出行游玩收获的喜悦。

思考

2023年终总结

这一年里充满了各种变化，也有不少东西值得记录，比如令人满意的健身打卡，逐步调整的投资仓位，以及通过阅读学习和出行游玩收获的喜悦。

性能优化

性能评估

基于一次应用卡死问题所做的前端性能评估与优化尝试

在上个月，由于客户反馈客户端卡死现象但我们远程却难以复现此现象，于是我们组织了一次现场上门故障排查，并希望基于此次观察与优化，为客户端开发提供一些整体的优化升级。当然，在尝试过程中，也发现了不少适用于通用前端项目开发的一些故障排查与性能评估的手段，于是总结此文，希望可以对读者有所帮助。

恋爱

截图

用 puppeteer 实现网站自动分页截取的趣事

最近因为工作中的一个需求，需要针对用户数据页面进行分页并截屏并返回 PDF 文件，期间用到了 puppeteer 与 HTML 分页算法，还找到了一个不错的插件，于是来聊些有趣的事。

打印样式

用 puppeteer 实现网站自动分页截取的趣事

最近因为工作中的一个需求，需要针对用户数据页面进行分页并截屏并返回 PDF 文件，期间用到了 puppeteer 与 HTML 分页算法，还找到了一个不错的插件，于是来聊些有趣的事。

打点

如何用 CSS 强调标记文本元素

当我们在 Web 上做文本编辑器时，最常见的一个场景便是和文字样式打交道了。比如像语文课本那样需要在每篇文章要学习的生字上标上一个小黑点，这个时候就该用到 CSS 中 text-emphasis-style 这个属性。

打车

冬日打车日记

今晚打车，司机停在一个靠近上车点拐弯口的路边，一直没开进来，期间他一直跟我站内信确认“出来了吗”，我和往常一样，快速回复说我就在定位点等他。回复完，貌似司机也没有动弹。

投资

2023年终总结

这一年里充满了各种变化，也有不少东西值得记录，比如令人满意的健身打卡，逐步调整的投资仓位，以及通过阅读学习和出行游玩收获的喜悦。

风雨过后见彩虹：公募基金2022年度报告摘录与解读

去年，我通过问答的形式将阅读完公募基金年报后的一些感想进行了总结。如今，已过去一年，按照《公开募集证券投资基金信息披露管理办法》规定，所有公募基金过去一年的年报也已经全部生成，我计划今后将其作为一个年更栏目发表于个人博客，暂且就叫《时间的朋友》吧。那么，接下来就让我们开始2023年版的报告解读吧。

2022年终总结

不管怎么说，挑挑拣拣，还是能拾的一些值得记录的片段。

十问十答，从公募基金年报中读懂未来

相比季报，通过阅读公募基金年报，我们可以了解更多，这里不仅有基金的所有持仓明细、管理人及内部人员的持仓占比，更多的是还能辅助完善我们对身边这个世界运转的认知，并帮助我们在投资上走的更远。我总结了自己从年报中获得的十问十答，分享给大家。

拔牙

拔牙日记

上两周去拔牙，遇到一个操作非常仔细的医生，不仅细心交待，还给我分析牙齿生长情况，以及可能存在的术后问题。

拖拽

HTML Drag/Drop API 介绍

HTML 的拖拽接口有 DragEvent, DataTransfer, DataTransferItem 和DataTransferItemList。本文着重介绍前两者。

指南

提效

前端开发中的流程自动化与提效实践

随着前端的发展，越来越多的工具库、方法被用在日常研发流程中，这大大提升了业务开发的效率，而随着各类自动化流程的建设，开发同学也不再需要关注到每一个细节。前段时间项目阶段性交付，在推进的过程中也做了不少尝试，虽然从长期看，这类工作最后可能都该收敛到基础设施部门或者标准的自动化流程中去，但并不妨碍我通过实践来落实一些...

插件

摇树

Tree Shaking 简介

本周分享会上，给团队同学分享了 Tree Shaking 的相关内容。哈哈是的，这已经不是一个新鲜事了……

故事

教程

从零开始学习时空数据可视化（一）

glmaps 是一个包含多个时空数据可视化示例代码集与学习教程的开源项目。该项目中的可视化效果基于可视化库 three.js 与 deck.gl 实现，非常容易上手，希望本项目对正在时空可视化学习之路上探寻的你有所帮助。

从零开始学习时空数据可视化（序）

glmaps 是一个包含多个时空数据可视化示例代码集与学习教程的开源项目。该项目中的可视化效果基于可视化库 three.js 与 deck.gl 实现，非常容易上手，希望本项目对正在时空可视化学习之路上探寻的你有所帮助。

数学建模

数据可视化

大数据利器：浅谈数据可视化

前言: 什么是数据可视化？数据可视化主要旨在借助于图形化手段，清晰有效地传达与沟通信息。为了有效地传达思想概念，美学形式与功能需要齐头并进，通过直观地传达关键的方面与特征，从而实现对于相当稀疏而又复杂的数据集的深入洞察。

文本

如何用 CSS 强调标记文本元素

当我们在 Web 上做文本编辑器时，最常见的一个场景便是和文字样式打交道了。比如像语文课本那样需要在每篇文章要学习的生字上标上一个小黑点，这个时候就该用到 CSS 中 text-emphasis-style 这个属性。

新冠

新型冠状病毒感染日记暨读者朋友QA发布会

因为看到游泳馆开门营业了，但是需要48小时核酸证明，于是上周四出门做了个核酸，就是这唯一一次不到10分钟的出门经历，让我🐑了。因为想游泳于是做核酸，然后做核酸阳了，不能游泳，我属于是那个纯纯的大怨种了。

旅行者

日记

冬日打车日记

今晚打车，司机停在一个靠近上车点拐弯口的路边，一直没开进来，期间他一直跟我站内信确认“出来了吗”，我和往常一样，快速回复说我就在定位点等他。回复完，貌似司机也没有动弹。

新型冠状病毒感染日记暨读者朋友QA发布会

因为看到游泳馆开门营业了，但是需要48小时核酸证明，于是上周四出门做了个核酸，就是这唯一一次不到10分钟的出门经历，让我🐑了。因为想游泳于是做核酸，然后做核酸阳了，不能游泳，我属于是那个纯纯的大怨种了。

智齿

拔牙日记

上两周去拔牙，遇到一个操作非常仔细的医生，不仅细心交待，还给我分析牙齿生长情况，以及可能存在的术后问题。

机器学习

枚举

树洞

校招

校招结束，谈谈我对第一份工作的认识

刚将三方寄给了签约公司，我的校招终于结束了。正好看到这个问题，看到很多人力资源相关的人士解读收获很大，那我就从自身的经历来聊聊这几个月里我对「第一份工作的重要性，以及我们都需要考虑清楚什么」这个问题的认识吧。总结自己求职过程的所见所闻所想，算是对自己的一个交代，也希望让大家看到一个普通校招生的思考。

框架

React 与 Vue 的实践总结

最近花了比较大段的时间用于了解和实践主流三大框架其中的两个 - Vue 和 React, 总结一下自己在使用中感受到的两者在提升开发效率上的一些异同之处。

模块化

JavaScript 模块化方案总结

本文包含两部分，第一部分通过简明的描述介绍什么是 CommonJS、AMD、CMD、UMD、ES Module 以及它们的常见用法，第二部分则根据实际问题指出在正常的 webpack 构建过程中该如何指定打包配置中的模块化参数。

次贷危机

正则表达式

组合 a 标签与 canvas 实现图片资源的安全下载

普通用户下载图片时只需一个「右键另存为」操作即可完成，但当我们做在线编辑器、整个 UI 都被自定义实现时，如何解决不同域问题并实现页面中图片资源的安全下载呢？本文就解决该问题过程中所涉及的正则表达式、Web API 和 canvas 操作进行记录。

毕业

感谢2018所给予的这些

临近年终，在这充满故事的一年里，虽有惊喜收获，但也难免时不时失落沮丧。感谢2018所给予的这些，用文字记录下这跌宕起伏的一年。

求职

校招结束，谈谈我对第一份工作的认识

刚将三方寄给了签约公司，我的校招终于结束了。正好看到这个问题，看到很多人力资源相关的人士解读收获很大，那我就从自身的经历来聊聊这几个月里我对「第一份工作的重要性，以及我们都需要考虑清楚什么」这个问题的认识吧。总结自己求职过程的所见所闻所想，算是对自己的一个交代，也希望让大家看到一个普通校招生的思考。

沙箱

如何实现一个前端监控回放系统

本文通过组合介绍了各类 Web API 及一些新技术，试图通过技术调研以及实际项目开发中总结的经验，为大家在考虑解决「如何实现一个前端监控回放系统」这一问题上提供思路，本文介绍中若有未涉及到的缺漏之处，也欢迎评论告知补充。

沙箱机制

面向微前端，谈谈 JavaScript 隔离沙箱机制的古往今来

随着微前端的不断发展、被更多的团队采用，越来越多开始对沙箱这个概念有所了解。沙箱，即 sandbox，意指一个允许你独立运行程序的虚拟环境，沙箱可以隔离当前执行的环境作用域和外部的其他作用域，外界无法修改该环境内任何信息，沙箱内的东西单独运行，环境间相互不受影响。本文计划谈谈微前端的 JavaScript 隔离，...

流

浏览器

点击

鼠标事件基础回顾

回到图形化编辑器的开发上，当用户添加文字、图片或者任何其他素材时，选中、取消选中以及成组等复杂操作是必不可少的功能之一，这里要用的便是鼠标事件了。

物资储备

新型冠状病毒感染日记暨读者朋友QA发布会

因为看到游泳馆开门营业了，但是需要48小时核酸证明，于是上周四出门做了个核酸，就是这唯一一次不到10分钟的出门经历，让我🐑了。因为想游泳于是做核酸，然后做核酸阳了，不能游泳，我属于是那个纯纯的大怨种了。

食物储备清单

食物储备清单，分为摄入量建议、储备清单简介、必需大类、非必需大类等几个章节。与此同时，本计划因为个人常识所限，可能存在缺漏，如有偏差后续会纠偏补充，如有迭代会及时更新至 https://hijiangtao.github.io

状态管理

生活

2023年终总结

这一年里充满了各种变化，也有不少东西值得记录，比如令人满意的健身打卡，逐步调整的投资仓位，以及通过阅读学习和出行游玩收获的喜悦。

2022年终总结

不管怎么说，挑挑拣拣，还是能拾的一些值得记录的片段。

防疫日记

听闻办公楼有疫情了，此刻的我，正坐上从家里回京的高铁，瑟瑟发抖。

踏入社会这两年

明天，便到了工作满两年的日子，习惯上还是写些什么，留以纪念吧。

在家办公这一个月

从来没想过如果有一天在家办公，会是什么样的感觉，直到这突如其来的变数，不知觉中已在家办公一个月了。

生活必需品

食物储备清单

食物储备清单，分为摄入量建议、储备清单简介、必需大类、非必需大类等几个章节。与此同时，本计划因为个人常识所限，可能存在缺漏，如有偏差后续会纠偏补充，如有迭代会及时更新至 https://hijiangtao.github.io

电影

疫情

2022年终总结

不管怎么说，挑挑拣拣，还是能拾的一些值得记录的片段。

监控

着色方法

研究生

示例

社交网络

社交网络配图安全指南

这两天「视觉中国」上了热搜，图片的版权问题成为了公众焦点。暂不就该新闻做进一步的讨论，我想以自己长期发水文的经验来聊聊，如何正确的在社交网络发图时规避版权问题风险。

租房

北漂青年的租房维权日记

这么些年，租过二房东、小中介的房子，也租过大平台的房子，但第一次遇到需要扯皮才能退租的”黑中介”，可能是因为第一次住在”郊区”，地头蛇过于强势，但终于在各种折腾下完成了第一次系统性的维权，将所有调研和行动记录于此，希望帮到有缘人。

移动开发

Google I/O 2019 - Flutter for Web

Google I/O 2019 来啦，作为一名 Web 开发，今年比较关注的是 Flutter 的动态，一起来看看都有哪些动态吧。

让我们在2019年重新认识 Flutter

现在是2019年，让我们认真来看看备受瞩目的 Flutter，重新认识一下它。本文首先简要回顾移动开发（跨平台开发）的发展历史，并谈谈不同阶段跨平台解决方案的优劣；接着从 WHAT / HOW / WHY 三个方面详细来聊聊 Flutter，并结合简单的 Dart 代码说说开发者该如何上手，随后展示几个 Demo...

笔记

类型系统

线程

维权

北漂青年的租房维权日记

这么些年，租过二房东、小中介的房子，也租过大平台的房子，但第一次遇到需要扯皮才能退租的”黑中介”，可能是因为第一次住在”郊区”，地头蛇过于强势，但终于在各种折腾下完成了第一次系统性的维权，将所有调研和行动记录于此，希望帮到有缘人。

网络安全

网络安全科普：详解 HTTPS 与 TLS

作为普通用户，当我们上网冲浪时，是否想过为什么越来越多的域名输入时是 HTTPS 开头而非 HTTP 么？HTTPS 相比 HTTP 多出来的 S 到底多了些什么？TLS 和 SSL 又是什么，握手机制是如何进行的？其在七层协议中处于什么位置，与 HTTPS 相关的概念比如 CA 证书、Keyless、DTLS、...

网络安全科普：奇妙的 SSL/TLS 证书（进阶篇）

如果某个网站受 SSL 证书保护，其相应的 URL 中会显示 HTTPS（超文本传输安全协议）。单击浏览器地址栏的小绿锁，即可查看证书中的详细信息。但你是否曾好奇过一本证书是如何诞生的，以及 HTTPS 背后的 SSL/TLS 是如何在工作过程中发挥功效以保证通信安全的，什么是 CA、PCA，什么又是证书链和 X...

网络安全科普：奇妙的 SSL/TLS 证书（基础篇）

如果某个网站受 SSL 证书保护，其相应的 URL 中会显示 HTTPS（超文本传输安全协议）。单击浏览器地址栏的小绿锁，即可查看证书中的详细信息。但你是否曾好奇过一本证书是如何诞生的，以及 HTTPS 背后的 SSL/TLS 是如何在工作过程中发挥功效以保证通信安全的，什么是 CA、PCA，什么又是证书链和 X...

TLS/ESNI/ECH/DoT/DoH/JA3 - 谈谈 HTTPS 网络下浏览体验安全性的最后缝隙

有了 HTTPS 我们的网络访问就完美无缺了吗？TLS 在握手 Client Hello 阶段的数据包，包含客户端想访问的地址等信息，而这些信息是明文传输的，这使得第三方可以通过监听等手段知道你想访问哪些网址。本文会按照加密方式的加工流程倒序介绍，先介绍关于 TLS 握手阶段的 SNI 相关信息，再谈谈 DNS ...

美剧

美国

美联储

货币制度：货币、供给与中央银行

在广义的货币形式没有出现之前，人们通过物物交换到达交易的目的。这种经济需要需求的双向一致性，即刚好彼此都有对方想要的物品或服务。

联系汇率制度

香港联系汇率制度

香港联系汇率制度是香港货币金融稳定的支柱，其自1983年10月17日在香港实施，透过严谨、稳健和透明的货币发行局制度，使港元汇率保持稳定在7.75至7.85港元兑1美元的区间内。

脚手架

前端开发中的流程自动化与提效实践

随着前端的发展，越来越多的工具库、方法被用在日常研发流程中，这大大提升了业务开发的效率，而随着各类自动化流程的建设，开发同学也不再需要关注到每一个细节。前段时间项目阶段性交付，在推进的过程中也做了不少尝试，虽然从长期看，这类工作最后可能都该收敛到基础设施部门或者标准的自动化流程中去，但并不妨碍我通过实践来落实一些...

自习

我和他一个月了

我每次来都能遇到他，我的意思是说，就这家星巴克，每次周末来，我都能跟这个小哥相遇。

自动化

前端开发中的流程自动化与提效实践

随着前端的发展，越来越多的工具库、方法被用在日常研发流程中，这大大提升了业务开发的效率，而随着各类自动化流程的建设，开发同学也不再需要关注到每一个细节。前段时间项目阶段性交付，在推进的过程中也做了不少尝试，虽然从长期看，这类工作最后可能都该收敛到基础设施部门或者标准的自动化流程中去，但并不妨碍我通过实践来落实一些...

自定义控件

航空

英剧

药物

新型冠状病毒感染日记暨读者朋友QA发布会

因为看到游泳馆开门营业了，但是需要48小时核酸证明，于是上周四出门做了个核酸，就是这唯一一次不到10分钟的出门经历，让我🐑了。因为想游泳于是做核酸，然后做核酸阳了，不能游泳，我属于是那个纯纯的大怨种了。

表单

结合 React Fiber 结构与 chrome 插件，谈谈无侵入自动化表单的技术尝试

作为一名前端工程师，不论你处于什么业务方向，肯定都与表单打过交道，当然如果你是服务端、产品、测试同学，想必也早已接触过表单这类场景。让我们试想一下，如果研发需求的功能测试依赖一个复杂表单的填写而得以继续，那么频繁的表单填写在研发自测和 QA 验证过程中就会占用过多碎片化的时间，此类需要频繁执行以生成测试数据或推进...

装饰器

TypeScript 装饰器介绍与示例教程

如果你使用过 Angular，那么在日常的开发过程中，你已经大量使用过由 Angular 官方提供的各类由装饰器封装的特性了，比如 @Component 以及 @ViewChild 等等。即便不了解其实现原理，这也不影响我们熟练的通过它来实现各种需求。但如果我们深入了解隐藏在其背后的装饰器，便能将这个黑盒变成我们...

计算

记录

设计

2018 Google 移动技术最新进展速览

这周在 Google 上海办公室参加了一场分享会，他们的华人工程师向与会人员同步了 Google 在移动技术上的最新动态。我尝试从一名前端开发者的视角总结了这次分享会的内容，如有理解不准确的地方欢迎指出。

证书

网络安全科普：详解 HTTPS 与 TLS

作为普通用户，当我们上网冲浪时，是否想过为什么越来越多的域名输入时是 HTTPS 开头而非 HTTP 么？HTTPS 相比 HTTP 多出来的 S 到底多了些什么？TLS 和 SSL 又是什么，握手机制是如何进行的？其在七层协议中处于什么位置，与 HTTPS 相关的概念比如 CA 证书、Keyless、DTLS、...

网络安全科普：奇妙的 SSL/TLS 证书（进阶篇）

如果某个网站受 SSL 证书保护，其相应的 URL 中会显示 HTTPS（超文本传输安全协议）。单击浏览器地址栏的小绿锁，即可查看证书中的详细信息。但你是否曾好奇过一本证书是如何诞生的，以及 HTTPS 背后的 SSL/TLS 是如何在工作过程中发挥功效以保证通信安全的，什么是 CA、PCA，什么又是证书链和 X...

网络安全科普：奇妙的 SSL/TLS 证书（基础篇）

如果某个网站受 SSL 证书保护，其相应的 URL 中会显示 HTTPS（超文本传输安全协议）。单击浏览器地址栏的小绿锁，即可查看证书中的详细信息。但你是否曾好奇过一本证书是如何诞生的，以及 HTTPS 背后的 SSL/TLS 是如何在工作过程中发挥功效以保证通信安全的，什么是 CA、PCA，什么又是证书链和 X...

证书链

网络安全科普：奇妙的 SSL/TLS 证书（进阶篇）

如果某个网站受 SSL 证书保护，其相应的 URL 中会显示 HTTPS（超文本传输安全协议）。单击浏览器地址栏的小绿锁，即可查看证书中的详细信息。但你是否曾好奇过一本证书是如何诞生的，以及 HTTPS 背后的 SSL/TLS 是如何在工作过程中发挥功效以保证通信安全的，什么是 CA、PCA，什么又是证书链和 X...

网络安全科普：奇妙的 SSL/TLS 证书（基础篇）

如果某个网站受 SSL 证书保护，其相应的 URL 中会显示 HTTPS（超文本传输安全协议）。单击浏览器地址栏的小绿锁，即可查看证书中的详细信息。但你是否曾好奇过一本证书是如何诞生的，以及 HTTPS 背后的 SSL/TLS 是如何在工作过程中发挥功效以保证通信安全的，什么是 CA、PCA，什么又是证书链和 X...

语言特性

Diff ECMAScript 2019

ECMAScript® 2019 已定稿，通过 ECMA 可以查看到 ECMAScript 第十版语言标准的所有内容。由于该语言于几年前开始的年更节奏，每年的变化并不如当初 ES5 到 ES6 的改动大，于是想知道标准有哪些改动，看看在今年发布期内完结的提案倒是更有帮助些。

读书笔记

调试

基于一次应用卡死问题所做的前端性能评估与优化尝试

在上个月，由于客户反馈客户端卡死现象但我们远程却难以复现此现象，于是我们组织了一次现场上门故障排查，并希望基于此次观察与优化，为客户端开发提供一些整体的优化升级。当然，在尝试过程中，也发现了不少适用于通用前端项目开发的一些故障排查与性能评估的手段，于是总结此文，希望可以对读者有所帮助。

货币

货币制度：货币、供给与中央银行

在广义的货币形式没有出现之前，人们通过物物交换到达交易的目的。这种经济需要需求的双向一致性，即刚好彼此都有对方想要的物品或服务。

货币供给

货币制度：货币、供给与中央银行

在广义的货币形式没有出现之前，人们通过物物交换到达交易的目的。这种经济需要需求的双向一致性，即刚好彼此都有对方想要的物品或服务。

质量

趋势分析

风雨过后见彩虹：公募基金2022年度报告摘录与解读

去年，我通过问答的形式将阅读完公募基金年报后的一些感想进行了总结。如今，已过去一年，按照《公开募集证券投资基金信息披露管理办法》规定，所有公募基金过去一年的年报也已经全部生成，我计划今后将其作为一个年更栏目发表于个人博客，暂且就叫《时间的朋友》吧。那么，接下来就让我们开始2023年版的报告解读吧。

跨域

组合 a 标签与 canvas 实现图片资源的安全下载

普通用户下载图片时只需一个「右键另存为」操作即可完成，但当我们做在线编辑器、整个 UI 都被自定义实现时，如何解决不同域问题并实现页面中图片资源的安全下载呢？本文就解决该问题过程中所涉及的正则表达式、Web API 和 canvas 操作进行记录。

前端跨域请求解决方案汇总

同源策略限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的关键的安全机制。但是有时候跨域请求资源是合理的需求，本文尝试从多篇文章中汇总至今存在的所有跨域请求解决方案。

跨平台技术

让我们在2019年重新认识 Flutter

现在是2019年，让我们认真来看看备受瞩目的 Flutter，重新认识一下它。本文首先简要回顾移动开发（跨平台开发）的发展历史，并谈谈不同阶段跨平台解决方案的优劣；接着从 WHAT / HOW / WHY 三个方面详细来聊聊 Flutter，并结合简单的 Dart 代码说说开发者该如何上手，随后展示几个 Demo...

跨平台框架

Google I/O 2019 - Flutter for Web

Google I/O 2019 来啦，作为一名 Web 开发，今年比较关注的是 Flutter 的动态，一起来看看都有哪些动态吧。

软件开发

软件设计

退烧

新型冠状病毒感染日记暨读者朋友QA发布会

因为看到游泳馆开门营业了，但是需要48小时核酸证明，于是上周四出门做了个核酸，就是这唯一一次不到10分钟的出门经历，让我🐑了。因为想游泳于是做核酸，然后做核酸阳了，不能游泳，我属于是那个纯纯的大怨种了。

配图

社交网络配图安全指南

这两天「视觉中国」上了热搜，图片的版权问题成为了公众焦点。暂不就该新闻做进一步的讨论，我想以自己长期发水文的经验来聊聊，如何正确的在社交网络发图时规避版权问题风险。

配置

重构

金融危机

银行

货币制度：货币、供给与中央银行

在广义的货币形式没有出现之前，人们通过物物交换到达交易的目的。这种经济需要需求的双向一致性，即刚好彼此都有对方想要的物品或服务。

防疫

防疫日记

听闻办公楼有疫情了，此刻的我，正坐上从家里回京的高铁，瑟瑟发抖。

陌生人

隔离

面向微前端，谈谈 JavaScript 隔离沙箱机制的古往今来

随着微前端的不断发展、被更多的团队采用，越来越多开始对沙箱这个概念有所了解。沙箱，即 sandbox，意指一个允许你独立运行程序的虚拟环境，沙箱可以隔离当前执行的环境作用域和外部的其他作用域，外界无法修改该环境内任何信息，沙箱内的东西单独运行，环境间相互不受影响。本文计划谈谈微前端的 JavaScript 隔离，...

页面交互成本

精读 The Cost of JavaScript In 2018

如今，JavaScript 仍然是我们向移动终端分发页面时成本最高的资源，因为它可以在很大程度上延迟页面的交互性。一个页面在开发时都要考虑哪些问题，用户实际访问页面的效果与感受又是如何，Google 开发 Lighthouse 的初衷以及其具体用途，JavaScript 的成本究竟有多高，如何降低 JavaScr...

食品

食物储备清单

食物储备清单，分为摄入量建议、储备清单简介、必需大类、非必需大类等几个章节。与此同时，本计划因为个人常识所限，可能存在缺漏，如有偏差后续会纠偏补充，如有迭代会及时更新至 https://hijiangtao.github.io

食物

食物储备清单

食物储备清单，分为摄入量建议、储备清单简介、必需大类、非必需大类等几个章节。与此同时，本计划因为个人常识所限，可能存在缺漏，如有偏差后续会纠偏补充，如有迭代会及时更新至 https://hijiangtao.github.io

香港

香港联系汇率制度

香港联系汇率制度是香港货币金融稳定的支柱，其自1983年10月17日在香港实施，透过严谨、稳健和透明的货币发行局制度，使港元汇率保持稳定在7.75至7.85港元兑1美元的区间内。

黑中介

北漂青年的租房维权日记

这么些年，租过二房东、小中介的房子，也租过大平台的房子，但第一次遇到需要扯皮才能退租的”黑中介”，可能是因为第一次住在”郊区”，地头蛇过于强势，但终于在各种折腾下完成了第一次系统性的维权，将所有调研和行动记录于此，希望帮到有缘人。