gulp-rev-append 小记

使用gulp-rev-append给页面的引用添加版本号,清除页面引用缓存。简单配置如下:

var gulp = require('gulp');
var rev = require('gulp-rev-append');

gulp.task('rev', function() {
 gulp.src('./index.html')
 .pipe(rev())
 .pipe(gulp.dest('./dest'));
});

针对相对路径使用,对于简单的页面来说没问题,但使用后端模板文件后路径变化时就不太适用了。

这是也只用使用 gulp-rev-collector 了,复杂度提高了。

DPI、DPR、屏幕尺寸等释义

物理分辨率 & 设备分辨率 (Device resolution)
单位:
像素密度 DPI ( Dots per inch ),单位像素/尺寸。是打印机、鼠标等设备分辨率的单位。
 
一平方英寸面积内像素的多少。dpi越小,扫描的清晰度越低,由于受网络传输速度的影响,web上使用的图片都是72dpi。
 
冲洗照片不能使用这个参数,必须是300dpi或者更高350dpi。
 
 
屏幕尺寸:
是指屏幕对角线的尺寸,一般用英寸来表示。1英寸=2.54厘米
 
设备像素比 DPR( devicePixelRatio ):
提供了设备像素个数和理想视口的比。
浏览器厂商决定了设备的理想视口,DPR也由他们决定,单位是dppx。
 
dppx 每一个像素的点数。一英寸对应了css中的96像素,1dppx等于96dpi。
 
resolution 设备的分辨率,如:96dpi, 300dpi
 
设备像素dp(device pixels):
ppi就是设备像素dp(device pixels)的单位。
 
ppi(pixels per inch)表示每英寸所拥有的像素(pixel)数目,数值越高,代表屏幕能以更高的密度显示图像。
计算公式:ppi=像素数量/物理尺寸(英寸数)
 
 
注:
写代码的时候只要关注dpr就可以了,网页的视口的大小是设备分辨率/dpr

webpack-dev-server

简单来说,webpack-dev-server就是一个小型的静态文件服务器。

1、使用前需要先进行安装

npm install -g webpack  ##全局安装webpack
npm isntall -g webpack-dev-server ##全局安装webpack-dev-server

2、安装完成后我们就可以在项目根目录通过 webpack-dev-server 命令来启动开发服务器了

–port=8080:指定了服务器端口

Velocity Macro(宏)

定义宏和使用宏

#macro指令用于定义一个VTL模板的重复代码块——宏。下面是一个简单的定义宏的例子:

#macro( d )
#end

这段代码定义了一个宏,名字为d,没有参数。下面是使用这个宏的代码:

#d()

Velocity在遇到#d()的时候,会用”<tr><td></td></tr>”替代上面的#d()这一行。

宏的参数:
宏也可以带参数,而且是任意多个参数。不过,宏定义时有几个参数,宏调用时就要提供同样数目的参数。

#macro( d $name)
$name
#end

使用:

#d("name1")

宏的参数可以是以下VTL元素中的任意一种:引用、字符串字面值、数值字面值、整数范围(比如[1 .. 10]、[$start .. $end])、数组、布尔值true或者false。

内联的宏

当宏是在一个Velocity模板中定义时,这个宏(是inline的)只能被该模板使用,同一个网站下的其他模板是不能用的。如果是在一个Velocity宏模板库中定义的宏,就可以被任何同一网站下的模板使用。

其他一些注意点

宏必须在第一次使用它之前定义。当#Parse()一个模板文件时,尤其要注意这一点。

好的写法:

#macro(link $linkHref $linkId)
    $bodyContent
#end

参考:
http://www.cnblogs.com/yuepeng/archive/2010/11/23/1885700.html
http://my.oschina.net/tinyframework/blog/221930

使用Fiddler调试手机页面请求

从事前端开发的同学一定对Fiddler不陌生,它是一个非常强大的http(s)协议分析工具,如果你不知道它是什么,可以自行google一下,本文不再作科普,简单的说它可以代替Chrome开发人员工具中Network面板或Firefox的HttpWatch插件的功能。

官网地址:http://www.telerik.com/fiddler

我们知道如何在电脑上调试页面请求,但在手机端你没有这么多强大好用的调试工具来调试你的webapp,如果你需要查看在手机上打开页面时,所产生的http请求却又不知道怎么做,那就继续往下看。(当然,大部分情况下,你可以直接在电脑上用Chrome或Firefox模拟手机浏览器来看)

Fiddler支持代理的功能,也就是说你所有的http请求都可以通过它来转发,Fiddler代理默认使用端口8888,不知道的同学有可能因此无法使用翻墙,因为端口冲突。

利用这点,我们可以在手机端设置http代理为Fiddler的代理服务器,使得手机应用的请求都通过Fiddler来转发,从而实现查看手机端页面请求的功能。

首先我们打开Fiddler->Tools->Telerik Fiddler Options…在Connection面板里将Allow remote computers to connect勾选起来,确定后,关闭Fiddler并重新打开Fiddler。

2016-07-28_165958

此时,为了确保代理是正常工作的,我们可以在cmd里执行netstat -anop tcp查看Fiddler进程是否正常监听8888端口,如果服务没有正常开启,可以尝试使用其他端口,端口修改的位置,如上图位置。

fiddler_proxy

从上图我们看到,进程ID为8392的Fiddler正在监听8888端口,说明代理已经在工作了。那么接下来我们要把手机端的代理设置为Fiddler的代理,代理设置需要一个ip和一个端口,ip就是Fiddler所运行的电脑的局域网ip地址,端口默认是Fiddler代理的端口8888,请确保手机所在的网段可以访问到电脑所在的网段,同一个局域网里一般没什么问题。

2016-07-28_170405

正如我们所期望的,你可以开始调试你的手机端webapp请求了。

github的pull request是指什么意思?

有一个仓库,叫Repo A。你如果要往里贡献代码,首先要Fork这个Repo,于是在你的Github账号下有了一个Repo A2,。然后你在这个A2下工作,Commit,push等。然后你希望原始仓库Repo A合并你的工作,你可以在Github上发起一个Pull Request,意思是请求Repo A的所有者从你的A2合并分支。如果被审核通过并正式合并,这样你就为项目A做贡献了

作者:匿名用户
链接:https://www.zhihu.com/question/21682976/answer/20835845

RESTful API示例

HTTP动词

对于资源的具体操作,由HTTP动词表示
常用的HTTP动词包括一下几个,括号里是对应的SQL命令:

  • GET(SELECT): 从服务器取出资源(一个或多个)
  • POST(CREATE): 在服务器新建一个资源
  • PUT(UPDATE): 在服务器更新资源(客户端提供改变后的完整资源,即更新整一个资源)
  • PATCH(UPDATE): 在服务器更新资源(客户端提供改变的属性,即更新资源的部分属性)
  • DELETE(DELETE): 从服务器删除资源

还有两个不常用的HTTP动词

  • HEAD: 获取资源的元数据
  • OPTIONS: 获取信息,关于资源的哪些属性是客户端可以改变的

下面是若干例子:

  • GET /zoos:列出所有动物园
  • POST /zoos:新建一个动物园
  • GET /zoos/ID:获取某个指定动物园的信息
  • PUT /zoos/ID:更新某个指定动物园的信息(提供该动物园的全部信息)
  • PATCH /zoos/ID:更新某个指定动物园的信息(提供该动物园的部分信息)
  • DELETE /zoos/ID:删除某个动物园
  • GET /zoos/ID/animals:列出某个指定动物园的所有动物
  • DELETE /zoos/ID/animals/ID:删除某个指定动物园的指定动物

 

文/Harrison(简书作者)
原文链接:http://www.jianshu.com/p/00631797a60d