本文由小豪多年前翻译,但是上面的很多内容放在今天也不过时,所以重新发布。

这篇文章其实文字部分不多,强烈推荐大家直接阅读原文[http://www.smashingmagazine.com/2012/12/22/talks-to-help-you-become-a-better-front-end-engineer-in-2013/][2],部分链接需要自行翻墙。

===========================================================

大部分人非常在意个人在技术上的提升。但是保持对新技术的了解是一项不小的挑战, 毕竟我们需要的信息在数量上过于庞大。2012年里,伴随着前端发展的是大量的革命性突破和对前端的重新定义。

我们在实践的路上飞速前进,具体的进步体现在使用抽象化,优秀的代码质量,维护性上的提升以及更好的性能。如果你实在忙到没有时间来跟上最新的技术,不用担心。

随着假日的来临,我们就有了一些空闲的时间可以自己支配,我想,如果我把我收集的前端相关的精品讨论列表分享出来,那一定会对大家有一些帮助。你不需要把所有的都阅读一遍,但是这些相关的建议会让你了解更多相关的知识,为明年成为一名更好的前工程端开发师做准备。

![成为一名更好的前工程端开发师][3]

### 走在技术前沿的方法

[How to Stay Up to Date on Web Stuff][4], Chris Coyier

即使技术相关的理念会不断变化,我们依然可以做到让自己处于技术的前沿。

[![走在技术前沿的方法](http://devconf.qiniudn.com/Screen-Shot-2012-12-16-at-23.53.45.jpg)](https://speakerdeck.com/chriscoyier/how-to-stay-up-to-date-on-web-technology)

### 确保你的开发模式已经跟上时代

[A New Baseline for Front-End Developers][5], Rebecca Murphey

曾经在我们编辑文件的时候,本地测试完然后传到ftp上是最常规的做法。我们通过一个前端是否能编写一个兼容ie6的页面来判断他的前端水平。我们在html,css和javascript中的技术都不够强悍。

这样的情况在近几年有了很大的转变,随着工作方式的改进和各类工具的推出。前端开发越来越受到重视,这个主题讲解了前端在开发中的新起点。

[![确保你的开发模式已经跟上时代](http://devconf.qiniudn.com/Screen-Shot-2012-12-17-at-20.16.03.jpg)](https://speakerdeck.com/rmurphey/a-new-baseline-for-front-end-devs)

## 前端开发工程师的新起点

### 理解浏览器在屏幕后面的工作原理

[So, You Want to Be a Front-End Engineer][6], David Mosher ([Video][7])。

有些人会说,浏览器是他所知道的开发平台中最不稳定的一个。如果你是一个客户端开发工程师,理解浏览器内部工作原理会帮助你作出更好的决定,并且你也会赞叹那些最佳实践背后的种种辩论。在这个今年最好的主题之一里,david mosher会待你了解浏览器的解析和页面的渲染。

[![理解浏览器在屏幕后面的工作原理](http://devconf.qiniudn.com/Screen-Shot-2012-12-16-at-23.53.46.jpg)](https://speakerdeck.com/dmosher/so-you-want-to-be-a-front-end-engineer)

### 了解web平台现在需要提供什么

[Tooling for the Modern Web App Developer][8], Addy Osmani

web在不断的进化,了解这个平台中新出的技术不是一件容易的事情。html5的新特性让我们可以构建一个完全崭新的web应用,包含很多以前无法实现的特性(至少,在没有插件的情况下)。

在这个主题中,我的队友eric会带你了解html5的痛苦边缘,关注很多解决现实世界问题的方案。你会了解媒体流,设备输入,现代css设计,媒体捕捉,文件i/o等等。

[![了解web平台现在需要提供什么](http://devconf.qiniudn.com/Screen-Shot-2012-12-16-at-23.57.21.jpg)](http://www.htmlfivecan.com/#1)

### web app开发工程师的工作方式

无论你在使用coffeescript还是javascript,less还是sass,构建一个好的web应用在现在需要大量引用外部资源,框架,工具和结合工具来将他们整合到一起。简单地说,你需要一个打屁股用的实用腰带。

在这个主题中,你会了解到当前前端系统的概况,并学习到一个新工具来整合这些系统,叫做yeoman。

你还可以访问这个主题的扩展版本。

[![确保你的开发模式已经跟上时代](http://devconf.qiniudn.com/Screen-Shot-2012-12-17-at-00.03.50.jpg)](https://speakerdeck.com/addyosmani/tooling-for-the-modern-webapp-developer)

### web设计师的工作方式

[A Modern Web Designer’s Workflow][9], Chris Coyier ([Video][10])

今天我们对web构架师的要求很高。如果在以前,这个岗位名称已经表达了它所对应的工作,但是现在不仅仅是视觉设计岗位,甚至涉及到交互的构建。设计师需要考虑不同形状,不同尺寸,不同连接方式的不同设备,并且这些设备下都要能正常工作。

作为一个设计师,你通常需要在团队之间沟通和分享代码,并且需要了解很多不同的技术。在这个主题中,chris coyier会说到很多令人赞叹的工具来帮助手头的工作更加顺利地完成,还会讨论应该做些什么来提供一个高水准的现代工作流。

[![web设计师的工作方式](http://devconf.qiniudn.com/Screen-Shot-2012-12-17-at-00.07.58.jpg)](https://speakerdeck.com/chriscoyier/a-modern-web-designers-workflow)

### 移动web开发的工作方式

[Mobile Web Developers Toolbelt][11], Pete Le Page ([Video][12])

移动端开发和PC端开发有很大的不同,这个主题讲述了各种工具来让移动web开发更加方便,让移动web开发更加容易。

[![移动web开发的工作方式](http://devconf.qiniudn.com/Screen-Shot-2012-12-17-at-00.04.40.jpg)](http://petelepage.com/presentations/2012/qcon/#2)

[Secrets of the Chrome DevTools][13], Patrick Dubroy ([Video][14])

深度了解谷歌开发者工具

[![深度了解谷歌开发者工具](http://devconf.qiniudn.com/Screen-Shot-2012-12-17-at-00.05.57.jpg)](http://oredev.org/2012/sessions/secrets-of-the-chrome-developer-tools)

## 面向未来的开发

[The CSS of Tomorrow][15], Peter Gasston

这个主题介绍了CSS给你现在的开发带来了什么,作为一个CSS程序员,如何利用CSS3来实现面向未来的开发。

[![确保你的开发模式已经跟上时代](http://devconf.qiniudn.com/Screen-Shot-2012-12-16-at-23.59.58.jpg)](https://speakerdeck.com/stopsatgreen/the-css-of-tomorrow-revised)

### JavaScript

[The Future of JavaScript][16], Dave Herman

了解ES6的新特性,以及使用方式

[![ES6的新特性及使用方式](http://devconf.qiniudn.com/Screen-Shot-2012-12-17-at-00.00.56.jpg)](https://speakerdeck.com/dherman/the-future-of-javascript-1)

### WEB APPLICATIONS

[Web Components and the Future of Web App Development][17], Eric Bidelman

如何更好地将各种新技术整合到你的web应用中。

[![确保你的开发模式已经跟上时代](http://devconf.qiniudn.com/Screen-Shot-2012-12-17-at-00.02.39.jpg)](http://html5-demos.appspot.com/static/webcomponents/index.html#1)

### CSS领域中的艺术

[All the New CSS Hawtness][18], Darcy Clarke

这个主题介绍了最新的CSS实现以及相关的标准,并且学习到这些新的CSS技术是如何改变我们的日常开发。

[![CSS实现以及相关的标准](http://devconf.qiniudn.com/Screen-Shot-2012-12-17-at-21.19.39.jpg)](http://darcyclarke.me/dev/hawtcss/#landing-slide)

### 模块化CSS

[Your CSS Is a Mess][19], Jonathan Snook

大部分人的CSS代码都是一团糟,在这个主题中,你会知道如何解决CSS的模块化问题,方便管理和维护。

[![模块化CSS](http://devconf.qiniudn.com/Screen-Shot-2012-12-17-at-20.16.03.jpg)](http://devconf.qiniudn.com/Screen-Shot-2012-12-17-at-11.54.57.jpg)

### CSS的预处理器

[CSS Pre-Processors][20], Bermon Painter

如果你还没有用过CSS预处理器,那你就OUT了。这个主题会对比较流行的几个CSS预处理器进行概述。

[![确保你的开发模式已经跟上时代](http://devconf.qiniudn.com/Screen-Shot-2012-12-17-at-11.56.42.jpg)](https://speakerdeck.com/bermonpainter/css-pre-processors-stylus-less-and-sass)

[A Better Future With KSS][21], Kyle Neath

本主题介绍了Kyle的一个工具,KSS,用于生成CSS文件的文档和代码格式化。

[![Kyle的一个工具](http://devconf.qiniudn.com/Screen-Shot-2012-12-17-at-11.57.14.jpg)](https://speakerdeck.com/kneath/a-better-future-with-kss)

## JavaScript

### 代码风格的重要性

[Maintainable JavaScript][22], Nicholas Zakas

编写有趣的JavaScript代码和编写专业的JavaScript代码是两码事,在Zakas的这个主题中,你会学习到如何做到编写可持续性维护的JavaScript代码

[![编写可持续性维护的JavaScript代码](http://devconf.qiniudn.com/Screen-Shot-2012-12-18-at-10.43.39.jpg)](http://www.slideshare.net/nzakas/maintainable-javascript-2012)

### 构建大规模的APP

[SoundCloud’s Stack][23], Nick Fisher

这个主题中,来自[SoundCloud][24]的Nick Fisher会介绍他们公司开发一个大规模JavaScript APP的故事,并且分享他们的开发步骤以及如何提高开发效率。

[![构建大规模的APP](http://devconf.qiniudn.com/Screen-Shot-2012-12-20-at-02.19.jpg)](http://spadgos.github.com/sfjs-next-soundcloud/#/step-1)

### 重新思考应用的结构

[Re-Imagining the Browser With AngularJS][25], Igor Minar

在这个主题中,你会了解如何将未来Web平台的力量使用到当前的Web应用中。

[![重新思考应用的结构](http://devconf.qiniudn.com/Screen-Shot-2012-12-18-at-10.46.22.jpg)](https://docs.google.com/a/google.com/presentation/pub?id=1kDvp3O2xZ6ZSXF4F1YTbg_jy_ei2sFl38f3c6VkBfSo&start=false&loop=false&delayms=3000#slide=id.p)

[Entschuldigen you, parlez vouz JavaScript][26], Sebastian Golasch ([Video][27])

这个主题中,Sebastian介绍了从如何定位现实世界中的国际化问题,到如何用优雅的方式进行解决。

[![国际化](http://devconf.qiniudn.com/Screen-Shot-2012-12-18-at-11.59.jpg)](http://i18n.asciidisco.com/#/)

### 模式和原则

[The Plight of Pinocchio][28], Brandon Keepers

我们需要将JavaScript作为一门真正的语言,就需要能在JavaScript上使用真正的语言会使用的各种最佳实践。JavaScript不再是一门玩具语言。

[![模式和原则](http://devconf.qiniudn.com/Screen-Shot-2012-12-17-at-21.59.46.jpg)](https://speakerdeck.com/bkeepers/the-plight-of-pinocchio)

### 什么时候来延迟(惰性)加载脚本

[How Late Is Later?][29], Massimiliano Marcon

我们都知道延迟(惰性)加载脚本可以提高Web应用的加载时间,那么什么时候才是正确的时间来加载脚本呢?

[![延迟(惰性)加载脚本](http://devconf.qiniudn.com/Screen-Shot-2012-12-18-at-10.43.58.jpg)](https://speakerdeck.com/mmarcon/how-late-is-later-a-lazy-loading-solution-on-the-edge-between-very-clever-and-incredibly-mad)

## 移动Web开发

[Creating Responsive HTML5 Touch Interfaces][30], Stephen Woods ([Video][31] | [Audio][32])

如何去解决UI和用户间交互的问题,避免这些陷阱是很多应用开发者在未来需要面对的。

[![解决UI和用户间交互的问题](http://devconf.qiniudn.com/Screen-Shot-2012-12-18-at-11.11.jpg)](http://www.slideshare.net/ysaw/html5-touch-interfaces-sxsw-extended-version)

### 来自滚动条的挑战

[Embracing Touch: Cross-Platform Scrolling][33], Mark Dalgleish ([Video][34])

滚动效果是最流行的移动页面的方式。可惜滑动的效果总是不能与原生滚动条媲美。我们应该如何在移动浏览器上解决这个问题?

[![来自滚动条的挑战](http://devconf.qiniudn.com/Screen-Shot-2012-12-18-at-10.47.32.jpg)](http://markdalgleish.com/presentations/embracingtouch/)

### 原生,HTML5和混合的应用

[>Native, HTML5 and Hybrid Mobile Development][35], Eran Zinman

这个主题中,Eran分享了他在跨平台开发中的经验。

[![跨平台开发中的经验](http://devconf.qiniudn.com/Screen-Shot-2012-12-18-at-10.47.01.jpg)](http://www.slideshare.net/zzeran/fowa-2012-native-html5-and-hybrid-mobile-app-development-reallife-experiences-eran-zinman)

### 性能,分布和facebook在HTML5上的实践

[On the Future of Mobile Web Apps][36], Simon Cross

facebook利用HTML5做了什么?还有什么需要改进?

[![facebook利用HTML5做了什么?还有什么需要改进?](http://devconf.qiniudn.com/Screen-Shot-2012-12-17-at-10.48.32.jpg)](https://speakerdeck.com/sicross/on-the-future-of-mobile-web-apps)

### 移动开发的调试工具

[Mobile Debugging][37], Remy Sharp

[![Mobile Debugging](http://devconf.qiniudn.com/Screen-Shot-2012-12-17-at-10.50.47.jpg)](https://speakerdeck.com/rem/mobile-debugging)

### 响应式设计技术

[Responsive Web Design: Clever Tips and Techniques][38], Vitaly Friedman

这个主题提供了响应式设计实现的概述。

[![响应式设计实现的概述](http://devconf.qiniudn.com/Screen-Shot-2012-12-17-at-10.52.21.jpg)](https://speakerdeck.com/smashingmag/responsive-web-design-clever-tips-and-techniques)

## Web Apps

### 离线的web应用

[Offline Rules][39], Andrew Betts ([Video][40])

如何在Web应用中做到客户端的存储,并且如何将其用在提高网站的体验上。

[![离线的web应用](http://devconf.qiniudn.com/Screen-Shot-2012-12-18-at-10.54.16.jpg)](https://speakerdeck.com/triblondon/offline-rules-full-frontal-2012)

### STATE OF THE ART

[Building Web Apps of the Future: Tomorrow, Today and Yesterday][41], Paul Kinlan ([Audio][42])

Paul介绍了如何构建面向未来的web app。

[![如何构建面向未来的web app](http://devconf.qiniudn.com/Screen-Shot-2012-12-18-at-10.54.27.jpg)](http://lanyrd.com/2012/full-frontal/sztqg/)

### 客户端存储

[Storage in the Browser][43], Andrew Betts

[![Storage in the Browser](http://devconf.qiniudn.com/Screen-Shot-2012-12-18-at-10.54.40.jpg)](https://speakerdeck.com/triblondon/storage-in-the-browser-londonjs)

[Application Cache: Douchebag][44], Jake Archibald ([Video][45])

如何利用Application Cache来构建你的网站

[![如何利用Application Cache来构建你的网站](http://devconf.qiniudn.com/Screen-Shot-2012-12-18-at-10.54.57.jpg)](https://speakerdeck.com/jaffathecake/application-cache-douchebag)

[High-Performance CSS][46], Paul Irish

找出那些影响页面性能的CSS,比如引发浏览器绘制至少多70毫秒的box-shadow,以及解决方案。

[![High-Performance CSS](http://devconf.qiniudn.com/Screen-Shot-2012-12-18-at-20.19.jpg)](https://dl.dropbox.com/u/39519/talks/cssperf-cssdevconf/index.html)

[GitHub’s CSS Performance][47], Jon Rohan

[![GitHub’s CSS Performance](http://devconf.qiniudn.com/Screen-Shot-2012-12-17-at-10.44.59.jpg)](https://speakerdeck.com/jonrohan/githubs-css-performance)

### 避免JANK

[Jank-Free: In Pursuit of Smooth Web Apps][48], Tom Wiltzius

JANK是指当动画顿卡,特效执行缓慢,或者页面滚动慢时的一种状态。该主题介绍了如何避免这些状态。

[![避免JANK](http://devconf.qiniudn.com/Screen-Shot-2012-12-17-at-10.46.27.jpg)](http://jankfree.com/velocity-europe/index.html)

[Building Faster Websites][49], Ilya Grigorik

如何在网站的角度考虑整体性能的提升。

[![如何在网站的角度考虑整体性能的提升](http://devconf.qiniudn.com/Screen-Shot-2012-12-17-at-10.45.42.jpg)](http://www.igvita.com/slides/2012/webperf-crash-course.pdf)

### JavaScript

[Breaking the JavaScript Speed Limit With V8][50], Daniel Clifford

如何打破V8执行脚本的速度限制。

[![如何打破V8执行脚本的速度限制](http://devconf.qiniudn.com/Screen-Shot-2012-12-17-at-10.51.39.jpg)](http://v8-io12.appspot.com/)

### 理解代码的不好的原因

[Why Our Code Smells][51], Brandon Keepers ([Video][52])

这个主题中,Brandon会介绍他日常的代码,寻找那些会引起问题的劣质代码,理解为什么会出现这些代码,并且这些代码意味着什么,最后介绍如何对其进行重构。

[![理解代码的不好的原因](http://devconf.qiniudn.com/Screen-Shot-2012-12-17-at-10.49.17.jpg)](https://speakerdeck.com/bkeepers/why-our-code-smells)

### CURRENT STATE OF THE ART

JavaScript Testing: The Holy Grail, Adam Hawkins (Video)

如何利用测试工具,来保证一个应用的体验。

[![CURRENT STATE OF THE ART](http://devconf.qiniudn.com/Screen-Shot-2012-12-17-at-21.03.16.jpg)](https://speakerdeck.com/twinturbo/javascript-testing-the-holy-grail)

### 提高代码的可测试性

[Writing Testable JavaScript][53], Rebecca Murphey ([Audio][54])

[![提高代码的可测试性](http://devconf.qiniudn.com/Screen-Shot-2012-12-17-at-10.49.49.jpg)](https://speakerdeck.com/rmurphey/writing-testable-javascript-mocha-version)

花在思考自己技术提升上的时间是非常值得的。磨练的越多,你就更有机会去成为一名优秀的工程师。

这个列表不一定会覆盖今年所有优秀的PPT,不过还是希望能给大家提供一些指引。去阅读一些你感兴趣的。这样的阅读会提高你的能力,也希望能真正为你的日常开发提供帮助。

最后,祝大家享受节日,新的一年有更多的进步和突破。

[0]: http://www.w3ctech.com:/category/6
[1]: http://www.w3ctech.com:/account/favorites?topic_id=775
[2]: http://www.smashingmagazine.com/2012/12/22/talks-to-help-you-become-a-better-front-end-engineer-in-2013/
[3]: http://devconf.qiniudn.com/cover2.jpg
[4]: https://speakerdeck.com/chriscoyier/how-to-stay-up-to-date-on-web-technology
[5]: https://speakerdeck.com/rmurphey/a-new-baseline-for-front-end-devs
[6]: https://speakerdeck.com/dmosher/so-you-want-to-be-a-front-end-engineer
[7]: http://www.youtube.com/watch?v=Lsg84NtJbmI
[8]: https://speakerdeck.com/addyosmani/tooling-for-the-modern-webapp-developer
[9]: https://speakerdeck.com/chriscoyier/a-modern-web-designers-workflow
[10]: http://www.youtube.com/watch?v=vsTrAfJFLXI
[11]: http://petelepage.com/presentations/2012/qcon/#2
[12]: https://developers.google.com/live/shows/11154750/
[13]: http://oredev.org/2012/sessions/secrets-of-the-chrome-developer-tools
[14]: http://vimeo.com/53073654
[15]: https://speakerdeck.com/stopsatgreen/the-css-of-tomorrow-revised
[16]: https://speakerdeck.com/dherman/the-future-of-javascript-1
[17]: http://html5-demos.appspot.com/static/webcomponents/index.html#1
[18]: http://darcyclarke.me/dev/hawtcss/#landing-slide
[19]: https://speakerdeck.com/snookca/your
[20]: https://speakerdeck.com/bermonpainter/css-pre-processors-stylus-less-and-sass
[21]: https://speakerdeck.com/kneath/a-better-future-with-kss
[22]: http://www.slideshare.net/nzakas/maintainable-javascript-2012
[23]: http://spadgos.github.com/sfjs-next-soundcloud/#/step-1
[24]: https://soundcloud.com/
[25]: https://docs.google.com/a/google.com/presentation/pub?id=1kDvp3O2xZ6ZSXF4F1YTbg_jy_ei2sFl38f3c6VkBfSo&start=false&loop=false&delayms=3000#slide=id.p
[26]: http://i18n.asciidisco.com/#/
[27]: http://www.youtube.com/watch?feature=player_embedded&v=ekiZuLl1mWc
[28]: https://speakerdeck.com/bkeepers/the-plight-of-pinocchio
[29]: https://speakerdeck.com/mmarcon/how-late-is-later-a-lazy-loading-solution-on-the-edge-between-very-clever-and-incredibly-mad
[30]: http://www.slideshare.net/ysaw/html5-touch-interfaces-sxsw-extended-version
[31]: http://www.youtube.com/watch?v=lcD9CF0bxyk
[32]: http://audio.sxsw.com/2012/podcasts/11-HIL-Creating_Responsive_HTML5_Touch_Interfaces.mp3
[33]: http://markdalgleish.com/presentations/embracingtouch/
[34]: http://www.youtube.com/watch?feature=player_embedded&v=Ii5AkRNSVHg
[35]: http://www.slideshare.net/zzeran/fowa-2012-native-html5-and-hybrid-mobile-app-development-reallife-experiences-eran-zinman
[36]: https://speakerdeck.com/sicross/on-the-future-of-mobile-web-apps
[37]: https://speakerdeck.com/rem/mobile-debugging
[38]: https://speakerdeck.com/smashingmag/responsive-web-design-clever-tips-and-techniques
[39]: https://speakerdeck.com/triblondon/offline-rules-full-frontal-2012
[40]: http://www.youtube.com/watch?feature=player_embedded&v=RrGo1Sz4IgQ
[41]: http://lanyrd.com/2012/full-frontal/sztqg/
[42]: http://2012.full-frontal.org/audio/5-paul.mp3
[43]: https://speakerdeck.com/triblondon/storage-in-the-browser-londonjs
[44]: https://speakerdeck.com/jaffathecake/application-cache-douchebag
[45]: http://vimeo.com/43336762
[46]: https://dl.dropbox.com/u/39519/talks/cssperf-cssdevconf/index.html
[47]: https://speakerdeck.com/jonrohan/githubs-css-performance
[48]: http://jankfree.com/velocity-europe/index.html
[49]: http://www.igvita.com/slides/2012/webperf-crash-course.pdf
[50]: http://v8-io12.appspot.com/
[51]: https://speakerdeck.com/bkeepers/why-our-code-smells
[52]: http://www.youtube.com/watch?v=JxPKljUkFQw
[53]: https://speakerdeck.com/rmurphey/writing-testable-javascript-mocha-version
[54]: http://2012.full-frontal.org/audio/6-rebecca.mp3
[55]: http://www.w3ctech.com:/user/sign_in
[56]: http://www.w3ctech.com:/user/sign_up