葵中剑

Shanghai 289 posts

书评《编写可测试的JavaScript代码》

又到了京东618,出于习惯和往届一样看了看键盘和书籍。键盘除了升级到全filco外已经别无所求,最后还是忍住。书籍的话,作为前端还是主要看JavaScript的书为主,但搜着搜着发现自己JavaScript相关书籍居然都快买齐了... 当然买书和看书是两回事,虽然大部分我都看了,但自认为脑容量不是很大,经常前看后忘,不时需要回顾。所以打算以后在这过程中写下一些书评,帮助自己记忆,也帮助别人选择。 在中国,书的价格真的堪称廉价,其成本之低真是令人发指。相比而言,书价对于整体知识成本来说简直可以忽略不计!我往往更关心的是我所花去的时间和我所得到内容的比值。 今天写的书叫做《编写可测试的JavaScript代码》,英文原版名称《Testable JavaScript》,作者Mark Etban Trostlter,译者徐涛老师。…

深入JavaScript with语句

一般而言,所有写JS的人都有一个通常的概念:“不要用with语句”。这个准则毫无疑问一直是正确的,但要说为什么的话,并不是每个人可以回答的很好。是否去回答这个为什么并无多大意义,因为只须记住结果“不去用”就完全足够。然而去深入的理由还是有的,刚好最近有人这么问起我...刚好自己想总结一下...刚好这个题目作为草稿在博客后台躺了很久...但说到底,套用最新一话琦玉老师句式,“还是因为我很闲吧”... with语句 with的初衷是为了避免冗余的对象调用: foo.bar.baz.x = 1; foo.bar.baz.y = 2; foo.…

text-overflow与文本截断

CSSer对text-overflow肯定是非常熟悉的,并且,对于单行文本的截断,包含了text-overflow: ellipsis;的这3行代码,可能也是我们最为惯用的。 text-overflow: ellipsis; overflow: hidden; white-space: nowrap; 这小段CSS甚至兼容至IE6,毕竟text-overflow: ellipsis;原本就是IE的专属,于是早期文本截断的抗争主要是在Firefox上,直到Firefox7.0,我们才抛开对于FF的伎俩而专注使用这段代码。当然多行截断还是没戏,在一些跨浏览器兼容要求较高的场合,前端一度需要后端帮忙截断内容。 虽然也不是没有其他方式实现多行的文本截断,但对于当时的浏览器形式而言不可能全部照顾到位。比如现在可以用伪元素:after定位在多行的结尾,并施加一个渐变过渡来模拟截断。 .clamp{…

博客的回归

今天清理一下朋友们的链接,有好几年没更新的,有变成了跳转的,有只留了几行字意义不明的,还有域名索性处于出售状态的,却唯独没有依旧还在专注于书写的...想到自己也很久没有码字,顿觉惭愧。虽然家里出了些事,但说到底还是懒惰作祟,一旦停止了练习,得到的技术也会以成倍的速度变得生疏,长久不码字的后果就是文本表达力的退化——以前能娓娓道来的话题,如今手指却在键盘上如履薄冰,敲击的甚是艰难。 但翻翻过去自己的博文,能够明晰地知道自己的成长,还有些回忆实在不能说放就放,所以,加油继续写吧:) 也要感谢一直以来支持我的读者,特别是订阅RSS的看官和留下评论吐槽的过客。今后关于技术类的博文我会在放在Github存档,不想受到我生活向文章影响的话,可以直接移步至Github。而这里依旧会混合着发布内容。 自工作以来,没有间断地写博客已逾8年,回想起来仿佛就在眼前,…

JavaScript的守望者

最近整理了一下收藏夹,发现了很多有趣的陈年旧物。好几百个链接,很多都已经过期了,相对来说依旧是国外的链接存活率要高的多,可见国内网站生存条件之不易。用以前团队同事的话来说,这是“清理体内残留的代码”。 今天要写的是IBM developerworks在2010-05-04发布的JavaScript 框架比较,到现在整整7年之久。毫无疑问2010年的我们还在挣扎在IE的泥潭里,如今回过头来看其实时间过得也相当快。当时这篇JavaScript 框架比较是相当全面的,作者从各个角度详尽对面了当时流行的JavaScript框架: Prototype jQuery YUI ExtJS MooTools 每一个都是前端耳熟能详的名字,但如今有些却已罕有听闻。截止本文发布,简单对比了一下Github的数据: Prototype jQuery YUI…

十年老笔记本升级记

我的笔记本是神舟天运F231s,唯一一台,已经满满服役十年。十年前买的时候也不是什么高配,总价3999。奔腾双核T2310 1.46G,性能偏弱,但好在内存刚买就加到2G,相较于当时512M主流配置来说颇为奢侈。它一直伴随我从大学到现在,玩过Dota,写过C++。想来也有一段时间雪藏,但这次翻出来依旧不舍得扔,就琢磨着升级一下。 CPU主频确实太低,必须换掉,十年前的性价比之王到如今也廉颇老矣。看了下主板,GL960,有点坑。资料最大只支持2G内存,CPU只支持到FSB533。好在图吧逛了一圈,得知官方资料并不太准,居然可以直接上T9xxx。不过看了下价格9系太贵了,决定还是低一档的T8300,…

耳机换线与DIY耳塞

接触HIFI大概10年吧,明显退烧后对音频设备的需求远不及10年前。如今K701长年放在抽屉里,长时间陪伴左右的反而是H840,H850,MX360这些。听曲子也不再纠结有损无损,从D50换成了iTouch+网易云音乐,回过头来看的时候,当初的狂热更多的是一种某个时期的证明。 一个月前H840插口接触不良,拆开换了根线以后就可以满血复活继续服役。以前给耳机换线是期盼更好的效果,现在换线则完全只是为了继续用下去,结果一样,心境不同。 但修理耳机找线的时候还是有意外的收获,如今居然耳塞都已经可以自己拼装了,这在10年前基本无法想象。有各式各样的耳机壳,各种类型的单元,数目繁多的线材和调音手法,如果还是以前那个爱折腾的自己的话,一定会一头栽进去的。不过现在仅仅体验一把就好。 选择了比较便宜的单元,10RMB一个。耳机壳选的木质,这是作为一个木头爱好者的偏执,…

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…