猫哥_kaiye | 编程笔记

摘要： 前端开发过程中会经常和后台沟通一些接口的联调，做拍拍首页项目尤其频繁。因为涉及到跨域问题，所以数据基本都是JSONP格式。市面上JSON数据格式化工具挺多，却一直没有找到一款JSONP的，于是自己动手做了这个JSONP Viewer的chrome插件。十分感谢姚小M同学设计的icon～目前提交的为1.1.0版本，包含特性：当前页面为JSON或JSONP数据文件时，进行代码格式化当前页面不为数据文件时，询问是否需要打开工具页工具页支持手工输入数据，进行数据分析对象属性默认使用字母排序，便于查看鼠标移到单条数据上时，出现对应属性引用值的title提示数组数据展示下标值，折叠后可查看数组长度遇到个小 阅读全文

摘要： 今天伟大的交互设计师高高问到表单select控件能否限制最大宽度，于是我随手写了个用max-width + IE6 expression的实现方案（写完DEMO才发现IE7不支持select的max-width）。最近花花群里也有人问expression性能优化的问题，这里就一并说下。Yslow、PageSpeed以及各类性能优化的原则中通常都会包含一条“Avoid CSS Expressions”，关于这条优化原则的成因与解决方案，Steve Souders早在N年前就写有专题详细阐述过。当我第一次看到DEMO中的expression counter飞速增长时，内心十分震撼，我发现自己津津乐 阅读全文

摘要： 在今天的小组分享会上，我抛出了一个“后IE6时代”的想法，提醒各位前端开发同学为即将到来的前端新时代做足充分的准备，重新思考我们的核心竞争力与价值。这些想法源于红衣教主的一条微博，以及jacob校长翻译的《推动web向前发展》。相关的感悟没有在PPT中提及，这里一并分享交流出来。1、设计原理：Humans First, Machines Second.工具是为人服务的，人类制造和使用工具是为了更好的生活。从这条原理可以引申出一条类似的重要结论：工作是为了生活，因此生活第一，工作第二。乔老板也说要学会享受生活。2、用户体验设计的终极目的是为了提高效率看看工业革命最伟大的发明，神奇的洗衣机。洗衣机 阅读全文

摘要： 最近想在QQ弹窗每日精选上做个比较炫的角标动画，于是乎发现了这么些有意思的东东。CSS版最先想到的是做个纯CSS版的，原理也简单：a标签默认一张背景图，a:hover后换成另一张动态gif图。这种方法的特点是：设计成本中，兼容性中，性能影响中。我们期望的效果是：鼠标mouseover时，播放一遍动画，mouseout时恢复原状，再次mouseover时要重头播放一遍动画。比较搞笑的是原生IE6/7上可以满足要求（可能因为没有做优化，每次hover都会重新渲染gif，好在没有发起新的请求）。但其他浏览器却缓存了hover的状态，不管是播放一次的gif，还是循环播放的gif，都无法完美实现这样的效 阅读全文

摘要： CSS中写中文字符可能会导致样式失效，所以一般在写到font-family的时候会做个转码，这样通篇都是ASCII字符的CSS随便设置个啥@charset都能解析正常。例如：font-family:宋体; /* 做个转码写成： */font-family:\5B8B\4F53;这个\5B8B\4F53咋弄的？简单的方法，打开firebug，在控制台输入“宋体”，然后会出来一个报错提示：ReferenceError: \u5B8B\u4F53 is not defined，其中的“\u5B8B\u4F53”就是JS中的“宋体”字符串unicode标准化之后的表示。在CSS中，去掉中间的小u就好了 阅读全文

摘要： 先看DEMO，在chrome、safari、firefox下，页面显现正常的绿色背景，而在IE下，页面背景为白色。经过分析引起的原因是：1、HTML页面编码与CSS编码不同（DEMO中HTML为gbk，CSS为utf-8）2、CSS文件中未指定@charset头声明，导致IE默认使用页面编码来解码CSS文件（DEMO中IE浏览器使用gbk来解码一个utf-8的CSS文件）3、中文注释中的汉字为奇数个数时，会与结尾的“*/”组合成新的合法字符，导致注释未能正确关闭，造成紧跟其后的样式被自动注释，从而引起样式失效。例如，该DEMO中CSS代码为/*叶落花*/body{background-colo 阅读全文

摘要： 这篇Blog将要讨论，在CSS的className中使用连字符“-”还是使用下划线“_”作为分隔符更适合？在切入主题之前，先看看Google在Webmaster Tools中URL structure章节中所说的一段话：Consider using punctuation in your URLs. The URL http://www.example.com/green-dress.html is much more useful to us than http://www.example.com/greendress.html. We recommend that you use hyph 阅读全文

摘要： 从上篇Blog发表至今已逾半年，这段时间我成功的考到了驾照，并与人成功的作废了三个创业项目。这让我不禁想起弟弟在QQ说过的一段话：“人生最重要的不是所在的位置，而是所朝的方向。同样是个B，你一路向北能变成NB，撞破南墙不回头，就只能当SB。”而这一次，我却一直南下，从杭州到了深圳。那天飞机刚到深圳，蚂蚱问我对深圳印象如何。当时我在机场大巴上回了一条短信：“拖拉机与宝马齐驱”，这是车子在经过福永一个红绿灯的时候我亲眼目睹的场景。车站巡逻的城市保安，白石洲类的城中村，人造的欢乐谷，超现代化的海岸城通道。深圳就是这么一个城市，快速的发展节奏，传统与现代，文明与野蛮的冲击即刻被放大。深圳之于杭州，正如 阅读全文

摘要： 在twitter上看到 @Fenng 提到“国内分享velocity的不多”，忽然想起自己在支付宝用velocity开发了两年，和服务端开发同学也常为这个模板层的归属问题纠结不休。这也是我在淘宝上买这件velocity主题T恤的原因，上次去红京鱼吃饭，工友们对它表示了很大的兴趣^_^直入话题，把自己这两年的velocity开发经验的精华部分分享出来吧，相信足以应对前端模板开发的日常工作。这里我准备了一个VM版的，有运行环境的同学可以放上去跑起来看看。问：遇到vm模板开发的问题一般怎么解决？首先官方手册PDF还是要收藏一份，英文的看不了，就去google上搜份中文手册看。手册上没有提及的只有去g 阅读全文

摘要： 最近在学习PHP & Python，@hongqn 在他的《Python 于Web 2.0网站的应用》中提到了Python的哲学，我想这个应该就是我一直在寻找的吧。于是花了一下午在优酷上看完了《Python.Django视频教程-台湾辅仁大》的视频教程专辑，开始了写个Python小游戏的计划。系统是Mac OS X Snow Leopard，结果装了个Xcode 3.1，啥东东都编译不了，很多python setup.py install都安装不通过。后来才知道雪豹必须装Xcode3.2+才行。以下是我边写边学的python计算24点小游戏。求解24点算法那块我实在是没啥头绪，就这么悲 阅读全文