Abruzzi's Wall

Front-End Web Developer

Ghost only can help me to here...


  1. Right Way To Use @font-face

    We all know that in CSS we can use @font-face to load the font which we want to use on our website. And fortunately, it is even supported by IE6. So that is always a useful function for our CSS code. Since I worked in China, and there were few…


  2. 鸟人

    今年的总结是一定要写的,大概八、九月份的时候我就这么对自己说。 大约零点敲钟之后,我揣了两听可乐坐在床边,一面听 Glen Hansard 或者 Adele 酝酿情绪,一面思忖着一年飘渺而终的过往,踟蹰不知如何下笔。 约摸过了两小时,心气渐渐沉下来。可乐已喝完一罐。我关了顶灯,那太刺眼,我想要一个封闭幽静的环境,想尽全力远离活在现实中、活在2015年的那个在尴尬中无声呐喊着的自己。 这文章,大概要写10小时。更多的愿想恐怕只是一气呵成。 若谈幸福快乐,于我而言,2015年大体上确是如此。除了不觉得有多健康之外,似乎没有发生几件让人感到极其失落或者后悔的事。缺点依然暴露无疑,优点也并无见长,它们就像烙印或纹身一样刻在我的言行举止,相互抗争、反应、决断着我的去向和选择,左右着我或悲或喜的情绪,书写着熟人眼里关于我的故事或蜚语。 即便说是碌碌无为,我也不可辩驳。于我而言,这是平庸的一年,而后半年过得尤其卑劣。终日惶惶,深陷抑郁之渊。 对于这种内在的平庸,更为痛心的是我竟难已鼓足勇气尝试挑战。新经历反射在旧观念中融合交织,重新组成一面镜子。经历越多,镜面越是平滑,…


  3. CSS Stacking Context里那些鲜为人知的坑

    通常我们在学习/了解CSS的时候,并不会直接接触/了解到stacking context的规则,甚至在初学的时,仅仅接触到z-index、知道可以通过z-index控制元素显示的前后顺序,却常常由此碰到各式各样匪夷所思的bug,这两天我也趟了一次z-index浑水,搞明白了z-index扯出的这一系列stacking context坑。 什么是z-index 在W3C document里对z-index的解释是: The z-index attribute lets you adjust the order of the layering of objects when rendering content. It means that CSS style rules allow you to position boxes on layers in addition to the normal rendering…

    on z-index, CSS, stacking context, fixed bug

  4. 如何理解koa中间件执行机制

    前几天研究了TJ的koa/co4.x和一系列koa依赖的源码,在知乎上做出了人生首次回答(而且我真得再也不想去知乎回答技术问题了_(:з」∠)_),因此把文字搬到这里。 ES2015 Generator/Yield 关于Generator/Yield 这几篇文章已经写得足够清晰了: The Basics Of ES6 Generators Diving Deeper With ES6 Generators Going Async With ES6 Generators Getting Concurrent With ES6 Generators Koa的运行机制 简单地画了一张图解释koa的处理流程(右键在新标签页中打开图片吧。。。懒): 在koa里定义的middleware均为generator function(包括内置在顶端的respond),这是为了能从任意middleware中容易地切换到其它middleware里(如果你是前端程序员,可以理解为浏览器捕获事件的capture和propagation过程,如果你是python程序员,可以理解为jungle的middleware机制,如果你是Java程序员,这种方式则是典型的切面编程)。 为了实现这种横穿多个middleware的特性,koa通过把后一个generator作为参数(koa里常用next)…

    on koa, co, es6, generator, yield

  5. Git push与pull的默认行为

    一直以来对git push与git pull命令的默认行为感觉混乱,今天抽空总结下。 git push 通常对于一个本地的新建分支,例如git checkout -b develop, 在develop分支commit了代码之后,如果直接执行git push命令,develop分支将不会被push到远程仓库(但此时git push操作有可能会推送一些代码到远程仓库,这取决于我们本地git config配置中的push.default默认行为,下文将会逐一详解)。 因此我们至少需要显式指定将要推送的分支名,例如git push origin develop,才能将本地新分支推送到远程仓库。 当我们通过显式指定分支名进行初次push操作后,本地有了新的commit,此时执行git push命令会有什么效果呢? 如果你未曾改动过git config中的push.default属性,根据我们使用的git不同版本(Git 2.0之前或之后),git push通常会有两种截然不同的行为: develop分支中本地新增的commit被push到远程仓库 push失败,并收到git如下的警告 fatal: The current branch new has no…


  6. CSS Filter Scroller

    昨天在stackoverflow上看到有人问如何实现一个通过滚动条渐变调整设置css3 filter的属性,于是尝试做了个demo: See the Pen sepia filter demo by abruzzi (@abruzzi) on CodePen. 这里稍微麻烦一点的只有滚动条的处理,即拖动按钮的移动范围、mousemove监听超出范围后的处理。…