标签: Chrome

Nginx 为 HTTPS 加密站点启用 Certificate Transparency

nginx-ssl传统的 SSL 认证身份的过程可能存在着受信任 CA 错误或某些不负责任行为、抑或是自身域名被别人冒充申请颁发证书的潜在危险,这是 SSL 认证环节中容易被利用的一环。由 Google 主导的 Certificate Transparency (CT)希望解决这些问题。任何证书持有人、CA 都可以向 CT 服务器提交证书,并接受审计和监控,使得当前的 CA 能够更加安全公开和透明。

启用 Certificate Transparency 与否的不同

如果 HTTPS 网站没有部署 Certificate Transparency,会有什么不同呢?

首先,Google Chrome 浏览器取消了对没有 CT 记录 Extended Validation(EV)证书绿条(Green Address bar)的显示。

其次,如果你有 iOS 开发的需要,你会了解到 iOS 9 新增了一个叫做 App Transport Security (ATS)的特性,开始默认强制所有请求为 HTTPS 请求。如果你的网站不支持Certificate Transparency,那么将不能通过 NSRequiresCertificateTransparency 的情况。

除此之外,对于大多数中小型网站 CT 的启用与否,还没有太大的区别。在 Chrome 上点击证书绿锁可以看到,未启用 CT 的网站和启用 CT 的网站存在着下面这一句话的细微区别。

解决 Google CDN 无法连接导致网页无法加载的问题

Google Blocked国内网非常多的网站都使用免费的 Google CDN 服务来加载某些 js、字体样式库以提升网页浏览体验,例如 jQuery、Google Fonts。但是目前 Google 的大多数网站在大陆无法正常访问,因此这些本身是加快网页载入的库反而成为了阻塞网站加载的原因。这种情况国内的网站并不多,但是国外的网站却非常多地使用这些库。一般地,当 Google CDN 库称为网页加载的限制因素时,浏览器状态条会显示状态为 “正在等待 ajax.googleapis.com 的响应...” 或 “正在连接...” 等字样。

ajax.googlepis.com connection refused

如果打开控制台,能看见 Google CDN 确实正在阻塞网页加载。如果等待足够长的时间,浏览器最终会放弃加载,并呈现一个残缺的网页,这并不好。下面从网页开发者、浏览器用户的角度给出一些解决方案。

VPS 三步搭建安装 Shadowsocks Node.js 版

我们除了 VPN、HTTP Proxy 可以选择以外,还可以选择一款轻量的 Socks5 代理,它是有名的 Shadowsocks,如果你有一台自己的 VPS 主机的话,不妨可以利用手中的资源搭建一个。

Shadowsocks
支持加密的 Socks5 代理,开源项目。

Shadowsocks 有不少服务器端的版本选择,例如 C、Python,而之所以推荐 Node.js 是因为它小巧却性能强悍,并且听上去很时尚。事实上,Node.js 版的 Shadowsocks 搭建起来也很容易,可以将其大致归类为 3 个步骤,所花费的时间不会超过 10 分钟。

网页检测 AdBlock 的 6 种方法

adblock logo有些网页上充斥着令人厌恶的广告,这些广告不仅阻碍了信息的获取,有的还严重影响了浏览者的心情。特别是某些毫不相关的多媒体广告和弹出式窗口,不仅让人感到被骚扰,还很容易误点到,浪费宝贵的时间。由此便诞生了大名鼎鼎的跨平台 AdBlock 插件,在任何主流浏览器上都有它的扩展或插件,用户可以安装它并屏蔽绝大多数的广告。

既然 AdBlock 有检测广告并屏蔽它们的方法,作为网页制作者,其实也有反过来检测 AdBlock 的方法。

为什么要检测 AdBlock

这是一个有争论的问题:用户有选择不看广告、在浏览器页面上销毁广告的权利,网站也有捆绑广告和信息一同派发给你并收取广告商展示费用的自由。这两者都不能互相干预,并且在没有明确法律法规的环境下,你可以防范我,我也可以防范你。

ads on webpage

HTML5 自定义属性 data-* 和 jQuery.data 详解

html5 dataset新的HTML5标准允许你在普通的元素标签里,嵌入类似data-*的属性,来实现一些简单数据的存取。它的数量不受限制,并且也能由javascript动态修改,也支持CSS选择器进行样式设置。这使得data属性特别灵活,也非常强大。有了这样的属性我们能够更加有序直观的进行数据预设或存储。下面介绍HTML5 Dataset 存储的实际应用,以及包括jQuery在内的四种存取方式。

HTML5 Dataset 存储的例子

为一个元素分配data属性存储数据,例如这是一个span元素,它的内容是一首音乐的名称,我们为其HTML标签里直接预置这首歌的更多信息,在HTML源码上看起来可以这样来写:

<span id="music-latch" class="musique"
data-date="2013"
data-genre="Electronic"
data-album="Settle (Deluxe)"
data-artist="Disclosure"
data-composer="Howard Lawrence & Guy Lawrence">
Latch (feat. Sam Smith)
</span>

这样,我们就很简单的为这首歌在span标签里直接内嵌了其专辑、艺术家和流派信息。

如何一步步把网站Retina优化

retina logo随着高清屏幕、高分辨率屏幕越来越流行,例如MacBook Retina机型、iPad Air系列,这些新生机器有着很高的PPI,对网页的清晰度要求很高,所以越来越多的站长都不得不面临一个问题,那就是把自己的网站做到高分辨率适配 (Retina-Ready)。因为低清的网页在高分辨率屏幕上看起来很糟糕,对用户体验是一个很大的损害。相反,高分辨率适配的网站看起来则更加美观清晰,对用户体验有很大的提高。所以随着科技的发展,Retina适配 (Retinafy)是一种必然趋势,各位不妨现在就做好这个准备。

Retina 适配的优势

网站为高清屏幕优化有什么优势呢?首先有大量的网站没有Retina优化,并且有着越来越多的互联网流量来自平板和手机电脑,这些机型都是非常提前就拥有高清屏的。之所以广大的站长还不动心Retina优化自己的网站,大多因为他们管理网站所用的电脑还不是高清屏幕,所以暂时没有体验到高清屏下低清网页的模糊感觉。但是如果能在现在就鹤立鸡群,把自己的网站做到高清优化,是非常尊重用户体验的,可以获得更多的回头客和满意度。

retina websites on macbook

下面就来从网站的一些基本角度出发,来展示如何一步步的让网站Retina优化。

在Mac OS X上安装dnsmasq来支持hosts泛解析

dnsmasq最近访问谷歌系列网站越来越慢了,不探究原因,但这让我感到非常苦恼,如果连Google都使用不了的话,那我上网的意义就失去了一半了。不过好在我们有hosts,可以实现简单的翻# 墙,来解决大多数谷歌服务的访问问题。可是谷歌的域名实在是太多了,我们有没有什么办法来实现类似*.google.com/*的泛解析呢?很可惜,传统的hosts文件不可以行。但是有一个叫做dnsmasq的软件,它能提供类似DNS缓存的功能,可以用它来实现很强大的泛解析功能。

下面以OS X Mavericks做例子,来讲述如何安装使用DNSMASQ,来实现谷歌服务直连。

Mac安装DNSMASQ

要安装dnsmasq,你需要先安装Homebrew

它自称“OS X 不可或缺的套件管理器”。

安装Homebrew

请打开终端(应用程序>实用工具),并运行

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

你需要按照提示来继续安装。这个过程或许会很慢,受限于网络状况。如果实在很慢,你可以在VPN环境下安装。

安装完成之后,你就可以使用brew命令来安装dnsmasq了。

下载网页中嵌入的Base64编码字体 (Webfont)

font icon网页上可以嵌入一些小型的字体来增强界面效果,优美的字体一直是界面开发者所梦寐以求的,然而优美的字体并不能想Arial和Helvetica那样,在大多数的平台上都自带。如果确实需要某种字体,为了防止客户端字体库没有这个字体,UI设计者可能就会在网页上选择嵌入字体,来达到所有客户端显示效果一致,保留最整齐的界面。

Webfont (Web Open Font Format) 正诞生于此,它的有点不仅在于占用体积较小、浏览器通用功能,它还可以轻松的转换为base64编码,从而非常简单的直接嵌入到CSS中,不需要额外的文件了。例如主流的Adobe Typekit就提供了在线字体库服务,其字体大多数都是通过此方法来嵌入的。

typekit

中意了某款在线字体,想要下载下来试用一下?本文就以Chrome浏览器为例,来教大家如何下载这些嵌入的Base64编码的字体 (Webfont)。

Tridiv: 在线的CSS 3D编辑器,轻松创建3D Web图形

tridiv logo利用最新的CSS技术,配合支持的浏览器,你可以轻松的在线创建、浏览并保存管理Web 3D图像。Tridiv是一个基于 Web 的免费编辑器,使用 CSS 创建 3D 图像,直观且容易操作,不需要多余的教程即可轻松上手,并且可基于Local Storage保存管理你创建的3D图像。

tridiv.com

在Windows、Mac上安装Google+ Photos for Chrome

googleplusGoogle+ Photos for Chrome已经发布到Chrome Web Store,可以帮助你自动上传数码设备中的照片到Google+ photo album,在提供超大容量(标准尺寸无限容量)的同时,也能帮助你“挑选效果最好的”相片,来看看自己曾经的美好。不过目前这款扩展只能在Chromebook上使用。有什么办法可以让Google+ Photos for Chrome在Windows或者Mac的Chrome上运行呢?其实原理很简单,摸索一下就知道了。

为Windows、Mac安装Google+ Photos for Chrome扩展

首先,来到 chrome.google.com/webstore/detail/google+-photos/efjnaogkjbogokcnohkmnjdojkikgobo 查看这枚官方的插件介绍页,这个时候你会发现“添加到Chrome”按钮是灰色的不可用。一个简单方法就可以让它可下载。