杂记-201504

发表于   |  

关于题目

因为其他原因，很久没更新 blog 了，这次用 hexo 搭建一个 blog。 同时建立一个 1.01^365 的标签，记录点点滴滴，来督促自己每天进步一点点。之前的 blog 有的在 sae 上，有的记在笔记里，后面一点一点整理出来，放在这个地方统一管理。

4-21

移动端css动画相关

今天在开发微信的 H5 页面时，遇到了 CSS3 动画在微信的内置 QQ 浏览器的性能问题，不过之前在 w3ctech 上听过不少移动端性能优化的最佳实践，这次有机会实际项目中玩耍了一把。主要的优化方案还是要多用3d硬件加速，在 Android 上性能提升显著。

在尝试动画的同时，学习了一些不常用的属性，最值得注意的就是这个animation-fill-mode，可以定义动画结束后的状态。

4-22

碎碎念

今天准备用fullPage来实现新产品的宣传页面，仿照了小米手环页面中两排导航的处理。历史原因，页面要在 Wordpress 中生成，又捣鼓了半天的 Wordpress，越来越不喜欢 Wordpress 和 PHP。。。
顺便看了下小米前端的代码，居然很多的选择器变量不缓存下，上次在 w3ctech 上，也感觉到了，小米的前端还不是很规范，不过还是很佩服小米页面的设计，甩大部分公司几条街！
之前都是用 FTP 往服务器上上传文件，今天学习了 iTerm2 的 SSH，工具果然是第一生产力。

4-23

前端发展

射鸡师同学完全忙不过来了，为了不再麻烦人家，我又开始已经好久没干过的切图。想想前端发展的的确快，前几年还是切切页面的前端，现在完全变了工作方式，随着用户体验要求和浏览器性能的不断提升，前端变得越来越复杂，分工也越来越细，切图当初前端的必备技能，现在看来也逐渐变得不重要了。
最近几个研究生的同学在问我，说想从事前端开发的工作。原先很不被重视的前端，现在确让很多研究生的同学都想以此为职业，各大招聘网站前端也占了一大片的市场。勃勃生机的前端发展，让我对未来充满期待。
Things will get better!

CSS3: clip and filter

设计想实现下面这种毛玻璃的效果。
毛玻璃效果
简单的可以通过两种背景图叠加实现，不过由于是在手机上的页面可以使用很多 CSS3 的特性，之前也在看过一篇介绍clip-path属性的文章，因此可以通过’fiter’和clip-path来实现。

See the Pen img 毛玻璃 by 饶培泽 (@wizraopeize) on CodePen.

4-24

bootstrap响应式设计各个尺寸布局临界值

Extra small screen / phone: 480px
Small screen / tablet: 768px
Medium screen / desktop: 992px
Large screen / wide desktop: 1200px

favicon相关

今天遇到一个专门来生成 favicon 的网站，一个小小的 favicon 里面藏了如此多的玄机，真是活到老，学到老。同时也再一次感觉到老外的细致，在加上前不久 Hacker News 上很火的 how to center css，看似不起眼的东西，都值得做出一个小东西来。

4-29

Nginx 之 proxy_pass

今天在写 Nginx 配置时，这样写的

1
location /weixin {
    proxy_pass http://127.0.0.1:3000;
}

在访问 http://127.0.0.1/weixin/css/main.css 时，确一直跳到了 http://127.0.0.1:3000/weixin/css/main.css，百思不得其解，看了文档才发现问题。需要这样写，才能正确的访问到 http://127.0.0.1:3000/css/main.css。

1
location /weixin {
    proxy_pass http://127.0.0.1:3000/;
}

前者不是一个 URI，请求会按原始的路径转发过去，而后者是一个 URI 请求会被替换成指定的 URI 转发过去。

JS 中 Function.prototype.bind() 使用

JS 中 call() 和 apply()，今天发现了 bind()这个方法。查了下文档，和前面两个主要的区别在于，前面两个方法，主要用在函数调用时，而后者用于函数定义时，它返回的是个函数。
可以看这个实际的例子

1
gulp.task('clean', del.bind(
  null, ['.tmp', 'build/*', '!build/.git'], {dot: true}
));

相当于

1
gulp.task('clean', function(cb) {
    del(['.tmp', 'build/*', '!build/.git'], {dot: true}, cb);
});

前者并没有 cb 这个参数，但其实已经附加到返回的函数的参数列表之后了。
MDN 上的例子

1
function list() {
  return Array.prototype.slice.call(arguments);
}

var list1 = list(1, 2, 3); // [1, 2, 3]

// Create a function with a preset leading argument
var leadingThirtysevenList = list.bind(undefined, 37);

var list2 = leadingThirtysevenList(); // [37]
var list3 = leadingThirtysevenList(1, 2, 3); // [37, 1, 2, 3]

还是挺方便的一个方法，当然这是 ES5 的方法，IE8及IE8以下的浏览器不支持的。