前端開發(fā)工程師如何在新的一年里提升自己
大部分人非常在意個人在技術(shù)上的提升。但是保持對新技術(shù)的了解是一項不小的挑戰(zhàn), 畢竟我們需要的信息在數(shù)量上過于龐大。2012年里,伴隨著前端發(fā)展的是大量的革命性突破和對前端的重新定義。
我們在實踐的路上飛速前進,具體的進步體現(xiàn)在使用抽象化,優(yōu)秀的代碼質(zhì)量,維護性上的提升以及更好的性能。如果你實在忙到?jīng)]有時間來跟上***的技術(shù),不用擔心。
隨著假日的來臨,我們就有了一些空閑的時間可以自己支配,我想,如果我把我收集的前端相關(guān)的精品討論列表分享出來,那一定會對大家有一些幫助。你不需要把所有的都閱讀一遍,但是這些相關(guān)的建議會讓你了解更多相關(guān)的知識,為明年成為一名更好的前工程端開發(fā)師做準備。
基礎(chǔ)部分
走在技術(shù)前沿的方法
How to Stay Up to Date on Web Stuff, Chris Coyier
即使技術(shù)相關(guān)的理念會不斷變化,我們依然可以做到讓自己處于技術(shù)的前沿。
確保你的開發(fā)模式已經(jīng)跟上時代
A New Baseline for Front-End Developers, Rebecca Murphey
曾經(jīng)在我們編輯文件的時候,本地測試完然后傳到ftp上是最常規(guī)的做法。我們通過一個前端是否能編寫一個兼容ie6的頁面來判斷他的前端水平。我們在html,css和javascript中的技術(shù)都不夠強悍。
這樣的情況在近幾年有了很大的轉(zhuǎn)變,隨著工作方式的改進和各類工具的推出。前端開發(fā)越來越受到重視,這個主題講解了前端在開發(fā)中的新起點。
前端開發(fā)工程師的新起點
理解瀏覽器在屏幕后面的工作原理
So, You Want to Be a Front-End Engineer, David Mosher (Video)。
有些人會說,瀏覽器是他所知道的開發(fā)平臺中最不穩(wěn)定的一個。如果你是一個客戶端開發(fā)工程師,理解瀏覽器內(nèi)部工作原理會幫助你作出更好的決定,并且你 也會贊嘆那些***實踐背后的種種辯論。在這個今年***的主題之一里,david mosher會待你了解瀏覽器的解析和頁面的渲染。
了解web平臺現(xiàn)在需要提供什么
Tooling for the Modern Web App Developer, Addy Osmani
web在不斷的進化,了解這個平臺中新出的技術(shù)不是一件容易的事情。html5的新特性讓我們可以構(gòu)建一個完全嶄新的web應用,包含很多以前無法實現(xiàn)的特性(至少,在沒有插件的情況下)。
在這個主題中,我的隊友eric會帶你了解html5的痛苦邊緣,關(guān)注很多解決現(xiàn)實世界問題的方案。你會了解媒體流,設(shè)備輸入,現(xiàn)代css設(shè)計,媒體捕捉,文件i/o等等。
#p#
工作方式
web app開發(fā)工程師的工作方式
無論你在使用coffeescript還是javascript,less還是sass,構(gòu)建一個好的web應用在現(xiàn)在需要大量引用外部資源,框架,工具和結(jié)合工具來將他們整合到一起。簡單地說,你需要一個打屁股用的實用腰帶。
在這個主題中,你會了解到當前前端系統(tǒng)的概況,并學習到一個新工具來整合這些系統(tǒng),叫做yeoman。
你還可以訪問這個主題的擴展版本。
web設(shè)計師的工作方式
A Modern Web Designer’s Workflow, Chris Coyier (Video)
今天我們對web構(gòu)架師的要求很高。如果在以前,這個崗位名稱已經(jīng)表達了它所對應的工作,但是現(xiàn)在不僅僅是視覺設(shè)計崗位,甚至涉及到交互的構(gòu)建。設(shè)計師需要考慮不同形狀,不同尺寸,不同連接方式的不同設(shè)備,并且這些設(shè)備下都要能正常工作。
作為一個設(shè)計師,你通常需要在團隊之間溝通和分享代碼,并且需要了解很多不同的技術(shù)。在這個主題中,chris coyier會說到很多令人贊嘆的工具來幫助手頭的工作更加順利地完成,還會討論應該做些什么來提供一個高水準的現(xiàn)代工作流。
移動web開發(fā)的工作方式
Mobile Web Developers Toolbelt, Pete Le Page (Video)
移動端開發(fā)和PC端開發(fā)有很大的不同,這個主題講述了各種工具來讓移動web開發(fā)更加方便,讓移動web開發(fā)更加容易。
如何調(diào)試
Secrets of the Chrome DevTools, Patrick Dubroy (Video)
深度了解谷歌開發(fā)者工具
#p#
面向未來的開發(fā)
CSS
The CSS of Tomorrow, Peter Gasston
這個主題介紹了CSS給你現(xiàn)在的開發(fā)帶來了什么,作為一個CSS程序員,如何利用CSS3來實現(xiàn)面向未來的開發(fā)。
JavaScript
The Future of JavaScript, Dave Herman
了解ES6的新特性,以及使用方式
WEB APPLICATIONS
Web Components and the Future of Web App Development, Eric Bidelman
如何更好地將各種新技術(shù)整合到你的web應用中。
#p#
CSS
CSS領(lǐng)域中的藝術(shù)
All the New CSS Hawtness, Darcy Clarke
這個主題介紹了***的CSS實現(xiàn)以及相關(guān)的標準,并且學習到這些新的CSS技術(shù)是如何改變我們的日常開發(fā)。
模塊化CSS
Your CSS Is a Mess, Jonathan Snook
大部分人的CSS代碼都是一團糟,在這個主題中,你會知道如何解決CSS的模塊化問題,方便管理和維護。
CSS的預處理器
CSS Pre-Processors, Bermon Painter
如果你還沒有用過CSS預處理器,那你就OUT了。這個主題會對比較流行的幾個CSS預處理器進行概述。
文檔
A Better Future With KSS, Kyle Neath
本主題介紹了Kyle的一個工具,KSS,用于生成CSS文件的文檔和代碼格式化。
#p#
JavaScript
代碼風格的重要性
Maintainable JavaScript, Nicholas Zakas
編寫有趣的JavaScript代碼和編寫專業(yè)的JavaScript代碼是兩碼事,在Zakas的這個主題中,你會學習到如何做到編寫可持續(xù)性維護的JavaScript代碼
構(gòu)建大規(guī)模的APP
SoundCloud’s Stack, Nick Fisher
這個主題中,來自SoundCloud的Nick Fisher會介紹他們公司開發(fā)一個大規(guī)模JavaScript APP的故事,并且分享他們的開發(fā)步驟以及如何提高開發(fā)效率。
重新思考應用的結(jié)構(gòu)
Re-Imagining the Browser With AngularJS, Igor Minar
在這個主題中,你會了解如何將未來Web平臺的力量使用到當前的Web應用中。
國際化
Entschuldigen you, parlez vouz JavaScript, Sebastian Golasch (Video)
這個主題中,Sebastian介紹了從如何定位現(xiàn)實世界中的國際化問題,到如何用優(yōu)雅的方式進行解決。
模式和原則
The Plight of Pinocchio, Brandon Keepers
我們需要將JavaScript作為一門真正的語言,就需要能在JavaScript上使用真正的語言會使用的各種***實踐。JavaScript不再是一門玩具語言。
什么時候來延遲(惰性)加載腳本
How Late Is Later?, Massimiliano Marcon
我們都知道延遲(惰性)加載腳本可以提高Web應用的加載時間,那么什么時候才是正確的時間來加載腳本呢?
#p#
移動Web開發(fā)
Creating Responsive HTML5 Touch Interfaces, Stephen Woods (Video|Audio)
如何去解決UI和用戶間交互的問題,避免這些陷阱是很多應用開發(fā)者在未來需要面對的。
來自滾動條的挑戰(zhàn)
Embracing Touch: Cross-Platform Scrolling, Mark Dalgleish (Video)
滾動效果是***的移動頁面的方式。可惜滑動的效果總是不能與原生滾動條媲美。我們應該如何在移動瀏覽器上解決這個問題?
原生,HTML5和混合的應用
>Native, HTML5 and Hybrid Mobile Development, Eran Zinman
這個主題中,Eran分享了他在跨平臺開發(fā)中的經(jīng)驗。
性能,分布和facebook在HTML5上的實踐
On the Future of Mobile Web Apps, Simon Cross
facebook利用HTML5做了什么?還有什么需要改進?
#p#
移動開發(fā)的調(diào)試工具
Mobile Debugging, Remy Sharp
響應式設(shè)計技術(shù)
Responsive Web Design: Clever Tips and Techniques, Vitaly Friedman
這個主題提供了響應式設(shè)計實現(xiàn)的概述。
Web Apps
離線的web應用
Offline Rules, Andrew Betts (Video)
如何在Web應用中做到客戶端的存儲,并且如何將其用在提高網(wǎng)站的體驗上。
STATE OF THE ART
Building Web Apps of the Future: Tomorrow, Today and Yesterday, Paul Kinlan (Audio)
Paul介紹了如何構(gòu)建面向未來的web app。
#p#
客戶端存儲
Storage in the Browser, Andrew Betts
應用緩存
Application Cache: Douchebag, Jake Archibald (Video)
如何利用Application Cache來構(gòu)建你的網(wǎng)站
性能
CSS
High-Performance CSS, Paul Irish
找出那些影響頁面性能的CSS,比如引發(fā)瀏覽器繪制至少多70毫秒的box-shadow,以及解決方案。
GitHub’s CSS Performance, Jon Rohan
避免JANK
Jank-Free: In Pursuit of Smooth Web Apps, Tom Wiltzius
JANK是指當動畫頓卡,特效執(zhí)行緩慢,或者頁面滾動慢時的一種狀態(tài)。該主題介紹了如何避免這些狀態(tài)。
Web
Building Faster Websites, Ilya Grigorik
如何在網(wǎng)站的角度考慮整體性能的提升。
JavaScript
Breaking the JavaScript Speed Limit With V8, Daniel Clifford
如何打破V8執(zhí)行腳本的速度限制。
#p#
測試
理解代碼的不好的原因
Why Our Code Smells, Brandon Keepers (Video)
這個主題中,Brandon會介紹他日常的代碼,尋找那些會引起問題的劣質(zhì)代碼,理解為什么會出現(xiàn)這些代碼,并且這些代碼意味著什么,***介紹如何對其進行重構(gòu)。
CURRENT STATE OF THE ART
JavaScript Testing: The Holy Grail, Adam Hawkins (Video)
如何利用測試工具,來保證一個應用的體驗。
提高代碼的可測試性
Writing Testable JavaScript, Rebecca Murphey (Audio)
總結(jié)
花在思考自己技術(shù)提升上的時間是非常值得的。磨練的越多,你就更有機會去成為一名優(yōu)秀的工程師。
這個列表不一定會覆蓋今年所有優(yōu)秀的PPT,不過還是希望能給大家提供一些指引。去閱讀一些你感興趣的。這樣的閱讀會提高你的能力,也希望能真正為你的日常開發(fā)提供幫助。
***,祝大家享受節(jié)日,新的一年有更多的進步和突破。