Category: Javascript
Tags: arguments
发现了一个关于arguments的有趣的事，看代码：
function fun(a, b, c){
c = 3;
console.log(arguments);
}
fun(1, 2); //[1, 2]
fun(1, 2, undefined); //[1, 2, 3]
arguments与定义时候的参数无关，而取决了调用时候的参数传递，这个大家都知道。在fun中重写参数后，arguments会自动更新，这个大家也都知道。但当参数c不传递时，在fun中重写参数，arguments并不会变化，这时即使你传递一个undefined也能让参数的修改作用于arguments，这个大家也许也都知道，反正我不知道。
Category: HTML & CSS
CSS中有两个有趣的属性值，他们几乎可以作用于所有的属性:inherit和initial。
inherit和它的字面解释一样，用于强制继承父级的样式。这个属性在某些场景下很有用，比如：
你一定知道，position默认并不会继承，通过inherit你就可以跳过这层限制，将父级的值继承过来了。
<div style="position: relative;">
<div style="position: inherit;"></div>
</div>
通常我们会全局定义a元素的颜色，但坑爹的是在某些段落里链接被设置成了和普通文本一样的颜色，这种情况下我们就要对链接再写一次色值。如果你没有使用LESS、SASS之类的CSS技术，到处写色值就会让维护成本变得高昂，后期想改一个色彩风格，你就悲剧了。其实我们可以这样：
a{color: blue;}
<div style="color: #f00;">
<a href="#" style="color: inherit;">I will be red.</a>
</div>
initial和它的字面解释也一样，表示属性的初始值。
PPK写了这么一篇文章initial，表达对于initial的不解，他认为div的display属性的初始值理所当然应该是block，因为我们什么也不写的时候div的display属性值就是block。其实div并不是生来如此，是浏览器在user agent stylesheet中写了这么一句：div{display: block;}，而initial表示的并不是浏览器的默认样式。那它到底以什么为依据呢？答案在这里：W3C – Appendix F. Full property table。表格中有一列叫做Initial value，里面定义了各种CSS属性的初始值。这事浏览器厂商说了不算，W3C的标准W3C说了算！
Category: HTML & CSS
移动设备有着各种各样的分辨率，而Mobile App又不像桌面WEB SITE一样大多有一个固定的宽度（如950、960、1000），所以对于前端工程师来说就涉及到设备分辨率适配的问题。Media Query确实解决了一定的问题，但是仅仅依赖它还不够，我们不可能为每一种分辨率都做处理，弹性设计才是王道。我整理了以下这些实现适配的方法，更多的是一些弹性设计的方法，相信很多大家都用过，没什么新技术可言，仅做针对性的整理：
首当其冲的当然就是Media Query，它提供了大量的选项，不做一一介绍，后面的方案中会用到一些，具体请看MDN的文档：Media Queries。
media_type:
| all | aural | braille | handheld | print | projection | screen | tty | tv | embossed
media_feature:
| width | min-width | max-width
| height | min-height | max-height
| device-width | min-device-width | max-device-width
| device-height | min-device-height | max-device-height
| aspect-ratio | min-aspect-ratio | max-aspect-ratio
| device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio
| color | min-color | max-color
| color-index | min-color-index | max-color-index
| monochrome | min-monochrome | max-monochrome
| resolution | min-resolution | max-resolution
| scan | grid
使用css3来实现渐变、阴影、圆角等效果，使用代码的好处就是在改变元素大小的同时，这些效果也将随之改变，当然你还顺便获得了性能回报。
避免具体的px定义，例如横向排列的tab，用百分比来指定每个tab的宽度，当然后面提到的-webkit-box-flex是一个更好的方案。
的确，在PC上我们已经不再鼓励使用EM进行设计，因为现代的浏览器都支持了ctrl+、ctrl-的整体缩放，秦歌有一篇详细的文章：是时候不用考虑基于字体大小（em）的设计了。然而当你的Mobile App原先是为480×800分辨率以上的设备设计，现在突然要支持320*480的设备时，这种设计将为你节省很多的时间，将字号按分辨率的缩放比率进行调整即可，例子中320下就不再需要设置h1的字号了，同理宽度、高度也可以依赖em进行设计。
@media all and (min-width: 321px){
body{
font-size: 10px;
}
h1{
font-size: 1.8em;
}
}
@media all and (max-width: 320px){
body{
font-size: 8px;
}
}
background-size分了适应不同的分辨率，同一个背景图使用多个不同大小的文件，实在是个让人难以接受的事情，特别是当你使用dataURI的使用，这将大大增加你的css文件大小。使用background-size能缩放你的背景图片，使它适应各个分辨率。
.selector{
background: xxx;
}
@media all and (max-width: 320px){
.selector{
background-size: 12px;
}
}
box-sizing有时一个元素有padding、border，这时又要它的宽或者高撑满整个容器，直接设置width:100%;必然不行，盒模型不会将padding、border的值计算在内，结果元素的宽高就变成了100% + padding + border。这个使用box-sizing能帮到你，它能改变盒模型的计算方式，例如将padding、border的值计算在内：
.selector{
padding: 10px;
border: 10px solid #f00;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
display: -webkit-box;-webkit-box为弹性的设计带来了一系列的方式：
.parent{
display: -webkit-box;
-webkit-box-align: center;
-webkit-box-pack: center;
}
//例如用于slider，水平轮播banner
<div class="banner">
<img src="#" alt="">
<img src="#" alt="">
<img src="#" alt="">
...
</div>
.banner{
display: -webkit-box;
-webkit-box-lines: multiple;
}
//例如用于tab
<ul>
<li><a href="#">home</a></li>
<li><a href="#">lib</a></li>
<li><a href="#">about</a></li>
</ul>
ul{
display: -webkit-box;
}
li{
-webkit-box-flex: 1;
}
当然还有一些PC上我们经常使用的习以为常的方式，不做展开，例如：
margin的方案。right: 10px;代替left: xxx;position: absolute; top: 0; bottom: 0; left: 0; right: 0;。position: fixed; top: 0; bottom: 0; left: 0; right: 0;。在PC上监测web页面的HTTP请求是一件非常简单的事，我们有大量的软件可以来做，甚至浏览器就自带了有这样功能的开发插件。但是在移动设备上就没那么简单了，没有软件，权限控制……下面将介绍2种监测移动设备HTTP请求的方式。
在连上WIFI的前提下，android和ios设备都可以通过Charles来监测HTTP请求，原理是通过Charles在PC上架设一个代理，手机访问这个代理，Charles记录网络请求。ios设备，在“设置”-“无线局域网络”里可以直接设置代理，而android没有设置代理的功能，需要取得root权限后安装第三方软件来实现。
全选所有请求，并选择右侧的“Chart”选项卡就能看到整个HTTP请求瀑布图了：
Android手机，可以使用TCPDUMP输出网络请求的LOG文件，然后用Wireshark打开该文件，进行统计分析。
adb push d:\tcpdump /data/local/tcpdumpadb shell chmod 6755 /data/local/tcpdumpadb shell tcpdump -p -vv -s 0 -w /sdcard/capture.pcap -Z rootadb pull /sdcard/capture.pcap d:/
Category: others
Tags:
CodeCola Patterns is designed to collect and share css code. It’s so free that you can use all patterns for free, and modify all patterns with out register or login. Quality of the shared environment need you and I worked together to protect. With Code Cola, you can share your css code easy, the only thing you have to do is click the share button
. CodeCola Patterns borrow ideas from Subtle Patterns which is a amazing site to collection Photoshop patterns.
CodeCola Patterns是一个用来收集和分享css代码的网站。它非常的自由，你可以免费地使用网站上所有的设计，向全世界分享你的代码，对别的的代码进行改进，而这一切你都无需注册和登录，网站资源的质量需要你我共同维护。通过Code Cola，可以方便地分享你的代码，你唯一需要做的仅仅是按下分享按钮：。CodeCola Patterns的创意来自Subtle Patterns，它是一个用来分享Photoshop设计的网站。
Code Cola85%的用户来至国外，等有时间了再对多语言进行支持。