December 16th, 2011 by maxbbn
创建项目的时候，传入 -c less
$ express -c less sampleproject
在app.js里面， configure 里面会多出来一行，
app.use(express.compiler({ src: __dirname + '/public', enable: ['less'] }));
用这个Middleware模块, 可以自动解析less了。
当你请求 abc.css文件时，会自动找到同目录下的 abc.less， 编译成CSS传给浏览器。
没这么简单。。。
目前已知的问题有：
1. import 路径
@import 时的路径相对于应用根路径。所以，导入Less时候必须 这样子
@import "/public/css/file.less";
2. rebuild
由于less 自动打包是根据目标文件的最后修改时间来判断是否重新打包的。
当被import的文件修改的时候而主文件没有修改， 不会自动重新编译。
又一个硬伤啊！
3。无法时候另一个文件里面的less变量。。。。。
结论：
所以说，目前 LESS compile 几乎无法使用。
Tags: express, less, nodejs
Posted in 前端 | No Comments »
September 7th, 2011 by maxbbn
这个原因是由于Chrome浏览器的一个诡异bug
- 打开Chrome选项
- 切换到高级选项，在隐私设置里面打开“内容设置”
- 点击”所有Cookie和网站数据” 按钮， 打开后在右上角的搜索框里面输入taobao.com
- 再点击”全部删除”
Posted in Uncategorized | No Comments »
March 7th, 2011 by maxbbn
Dropbox官网下载页面试图下载时
看到页面如下显示
这时我发现，下载指引里面的截图就是我Chrome的下载管理。然道是Dropbox是用Chrome做为默认的浏览器 ？好奇的我打开FireFox验证, 果然：
我们发现，文案与图片都发生了变化。
其他浏览器我就不一一验证了。我想，这就是好的设计， 简单的让人感动， 却体现了对用户的细致的关怀。这些一点一滴的简简单单的人性设计，也许就是Dropbox如此成功的原因。
Tags: design, dropbox, dropbox UE Design browsers, UE
Posted in WebDesign | No Comments »
July 8th, 2010 by maxbbn
应用场景：
有个输入框，里面是一段文本。但用户点击输入框时，使框内文本选中，方便复制。
脚本：
demo.htm
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input id="textinput" type="text" value="test test test" />
<script src="demo.js"></script>
</body>
</html>
demo.js
var el = document.getElementsById("textinput");
textinput.onClick = function(){
this.select();
}
问题：
很多时候，输入框很快从选中状况闪回非选中状况。
解决：
添加一个延迟，就可以把输入的波动去除了。
demo2.js:
vartextinput = document.getElementsById("textinput");
textinput.onclick = function(){
setTimeout(function(){
textinput.select();
}, 200);
}
Posted in Uncategorized | No Comments »
July 7th, 2010 by maxbbn
藉由加強與優化許多函數及演算法，Notepad++ 致力於減少世界二氧化碳的排放。
—— Notepad++ 官方网站
我对 Notepad++ ( 以下称 NPP ) 一见钟情已经快1年，在这1年中了，发现随着了解的深入，对NPP越来越有爱了，对我来说 notepad++ 吸引点如下
- 平易近人，容易上手， 而且上手后可挖掘程度也很高
- 时时会发现令人惊喜的插件
- 做的多吃的少，打开大文件时效率高
- 有插件 可扩展
缺点：
- Windows Only
- 可以设置自定义快捷键来满足个性化。 不过快捷键设置界面比较让人蛋疼
一些好用的插件
一、 NPPEXEC
能运行外部的脚本，执行命令，还有一个控制台，可以方便的在NotePad内部去执行外部的命令。 用好这个插件，几乎能做到任何你能想的到的事情。
我用的最多的几个脚本，如 脚本压缩， jslint检查, svn操作等。还可以用nppexec 配合 [ruby....]等脚本语言,做文件同步，等等。 真是一切皆有可能。
二、Zen-Coding
Zen-Coding是写HTML&CSS的利器。 大家也许不陌生。 起码用了之后，能大大减少前端编码量。有效缓解脖酸背疼。而且写的快了，就可以按时下班，少用电脑几小时，可谓低碳。
安装好插件后。输入
html:5
Ctrl+E展开成：
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
|
</body>
</html>
输入
div#page>div.logo+ul#navigation>li.o-$*5>a
展开成
<div id="page">
<div class="logo"></div>
<ul id="navigation">
<li class="o-1"><a href=""></a></li>
<li class="o-2"><a href=""></a></li>
<li class="o-3"><a href=""></a></li>
<li class="o-4"><a href=""></a></li>
<li class="o-5"><a href=""></a></li>
</ul>
</div>
啊呜~~ 很爽。
如何安装
到 http://code.google.com/p/zen-coding/ 下载插件NPP插件。下载后将zip 文件解压到安装目录下的plugin文件价里，重启NPP 就可以生效了。
一个小问题：目前我发现的 如果采用ANSI编码的文件，只要输入中文，在中文后面Zencoding插件 就会失效。所以，在编码阶段，最好把文件编码改成UTF-8的。
Tags: NPP, zencoding
Posted in 前端, NPP | No Comments »
March 28th, 2010 by maxbbn
作者Cal Henderson，最知名的2.0照片分享社区 Flickr 的合伙人之一和首席软件架构师，在构建一个大型网站方面，自然会有很多有价值的经验。此书第一版出版于2006，对于发展迅速的互联网来说，书中很多环境，技术已经发生了改变。但是在某些方面还是更新了我的许多模糊，肤浅认识。现在，就以下几点，记录下我的收获。
定义Web应用程序
Web应用程序不是桌面应用程序、也不是Web站点，而是介于两者之间，同时涵盖双方的特点。与Web站点相比，Web应用程序最关心的不是页面的集合，而是应用的分层。作者说：
Web应用程序是具备一个核心数据集合的系统，这个数据集合可以用Web页面方式访问及修改，也可以使用接口，通过其他途径进行访问与修改。
分层的Web应用程序
上面说到，Web应用程序最关心是应用的分层。作者用蛋糕做一个比喻。从Web应用程序的持久化存储层（数据），业务逻辑层，到交互逻辑和页面逻辑层再到展现层。良好的分层最大的好处是有助于工程师的分工，工程师只需关心自己对应的分层和对上下层的接口。比如，前端工程师无需考虑如何将数据从数据库中取出来，或者，完成一次搜索完整细节。而只需关心，如何用优雅或不优雅的标记将数据展现给我们Web用户。
构建你的开发环境
这里作者特地提到的三大规则
使用源码控制；使用单步创建；跟踪程序缺陷。
源码控制的好处想必不用说了，说说单步创建吧。单步构建说白了就是自动化。好处是自动化一些繁琐的过程。将一些需要多次操作的冗余过程简化到只需一个按钮，或者是完全的自动化定时执行。这样你就有更多的时间去做那些更有价值的工作。而且避免很多不必要的误操作。可以通过命令行脚本，批处理文件，开发工具的自动化插件等，尽可能减少开发时的冗余环节。所以，得好好想想怎么做一个懒人啦。 关于bug和测试，做好bug 的分级，bug分S1/High, S2/Medium, S3/Low。再依据bug等级来对bug进行修复，上周一次小型分享上小虎提到的当同时有很多bug时，先解决容易解决的，控制bug 数量对于团队合作（安稳开发情绪）其实也很重要。做下扩展，当有很多S1优先级的Bug时，先解决其中比较简单的，在去解决比较难的，当没有S1级别的Bug时，才去考虑解决S2级别的。
国际化、本地化
i18n,L10n 分别是国际化和本地化。这两个概念以前一直有混淆。这里记录一下
国际化指为应用程序添加输入、处理、输出国际文本的能力。 本地化是指为特定地区，提供定制的应用程序的过程
国际化是一种能力，而本地化是一个过程。很有趣，以前没有注意过。
电子邮件作为Web应用程序的接口
通过使用这种已经成熟的技术，为用户提供一个接入网站的，比如近期更新、最新交互、通知等各种站点信息。比如twitter的被follow的通知邮件，时光网的时光周刊等。同时电子邮件也是一种很强大的输入接口。比如通过邮件发布照片，更新博客，自动化处理邮件（通过邮件系统来处理用户命令，并自动通过邮件系统反馈）。
Tags: 快速阅读笔记, web
Posted in Uncategorized | 1 Comment »
January 10th, 2010 by maxbbn
我承认我不是一个生活很有条理的人，比如，剪头发我从来不做安排，总是头发长到不行了才想到去理发店；事情不多的时间效率还行，当一下子来很多事情时就会乱了阵脚，更谈不上效率了。
自从进了公司，同时要处理很多事情的情况很多：正在改进一个程序的功能，这时候开发抛了个bug要你处理下，刚要看看bug，一个同事要我准备后天交流会的材料。就在这时候，上次合作过的运营来找，说有个功能出现问题了，很紧急，马上给她处理下。
先停下手头工作，把bug解决掉吧。 开始动手解决Bug，一边处理bug一点在想那个运营提到的问题，那个功能当时好好的，怎么这么久了才发现这个问题呢？ 究竟哪里出现问题？ 还有交流会的材料，该怎么找呢。。。。。。接下来就杯具了 ，这一天什么事情都没做好。 人没有三头六臂 ，不是多核的，不可能同时处理很多事情，又全部处理好。至少我觉得我不行。
开始关注时间管理时在网上找到篇文章，看到一句话，当时觉得很有感触：
把关注点放在结果上，而不是变得更忙。 Concentrate on results, not on being busy （来源）
在管理自己时间上，目的明确很重要，否则你的忙碌很可能就是瞎忙活。时间管理出发点是做事，结束点出是做事。以下是我总结的四点原则：
- 明确自己的目标，做什么及成功标准
- 了解自己的目前的状况
- 一个时间内只关注一件需要关注的事
- 形成经验
其于以上原则，我发现，最简单，最行之有次的工具是：笔记本+笔。
具体操作：有新的任务发生时，马上在纸上，用列表形式记录下来（如下）。 看看列表，今天写博客的优先级比较高，我在开始写的时候设定了起止时间，修改字体的可以先放着。 当我一心一意写好博客的时候，我就把这条目勾上。或者加一个真实完成时间。
2010-01-10
- 写本博客 15：00 – 16：00 （16：10）√
- 去图书馆续借
- 修改我的博客的字体
这样，我就可能通过列表来掌握我现在有哪些待办事项，可能很清楚看出当前处理的任务，并把关注点放在上面。另外，开始预计结束时间的设定，可以让我处理时更加专心，更有效率， 当然 时间可能会有出入，所以完成时，我需要把真实完成时间也记录上去，以便发现自己预估与真实情况的误差，使以后的预估更加精确。 打上勾。 然后可以起身去倒杯水，然后看看下一步要做什么。
以上只是举例，实际上，我用这个方法第一天就尝到了甜头，是的，完全改变了我工作时的节奏，我开始慢慢控制这个节奏了。这仅仅只是一个工具，最重要的是上面的四点原则。时间管理我还刚上路，这是一个新的天地。。。。。
有几个工具推荐一下
GTD ：Getting Things Done缩写, 一种时间管理的方法
http://doit.im 基于GTD的时间管理软件。air版本
Posted in Uncategorized | No Comments »
January 9th, 2010 by maxbbn
Web可用性的10条原则
- 避免对用户的物理、精神和感知能力做任何假设。
- 用户只有发送和接受文本的技术，这是你要做的所有假设
- 用户的资源属于用户（时间或者能力），不属于我们。不要试图支配用户的资源
- 为非文本内容提供文本
- 使用使用最广泛的技术
- 清晰的语言
- 易用、可搜索、可导航
- 基于语义设计
- 如果需要使用新的特性来改进内容，那么请同时允许那些不愿使用这些特性的人轻松地切换使用老特性
- 对于新的Web技术，同样使用这些原则使他具有高可用性
为什么需要可用性
- 2000年 美国1/8 的人有严重残障，web对于他们更具吸引力。 （中国的数据是多少？）
- 老人对高可用性网站的需求
- 对于正常人来说也有不太明显的易用性问题
- 法律，社会等原因
- 可以提升设计者与开发者的能力。。
有哪几种残障：
- 视觉障碍：
- 失明（VA<20/200,）和弱视(VA < 20/70)，工具一般是屏幕阅读器 或 屏幕放大镜。
- 颜色和对比度缺陷
- 感光症癫痫：有些人暴露在特定的重复图案或闪烁下时，会引发感光症癫痫。
- 听觉障碍：（主要是为依赖声音的地方提供视觉信息，如字幕，文本）
- 行动障碍
- 认知障碍
- 多重障碍
Web可用性的开发
开发过程中各个角色都有对应的可用性需求，并承担相应的可用性责任。包括
- 项目干系人（产品经理）
- 内容作者（运营）
- 用户界面设计师（交互设计师）
- 视觉特性设计师（视觉设计师）
- 基础结构开发者（前端开发，后台开发）
- 可用性协调员：确保环境的所有方面，不论物理的，程序上的还是虚拟的，都能被残障人士使用。
网站的的可用性不仅仅是设计师的问题，要提高网站的可用性，规划，内容，设计，开发的所有角色都要有可用性意识，并承担可用性职责
可用性途径
做好可用性计划，从一开始就做好可用性的规划，可以降低开发成本
多种访问途径
指导方针
W3C 发起的WAI（Web Accessibility Initiative, Web 可用性倡议）
WAI 发布的 WCAG（Web Content Accessibility Guidelines 1.0, Web 内容可用性指导方针1.0）
美国胡康复法案(Rehabilitation Act of 1973)的第508节，Section 508
其他 W3C编制的 政策链接列表 http://www.w3.org/WAI/Policy/
可用性测试
提到的一些工具
页面结构
创建有意义的结构，如阅读顺序，从故事板板开始设计，使用微格式
简单就是美：可读性，术语，成语，缩写
语义化的标签
新技术与可用性
CSS3中的语音模块 （Speech Module）可以定义屏幕阅读器的“样式”如：
a {
voice-family:female;
cue:url(linksound.aiff);
}
可以以将链接之前播放 linksound.aiff 声音，并用女声来阅读。
还还一些如
voice-channel:left
voice-volume:soft
voice-stress:moderate
voice-pitch:high
voice-rate:slow
等等，会提升屏幕阅读器用户的体验。 受益的可能不仅仅是视障用户了
Tags: 可用性, 快速阅读笔记, web
Posted in 阅读笔记 | 2 Comments »
January 8th, 2010 by maxbbn
如下代码在IE下面运行
<html>
<head>
</head>
<body>
<button onclick="fn()">btn</button>
<script>
var fn = function(){
var o = window.event;
var b = window.event;
alert(o === b);
alert(o === window.event);
alert(window.event === window.event);
}
</script>
</body>
</html>
请问代码中3个alert 分别是什么；
window.event === window .event 这是假的
o === window.event 这也是假的
o === b 这个呢？ 也是假的
这是为什么呢~？
在回调函数中 window.event 不是一个对象。。。 更确切的说 window.event 是一个get函数。是的没错，他是一个函数。
window.event 等价于 function(){ return new Event() }();
每次调用它都返回一个新的Event对象。 所以，即使在同一个时间里面 window.event 返回两个不同的对象 。 所以当然 window.event != window.event;
下面两条就好解释了， o 指向一个Event对象，而window.event 返回一个新的对象，自然不同。
o===b 为什么为假 不需要解释了吧？
仅仅是猜测，是不是真的 有待验证。
Tags: 前端, event, IE, javascript
Posted in 前端 | No Comments »
January 6th, 2010 by maxbbn
用window.onunload 只能侦测到unload 事件，但这是已经晚了，不能在阻止页面的跳转。
window.onbeforeunload = function(){
return “你要走吗？”
}
可以很方便完成这个任务。可以设置
window.onbeforeunload = null
来清除这个事件侦听
Tags: 页面跳转提示, onbeforeunload, onunload
Posted in 前端 | No Comments »