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 图片就是把一张图片从二进制数据转成包含像素数据的 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...

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

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

背景 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 在 v0.91.1 版本中支持了 complex_modifications。 终于支持了把 CapsLock 改成 Hyper 键一文中的配置。 配置文件 点击这里导入。

简介 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 开始。...