<?xml version="1.0" encoding="UTF-8"?><rss version="0.92">
<channel>
	<title>疯狂的叶</title>
	<link>http://www.crazyleaves.com</link>
	<description>每天学习一点，每天进步一点，终将天下无敌</description>
	<lastBuildDate>Mon, 20 Feb 2012 06:38:21 +0000</lastBuildDate>
	<docs>http://backend.userland.com/rss092</docs>
	<language>en</language>
	<!-- generator="WordPress/3.2.1" -->

	<item>
		<title>如何提高前端的工作效率</title>
		<description><![CDATA[工欲善其事，必先利其器。 最近换了个犀利的VIM编辑器，号称是编辑器里的神器，堪比诸葛连弩。用了个把星期了，使用起来虽然还是很不适应，但是真的很爽。和之前用的dw比起来工作效率相对来说已经有了很大的提高。 总结了一下我能想到的可以提高自己的工作效率的几个方面： 1、学习新知识， 新知识包括知识层面上的，当然，还可以是工具层面上的： css3，html5这些新技术还是必须要学习的，圆角，渐变，阴影等，都可以很快速的完成，可以节省很多时间。 工具层面上么，比如我现在使用的vim，又比如zencoding（实用简单的代码自动化工具）。 2、凡事预则立，不预则废 刚拿到一个项目，千万不能拿过来就做，这样看起来很抓紧，其实会在后面花费更多的时间去修改前面没有想到的问题。 我们在项目开始之前，必须搞清楚： 项目需求是什么？ 开发周期有多久？ 每个阶段该完成多少内容？ 将项目拆分，合理的安排各个阶段的任务，对整个项目的代码结构做一些合理分布，将页面模块化，这样才能更快的更好的去修改 3、 减少切换 其实人应该有3只手的，2只控制键盘，一只控制鼠标。干起活来，肯定能够迅猛如飞。在工作的时候，右手离开键盘到鼠标，再回来，这个动作在整个过程中得重复很多遍，相对的浪费了很多时间。现在，最现实的改变是，把双手留在键盘上。避免挪来挪去的浪费时间。 在这里就更要推荐vim了，传说vim的犀利之处就是，写一万行代码，双手不离开键盘一下！！这个觉得是真的！关于vim的教程么。。等我以后用熟了，再来分享。 先阶段么，能够用“快捷键”搞定的一律用“快捷键”，再找一些自动化、批处理的插件么。 合理布局一下桌面上大大小小的窗口。 在么，顺便加一台显示器，弄个双屏的，这边写代码，那边看效果，真心很爽得。 每节省一秒钟，就是一秒钟。 每一个“切换”步骤的小优化，累积起来，都是效率的大提升。 4、清理干扰 要让同事们了解自己的开发习惯：不着急的需求，请发邮件。 强调一次没用就强调第二次。 干掉3分钟跑过来一趟，打扰你的人群。 闭掉1分钟n++条信息的QQ群。 保持一种良好的，不被打断的编码状态。 总结 做前端的同学，除了要处处考虑各种版本浏览器的兼容性这个脑力劳动之外，最大的体力劳动就是，在代码视图重复的输入代码了。由于有死机造成代码丢失的阴影，我现在习惯性狂按ctrl+s，（当然了，自从改用了vim,我已经不按ctrl+s了，而改用:w来保存了。。一样的其实。。。）估计这样长期下去除了椎间盘突出，这两个键也突出了 总而言之，言而总之。。。 为了让这种痛苦少一点。。就提高效率吧。。]]></description>
		<link>http://www.crazyleaves.com/%e5%a6%82%e4%bd%95%e6%8f%90%e9%ab%98%e5%89%8d%e7%ab%af%e7%9a%84%e5%b7%a5%e4%bd%9c%e6%95%88%e7%8e%87/</link>
			</item>
	<item>
		<title>template模板的应用</title>
		<description><![CDATA[&#160;&#160;&#160;&#160;在很久之前的项目中就用过了template的方法，不过当时只是依样画葫芦照着借用的，最近在学习过程中又看到了这个方法，就好好学习一下了。 &#160;&#160;&#160;&#160;我们平时JavaScript进行前端开发的时候，做的最多的事情，除了操作dom以外，就是围绕json数据的操作了。而数据操作最麻烦的就是用json生成dom对象了，通常我们会写一堆for,if之类的代码来支持data向view的转化, 这样的代码一般会像： html代码 &#60;ul id=&#34;list&#34;&#62; &#60;/ul&#62; JS代码 var data = [{name: 'Claire', sex: 'female', age: 18, flag: true}, {name: 'Mark', sex: 'male', age: 25, flag: true}, {name: 'Dennis', sex: 'male', age: 32, flag: false}, {name: 'Tracy', sex: 'female', age: 23, flag: true}, {name: 'Wane', sex: 'male', age: 18, flag: true}]; var html = ''; [...]]]></description>
		<link>http://www.crazyleaves.com/template%e6%a8%a1%e6%9d%bf%e7%9a%84%e5%ba%94%e7%94%a8/</link>
			</item>
	<item>
		<title>全兼容渐变圆角阴影</title>
		<description><![CDATA[看新闻得知微软在2014年将完全结束对xp系统的技术支持，那也就是说，以前的xp+office2003+ie6的组合将会很大程度的被减少，那基本上就是win7+office2010+ie9的全新组合，这是好事。。让万恶的ie6去****吧。。 额，学习新的技术让自己不落伍！ css3的技巧，代码就不上了，直接上demo，能看懂的人肯定知道怎么去看源码！！]]></description>
		<link>http://www.crazyleaves.com/%e5%85%a8%e5%85%bc%e5%ae%b9%e6%b8%90%e5%8f%98%e5%9c%86%e8%a7%92%e9%98%b4%e5%bd%b1/</link>
			</item>
	<item>
		<title>漫话产品设计【转】</title>
		<description><![CDATA[很有意思的一些漫画加思考 转自：这里 1.鱼饵就应当符合鱼儿的胃口，而不是钓鱼者 第一次看到这幅漫画就笑了：画的不就是做产品的我们嘛~ 花了不少成本、人力、时间，把自己看起来都颇诱人的鱼饵（x产品x功能）抛到鱼塘（网站）里，满心欢喜地守着盼着等着念着：“鱼儿鱼儿快上钩~”鱼儿们来到网站，先是看到一个庞然大物，一晕；然后满世界找熟悉的功能，未遂，再晕；好不容易找对地儿，发现鱼饵味道变了，三晕…… 反省：核心需求的满足，永远是最好的饵料啊~ &#160; 2.踏着别人的脚步前进，超越就无从谈起 “超越”是一个我们都很迷恋的词。但是它后面藏着很多疑问：为什么要超越？怎样算超越？要在哪些方面超越？现在距离有多少？大家的起跑线、方向、耐力、步长、频率一样吗？怎样超越？投入多少成本去超越？…… 好了，如果顺利回答完上面的问题，我们往往发现，“超越”其实只是我们嘴巴迷恋的词，而“跟随”才是我们脑袋和腿脚（不自觉地）迷恋的词。正是因为“有距离”，所以欲望很强烈，心情很急切，脚步很错乱。“跟随”就显得很靠谱：直接跨越摸索、纠结阶段，直接节约思考、打磨的时间，直接规避失败的风险，何乐而不为呢？但是，跟随的结果最多是不过不失，大家都跟随了，整个市场的产品也同质化了。我们表面上做了不少事情，将产品改头换面更新换代，但是，实际上属于自己的东西越来越少，产品的个性越来越不鲜明，用户只好在审美疲劳中放弃选择。 反省：寄望通过别人的分享和经验得到提高，将永远没有自己核心的东西 &#160; &#160; 3.找解决方案要比纠结原因的优先级高 呱呱坠地就流芳百世的产品，恐怕是百年一遇的。绝大多数的产品被设计出来后，都会经历一个生命周期。尤其在生命周期曲线的上升期和下降期，我们尤其会纠结于产品停滞不前、不受欢迎甚至是被千夫所指的阶段。这个时候，如上图，大概会有几种情况：a.在汪洋中没有方向，在一小片区域打转，自我感觉良好；b.大家逐渐发现各种问题，前后不靠岸，于是开始相互推诿和指责  c.大家坐到一起，发现问题有ABCD，解决方案是1234，分工是甲做指南针、乙补洞、丙掌舵、丁划桨…… 反省：没有目标，任何风向都是不顺的；不提出问题，也无法寻找到原因；办法总比问题多，关键是想不想，做不做。 &#160; &#160; 4.真正的创新只有在经历过擦肩而过后才能实现 创新是产品设计中不可缺少的元素。但它总是披着“灵光一现”的隐形衣，所以我们总觉得它可遇不可求。但是为什么有人遇到了，有人求之却不得？这里有歪理一枚：“遇”字包含这样的意思，两个物体要相遇，前提是至少有一个物体在移动。如果目标是静止不动的，当然只有我们去移动，才有与其相遇的可能；当然，我们的目标也可能是移动的，但是相遇往往只是电光火石的一瞬间，你有把握能捕捉到吗？所以说，“机会只光顾有准备的人”…… 反省：实践和思考的反复迭代，是创新的催化剂。 &#160; &#160; 5.过多的会议是一个糟糕的组织明显的标志 这一点，估计只需意会，不需言传了。用会议代替流程和规范，用讨论代替执行，推卸责任，陷入细节，导致时间成本高筑，责权不明晰，奖惩不分明……在产品设计的过程中，我们或多或少都能体会到。 反省：绅士的演讲应该像女人的裙子，越短越好，会议也是。当然前提是问题能够解决。 &#160; &#160;]]></description>
		<link>http://www.crazyleaves.com/%e6%bc%ab%e8%af%9d%e4%ba%a7%e5%93%81%e8%ae%be%e8%ae%a1%e3%80%90%e8%bd%ac%e3%80%91/</link>
			</item>
	<item>
		<title>WEB前端优化的体会</title>
		<description><![CDATA[前端开发在很多人眼里很简单，很多人都会说不就是把效果图变成网页嘛，哪里需要那么多的时间，一点技术含量都没有。确实html页面没有js那么多复杂的交互，也不需要和后台数据打交道，但并不能代表就没有技术含量，也不是人人都能做好的。简单的html，我想稍微学过一点的人，都能写出来，但是，页面结构好坏直接会影响到css代码的质量，也会影响js和后台的开发，还会影响到以后功能的扩展和代码的优化。 最近一个朋友说，他们网站访问很卡，页面访问速度很慢，让我看一下是否能够优化，我也尝试着想去做一下网站的整站优化，所有，就先去看了一下他们网站。 yshow的得分数据： &#160; dynaTrace 的得分数据： 可以说，两项前端性能测试都不算太过关，从这两个测试里，再看他们网站的代码，发现问题都是一些常规的企业站所存在的普遍问题： 1、代码结构混乱，div和table的交替使用，标签语义化比较差 2、css代码都各自为战，一个页面，一堆css，很多可以公用的css模块没有能够很好的提取出来 3、背景图片没有能够对图片进行合并，导致页面背景图片的请求次数过多 4、css和js统统丢在页头 还有一些js的问题，既然发现了问题，我就着手写代码了。。。其中过程省略一万个字！ 真的，连着几个晚上黑灯瞎火熬夜敲代码的日子，怎一个苦字了得。。。不过，敲代码的确很有成就感，尤其是在最终结果出来的时候，本地测试起码能够让两项测试的分数都保持在85分以上，这个还是很强大的，很期待他们网站改版之后的网站访问速度如何。 对网站的图片采用了一些时下流行的图片延迟的加载，瀑布流等效果，感觉不错。 前端的学习，路还很遥远。。。对我来说。。这才是刚开始。。。 谨遵雅虎的十三条军规大部往前走！ 1、减少http请求；（背景图能合并拼合的尽量拼合） 2、运用CDN网络；（这个小网站就算了吧） 3、给头部一个过期日期； 4、级服务器采用Gzip压缩；（同样小网站还是也算了吧） 5、把CSS放在页头； 6、把脚本移到底部； 7、禁止CSS表达式写法；（能不用就不用） 8、引用外部的JS和CSS文件；（这个就得关系到网站的架构上的事情了。写在页面上，能加快访问速度，引用外部的，能够被缓存，具体看情况） 9、减少DNS查找； 10、给JS文件瘦身； 11、禁止重定向； 12、删除重复的脚本文件； 13、ETags 配置文件；（不懂。。。） &#160; ——————————————————————————  分割线  ————————————————————————————————————— 改版后网站上线了 dynaTrace分数：83分 &#160; yshow分数：77分 &#160; 从两个性能测试的分析上来看，cdn上的丢分比较多，诶。。。yshow的分数还是偏低，我是感觉没什么办法了，不过相比之前来说，已经好很多了。。。 &#160; 继续努力。。。 &#160;]]></description>
		<link>http://www.crazyleaves.com/web%e5%89%8d%e7%ab%af%e4%bc%98%e5%8c%96%e7%9a%84%e4%bd%93%e4%bc%9a/</link>
			</item>
	<item>
		<title>纯css的显示隐藏</title>
		<description><![CDATA[继续学习中。。。原来显示隐藏完全不用js啊。。。我还一直很单纯的以为只能用js才能去实现。在csdn上看到有人问一个样式问题，拉过来看了一下，原来。。原来显示隐藏不用js啊。。。再回想起以前找到的一个效果，找出来看了一下，不多说了，来看代码： CSS部分： img{border: none; padding: 0; margin:0} .pic{position:relative;top:10px;left:10px; width:100px; height:100px; vertical-align: top} .pic a { display:block; width:100px; height:30px; line-height:30px} .pic a .large{position:absolute;height:0;width:0; display:none } .pic a:hover{display:block; background:#CCC; text-decoration:none; color:#FFF; } .pic a:hover .large{position:absolute;width:100px;height:30px;left:0px; bottom:0; display:block; background:#a05de2; text-align:center; overflow:hidden} HTML部分： &#60;div class=&#34;pic&#34;&#62; &#60;a href=&#34;http://blog.163.com/gmr_2004/blog/#&#34;&#62; &#60;img src=&#34;http://img02.taobaocdn.com/sns/exchange/i2/T1m7OBXjXCXXbJE2E1_041142.jpg_b.jpg&#34; width=&#34;100&#34; height=&#34;100&#34;&#62; &#60;span class=&#34;large&#34;&#62;精挑细选&#60;/span&#62; &#60;/a&#62; &#60;/div&#62; 伪类无敌啊！ 再看接下来的一个DEMO： 继续学习ing！]]></description>
		<link>http://www.crazyleaves.com/%e7%ba%afcss%e7%9a%84%e6%98%be%e7%a4%ba%e9%9a%90%e8%97%8f/</link>
			</item>
	<item>
		<title>CSS多类选择器</title>
		<description><![CDATA[写样式也写了两年了，发现自己以前还真是不思进取啊，很多东西只要够用就好了，根本不会去深入学习研究，相当悲剧。 这次碰到一个选择器的问题，就把相关知识拉出来看一下了。 css选择器的写法 标签名选择器，如：p{}，即直接使用HTML标签作为选择器。 1、类选择器，如.polaris{}。 2、ID选择器，如#polaris{}。 3、后代选择器，如.polaris span img{}，后代选择器实际上是使用多个选择器加上中间的空格来找到具体的要控制标签。 4、群组选择器，如div,span,img{}，群组选择器实际上是对CSS的一种简化写法，只不过把有相同定义的不同选择器放在一起，省了很多代码。 5、CSS 多类选择器。这个我以前还真的从来没用过，╮(╯_╰)╭，所以这次一用就出问题。。。看下面的代码 &#60;style&#62; .controla,.controlb{ width:100px; height:100px; } .d.controla{ background:red; } .d.controlb{ background:green; } &#60;/style&#62; &#60;div class=&#34; controla d &#34;&#62;&#60;/div&#62; &#60;div class=&#34; controlb d &#34;&#62;&#60;/div&#62; 提示：你可以先修改部分代码再运行。 在ie6下，如果 .d.controla 和 .d.controlb 反过来写变成 .controla.d 和 .controlb.d。就会出一个诡异的问题。诶，最后在在w3school里的某个页面的最下方，我找到了答案：重要事项：在 IE7 之前的版本中，不同平台的 Internet Explorer 都不能正确地处理多类选择器。 没办法，bug就是bug了，下次注意一点，不要写错就好了。。。]]></description>
		<link>http://www.crazyleaves.com/css%e5%a4%9a%e7%b1%bb%e9%80%89%e6%8b%a9%e5%99%a8/</link>
			</item>
	<item>
		<title>jsonp的学习</title>
		<description><![CDATA[在很久之前。。。在搞淘宝一个项目的时候就使用了jsonp格式，当时也是一知半解，套用了别人的现成代码就算完工了，现在不行了，都是这样的项目，不学习清楚不行啊。。。查阅了很多相关知识。。。稍微对这个有一点了解了。 1、淘宝请求同源策略，意思是用户访问的页面和页面中 ajax 请求的路径如果不在同一个域下，则无法通信！注意主域相同子域不同也算跨域，而且不能用 document.domain = “taobao.com”; 这种形式来弥补。跨域这个问题很悲剧的，相当的。 2、返回 json 的格式约定 一般 ajax 请求都返回 json 格式的数据，以便 js 解析 json 格式需要特别注意的几点是： 每一个 key 都要使用双引号 ”” 包裹，如 { “foo”: “bar” } 最后一个字段后面不能留有逗号 每一个 value，如果不是 int/float/boolean 类型的，则要使用引号包裹 对于 boolean 类型的，可以使用 1 代表 true，0 代表 false，以免各种问题 3、如果跨域使得 ajax 无法实现，那么可以考虑使用 jsonp 的方式 所谓 jsonp 就是 js 去请求另一个 js，插入到当前页面，这样，不管这个被请求的 js 来自哪个域，其数据都是可用的，因为被加入到了本页 [...]]]></description>
		<link>http://www.crazyleaves.com/jsonp%e7%9a%84%e5%ad%a6%e4%b9%a0/</link>
			</item>
	<item>
		<title>微博与SNS有什么不同</title>
		<description><![CDATA[学习要点: 1.名字解释 微博：微博，即微博客（MicroBlog）的简称，是一个基于用户关系的信息分享、传播以及获取平台，用户可以通过WEB、WAP以及各种客户端组件个人社区，以140字左右的文字更新信息，并实现即时分享。主要特点是：便捷性、背对脸、原创性、新闻发生。 门户微博: 四大门户网站新浪、腾讯、搜狐和网易 门户网站：门户（portal），原意是指正门、入口。现多用于互联网的门户网站和企业应用系统的门户系统。所谓门户网站，是指提供某类综合性互联网信息资源并提供有关信息服务的应用系统。门户网站最初提供搜索引擎、目录服务。 垂直网站：垂直网站注意力集中在某些特定的领域或某种特定的需求，提供有关这个领域或需求的全部深度信息和相关服务，作为互连网的亮点，垂直网站正引起越来越多人的关注。 SNS网站：Social Network Sites（即社交网站）。以人人网（校内网）、开心网、白社会SNS平台为代表。 2. 微博与SNS区别 随着微博与SNS用户黏性以及忠诚度的不断提高，传统意义上的受众正在逐渐消失，网络使每个人不再只有接受的感觉，社会化网络时代也正式到来。根据DCCI发布的最新数据显示，如今微博用户每天都使用的比例达到41.7%，2-3天使用一次的用户达到26.9%，而SNS每天都使用的用户比例为35.7%，2-3天使用一次的比例为20.8%。因此必须承认，微博必将成为继SNS之后，社会化网络的第二次革命；同时更加准确的了解微博以及SNS用户的习惯特征，将能够更好实现交流分享以及消费决策的过程。 u  使用目的：微博用户使用微博的目的主要为记录自己心情、寻找兴趣相同的群体、讨论共同感兴趣的话题等，用户将微博更多是作为一个自媒体即时信息的交流平台。SNS用户则主要使用SNS平台联系老同学，拓展新朋友等，将SNS媒体作为一个主要的人际交友网络。 u  产品应用偏好功能：微博用户倾向于关注热门信息，并对感兴趣的信息进行转发，形成以人为中心的自媒体（见图表）。SNS用户则倾向于个人展示。   u  微博的媒体特性导致其更依赖于内容以及内容聚集平台，而门户恰恰具有媒体内容方面的先天优势。因此，在DCCI统计微博网站的覆盖率时，综合门户微博对微博用户的覆盖率高达92.3%，而垂直类微博网站的覆盖率仅为32.7%；相比较而言，SNS则以垂直社区网站居多，垂直SNS网站对SNS用户的覆盖率为95.6%，门户网络对SNS用户的覆盖率仅为49.5%。 u  营销层面：微博用户关注更多的前5名均为展示类广告（包括横幅式广告、富媒体广告、文字式广告、有声动画、静态动画），而SNS用户更关注的广告主要形式为植入广告 3、扩展    爆米花网&#8212;-垂直网站    爆米花网是于二○○六年正式推出的视频分享新媒体网站，一经推出即取得迅猛发展，迅速汇聚了庞大数量的视频内容、用户和访问量，成为中国最大最好玩的视频分享网站，其创新的媒体传播及经营模式在业界广受好评。爆米花网先后被互联网协会评选为中国互联网产业创新50强公司、WEB2.0网站100佳，并被权威第三方咨询机构评为十大视频网站。【】    ]]></description>
		<link>http://www.crazyleaves.com/%e5%be%ae%e5%8d%9a%e4%b8%8esns%e6%9c%89%e4%bb%80%e4%b9%88%e4%b8%8d%e5%90%8c/</link>
			</item>
</channel>
</rss>

