Cheney's Blog

捯饬了几天亚马逊的 EC2，这里稍微总结记录一下 ftp 服务的配置过程

一、安装

安装的是 linux 下比较有名的 vsftpd，服务器环境 Ubuntu 14.04.1 LTS，vsftpd版本 3.0.2，安装相当简单：

1

sudo apt-get install vsftpd

安装完成可以看看 ftp 服务是否已经运行：

1
2

netstat -a | grep ftp
tcp 0 0 *:ftp *:* LISTEN

查看是否打开21端口：

1
2

sudo netstat -npltu | grep 21
tcp 0 0 0.0.0.0:21 0.0.0.0:* LISTEN 20497/vsftpd

启动，重启和停止 vsftpd，还有查看状态：

1
2
3
4

service vsftpd start
service vsftpd restart
service vsftpd stop
service vsftpd status

先备份一下默认的配置文件：

1

sudo cp /etc/vsftpd.conf /etc/vsftpd.conf.backup

今天用 angular 中的 $resource 给 php 发送 json 数据时，发现服务端用$_POST没法接收，代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

angular.module('app.controllers', [])
.controller("SigninCtrl", [
  '$scope'
  'Login'

($scope, Login) ->
  loginInfo =
    key: md5 "xxxxxx"

  $scope.login = ->
    angular.extend loginInfo, "user_name": $scope.user_name, "password": $scope.password
    Login.post loginInfo, (resp) ->
      debugger
])

上面的请求头和请求体分别是：

1
2
3
4

Content-Type:application/json;charset=UTF-8
body： {
"key":"276963ad39cbdd8fb960718981aedf0c","user_name":"wcj","password":"123456"
}

究其原因是，Coentent-Type 仅在取值为 application/x-www-data-urlencoded 和 multipart/form-data 两种情况下，PHP 才会将 http 请求数据包中相应的数据填入全局变量$_POST

上周给 hipark 做了IE6下的兼容，兼容十多年前的浏览器，各种蛋疼

因为之前项目是基于border-box盒模型，这里稍微总结下border-box相关的事儿

一、盒模型和IE的怪异模式

先看下W3C的盒模型和IE盒模型的差异：

Long long ago，只有很少HTML元素既支持border也支持padding，而当时的两大主要浏览器，Netscape 4.0和IE 4.0所定义的width都是包含padding和border，这就是所谓的IE盒模型

而后来根据W3C于1996年发行的CSS1所指定的，当任意一个块级元素的宽度或高度被显式指定，它应当只确定这个可见元素自身的宽度或高度，而padding, border和margin随后被应用，也就是说W3C规定的width并不包括padding和border，这就是著名的W3C盒模型

那么我们就明白了，新标准出现后，为了兼容旧版浏览器，IE保留了旧的盒模型，这也就是后来IE的怪异模式(quirk mode)，而新版的IE（6以上）遵从了W3C的标准，采取了W3C盒模型，只会在某些特殊环境下触发quirk mode

原型继承应该算是js里的最难点之一，以前确实知道怎么实现，但隔了这么久回过头想想，发现有些概念变得模糊了，虽然在coffeescript里用extends一句话就能实现，但coffee最终还是编译成js，所以还是有必要重新整理一番，温故而知新

一、关键字new与构造函数

1
2

var array = new Array(10)
var today = new Date()

我们都知道用new关键字实例化一个对象，new后面必须跟一个函数调用，也就是构造函数(constructor)，构造函数用来初始化实例的属性和方法

可是具体过程是怎么样的呢？实际上只有两步：

第一步，**new创建了一个新的没有任何属性的空对象，然后将构造函数作为这个空对象的方法调用，此时构造函数中的this**关键字指向的便是这个空对象，这样一来便设置了这个空对象的所有属性，完成属性初始化

第二步，创建完这个空对象后，new又干了一件事儿，设置对象的原型__proto__，这个__proto__指向的是构造函数的prototype属性的值

每个对象都有__proto__属性，每个函数都有prototype属性，而__proto__总是指向其构造函数的prototype属性。 当一个函数被创建的时候，其prototype被自动创建并初始化，此时prototype对象只有一个属性，那便是constructor，它指回到这个被创建的函数（这就是为什么每个对象有个constructor属性的原因），添加给prototype对象的任何属性都会成为被构造函数实例化的对象的属性或方法

1
2
3
4
5
6
7
8
9
10
11

var Dog = function(){
  this.name = "狗腿子"
}
Dog.prototype.sayHello = function(){
  console.log("你好")  //你好
}
Dog.prototype.constructor === Dog //true
var dog = new Dog()
dog.constructor === dog.__proto__.constructor  //true
dog.__proto__.constructor === Dog  //true
dog.sayHello()  //你好

随着移动设备的发展与普及，用户在PC上的活跃度逐渐缩减，越来越多的网站都已经开始适配移动手持设备，刚好前些天也适配了几个移动端页面（好吧，其实是几个礼拜之前的事儿，掩面羞愧ing…），所以在这里稍作总结下

什么是 viewport

在显示面积上，移动设备比桌面显示器要小很多。比如一个960布局宽度的页面，放在 320px 宽度的手机上浏览，整个页面都缩小了，用户只能通过放大并且移动页面来浏览，这样的体验非常糟糕。我们希望移动设备上网页的显示能尽可能地接近桌面浏览器，于是就有了 viewport。viewport 由两部分组成，visual viewport 和 layout viewpor，也就是视觉窗口和布局窗口。 visual viewport就是浏览器当前显示的部分页面，可以通过拖动改变页面显示的部分，通过放大缩小改变 visual viewport 的大小。

推荐过身边很多朋友用Chrome浏览器，效果不甚理想，可能是他们觉得功能太少，在这里推荐些自己一直在用的拓展插件和Apps

效率类

• AdBlock  //去广告利器
• Proxy SwitchySharp  //轻松快捷地管理和切换多个代理设置
• 印象笔记·剪藏  //可以将网络上看到的内容保存至印象笔记
• 印象笔记·悦读 //使博文、文章和网页变得简明而又易于阅读。将其保存至印象笔记以便随时随地阅读
• LastPass  //密码管理，妈妈再也不用担心我记不住密码啦，哈哈
• 有道词典Chrome划词插件  //支持Chrome浏览器的划词翻译
• FaWave(发微)  //支持多微博，各微博同时提示、无缝切换
• 百度谷歌一键切换  //百度谷歌一键切换，保留搜索内容继续搜索(支持必应谷歌一键切换)
• 图片搜索  //右击图片，搜索相似或同主题的图片
• 网页截图（由Google提供）  //截取网页为图片，支持窗口截图，区域截图和整个网页截图三种方式
• Pocket  //保存稍后阅读，可以将保存的内容同步到手机、平板或其它电脑

开发类

• AngularJS Batarang  //AngularJS的调试工具
• CoffeeConsole  //内置在chrome中的CoffeeScript编译器
• ColorZilla  //牛逼的网页取色器，还支持在线制作CSS渐变
• Page Ruler  //测量网页元素尺寸
• HTML5 Outliner  //可以用来优化网页大纲
• JSONView  //JSON数据可视化

Apps

• Evernote Web
• Wunderlist
• Gmail
• Dropbox
• Feedly
• RegExp Tester App
• Pocket
• Postman - REST Client
• WorkFlowy