葵中剑

Shanghai 282 posts

three.js入门及飘雪实现

three.js是一个JavaScript的3D库,可用于构建WebGL应用。2011年写过一篇《一个二进制的Web新世界》,从那时起就一直断断续续有接触这方面的资料。本文是three.js的一些入门,并用其实现一个飘雪的效果。 其实,对于web应用来说,3D一直以来都较少使用,不过2016年被称为是VR年,作为网页端的WebVR也趁此机会迅速发展了起来,而其核心库正是three.js。three.js的官方文档和Demo目前已经较为完善,由于一直在迭代演进,API的变化还是比较明显的,所以很多网上的例子相当多已经过时,市面上的书目也是如此。当然THREE渲染器运行后,会在控制台输出版本信息,当前是THREE.WebGLRenderer 83dev,后面的列子也会以当前的这个版本作为环境。这里也不讨论浏览器的兼容性,借以现代浏览器为准。…

响应式设计实践手札

说到相应式设计,首先要提及的是其核心技术Media Queries。记得还是在我10年前上大学的时候,看着书本中描述响应式设计的愿景仿佛还如同昨日,如今随着Media Queries受到浏览器广泛支持而早已成为现实。我最早写的关于Media Queries的CSS3 Media Queries 详解一文,发布于2010-08-23,距今已然6年,并且Media Queries Lv3也已经在2012年成为W3C推荐标准——也正是2012年,算是响应式设计的爆发之年。 于是这些年来各种设计精巧的响应式页面便层出不穷,虽然国内老牌网站鲜见(业务和浏览器的各种因素),却在国外遍地开花。虽然使用的算不上多,但这些年的一些思考需要整理一下,本文就是我近年来对响应式设计的实践以及一些粗浅经验和建议,分别从设计和代码角度来看响应式页面。 响应式设计 响应式设计(Responsive…

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 1.0.2g也就具备了启用HTTP/2的条件,所以顺带也将Ghost更新到最新版本。 续简述HTTP/2的特性及其对前端的影响一文的部署部分,系统更新参阅How To Upgrade…

为Ghost添加归档页

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

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

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

Let's Encrypt,启用 HTTPS

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

十年CSS

十年前,当百度空间在06年7月正式上线的时候,我写了自己的第一行CSS样式。我清楚地记得那是一行指定百度空间background图片的代码。而CSS就是这么简单的东西,一个刚入大学的学生,只是希望为自己的空间稍稍装点一下而单凭猜测和模仿就能够写上几句的代码。百度空间在运行八年后正式关闭,而自己也决然不会想到,十年之后自己依旧在写CSS并以此度日。 CSS理应是简单的东西,它就是这么被设计出来的“简单的描述”,只是这十年里的前5年IE6的存在俨然使其成为梦魇,而后5年却又随着各种新兴扩展而变得越加复杂。如今的CSS已经不再是当初的设计中“设计师能够控制的东西”,复杂的布局,精巧的维护结构,各种框架,动画过渡...好在IE67时代已经过去,现在我们只需要将注意力集中在CSS本身而非各种hack技巧。 读的第一本关于CSS的书是《Eric Meyer谈CSS》,共2卷,以现在的眼光看来,是一本浅的过头的手把手的教程。之后读了《…

浅谈伪元素的常见问题

在之前一篇一个IE8的新起点中,我简单列举了一些当前放开枷锁的CSS,其中之一就是伪元素。当然,在使用伪元素的时候依旧会遇到一些问题,我总结了一些,简单陈述,留个印象,那么当再次遇到的时候能够有所回想。 使用伪元素主要遇到的问题集中在IE8,因为IE8只是部分支持伪元素。首先,IE8中设置伪元素的z-index可能无效。这点广为人知,在使用伪元素制作冒泡箭头的时候会遇到,无法通过调节z-index使before置于after之上。 另一个较为常见的问题是,无法以类名触发伪元素content的重绘。如果使用过字体图标那么多半遇到过这个问题。因为大部分字体图标是通过伪元素content插入字符而成,比如在一个当前激活的导航里项上添加.active时,看到图标依旧保持着原来的颜色。其实这个不只是IE8会遇到,移动版Safari同样存在这个问题(偶发),明明更新了类名,外观却不发生重绘。 另外,使用:…

Ghost更新为0.8.0

抽空更新了一下Ghost的版本,现在最新版本是0.8.0,测试版则是0.9。看了一下更新列表,感觉依旧只是例行升级。我已经有好几个版本没有更新,因为在阿里云下载一些依赖包是非常吃力的一件事,但这次更新还是能目测发现到一些新内容。比如后台多了Apps的设置,集成了Slack。比如修复了之前版本导航无法排序的bug等等。不过这几次的更新对于单人博主来说都是些无关痛痒的功能,大多是对多个作者协同工作的优化,即Ghost虽为专注博客的系统,却也绝非是小巧到专注于个人博客。 更新有些警告和提示,比如邮件功能。Ghost使用的是常用的nodemailer,和PHP便捷的系统邮件调用还有不小的差距。目前是配置邮件服务商来提供邮件的代发。 WARNING: Ghost is attempting to use a…

2016新的站点Logo

又到了换图标的季节:) 自网站建立到现在,我也已经更换过3次图标,这次距离上次2014年已经过去了2年时间,现在算是赶紧去跟上当前的设计趋势——在这一点自己也不能免俗,这一次的新Logo完全是浓浓的win10风格,同时这个logo也是我换到现在最为满意的一个了,当然未来怎么样还很难说,毕竟喜新厌旧人之常情。 这次不再追求表现Sword Air,而单单只表现Sword,“剑”的概念,这使得Logo的意义更为明确。综合了各种对logo的希望,我绘制了草稿并耗费了整整一天才将其完善。而且这次不是我自己在那里闭门造车,设计的同事Allen提了不少好建议,使得最终的成品比我一个人在那里发酵完善起来更快速。 因为注入的概念只有“剑”,所以Logo的表意更为明确。折线最初的意义是表现山,并降低剑身的长度,附带表现“空”。但后期的处理使得山的意义也有点模糊,可以是“…