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