three.js入门及飘雪实现

three.js是一个JavaScript的3D库,可用于构建WebGL应用。2011年写过一篇《一个二进制的Web新世界》,从那时起就一直断断续续有接触这方面的资料。本文是three.js的一些入门,并用其实现一个飘雪的效果。 其实,对于web应用来说,3D一直以来都较少使用,不过2016年被称为是VR年,作为网页端的WebVR也趁此机会迅速发展了起来,而其核心库正是three.js。three.js的官方文档和Demo目前已经较为完善,由于一直在迭代演进,API的变化还是比较明显的, ...

响应式设计实践手札

响应式设计实践手札 说到相应式设计,首先要提及的是其核心技术Media Queries。记得还是在我10年前上大学的时候,看着书本中描述响应式设计的愿景仿佛还如同昨日,如今随着Media Queries受到浏览器广泛支持而早已成为现实。我最早写的关于Media Queries的CSS3 Media Queries 详解一文,发布于2010-08-23,距今已然6年,并且Media Queries Lv3也已经在2012年成为W3C推荐标准——也正是2012年,算是响应式设计的爆发之年。 于是这些年来各种设计精巧的响应式页面便层出不穷, ...

Ghost更新至0.9.0并启用HTTP/2

Ghost在0.8.0之后不久便更新了新版本0.9.0,本来想等HTTP2一起弄,不过这段时间阿里云还是迟迟不上Ubuntu 16.04 LTS,实在有些等不及,所以还是决定直接从14.04升级到16.04。因为早些年吃过很多更新系统的亏,所以一直对系统核心升级颇为不喜。好在这次比较顺利,更新到16.04之后,获得了OpenSSL ...

为Ghost添加归档页

为Ghost添加归档页 归档页是博客的常用页,以前在用WordPress的时候,系统有内置归档页的功能,而且即便不是自己想要的表达形式,也可以通过编写主题功能文件funcions.php来重新自定义绝大部分功能。不过Ghost当前依旧不支持,甚至其对静态页面的支持也非常弱,无法在后台选择希望使用的静态页模板,必须要在主题中手动添加对应的模板文件并在slug里显示指定。尽管如此,但我还是希望在不编辑核心代码的情况下,得到所有文章的归档,而使用的也就是Ghost的静态页。 最简单的做法当然是手动编辑这张静态页,对于文章数不多的博客完全是可行的。不过我看了一下自己博文数达到了278篇,手动编辑还是有些吃不消,所以就用Ghost自身的功能列出当前所有的标题和连接。参考Ghost的主题文档, ...

简述HTTP/2的特性及其对前端的影响

去年5月HTTP/2正式发布,自1999年引入HTTP1.1已逾15年。这些年的发展使得页面相比2000年实不可同日而语,而基础协议却始终没有迎来什么变革。早前虽然有Google的SPDY,并且因为Google号召力各方面的支持度并不低,但毕竟不是行业标准。所以如今的HTTP/2上马绝对称得上是众望所归了。 HTTP/2发布伊始,浏览器方的支持相对还要更好一些,服务器端的跟进稍慢,但到了1年多后的现在都已经相当成熟了。不知不觉间访问的很多网站都已经部分或全部都切换到HTTP/2,着实像是一股风潮,不赶一下好像显得有些落伍一样: ...

Let's Encrypt,启用 HTTPS

如今的网站,HTTPS也已经逐渐成为了标配了。Let's Encrypt 作为个人用户最好的免费证书的选择,也关注了一段时间了,这次就抽空将网站强制到HTTPS。这里主要记录一下过程和遇到的问题。 Let's Encrypt作为新的证书颁发机构,免费,自动,开放,这三点对于个人用户来说尤为重要。免费自不用说,自动更是免去了很多过程和麻烦。官网目前推荐的获取和安装方式是certbot,只需要简单运行一些命令并作一些配置即可。我的环境是nginx以及ubuntu 14. ...

十年CSS

十年前,当百度空间在06年7月正式上线的时候,我写了自己的第一行CSS样式。我清楚地记得那是一行指定百度空间background图片的代码。而CSS就是这么简单的东西,一个刚入大学的学生,只是希望为自己的空间稍稍装点一下而单凭猜测和模仿就能够写上几句的代码。百度空间在运行八年后正式关闭,而自己也决然不会想到,十年之后自己依旧在写CSS并以此度日。 CSS理应是简单的东西,它就是这么被设计出来的“简单的描述”,只是这十年里的前5年IE6的存在俨然使其成为梦魇,而后5年却又随着各种新兴扩展而变得越加复杂。如今的CSS已经不再是当初的设计中“设计师能够控制的东西”,复杂的布局,精巧的维护结构,各种框架, ...

浅谈伪元素的常见问题

在之前一篇一个IE8的新起点中,我简单列举了一些当前放开枷锁的CSS,其中之一就是伪元素。当然,在使用伪元素的时候依旧会遇到一些问题,我总结了一些,简单陈述,留个印象,那么当再次遇到的时候能够有所回想。 使用伪元素主要遇到的问题集中在IE8,因为IE8只是部分支持伪元素。首先,IE8中设置伪元素的z-index可能无效。这点广为人知,在使用伪元素制作冒泡箭头的时候会遇到,无法通过调节z-index使before置于after之上。 另一个较为常见的问题是,无法以类名触发伪元素content的重绘。如果使用过字体图标那么多半遇到过这个问题。因为大部分字体图标是通过伪元素content插入字符而成, ...