5.28日音訊,網(wǎng)頁制作者需用技術(shù)來升華自己。隨著技術(shù)的更新?lián)Q代,越來越強(qiáng)大的網(wǎng)頁制作技術(shù)被廣泛的應(yīng)用開來,摒棄老的方法,應(yīng)用新的方法是大部分人非常在意,這也是體現(xiàn)一個制作者的能力的問題。但是保持對新技術(shù)的了解是一項不小的挑戰(zhàn),畢竟我們需要的信息在數(shù)量上過于龐大。伴隨著前端發(fā)展的是大量的革命性突破和對前端的重新定義。
我們在實踐的路上飛速前進(jìn),具體的進(jìn)步體現(xiàn)在使用抽象化,優(yōu)秀的代碼質(zhì)量,維護(hù)性上的提升以及更好的性能。如果你實在忙到?jīng)]有時間來跟上最新的技術(shù),不用擔(dān)心。
隨著2013端午假日的來臨,我們就有了一些空閑的時間可以自己支配,我想,如果我把我收集的前端相關(guān)的精品討論列表分享出來,那一定會對大家有一些幫助。你不需要把所有的都閱讀一遍,但是這些相關(guān)的建議會讓你了解更多相關(guān)的知識,為明年成為一名更好的前工程端開發(fā)師做準(zhǔn)備。
基礎(chǔ)部分
走在技術(shù)前沿的方法
HowtoStayUptoDateonWebStuff,ChrisCoyier
即使技術(shù)相關(guān)的理念會不斷變化,我們依然可以做到讓自己處于技術(shù)的前沿。
確保你的開發(fā)模式已經(jīng)跟上時代
ANewBaselineforFront-EndDevelopers,RebeccaMurphey
曾經(jīng)在我們編輯文件的時候,本地測試完然后傳到ftp上是最常規(guī)的做法。我們通過一個前端是否能編寫一個兼容ie6的頁面來判斷他的前端水平。我們在html,css和javascript中的技術(shù)都不夠強(qiáng)悍。
這樣的情況在近幾年有了很大的轉(zhuǎn)變,隨著工作方式的改進(jìn)和各類工具的推出。前端開發(fā)越來越受到重視,這個主題講解了前端在開發(fā)中的新起點。
前端開發(fā)工程師的新起點
理解瀏覽器在屏幕后面的工作原理
So,YouWanttoBeaFront-EndEngineer,DavidMosher(Video)
有些人會說,瀏覽器是他所知道的開發(fā)平臺中最不穩(wěn)定的一個。如果你是一個客戶端開發(fā)工程師,理解瀏覽器內(nèi)部工作原理會幫助你作出更好的決定,并且你也會贊嘆那些最佳實踐背后的種種辯論。在這個今年最好的主題之一里,davidmosher會待你了解瀏覽器的解析和頁面的渲染。
了解web平臺現(xiàn)在需要提供什么
ToolingfortheModernWebAppDeveloper,AddyOsmani
web在不斷的進(jìn)化,了解這個平臺中新出的技術(shù)不是一件容易的事情。html5的新特性讓我們可以構(gòu)建一個完全嶄新的web應(yīng)用,包含很多以前無法實現(xiàn)的特性(至少,在沒有插件的情況下)。
在這個主題中,我的隊友eric會帶你了解html5的痛苦邊緣,關(guān)注很多解決現(xiàn)實世界問題的方案。你會了解媒體流,設(shè)備輸入,現(xiàn)代css設(shè)計,媒體捕捉,文件i/o等等。
工作方式
webapp開發(fā)工程師的工作方式
無論你在使用coffeescript還是javascript,less還是sass,構(gòu)建一個好的web應(yīng)用在現(xiàn)在需要大量引用外部資源,框架,工具和結(jié)合工具來將他們整合到一起。簡單地說,你需要一個打屁股用的實用腰帶。
在這個主題中,你會了解到當(dāng)前前端系統(tǒng)的概況,并學(xué)習(xí)到一個新工具來整合這些系統(tǒng),叫做yeoman。
你還可以訪問這個主題的擴(kuò)展版本。
web設(shè)計師的工作方式
AModernWebDesigner’sWorkflow,ChrisCoyier(Video)
今天我們對web構(gòu)架師的要求很高。如果在以前,這個崗位名稱已經(jīng)表達(dá)了它所對應(yīng)的工作,但是現(xiàn)在不僅僅是視覺設(shè)計崗位,甚至涉及到交互的構(gòu)建。設(shè)計師需要考慮不同形狀,不同尺寸,不同連接方式的不同設(shè)備,并且這些設(shè)備下都要能正常工作。
作為一個設(shè)計師,你通常需要在團(tuán)隊之間溝通和分享代碼,并且需要了解很多不同的技術(shù)。在這個主題中,chriscoyier會說到很多令人贊嘆的工具來幫助手頭的工作更加順利地完成,還會討論應(yīng)該做些什么來提供一個高水準(zhǔn)的現(xiàn)代工作流。
移動web開發(fā)的工作方式
MobileWebDevelopersToolbelt,PeteLePage(Video)
移動端開發(fā)和PC端開發(fā)有很大的不同,這個主題講述了各種工具來讓移動web開發(fā)更加方便,讓移動web開發(fā)更加容易。
如何調(diào)試
SecretsoftheChromeDevTools,PatrickDubroy(Video)
深度了解谷歌開發(fā)者工具
面向未來的開發(fā)
CSS
TheCSSofTomorrow,PeterGasston
這個主題介紹了CSS給你現(xiàn)在的開發(fā)帶來了什么,作為一個CSS程序員,如何利用CSS3來實現(xiàn)面向未來的開發(fā)。
JAVASCRIPT
TheFutureofJavaScript,DaveHerman
了解ES6的新特性,以及使用方式
WEBAPPLICATIONS
WebComponentsandtheFutureofWebAppDevelopment,EricBidelman
如何更好地將各種新技術(shù)整合到你的web應(yīng)用中。
CSS領(lǐng)域中的藝術(shù)
AlltheNewCSSHawtness,DarcyClarke
這個主題介紹了最新的CSS實現(xiàn)以及相關(guān)的標(biāo)準(zhǔn),并且學(xué)習(xí)到這些新的CSS技術(shù)是如何改變我們的日常開發(fā)。
模塊化CSS
YourCSSIsaMess,JonathanSnook
大部分人的CSS代碼都是一團(tuán)糟,在這個主題中,你會知道如何解決CSS的模塊化問題,方便管理和維護(hù)。
CSS的預(yù)處理器
CSSPre-Processors,BermonPainter
如果你還沒有用過CSS預(yù)處理器,那你就OUT了。這個主題會對比較流行的幾個CSS預(yù)處理器進(jìn)行概述。
文檔
ABetterFutureWithKSS,KyleNeath
本主題介紹了Kyle的一個工具,KSS,用于生成CSS文件的文檔和代碼格式化。
JavaScript
代碼風(fēng)格的重要性
MaintainableJavaScript,NicholasZakas
編寫有趣的JavaScript代碼和編寫專業(yè)的JavaScript代碼是兩碼事,在Zakas的這個主題中,你會學(xué)習(xí)到如何做到編寫可持續(xù)性維護(hù)的JavaScript代碼
構(gòu)建大規(guī)模的APP
SoundCloud’sStack,NickFisher
這個主題中,來自SoundCloud的NickFisher會介紹他們公司開發(fā)一個大規(guī)模JavaScriptAPP的故事,并且分享他們的開發(fā)步驟以及如何提高開發(fā)效率。
重新思考應(yīng)用的結(jié)構(gòu)
Re-ImaginingtheBrowserWithAngularJS,IgorMinar
在這個主題中,你會了解如何將未來Web平臺的力量使用到當(dāng)前的Web應(yīng)用中。
國際化
Entschuldigenyou,parlezvouzJavaScript,SebastianGolasch(Video)
這個主題中,Sebastian介紹了從如何定位現(xiàn)實世界中的國際化問題,到如何用優(yōu)雅的方式進(jìn)行解決。
模式和原則
ThePlightofPinocchio,BrandonKeepers
我們需要將JavaScript作為一門真正的語言,就需要能在JavaScript上使用真正的語言會使用的各種最佳實踐。JavaScript不再是一門玩具語言。
什么時候來延遲(惰性)加載腳本
HowLateIsLater?,MassimilianoMarcon
我們都知道延遲(惰性)加載腳本可以提高Web應(yīng)用的加載時間,那么什么時候才是正確的時間來加載腳本呢?
移動Web開發(fā)
CreatingResponsiveHTML5TouchInterfaces,StephenWoods(Video|Audio)
如何去解決UI和用戶間交互的問題,避免這些陷阱是很多應(yīng)用開發(fā)者在未來需要面對的。
來自滾動條的挑戰(zhàn)
EmbracingTouch:Cross-PlatformScrolling,MarkDalgleish(Video)
滾動效果是最流行的移動頁面的方式??上Щ瑒拥男Ч偸遣荒芘c原生滾動條媲美。我們應(yīng)該如何在移動瀏覽器上解決這個問題?
原生,HTML5和混合的應(yīng)用
Native,HTML5andHybridMobileDevelopment,EranZinman
這個主題中,Eran分享了他在跨平臺開發(fā)中的經(jīng)驗。
性能,分布和facebook在HTML5上的實踐
OntheFutureofMobileWebApps,SimonCross
facebook利用HTML5做了什么?還有什么需要改進(jìn)?
移動開發(fā)的調(diào)試工具
MobileDebugging,RemySharp
響應(yīng)式設(shè)計技術(shù)
ResponsiveWebDesign:CleverTipsandTechniques,VitalyFriedman
這個主題提供了響應(yīng)式設(shè)計實現(xiàn)的概述。
WebApps
離線的web應(yīng)用
OfflineRules,AndrewBetts(Video)
如何在Web應(yīng)用中做到客戶端的存儲,并且如何將其用在提高網(wǎng)站的體驗上。
STATEOFTHEART
BuildingWebAppsoftheFuture:Tomorrow,TodayandYesterday,PaulKinlan(Audio)
Paul介紹了如何構(gòu)建面向未來的webapp。
客戶端存儲
StorageintheBrowser,AndrewBetts
應(yīng)用緩存
ApplicationCache:Douchebag,JakeArchibald(Video)
如何利用ApplicationCache來構(gòu)建你的網(wǎng)站
性能
CSS
High-PerformanceCSS,PaulIrish
找出那些影響頁面性能的CSS,比如引發(fā)瀏覽器繪制至少多70毫秒的box-shadow,以及解決方案。
避免JANK
Jank-Free:InPursuitofSmoothWebApps,TomWiltzius
JANK是指當(dāng)動畫頓卡,特效執(zhí)行緩慢,或者頁面滾動慢時的一種狀態(tài)。該主題介紹了如何避免這些狀態(tài)。
Web
BuildingFasterWebsites,IlyaGrigorik
如何在網(wǎng)站的角度考慮整體性能的提升。
JavaScript
BreakingtheJavaScriptSpeedLimitWithV8,DanielClifford
如何打破V8執(zhí)行腳本的速度限制。
測試
理解代碼的不好的原因
WhyOurCodeSmells,BrandonKeepers(Video)
這個主題中,Brandon會介紹他日常的代碼,尋找那些會引起問題的劣質(zhì)代碼,理解為什么會出現(xiàn)這些代碼,并且這些代碼意味著什么,最后介紹如何對其進(jìn)行重構(gòu)。
CURRENTSTATEOFTHEART
JavaScriptTesting:TheHolyGrail,AdamHawkins(Video)
如何利用測試工具,來保證一個應(yīng)用的體驗。
提高代碼的可測試性
WritingTestableJavaScript,RebeccaMurphey(Audio)
總之,無論你是在職員工還是技術(shù)高管,提升自己的技術(shù)水平是現(xiàn)實所需的,花在思考自己技術(shù)提升上的時間是非常值得的,只有不斷的學(xué)習(xí)、不斷的磨煉才能把自己武裝成一個強(qiáng)者,才能面對日新月異的互聯(lián)網(wǎng)變化,才能更有機(jī)會去成為一名優(yōu)秀的網(wǎng)頁前端工程師。