在iOS系统里面，任意webview在可滚动状态下，都是可以拖超出边界然后反弹回来的。这个效果非常的好看和实用。但是如果我要做一个web app，我就不希望我的整个app界面也被用户拖动。
在很久以前，iOS的浏览器是不支持overflow scroll的，也就是说除了整个网页可以滚动以外，其他部分是不能局部滚动的。要实现局部滚动，一般都是用iScroll等插件，用javascript来模拟滚动。这技术说起来容易做起来难，我看了无数个类似的东西，没有任何人能做到原生一样的滚动反弹效果。最接近原生效果的是我从某牛逼网站上8下来的代码：https://github.com/longbill/ScrollPane
后来iOS退出了iOS5，其中的浏览器支持了overflow scroll。在配合 -webkit-overflow-scrolling: touch; 的情况下滚动起来是比较理想的。但是唯一有一个弊端就是当局部滚动区域处于滚动边缘的时候（比如处于最上面），此时继续网下滚动手指，滚动操作不会体现在局部滚动区域，而是会作用于整个网页。这个在做web app的时候，是完全无法忍受的。做出来的效果跟把web app界面的头部和底部用position fixed固定是一样的。
所以，即使overflow scroll从iOS5起就被支持，但是用javascript模拟滚动的需求还是十分旺盛。其中很重要的一点就是滚动会传递到外面的网页。另外也很重要的一点就是原生的滚动很难实现类似pull to refresh的操作。
后来我打算将我的精选文章做成web app的形式。尝试了无数的scroll插件，都让人失望。被逼无奈仔细研究了一下原生的overflow scroll。再后来被我找到了一个奇怪的方法，来阻止滚动操作传递到整个网页。
就是。
在手指放在屏幕上的时候，判断里面的滚动部分的 scrollTop 是不是 0 或者 最底下。如果是，那么将 scrollTop 轻轻位移1个像素。就可以了。
另外，我还实现了一个pull to refresh，虽然效果跟原生的不太一样，但是看起来也还不错。
代码我空了会整理写文档然后放到github上。大家可以先看这个 demo。 暂时只支持iOS系统。安卓请忽略。
http://jszen.com/public/demo/ptr/index.html
完。
![]()
阅读:23253
最近经常出去自驾游，往川西的高原跑。经常会遇到一个问题就是不知道当前的海拔高度。正好我最近又在学习做站。索性就弄了一个专业查询海拔的网站：海拔高度查询工具 利用Google的API来获取相关信息。不过由于最近天杀的GFW把google全部服务给墙掉了。只能用ditu.google.cn的服务。但是仍然有一些请求走的是maps.googleapis.com，于是搞了个hack，把所有maps.googleapis.com的域名换成ditu.google.cn。还好，大部分都能用。
最近又做了英文版本的海拔高度查询和日出日落时间查询
还是上两张图吧。在红原县附近拍的。
完。
![]()
阅读:23887
当我们设计一个带有用户注册/登录功能的网站的时候，一个必须的功能就是重设密码。 重设密码功能有很多种设计方式，比如发送一个新密码到用户邮箱等。不过今天我要介绍一个我经常用实现方式。
用户流程:
-
用户忘记密码，来到密码重设界面
-
用户输入Email地址，点击重设密码按钮
-
用户收到一封密码重设邮件，里面有重设密码的链接，此链接有过期时间
-
用户点击链接，来到密码重设页面，输入新密码，完成
这个流程并没有什么创新，很多网站都是用这套流程
后端实现方式:
-
当用户输入Email地址后，验证这个Email，如果存在于数据库，那么取得用户的user_id
-
将user_id和当前时间戳编码成HASH，需要提前准备好一个KEY，并且这个KEY只存在服务器上。 HASH = md5 ( user_id + timestamp + KEY )
-
生成一个URL，并且附带刚刚生成的HASH和用户id以及timestamp，比如 http://domain.com/reset-password.php?hash=HASH&user_id=123×tamp=1392121211
-
当用户访问这个URL, 检查HASH是否合法: HASH == MD5 ( user_id + timestamp + KEY)
-
检查 timestamp 是不是过期了
-
如果所有检查通过，那么显示一个新密码表单给用户
这种方式的好处:
-
不需要额外的数据表
-
不用担心参数被用户恶意修改，因为要检查hash是不是等于那几个参数的md5
-
密码重设URL自带时间戳
-
只要KEY设置的足够长足够复杂，那么可以认为HASH是绝对安全的
更详细的样例代码可以参考这里：http://jszen.com/reset-password-system.6.html
完。
![]()
阅读:16458
Mac操作系统里面有个好用的东西叫做Dashboard，Windows的桌面小工具就是抄的Dashboard。 Dashboard里面的Widget都是用网页技术做的(HTML, Javascript 等)，Dashboard仅仅是提供一个透明的window来显示widget的网页而已。
Mac操作系统自带的Widgets里面就有一个叫做“便签”的东西，可以实现类似记事本的功能，但是记录的文本有限，不能超过便签窗口的大小，实际使用起来十分蛋疼。
我这个小东西的特点是这样的：
-
提供一个白底黑字的文本框显示在dashboard界面
-
文本框使用textarea控件，里面的文字保证没有任何格式
-
理论上可以在里面输入无限制长度的字符
-
关闭dashboard界面的时候，文本框里面的文字内容自动保存到硬盘
-
窗口大小可以自由调节
-
支持添加多个窗口到dashboard
下载： here 源代码：Github page
完。
![]()
阅读:16092
直到今天才发现一个惊人的事情：iPad3的电池容量是11666mAh，而macbook pro的电池容量才5000多mAh。为什么iPad3那么小的体积内可以装下比mbp更多的电池容量呢？难道采用了什么新的科技？
于是google了下，又发现一个惊人的事情：一般电池上标的容量单位是mAh，但是学过物理的都知道，电流乘以时间不是一个能量单位，还少了一个电压。相信跟我一样到现在才发现这个问题的同学还有很多，那么我就普及下高中物理知识：
-
电流单位A(安培), 1000mA = 1A
-
电压单位V(福特)
-
功率单位W(瓦特)
-
能量单位J(焦耳)，但是在电子产品的电池上很少用这个单位。一般用Whr(瓦时)表示能量。
-
能量=功率x时间
-
功率=电压x电流
-
能量=电压x电流x时间
综上，mAh并不是一个准确的表示电池容量的单位，它的出现应该同时标明电压（大部分手机等电子设备是固定的3.7V）。Whr是能量单位，可以表示电池的容量。
所以，在比较电池容量的时候，请先确定电压是否一样。如果不一样，就要乘以各自的电压转换成Whr再比较。
所以，mbp的电池上标明容量是60Whr，电压大约10.95V（算得mAh表示法大约5480mAh）。而iPad3的11666mAh大约工作在3.7V的电压下，算得大约43Whr。所以iPad3的电池是没有比mbp电池容量大的。
完。
![]()
阅读:11796
很喜欢hollister这个牌子，但是国内貌似只有深圳上海北京有店。这马上就要回成都了，买不到了。于是就去他们官方网站看看。
国内IP访问他们网站会被强制跳转到香港站。衣服的价格是港币，标价跟深圳的店差不多。对比起来网购没什么优势啊，就一个港币汇率8折。于是放大招，通过IP位于日本的代理再次访问他们网站。哇，出来了。美元标价换算成人民币相当于只要六七折啊，而且这圣诞新年打折更便宜啊。在深圳店里面1600不打折的羽绒服，美元只要139刀啊。接近5折了！而且美国版网站跟香港版网站同样支持送货到国内地址的。
于是选购了两百多刀的各种东西，给了20刀的邮费，感觉就算完事了，坐等收货。看来还是想太简单了。没过几天，fedex给我电话说让我报税。还非得按invoice上的价格来报，20%的税率。折腾了几次打印扫描后总算也把入关手续弄好了。交了310人民币的税。 从美国发货到我收到货大概七八天吧。现在算来，加上邮费加上缴税，还是比实体店便宜不少，甚至比香港人通过网站买还便宜不少。。。
衣服貌似有些是越南产的，有些是中国产的。自己地方产的东西到美国去走一圈，价值就翻了那么多。更可恶的是他们还歧视中国人啊，默认访问的香港版网站卖的价格还更贵。
PS. 喜欢这个牌子是因为无意间逛到了深圳的实体店，店内很有风格，服务员都是帅哥美女尤其是那个收银的小妹。。。。服务员还满口英语，感觉很洋盘的样子。还有店的味道很不错。总的说来就是一次很愉快的经历。让我第一次觉得逛街其实也可以很享受嘛。
另外，不知道有没有什么办法可以免去这个关税。知道的同学支个招呗。
完。
![]()
阅读:10507
记得很久很久以前，主流还是IE6。开发前端页面的时候，修改一行CSS或者JS，就要回到浏览器刷新看下效果。调试Javascript更是只能用alert来判断是哪行代码出问题了。那个时候，Javascript还有个竞争对手叫VBScript，声明script标签的时候还建议声明language="javascript"。那个时候网页脚本还被认为是仅仅能给网页增加一些跑马灯等的特效而存在的。
那都是05年的事了。现在前端的各种环境各种工具都迈入了一个崭新的时代。感谢Google推动了浏览器的发展，感谢W3C制定各种有用没用的标准，鄙视微软万恶的IE6。现在我们开发前端页面已经逐渐变得优雅/文艺了起来。这让我这个经历过当年艰苦岁月的前端er不禁感叹终于熬出头了。。。
这里我像各位同学介绍下我长期使用的各种前端开发工具，主要是提升效率。欢迎补充留言。
Chrome developer tools
不知道什么时候，Chrome developer tools强大到超过了Firebug，成为了我主要的debug工具。查看浏览器发起的所有请求、查看页面引用的js/css代码、查看/修改页面DOM结构、在页面上修改css/js然后直接看到效果、Javascript Console等等各种基本功能都做到非常好用。强烈建议各位找找深入介绍Chrome developer tools的文章，相信有很多高级的功能很多同学都还没用过。
Sublime Text 2
这是一个文本编辑器。也是不知道什么时候就强大到超过Textmate，成为我主要的编辑器。更重要的是，它居然是跨平台的。用Windows的同学有福了。
Zen Coding
这是一个编辑器插件，支持各种编辑器。这里有篇介绍文章。这个插件的牛逼之处在于可以大大提高写HTML的效率。比如我要写一个html table。输入 table#list-table.table>tr.row*3>td.cell*3 然后按定义的Zen Cod ing快捷键，就会马上生成:
<table id="list-table" class="table">
<tr class="row">
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
</tr>
<tr class="row">
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
</tr>
<tr class="row">
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
</tr>
</table>
Twitter Bootstrap
这是twitter发布的一套前端整体框架。也就是预先定义了很多css和一些Js代码。写页面的时候，按照规范写class，就可以实现用户体验很好的页面。这里是项目主页。现在很多很多网站都基于bootstrap来开发。的确可以为开发者节省很多宝贵的时间，更重要的是，这些页面元素都是twitter经过研究后，觉得是用户体验最好的设计。而且，基于bootstrap，页面还可以很轻松的做到mobile friendly。我的一个小项目就是基于bootstrap，实现了使用同一个页面，支持各种尺寸的浏览器。尤其在iOS浏览器上表现非常好。精选文章
Devtools Autosave
这才是最牛逼的神器。项目地址在这里。这个东西实现了可以在Chrome developer tools里面修改css属性或者js代码，然后直接同步保存到本地或者服务器。比如以前我们先大概写好css，然后用firebug进行微调，调整好后，复制css代码，进入编辑器粘贴代码然后保存，然后刷新浏览器看效果。而现在，在Chrome devtools里面，修改的css可以自动保存了。而且不仅仅是css属性，还可以直接修改css源文件、javascript源文件。现在的开发方式可以简化到，先写好HTML骨架，定义好各个class名字，然后打开chrome devtools，在css源文件里面直接添加新的class。边写边可以看到效果哦。牛逼指数10颗星啊。
Markman
马克鳗是一个Design to HTML神器。很多时候我们需要根据设计图片文件来开发成网页代码。这时需要精确测量各种距离、各种宽度、各种颜色。马克鳗可以优雅的完成这个任务。项目地址在这里。下面是我截的图：
先写这么多吧。
完。
![]()
阅读:14924
我去年9月份入手了一台一汽大众高尔夫6 1.4TSI+DSG车子。今年3月份大众公司说可以升级DSG控制程序，于是我就去升级了。后来越开越觉得换挡不平顺，于是又去升级了一次DSG程序，但是问题更严重了。后来在网上看了好多人都遇到这个问题。 再后来我把车开到了深圳，在深圳这边的4s店问了下，告诉我需要重置DSG参数，然后用手动模式在高速上跑一下，让DSG程序重新学习车子的发动机性能。我这才明白原来我之前升级过DSG程序之后，都没有这么做过，DSG程序没学习好，所以出现了顿挫感。这也解释了为什么网上关于升级DSG程序后的各种不同评价，有的人说升级了感觉很好，有的人则觉得不如以前了。
按4s技师说的，重置了DSG参数后，应该立即上高速，用手动模式在5档、6档让发动机在2000-4000转每隔500转停留至少10秒以上。也就是说挂5档，6档,让发动机转速在2000-2500,2500-3000,3000-3500,3500-4000这四个区间分别停留10秒以上。我的DSG经过这样的重新学习之后，顿挫抖动问题都得到了很大的缓解，驾驶起来平顺多了。不过还是比不上新车时候的感觉。网上说这很可能是因为离合片磨损造成的。
不过7速DSG的问题确实很多人都遇到了。我成都一个朋友甚至还更换了DSG总成，还是问题依旧，最后不得不自己掏钱换了个6速湿式DSG。因为很多人投诉大众的DSG有设计缺陷，国家质监总局采取了一些行动：《国家质检总局缺陷产品管理中心向社会公开征集大众汽车DSG变速器相关故障信息》 希望遇到DSG问题的朋友都去投诉一下，好让大众公司尽快解决DSG问题。
2012年11月29日更新
前不久去做保养，顺便跟客服提了下二档抖动的问题，故意夸大了一下。没想到过几天客服打电话给我说索赔成功，更换离合片。然后11月十几号的时候我去换了，搞了五六个小时。 换的时候我大概看了下，新离合片貌似是德国货。论坛里有同学说是新的离合片用新的材料制造，避免了高温变形的问题。现在开了半个月，感觉跟新车差不多，换挡很平顺。
在去换离合片的当天，有个同学在这篇日志留言说抖动的解决办法：
DSG低速抖动有效处理方法：怠速时，首先右脚踩住刹车，挂D档，左脚加油门到三分之二处，保持1分钟；然后松开油门挂倒档，同样加油门三分之二处保持1分钟，同样方法，操作2一3次即可解决低速抖动问题；此方法让两个离合器重新磨合到最新控制状态，有效解决低速抖动问题。
我在去换离合片之前特意试了下。果然有效唉！不过我估计开不了多久，还是会抖动，还需要这样做。所以，还是换离合片感觉好些。
完。
![]()
阅读:21881
