- 博客(68)
- 收藏
- 关注
RSS订阅原创 长途旅行出行准备清单
核对出行准备清单：1、遮阳伞、草帽、太阳镜、防晒霜2、毛巾、牙刷、水乳液洗面奶面膜、花露水、(创可贴、口罩)、眼罩/U型枕、万能头巾、多备几个塑料袋、纸巾3、换洗衣5套，睡衣。注意早晚温差，备外套。4、牛肉干、巧克力、口香糖5、行程、合同6、电子产品：手机(充电)、mini(充电)或Kindle、耳机、（当地电话卡、wifi）7、随身：身份证、钱包（取现金兑换货币...
2015-07-16 14:45:26
326
原创 工具类产品的可用性度量方法
信息型产品代表是淘宝网，淘宝网的可用性度量可以通过这么几个指标：PV（Page View）、UV（User View）、转化率。简单来说，评判一个设计的好坏就是它所产生的商业价值。工具类平台不同，属于功能型产品，用户群比较固定，访问量也比较稳定，服务类产品不会考虑商业化的问题。所以这几个指标不太适用。最终产生价值是的减少用户时间，提高生产率。总结工具平台型产品的特质：1、用户群固定，大...
2014-04-28 13:41:55
1298
原创 前端模块化
前端模块化解决什么问题？有了模块，我就可以很方便的使用别人的代码，想要什么功能，就用加载什么模块。但是，这样做需要有一个前提，那就是大家必须以同样的方式编写模块，否则就乱套了。所以组内需要有一套统一的模块规范。 如何实现模块？1、对象字面量的变体2、JS设计模式的模块模式3、采用成熟的库文件。前两种方式各模块的脚本被串在一起注入到DOM中，整个体系架构在这种模式下，可能...
2014-04-21 17:26:40
152
关于前端线上故障
先说明一点，对于故障的认识：任何事情都是团队的事情，不是一个人能承担的。仅仅是个人意识靠不住，需要团队合作来保证。 事故预防处理注重流程：先部署到测试环境，验证后，部署到线上；交叉测试代码质量控制：code review；相互review管理TC，明确校验点部署控制：定时部署，控制修改线上需求任务分级：轻重缓急自动回归… 事故处理：恢复时...
2014-04-11 11:32:42
358
原创 又到一周 周报时
先说个段子：公司有个技术牛人，某产品专员向他提单，牛人一看内容很扯，质问“你觉得这个需求有价值吗？”对方诚恳回答：“没价值，但是我总得写周报啊。”牛人想了一分钟，回答说好吧我帮你做，因为我也得写周报啊。 周报越写越流水账，怎么让周报有意义。形式不重要，是让别人了解自己工作的价值，也是自己一周的汇总思考。可以写什么呢， 结合部门的要什么、不要什么，周报里面体...
2014-04-11 11:06:19
126
原创 关于字体大小适配：根文档使用px，组件使用rem，文本元素使用em
rem是一个非常酷的CSS3属性，它相对于根元素<html>的字体大小适配。举一个非常简单的场景，要根据3种屏幕大小适配字体：通常这么实现：/* Document level adjustments */html { font-size: 17px;}@media (max-width: 900px) { html { font-size: 15...
2014-04-09 22:10:59
381
Bootstrap 源码解析
1、Bootstrap的作用域2、Bootstrap的类定义3、Bootstrap的插件定义4、Bootstrap的事件代理5、Bootstrap的对象数据缓存6、Bootstrap的防冲突7、作用域外如何使用Button类8、Bootstrap的单元测试 Bootstrap的作用域Bootstrap每个插件都定义在下面这段作用域代码中： +f...
2014-04-03 10:12:48
187
前端用研关注点
前端特别需要关注：1. 用户身份 (web\无线，TL\测试，系统长期用户\系统新手、技术能力)2. 交互视觉是否是用户喜欢的3. 界面分类排版合理 4. 页面功能、规则、流程描述清晰易懂 ，是否有看不懂的地方5. 改版内容有吸引力 6. 页面打开速度 7. 什么因素影响用户切换到旧版，出错时是否可被理解，是否知道接下来如何操作？8. 遇到的任何问题、意见或...
2014-04-02 17:29:36
134
原创 IIFE详解
介绍IIFE;IIFE的性能;使用IIFE的好处;IIFE最佳实践;jQuery优化; 在Bootstrap源码(具体请看《Bootstrap源码解析》)和其他jQuery插件经常看到如下的写法： +function ($) { }(window.jQuery); 这种写法称为：IIFE （Imdiately Invoked Function E...
2014-03-31 20:39:37
564
原创 K前端架构
先了解一个概念“软件架构”软件架构：软件系统的架构将系统描述为计算组件及组件之间的交互。（Mary Shaw）前端架构：和前端相关的软件架构。 前端架构 = 前端组件 + 组件之间的交互。 K的前端架构 K前端要解决的问题 1、Bootstrap Enhanced/Extend未覆盖的场景2、Bootstrap 修改成本高的部分3、不满...
2014-03-11 16:56:25
191
原创 PhantomJS
这里下载，如果下载不了到这个备份下载v1.9.7 配置环境变量 D:\Program Files\phantomjs-1.9.7-windows;
2014-02-20 11:41:16
99
原创 Chrome Console使用技巧
打开浏览器，按F12，选择console标签页；出现浏览器控制台。在Chrome下为了演示JS， 有时候我们需要将改变console的字体大小，将console的字体放大。方法是改变chrome自定义文件Custom.css的样式，路径在Windows: C:\Users\<user>\AppData\Local\Google\Chrome\User Data\Default\...
2013-12-19 11:12:42
522
原创 如何测试Javascript代码的垃圾回收
一个小技巧。首先打开最新版的chrome浏览器。 chrome能测试Javascript的内存堆（分配给js对象的内存）的状况，需要输入一段代码启动它： chrome --enable-memory-info 接着，创建一个HTML文件，如下：<script>var i = 0;setInterval(function(){ var be...
2013-12-19 11:11:40
323
原创 前端测试列表
WebDevCheckList这个网站提供了一个完整的测试清单，并在每一个测试项中提供了一些帮助信息和测试工具。测试后，你还可以在复选框中打勾，以避免遗漏。 最佳实践检测断掉的链接W3C link checkeriWebTool Broken Link Checker检测拼写验证各个浏览器BrowserShots.orgBrowserling.co...
2013-12-04 19:49:06
227
原创 IIFE
介绍IIFEIIFE的性能使用IIFE的好处IIFE最佳实践jQuery优化 在Bootstrap源码(具体请看《Bootstrap源码解析》)和其他jQuery插件经常看到如下的写法： +function ($) { }(window.jQuery); 这种写法称为：IIFE （Imdiately Invoked Function Expres...
2013-12-04 19:45:31
285
原创 轻松理解JS中的 this
this的8种使用场景 // 1. Basic thisfunction foo() { return this;}foo();// 2.(function(){ return this;})()(function(){ 'use strict'; return this;})()// 3. Object this...
2013-12-04 19:43:17
95
原创 Bootstrap 源码解析
1、Bootstrap的作用域2、Bootstrap的类定义3、Bootstrap的插件定义4、Bootstrap的事件代理5、Bootstrap的对象数据缓存6、Bootstrap的防冲突7、作用域外如何使用Button类8、Bootstrap的单元测试 Bootstrap的作用域Bootstrap每个插件都定义在下面这段作用域代码中： +f...
2013-12-04 19:43:03
498
原创 怎样低成本的实现网页在移动端的适配
问题：同一个网页，在web端显示良好，在移动端访问可读性非常差。目的：One page for all devices。网页在不同的设备打开，在不同的分辨率下打开时可读可用。网页能够兼容多个终端——而不是为每个终端做一个特定的版本。 也就是我们常说的如何构建“响应式网页设计”(responsive web design)。示例网站 250个响应式页面模板 解决方案涉...
2013-12-04 19:42:32
248
原创 Android界面设计基本知识
Android Design设备和显示触摸反馈度量和网格图像研究 1、Devices and Displays (设备和显示) 高中低3中分辨率。个人的经验是，设计图一般从高分辨开始做。 2、Touch Feedback (触摸反馈) 按钮的5个状态：normal pressed focused disabled disabled&fo...
2013-05-06 10:40:51
221
原创 IOS 界面设计基本知识（HIG）
控件文本框警告框&操作列表（action sheet）定制图标和图片指南 控件直接用IOS提供的控件，不需要自己画样式 控件名 图片 说明 交互 样式 使用场景 活动指示器 暗示任务或过程正在进行中在工具栏或主视图展示；任务进行中，出现；任务完成后，消失； 默认白色；可调整尺...
2012-12-25 13:58:38
412
原创 严格模式
1、介绍严格模式2、严格模式影响范围变量： var、delete、变量关键字对象： 只读属性、 对象字面量属性重复申明函数：参数重名、arguments对象、申明其他：this、eval、关键字...严格模式 ECMAScript 5 引入严格模式('strict mode')概念。通过严格模式，在函数内部选择进行较为严格的全局或局部的错误条件检测，使...
2012-12-24 14:20:00
288
原创 工程师，请优化你的代码
AjaxjQuery ready事件事件处理DOM操作 Ajax 大部分项目这么写： function getName(personid) { var dynamicData = {}; dynamicData["id"] = personID; $.ajax({ url: "getName.php", ...
2012-12-21 15:55:27
287
原创 常用Grunt任务
目的：自动化构建项目；完成压缩，编译，单元测试，代码检查以及打包发布的任务。生成线上调试source map，代码行统计。 常用Grunt任务:Cache ：cache-breaker、usemin + revCSS ：grunt-recess、less、cssmin、uncss、csslint(CSS检测)JS ：ugl...
2012-12-20 16:13:08
178
原创 结构化思考
|案|例：微软面试题：为什么井盖是○圆的。1、 井是圆的。2、 搬运方便，易于滚动。3、 安装方便，不用对角度。4、 安全，不会掉下去。5、 成本，材料利用率更大。6、 方形角容易磨损。 总结：观点+举例，从多角度看问题。|案|例：第二年微软面试题，为什么井盖是方的。1、 井是方的。（万能答案）2、 圆的井盖搬运方便，易于滚...
2012-11-30 17:24:26
239
原创 可用性设计-表单框架
设计原则最佳实践场景表单效率优先减少表单填写时间测试用户完成一个表单需要多少时间？避免用户在键盘和鼠标之间切换tab可切换tabIndex顺序一致表单名称符合期望保证清晰的阅读顺序1、标签使用简洁的自然语言，直观，易理解大小写一致优点缺点1、顶对齐标签"能减少填写时间；出于本地化原因，标签长度需要灵活多变"增加了垂直距离2、右对齐标签与顶对齐类似，但节约垂直屏幕空间3、...
2012-11-30 17:21:55
91
原创 可用性设计-菜单框架
1、完成相同或相近功能的按钮用Frame框起来，常用按钮要支持快捷方式。2、完成统一功能或任务的按钮放在集中位置，减少鼠标移动的距离。3、按功能将菜单划分局域块，用分隔线隔开，并要有功能说明或标题。4、界面要支持键盘自动浏览按钮功能，按tab键自动切换。5、常用功能在菜单中应当靠前，位置也应放在窗口上较醒目的位置。6、统一界面上的按钮数最好不要超过10个（这个数字按菜...
2012-11-30 16:53:38
249
原创 可用性设计-搜索框架
不少项目都有所搜结果页面，虽然说每个项目都有自己的一套需求，细节也各不相同，但我认为有些有些元素应该是任何结果页的界面中都需要的。以这些元素开始，然后根据情况稍加修改，就能得到一个很不错的页面。 1、在搜索结果中突出显示查询词。 2、在结果页面重述查询条件。 3、显示已找到的结果数量。 4、包含“前一个”和“后一个”按钮以及其余页面的...
2012-11-30 16:42:54
136
原创 2012前的设计书单
-----------2013-----------------《写给大家看的色彩数——设计配色基础》 -------2012----------------------------------------- 《Web界面设计》 【Keyword】设计模式、web设计【Note】强推！如果工作和web界面设计和实现相关，建议都看看。这本书介绍了设计的6大原则，并且结...
2012-11-20 19:19:15
78
原创 《蝙蝠侠归来》中的群体规律
《蝙蝠侠归来》中有一个场景： 一大群黑色蝙蝠一窝蜂地从水淹的隧道涌向纽约市中心。 电脑先制作一只蝙蝠，并赋予它一定的空间使之自动的扇动翅膀； 而后再复制成群。 之后，让每只蝙蝠独自在特定方向的场景屏幕上四处飞动， 但遵循几个规则：不要撞上其他的蝙蝠；跟上旁边的蝙蝠；不要离队太远。 —— 群体规律 (克雷格.雷诺兹) ...
2012-09-14 10:16:41
168
原创 Jekyll
Jekyll 静态网站生成器。这里有个QuickStart。 Ruby环境安装$ gem install jekyll 默认基于Liquid语法 ：输出标记 & 标签标记输出标记：由两个大括号分隔 {{ }}标签标记：由大括号 百分号分隔 {% %}注意 ：Angular框架中使用了相同的标记{{}}，也就是Angular表达...
2012-09-12 10:25:32
152
原创 《秘密》- 吸引力法则
"吸引力法则"来自于一本书：《秘密》。是一本励志书，主旨是：当你真心渴望某样东西时，全宇宙都会帮助你！ 吸引力法则来自于三条定律： 1、选择性记忆 当你不停的想一件事情的时候，大脑会自动屏蔽其他的信息，这个时候，你看到的，听到的，都是你心里想的东西。 举例：你打算买宝马7系，你就会发现怎么满大街跑的都是宝马7系，一上网就发现宝马7系的文章，或许刚好朋友的朋...
2012-08-27 11:06:31
406
CSS3：实现2个页面切换的平滑过渡效果
【示例地址】 做学习用， 1、速度放慢，大家可以看清移动过程，使用时可设置成0.2s； 2、为保证代码简洁，只写了webkit内核的效果，请用chrome打开查看。 【初始状态】 【拉开】 【页面前后顺序颠倒】 【收起】 <div class="translate3d"> <span class="f...
2012-06-14 10:51:44
4768
原创 jQuery .on() and .off() 命名空间
jQuery1.7开始，jQuery引入了全新的事件绑定机制，jQuery .on() 和 off() 两个函数统一处理事件绑定，也是jQuery触发DOM元素事件的最佳方法。有时候既要trigger手动触发事件，也要从DOM元素上解绑事件，比如:$('.item').on('click', doThisCoolThing);$('.item').on('click', doThisO...
2012-05-16 21:17:29
126
原创 单元测试
前端单元测试 a) 最近用JSCoverage给kelude组件库的test code做了覆盖率测试，举个栗子 ：URL这一项请填写“http://daily.kelude.taobao.net/doc/widget/tab-test-coverage/tests/tab-test.html”后回车；点击Summary可看到覆盖率。 有几个问...
2012-05-15 20:18:28
65
原创 《第五项修炼》节选
啤酒游戏零售商批发商制造商 不同的人处于相同的结构之中，倾向于产生性质类似的结构。当问题发生或绩效无法如愿达成的时候，通常我们会归罪与某些人或某些事情。然而我们的问题或危机，却常常是有我们所处系统中的结构所造成， 而不是由于外部的力量或个人的错误。 有效的创意常出自新的思考方式 在人类系统中，常隐藏着更有效的创意，但是我们却不曾发觉，因为只 专注于自...
2012-05-14 20:55:44
185
不懂开发的测试没有太大的前途zz
不懂开发的测试没有太大的前途 不要把注意力过多地花费在测试方法上，而更应该注重提高自己的个人能力，尤其是编程，软件开发的能力。 很多人觉得跳槽，换个工作自己就能更好的发展测试技术，这也是有误区的。说句实话，个人发展本质上还是个人的问题-------------------------------------------------------------------...
2012-05-09 09:57:47
203
原创 有效的利用清晨时间
早起已经坚持快一年了，前段时间做下回顾，跟大家分享一些早起的心得：睡前要做的二件事：准备一杯凉开水放在床头，刚起床的时候喝掉，对你的健康有好处。临睡前做好准备和规划，准备好第二天早起要做的事情，一起床就可以去做。刚起床时，可以通过做些简单的运动让自己精神起来：1、可以在床上转动脚腕，顺时针10下，逆时针10下，然后会让大脑变得清醒起来。2、直接冷水洗脸，能增强身体...
2012-05-09 09:49:03
114
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人