随着年龄的增长，越发感觉时间如水，易去不可留。2013年就这样悄无声息的即将过去，随之迎来2014年。距《我和W3cplus的故事》整整有一年了，言外之意，W3cplus也整整走过三个年头，也让我在前端的圈子混了好几年了。回想这几年走过的路程，让我感触良多，因为他让我慢慢的成熟，慢慢的长大，也让我懂得了人生的价值，更让我不在迷茫，不在失落...

在新年将至的当中，大家都在思考，都在回味，都在总结，都在向往。我也同样不能脱俗，一直都在思考，为2013一年，为自己走过的这一年，为w3cplus这一年做一个总结，但一直不知道如何执笔开始。思来想去，有了下面的一些记录，只想让这些记录告诉我，2013看走过的一切，同时让我更好的迎接2014年，迎接新的一年，迎接新的人生。

在大家的支持之下，W3cplus成长的很快，有很多新的同学参与到一起分享前端的技术，也有很多的同学在不断的给我们指正文中的错误之处。更有幸运成为HTML5守望者和WebRebuid前端峰会活动的社区支持者。并且通过这些活动让我认识了更多的新朋友。

自从有了W3cplus之后，我热衷于前端技术，喜欢前端的活动，更爱上了前端的技术分享。在2013年当中，在众多朋友一起努力之下，总共发表博文279篇，其中技术博文216篇，CSS3教程61篇，CSS3案例25篇，收集前端各类在线工具近100个，整理jQuery插件近300个。还有前端较为新的技术，包括Sass教程47篇，Grunt教程近10篇，响应式设计近27篇。而且在今年在众多同学的帮助之下，组织翻译外国博文近115篇。看到这些数字，也让自己感觉到在2013年当中没有白混，让我自己更好的准备迎接2014年。

时间久了，内容多了，加上初期建站一些规划性没有做到位等原因，造成同学们找自己感兴趣的内容有一定的难度，也浪费同学们很多时间。今天趁此机会在这篇文章中做一些梳理，方便感兴趣的同学阅读。

开始编写CSS

Krasimir Tsonev的一篇《开始编写CSS》让众多CSSer知道CSS并不是一个简单的课题。在这篇文章中向大家介绍了CSS方面很多新的思想概念，比如说BEM、OOCSS、SMACSS、Atomic Design和OrganicCSS和CSS预处理器等。

而这些新的思想以及前卫的技术，W3cplus一直都有在观注和不断的通过译文和个人理解向大家推广。比如说站上翻译了BEM系列教程、分享了OOCSS理解，更在不断的向国内喜欢CSS预处理器同学分享Sass的知识。当然，我还有很多有关于语义化、代码简洁性以及CSS Architecture具有争议的话题分享。

布局

布局，对于一个网站是不可缺少的一个部分，那么在站上也整理了一些有关于布局方面的教程。在这些教程中有最基础的布局教程，有也最新的布局，比如CSS3中的Flexbox布局和Grid布局。当然还有一些探讨不完的布局，比如说等高布局、固定布局、网格布局等等。

图片处理

有关于图片处理，在QQ群里讨论最多的几个话题是图片垂直水平居中、响应式设计中的图片自适应和图片全屏显示。除了这些问题的话，还有一些其他有关于图片处理的技术探讨，比如Retina屏幕下图片显示、背景图片运用、图片替换文处理方法、图片美化、缩略图制作等等。

CSS3教程

CSS3在2013年是火热的一年，CSSer不在拒绝。而W3cplus在国内也算是较大的较全面的在分享CSS3的教程和CSS3案例。记得2012年整理了一份w3cplus站上有关于CSS3属性教程和案例分享的清单。在整个清单中主要包括了CSS选择器和CSS3基本属性清单。在2013年当中，并没有时时跟进w3c规范进行更新。但也依旧在不断的向大家引进新的属性教程的介绍，比如：Flexbox系列教程、CSS3 Grid系列教程、具有条件判断功能的@supports属性、CSS3裁剪特性clip、Retina、Object-fit和Object-position等。同时重谈了一下CSS3中访问量较高的两个属性CSS3 Gradient和CSS3 Transform。

Responsive

随着终端设备的多样性快速发展，Web早期的设计（或者说布局）已无法满足现在这个年代了。在这个环境的推动之下，有了Responsive Design(响应式设计)。他借助于CSS3的Media Queries特性，让你的设计能适应于不同终端设备的浏览。在W3cplus上面，从2012年年底就跟随着国外的潮流向大家介绍了Responsive。除了向大家提供有关于Responsive的教程之外，我们还向大家提供了很多Responsive的资源,比如Responsive的框架、Resonsive网格系统　、测试工具、设计工具、布局教程、学习路线和Responsive案例。为了更好的让大家掌握Responsive，我们还不断的在更新有关于Media Queries教程，而且向大家提供Media Queries代码片段、查询技巧、模板和iPhone和iPad的Media Queries模板等。

Sass教程

Sass是CSS预处理器之一。年初有幸在《程序员》杂志三月刊上发表了《CSS预处理器——Sass、LESS和Stylus实践》一文。这也是2013年我主要花精力的一个地方，整理和分享了一些Sass教程，这也是国内集中火力介绍Sass的地方。而且好友@结一同学整理了一份Sass指南，并创建了一个开源的SassCore，而且通过这个库，创建了用Sass制作的一些组件与用例——无TOBE,不Sass。为了更好的完善和向大家介绍更多的Sass知识，更好的使用Sass，我也不断的完善开源项目W3cplusSass Lib，同时还将不断的向国内喜欢Sass，或还不了解Sass的CSSer推广Sass，让更多的CSSer或团队受益。

Grunt

Grunt能帮助前端人员在开发中实现很多自动化。听起来非常的有吸引力，向往力。当今时代，前端工程师需要维护的代码变得极为庞大和复杂，代码维护，打包，发布等流程也变得极为繁琐，同时也浪费的时间和精力也越来越多，当然人为的错误也随着流程的增加而增加了更多的出错率。致使每一个团队都希望有一种工具，能帮助整个团队在开发中精简流程、提高效率、减少错误率。而且在到处都能看到讨论Grunt，在这样的大环境之下，我也随波逐流，开始在接触有关于Grunt的知识。并在站上翻译和整理自己的心得，发布了近10篇有关于Grunt教程。

EDM

电子邮件是一个非常不错的媒体。它可以直接进入收件箱提高ROI。它也是永远被误解和经常做得不好。特别是在这个智能设备横行的年代，您的很多用户常使用iPhone和Galaxy阅读邮件，但不幸的是很多电子邮件营销却不能跟上。如何让你的邮件在这些设备上得到更好的阅读，给用户更好的体验，国外早已在探讨Responsive EDM。为了让公司的EDM能给使用高级设备的用户有更好的体验，我在Ctrip UED中也开始引入Responsive　EDM。为了攻克这个难关，EDM也成了我在2013年主要攻克的一个技术。因为关注过w3cplus的同学，都会发现最近一直在发布有关于EDM教程。

前端框架

前端框架当中，我个人比较喜欢的是Bootstrap和Foundation。所以在W3cplus站上都能找到BootStrap教程、Bootstrap资源和Foundation教程。在此要特别感谢Spy同学，一直坚持在翻译和整理有关于Foundation和Bootstrap方面的教程，我们将在2014年会为大家推荐更多的、更好的有关于这两个框架的教程与案例。

小技巧

前端开发中有很多小技巧，这些小技巧可以帮助我们解决大麻烦。我也非常的热衷于收集和整理这些小技巧。但由于分类不够细致，很多不熟悉的同学都很难找到。今天趁此机会稍加整理一下，方便大家查找自己需要的资料。

• Responsive设计的十个基本技巧
• 七个高度有效的媒体查询技巧
• CSS Overlay技巧
• 20个初学者实用的CSS技巧
• 15个CSS技巧和窍门
• 13个CSS技巧
• 12个真正有用的CSS3技巧
• 十个CSS小技巧
• 20个实用的CSS技巧代码
• 22个必须知道的css技巧
• 20个CSS实战技巧
• 让你的CSS更尽完美的技巧
• 学习提高你CSS技术的法则
• CSS的陷阱

前端面试题

对于每一位初学者来说，学了一定的时间之后，都想通过一些测试题来验证自己所学的知识掌握的如何？当然也有很多同学想了解前端面试会面一些什么问题？David Shariff提供了一份前端综合面试题，让不少同学阵亡。在@99同学和＠民工精髓大大帮助之下，站上整理了这些试题的分析。同时还翻译了http://chriscoyier.net/的《有关于CSS的面试题和练习》一文，告诉初学者和面试者如何通过面试来学习更多的知识。

前端工具

很多同学对于写CSS3效果都有点厌烦，因为为了浏览器的兼容，需要添加很多的代码。其实到目前为止，在互联网上有很多工具，这些工具足以让你不用自己去写代码，只需要点点鼠标就能完成。在这一两年来，W3cplus搜集了前端类在线工具近100个。当然还有很多类似的工具还没有收进来，如果你平时有什么好的工具，可以与我们一起分享。

除了在线工具之外，常见大家在一起讨论使用什么样的文本编辑器来coding。其实现在有很多优秀的编辑，但这些优秀的编辑器都可以借助Emmet插件，帮助你快速编写代码。那么在站上我们也提供了Emmet的教程和Emmet使用手册。我们还在整理更详细的使用教程，将会陆续发布。

jQuery插件

对于像我这样不懂JavaScript的页面仔来说，jQuery的插件是一个很好的东西，他能帮助我完成很多页面需要的特效。就算是我不懂JavaScript，我也能做出很好的特效。为了方便自己我搜集了近300个不同特效的jQuery插件。

优秀资源

资源是无穷的，平时收集整理的多，那您需要使用的时候就方便的多。在W3cplus收集了一些相关的资源。比如说国外优秀前端站、国外前端技术大牛、前端资源收藏夹、UI设计库和PSD设计图等等。

总结

稀里糊涂又瞎整理了一翻，看着这些数据有时候还是蛮有成就感的，但就是有点不知道自己通过些学到啥了。但可以肯定的是让我认识了很多新朋友，小朋友。不过最难让人忘记的是，经过一年的奋斗，写了一本CSS3方面的中文教程，并进入出版社的审核阶段，希望在2014年我自己不会被小伙伴们喷死。还有难以忘记的是，W3cplus的成长，我自己的成长得到很多朋友的支持，比如@结一、＠99、＠boy等等。同时还要非常感谢很多我不认识的小伙伴一直以来对我和w3cplus的鼎力支持，让我有了一直坚持地在往下走。

辞旧迎新，希望在2014年里，自己能成长的更快，W3cplus能走得更好。更希望w3cplus能给更多的朋友帮助。最后说一句，让我们张开双手，迎接美好的2014年吧。(^_^)。

如需转载，烦请注明出处：http://www.w3cplus.com/css/traveled-2013-years.html

Nike Benassi "Just Do It." White/Silver