2014年前端開(kāi)發(fā)者如何提升自己

　　大部分人非常在意個(gè)人在技術(shù)上的提升。但是保持對(duì)新技術(shù)的了解是一項(xiàng)不小的挑戰(zhàn)， 畢竟我們需要的信息在數(shù)量上過(guò)于龐大。2012年里，伴隨著前端發(fā)展的是大量的革命性突破和對(duì)前端的重新定義。

　　我們?cè)趯?shí)踐的路上飛速前進(jìn)，具體的進(jìn)步體現(xiàn)在使用抽象化，優(yōu)秀的代碼質(zhì)量，維護(hù)性上的提升以及更好的性能。如果你實(shí)在忙到?jīng)]有時(shí)間來(lái)跟上最新的技術(shù)，不用擔(dān)心。

　　隨著假日的來(lái)臨，我們就有了一些空閑的時(shí)間可以自己支配，我想，如果我把我收集的前端相關(guān)的精品討論列表分享出來(lái)，那一定會(huì)對(duì)大家有一些幫助。你不需要把所有的都閱讀一遍，但是這些相關(guān)的建議會(huì)讓你了解更多相關(guān)的知識(shí)，為明年成為一名更好的前工程端開(kāi)發(fā)師做準(zhǔn)備。

　　以下是一些關(guān)于前端開(kāi)發(fā)的優(yōu)秀的PPT，你可以通過(guò)文中的鏈接來(lái)訪問(wèn)。

　　一、基礎(chǔ)部分

　　走在技術(shù)前沿的方法

　　PPT：How to Stay Up to Date on Web Stuff , Chris Coyier

　　即使技術(shù)相關(guān)的理念會(huì)不斷變化，我們依然可以做到讓自己處于技術(shù)的前沿。

　　確保你的開(kāi)發(fā)模式已經(jīng)跟上時(shí)代

　　PPT：A New Baseline for Front-End Developers , Rebecca Murphey

　　曾經(jīng)在我們編輯文件的時(shí)候，本地測(cè)試完然后傳到ftp上是最常規(guī)的做法。我們通過(guò)一個(gè)前端是否能編寫(xiě)一個(gè)兼容ie6的頁(yè)面來(lái)判斷他的前端水平。我們?cè)趆tml，css和javascript中的技術(shù)都不夠強(qiáng)悍。

　　這樣的情況在近幾年有了很大的轉(zhuǎn)變，隨著工作方式的改進(jìn)和各類工具的推出。前端開(kāi)發(fā)越來(lái)越受到重視，這個(gè)主題講解了前端在開(kāi)發(fā)中的新起點(diǎn)。

　　二、前端開(kāi)發(fā)工程師的新起點(diǎn)

　　理解瀏覽器在屏幕后面的工作原理

　　PPT：So, You Want to Be a Front-End Engineer , David Mosher (Video )

　　有些人會(huì)說(shuō)，瀏覽器是他所知道的開(kāi)發(fā)平臺(tái)中最不穩(wěn)定的一個(gè)。如果你是一個(gè)客戶端開(kāi)發(fā)工程師，理解瀏覽器內(nèi)部工作原理會(huì)幫助你作出更好的決定，并且你也會(huì)贊嘆那些最佳實(shí)踐背后的種種辯論。在這個(gè)今年最好的主題之一里，david mosher會(huì)待你了解瀏覽器的解析和頁(yè)面的渲染。

　　了解web平臺(tái)現(xiàn)在需要提供什么

　　PPT：Tooling for the Modern Web App Developer , Addy Osmani

　　web在不斷的進(jìn)化，了解這個(gè)平臺(tái)中新出的技術(shù)不是一件容易的事情。html5的新特性讓我們可以構(gòu)建一個(gè)完全嶄新的web應(yīng)用，包含很多以前無(wú)法實(shí)現(xiàn)的特性(至少，在沒(méi)有插件的情況下)。

　　在這個(gè)主題中，我的隊(duì)友eric會(huì)帶你了解html5的痛苦邊緣，關(guān)注很多解決現(xiàn)實(shí)世界問(wèn)題的方案。你會(huì)了解媒體流，設(shè)備輸入，現(xiàn)代css設(shè)計(jì)，媒體捕捉，文件i/o等等。

　　三、工作方式

　　web app開(kāi)發(fā)工程師的工作方式

　　無(wú)論你在使用coffeescript還是javascript，less還是sass，構(gòu)建一個(gè)好的web應(yīng)用在現(xiàn)在需要大量引用外部資源，框架，工具和結(jié)合工具來(lái)將他們整合到一起。簡(jiǎn)單地說(shuō)，你需要一個(gè)打屁股用的實(shí)用腰帶。

　　在這個(gè)主題中，你會(huì)了解到當(dāng)前前端系統(tǒng)的概況，并學(xué)習(xí)到一個(gè)新工具來(lái)整合這些系統(tǒng)，叫做yeoman。

　　你還可以訪問(wèn)這個(gè)主題的擴(kuò)展版本。

　　PPT：Tooling For The Modern WebApp Developer

　　web設(shè)計(jì)師的工作方式

　　PPT：A Modern Web Designer’s Workflow , Chris Coyier (Video )

　　今天我們對(duì)web構(gòu)架師的要求很高。如果在以前，這個(gè)崗位名稱已經(jīng)表達(dá)了它所對(duì)應(yīng)的工作，但是現(xiàn)在不僅僅是視覺(jué)設(shè)計(jì)崗位，甚至涉及到交互的構(gòu)建。設(shè)計(jì)師需要考慮不同形狀，不同尺寸，不同連接方式的不同設(shè)備，并且這些設(shè)備下都要能正常工作。

　　作為一個(gè)設(shè)計(jì)師，你通常需要在團(tuán)隊(duì)之間溝通和分享代碼，并且需要了解很多不同的技術(shù)。在這個(gè)主題中，chris coyier會(huì)說(shuō)到很多令人贊嘆的工具來(lái)幫助手頭的工作更加順利地完成，還會(huì)討論應(yīng)該做些什么來(lái)提供一個(gè)高水準(zhǔn)的現(xiàn)代工作流。

　　移動(dòng)web開(kāi)發(fā)的工作方式

　　PPT：Mobile Web Developers Toolbelt , Pete Le Page (Video )

　　移動(dòng)端開(kāi)發(fā)和PC端開(kāi)發(fā)有很大的不同，這個(gè)主題講述了各種工具來(lái)讓移動(dòng)web開(kāi)發(fā)更加方便，讓移動(dòng)web開(kāi)發(fā)更加容易。

　　如何調(diào)試

　　PPT：Secrets of the Chrome DevTools , Patrick Dubroy (Video )

　　深度了解谷歌開(kāi)發(fā)者工具

　　四、面向未來(lái)的開(kāi)發(fā)

　　CSS

　　PPT：The CSS of Tomorrow , Peter Gasston

　　這個(gè)主題介紹了CSS給你現(xiàn)在的開(kāi)發(fā)帶來(lái)了什么，作為一個(gè)CSS程序員，如何利用CSS3來(lái)實(shí)現(xiàn)面向未來(lái)的開(kāi)發(fā)。

　　JAVASCRIPT

　　PPT：The Future of JavaScript , Dave Herman

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

　　WEB APPLICATIONS

　　PPT：Web Components and the Future of Web App Development , Eric Bidelman

　　如何更好地將各種新技術(shù)整合到你的web應(yīng)用中。

　　五、CSS

　　CSS領(lǐng)域中的藝術(shù)

　　PPT：All the New CSS Hawtness , Darcy Clarke

　　這個(gè)主題介紹了最新的CSS實(shí)現(xiàn)以及相關(guān)的標(biāo)準(zhǔn)，并且學(xué)習(xí)到這些新的CSS技術(shù)是如何改變我們的日常開(kāi)發(fā)。

　　模塊化CSS

　　PPT：Your CSS Is a Mess , Jonathan Snook

　　大部分人的CSS代碼都是一團(tuán)糟，在這個(gè)主題中，你會(huì)知道如何解決CSS的模塊化問(wèn)題，方便管理和維護(hù)。

　　CSS的預(yù)處理器

　　PPT：CSS Pre-Processors , Bermon Painter

　　如果你還沒(méi)有用過(guò)CSS預(yù)處理器，那你就OUT了。這個(gè)主題會(huì)對(duì)比較流行的幾個(gè)CSS預(yù)處理器進(jìn)行概述。

　　文檔

　　PPT：A Better Future With KSS , Kyle Neath

　　本主題介紹了Kyle的一個(gè)工具，KSS，用于生成CSS文件的文檔和代碼格式化。

　　六、JavaScript

　　代碼風(fēng)格的重要性

　　PPT：Maintainable JavaScript , Nicholas Zakas

　　編寫(xiě)有趣的JavaScript代碼和編寫(xiě)專業(yè)的JavaScript代碼是兩碼事，在Zakas的這個(gè)主題中，你會(huì)學(xué)習(xí)到如何做到編寫(xiě)可持續(xù)性維護(hù)的JavaScript代碼

　　構(gòu)建大規(guī)模的APP

　　PPT：SoundCloud’s Stack , Nick Fisher

　　這個(gè)主題中，來(lái)自SoundCloud 的Nick Fisher會(huì)介紹他們公司開(kāi)發(fā)一個(gè)大規(guī)模JavaScript APP的故事，并且分享他們的開(kāi)發(fā)步驟以及如何提高開(kāi)發(fā)效率。

　　重新思考應(yīng)用的結(jié)構(gòu)

　　PPT：Re-Imagining the Browser With AngularJS , Igor Minar

　　在這個(gè)主題中，你會(huì)了解如何將未來(lái)Web平臺(tái)的力量使用到當(dāng)前的Web應(yīng)用中。

　　國(guó)際化

　　PPT：Entschuldigen you, parlez vouz JavaScript , Sebastian Golasch (Video )

　　這個(gè)主題中，Sebastian介紹了從如何定位現(xiàn)實(shí)世界中的國(guó)際化問(wèn)題，到如何用優(yōu)雅的方式進(jìn)行解決。

　　模式和原則

　　PPT：The Plight of Pinocchio , Brandon Keepers

　　我們需要將JavaScript作為一門真正的語(yǔ)言，就需要能在JavaScript上使用真正的語(yǔ)言會(huì)使用的各種最佳實(shí)踐。JavaScript不再是一門玩具語(yǔ)言。

　　什么時(shí)候來(lái)延遲(惰性)加載腳本

　　PPT：How Late Is Later? , Massimiliano Marcon

　　我們都知道延遲(惰性)加載腳本可以提高Web應(yīng)用的加載時(shí)間，那么什么時(shí)候才是正確的時(shí)間來(lái)加載腳本呢?

　　七、移動(dòng)Web開(kāi)發(fā)

　　PPT：Creating Responsive HTML5 Touch Interfaces , Stephen Woods (Video | Audio )

　　如何去解決UI和用戶間交互的問(wèn)題，避免這些陷阱是很多應(yīng)用開(kāi)發(fā)者在未來(lái)需要面對(duì)的。

　　來(lái)自滾動(dòng)條的挑戰(zhàn)

　　PPT：Embracing Touch: Cross-Platform Scrolling , Mark Dalgleish (Video )

　　滾動(dòng)效果是最流行的移動(dòng)頁(yè)面的方式?？上Щ瑒?dòng)的效果總是不能與原生滾動(dòng)條媲美。我們應(yīng)該如何在移動(dòng)瀏覽器上解決這個(gè)問(wèn)題?

　　原生，HTML5和混合的應(yīng)用

　　PPT：Native, HTML5 and Hybrid Mobile Development , Eran Zinman

　　這個(gè)主題中，Eran分享了他在跨平臺(tái)開(kāi)發(fā)中的經(jīng)驗(yàn)。

　　性能，分布和facebook在HTML5上的實(shí)踐

　　PPT：On the Future of Mobile Web Apps , Simon Cross

　　facebook利用HTML5做了什么?還有什么需要改進(jìn)?

　　移動(dòng)開(kāi)發(fā)的調(diào)試工具

　　PPT：Mobile Debugging , Remy Sharp

　　響應(yīng)式設(shè)計(jì)技術(shù)

　　PPT：Responsive Web Design: Clever Tips and Techniques , Vitaly Friedman

　　這個(gè)主題提供了響應(yīng)式設(shè)計(jì)實(shí)現(xiàn)的概述。

　　八、Web Apps

　　離線的web應(yīng)用

　　PPT：Offline Rules , Andrew Betts (Video )

　　如何在Web應(yīng)用中做到客戶端的存儲(chǔ)，并且如何將其用在提高網(wǎng)站的體驗(yàn)上。

　　STATE OF THE ART

　　PPT：Building Web Apps of the Future: Tomorrow, Today and Yesterday , Paul Kinlan (Audio )

　　Paul介紹了如何構(gòu)建面向未來(lái)的web app。

　　客戶端存儲(chǔ)

　　PPT：Storage in the Browser , Andrew Betts

　　應(yīng)用緩存

　　PPT：Application Cache: Douchebag , Jake Archibald (Video )

　　如何利用Application Cache來(lái)構(gòu)建你的網(wǎng)站

　　九、性能

　　CSS

　　PPT：High-Performance CSS , Paul Irish

　　找出那些影響頁(yè)面性能的CSS，比如引發(fā)瀏覽器繪制至少多70毫秒的box-shadow，以及解決方案。

　　PPT：GitHub’s CSS Performance , Jon Rohan

　　避免JANK

　　PPT：Jank-Free: In Pursuit of Smooth Web Apps , Tom Wiltzius

　　JANK是指當(dāng)動(dòng)畫(huà)頓卡，特效執(zhí)行緩慢，或者頁(yè)面滾動(dòng)慢時(shí)的一種狀態(tài)。該主題介紹了如何避免這些狀態(tài)。

　　Web

　　PPT：Building Faster Websites , Ilya Grigorik

　　如何在網(wǎng)站的角度考慮整體性能的提升。

　　JavaScript

　　PPT：Breaking the JavaScript Speed Limit With V8 , Daniel Clifford

　　如何打破V8執(zhí)行腳本的速度限制。

　　十、測(cè)試

　　理解代碼的不好的原因

　　PPT：Why Our Code Smells , Brandon Keepers (Video )

　　這個(gè)主題中，Brandon會(huì)介紹他日常的代碼，尋找那些會(huì)引起問(wèn)題的劣質(zhì)代碼，理解為什么會(huì)出現(xiàn)這些代碼，并且這些代碼意味著什么，最后介紹如何對(duì)其進(jìn)行重構(gòu)。

　　CURRENT STATE OF THE ART

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

　　如何利用測(cè)試工具，來(lái)保證一個(gè)應(yīng)用的體驗(yàn)。

　　提高代碼的可測(cè)試性

　　PPT：Writing Testable JavaScript , Rebecca Murphey (Audio )

　　十一、總結(jié)

　　花在思考自己技術(shù)提升上的時(shí)間是非常值得的。磨練的越多，你就更有機(jī)會(huì)去成為一名優(yōu)秀的工程師。

　　這個(gè)列表不一定會(huì)覆蓋今年所有優(yōu)秀的PPT，不過(guò)還是希望能給大家提供一些指引。去閱讀一些你感興趣的。這樣的閱讀會(huì)提高你的能力，也希望能真正為你的日常開(kāi)發(fā)提供幫助。