[转载]技术大牛提供的前端学习路径
作者:admin 日期:2014-02-25张铮铮，不攻城的前端攻城尸
CSS不能编程？用Less、Sass、Stylus、甚至直接用 Absurd，框架除了Bootstrap还有很多。JS写多了很麻烦？jQuery。移动开发？Zepto.js。结构不好？找框架，Backbone.js是MVC，AngularJS和Ember.js是MVVM，Twitter还弄了个事件驱动框架Flight。库多了要优化加载？RequireJS。
代码质量成问题？Jasmine、QUnit、Mocha做单元测试。各种浏览器都要测？用Karma。测试通过了部署还有问题？持续集成，用Travis CI。用户行为也要测？用Selenium 。样式测试还有 Viff 。觉得JS都够麻烦的？用CoffeeScript。
想做动画？Canvas或SVG还有CSS3帮忙，干掉Flash。SVG太难画？用Snap.svg。想开发游戏？用Canvas。自己写FPS太低？用框架，CreateJS.。2D太幼稚？three.js帮你用WebGL开发3D，还不够给力？asm.js让你在浏览器中拥有虚幻3引擎。
这一堆东西都要配置部署，麻烦，用Grunt，库太多？用Bower管理，项目开始要创建各种文件文件夹？用Yeoman。开源项目太多了，GitHub.上找，不会？学Git。顺便用Jekyll托管博客，不是吧还有Ruby这玩意...SASS也是Ruby写的，等等Sublime Text是Python写的，要写插件？也学一下。调试太难？用Chrome开发者工具，一堆API和功能。
光在电脑浏览器上跑不给力？移动开发HTML5，离开网络就渣了？HTML5离线应用。不如原生应用？用PhoneGap。想调用原生API？开发Firefox OS应用吧。浏览器应用也得会吧，Chrome Firefox都有自己的文档。接着是不是把后端甩了，自己来，装Node.js，所以还得学点服务器知识，想用npm管理node包？linux技巧shell神马的也得学。想前后端通吃？再看看http协议。Web精通了？node-webkit 让你可以写桌面程序了，继续学吧。
想学模块化开发？看看CommonJS和AMD规范。理解JS有偏差？看看ECMA-262，等等不知道什么时候第6版就要出了。浏览器各不相同，弄不清该怎么兼容？看看W3C标准，HTML写出来人看的懂，机器读不懂？要SEO，要支持残障人士？看HTML语义化，全会了但IE就是不支持？叫不出名字的浏览器尼玛连JS都不知道是啥？渐进增强。想一次把各种设备全搞定？响应式设计。
然后上面这些不过是一些讨巧的小技术。公司做什么业务的？了解一下行业信息。面向大众的产品？交互设计。美工不给力？UI设计。外包和咨询？设计模式、重构方法、算法、数据结构。知道软件工程吗？了解一下敏捷开发，或许还可以试试TDD、ATDD、BDD。
看了这么多东西，第一反应是不是求中文文档？学英语去吧。
这些也不过是我目前所能看到的一小部分，而且每段基本都是到了一个边界，并不是没得学了，而是继续学又是另一片天地。真心希望有人能帮我填补知识盲区。另外，我仅把一些知识点串起来，不全或不对的地方请见谅。
sublime text3-emmet自定义文件snippets.json的路径
作者:admin 日期:2014-01-19在国内的网站上几乎查不到这个问题的解决方法，特此记录一下：
Emmet.sublime-settings的snippets.json文件，是用来自定义进行emmet缩写组合的，这个文件默认是没有的，必须自己建立，文件可以在国外很多网站上下载，我分享一个：
https://github.com/emmetio/emmet/blob/master/snippets.json
而这个文件下载以后，编辑以后，应该放到以下路径：
C:\Users\Administrator\emmet\Emmet.sublime-settings
把c:换成你自己的系统盘，如果没有路径，自己建立一下。
Dreamweaver 的snippets.json路径在此：
C:\Users\your user name\AppData\Roaming\Adobe\Dreamweaver CS6\en_US\Configuration\Commands\Emmet
2013的总结，新一年继续深入HTML5互动制作
作者:admin 日期:2014-01-17FLASH制作的新年砸金蛋抽奖小游戏
作者:admin 日期:2014-01-17Greensock尚无开发LiquidStage for js的进度
作者:admin 日期:2013-11-18我觉得JS网站开发非常需要的东西，所以邮件咨询了他们一下：
carl:
目前我正在学习js平台的动画开发。
我想知道,greensock是否有计划开发“JS框架下的”LiquidStage以及TransformAroundPointPlugin。我觉得很多网站开发者会需要这些。
今天一早收到回复：
Hi,
We've had a few requests and we are thinking about it. Currently we are not actively developing these tools as we have a number of other priorities for the platform.
Thanks for your support and interest.
Best,
Carl
用tweenMax定义跨浏览器的alpha透明度
作者:admin 日期:2013-10-28今天试着用jquery写了个表达式：
- $(".content").css({
- 'alpha':0,
- });
结果发现在chrome中无法改变透明度。查了一下资料，发现chrome只支持这样的写法：
- opacity:0;
有时候真懒得去分辨这些不同浏览器的语法，想起tweenMax号称跨浏览器的性能，于是试验了一下：
- TweenMax.to($(".content"),0, {alpha:0});
成了！很方便！
大气页头动画效果重器！
作者:admin 日期:2013-10-23全屏观看请点击：http://www.contactu.cn/2013/ll/
来自于国外的商业应用，3D/2D效果、组合无限、播放组件定义自由、尺寸自适应、兼容浏览器，几乎完败一切同类应用。
商业应用可联系本站长，QQ：258754
我制作的FLASH全球钟在黄花机场投入应用
作者:admin 日期:2013-10-12来自于unheap.com的jquery-hover(鼠标感应效果)中文大全
作者:admin 日期:2013-09-30英文原站地址在这里： http://www.unheap.com/section/user-interface/hover/
第1集在这里：http://www.contactu.cn/article.asp?id=136
我就不多写了，只上个索引图
注释翻译了一个国外的长页面拖动案例
作者:admin 日期:2013-09-22今年特别流行长页面！加上这些拖动动画，非常之生动。不管你用不用，反正我用了。请拖住滚动条一直往下拉，可以看到各类动画。
中文注释在demo.js中
全屏请点击这里查看：http://www.contactu.cn/2013/drag/
花19元购买了SuperSlide v2.1.1代码
作者:admin 日期:2013-09-20长页拖动必备利器-来自于unheap.com的jquery-scrolling中文大全
作者:admin 日期:2013-09-20因为目前手头有一个全屏长画面网站的项目，我想设计成比较流行的长屏+拖动动画形式。于是在网上找插件。unheap.com几乎提供了与拖动有关所有jquery小程序，太赞了！于是我在自己的印象笔记中整理了一下，顺便发布在这里，做为日后自己的一个查找索引，也方便大家来使用。
以下所有内容都来自于unheap的ui-scrolling分支，具体URL是http://www.unheap.com/section/user-interface/scrolling/，如果有翻--墙手段，可能浏览起来更快速一点。unheap只是一个展示索引，各个子程序的说明和下载，都存在各自作者的网站上。
我在下图中做为了说明的，都是我认为比较重要的程序，一些雷同的、作用不大的，就没有做标记了。看图就行了，图的下方， 我把文字说明附加在后，方便大家查找..
jquery让绝对定位(position:absolute)的浮动层水平居中
作者:admin 日期:2013-09-15一般情况下的居中对齐是很简单的情况，但是有时候，图片是放置在一个绝对定位（position:absolute）的层中的。这时候的居中对齐就比较麻烦了。
这个jquery小程序就是用来进行居中运算的。
使用方法是：
1、把这段jq代码放置到页面中；
2、需要居中的层加上 class="fc" ,jq程序代码中会自动把目标层加上 position:absolute属性属性，不需要在CSS中再添加。
