• JS原型链回顾

    前两年在看JS原型链的时候花了挺久终于搞懂了,时间一久又渐渐生疏,趁机画个图总结下

     

    主要知识点:

    1. 在用构造函数F创建新的实例对象f时,会为f创建__proto__属性,指向Fprototype
    2. 假如现在要查找a属性,那么先看看f上有没有,没有的话再看看f.__proto__(即F.prototype)上有没有,没有的话再看f.__proto__.__proto__有没有,一步一步往上查

    另外关于Function和Object比较特殊的点:

    1. Object因为是构造函数,是函数,所以作为Function的实例,Object.__proto__ 指向其构造函数的prototype,即Function.prototype,Object.__proto__  === Function.prototype
    2. 同理,Function因为是构造函数,是函数,所以作为实例,Function.__proto__指向其构造函数的prototype,即Function.prototype,Function.__proto__ ===  Function.prototype
    3. Function.prototype因为是对象,是Object的实例,所以其__proto__指向 Object.prototype

    参考文章:

  • iterm2自动恢复会话/标签设置

    自从换了公司并习惯在Mac上做开发之后,与命令行打交道的机会就变多了,经常用iterm2这个神器但是有一个很蛋疼的地方,就是在退出之后上一次的会话,或者是标签等都没有保存,这样就不得不再打开一个个tab,敲一遍遍路径(虽然有autojump会稍微快点)。好了,不废话,下面告诉你怎么搞。

    1、下载2.9beta版

    因为这个功能在2.1.4中还没有,所以乖乖去下吧,不然打破头皮也没用。

    下载地址在这里: iTerm2 2.9.20151111 beta (OS 10.8+)

    当然版本可能会更新,所以你也可以在这里找最新的地址:https://iterm2.com/downloads.html

    2、安装并设置

    安装我就不多说了,和其他APP的安装一样,解压到应用程序文件夹就可以了。

    2.1 设置Session Restoration

    然后,打开 Preference>Advanced>Enable session restoration

    iterm2-SessionRestoration

    iterm2-Session Restoration

    有一点需要注意:我在装完这个beta版之后上面截图的选项默认已经是Yes,但是特么的没有一点效果,在将这个选项关掉,退出,然后再打开,再退出,然后才有效。所以如果你也遇到这个问题,试试我的这个方法吧。

    2.2 设置Startup

    打开Preference>General,然后设置Startup为 Use System Window Restoration Setting

    iterm2-Startup

    iterm2-Startup

    2.3 设置系统选项

    没错,还要修改系统设置,因为这是iterm2利用的系统特性才能完成的功能。

    打开 系统偏好设置>通用,把退出应用时关闭窗口选项关掉。

    iterm2-系统设置

    iterm2-系统设置

    好了,设置到此结束。

    3、效果

    退出再打开后如果你能看到“Session Restored”这样的提示信息,就说明你的设置成功啦!

    iterm2-Session Restoration效果

    iterm2-Session Restoration效果

     

    好了,洗洗睡觉~~ 话说还是圣诞夜的,我却在这里撸文章。。。

  • 01-洗澡时的思考

    最近总是在想为什么会有一事无成的感觉,思来想去,在洗澡水的冲击下我终于想到了两点,懒惰与害怕。

    至于害怕,可以说是打小就有的。对外面的世界,对未知的问题,对一切不确定的东西,只要遇到第一反应就是退缩,总想找到屏障好让自己舒舒服服的不用去面对,亦不用承担失败的后果。对,也许根源就在这里,怕失败,被人嘲笑,承担责任。但这也让自己错过了很多机会,比如遇到心仪的女孩总是擦肩而过。对于一个二十几岁的人来说,害怕这个东西真是让人没面子唉。

    再来说懒惰,现在唯一想到的原因是没有动力让自己必须勤奋起来,即使懒惰也不会有什么特别让人无法接受的事情发生,不会有严重后果。然而没有动力这件事又该怎么说呢,压力,兴趣,都有关系。

    妈蛋,突然一下子思路全无了了。

    说些别的吧,今天给一个老朋友介绍了个妹子,现在他估计还不知道,因为我给他说的时候他应该已经睡着了。

  • CSS3 transform的一些细节

    之前虽然用CSS3 transform做过动画相关项目,目的就是让元素动起来,看着比较酷炫,仅此而已。但是最近想用transform实现小于12px文字的时候却发现transform并未将由于文字过长而换行的文字改为单行,那正好趁着这个机会小小的研究一把。

    用transform实现小于12px大小时的一些细节

    众所周知Chrome里面(据说只有中文版,未测试)文字最小为12px,那么要实现10px的文字大小,就会用到transform

    transform:scale(.5)

    这对于正常的应用来说是没问题的,比如下面的例子

    See the Pen font-size smaller than 12px demo1 by Bane Lee (@zenoven) on CodePen.

    例1

    .a是正常的20px大小,.b用font-size设置为10px但是chrome下无效,.c用transform实现10px大小。 但是当遇到空间小而数据多并且要求不换行的时候,用scale来缩小文字就会有一定的问题,如下例无论缩放多小,文字始终还是两行。

    See the Pen transform has no effect by Bane Lee (@zenoven) on CodePen.

    例2

    那怎么解决呢?目前想到的一种方案是将元素包起来,宽度增加到足够容纳元素,然后整体scale,效果如下

    See the Pen transform works by Bane Lee (@zenoven) on CodePen.

    例3

    问题是解决了,但是这是为什么呢?同样是用transform来scale,一个作用在父元素,一个作用在子元素,差别怎么就这么大呢?

    transform不改变元素实际宽高及定位

    直接上例子也许看的更清楚~

    See the Pen CSS3 transform position and dimension test by Bane Lee (@zenoven) on CodePen.

    例4

    上例中.target被.wrapper包裹并左浮动、设置scale及translate后.target变化了,如果transform改变了元素的实际宽高就必然会导致.wrapper变化,但是实际的效果显示.wrapper没有任何改变,证明transform不会改变元素实际宽高及定位,也就是说transform并不会对相邻元素造成影响。

    如何获取transform之后的视觉宽高及定位

    其实例4中已经提供了一种方法,就是用getBoundingClientRect()这个方法,可以获取到transform后的尺寸及定位,具体可点此查阅MDN

  • 2015年初北京三日行

    IMG_20150109_104720

    北京作为传说中的帝都,作为土鳖的我还一直未去过甚是遗憾,碰巧的是去年在微博上看到裕波说要办个中国首届CSS开发者大会,我也非常想去这个大会,那就借这个机会顺便领略下北京的风光吧(你就是想去玩呗 XD)~~

    在北京总共呆了3天,大致日程如下

    • 1月09日:上午10点到北京,然后去天安门、故宫
    • 1月10日:参加CSS开发者大会
    • 1月11日:上午颐和园,中午买全聚德烤鸭,下午3点开 坐高铁回上海,晚上8点到虹桥

    当然,中间的事比上面的列表多多了,还是说说我的一些感受,或者一些值得说的事情吧~~

    对北京的一些感受

    好冷,好干

    看看,这河里都结冰了,颐和园里冰上单车好多人在玩~

    IMG_20150111_102846

    在北京住了两个晚上,晚上洗澡后第二天风一吹,腿上都是细小的裂口,那个疼哎~~  (所以要记住保养咯 – -!)

    工资高,消费也高

    10号晚上约两个大学同学出来吃饭,我们都是搞计算机的,听完他们的工资,我只剩惊讶的份儿了,简直泪奔啊~ 干了这么久还不如人家刚毕业的拿得多,所以那感受你懂得~~ 当然,这里面跟你的能力,公司,职位,经验等等都有关系,可是抛开这些,北京工资还是高!就是这么拽!

    羡慕无用,还是从提升自己的能力抓起是硬道理,别的就是换工作,甚至是去北京工作了,不过这又是另外一回事了~

    在北京听同学说一天吃饭要50块钱,刚开始有点惊讶,后来一算,还真得花这么多,普普通通的一顿午餐或者晚餐,二十几块钱,甚至三十几块钱,那都是再正常不过了~~ 比起上海,还是稍微贵了一点点。

    不过有一点很让我吃惊,学驾照的费用两个同学竟然都说是在5000左右,这比起上海的1W,那可真是巨便宜了~~

    北京方言很好玩

    以前虽然听过一个同事讲过很有北京味儿的话,但是还没真正听过,那来北京之后的感觉就不一样了,胡同里的大妈,学校学生,商场服务员,到处都是儿化音超重的地道的北京话,甚至连我都不自觉的说上了,XDDDD

    中国首届CSS开发者大会

    作为一个前端开发者,关注下行业的发展还是很有必要的。这个大会为期一天,不少前端界的领军人物都带来了精彩的分享,收益颇多。完整的资料我也正在收集中,可以在这里查看,下面列出一些自己觉得比较有分量的分享吧。

    灭灭:《Web Fonts@豆瓣阅读》

    灭灭讲了不少文字方面的东西,有好多我都不了解甚至都没听过,比如kerning,hints,FOUT,下面是他的演讲内容幻灯片,还有PDF版的,可以从这里下载

    勾三股四:《Web Components 中的CSS》

    我感觉这哥们超级牛逼,思路清晰,在时间非常紧迫的情况下还是讲的很到位,只可惜时间不多很多内容没法展开讲,下面是他的视频,另外我也找到了他的演讲PPT,点击这里查看 (上下箭头切换)

    另附一篇勾三股四讲的CSS3 Scoping的详细介绍

    johnhax(贺师俊):《CSS框架的迷思》

    这个大牛站的更高,讲了些CSS框架的弊端,以及BEM、OOCSS等规范的对比,演讲PPT请看这里

     

  • 遇见

    我时常在想,在你一生中遇到的人到底是命中注定,还是说只是凑巧而已。

    无论家人,朋友,同学,还是同事,总有亲疏,总有远近。随着时间的流逝,有人走了,就那么无声无息,甚至等你过了几年才突然发现。这一切,犹如河底的鹅卵石,什么时候变了模样,变了位置,都不曾知道,只知道河水它悄悄的流过。

    遇见你,才突然间有一种感觉,是那么的清晰明了,那么的熟悉、亲切。

    但愿,还能再见。

  • zAlive主题已在Github开源

    其实zAlive主题一直都是开源的并且在WordPress官方主题目录提供下载,最近将其放在Github上面,原因有二

    • 使用Git版本控制,这样妈妈再也不用担心文件丢失之类的问题了
    • 装装逼
  • 绝对定位元素宽高分析

    update[2015-02-02]: 在理解了containing block这个概念之后,发现这篇文章好水,但是人都是慢慢进步的嘛,所以还是留着好了~


    一直以来对绝对定位元素没有太多了解,上周五下午测试的时候发现绝对定位元素在使用100%宽高的时候占据的不仅仅是父元素的宽高,还包括父元素的padding,这么说比较抽象,咱直接上demo吧。

    See the Pen dimension of absolute positioned element by Bane Lee (@zenoven) on CodePen.

    说明:

    1. .sub为绝对定位,多数.wrap为相对定位;
    2. .sub2有边框,.sub3有padding,.sub4有边框也有padding;
    3. .block1 中的.sub没有设置宽高;
    4. .block2/3中的.sub用百分比设置宽高;
    5. .block4/5中的.sub用left/right/top/bottom来设置宽高;
    6. .block6/7中的.sub用固定px值设置宽高;
    7. .block2和.block3对比,区别在于.block3的定位及.block3 .wrap的定位;
    8. .block4和.block5对比,区别在于.block5的定位及.block5 .wrap的定位;
    9. .block6和.block7对比,区别在于.block7中.sub设置overflow visible;
    10. 测试环境为Mac OS X 10.9.5,Chrome 38.0.2125.101 / Firefox 32.0.3,WIN8虚拟机下测试了IE8-11。

    通过对比以上的输出,对绝对定位元素可以得出如下结论:

    1. 宽高计算参考对象是其最近的设置为relative的父元素为参考对象,如.block2和.block3的对比;
    2. 在没有设置宽高时根据其内容自适应,如.block1;
    3. 在用百分比计算宽高时,要加上参考对象的padding,.sub 宽/高 = (参考对象宽/高 + padding-left + padding-right) * 百分比,如.block2;
    4. 在用left/right/top/bottom设置宽高时,.sub 宽/高 需要减去.sub的border和padding,如.block4;
    5. 在用固定的px值设置宽高后,border、padding无影响,即.sub宽/高 = 设置的宽/高,如.block6;
    6. 在用固定的px值设置宽高后,即使设置overflow: visible 也无效,如.block6和.block7对比。

    啰嗦的挺多,其实也蛮简单的就1和3这两条,以closest relative的对象作参考,百分比算宽高时参考对象的padding要计算在内,其他的几条都是细节性的东西仔细想下就明白了。

    如有纰漏,欢迎指正~

第1页,共48页12345... 1015...