我是怎么走上前端開(kāi)發(fā)這條路？

首先，我是個(gè)文科生，大學(xué)里只學(xué)過(guò)vb，覺(jué)得計(jì)算機(jī)編程這東西太玄乎，不是我玩得轉(zhuǎn)的。

后來(lái)機(jī)緣巧合去做了一家互聯(lián)網(wǎng)創(chuàng)業(yè)公司的HR，閱了上千份程序員的簡(jiǎn)歷，面了上百個(gè)不同水平不同領(lǐng)域的程序員。跟程序員接觸得越多，我越覺(jué)得編程是一件很有挑戰(zhàn)、很有趣的事情。尤其是前端這一塊，結(jié)識(shí)了好幾位前端大牛。其中一位告訴我，如果你真的感興趣，那就先去寫幾個(gè)HTML靜態(tài)頁(yè)面吧。

可當(dāng)時(shí)我連個(gè)HELLO WORLD都不會(huì)寫，更不知道HTML是個(gè)啥?

于是我花了一個(gè)晚上在慕課網(wǎng)上聽(tīng)了幾節(jié)HTML+CSS基礎(chǔ)課，第二天我把w3school在線教程上HTML+CSS的API全部過(guò)了一遍后，隨便在網(wǎng)上找了個(gè)簡(jiǎn)單又漂亮的網(wǎng)頁(yè)，就開(kāi)始仿寫我的***個(gè)HTML靜態(tài)頁(yè)面了。

那幾天一連模仿寫了好幾個(gè)HTML靜態(tài)頁(yè)面（寫不出的地方我就直接打開(kāi)chrome控制臺(tái)，copy那部分的樣式）。

當(dāng)時(shí)白天要上班，只有晚上有時(shí)間可以寫HTML。這對(duì)寫代碼上了癮的我來(lái)說(shuō)實(shí)在不痛快，剛好當(dāng)時(shí)公司人員配置基本完整，我的招聘任務(wù)也可以告一段落了。我便暫時(shí)離開(kāi)了公司開(kāi)始了我的一個(gè)月前端自學(xué)生涯。

這一個(gè)月我做了什么

看書

經(jīng)過(guò)之前的仿寫網(wǎng)頁(yè)頁(yè)面的練習(xí)，我已經(jīng)對(duì)常用的HTML標(biāo)簽、css樣式比較熟練了，是時(shí)候開(kāi)始系統(tǒng)的學(xué)習(xí)前端的各種技術(shù)了?？墒牵獜哪睦镩_(kāi)始呢？

***我決定先沿襲我大學(xué)時(shí)的學(xué)習(xí)方式————考期的***兩周把要考試科目的教材從頭到尾預(yù)習(xí)一遍再?gòu)?fù)習(xí)一遍。這種方式可以讓我在短時(shí)間內(nèi)了解這門科目包含的全部知識(shí)，并且發(fā)現(xiàn)這個(gè)科目的核心內(nèi)容或可能的考點(diǎn)。

于是，我在圖書館找來(lái)了JavaScript DOM編程藝術(shù) （第2版) 這本書，花了三、四天前后通讀了一遍，把其中的代碼事例也完整的自己敲了一遍。

這本書真的非常適合初學(xué)者，通俗易懂，講解詳細(xì)，讓我對(duì)javascript有了一個(gè)大概的了解，也讓我更有自信。于是，我馬上又從圖書館借了另外一本書————JavaScript高級(jí)程序設(shè)計(jì)（第3版），打算趁熱打鐵花一個(gè)禮拜的時(shí)間把這本書攻克下來(lái)。

然而最終我只讀到三分之一的位置就讀不下去了，因?yàn)槲矣X(jué)得這本書不是很適合初學(xué)者。尤其是第6、7章的面向?qū)ο蟮某绦蛟O(shè)計(jì)、閉包、繼承這些東西，雖然能讀懂但完全不知道為什么要面向?qū)ο?、為什么要使用閉包、為什么要繼承？

對(duì)于js的初學(xué)者來(lái)說(shuō)，你的***要?jiǎng)?wù)是把功能實(shí)現(xiàn)，把代碼寫出來(lái)，不要管代碼優(yōu)不優(yōu)美，放心大膽的repeat yourself。等未來(lái)你看別人優(yōu)秀的代碼多了，自然而然會(huì)去模仿，不斷改進(jìn)自己的代碼。

做題

讀了這一又三分之一本書后，我開(kāi)始尋找練兵場(chǎng)。很多人建議直接去github上pull request做項(xiàng)目。我的天，這對(duì)初學(xué)者來(lái)說(shuō)簡(jiǎn)直太難了，別人的代碼連看都看不懂更別談自己去寫了。

于是，我去quora中尋找答案，很快我就發(fā)現(xiàn)了一個(gè)人Quincy Larson——teacher at FreeCodeCamp.com，順著他的答案，我找到了他創(chuàng)辦的一個(gè)前端開(kāi)源社區(qū)————Free Code Camp。當(dāng)初我關(guān)注這個(gè)社區(qū)的時(shí)候，它的關(guān)注者才幾千人，截止到目前，它在github上已經(jīng)有93661顆星星了…

我可以肯定地告訴每一個(gè)前端初學(xué)者，F(xiàn)CC是你們***入門前端的地方，沒(méi)有之一。它為前端初學(xué)者設(shè)計(jì)了一套詳細(xì)的前端進(jìn)階路線，并且每一步都提供詳實(shí)的講解和針對(duì)性的實(shí)踐練習(xí)。具體的介紹FCC里面都有，基本上把它的所有課程都通關(guān)后在國(guó)內(nèi)找份前端的工作不成問(wèn)題。

FCC中對(duì)我最有用的部分是它的初級(jí)算法和中級(jí)算法這兩部分，可以作為對(duì)你前面js語(yǔ)法學(xué)習(xí)成果的一個(gè)檢驗(yàn)。所有題目都是沒(méi)有答案的，如果你實(shí)在解答不出的話，可以參考我當(dāng)時(shí)寫的一些答案（當(dāng)時(shí)的我很稚嫩…答案寫的很糟糕，但至少能解決那些問(wèn)題）

初級(jí)（http://blog.sina.com.cn/s/blog_13da815a90102vkdw.html）

中級(jí)（部分）(http://blog.sina.com.cn/s/blog_13da815a90102vkny.html)

高級(jí)（部分）(http://blog.sina.com.cn/s/blog_13da815a90102vl1v.html)

課程

寫代碼這活思路很重要，不過(guò)對(duì)初級(jí)前端來(lái)說(shuō)，熟能生巧更重要。所以接下來(lái)我混跡在各種國(guó)外網(wǎng)絡(luò)前端學(xué)習(xí)社區(qū)：Code School、Code Cademy、Khana Cademy等等，把其中我能看懂的部分幾乎全部看了一遍，代碼也都敲了一遍，扎扎實(shí)實(shí)的鞏固了幾遍前期我學(xué)到的各種前端知識(shí)。

我真誠(chéng)建議英語(yǔ)水平還可以的前端初學(xué)者不要去看國(guó)內(nèi)的視頻教學(xué)網(wǎng)站，都直接看國(guó)外的。

我真誠(chéng)的建議理解能力還可以的前端初學(xué)者不要去參加任何前端培訓(xùn)課程，網(wǎng)上的優(yōu)秀的資源多的都學(xué)不過(guò)來(lái)了，為什么還要花錢去被填鴨式教育？高中還沒(méi)被填鴨夠嗎？

我一直在做的事情

基本上做完上面三步我就去找工作了，最終去了一家創(chuàng)業(yè)公司，成了公司唯一的前端開(kāi)發(fā)。我非常感謝這家公司CEO對(duì)我的認(rèn)可，愿意接納一個(gè)前端的初學(xué)者進(jìn)公司，獨(dú)立負(fù)責(zé)前端方面的需求。我非常感謝CTO對(duì)我的信任，放心讓我自己去學(xué)習(xí)各種新的技術(shù)并運(yùn)用到公司實(shí)際項(xiàng)目當(dāng)中去。

下面的部分是我一直堅(jiān)持在做的，它們對(duì)我過(guò)去一年多的成長(zhǎng)起了至關(guān)重要的作用。

解惑

對(duì)初學(xué)者來(lái)說(shuō)，寫代碼的過(guò)程會(huì)遇到各種各樣奇葩的bug，當(dāng)你身邊空無(wú)一人，自己又苦苦找不出bug的原因的時(shí)候，誰(shuí)能幫助你？

答案是: Stack Overflow 和 Google。

我可以很肯定的告訴你們，你學(xué)習(xí)過(guò)程中遇到的一切問(wèn)題都能在google和stackoverflow上找到答案。如果找不到，說(shuō)明你問(wèn)題描述的有問(wèn)題。

說(shuō)起關(guān)于【學(xué)會(huì)提問(wèn)】這個(gè)話題，我在stackoverflow上還被扎扎實(shí)實(shí)地上過(guò)一課。我在stackoverflow上提的***個(gè)問(wèn)題見(jiàn)下圖:

然后這個(gè)話題就被踩了三次，得到的回答是這樣的：

這位仁兄說(shuō)的很對(duì)，這種找bug的提問(wèn)不應(yīng)該丟到stackoverflow來(lái)，自己仔細(xì)的去debug肯定能找到問(wèn)題所在的。之所以會(huì)提這種問(wèn)題，只有一個(gè)原因————懶，自己懶得花時(shí)間去debug。現(xiàn)在我偶爾有空上來(lái)segmentfault看一些提問(wèn)，還是會(huì)看到很多諸如『你能幫我看看哪里有問(wèn)題嗎？』、『不知道哪里錯(cuò)了』之類的伸手黨問(wèn)題。

我相信segmentfault問(wèn)答版塊的定位跟stackoverflow應(yīng)該是差不多的，既獎(jiǎng)勵(lì)優(yōu)質(zhì)的回答，也鼓勵(lì)優(yōu)質(zhì)的提問(wèn)。所以下次當(dāng)你有問(wèn)題的時(shí)候，先嘗試用一句通俗的話去概括你的問(wèn)題，再去google。無(wú)法用一句話通俗概括出來(lái)的問(wèn)題，不是一個(gè)好問(wèn)題。拒絕做伸手黨，從我做起。

前沿

當(dāng)你越深入地了解前端，越會(huì)發(fā)現(xiàn)它的美妙。這兩年前端領(lǐng)域的發(fā)展非?？欤鞣N有趣的新技術(shù)、框架、庫(kù)層出不窮，有無(wú)數(shù)優(yōu)秀的前端都在為前端技術(shù)在更廣更深的領(lǐng)域變得更牛逼而努力。

雖然初級(jí)前端的基本功很差，但這并不妨礙你去跟蹤前沿。千萬(wàn)不要關(guān)著門研讀經(jīng)典，前端技術(shù)發(fā)展那么快，很多過(guò)去奉為經(jīng)典的東西現(xiàn)在可能已經(jīng)過(guò)時(shí)了。

***的跟蹤前沿的方式就是訂閱一些前端方面的周報(bào)，它們把一周前端各個(gè)領(lǐng)域的一些優(yōu)秀的文章、教程、代碼整理成一份周報(bào)，你要做的僅僅是從一堆標(biāo)題的列表中找出標(biāo)題你能看懂或者感興趣的，然而再去讀。

我先列出部分我訂閱的周報(bào)：

Javascript Weekly（http://javascriptweekly.com/）

Mobile Web Weekly（http://mobilewebweekly.co/）

HTML5 Weekly（http://html5weekly.com/issues/231）

訂閱以上三個(gè)就足夠了，一定要看國(guó)內(nèi)的周報(bào)的話，碼農(nóng)周刊還可以。

這些周報(bào)里既有前沿的技術(shù)分享，又有大量?jī)?yōu)質(zhì)的tutorial，非常適合前端的學(xué)習(xí)。大家看周報(bào)讀文章盡量讀國(guó)外的，畢竟國(guó)內(nèi)的文章很多都是翻譯國(guó)外的，甚至直接抄襲…

如果還有富裕的時(shí)間，我還會(huì)去這幾個(gè)網(wǎng)站上吸金…

https://www.smashingmagazine.com/

https://css-tricks.com/

https://medium.com/

基本上每天早晨上班前，我就會(huì)大概瀏覽一下郵箱和以上三個(gè)網(wǎng)站，看到跟我最近做的工作相關(guān)領(lǐng)域的文章，用Readability直接send to kindle，然而空閑時(shí)間或者晚上再好好研讀它們。

其實(shí)很多文章都是科普性質(zhì)的，非常容易看懂，大家放開(kāi)膽去看吧，看不懂也沒(méi)關(guān)系，有個(gè)大概的印象就行了。

寶器

***我要祭出真正的大寶器，說(shuō)實(shí)話我前端學(xué)習(xí)時(shí)間的30%都花在這個(gè)大寶器上了…

這個(gè)大寶器就是https://www.youtube.com/

我簡(jiǎn)直無(wú)法用語(yǔ)言來(lái)形容它對(duì)我的幫助有多么大。

對(duì)于初學(xué)者來(lái)說(shuō)最頭疼的就是直接閱讀API或者源碼了，很多文檔寫的都不是給初學(xué)者看的。而youtube上有大量?jī)?yōu)秀的前端工作者上傳了他們對(duì)新技術(shù)新框架新庫(kù)的講解視頻，不僅幫助了我弄懂API, 更重要的是讓我看到這些API在實(shí)際項(xiàng)目當(dāng)中到底應(yīng)該怎么用。

推薦的頻道：

LevelUpTuts（https://www.youtube.com/user/LevelUpTuts/playlists）

The New Boston（https://www.youtube.com/channel/UCJbPGzawDH1njbqV-D5HqKw）

LearnCode.academy（https://www.youtube.com/channel/UCVTlvUkGslCV_h-nSAId8Sw）

除了以上幾個(gè)tutorial性質(zhì)的頻道外，大家還要關(guān)注一些jsconf的頻道。國(guó)外經(jīng)常會(huì)舉行js的研討分享會(huì)，邀請(qǐng)的嘉賓都是在各個(gè)領(lǐng)域研究比較深的，他們分享的東西大多是比較前沿同時(shí)有趣的東西，大家一定要定期跟蹤一下。

conf相關(guān)頻道:

JSConf（https://www.youtube.com/channel/UCzoVCacndDCfGDf41P-z0iA）

React.js Conf 2016（https://www.youtube.com/playlist?list=PLb0IAmt7-GS0M8Q95RIc2lOM6nc77q1IY）

***的坦白

***我得承認(rèn)這一次我又標(biāo)題黨了…無(wú)非是想吸引更多前端初學(xué)者進(jìn)來(lái)，希望大家都能少走一些彎路，也希望那些從零開(kāi)始自學(xué)前端的同學(xué)更有勇氣去面對(duì)自己的選擇。