尝鲜 Ubuntu 17.04

冲着自带 Kernel 4.10 去的

可以不用 apt-mark 来锁住内核版本,避免更新的时候又自动降级了

不知道是今晚线路波动还是其他原因,升级后,明显感觉 SSH 卡了很多,检查过 BBR 已经开启,起了怪了

wget 一个百兆文件,开 vnstat -l 进行统计

proxy_pass 的结尾要不要 “/” ?

这周有个临时需求,需要在我们的业务上面集成一个合作方的站点,这种事情用 proxy_pass 就非常方便

一开始用的第一个方法,结果一直提示 404,还以为 Location 规则没命中,反复查证,却忘了第一个配置会把 path 给透传到 proxy_pass 端,实际上我一直在访问 http://127.0.0.1:3000/3rd/ ,而这个地址显然是不存在的

后来排查后端的日志才发现,在结尾补上 “/” 后,终于把 /3rd/ 这个路径给吃掉了

又备案了

恩,N 年前我在又拍云那有800多 G 的流量,终于可以用完了。

公共 CDN 服务,回源策略真是赞,无脑使用就好。

有一个问题,你愿意把你的 SSL 证书的 key 交给第三方 CDN 去保管吗?

通过ipv6绕开网页认证

在一个需要Web认证的WiFi网络下,无意中nettop发现有一条tcp6的链接是Established状态,搜一下发现大部分Web认证,都仅仅拦截ipv4的流量。

6.47.46

正常情况,如果没用通过Web认证,打开任意网页,都会被302重定向去登录页。

QQ20160504-0@2x

对比已经很明显了,基本上这个网络已经可以随意使用了。

新版SS同时监听ipv4和ipv6的配置改了,变成如下格式

也来说说webpack

入门

webpack,官方定位是一个模块打包工具,基础命令极其简单

在CLI模式中,第一个参数是入口文件,第二个参数是输出文件,并读取当前cwd目录下面的webpack.config.js配置,根据配置生成对应的bundle.js文件。

其用法与RequireJS里面的r.js命令极其相似。

快速上手

如果一个新业务,想做一下JS的模块化管理,那么可以立即选择webpack了。

如果一个老业务,曾经用了RequireJS或者SeaJS,那么也可以选择切换webpack了。

如果想做一个库\框架去为生态提供服务,也可以立即选择webpack,他能自动配置最终生成的library.js文件支持AMD\CommonJS等模块化方案。

用好配置里面的resolve,改造一下原有的Grunt\Gulp流程,即可使用webpack,业务代码基本无需改造。

多种模块化打包加载方案对比:http://webpack.github.io/docs/comparison.html

其实对于老业务而已,仅仅将JS的模块化从RequireJS替换到webpack,其收益并不明显,仅仅是最后生成的JS文件要小一些而已。

进阶

如果单单从CLI模式中的提供的参数来看,webpack的能力也就到此为止了。但webpack的作者并非只想做一个AMD\CommonJS\ES6 Modules的协议实现。

webpack提供了一个Loader和Plugin的机制,让社区通过提交自己的Loader和Plugin,大大拓展了webpack的应用场景。

别忘了,webpack的REPL可是完整的nodejs,也就是说Grunt、Gulp能做的事情,webpack也能做(只是能做,不代表webpack擅长做)。

同时,通过各种Loader和Plugin,webpack还能打包样式、图片等资源文件,并按需将这些资源文件inline到html中。

与babel的勾搭

建议es-2015就先别折腾了,webpack本身编译速度,在我的MBP上面是50ms上下,但加入babel并使用es-2015语法转换后,编译耗时直接涨到700~800ms,这还仅仅是只有两个js文件的demo。

在webpack的roadmap里面,看到有对ES6 Modules进行支持的计划,我们还是静等吧。

欠成熟的Loader和Plugin列表

其最富有想象力、最能拓展的Loader和Plugin,她们的列表是竟然是人工维护的一份Github Pages。相对于其他社区来说,这块差了点。同时由于是手动维护的列表,其Loader和Plugin的质量,只能通过Github和npm中进行判断。

2014年CSS报告

国外有人把Alex的TOP1000的CSS给爬了一遍,然后做了一些统计,蛮有意思的。

属性(Properties)

  • 总共使用了1528个CSS属性(居然有这么多)
  • 使用最多的TOP5是:color, width, display, content, background-color
  • TOP50属性的使用频次占所有的85%
  • 有效CSS属性是79个(不包括私有属性)
  • 废弃的属性值有372个
  • 83种拼写错误的属性,约210个未知属性
  • * hack,在59种属性中用了70808次,最常见的是 * zoom (激活IE的hasLayout)
  • _ hack,在48种属性中用了2127次,最常见的是 _ font-family
  • 私有属性有609000个,约7%

继续阅读“2014年CSS报告”

Mac下面的IE8测试环境

微软提供的IE测试虚拟机里面,Window7的自带的最小版本IE是IE8,so,从IE8测试走起。Vista是个短命的产品,至于XP,让他退役吧。
Modern.IE

测试时候,不需要折腾太多的测试环境,一个WebStorm足矣。

WebStorm

勾上允许远程连接,然后在IE虚拟机中,就可以通过IP:63342来测试你的页面了。

给iOS的WebView添加远程调试

2015-01-16更新:

最新版Cordova默认已经开启了远程调试,只要是通过Xcode来安装到设备上面的应用,都可以在Safari设置里面打开远程调试。而release出来ipa之后,则无法再使用远程调试,这个可能也是为了安全因素吧。


在Xcode中找到AppDelegate.m文件

定位到 didFinishLaunchingWithOptions 代码块中。

添加如下代码:

此时Xcode会报错,提示

no known class method for selector ‘_enableRemoteInspector

错误原因是该方法是iOS的一个私有API,从iOS5开始,Xcode项目新增了Automatic Reference Counting检查项,我们只需要关闭它,就可以正常编译了。

在工程属性中 -》 Build Settings -》 Object-C Automatic Reference Counting,将其设置为No即可。

mac webstorm git-flow插件

不论webstorm还是phpstorm,默认在mac下安装git-flow插件之后,IED识别不到git-flow,会提示git-flow未安装,此时需要建一个软链来解决。

通过which,找到git和git-flow的安装路径

然后把git-flow软链一份到git的目录就可以了

附:Mac通过brew安装git-flow

一句命令解决问题

如何把捏前端模板颗粒度

今晚看到一篇博文,其原文是讲AngularJS的模板的,但觉得该作者讲的很多思路,不仅仅是AngularJS适用。凡是想在前端进行模板组织的,都可借鉴,故写下读后感。

模板可以有逻辑吗?

可以,但这种逻辑主要是遍历数据,外加少量的if/switch判断。

表现的差异化,不是在模板逻辑里面进行区分吗?答案是不,并且为了让模板更加模板,更加通用化,强烈不建议在模板中写这类型的逻辑。

那该如何实现表现层的差异化呢?

AngularJS的ngClass值得我们借鉴。通过挂不同的class,由CSS来处理差异化的展示,把表现层的东西,交还给表现层来处理。

hasData还是data.length?

正如上面所说,模板的逻辑,尽量使一些遍历数据的操作。例如对有无数据的判断,直接判断数据长度即可,何必额外添加一个hasData的状态?

表现结构是强绑定在模板?还是控制器?

Scope,规定了模板所需数据的结构。我不知道该如何解释这个,引用原文的话吧,说的挺直白的。

这就像是Java中的接口一样,模板定义好接口,然后控制器只要满足接口定义,填入自己的数据,就能在页面上获得需要的东西

我没研究过AngularJS的Scope为何物,但根据原作者的说法,让我联想到了后端DB的Schema。

后端的数据库,就像前端的模板一样,用来承载数据。当后端定义好Schema之后,使用方只管按照定义好的接口,往里面填充数据后,就能在数据库中获得需要的东西。

模板到底该怎样进行抽象?

模板不应以业务进行抽象,而应该以表现进行抽象。

例如原文中的admins和users,在表现层上面,都是想以用户列表的形式展现,那就该抽象出一个列表list,专门用来处理这部分的表现。

更通俗易懂的来说,交互设计师出一稿设计,我们就可以针对其中用到的交互表现,出一稿模板。当视觉设计师出视觉设计稿之后,我们再通过CSS去还原模板的视觉设计。(此流程暂时对我来说乃乌托邦,还未跑通)

写着写着,我想到了好多我以前厌恶的东西,例如让人看不懂的各种list,例如各种抽象,例如各种阐述抽象用法的文档。

要轻还是要重?

轻,则门槛低,灵活可变,打法随意。

重,则门槛高,有章可循,套路出招。

不论轻重,其目的都是为了代码的可维护性、为了项目进度不受人员的异动影响。

Turn Left or Turn Right?

参考原文:

【浅谈AngularJS模板】http://www.tychio.net/tech/2014/07/21/template-of-angularjs.html

Vagrant安装手札

Vagrant是什么?

Create and configure lightweight, reproducible, and portable development environments.

一款轻量级跨平台的开发环境部署工具,通俗来说,可以在win或者osx下面,部署一套服务器环境,让win\osx下面在仿真的环境中运行,减少实际部署之后,由于环境不一致而导致的bug(例如一些x86与x64的差异,例如win的路径处理与linux的路径处理等)。

安装:

Vagrant只是一个虚拟环境的容器,具体虚拟化的实现,依赖外部的虚拟机,例如VirtualBox和VMware。

由于VirtualBox是免费的,所以我主要会介绍Vagrant与VirtualBox的搭配。

下载并安装VirtualBox:https://www.virtualbox.org/

下载并安装Vagrant:http://www.vagrantup.com/downloads

Window下面建议不要安装在中文目录下面,同时把Vagrant安装在一个较大的分区,利于以后把box镜像也放在同一分区下面。

下载封装好的boxes:

boxes是什么?就是各种已经打包好的虚拟环境镜像,供Vagrant使用。

下载安装boxes的方式有两种,

1、官方源直接添加

使用CMD,在任意目录使用如下命题,添加ubuntu14.04镜像

上面命令,会调用系统的cURL,从https://vagrantcloud.com/ubuntu/trusty64 上面下载最新的ubuntu 14.04的镜像,并添加到vagrant中。

2、手动添加

由于网络连接的缘故,vagrantcloud.com的默认下载速度比较慢,可以手动先把镜像下载后,手动添加到vagrant中。

上http://www.vagrantbox.es/下载自己需要的镜像,然后执行如下命令即可

上面是以window为参考,需注意box add命令的第二个参数我填的是相对路径,之前我在win平台下面,用绝对路径会找不到文件,建议box和vagrant的bin程序都放在同一个分区中,用相对路径添加。

初始化项目:

前面两步都是热身,当一起准备就绪之后,就可以初始化我们的项目了。

通过CMD进入我们的项目目录,然后执行 vagrant init ubuntu/trusty64 , init的参数为我们之前配置的box的别名。

如无意外,一个vagrant环境就已经配置好了,接下来,我们仅仅需要一句命令,就可以启动我们的vagrant环境

看到里面的启动成功的提示之后,就可以通过SSH登陆到我们的虚拟环境中了(window推荐使用Xshell4登陆)。

我们的vagrant虚拟环境搭建好之后,该怎么开发就怎么开发了。

参考:

  • http://www.vagrantup.com/
  • http://vagrantcloud.com/
  • http://www.vagrantbox.es/