使用D3.js创建令人惊奇的地图

化学污染物地图,台风“妮妲”正在广东肆虐

D3(有时候也叫D3 或d3.js)是一个JavaScript 库,用于创建数据可视化图形。但是这一句话不足以描述D3的功能,如它的官方文档所说,D3.js 是一个基于数据的处理文档的JavaScript库。D3可以帮你使用HTML、SVG、CSS创建可视化的数据。

D3.js得到了广泛的应用,也创建了很多非常漂亮的图形,其中之一就是和地图数据的结合。

阅读全文

用 CSS 实现三角形与平行四边形

原文:用 CSS 实现三角形与平行四边形, 作者:邹润阳

最近在逛某个技术网站的时候,感觉文章关键词上的样式好酷炫啊。于是我将那种写法照搬到了我的博客中,也许最近逛过我博客的小伙伴已经发现了它出现在哪儿了——分页的样式。来张截图:

你在首页的底部也可以看到这样一个分页栏;是不是看上去还不错?下面就来看看这是如何实现的吧~

阅读全文

30个你必须熟记的CSS选择器

英语原文: The 30 CSS Selectors you Must Memorize
中文翻译 by Yimin Zhou30个你必须熟记的CSS选择器

另外一个关于CSS slector的资源是: MDN CSS Selectors

你学会了基本的idclass类选择器和descendant后代选择器,然后就觉得完事了吗?如果这样,你就会错过许多灵活运用CSS的机会。虽然本文提到的许多选择器都属于CSS3,并且只能在现代的浏览器中使用,但学会这些是大有好处的。

阅读全文

gulp plugins 插件介绍

Gulp是一个构建工具, 功能类似grunt, 以及Java生态圈的ant, maven, gradle等。 其它的javascript生态圈的构建工具可以参考: List of JavaScript Build Tools
它采用了一种流式处理的方式, 编写起来简单直观。 相对于其它javascript构建工具, 母亲啊它的star数是仅次于grunt,流行度还是比较高的。
通过"代码优于配置" (code over configuration), 通过javascript编写构建任务, 充分利用javascript生态圈的组件, 可以实现简单灵活的任务管理。 通过node stream的方式,直接在内存中管道式处理流,不必缓存到硬盘上, 节省构建时间。

Gulp介绍请参考我转载的另一篇文章: Building With Gulp
另外有一篇很好的入门文章: Getting started with gulp, 繁体版, 简体中文硬翻版

从我的实践上来看, gulp要比grunt更好的管理构建过程。 编写简单,条理清晰,功能强大,学习无曲线。

Gulp是基于Node.js构建的,因此Gulp源文件和你用来定义任务的Gulp文件都被写进了JavaScript(或者CoffeeScript)里。 Gulp本身虽然不能完成很多任务,但它有大量插件可用,开发者可以访问插件页面或者在npm搜索gulpplugin或者gulpfriendly就能看到。例如,有些插件可以用来执行JSHint、编译CoffeeScript,执行Mocha测试,甚至更新版本号。现在有大约980个左右的插件可以使用。你可以到http://gulpjs.com/plugins/或者http://npmsearch.com/?q=keywords:gulpplugin查找所需的软件。
面对如此众多的插件, 想要全部了解并灵活运用它们几乎是不可能的事情。 实际开发中多参考别的项目的实现, 根据自己的需求寻找合适的插件, 总结并开发自己的插件, 逐步积累对gulp的认识。

本文列出常用的几个插件, 并在将来的开发中更新此文作为记录文档。 多个插件和grunt的插件功能类似。

阅读全文

Hexo 同时支持Github和Gitcafe

Hexo支持同时发布到多个git仓库中。需要修改_config.yml
原来的配置:

1
2
3
4
deploy:
type: github
repo: github: https://github.com/<username>/<username>.github.io.git
branch: master

改成

1
2
3
4
5
deploy:
type: git
repo:
github: https://github.com/<username>/<username>.github.io.git,master
gitcafe: https://gitcafe.com/<username>/<username>.git,gitcafe-pages

首先需要你在gitcafe创建一个和用户名相同的项目,并为此项目创建一个gitcafe-pages。 静态站点发布到这个分支上。 同时需要绑定你的域名在此项目上。
这和github有点不同。 github要求创建一个<username>.github.io的项目,站点发布到master分支即可。

dnspod
之所以发布到两个站点, 主要是想让国内的用户直接访问ggircafe上的站点,这样速度快一点。
你可以在dnspod上针对不同的线路配置不同的A记录。

参考文档:

javascript 函数前面的一元操作符

segmentfault上的一个问题:

一般看JQuery插件里的写法是这样的:

1
2
3
(function($) {
//...
})(jQuery);

今天看到bootstrap的javascript组件是这样写的:

1
2
3
!function( $ ){
//...
}( window.jQuery );

为什么要在前面加一个 " ! " 呢?
原来,使用括号包裹定义函数体,解析器将会以函数表达式的方式去调用定义函数。也就是说,任何能将函数变成一个函数表达式的作法,都可以使解析器正确的调用定义函数。而 ! 就是其中一个,而 + - || 都有这样的功能。
另外,用 ! 可能更多的是一个习惯问题,不同的运算符,性能是不同的。

阅读全文

最佳免费的网站性能测试工具

网站的加载速度在一定程度上来说是决定网站能否成功的关键。如果您是网站所有者,一定知道网站速度的重要性。因为没有人愿意为了打开一个网页而等老半天,换句话说,如果你的网站打开速度很慢,将流失大量的访客,甚至出现多米诺效应的不良影响。

阅读全文