秋知

# 使用 nodejs + docker 搭建图片占位服务 > [项目地址](https://github.com/weekeight/image-holder) ## 关于 docker docker 简单地理解为一套轻量级的操作系统虚拟化的解决方案，使用docker创建的容器就类似使用 vmware/virtual box/paralles desktop 等虚拟化计划创建虚拟机，可以隔离环境，不会相互影响。 [更多详细官方资料](http://www.docker.com/) ## 安装docker [mac osx docker 安装](https://docs.docker.com/engine/installation/mac/) ## 基本概念 docker host(docker主机，服务端)：运行容器（PS: 虚拟主机），隔离环境，提供服务 docker...

这个看似是很平常的话题，但是这篇文章总结得不错 [css实现垂直居中的5种方法](http://www.qianduan.net/css-to-achieve-the-vertical-center-of-the-five-kinds-of-methods/) 不过上面介绍的五种方法还是不能适应所有场景，当父元素宽高固定，子元素高度不定，这时想要让子元素垂直居中对齐上面的方法就做不到。 其实这个只需要设置 父元素高度和行高一直，再设置子元素的 `vertical-align: middle` 即可。 注：由于浮动元素脱离了标准文档流，故上面的方法都不能垂直居中，解决方法就是外面包一层做浮动，里面高度设为100%，再利用伪元素:after来做垂直居中。 [浮动元素垂直居中](http://codepen.io/weekeight/pen/vLZLJz)

### Goto Symbols （跳转标记） `ctrl + r` 当你编辑一个大文件时，文件中有一堆方法，按`Ctrl` + `R`将其全部列出来，使他们更容易找到。开始尝试的输入你想要的，然后按Enter 就可以快速跳转这个方法了。 使用方法：按`Ctrl`\+ `R` ### 编辑多行 ctrl+l 选中整行，继续操作则继续选择下一行，效果和 shift+↓ 效果一样。 ctrl+shift+l 先选中多行，再按下快捷键，会在每行行尾插入光标，即可同时编辑这些行。 ctrl+alt+↑ 或 ctrl+alt+鼠标向上拖动 向上添加多行光标，可同时编辑多行。 ctrl+alt+↓ 或 ctrl+alt+鼠标向下拖动 向下添加多行光标，可同时编辑多行。 ###...

> 在做CSS3动画的时候我们总能听到说启用硬件加速来提高动画性能，但是却很少人被告知什么是“硬件加速”，为什么它能提高动画性能，怎么验证使用了它就提高了性能 ## 前言 所谓“硬件加速”其实是一种笼统的叫法，实质上是浏览器借助了设备的显卡改变了渲染模型以达到避免/减少重绘/重排的效果，从而提高动画性能 ## 大致原理 以Chrome为例，在硬件加速渲染通道下，复杂的页面会被分为多个层(Layer)， Chrome对各个层分别进行排版、绘图，再将绘图结果作为“纹理”上传至GPU， 由GPU完成层的3D变换(transform)等操作，最后再将GPU渲染好的层图像进行复合操作(Compesite Layers)，得到最终的画面结果。 因此，通过3D变换实现的位移、旋转、缩放将不会触发浏览器重绘（除非层的内容发生改变）。 ## 如何新建层 目前所知，下面的CSS属性能够让元素创建自己的层 ``` transorm: rotate3d(); // 注意 rotateZ() 和 rotate() 都不会触发层的新建 transform: translate3d(); position:fixed; will-change: transform; postion:absolute...

[原文链接](http://bubkoo.com/2015/11/19/prefetching-preloading-prebrowsing/?hmsr=toutiao.io&utm_medium=toutiao.io&utm_source=toutiao.io)

## 问题描述 当将一个元素从 `rotate3d(0,0,0,0)` 变到 `rotate3d(0,0,1,180deg)` 的时候，理论上以及在chrome、安卓微信webview上都是顺时针旋转的，可是在safari及IOS的微信webview上就是逆时针的了。 有意思的是如果是变到 `rotate3d(0,0,1,179.9deg)` 所有浏览器都是顺时针的 还有如果使用 `rotateZ(0)` 变到 `rotateZ(180deg)` 的时候所有浏览器都是顺时针的了，符合预期。让我费解的时 IOS 的策略，如果`180deg`的时候非要逆时针那就让 `rotate3d` 和 `rotateZ` 统一嘛，可是事实上却不是，不是自相矛盾吗？（有知道原因的童鞋请告知我~） ## 解决方案 直接用 `rotateZ` 来做旋转动画，让所有浏览器都统一旋转方向 ## 示例代码 [示例地址](http://codepen.io/weekeight/pen/adOLVM) ```...

1. 阶跃时间函数 `animation-timing-function: steps()` [steps 解释不错的文章](https://idiotwu.me/understanding-css3-timing-function-steps/) 2. 裁剪 `clip: rect(top, right, bottom, left)` 例如 `.test{ clip: rect(0, 100px, 100px, 0) }` [clip w3school](http://www.w3school.com.cn/cssref/pr_pos_clip.asp) 3. 预告将改变的属性以提高动画性能 `will-change` [will-change MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/will-change)

> 半圆形进度条demo，此示例最大进度为50%（也可另行设置，让半圆形就代表100%进度） ## demo 地址 [demo](http://codepen.io/weekeight/pen/VeLYpG) ## code snippets ``` 半圆进度 .center{ margin: 0 auto; text-align: center; } .half-circle-progress{ position: relative; display: inline-block; width: 100px; height: 200px; margin: 0 30px;...

## webview 调试方案总结 我们在做移动web开发时，总会遇到各种问题需要调试。如果仅是在浏览器里面的调试还相对容易一些，但是现在大部分的移动web页面都是内嵌在某个APP里面的，调试就比浏览器里面多了一些限制。下面我们来一起看看有哪些调试方式更加适合哪些场景，主要讲述如何做 webview 页面的调试，有些常见的点会简单带过，如有不清楚的地方可以自行谷歌。 ## 初级方案 在开发 webview demo 页面阶段，最简单也是最常用的方式就是在 chrome 模拟器里面调试，本地用 Node 来开启本地服务器来模拟数据。 而当想利用 chrome 模拟器来调试线上的页面时，一般会遇到两个问题：1. 权限验证问题 2. 调用hybrid接口报错问题 第一个问题是由于一般 webview 页面在APP里面都会做权限验证（通过客户端 Post 来获取页面，服务器返回 cookie；或者直接是客户端在打开webview的时候在url后面加上token参数来让服务器做验证），想要在 chrome 模拟器里面调试则必须提供一个web...

## 安装 ``` npm install mysql ``` ## 简单使用 ``` javascript // 参照官网的simple example var mysql = require('mysql'); var dbConnection = mysql.createConnection({ host: '127.0.0.1', user: 'root', password: 'test', database: 'ua-collector'...