面向前端模块化的web端设计准则
一个了解前端页面实现的设计师做出的设计可以让前端工程师事半功倍，而一个不了解前端实现基本知识的设计师的作品，在实际的操作中会让前端工程师叫苦不迭。所以我写这篇博客是想讲一下一些前端实现的流程和思想，其中有很大一部分是建立在一个前提之下的，那就是设计师的设计稿考虑到了一些模块化，可复用的思想，并且是按这些标准来进行设计的。 ...
Angular源码分析:$q
概述 Augular中的$q服务提供了Promise的实现，这个服务叫做“q”是因为它是Kris Kowal’s Q的一种植入。 从Augular中$q服务的文档中可以了解到，这个服务有两种用法，一种在某种程度上和ES6的Promise规范相似，而另一种则和Q以及jQuery的Deferred接口类似。 ...
实战之IE兼容常见问题
最近因为在实习，所以做的东西要测试，做了IE8的兼容，对IE8的常见CSS兼容问题有了一点认识，在这里总结一下。 Html5标签问题 IE8不支持Html5的语义化新标签，<header>,<nav>,<footer>之类。对此Google出了一个html5shiv.js，来实现这些标签。 这个html5shiv.js的原理就是使用document.createElement()这个dom方法来动态创建一个html元素对象。html5shiv.js中处理了IE在这个方法上的一些问题（某些元素动态加入的属性不管用），还提供了api，以及基础的CSS，使得元素在默认的display属性为block。 RGBA支持问题 IE8不支持rgba这种颜色的表示方式，但我们如果在背景色使用rgba的话，还是有替代方案的： //IE8下 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#19fff fff,endColorstr=#19ffffff); 这句代码其实是用来实现渐变的，不过我们把startColor和endColor设成一样的便可以用来设置纯色背景了。 startColor的后六位便是正常的十六进制颜色代码，而前两位是alpha通道，对应关系如下： 透明度 代码 0.1 19 0.2 33 0.3 4C 0.4 66 0.5 7F 0.6 99 0.7 B2 0.8 C8 0.9 E5 CSS3支持 这部分是硬伤，media query有成熟的方案支持，但是像border-radius这种虽也有办法可以实现，但是太过于麻烦。我们毕竟得move on，不能太过拘泥，有些时候平稳退化，优雅降级就可以了。 To Be Contiued···
最佳实践之多个高度不定水平实体垂直居中
如何快速并且健壮地实现高度不一定的实体的居中呢？ vertical-align显然是一种办法。这个元素从语义上来看就是用来实现垂直对齐的。要理解vertical-align，首先我们得了解几个概念，inline boxes, line box, 以及baseline。 inline boxes是行内元素构成的行内box，而line box则是由一行内所有的inline boxes构成的box，比如： <div> <span>我是inline box</span> 我是匿名inline box </div> 除了display为inline或者inline-block的标签会形成inline box，行内文本也会形成匿名的inline box。 一行所有的inline boxes构成匿名的line box，其中inline box中高度最高的那个的高度便是line box的高度，由此撑起了整行的高度。（这涉及到line-height方面的知识） 而关于baseline，则是文字在排版时顶部与底部中间的基线，如果是行内文本，具体位置随字体不同而不同，一般都在中线以下的位置。具体的需要参考西文字体学（Typography）(Jobs在大学旁听的课程之一，你值得拥有) 而line—height其实就是两条基线之间的距离。 ...
Web Animation Using Javascript part one
##第二章：Velocity.js动画## 在这一章，你将学到由Velocity.js提供的特性，指令，和选项。如果你熟悉基于jQuery的动画，那么你已经知道如何使用Velocity.js了；它的功能几乎和jQuery的$.animate()函数一模一样。 不过抛开你现有的知识，本章中对特性的井井有条的分类将会向你介绍动画引擎行为的细微差别。掌握这些细微差别将会帮助你从新手成为专业人士。即使你已经对jQuery动画和Velocity.js相当熟悉了，也给自己一个机会，快速浏览本章。你必定会发现一些你没意识到的可行之事。 ###JavaScript动画库类型### JavaScript动画库有很多类型。有些在浏览器中重现物理接触效果。有些使WebGL和Canvas动画更容易维护。有些专注于SVG动画。有些改善了UI动画————最后这种类型正是本书的重点。 两种广受欢迎的UI动画库是GSAP和Velocity。你将在本书中使用Velocity，因为它在MIT许可下是免费的，外加它拥有极其强大的功能以供编写整洁且富有表现力的动画代码。Velocity被很多知名站点使用，包括Tumblr，Gap，还有Scribd。 噢，而且它是由本书的作者创造的！ ###安装jQuery和Velocity### 你可以从jQuery.com下载jQuery，从VelosityJS.org下载Velosity。在你的页面上使用它们——和任何JavaScript库一样——简单地把指向相应库文件的<script> </script> 标签放在你页面的</body>标签之前。如果你想链接预部署版本的库文件（而不是你电脑上的本地拷贝），你的代码看起来可能是这样： <html> <head>My Page</head> <body> My content. <script src=”//code.jquery.com/jquery-2.1.1.min.js”> </script> <script src=”//cdn.jsdelivr.net/velocity/1.1.0/ velocity.min.js”> </script> </body> </html> 当一起使用jQuery和Velocity时，在Velocity前引入jQuery。 这就对了！现在你已经准备好了。 ##使用Velocity:基础## 为了熟悉Velocity，我们将从基本的组件开始：参数，属性，值，和链式调用。因为jQuery几乎无所不在，看看Velocity和jQuery的关系也是有必要的。 ###Velocity和jQuery### Velocity可以独立于jQuery运行，但是二者可以一起使用。一般我们推荐这么做来获得jQuery的链式调用能力：当你已经使用jQuery预选择了一个元素，你可以调用.velocity()来拓展它从而施加动画效果： // 把jQuery元素对象赋值给一个变量 var $div = $(“div”); // 使用Velocity对元素施加动画 $div.velocity({ opacity: 0 }); 这种语法和jQuery自带的animate函数一模一样： $div.animate({ opacity: 0 }); 本书所有的例子都使用Velocity和jQuery的结合，因此可以使用这种语法。 ###参数### Velocity接收多个参数。第一个参数是一个映射CSS属性到其最终值的对象。属性及其接收值的类型直接与CSS中使用的相对应（如果你不熟悉基础的CSS属性，在读这段代码之前读一本HTML和CSS的介绍性书籍）： // 对元素施加动画使width变为“500px”，opacity变为1。 $element.velocity({ width: “500px”, opacity: 1 }); – Tip 在JavaScript中，如果你将要提供一个包含字母（而不是只有整数）的属性值，把属性值放在引号中。 你可以传递一个指定了动画选项的对象作为第二个参数。 $element.velocity({ width: “500px”, opacity: 1 }, { duration: 400, easing: “swing” }); 这里也有一个简写的参数语法：你可以使用逗号分隔语法，而不是传递一个包含选项的对象作为第二个参数。这要求以任何逗号分隔的顺序列出动画时长的值（接收一个整数），缓动模式（一个字符串），以及回调函数（一个函数）。（你一会将会学到这些选项的作用。）...
居中一切(centering all the directions)by KYLE SIMPSON
自从文明的曙光降临以来，人类一直在斗争,对抗一切不可能之事，来达到人类进化的下一个阶段；去在这个伟大的星球上，以及环绕我们的宇宙中圈出自己的地盘；勇敢的进军任何地点…噢，原谅我这么夸张。 ...
读书笔记(一)
读老道(Douglas Crockford)的《Javascript:The Good Parts》中关于array.splice()方法的实现代码，现在自己加一些注释。 ...
css像素与理想viewport宽度
最近在开发移动端网页时遇到了两大问题，一是移动端的触摸事件的实现；二是移动端页面的宽度设置问题。今天先来说一说移动端的页面宽度问题。 首先要说的是css的像素，一个css像素，一个px，和设备的物理像素不是一回事。 拿苹果的iphone来说，iphone3的分辨率是320*480，而retina屏的iphone4是640*960, 但如果在浏览器里输出视窗的宽度，两者都是320px宽。这说明Retina屏的iPhone用4个物理像素来渲染了一个css像素。iPad上的情况是相似的，新老ipad的css分辨率都是1024*768。安卓上的情况也是类似的，比如nexus 5的物理分辨率是1920*1080，而css分辨率是640*360。 关于这个可以参考一下quirksmode上的博文《此像素非彼像素》 ...
联创交流行
今天托房子学姐的福，我们一行8个人去了联创交流。收获如下： 1.招新之道。 联创的招新可谓是九九八十一难。几轮面试笔试压力测试加上实习期的四轮新手任务。这也是没办法的事情，报名的人多，而且据他们说也都不怎么有基础，那就需要不断的测试来筛选有潜力的。 新手任务我认为是可取的一个点。在不断的自我学习中获得成长，也得到了初步的知识与技能，不失为一个启动的好办法。 2.待客之道。 联创的人给人的印象是热情坦诚，愿意分享，但不失专业。 ...