1. 程式人生 > >小白到高階程式設計師,進階過程中都需必備些什麼。

小白到高階程式設計師,進階過程中都需必備些什麼。

高貴的前端程式猿們:
如何在前端開發這種高精尖的技術領域找到心儀的工作?實現在咖啡館喝喝咖啡敲敲程式碼就能升職加薪、買房買車、迎娶白富美走上人生巔峰的職業夢想?這篇《進化論:從 0 到 100,前端猿茁壯成長的精神飼料史》,肯定能給你事業的加速動力。前端開發工作已經變的越來越複雜,僅僅是想羅列一份前端開發的學習列表就已經是一件艱鉅的工作。曾經只要會編寫 HTML, CSS 和 Javascript 就是能夠找到一份前端開發工作的全部要求。而現在,web 開發遠遠不止是簡單編碼。因為我們的網際網路上有了更多的內容,也因為有更多的人、更多裝置可以訪問網際網路, web 前端開發技能也就更多了。我們現在需要考慮的問題很多,比如載入時間,效能,不同的螢幕尺寸, 不同的輸入方式, build 系統, 部署策略,還有如何組織好我們的程式碼。這還是想象中前端開發麼?好吧其實只要你有熱情,這些還是很有趣的,現在就來仔細看看,一份前端開發的工作,到底需要你準備些什麼?

入行行頭:5 大硬體
請準備好以下東西
1.一顆人類的大腦:智商在平均水平線以上即可

2.一份強烈的渴望:我的程式碼要可以執行在任何一個有瀏覽器的裝置上。

3.一臺膝上型電腦:不需要花費很多錢得那種,只要它可以執行 Windows, Mac OS X, 或 Linux 系統。當然你也可以只用一臺臺式機,但是那樣就不能帶著它坐在咖啡館裡…

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

  1. 一個翻牆代理:這個大家都懂的,我就不解釋了

初級資質要求
一些專業基礎

1.你需要學會瀏覽器能理解的三大語言:HTML, CSS, Javascript – 神聖的三位一體!

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

3.一些很有用的學習資源
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

中級進階路徑一旦掌握了三大語言,就可以開始學習專業的開發流程啦:
1.Command line:好吧,命令列也許都會,但是要掌握最基本的操作,熟悉怎樣配置你的環境,還有那些奇怪的 shell 指令碼,因為你會經常用到它們。

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

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

4.程式碼版本管理,

5.在 github 上分享你的程式碼!

6.部署! 讓你的網站上線。可以找一個免費的服務提供商,比如 heroku.com, https://pages.github.com
這些幾乎就是現代前端開發者會用到的工具和技術,好了,你現在可以成為一個前端開發工程師了。

高階炸裂裝備
1.你已經能夠為你的朋友的業務搭建一個網站了,簡潔的排版,高清大照片,你成功了,它甚至在你的手機都看著很棒。那麼還有什麼值得學的?

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

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

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

5.Javascript design patterns,javascript 也有設計模式? 是的,讀一下吧。

突破天際的大招
1.溝通技巧!你需要和你的小夥伴們溝通,他們是你的 coder 夥伴,你的老闆,你的使用者,你的….stackoverflow.com, 有問題找 stackoverflow,擴充套件一下人脈把,上 meetup.com, 在部落格上寫一些你的學習體驗, 在 Gitgub 貢獻一下你的 Pull request。

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

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

4.CSS 過度效果,給你的按鈕寫一個 hover 的 CSS 動畫,還有你的從右邊滑入的導航選單也需要一個平滑的動畫。

5.關於效能,讓你的網站儘可能快的被載入,減少 DOM 的 reflow 和 repaint 操作,防止滾動效能瓶頸,優化 Javascript, 翻牆讀一讀這個吧 google web developer fundamentals。

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

7.持續整合 Continuous integration (CI),知道怎樣配置一套和夥伴們一起使用的自動測試和部署的工具,比如 CircleCI, Travis CI, Jenkins.

超好用的其他加成技能
↓↓↓這些並非必須,但能幫你脫穎而出:

用 CSS3, SVG, Canvas API 實現動畫。

後端開發, Node.js

最後:去找工作吧!
有了技能是不夠的,你需要能展示它們,你還能幹的是:

搭建一個小網站,公開你的 gitub 程式碼庫,確保你的程式碼和文件清楚漂亮,還有一份 README
meetup.com 找你的老闆或者投資人吧,開一個部落格,申請一個 linkedin 帳號
因為 web 技術總是在變化,最後,即使找到了一份稱心的工作,還是需要 stay motivated, 你需要時常去下面這些地方轉轉:CSS Tricks,SitePoint,Smashing Magazine
當然還有些像 CSDN 這樣中文社群,總之遇到任何難題,社群裡有總有樂於助人的。
保持好的職業態度:Stay humble, and build cool shit

為大家準備了一份中高階程式設計師進階視訊資料 (共六節) ,包含vue.js node.js react.js == ==
有需要的夥伴可以領取,童叟無欺 全棧開發交流圈:582735936