本文編譯：劉晶，一個(gè)玩 web 前端開發(fā)的 code monkey，也喜歡 UI 設(shè)計(jì)，他還做過后端開發(fā)，現(xiàn)擔(dān)任點(diǎn)融前端資深開發(fā)工程師。

　　高貴的前端程序猿們

　　如何在前端開發(fā)這種高精尖的技術(shù)領(lǐng)域找到心儀的工作?實(shí)現(xiàn)在咖啡館喝喝咖啡敲敲代碼就能升職加薪、買房買車、迎娶白富美走上人生巔峰的職業(yè)夢(mèng)想?這篇《進(jìn)化論：從 0 到 100，前端猿茁壯成長(zhǎng)的精神飼料史》，肯定能給你事業(yè)的加速動(dòng)力。

        前端開發(fā)工作已經(jīng)變的越來越復(fù)雜，僅僅是想羅列一份前端開發(fā)的學(xué)習(xí)列表就已經(jīng)是一件艱巨的工作。曾經(jīng)只要會(huì)編寫 HTML, CSS 和 Javascript 就是能夠找到一份前端開發(fā)工作的全部要求。而現(xiàn)在，web 開發(fā)遠(yuǎn)遠(yuǎn)不止是簡(jiǎn)單編碼。因?yàn)槲覀兊幕ヂ?lián)網(wǎng)上有了更多的內(nèi)容，也因?yàn)橛懈嗟娜?、更多設(shè)備可以訪問互聯(lián)網(wǎng), web 前端開發(fā)技能也就更多了。我們現(xiàn)在需要考慮的問題很多，比如載入時(shí)間，性能，不同的屏幕尺寸, 不同的輸入方式, build 系統(tǒng), 部署策略，還有如何組織好我們的代碼。

        這還是想象中前端開發(fā)么?好吧其實(shí)只要你有熱情，這些還是很有趣的，現(xiàn)在就來仔細(xì)看看，一份前端開發(fā)的工作，到底需要你準(zhǔn)備些什么?

　　入行行頭：5 大硬件

　　請(qǐng)準(zhǔn)備好以下東西

　　1.一顆人類的大腦：智商在平均水平線以上即可

　　2.一份強(qiáng)烈的渴望：我的代碼要可以運(yùn)行在任何一個(gè)有瀏覽器的設(shè)備上。

　　3.一臺(tái)筆記本電腦：不需要花費(fèi)很多錢得那種，只要它可以運(yùn)行 Windows, Mac OS X, 或 Linux 系統(tǒng)。當(dāng)然你也可以只用一臺(tái)臺(tái)式機(jī)，但是那樣就不能帶著它坐在咖啡館里...

　　4.一個(gè)文本編輯器：可以推薦的比如 Atom,Visual Studio Code, TextMate, 它們都有在 Mac OS, Windows 的免費(fèi)版本，什么還有 Sublime, WebStorm? 啊，那些都很流行，不過需要需要一筆不少于 70 美元的花費(fèi)...

　　5.一個(gè)翻墻代理：這個(gè)大家都懂的，我就不解釋了

　　初級(jí)資質(zhì)要求

　　一些專業(yè)基礎(chǔ)

　　你需要學(xué)會(huì)瀏覽器能理解的三大語言：HTML, CSS, Javascript - 神圣的三位一體!

　　非常重要的一點(diǎn)是，一定要理解這三大語言后再去學(xué)習(xí)別的，確保知道怎樣在各種尺寸的屏幕上排列好你的網(wǎng)頁，怎樣在一個(gè)按鈕被按下后 do something!

　　一些很有用的學(xué)習(xí)資源

　　Codeacademy: interactive, code-along tutorials (this site is the bomb btw)

　　Web Development for Beginners: article from webplatform.org.

　　MDN：https://developer.mozilla.org/en-US/docs/Web

　　中級(jí)進(jìn)階路徑

        一旦掌握了三大語言，就可以開始學(xué)習(xí)專業(yè)的開發(fā)流程啦：

　　1.Command line：好吧,命令行也許都會(huì),但是要掌握最基本的操作,熟悉怎樣配置你的環(huán)境,還有那些奇怪的 shell 腳本，因?yàn)槟銜?huì)經(jīng)常用到它們。

　　2.CSS 已經(jīng)不夠用了,我們有了 CSS 的預(yù)處理：Sass, LESS。

　　3.知道如何搭建一個(gè) build 系統(tǒng)：Gulp 或 Grunt 這類的構(gòu)建任務(wù)腳本器,編譯 LESS 成 CSS, concatenating Javascript, minify 壓縮靜態(tài)資源, 選一個(gè)異步或同步的方式加載它們，然后一個(gè)好的 build 系統(tǒng)要能自動(dòng)做到那些,包括一個(gè)本地的 web 服務(wù)器用于測(cè)試代碼。

　　4.代碼版本管理，git。

　　5.在 github 上分享你的代碼!

　　6.部署! 讓你的網(wǎng)站上線?？梢哉乙粋€(gè)免費(fèi)的服務(wù)提供商，比如 heroku.com, https://pages.github.com

　　這些幾乎就是現(xiàn)代前端開發(fā)者會(huì)用到的工具和技術(shù)，好了，你現(xiàn)在可以成為一個(gè)前端開發(fā)工程師了。

　　高級(jí)炸裂裝備

　　你已經(jīng)能夠?yàn)槟愕呐笥训臉I(yè)務(wù)搭建一個(gè)網(wǎng)站了，簡(jiǎn)潔的排版，高清大照片，你成功了，它甚至在你的手機(jī)都看著很棒。那么還有什么值得學(xué)的?

　　把你的網(wǎng)站和一個(gè)內(nèi)容管理系統(tǒng) (CMS)集成在一起。一個(gè) CMS 能夠讓你通過用戶界面增、刪、改、組織你的內(nèi)容，不需要任何代碼。這就是那些博客網(wǎng)站如何工作的。比如免費(fèi)的 WordPress，去熟悉一個(gè)開源的 CMS 吧，會(huì)很有用的。

　　學(xué)習(xí)怎樣搭建一個(gè) CMS，意味著你講要熟悉一個(gè)服務(wù)器端的語言，比如 Node.js, 或 PHP，然后你還會(huì)想要知道怎樣和數(shù)據(jù)庫打交道，比如 MySql 或者 MongoDB。

　　來熟悉一種 Javascript 框架吧，這樣你可以真正的搭建一個(gè)交互出色的 web 應(yīng)用，那真的很重要，比如 Angular, React, Ember。只要挑一個(gè)你喜歡的，但是一定要精通它。

　　Javascript design patterns，javascript 也有設(shè)計(jì)模式? 是的，讀一下吧。

　　突破天際的大招

　　溝通技巧!你需要和你的小伙伴們溝通，他們是你的 coder 伙伴，你的老板，你的用戶，你的....stackoverflow.com， 有問題找 stackoverflow，擴(kuò)展一下人脈把，上 meetup.com, 在博客上寫一些你的學(xué)習(xí)體驗(yàn)， 在 Gitgub 貢獻(xiàn)一下你的 Pull request。

　　界面設(shè)計(jì)和用戶體驗(yàn)設(shè)計(jì) UI/UX design，前段開發(fā)的小伙伴需要具備基本的 UI/UX 設(shè)計(jì)知識(shí)。

　　搜索優(yōu)化，要知道怎樣提高網(wǎng)站的搜索排名，更容易被人們搜索到。

　　CSS 過度效果，給你的按鈕寫一個(gè) hover 的 CSS 動(dòng)畫，還有你的從右邊滑入的導(dǎo)航菜單也需要一個(gè)平滑的動(dòng)畫。

　　關(guān)于性能，讓你的網(wǎng)站盡可能快的被加載，減少 DOM 的 reflow 和 repaint 操作，防止?jié)L動(dòng)性能瓶頸，優(yōu)化 Javascript, 翻墻讀一讀這個(gè)吧 google web developer fundamentals。

　　用一些測(cè)試框架來實(shí)現(xiàn) Javascript 單元測(cè)試，比如 Jasmine，QUnit。

　　持續(xù)集成 Continuous integration (CI)，知道怎樣配置一套和伙伴們一起使用的自動(dòng)測(cè)試和部署的工具，比如 CircleCI, Travis CI, Jenkins.

　　超好用的其他加成技能

　　↓↓↓這些并非必須，但能幫你脫穎而出：

　　用 CSS3, SVG, Canvas API 實(shí)現(xiàn)動(dòng)畫。

　　后端開發(fā)， Node.js

　　最后：去找工作吧!

　　有了技能是不夠的，你需要能展示它們，你還能干的是：

　　1.搭建一個(gè)小網(wǎng)站，公開你的 gitub 代碼庫，確保你的代碼和文檔清楚漂亮，還有一份 README

　　2.去 meetup.com 找你的老板或者投資人吧，開一個(gè)博客，申請(qǐng)一個(gè) linkedin 帳號(hào)

　　3.因?yàn)?web 技術(shù)總是在變化，最后，即使找到了一份稱心的工作，還是需要 stay motivated, 你需要時(shí)常去下面這些地方轉(zhuǎn)轉(zhuǎn)：CSS Tricks，SitePoint，Smashing Magazine

　　4.當(dāng)然還有些像 CSDN 這樣中文社區(qū)，總之遇到任何難題，社區(qū)里有總有樂于助人的。

　　5.保持好的職業(yè)態(tài)度：Stay humble, and build cool shit

        如果您對(duì)您所在的行業(yè)有很深的認(rèn)知，也想在我們的平臺(tái)上說點(diǎn)什么，我們歡迎您來投稿!