仿叠印效果头像

处理前后对比

好久没更新头像啦,所以就随手拍了一些,自拍真是技术活,挑不出好的所以只能拿 PS 来补了。初步的想法是做印刷叠印的效果,然后又想要天马行空一点所以在头发里叠加了星云的图片。

叠印效果

叠印效果是类似传统油墨印刷的时候 CMYK 分色制版,由于位置没有校正而出现的叠印错误,但是看着很手工的感觉。类似安藤忠雄的清水混凝土建筑,或是 Paris 的 Centre Georges-Pompidou(蓬皮杜艺术中心),某种意义上是一种对工序的欣赏、一种工业美感吧!

JS 日期求差

想实现一个需求:显示某个活动网页离开始日期还有几天,或者如果已经开始了,离结束日期还有几天。相关的时间变量有三个:

  • 开始时间: startDate
  • 结束时间: endDate
  • 当前时间: currentDate

本来打算用 moment.js 来实现,但是折腾了半天竟然没有找到简单求差的函数…… 然后请教了一下 eleme 的前端同事乔治,不消片刻就甩给我这段代码:

Math.ceil((new Date('2016-03-10').getTime() - 8*3600*1000 - Date.now()) / 86400000)

突然意识到自己好弱啊 ʅ(‾◡◝) 然后打起精神去做了下 Research:

雪痕

Niseko Hirafu, photo by Du Xin

大山里人们滑过的长长雪痕,不消片刻就被落雪覆盖了。雪地又恢复了它原本的平整,如同时间可以消磨一切,对于雪山来说更快,只需要片刻。

这就是雪山的性格,雪的伤痕用雪覆盖。人也是一样吧,爱的伤痕应该用爱来覆盖。

滑过雪的人有这样的经验,没有压过的粉雪异常松软,像棉花糖,调皮地滑过去把它们打散开来像云、像雾。有些可爱、羞涩的成分就像初恋一般。

而被压过的雪,或者说雪痕的道路,则有自己的坚持和性格。往往很容易被雪痕导向某个特定的方向。某种意义上是被塑造过的,包含某种预期或者某种可能性占了大部分。必须得顺着雪痕的方向,讨好她、抚慰她。

大山不喜欢伤痕,我觉得它是不喜欢自己可预测的样子。山神要保持他的神秘,同时也要包含更多的可能性,也就是大山原初的样子。毕竟大山的生命跟人类比起来简直就是永恒,每一道雪痕对大山来说都是削减了他的可能性,剥夺了它对未来的保留、它的珍藏、它的神秘。

所以山神用大雪把雪痕遮上,抚摸它们,把它们珍藏。雪痕并没有消逝,而是成为密度更高的存在。在最接近大山表面作为新雪的根基,形成某种回路。这些人类留下的痕迹,也许,帮助大山藉由这些回路以人类的方式思考的吧?雪痕是大山和人类沟通的方式,也是滑雪者们对大山略显自私的爱。

但是大山毕竟是大山,总可以遮上雪痕,以一种原初的方式接纳新的滑雪者们。毕竟,人类还没有存在的时候它就已经屹立在这里,即便将来人类消失了它也还是在这里。

如此想来,从人类的角度看大山是孤独的。

不过孤独这样的字眼,大山是不会理解的。

等到春暖花开、白雪消融的时候,那些人类留在大山表面的雪痕回路,连同大山为了覆盖雪痕而盖上的绒软的雪。都会化成清澈的水,连同大山对人类的回忆一起,滋养山中的植被。

毕竟人类生命之短暂,远不如一棵悬崖边的青松长情。

也正因为生命的短暂,我们无法像大山一样保持一种对未来的开放性。对于爱大山的人,永远不会停歇,他们有种紧迫性,想要用短短的百年来亲眼去看看他们所爱的山用百万、千万、甚至亿万年所经历的风景。在这个过程中他们找到生命的意义,邂逅旅途的伴侣,建功立业,诗意地存在。

– Paradise Hutte, Niseko Annupuri, Hokkaido, Japan 2016.2.7


农历新年前去了次北海道,分别去了四个不同的雪场,白天滑雪晚上泡温泉。被北海道人们的淳朴和敬业深深打动,在 Niseko Annupuri 雪场的最后一天,在半山腰的 Paradise Hutte 里一口气写了上面这篇短文。今年打算把这篇短文和这次北海道之旅取材的所思所想写成小说,希望能给出让自己满意的答案。

Gitbook 地址: https://allenkung.gitbooks.io/ruts-under-snow/content/

Small Project 中的 Git 使用心得

因为 公司官网 策划、设计(Sketch)、前端(Bootstrap)、后端(Express)都是我一个人搞定,所以考虑边学变尝试的角度,从一开始就用了 Git 作为 Version Control System。

比较了 GitHubBitbucket,虽然前者的 community 比较强大,但是后者给小 studio 提供了非常吸引人的 plan:

  • Github:鼓励开源,按照 Private Repository 的数量收费;
  • Bitbucket:按照 team 的人员数量收费,5 users 以内的 Private Repository 免费。

这个 project 就我一个人,所以自然就选了 Bitbucket。一开始什么都在 master branch 上操作,主要是用来把白天公司 mbp 上没完成的代码 pass 到家里的 mbp 上继续写。然后觉得同时写各种功能变得越来越乱,就根据各种供能建了好多 branch,但是合来合去也觉得麻烦就怕会出错。

稍微研究了下网上的 Git 部署策略文章,找到阮一峰老师的这篇《Git分支管理策略》,终于找到适合自己的策略了。

Git Workflow

大致是上图这样的 workflow,主要分成 3 个 branch:

  1. 主线分支 Master
  2. 开发分支 Develop
  3. 临时性分支 temporary branches:
    • 功能分支 Feature
    • 预发布分支 Release
    • 抓虫分支 Fixbug

具体各个 branch 的描述大家去看阮一峰老师的文章,这里仅仅提一下几个重点。

代码库应该有一个、且仅有一个主分支 Master

首先,代码库应该有一个、且仅有一个主分支。所有提供给用户使用的正式版本,都在这个主分支上发布并用 Tag 标记。

1
$ git tag -a 1.2

为了保证版本演进的清晰,使用 –no-ff 参数

默认情况下,Git 执行”快进式合并”(fast-farward merge),会直接将 Master 分支指向 Develop 分支。使用–no-ff参数后,会执行正常合并,在Master分支上生成一个新节点。为了保证版本演进的清晰,我们希望采用这种做法。关于合并的更多解释,请参考 Benjamin Sandofsky 的《Understanding the Git Workflow》。

将Develop分支发布到Master分支的命令:

1
# 切换到Master分支
$ git checkout master

# 对Develop分支进行合并
$ git merge --no-ff develop

记得删除临时性分支

Feature、Release、Fixbug 这三种分支都属于临时性需要,使用完以后,应该删除,使得代码库的常设分支始终只有 Master 和 Develop。

创建一个功能分支:

1
$ git checkout -b feature-x develop

开发完成后,将功能分支合并到 develop 分支:

1
$ git checkout develop
$ git merge --no-ff feature-x

删除 feature 分支:

1
$ git branch -d feature-x

Webkit not respecting overflow:hidden with border radius

最近在 project 中想要实现这样一个效果:光标移过 icon 的时候,background 图片 zoom in 响应这个 hover 事件。

With border-radius

容器结构很简单,一个 overflow:hidden 的背景容器,和一张作为前景的 img:

<div class="box">
    <div class="bg-container">
        <img src="bg.jpg" / >
    </div>
    <img src="fg.png" />
</div>

然后问题来了,仔细观察上面的 gif 会发现,当 bg.jpg 在 webkit 下执行 transform: scale() 动画的时候,overflow:hidden 的 mask 容器 border-radius 会瞬间失效直到动画结束。(笔者偷懒并没有去测试 IE 和 FF)

我尝试了下用图片遮罩,就是盖一个白色的圆角 mask 在背景上面:

With mask

不过如果这个 mask 的 top 位置和背景一致的话,在动画执行的时候就会产生一条 border 线(可能还是浏览器渲染的关系),这个比较容易解决写个 padding 就好了:

Stackoverflow 上这两篇提供不同的思路比较有帮助,不过最终笔者换了其他的实现方式

关于 GTD 的一些想法

拖延之苦

作为一个拖延癌晚期病患,饱受拖延症给人生带来的种种懊恼之苦,便经常时不时地总结下对症良药。一旦狠下心来坚持久了就会成功比如去年减肥 20 斤,不过后来健身房装修所以功亏一篑又开始胖了。

为啥明明对自己的人生计划得挺好,但总是事与愿违,看着周遭的人与事越变越好,唯独自己却陷入困境。说穿了,主要还是拖延(懒)吧!

存在主义

早些时候读虚无主义觉得仿佛就人生没有任何意义,宇宙中所以万物都逃离不了湮灭的结果。但是萨特的存在主义是一种人道主义,他让我明白了光靠「想」是无用的,理念需要借助「人」作为介质,通过「行动」才能对现实世界造成影响。

Ideas → Actions → Effects

所以只有行动才能造就意义,人只有通过行动来创造自身。

Gulp Plugin 入门

最近在学习 Gulp,刚开始看的时候一头雾水,看了几篇文章之后稍微有点理解是怎么运行的了,几乎都是依赖各种 plugin。其中一篇《前端从零单排之 Gulp》里提到了几个基本的 plugin,觉得很实用:

  1. Less compile (gulp-less)
  2. Autoprefixer (gulp-autoprefixer)
  3. Minify CSS (gulp-minify-css)
  4. JSHint (gulp-jshint)
  5. Concatenation (gulp-concat)
  6. Uglify (gulp-uglify)
  7. Compress images (gulp-imagemin)
  8. LiveReload (gulp-livereload)
  9. Clean files for a clean build (gulp-clean)
  10. Caching of images so only changed images are compressed (gulp-cache)
  11. Notify of changes (gulp-notify)
  12. EJS Generator (gulp-ejs)
  13. gulp-watch
  14. main-bower-files