vivaxy's Blog
2024-03-28T07:54:15+00:00
http://vivaxyblog.github.io
vivaxy
xyxuye2007@126.com
SameSite Cookies 解读
2021-03-07T00:00:00+00:00
http://vivaxyblog.github.io/2021/03/07/samesite-cookies-explained-cn
背景知识 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...
VSCode Conventional Commits 插件
2020-04-30T00:00:00+00:00
http://vivaxyblog.github.io/2020/04/30/vscode-conventional-commits-extension-cn
VSCode Conventional Commits 插件可以帮助你轻松按照 Conventional Commits 规范编写提交信息。
功能
支持使用项目下的 commitlint 规范。
支持自动 add 和 push(需要结合 VSCode 的 git 插件,详见插件文档)。
支持项目级别的 scope 管理。
支持 Gitmoji。
使用方式
你可以通过下面两种方式打开插件:
Command + Shift + P 或 Ctrl + Shift + P,输入 Conventional Commits,然后按 Enter。
点击 Source Control 操作面板上的图标。见下图:
VSCode Conventional Commits Extension
2020-04-29T00:00:00+00:00
http://vivaxyblog.github.io/2020/04/29/vscode-conventional-commits-extension
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...
How Babel Is Built
2020-01-05T00:00:00+00:00
http://vivaxyblog.github.io/2020/01/05/how-babel-is-built
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...
一步一步解码 PNG 图片
2019-12-07T00:00:00+00:00
http://vivaxyblog.github.io/2019/12/07/decode-a-png-image-with-javascript-cn
解码 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...
Babel 的工程化实现
2019-11-19T00:00:00+00:00
http://vivaxyblog.github.io/2019/11/19/how-babel-is-built-cn
介绍 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...
浏览器图像转换手册
2019-11-08T00:00:00+00:00
http://vivaxyblog.github.io/2019/11/08/comprehensive-image-processing-on-browsers-cn
介绍 图像可以用多种不同的类型数据表示,本文将它们归纳为 5 种类型:DOM,URL,File,ImageData 和 Buffer。 图像的数据类型 DOM <img> <img> 元素从 URL(Data URL,HTTP URL 或 Object URL)加载图像。 <canvas> <canvas> 元素通过 canvas API drawImage 来获取 <img> 元素上的图像数据。 URL Data URL Data URL 带有 base64 编码的图像数据。可以从 Data URL 数据中解码出图像的二进制数据。Data URL 数据的大小比原始的二进制数据大一些。 HTTP URL HTTP URL 代表存储在服务器上的图像。HTTP URL 用于从服务器获取图像数据。 Object URL Object URL...
Decoding A PNG Image with JavaScript Step by Step
2019-11-07T00:00:00+00:00
http://vivaxyblog.github.io/2019/11/07/decode-a-png-image-with-javascript
Decode a PNG means to convert an image from binary data to ImageData with pixels. Image binary data can be retrieved from <canvas>, <img>, Object URLs, Image URLs, Blob. See Comprehensive Image Processing on Browsers for details. ImageData is an object with pixel data, width and height. Example Image 👆This...
Comprehensive Image Processing on Browsers
2019-11-06T00:00:00+00:00
http://vivaxyblog.github.io/2019/11/06/comprehensive-image-processing-on-browsers
Images can be represented in different types. They can be summarized as 5 types: DOM, URL, File, ImageData and Buffer. Image Data Types DOM <img> <img> elements load images from URL(e.g. Data URLs, HTTP URLs or Object URLs). <canvas> <canvas> elements draw images by canvas API drawImage from <img> elements....
Use npm Registry to Restric Installing Client
2019-09-30T00:00:00+00:00
http://vivaxyblog.github.io/2019/09/30/use-npm-registry-to-restrict-installing-client
Background npm and yarn are not sharing lock file. A lock file is necessary for maintaining the stability of the project. How can we make sure the developers are using the same client in our project? Some approaches make use of preinstall hook. See: How to force package installs to...
Alfred 4 Workflow Open in VSCode
2019-08-14T00:00:00+00:00
http://vivaxyblog.github.io/2019/08/14/alfred-workflow-open-in-vscode
Feature Search projects, press enter to open in VSCode. Search projects, press command + enter to reveal in Finder. Open in VSCode the folder, which selected in Finder. Installation npm i -g alfred-open-in-vscode Open the workflow in Alfred. Set workflow environment wds to your project base folders (split with ,)....
Git Tag And Push Git Tag
2019-08-02T00:00:00+00:00
http://vivaxyblog.github.io/2019/08/02/git-tag-and-push-git-tag
Why my git tags cannot be pushed sometimes? What’s the difference between git push --follow-tags and git push --tag? There are concepts beneath the questions. Firstly, We will talk about lightweight tag and annotated tag. Lightweight Tag And Annotated Tag. Quote from Git - Tagging Git supports two types of...
基于 Custom Elements 的组件化开发
2018-09-17T00:00:00+00:00
http://vivaxyblog.github.io/2018/09/17/custom-elements-components
customElements 是 Web Components 规范下的新 API,可以用来实现组件化开发。 如果你的应用只用兼容最新的 Chrome 浏览器,那么用它来替代 React 或者 Vue 是一个不错的选择。 基本用法 组件声明在一个 HTML 文件中。组件包括样式(Style),节点(DOM)和交互逻辑(Script)。一个组件文件的基本结构如下: <template> <style></style> <div>DOM 节点</div> </template> <script> const componentDocument = document.currentScript.ownerDocument; class Component extends HTMLElement { static get TAG_NAME() { return 'component-tag-name'; }; constructor() { super(); const shadow = this.attachShadow({ mode: 'closed' }); const...
JavaScript PNG 图片编码和解码
2018-04-05T00:00:00+00:00
http://vivaxyblog.github.io/2018/04/05/how-png-decode-and-encode
PNG 解码是指将一张 PNG 图片的二进制数据转换成像素点数据 ImageData。 PNG 的二进制数据有很多方式获取。 在浏览器中可以得到 ArrayBuffer 类型的二进制数据: fetch(url).then(res => res.arrayBuffer()).then(res => { console.log(arrayBuffer) }); 在 Node.js 中,可以得到 Buffer 类型的二进制数据: console.log(fs.readFileSync(filename)) 在微信小程序中可以得到 ArrayBuffer 类型的二进制数据: wx.request({ url, responseType: 'arraybuffer', success: (res) => { console.log(res.data); }, }); ImageData.data 是一个 Uint8ClampedArray,其中以 R、G、B、A 的顺序保存了像素点的数据,每四项表示一个像素点。 Uint8ClampedArray 是一种 TypedArray,存储了 0-255 的数据。其中 U 表示 unsigned,也就是无符号(都是正值)。8...
如何在多个模块中共享异步数据
2018-02-07T00:00:00+00:00
http://vivaxyblog.github.io/2018/02/07/how-to-get-asynchronous-data-in-different-modules
背景 <html> <head> <title>HTML</title> </head> <body> <script src="./script1.js"></script> <script src="./script2.js"></script> </body> </html> script1 中有一个异步请求,script2 也想使用请求得到的数据。 方案 方案1:两个脚本中分别请求数据 script1.js: const fetchRemoteData = () => { return new Promise((resolve) => { console.log('send request'); setTimeout(() => { resolve({ message: 'OK' }); }, 3000); }); }; fetchRemoteData().then((data) => { console.log('Use data in script1', data);...
JavaScript 函数式编程初窥
2017-11-25T00:00:00+00:00
http://vivaxyblog.github.io/2017/11/25/a-brief-glimpse-at-javascript-functional-programming
编程范式 编程范式是:解决编程中的问题的过程中使用到的一种模式,体现在思考问题的方式和代码风格上。这点很像语言,语言本身会体现出不同国家的人的思考方式和行为模式。 常见的编程范式有下面几种: 命令式编程 面向对象编程 函数式编程 除了这三个之外,我们还会接触到其他的编程范式,如:声明式。 编程范式之间不是互斥关系,而是可以结合在一起使用的。我们往往需要结合各种编程范式来完成一个程序功能。 在学习写代码的过程中,我们一般先接触命令式编程,然后学习面向对象编程,面向对象编程可以让我们很方便地处理更复杂的问题。这篇文章里,我们会介绍函数式编程。 不同的编程范式有不同的代码表现 比如从来没有坐过电梯的人,第一次坐电梯,电梯在 10 楼,人在 1 楼,他会按下,让电梯下来。按错按钮是因为他用了祈使语,而不是把自己的想法提交出去。 相似地,你写的代码就像电梯的按钮界面,是让自己或者他人阅读的。只有达成了相同的共识才能更好地理解。通过这次文章可以让大家更好地理解函数式编程。 下面是几种编程范式的代码片段: const app = 'github'; const greeting = 'Hi, this is '; console.log(greeting + app); 这是命令式编程,通过调用 const 和 console.log 进行赋值和输出。 const Program = function() { this.app = 'github'; this.greeting = function() { console.log('Hi, this...
用纯 CSS 实现弹窗
2017-10-26T00:00:00+00:00
http://vivaxyblog.github.io/2017/10/26/pure-css-modal
知识点 a 标签点击改变页面链接中的 hash 部分。 :target 选择器可以选中和页面 hash 相同的标签(标签的 id 和页面 hash 相同)。 代码实现 先在页面中定义弹窗 id="modal" 以关联 hash。 添加打开弹窗的按钮,a 标签,链接地址是弹窗的 id。 <a href="#modal">open modal</a> <div id="modal"> <h1>modal</h1> </div> 在弹窗上添加样式 class="modal",在弹窗里面添加关闭按钮 <a href="#">close</a>。 <div class="modal" id="modal"> <h1>modal</h1> <a href="#">close</a> </div> 在 css 中默认隐藏弹窗,同时设置弹窗的基础样式。 .modal { display: none; position: fixed; top: 0;...
在浏览器中使用 JavaScript 模块
2017-09-25T00:00:00+00:00
http://vivaxyblog.github.io/2017/09/25/javascript-module-in-browser
背景 Chrome 61 支持了在浏览器中使用 ES6 模块。Safari 10.1 上半年也已经支持了。 用法 <script type="module" src="module-entry.js"></script> <script nomodule type="text/javascript" src="nomodule.js"></script> 支持 ES6 模块的浏览器会根据 <script> 标签上的 type="module" 来加载 ES6 模块;而忽略带有 nomodule 的 <script> 标签。不支持的浏览器则会忽略 type="module" 的 <script> 标签,忽略 <script> 标签上的 nomodule 的属性。 使用浏览器原生对 ES6 模块的支持特性,可以享受模块级别的缓存这一优势。 在模块中引入其他模块时,需要添加 .js 后缀。模块中可以使用 export 和 import 关键字。 // module-entry.js //...
Karabiner Elements Hyper 改键设置
2017-09-05T00:00:00+00:00
http://vivaxyblog.github.io/2017/09/05/karabiner-elements-hyper-rule
简介
Karabiner Elements 在 v0.91.1 版本中支持了 complex_modifications。
终于支持了把 CapsLock 改成 Hyper 键一文中的配置。
配置文件
点击这里导入。
Levenshtein 距离
2017-08-05T00:00:00+00:00
http://vivaxyblog.github.io/2017/08/05/h5-levenshtein-distance
简介 Levenshtein 距离是一种编辑距离,用来表示两个字符串的差异。编辑距离是指从字符串 A 开始,修改成字符串 B 的最小步骤数,每个以步骤中,你可以删除一个字符、修改一个字符或者新增一个字符。 比如我们把 acat 变成 gate 的时候,需要做如下的修改: 删除 a 把 c 改成 g 新增 e 所以 acat 和 gate 的 Levenshtein 距离是 3。 算法 这里使用动态规划的方式来实现。 记 Levenshtein 距离为 l(i, j),i 是字符串 A 中从开头到第 i 个下标的子字符串,j 是字符串 B 从开头到第 j 个下标的子字符串,i 和 j 都从 0 开始。...