Posts by Tags

2016

2017

2018

2019

2020

2021

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

Coding with Angular - Tips and Tricks

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

Application

AsyncSubject

BIT

Babel

BehaviorSubject

Blob

CMD

JavaScript 模块化方案总结

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

CORS

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

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

CR

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 一般抽象粒度都不太够外,我还希望……

DOM

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

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

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

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

Daily

中年女子

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

Dart

让我们在2019年重新认识 Flutter

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

Deno

Design

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。本文着重介绍前两者。

ECMAScript

Diff ECMAScript 2019

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

ES2018

ES6

JavaScript 模块化方案总结

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

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

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

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

History

IO19

Google I/O 2019 - Flutter for Web

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

IndexedDB

Service Worker 实践指南

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

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.

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…

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

R

React

绘制 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 新手注意和学习的一些最佳实践。

ServiceWorker

Service Worker 实践指南

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

Shading

Shapes

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

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

Shell

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

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

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

base64

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

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

canvas

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

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

chrome

Service Worker 实践指南

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

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

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

city

class

data

Spark的单机部署与测试笔记

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

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

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

deck.gl

从零开始学习时空数据可视化(一)

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

从零开始学习时空数据可视化(序)

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

download

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

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

form

hadoop

hexo

iOS

造砖指南

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

iframe

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 官方中文版.

ngrx

ngxs

plugin

poj

postMessage

Service Worker 实践指南

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

puppeteer

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

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

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

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

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

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

事件

鼠标事件基础回顾

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

五四

五四运动

五四青年

人脸识别

代数效应

优化

Coding with Angular - Tips and Tricks

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

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

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

依赖

儿童节

内核

写信活动

分页算法

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

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

刷机

造砖指南

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

前端

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

单元测试

原型

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

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

原生

可视化

绘制 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 操作进行记录。

在家办公

在家办公这一个月

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

多播

字符

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

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

学生

宇宙

实战

工作

踏入社会这两年

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

回复2019的信件

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

感谢2018所给予的这些

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

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

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

年度总结

回复2019的信件

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

序列化

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

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

引擎

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

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

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

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

强调标记

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

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

性能优化

截图

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

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

打印样式

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

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

打点

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

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

拖拽

HTML Drag/Drop API 介绍

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

指南

插件

故事

教程

从零开始学习时空数据可视化(一)

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

从零开始学习时空数据可视化(序)

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

数学建模

数据可视化

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

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

文本

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

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

旅行者

日记

机器学习

枚举

树洞

校招

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

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

框架

React 与 Vue 的实践总结

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

模块化

JavaScript 模块化方案总结

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

正则表达式

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

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

毕业

感谢2018所给予的这些

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

求职

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

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

沙箱

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

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

浏览器

点击

鼠标事件基础回顾

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

状态管理

生活

踏入社会这两年

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

在家办公这一个月

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

电影

监控

着色方法

研究生

示例

社交网络

社交网络配图安全指南

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

移动开发

Google I/O 2019 - Flutter for Web

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

让我们在2019年重新认识 Flutter

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

笔记

类型系统

线程

美剧

自动化

自定义控件

航空

英剧

表单

计算

设计

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

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

语言特性

Diff ECMAScript 2019

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

调试

质量

跨域

组合 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 的动态,一起来看看都有哪些动态吧。

软件开发

软件设计

配图

社交网络配图安全指南

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

配置

重构

陌生人

页面交互成本

精读 The Cost of JavaScript In 2018

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