Here are all the printable characters, in collating order:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

0x20-0x2F:    ! " # $ % & ' ( ) * + , - . / 
0x30-0x40:  0 1 2 3 4 5 6 7 8 9 : ; < = > ? @
0x41-0x5A:  A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
0x5B-0x60:  [ \ ] ^ _ `
0x61-0x7A:  a b c d e f g h i j k l m n o p q r s t u v w x y z 
0x7B-0x7E:  { | } ~

0xA0-0xAF:    ¡ ¢ £ ¤ ¥ ¦ § ¨ © ª « ¬ ­ ® ¯ 
0xB0-0xBF:  ° ± ² ³ ´ µ ¶ · ¸ ¹ º » ¼ ½ ¾ ¿
0xC0-0xD6:  À Á Â Ã Ä Å Æ Ç È É Ê Ë Ì Í Î Ï Ð Ñ Ò Ó Ô Õ Ö
     0xD7:  ×
0xD8-0xDE:  Ø Ù Ú Û Ü Ý Þ
     0xDF:  ß
0xE0-0xF6:  à á â ã ä å æ ç è é ê ë ì í î ï ð ñ ò ó ô õ ö
     0xF7:  ÷
0xF8-0xFE:  ø ù ú û ü ý þ
     0xFF:  ÿ

The first six rows are the ASCII character set.

Note the ordinary ASCII space (before !), the ISO Latin-1 non-breaking space (before ¡) and Latin-1 soft-hyphen (before ®).

Character codes and names

The columns show, in order:

• DEC: the decimal, &#DEC; -> HTML;
• HEX: the hexadecimal, &#xHEX; -> HTML;
• HTML: the HTML Entities;
• CHR: ASCII abbreviation, or the charater itself when HTML-printable;
• MEANING: the ISO-8859-1 (and ASCII) definition.

Notes for HTML documents

1. HTML entity names are superfluous: the ISO-8859-1 eight-bit codes will work, by definition, on any browser.

2. The characters carriage return (ASCII CR) and line feed (ASCII NL, newline) are equivalent; they are treated as whitespace, except in <pre> contexts, where they force a line break. (However, a line feed is ignored if it immediately follows a carriage return.)

3. The horizontal tab character (ASCII HT) skips to the next tabbing column in <pre> contexts, and is treated as whitespace elsewhere.

4. The non-breaking space ( ) is honored even in non-<pre> contexts, and can be used to insert extra space between words, images, etc., like this: | |.

5. The soft hyphen (­) “is a hard problem”, and see also <wbr> HTML element.

Other notes

1. Alternative Sun/X11 “Compose” sequences for the Icelandic “thorn” are “t h” (þ, lowercase) and “T H” (Þ, uppercase).

2. Note that the Sun/X11 “Compose” sequence for masculine ordinal (º) uses an underscore, while the feminine ordinal (ª) uses a minus sign. It takes a lot of imagination to come up with such ideas…

Additional references

• Martin Ramsch‘s iso8859-1 table.
• The HTML 2.0 Standard [Character Entity Sets] [HTML Coded Character Set]
• The HTML 3.0 specification [Latin-1 Character Entities]
• The HTML+ Discussion Document [Appendix II]
• An exhaustive entity table including HTML 2.0, HTML3.0, HTML+, with Postscript equivalents.

Composed by J. Stolfi from several sources found throughout the net.

More references

Base on J. Stolfi‘s ISO-8859-1 (ISO Latin 1) Character Encoding, and composed from several sources found throughout the net.

unicode.org:

• UnicodeData
• ISO-8859-1

unicode:

• unicode command and it’s official repository

Wikimedia:

• ISO/IEC 8859-1 - Code page layout
• C0 and C1 control codes
• List of XML and HTML character entity references

Stanford - Miles Davis:

• ASCII / ISO 8859-1 (Latin-1) Table with HTML Entity Names

W3Schools:

• HTML ISO-8859-1 Reference
• UTF-8 C1 Controls and Latin1 Supplement

Christian Rieke’s private project - key-shortcut.com:

• ASCII table
• ISO 8859-1 table
• ASCII URL encoding
• All HTML Entities

ScriptCalculator: https://calc.iwill.im/

GitHub Repo: https://github.com/iwill/ScriptCalculator

ScriptCalculator 是我为了满足个人需求开发的一款计算器。

先看效果，假设某同学月薪 10w，用 ScriptCalculator 计算一下他的税后收入（为了便于演示，这里不考虑五险一金、绩效、ESPP、加班费、餐补等）：

查看计算脚本 or 算算我的 👀

最初的需求是想保留计算过程、能展示中间结果，能随时修改数据和计算逻辑，计算结果实时更新，必要的地方可以加备注。好像很正常的需求，但找了好久就没发现哪个计算器能满足，所以只能写代码计算。

开始我用 Chrome 控制台写 JavaScript 比较多，随手就能拿过来写，但问题是输入不方便、输出结果也不直观，要在文本编辑器和控制台之间来回拷贝代码和计算结果。Swift Playgrounds 的结果展示很友好，但代码里多少还是夹杂了数据之外的东西，还要要操心数据类型，而且 Xcode 也不是很轻量。气氛烘托到位，就是时候出手了。

ScriptCalculator 基于网页，核心思想是解析输入的计算脚本，通过预处理变成 JavaScript 代码，然后用 eval() 运行代码完成计算，最后模仿 Swift Playgrounds 输出结果。后来边用边迭代，逐步支持了自定义变量和函数、百分数和各种进制、位运算和布尔值、折行和注释，以及通过 URL 分享计算脚本等丰富的特性。

最终，脚本语法简洁、功能强大，充分地利用了 JavaScript 语言的多种特性。（至少我自己）用起来非常顺手，舒坦！

这里有 丰富的功能演示，不喜欢看文档的可以直接操练起来。

特性

运算符

• 基础运算：支持 +、-、*、/、%（取余）、( 和 ) 等运算符
• 比较运算：支持 <、<=、>、>=、== 和 != 等运算符
• 逻辑运算：支持布尔类型，支持 &&、||、! 和三目等运算符 ?:
• 位运算：支持 &、|、~、^、<<、>> 和 >>> 等运算符

类型扩展

• BigInt

  1	BigInt(MAX_SAFE_INTEGER) + 1n // BigInt: 9007199254740992

• 百分数：支持输入百分数，支持结果以百分数形式展示

  1 2 3 4 5 6

  10% // 0.1 10 % // 0.1 10% + 1 // 0.1 + 1 == 1.1 10% % 1 // 0.1 % 1 == 0.1 10% - 7 // 0.1 - 7 == -6.9 10 % (-7) // 10 % 7 == 3

  | 需要注意百分号与取余运算符的使用差异

• 进制：支持输入二、八、十、十六进制数字，支持结果以二至三十六进制形式展示

  结果默认以十进制形式展示：

  1 2 3 4

  0b10 // 2 0o10 // 8 10 // 10 0x10 // 16

  末尾加 #<进制数字> 可以切换为展示进制，但并不改变实际结果，支持二至三十六进制：

  1 2 3 4 5 6 7 8

  // 这里每一行都是获取上一行的结果、转换进制展示 32 #2 // 0b100000 #8 // 0o40 #10 // 32 #16 // 0x20 #32 // 10 #32 #36 // W #36 $ // 32

常量、变量

• 变量：

  • 行首为运算符时在前面自动填入上一行结果
  • 使用 $n 获取第 n 个结果
  • 使用 $ 获取上一个结果（不是上一行）
  • 使用 $$ 获取上上一个结果 …

• JavaScript 常量、方法：

  允许访问 JavaScript 中 Math 和 Number 的属性和方法。

  Math 的属性可以作为常量使用：
  BigInt(MAX_SAFE_INTEGER) + 1n // BigInt: 9007199254740992

  1 2	E // 2.718281828459045 PI // 3.141592653589793

  Math 的方法可以直接作为函数使用：

  1 2 3

  min(max(1, 2), 3) // 2 pow(2, 10) // 1024 sqrt(1024) // 32

  Number 的属性可以直接访问：

  1 2 3 4

  MAX_SAFE_INTEGER // 9007199254740991 == pow(2, 53) - 1 // true MIN_SAFE_INTEGER // -9007199254740991 == - (pow(2, 53) - 1) // true

• 扩展的函数：

  Math 的小数截取方法只能截取整数，想要截取小数会比较麻烦，toFixed() 方法又不够灵活、而且输出的是字符串格式。

  扩展的函数支持可选的第二个参数就比较方便了，并且还支持整数部分的取舍：

  1 2 3 4 5 6 7 8

  _666: 2000 / 3 // 666.6666666666666 round(_666, 3) // 666.667 floor(_666, 2) // 666.66 ceil(_666 / 2, 1) // 333.4 round(_666, 0) // 667 round(_666) // 667 round(_666, -1) // 670 round(_666, -2) // 700

• 自定义变量

  定义及使用：

  1 2 3

  a: 1 // 1 b: 2 // 2 a + b // 3

• 自定义函数

  定义及调用：

  1 2	add(a, b): a + b add(3, 4) // 7

  支持更具语义化的 RORO 形式参数：

  1 2 3

  add({ a, b }): \ a + b add({ a: 4, b: 5 }) // 9

空白、注释

• 支持任意的空格，便于纵向对齐
• 支持任意的空行，空行不影响结果行号
• 行尾加 \ 可以折行，特别是自定义复杂的函数时可以避免一行过长
• 支持 # 和 // 两种形式的注释
• 输出结果中BigInt 类型和特殊进制会有特殊显示

设置、按钮

• decimal：全局结果精确位数
• rounding：全局小数截取方法
• underline：给强迫症删除空格用
• reset：重置设置
• copy：拷贝 注释 + 算式 + 结果

辅助功能

• 行号：有计算结果的行显示行号，可用于 $ + 行号 获取指定行结果
• 撤销、重做：支持默认的撤销、重做功能
• 快捷键：
  • control+u 单词或选中文本大写
  • control+shift+u 单词或选中文本小写
  • control+c 首字母大写
  • control+shift+c 首字母小写
• URL Hash：URL Hash 中包含完整计算内容和设置，可前进/后退、刷新不丢数据，拷贝 URL 可以分享或备份，重新打开后 100% 还原

已知问题

• “行首为运算符时自动在前面填入上一行结果”导致正负号存在歧义

  例如：

  1 2 3 4 5

  // exp got a: 1 // 1 1 b: -1 // -1 0 c: 1 // 1 1 d: +1 // 1 2

  解决办法是在带正负号的数字外加括号、或在带正负号的数字前换行：

  1 2 3 4 5

  a: 1 // 1 b: (-1) // -1 c: 1 // 1 d: +1 // 1

zszz，早期的 JavaScript 是不支持定义 class 的，要拿 function 和 prototype 组装。画风大概是这样的：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

function Person(name) {
    this.name = name;
    this.friends = [];
}

Person.prototype = {
    makeFriend: function(person) {
        this.friends.push(person.name);
    }
};

function Student(name, grade) {
    // super.constructor()
    Person.apply(this, arguments);
    this.grade = grade;
}

Student.prototype = new Person();
Student.prototype.makeFriend = function(person) {
    // super.makeFriend()
    Person.prototype.makeFriend.apply(this, arguments);
};

var ming = new Person("ming")
    nina = new Person("nina");

ming.makeFriend(nina);
nina.makeFriend(ming);

console.log(ming.friends); // ['nina']
console.log(nina.friends); // ['ming']

很丑！所以当时很多框架都给出了不同形式的封装，但是没有一个我喜欢的，比如现在唯一能想到的 Prototype（停更于 2015 年）使用 和 实现 都没好到哪去。并且我倾向于写原生的 JavaScript，于是自己写了一个 $class.js。

最初 1.0 版本的 $class.js 极其精简，只有 4 行代码！但很好地满足了核心需求：

1
2
3
4
5

this.$class = function(src) {
    src.constructor.prototype = src;
    return src.constructor;
};

$class.js 1.0 的使用，看起来是不是好多了：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

var Person = $class({
    constructor: function(name) {
        this.name = name;
        this.friends = [];
    },
    makeFriend: function(person) {
        this.friends.push(person.name);
    }
});

var ming = new Person("ming")
    nina = new Person("nina");

ming.makeFriend(nina);
nina.makeFriend(ming);

console.log(ming.friends); // ['nina']
console.log(nina.friends); // ['ming']

后来 2.0 版本的 $class.js 支持了继承、以及调用父类构造方法和方法，代码依然不算多：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

this.$class = function $class(source, SuperClass) {
    
    SuperClass = SuperClass || Object;
    source = source || {};
    source.constructor = source.hasOwnProperty("constructor") ? source.constructor : function() {
        SuperClass.apply(this, arguments);
    };
    
    var Class = source.constructor;
    Class.prototype = new SuperClass();
    for (var each in source) {
        Class.prototype[each] = source[each]; // include `constructor`
    }
    
    return Class;
};

$class.js 2.0 的使用：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

var Person = $class({
    constructor: function(name) {
        this.name = name;
        this.friends = [];
    },
    makeFriend: function(person) {
        this.friends.push(person.name);
    }
});

var Student = $class({
    constructor: function(name, grade) {
        // super.constructor()
        Person.apply(this, arguments);
        this.grade = grade;
    },
    makeFriend: function(person) {
        // super.makeFriend()
        Person.prototype.makeFriend.apply(this, arguments);
    }
}, Person);

var ming = new Person("ming")
    nina = new Student("nina");

ming.makeFriend(nina);
nina.makeFriend(ming);

console.log(ming.friends); // ['nina']
console.log(nina.friends); // ['ming']

JavaScript 定义 class 的写法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

const Person = class {
    constructor(name) {
        this.name = name;
        this.friends = [];
    }
    makeFriend(person) {
        this.friends.push(person.name);
    }
};

const Student = class extends Person {
    constructor(name, grade) {
        // super constructor
        super(...arguments);
        this.grade = grade;
    }
    makeFriend(person) {
        // super method
        super.makeFriend(...arguments);
    }
}

var ming = new Person("ming")
    nina = new Student("nina");

ming.makeFriend(nina);
nina.makeFriend(ming);

console.log(ming.friends); // ['nina']
console.log(nina.friends); // ['ming']

所以我想说的是：我对代码的品味好像还可以，昂 😎

博客被我用来发布一个非常强大的程序员专用计算器 ScriptCalculator，详细介绍看这里 GitHub。

刚刚更新了个小功能，结果发现 Hexo 部署后博客页面都变空白了，原因是 Hexo (3.9.0) 版本太低，与 Node (17.4.0) 不匹配，所以肯定要升级 Hexo 了。居然挺麻烦的，又没找到官方文档，还好找到了个靠谱的 博客，这里记录一下，以备多年后再次升级用 🙈

1. 升级 Hexo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# 查看 Hexo 版本
hexo v
# 升级 Hexo
npm i hexo-cli -g
# 确认 Hexo 版本
hexo v

# 安装 npm-check
npm install -g npm-check
# 检查 npm 过期的、错误的、没有用到的依赖，支持 `-g` 参数
npm-check
# 根据提示需要执行 update，但要忽略 Hexo 及相关扩展没有用到提示，不要卸载
npm-check -u

# 安装 npm-upgrade
npm install -g npm-upgrade
# 升级 npm modules，同样支持 `-g` 参数
npm-upgrade

# 升级 npm packages
# 博客说这里可能遇到 `xcodebuild` 相关的错误，升级就好了，我一直追着升，所以并没有遇到
npm update -g
npm update --save

2. 升级配置

发布时遇到提示不支持用户名+密码方式 push 代码，所以 _config.yml 中的 repo 要改为 ssh URL：

1
2
3
4

url: http://iwill.github.io/
deploy:
  type: git
  repo: git@github.com:iwill/iwill.github.io.git

然后，一切又完好如初 😋

Quick Start

Create a new post

1

$ hexo new "My New Post"

More info: Writing

Run server

1

$ hexo server

More info: Server

Generate static files

1

$ hexo generate

More info: Generating

Deploy to remote sites

1

$ hexo deploy

More info: Deployment

看到我订阅的博客多半是用 Octopress 搭建的，所以认定这是个高大上。但是貌似是 XCode 升级到 5.1.1 导致 Ruby 的一些东西不正常了，一直安装失败，GitHub Pages 推荐的 Jekyll 也一样。折腾大半天，非 Ruby Fan 实在无法坚持了，装 B 不成、最终选了 Hexo [hekso] - A fast, simple & powerful blog framework, powered by Node.js，与前者的使用很相似。不熟悉 JavaScript 也没关系，只要不改皮肤基本不会碰到 JavaScript。

安装 Node.js & NPM

首先建议安装 Homebrew - The missing package manager for OS X。感觉叫 missing 的都是极品，比如 TextMate - The missing editor for Mac OS X。

1

ruby -e "$(curl -fsSL https://raw.github.com/Homebrew/homebrew/go/install)"

安装 Node.js - 服务端的 JavaScript，以及 npm - Node Packaged Modules。npm 是前者的 Package Manager，会随 Node.js 一同安装。

1

brew install node

Hexo

1
2
3
4

npm install hexo -g # 安装 Hexo
hexo init iwill.im && cd iwill.im # 初始化 Workspace，名字随意
hexo generate # 从 Markdown 生成静态文件，初始化时会生成一个 Hello World
hexo server # 启动本地 Server

可以访问 http://localhost:4000/ 查看效果，修改 Markdown 无需重新 Server。

Hexo Workspace 的 目录结构 如下，其中 _config.yml 是 配置文件：

1
2
3
4
5
6
7
8
9

.
├── _config.yml
├── package.json
├── scaffolds
├── scripts
├── source
|   ├── _drafts
|   └── _posts
└── themes

建议随时备份 Hexo Workspace，GitLab、GitHub 或者 Dropbox，这有 Hexo 的 .gitignore。

Hexo 的命令也很简单，可以通过 hexo help、hexo help command 查看帮助，下面是最常用的几个命令：

1
2
3
4

hexo n [draft] "blog-title" [-s "file-name"] # n - new，新建博客/草稿
hexo p "blog-title" # p - publish，发布草稿
hexo s -d # s - server、-d - draft，启动本地 Server，并预览草稿
hexo d -g # d - deploy、-g - generate，从 Markdown 生成静态文件，然后发布到 GitHub Pages

更多参考 Hexo Documentation。

Hexo 插件

Hexo 天生支持 DISQUS 的评论功能，在 _config.yml 中设置 disqus_shortname 即可。

我现在用到的插件有 Util、Local Image、Deployment、Feed，安装命令：

1
2
3
4

npm install hexo-util --save
npm install hexo-local-image --save
npm install hexo-deployer-git --save
npm install hexo-generator-feed --save

更多参考 Hexo Plugins。

Hexo 皮肤

Hexo 的 皮肤不多 现在已经很多了，我用的是 Light Cactus - Dark，非常简洁，内置另外 White、Light 和 Classic 三款配色也都很美观，还有数十款代码高亮可选。

皮肤有单独的配置文件 themes/cactus/_config.yml，可以添加页面、链接，例如 About、RSS，并且还可以展示 GitHub 项目、Disqus 评论等，更多功能详见 Features。

更多参考 Hexo Themes。

GitHub Pages

现在本地的博客已经搭建起来了，下一步是发布到 GitHub。

1. 在 GitHub 上 创建一个 repo，格式是 username.github.io。

2. 打开 Hexo 配置文件 _config.yml，设置博客 url 和 deploy 相关参数：

   1 2 3 4

   url: http://iwill.github.io/ deploy: type: git repo: https://github.com/iwill/iwill.github.io.git

3. 安装 hexo-deployer-git：

   1	npm install hexo-deployer-git --save

4. 发布静态文件到 GitHub：

   1

   hexo d

   访问 https://github.com/iwill/iwill.github.io 可以看见刚刚发布上去的静态文件，访问 http://iwill.github.io 就可以看见博客了！

更多参考 GitHub Pages、Hexo Deployment。

使用个性域名

没有域名可以去 https://domai.nr/ 找一个注册，之后做如下设置：

1. Hexo 的配置文件中的 url 设置为完整的博客地址，如 http://iwill.im/。

2. 在 Hexo Workspace 的 Source 目录下创建名为 CNAME 的文本文件、写入域名，如 iwill.im。

3. 然后执行 hexo d -g 将上面设置发布到 GitHub Pages 上。

4. 在域名服务后台设置域名跳转，注意二级域名 (如 iwill.im) 和三级域名 (如 www.iwill.im、blog.iwill.im) 的设置有所不同，需仔细阅读下面说明进行设置、校验：
   https://help.github.com/articles/setting-up-a-custom-domain-with-github-pages#subdomains
   https://help.github.com/articles/setting-up-a-custom-domain-with-github-pages#apex-domains
   这是我的设置：
   

写博客

在文章中插入 <!-- more --> 可以将前面部分生成摘要，否则默认显示全文；

到这才发现，写博客才是最困难的 …