hijiangtao

hijiangtao

Yet another web developer.

Posts by Categories

Daily

车里的微光

出差至上海，一下飞机，我便习惯性地打开手机预约网约车。没想到，这次普通的行程却带来了不平凡的对话。从京沪两城的差异，到网约车行业的激烈竞争，再到新能源车的价格战与车险难题，甚至是上有老下小的家庭琐事，司机师傅的每一句话都透露出生活的艰辛与不易。在深夜的街头，他娴熟地驾驶着车辆，一边与我分享着生活的点滴，一边为了生...

冬日打车日记

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

拔牙日记

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

北漂青年的租房维权日记

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

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

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

食物储备清单

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

防疫日记

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

我和他一个月了

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

希望

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

中年女子

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

踏入社会这两年

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

在家办公这一个月

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

造砖指南

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

Document

来简单聊聊 AI Gateway

本文将详细介绍 AI Gateway 的概念、功能，并通过丰富的应用场景展示其在实际应用中的巨大潜力。通过阅读本文，相信你会对 AI Gateway 有一个全新的认识，并为你在广阔的 AI 世界中探索工具箱增添一个新的技术，那么我们就开始吧。

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

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

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

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

网络安全科普：详解 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 ...

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

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

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

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

TypeScript 装饰器介绍与示例教程

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

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

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

Service Worker 实践指南

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

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

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

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

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

HTML Drag/Drop API 介绍

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

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

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

鼠标事件基础回顾

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

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

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

JavaScript 考古史闲聊

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

JavaScript 模块化方案总结

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

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

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

Diff ECMAScript 2019

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

Google I/O 2019 - Flutter for Web

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

社交网络配图安全指南

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

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

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

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

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

[译] 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 引擎是如何工作的将有助于你了解自己所写代码的性能特征。

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

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

[译] 从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 这项新技术带来帮助。

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

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

React 与 Vue 的实践总结

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

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

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

您的第一个 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 必定包含一些必要的结构,例如场景,相机等等,而...

[译] Vue.js 2.0 Introduction

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

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.

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

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

Investment

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

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

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

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

香港联系汇率制度

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

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

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

Presentation

Tree Shaking 简介

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

Coding with Angular - Tips and Tricks

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

让我们在2019年重新认识 Flutter

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

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...

Read

Recap

2023年终总结

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

2022年终总结

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

回复2019的信件

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

感谢2018所给予的这些

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

我的2017年终总结

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

Story

Student

Tutorial

Spark的单机部署与测试笔记

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

student