html5诞生以来,字体特性算是一个广受喜爱的特性,但又对于最终用户不算是太友好,毕竟前端不是专业造字人,特别是中文,所以就出现了很多基于字体的框架,软件等。

今天说一下,如果本文看完的话,基本上能解决 90% 的字体问题,所以就叫九成手册,当然你要问我IE,我就呵呵了,再说一次,html5.

图标

一:使用图标库

使用 Icon 是目前来说字体应用最为广泛的了。比较流行的框架有 glyphicons awesome 等等。

记得在不久前(就算是如今),很多网站都没有使用字体来做为图标,而是使用图片,这样会有很多缺点:

  1. 字体文件一般都比较小,包含上百个图标的字体通常不到 40kb,而使用位图,100个图标可能达到 1Mb 以上,而且网络请求 100个小图标,也是不小的开销。
  2. 当然,你也可心使用 css-sprite 技术将这100个小图标压成一幅图片,这样就只请求一次了,但编写css样式的复杂度就会变高很多,即使是用 compass,也要额外写很多。而且当你使用 sprite 图后,就没有办法进行大小控制了。
  3. 使用图片,样式不够灵活,比如放大缩小,颜色等,如果是字体,可以随便调整 font-sizecolor 等属性。
  4. 图片如果拉大后,就会失真,颗粒感强

当然图片有两点好处,目前还使用图片做为ICON的都是基于以下考虑

  1. 图片显示效果可以好一点,比如在PS里面加入各种特效后导成图片,字体就比较难做到
  2. 兼容老古董IE

一般情况下,都是使用 <span class="icon xxx" /> 之类的来放置一个图标,但也有一些框架可以直接使用文字切换,比如 Google 的 MaterialIcon 可以直接写为 <i class="material-icons">book</i>

具体怎么写参考框架就行了,不多讨论,但是即使如此,一般情况下都会受到一定的局限性,有时想要一个好的 ICON 但是图标库中没有是很觉的事。

阅读全文

由于目前主要前端语言由 JavaScript 切换到了 TypeScript,所以原先用的 JSDoc 工具也用不了了,虽说 JSDoc 官方也在积极适配TypeScript,但始终产品不能等工具。何况不是核心的文档功能。

于是上Github上找了一下,很快发现了以下项目:

TSDoc
typescript-docs
ts2jsdoc

Star 只有几十不说,安装下来,发现功能粗糙,很多基本的应该有的功能很难进行定制,生成效果和预期差距很大。

TypeDoc

这些项目的理念是基于 JSDoc 或是自己实现一个简单的 JSDoc 来实现文档化,于是换了换思路,终于找到了神器 typedoc

阅读全文

最近从各大招聘网站上看,很多职位上有这么一条 对数据敏感 ,这是一条模糊的概念,其实是由于最近的大数据和人工智能太过热门,所以多了这么一条要求,其实招这些人的公司可能并不能完全明白 数据敏感到底是一种什么样的能力 ?

数据敏感 DEMO

如果看过一两篇关于数据的文章,你可能对于这个图就不会陌生:

这里以一个买房的过程,举个栗子:

  1. 你想买房,那肯定会自觉的关心城市的房价,在一定的时间范围内,对房价数据感兴趣,收集 一些需要的房价信息, 对房价可能会有一定了解,积累为 常识

  2. 当你有了一定的 常识 后,再去看房网站去看列表时,才可能会 发现 一些房价小于相似房源的 低价房

  3. 因为你想捡便宜,这些 低价房就是你优先看的目标。所以你点进去,再把相似的房源也点进去,通过各项数据 分析 对比,可以知道为什么会便宜

  4. 经过大量的 分析 后,你可能已经 转化 了一套别人不能具有的 知识,比如:影响房价的最高的三个因素,一种类型的房的共性、特性,等等。

通过上面的例子,也就是本人的浅见,数据敏感的能力分为四个层级:1. 收集 => 得到常识2. 必现 => 得到异常3. 分析 => 得到信息4. 转化 => 得到知识

阅读全文

前段时间比特币暴涨,最近股市上,区块链概念也随之大热。仿佛世界上那些风投公司里面顶级聪明的大脑都看到了区块链在未来一片光明。

好奇心作祟,查了各种资料,做出一个结论:区块链(这名字听着刺耳,还是叫BlockChain好了 就BC吧 )应该算是比概念高一级的产物,不像之前的什么VR、3D打印之类闹眼子的名词,BC应该是一个可以改变商业模式、供求关系的技术,不管是概念上,还是影响性上,都比前几个名词要大的多。

BlockChain 技术

目前也看也一些技术文章,研究了下原理,也找了几台服务器模拟的布也一下。虽然个人对各种技术都很感兴趣,但目前对 BC 的技术实现实在提不起兴趣来,对于它的技术性功能,以技术比喻,总结为三句话:

  1. BlockChain 是一个永久可用的数据库。
  2. 数据库只有新增和查询的功能,没有删除和修改的功能。
  3. 数据库互联网,而不是某公司的某个服务器,这也是前两点能成立的前提。

现在是不是感觉有点简单了,但就是这么一个简单的技术,可能会带来一些商业结构性的变化,所以现在很多投资人都看好它,那就是 : 去中心化

把这个去中心化的概念理解了,就知道比特币相对于 BC 简直就是小儿科。个人参考资料搬点或自己猜点应用场景,分享一下。

阅读全文

一个基于d3的地图demo,点击这里看;代码放在了github

项目说明

D3-GEO-MAP 是一个基于 d3.js(v4),和 lodash 的地图绘制工具包。特性:

  1. 支持 GeoJson格式(需要 properties 中至少有个 name 属性,目前在各地下载的基本都有这个属性),推荐的下载地址为 :阿里云-datav的下载。这个版本的地图包含已经计算好的中心点以及上下级的级联数据,方便后续自行扩展功能。
  2. 通过滤镜实现了一个 伪3D 的效果。地图看上去有一定的立体感。
  3. 支持各种点击选中交互操作
  4. 支持 条形图
  5. 支持 地区连线
  6. 支持 地区点
  7. 支持 飞线
  8. 支持Tips提示
  9. 目前所有功能压缩后不到30k(如果分离些不需要的组件和scss,会更小)。
  10. 暂未兼容 TopoJson ,如果使用的是 TopoJson

阅读全文

线性比例尺 d3.scaleLinear

最常用的比例尺 : d3.scaleLinear , 线性比例尺:

1
2
3
4
5
6
var fn = d3.scaleLinear()
.domain([10, 130])
.range([0, 960]);

fn(20); // 80
fn(50); // 320

这里的 scaleLinear 方法创建了一个函数。 将[10, 130] 的空间 投射到 [0, 960] 的一个函数:

[ 10 , 130 ] => [ 0 , 960 ] ,用数学的写法就是:

$$
f(x) = y , x \in [10 , 130] , y \in [0 , 960]
$$

比例尺的作用就是创建一个映射函数,在实际写代码的过程中,是很有作用的。除了线性比例尺外,d3 内置了十几种比例尺,可以满足各种不场景的需求。

阅读全文

Tween.js 是一个 过渡计算工具包 ,理论上来说只是一个工具包,可以用到各种需要有过渡效果的场景,实际上也是这样。 不个人目前最常用的就是与 threejs 结合使用。

一、引入工具包

1
npm install @tweenjs/tween.js

引入

1
var TWEEN = require('@tweenjs/tween.js');

个人习惯性的用 npm 安装引入 ,如果不习惯,下载源文件并通过 script 标签套进来也是一样的。

一般情况下,需要通过环境里面提供的辅助时间工具来实现。比如在网页上就是使用 window 下的 requestAnimationFrame 方法,低端浏览器只能使用 setInterval 方法来配合了。

阅读全文

fetch 是接收的意思,不管是世界上最好的语言 php 、还是使用最多的数据库 mysql 都有 原生的 fetch 函数,其它语言基本都有,今天说的就是 JavaScript 的原生函数 fetch.

Fetch 是什么?

目前来说,它是替代 Ajax 的一个原生解决方案,一般来说需要支持一定的 ES6 运行环境,好消息是大多数浏览器都能支持,坏消息是,如果你要支持IE,那就还不适用,不过可以用第三方的 Fetch 包来兼容。

你一定知道 Ajax ,它是上世纪90年代的 XMLHttpRequest 技术规范演化而来,用来发送网络请求的 浏览器原生API,如果写过原生 Ajax 的同学肯定眼熟下面一段代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var xhttp;
if (window.XMLHttpRequest) {
// code for modern browsers
xhttp = new XMLHttpRequest();
} else {
// code for old IE browsers
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
// Typical action to be performed when the document is ready:
document.getElementById("demo").innerHTML = xhttp.responseText;
}
};
xhttp.open("GET", "filename", true);
xhttp.send();

如果把以上代码转为 Fetch 的写法,就是

阅读全文