结合附加符号

结合附加符号(combining diacritical marks)是指一类比较特殊的字符,这些字符一般不会单独存在,而是结合其他字符一同出现来表达不同的含义。汉语环境下,比较典型的例子就是汉语拼音的声调。

结合附加符号的 Unicode 范围是 0300-036F,字符数量总共有 112 个。其中,汉语声调字符包括:

名字 样式 Unicode编号 HTML实体代码 汉语声调
组合用长音符 ̄ U+0304 ̄ 阴平
组合用锐音符 ́ U+0301 ́ 阳平
组合用抑扬符 ̌ U+030C ̌ 上声
组合用抑音符 ̀ U+0300 ̀ 去声

Javascript 中使用 String.fromCharCode() 可以返回由指定的 UTF-16 代码单元序列创建的字符串。例如,String.fromCharCode(98, 97, 768, 32, 98, 97) 返回 bà ba,而 bà ba 的长度为 6。

结合附加符号有一个特点是可以附加在前一个字符上,这就导致前一个字符的实际显示高度可能会变化,例如:

cdm_inner

考虑到这种情况,在渲染文本的时候,如果文本有可能含有结合附加符号最好限制一下行高度和文本渲染区域的高度,防止影响区域外的内容。

git 仓库代码统计

代码统计一般是对某一个或者多个代码仓库的开发人员在某段时间内或所有历史时间段内进行代码提交次数、代码提交行数等进行统计,以反映人员对代码仓库的贡献量的一种手段。
通过 git 进行代码管理的项目,通常使用 git log 命令的输出进行统计。

阅读更多

分辨率,屏幕比例与设备像素比

首先需要理解一些屏幕分辨率相关的概念:

屏幕分辨率与PPI

屏幕分辨率(Screen Resolution)

屏幕上面的像素点数,以 水平像素数 * 垂直像素数 来表示,分辨率越高,像素数越多,图像越细腻。分辨率的单位为px(像素),例如 1920 * 1080 分辨率,指的是水平像素为 1920 像素,垂直像素为 1080 像素。

DPI(每英寸点数 Dots Per Inch)

DPI(Dots Per Inch,每英寸点数)是一个量度单位,用于点阵数码影像,指每一英寸长度中,取样、可显示或输出点的数目。

PPI(每英寸像素数 Pixels Per Inch)

PPI(Pixels Per Inch,每英寸像素数)所表示的是每英寸对角线上所拥有的像素数目。假设 X 代表长度像素数;Y 代表宽度像素数;Z 代表屏幕大小(屏幕对角线长度单位是英寸),那么 PPI=√(X^2+Y^2)/ Z。PPI 越高,人视觉上看到的屏幕就越清晰。当屏幕的 PPI 达到一定数值时,人眼就几乎分辨不出颗粒感了。

阅读更多

小文件下载方案

我们需要一个模板文件供用户进行下载,这个文件是csv类型的,大小很小,一开始是想要放到CDN上,上传COS,然后生成a链接下载,地址是这样的 https://xxx.myqcloud.com/csv/xxx.csv

这里有一个问题,在 Safari 浏览器中直接打开了该文件而不是下载,原因是 http header 当中的 Content-Disposition 没有设置成 attachement;filename="xxx.csv",所以浏览器就会按照 Content-Type: text/csv 来进行解析,不同浏览器对该类型返回解析方法不一样, Safari 会打开(以 Content-Disposition: inline 形式),而 Chrome 等其它浏览器会下载。

为了解决这个问题,最后采取了 Data URLs 的方案。首先,执行 uuencode -m xxx.csv 进行 base64 位编码生成 csv 文件的 Data URL,然后将下载地址替换为该 Data URL 。

或者如果需要下载的csv为字符串文本的话,可以使用 js window.btoa() 方法创建一个 base64 编码的字符串。但是 window.btoa() 方法只支持 Latin1 字符,遇到不支持的字符会报错 Uncaught DOMException: Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range. 所以需要先通过 encodeURLCompnentd 编码一下。

1
`data:text/csv;base64,77u/${window.btoa(unescape(encodeURIComponent('字符串')))}`

点击下载

77u/ 是 UTF-8 的 BOM(0xEF 0xBB 0xBF)经过 base64 编码过的代码,如果不添加的话在 Micro Excel 中会显示为乱码。

阅读更多

小技巧

本篇主要记录一些小技巧或者开发过程中遇到的小问题和解决方案。这些问题实在太小了而且大部分可能和代码没有关系,不好每次都单独列一篇文章,所以放到一起了。

阅读更多

Mac下Eclipse快捷键

快捷操作

操作 快捷键
全选 command A
复制 command C
粘贴 command V
查找 command F
回退 command Z
剪切 command X
退出 command Q
删除当前行 command D
放大字体 command +
缩小字体 command -
注释/反注释 command /
打开preference command ,
代码补全提示 option /
最大化/还原 control M
格式化代码 command shift F
自动导入包 command shift O

便利设置

Preference -> General -> Editors -> Text Editors

Show line numbers
Show white space charactors

清除网站中的无效链接

网站上有大量的无效链接(返回404或域名不存在)会使网站的总体质量下降,所以清除网站中的无效链接也是提升网站质量,优化用户体验的一种方法。

通常而言,链接有链接向外部的也有在网站内部跳转的链接,链接向外部的网站尽量希望链接到一些稳定的网站,有些地址是很容易被移除的,比如链接到文章或评论的,链接到个人网站的,链接到下载页的。时常注意一些大的域名变动,比如有些产品可能已经下线或更换地址,如果自己的网站中有引用,也需要同步的改变。链接到内部的网站时可以做一次引用记录,当记录的链接修改时同步修改所有的地方。

阅读更多

失效链接替换方案

有些时候,尤其在文档型的网站中,页面链接经常变化调整。通常的做法即搜索网站中的所有相应页面进行url替换,但是即使这样做了,还是有一定风险,用户可能已经收藏了链接,在用户点击收藏链接跳转的时候,会发现页面不存在。这时,我们可以通过设置404页面来引导用户跳转到其它的可能符合用户期望的页面(比如主页)。同样的,如果其它网站引用了该失效链接,同时不希望此网站的引用失效(或者没有修改此网站的权限),就只能在落地页网站做一下兼容,在跳转的时候重新定向一下,具体代码如下:

1
2
3
4
5
6
7
8
!function(){
var path = location.pathname + location.hash;
var urlMap = {
'xxx': 'xxxx',
'xxx/media#live-player': 'xxx/media_live-player/'
};
urlMap[path] && location.replace(urlMap[path]);
}();

这是一种治标不治本的改动,最好的改动还是移除失效的链接。

querySelectorAll一个小坑

首先查看一下querySelectorAll的文档:

querySelectorAll

返回与指定的选择器组匹配的文档中的元素列表 (使用深度优先的先序遍历文档的节点)。返回的对象是 NodeList

用法:

1
var elementList = document.querySelectorAll(selectors);
  • elementList 是一个静态的 NodeList 类型的对象.
  • selectors 是一个由逗号连接的包含一个或多个CSS选择器的字符串.
  • 如果 selectors参数中包含 CSS伪元素,则返回一个空的elementList.
  • 如果指定的选择器不合法,则抛出一个SYNTAX_ERR 异常.

阅读更多

Visual Studio Code 常用快捷键

以下的Ctrl键指的是Windows系统下的Ctrl键,在Mac上对应Command键。

主命令框

F1 或 Ctrl+Shift+P: 打开命令面板。在打开的输入框内,可以输入任何命令,例如:

  1. 按一下 Backspace 会进入到 Ctrl+P 模式
  2. 在 Ctrl+P 下输入 > 可以进入 Ctrl+Shift+P 模式

在 Ctrl+P 窗口下还可以:

  1. 直接输入文件名,跳转到文件
  2. ? 列出当前可执行的动作
  3. ! 显示 Errors或 Warnings,也可以 Ctrl+Shift+M
  4. : 跳转到行数,也可以 Ctrl+G 直接进入
  5. @ 跳转到 symbol(搜索变量或者函数),也可以 Ctrl+Shift+O 直接进入
  6. @ 根据分类跳转 symbol,查找属性或函数,也可以 Ctrl+Shift+O 后输入:进入
  7. # 根据名字查找 symbol,也可以 Ctrl+T

阅读更多