拒當事情爆多的苦命雜工，前端工程師翻薪十倍不是夢_html/css_WEB-ITnose

高貴的前端工程師們：

如何在前端開發這種頂尖的技術領域找到心儀的工作？實現在咖啡館喝喝咖啡打 code 就能升職加薪、買房買車、迎娶白富美走上人生巔峰的職業夢想？前端開發工作已經變的越來越複雜，僅僅是想羅列一份前端開發的學習列表就已經是一件艱巨的工作。曾經只要會編寫 HTML、CSS 和 Javascript 就是能夠找到一份前端開發工作的全部要求。而現在，web 開發遠遠不止是簡單編碼。因為我們的互聯網上有了更多的內容，也因為有更多的人、更多設備可以訪問，web 前端開發技能也就更多了。

我們現在需要考慮的問題很多，比如載入時間、性能、不同的螢幕尺寸，不同的輸入方式，build 系統，部署策略，還有如何組織好我們的代碼。這還是想像中前端開發嗎？好吧，其實只要你有熱情，這些還是很有趣的，現在就來仔細看看，一份前端開發的工作，到底需要你準備些什麼?

• 入行行頭：5 大硬體

請準備好以下東西

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

一份強烈的渴望：我的 code 要可以運行在任何一個有瀏覽器的設備上。

一台筆記型電腦：不需要花費很多錢得那種，只要它可以運行 Windows，Mac OS X，或 Linux 系統。當然你也可以只用一台桌上型電腦，但是那樣就不能帶著它坐在咖啡館裡…

一個文字編輯器：可以推薦的比如 Atom、Visual Studio Code、TextMate，它們都有在 Mac OS，Windows 的免費版本，什麼還有 Sublime、WebStorm? 啊，那些都很流行，不過需要需要一筆不少於 70 美元的花費…

一個翻牆代理：這個大家都懂的，我就不解釋了

• 初級資質要求

一些專業基礎

你需要學會瀏覽器能理解的三大語言：HTML、CSS、Javascript －神聖的三位一體！

非常重要的一點是，一定要理解這三大語言後再去學習別的，確保知道怎樣在各種尺寸的螢幕上排列好你的網頁，怎樣在一個按鈕被按下後 do something！

一些很有用的學習資源

Codeacademy 、 Web Development for Beginners 、 MDN

• 中級進階路徑前端程式師：

一旦掌握了三大語言，就可以開始學習專業的開發流程啦：

1. Command line ：好吧，指令列也許都會, 但是要掌握最基本的操作，熟悉怎樣配置你的環境，還有那些奇怪的 shell 腳本，因為你會經常用到它們。

2. CSS 已經不夠用了，我們有了 CSS 的預處理：Sass，LESS。

3. 知道如何搭建一個 build 系統 ：Gulp 或 Grunt 這類的構建任務腳本器、編譯 LESS 成 CSS、 concatenating Javascript、minify 壓縮靜態資源，選一個非同步或同步的方式載入它們，然後一個好的 build 系統要能自動做到那些，包括一個本地的 web 伺服器用於測試 code。

4. code 版本管理 ，git。

5. 在 Github 上分享你的 code ！

6. 讓你的網站上線 。可以找一個免費的服務提供者，比如 HEROKU 、 Github

這些幾乎就是現代前端開發者會用到的工具和技術，好了，你現在可以成為一個前端開發工程師了。

• 高級炸裂裝備

你已經能夠為你的朋友的業務搭建一個網站了。簡潔的排版，高清圖片，你成功了，它甚至在你的手機都看著很棒。那麼還有什麼值得學的？

把你的網站和一個內容管理系統 （CMS）集成在一起。一個 CMS 能夠讓你通過使用者介面增、刪、改、組織你的內容，不需要任何代碼。 這就是那些部落格網站如何工作的。比如免費的 WordPress，去熟悉一個開源的 CMS 吧，會很有用的。

學習怎樣搭建一個 CMS，意味著你講要 熟悉一個伺服器端的語言 ，比如 Node.js, 或 PHP，然後你還會想要知道怎樣 和資料庫打交道 ，比如 MySql 或者 MongoDB。

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

Javascript design patterns，javascript 也有設計模式？ 是的，讀一下吧。

• 突破天際的大招

1. 溝通技巧！你需要和你的小夥伴們溝通，他們是你的 coder 夥伴，你的老闆，你的用戶，你的 stackoverflow.com， 有問題找 stackoverflow，擴展人脈，上 meetup.com ，在部落格上寫一些你的學習體驗，在 Gitgub 貢獻你的 Pull request。

2. 介面設計和使用者體驗設計 UI/UX design，前段開發的小夥伴需要具備基本的 UI/UX 設計知識。

3. SEO 優化，要知道怎樣提高網站的搜索排名，更容易被人們搜索到。

4. CSS 過渡效果，給你的按鈕寫一個 hover 的 CSS 動畫，還有你的從右邊滑入的導航功能表也需要一個平滑的動畫。

5. 關於性能，讓你的網站盡可能快的被載入，減少 DOM 的 reflow 和 repaint 操作，防止滾動性能瓶頸，優化 Javascript，讀一讀 developer fundamentals 吧。

用一些測試框架來實現 Javascript 單元測試，比如 Jasmine，QUnit。

持續集成 Continuous integration（CI），知道怎樣配置一套和夥伴們一起使用的自動測試和部署的工具，比如 CircleCI、Travis CI、Jenkins。

• 超好用的其他加成技能

這些並非必須，但能幫你脫穎而出：用 CSS3，SVG，Canvas API 實現動畫。後端開發，Node.js

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

1. 搭建一個小網站，公開你的 Gitub 代碼庫，確保你的 Code 和文件清楚漂亮，還有一份 README

2. 去 meetup.com 找你的老闆或者投資人，開一個部落格，申請一個 linkedin 帳號

3. 因為 web 技術總是在變化，最後，即使找到了一份稱心的工作，還是需要 stay motivated，你需要時常去下面這些地方轉轉：CSS Tricks，SitePoint，Smashing Magazine

4. 當然還有些像 CSDN 這樣中文社區，總之遇到任何難題，社區裡有總有樂於助人的。

5. 保持好的職業態度：Stay humble，and build cool shit。

（本文為《 點融黑幫 》授權轉載，原文標題為〈 前端程式師：月薪 5K 到 5 萬，我幹了啥 〉，圖片來源： christiaan_008 CC Licensed，未經授權請勿轉載。）