2021-03-07 08:00:00
背景知识 SameSite 属性 SameSite 属性是 HTTP 响应头 Set-Cookie 的属性之一，允许服务端控制该 Cookie 是否仅限于同站。 同站（跨站）是与常见的同域（跨域）相似的概念，下面是两者的区别。 同域（Same Origin）和跨域（Cross Origin） 域（Origin）由协议（Scheme）、主机名（Hostname）和端口（Port）组成。其中任何一个不同都会被认为是跨域。 同站（Same Site）和跨站（Cross Site） 顶级域名（Top-level domains）（TLDs）是如 .com 等的一系列域名列表。 在大部分场景下，站（Site）的定义是 TLDs+1，如 .com 的下一级，如 github.com。 但 Github 也会为不同的开发者提供不同的 github.io 域名，如 a.github.io 和 b.github.io，为了区分这两个域名，Mozilla 引入了有效顶级域名（Effective top-level domains）（eTLDs）的概念。 因此，站（Site）是有效顶级域名的下一级域名，即 eTLDs+1。 比如：a.web.dev 和 b.web.dev 属于同站，而 a.github.io 和 b.github.io 属于跨站。 Schemeful...
2020-04-30 08:00:00
VSCode Conventional Commits 插件可以帮助你轻松按照 Conventional Commits 规范编写提交信息。 功能 支持使用项目下的 commitlint 规范。 支持自动 add 和 push（需要结合 VSCode 的 git 插件，详见插件文档）。 支持项目级别的 scope 管理。 支持 Gitmoji。 使用方式 你可以通过下面两种方式打开插件： Command + Shift + P 或 Ctrl + Shift + P，输入 Conventional Commits，然后按 Enter。 点击 Source Control 操作面板上的图标。见下图：
2020-04-29 08:00:00
VSCode Conventional Commits extension helps you to fill in commit messages according to Conventional Commits. Features Respect commitlint configs. Support auto add and push (with the configutation of VSCode git extension, see detail in readme). Support project level scope management. Support Gitmoji. Usage You can access VSCode Conventional Commits in...
2020-01-05 08:00:00
Introduction Babel is a Node.js tool to use next-generation JavaScript now. This article will explain how Babel is designed to solve this problem, based on the source codes on the master branch in November 2019. How is Babel designed? babel-loader belongs to webpack project, which is not in the Babel...
2019-12-07 08:00:00
解码 PNG 图片就是把一张图片从二进制数据转成包含像素数据的 ImageData。 图片的二进制数据可以从 <canvas>，<img>，Object URLs，Image URLs，Blob 对象上获取到。参见浏览器图像转换手册。 ImageData 是一个包括了像素数据、图片宽高数据的对象。 示例图片 👆 这是一张我们接下去要解码的图片，但它太小了，放大了展示给大家看下。👇 二进制数据 我们先从浏览器的 <input> 标签上读取到 Blob 对象，然后拿到这张图片的二进制数据。 <input type="file" /> <script> const input = document.querySelector('input'); input.addEventListener('change', async function(e) { const [file] = e.target.files; const arrayBuffer = await file.arrayBuffer(); console.log('arrayBuffer', arrayBuffer); // TODO: Let's decode arrayBuffer const imageData...
2019-11-19 08:00:00
介绍 Babel 是一款将未来的 JavaScript 语法编译成过去语法的 Node.js 工具。本文从 2019 年 11 月的 master 分支源码入手，介绍 Babel 在解决这类问题时是如何划分模块。 Babel 的模块划分 其中 babel-loader 隶属于 webpack，不在 Babel 主仓库。 框架层 常见的编译器 常见的解析器有 acorn、@babel/parser (babylon)、flow、traceur、typescript、uglify-js 等，各自的 AST 语法树大致相同。 @babel/parser 的实现 关键词说明 Literal：字面量。包括：Boolean、Number、String。 Identifier：识别量。包括变量名、undefined、null 等。 Val：值。常分为左值和右值。左值表示一个可以被赋值的节点，如：[a] 等，左值往往是 Pattern、Identifier 等类型。右值表示一个代表具体值的节点，如：b.c 等，右值往往是 Expression、Identifier、Literal 等类型。左值与右值之间通过等号联结，代表赋值表达式，如：[a] = b.c。 Declaration：赋值。 Expression：表达式。常用来表示右值。常见的 Expression 有：MemberExpression、BinaryExpression、UnaryExpression、AssignmentExpression、CallExpression...
