# 【Memo】五個月成為 JavaScript 工程師的完整攻略，每個月要幹嘛都寫出來讓你照著做！

---

###### tags: `資料科學自學園` `JavaScript`

## 為什麼要學 coding？

> 每一個需要你付出生命中重要時間的決定都應該是合理。畢竟，時間是我們擁有的最重要的資源：

A：技能需求很大
B：獨立自主
C：從2003 ~ 2018技術進步很大
D：加密貨幣（比特幣）、人工智能（機器學習）。
E：學無止境

選擇一條職業道路，可供參考的（甚至是必須的）衡量指標：
1. 在接下來10多年裡，它必須是有用的。這項技術在未來都應該被重視，確保工作是**安全的**。
2. 對擁有這種技能的人，**需求必須多餘供給**。
3. 在公司中的晉升時間不需要很長。`不然大家都爬上去了只剩你呢^_^`
4. 一個不需要大學專業學位的行業——甚至不需要在開始賺錢之前先去考研。
5. 能在最短的時間內趕上行業中表現最好的人。能否以最快的速度縮小與該領域的資深專家之間的差距？
6. 它必須能提供基礎技能。
7. 要開心，每週都要工作**40**小時，不！要！無！聊！

code符合以上每一個。我自己的經歷也是 [(´,_ゝˋ)]()

> 重要的一點是：記住，前 2 個月你會覺得自己在攀登一座無法翻越的高山。你學習的每一門教程或課程都會讓你覺得自己是世界上唯一一個不懂這些東西的人。保持堅強。隨著時間的推移，你會有越來越多的「會心」時刻。 <font color = "darkred">**我們稱之為冒名頂替綜合徵 (Imposter Syndrome)：你覺得自己是唯一一個不知道這個信息的人，你被自我懷疑所包圍。請放心，當我們學習新東西時，我們都會有這樣的感覺 。**</font>

> 你會學到的是，成為一個優秀的開發人員並不一定要記住一大堆文檔。這是關於如何使用所有可用的工具來解決問題。這是一個解決問題的方法，從不知道的狀態變為可能。

## 我是誰，你為什麼要聽我的？

第一個月，我迴避了所有的教程或書籍。相反，我用這個月的時間來尋找我怎麼去學習以及怎麼有可能獲得工作的最佳方式。我想要高效率，……基於這些，我為自己制定了一個專注於效率的課程： **在最短的時間內能被雇傭的關鍵學習量**。

課程的重點不在於做最少的工作。相反，它的重點是在最重要的事情上努力工作，以便以最優的方式進行工作。這並不意味者要做最低限度的工作，也不意味著要為成為一名初級開發人員而努力。如果你能夠通過努力工作，跳過這個過程，直接進入中級開發者的角色，那將是一個更好的結果。幸運的是，我已經篩選過了所有的東西。

## 我們要學什麼語言？

> Javascript 社區正以驚人的速度增長。這個社區有很多新的發展。有些人抱怨 Javascript 疲勞，因為每天都有越來越多的新工具被開發出來。然而，我們可以利用這一點，使其變成你的優勢。你將會和那些在這個行業工作多年的人同時學習這些新技術。

<font color = darkred>

## 第一個月：大場面

**要回答的一個大問題是：電腦、互聯網和網站是如何運作的？** **我怎樣才能建立一個網站？**

</font>

一、 [理解費曼技巧 (Feynman technique)](https://medium.com/taking-note/learning-from-the-feynman-technique-5373014ad230)，這樣你在接下來的 5 個月裡就能真正學到東西，而不是只使用短期記憶。

二、互聯網是如何運作的： [這個](https://www.youtube.com/watch?v=e4S8zfLdLgQ&feature=youtu.be&list=PLoYCgNOIyGAB_8_iq1cL8MVeun7cB6eNc) 來自 LearnCode.academy， [這個](https://www.youtube.com/playlist?list=PL6gx4Cwl9DGBpuvPW0aHa7mKdn_k9SPKO) 來自 thenewboston。

三、計算機科學的最佳概述： [計算機科學速成課](https://www.youtube.com/playlist?list=PLME-KWdxI8dcaHSzzRsNuOLXtM2Ep_C7a)

四、你可以在 Youtube 上 [關注這門哈佛課程](https://www.youtube.com/watch?v=y62zj9ozPOM&list=PLhQjrBD2T3828ZVcVzEIhsHVgjANGZveu) 。這可能是最有含金量的計算機科學課程。不需要做練習。

五、如何使用命令行： [這個來自於 Zed Shaw](https://learnpythonthehardway.org/book/appendixa.html)。

六、如何建立一個網站/獲得一個域/並讓它運行: [LearnCode.academy 視頻](https://www.youtube.com/watch?v=tq7dqdHCc7U&feature=youtu.be&list=PLoYCgNOIyGAB_8_iq1cL8MVeun7cB6eNc) 。

七、HTML、CSS 和 Javascript 是如何組合在一起的：[FrontendMasters 的網頁開發](https://frontendmasters.com/courses/web-development/?u=a7359ff0e18cf1c378d554df4893bf4368a6d33b) 課程。只涉及到 Javascript 的部分。

八、學會用 Bootstrap 建立網站。先從 [這個](https://www.youtube.com/watch?v=no-Ntkc836w) 開始，然後轉到 [Bootstrap 4 文檔](https://v4-alpha.getbootstrap.com/getting-started/introduction/) ，並添加你在樣板網站上看到的組件。了解它提供的好處 vs. 自己編寫 CSS。

九、了解如何使用模板來使用免費 [主題](https://pikock.github.io/bootstrap-magic/) 和模板來 [構建](http://mashup-template.com/) 網站。

十、如果你有時間，你可以在 [freeCodeCamp](https://www.freecodecamp.com/) 上參加一些關於 HTML 和 CSS 部分的課程。

<font color = darkred>

## **第二個月：Javascript**

**要回答的一個大問題是：Javascript 如何讓機器做你想做的事情？**
</font>

一、這是你在接下來的幾個月里關注的重點。Javascript 解決了什麼問題？開始用 Javascript 編寫小的程序，讓你的網站以某種方式運行。這種語言能讓你的網站除了看起來漂亮之外，還能做其他事情。從這兩門課程開始： [一](http://javascript.info/) 和 [二](https://www.codecademy.com/learn/learn-javascript) 。

二、閱讀  [Eloquent Javascript](http://eloquentjavascript.net/) 書。

三、了解 DOM（Document Object Model，文檔對像模型）操作。

四、閱讀 [這篇關於編程的好文章](https://medium.freecodecamp.org/a-gentler-introduction-to-programming-1f57383a1b2c) 。

五、了解如何使用 Chrome 開發者控制台編寫 javascript。做 [這個 CodeSchool 課程](https://www.codeschool.com/courses/discover-devtools)（只有控制台部分）。然後學習在 html 中註入`<script>` 標籤來運行 JavaScript 文件。

六、看 Kyle Simpson 的 [這個](https://frontendmasters.com/courses/javascript-basics/) 演講，完成第一個月剩下的課程。最後，在 CodeSchool 的 javascript 頻道上完成 [這五門課程](https://www.codeschool.com/learn/javascript) 。

七、如果您在 5 個月內有任何疑問，可以使用 freeCodeCamp 中的這個 [指南](https://guide.freecodecamp.org/) 進行簡短的查詢。

八、在這個兩部分系列中學習新的 ES6 功能： [一](https://www.youtube.com/watch?v=AfWYO8t7ed4) 和 [二](https://www.youtube.com/watch?v=LmL0Gh193M0) 。

九、通過 [這些課程](https://www.codeschool.com/learn/git) 學習 git 和 Github 。創建一個 Github 配置文件，並開始每天提交。開始開發一個樣本網站。

十、學習術語/行話： [這個視頻](https://www.youtube.com/watch?v=sBzRwzY7G-k) 和 [這個](http://jargon.js.org/) 。

十一、最後， [在 YouTube 上](https://www.youtube.com/watch?v=3JluqTojuME&list=PLoYCgNOIyGAB_8_iq1cL8MVeun7cB6eNc) 觀看這個 [很棒的播放列表](https://www.youtube.com/watch?v=3JluqTojuME&list=PLoYCgNOIyGAB_8_iq1cL8MVeun7cB6eNc) 。忽略 jQuery 和 Grunt 的部分。

十二、當你有問題，或者想要深入研究一個話題的時候，就開始使用 [這個指南](https://frontendmasters.com/books/front-end-handbook/2017/) 。

<font color = darkred>

## **第三個月：Javascript+NPM+構建你的網站**

**要回答的一個大問題是：我能建立一個專業的網站，並了解整個過程嗎？**

</font>

一、Google 開發人員工具→了解如何使用 Google Chrome 調試您的程序和網站。如果你還沒有完成 [這個 CodeSchool 課程](https://www.codeschool.com/courses/discover-devtools) ，請完成。

二、開始參加當地的一些編程和 Javascript 會議。

三、了解 [同步和異步 javascript](https://blog.risingstack.com/asynchronous-javascript/) 之間的區別。

四、什麼是事件循環？→一旦你對 Javascript 有了很好的理解，看這個 [視頻](https://www.youtube.com/watch?v=8aGhZQkoFbQ) 將會改變遊戲規則。把最好的關於 javascript 的討論交給你。

五、在 [這裡](https://www.youtube.com/watch?v=568g8hxJJp4&t) 學習有關 Promises，和 ES7 中的異步等待。

六、最後，看看 Douglas Crockford 的 [這個](https://frontendmasters.com/courses/good-parts-javascript-web/) 課程。

七、在 [這裡](https://medium.freecodecamp.org/javascript-modules-a-beginner-s-guide-783f7d7a5fcc) 了解 Javascript 的歷史。

八、 [下載 node.js 和 npm](https://www.sitepoint.com/beginners-guide-node-package-manager/)。從 NPM 下載  [lodash](https://www.npmjs.com/package/lodash) 並使用 [browserify](http://browserify.org/) 來使用常見的 js 導入。[在這裡](https://scotch.io/tutorials/getting-started-with-browserify) 了解一下。理解為什麼 npm 對於開發人員來說是一個非常棒的工具。

九、到本月底，你應該有一個個人網站，上面有 Github 上的代碼庫。使用 [Github Pages](https://pages.github.com/) 可以免費有一個實時網站。

<font color = darkred>

## 第四個月：React.js（或 Vue.js）

**要回答的一個大問題是：React 或 Vue 解決了什麼問題？**
</font>

我有嚴重的偏見。我喜歡 React.js。事實上，我會​​把它教給其他人，並進行相關的研討。所以請相信我。除非你有充分的理由去學習 Vue.js，否則你要學會 React.js。這是一個全新的、令人興奮的工作，但還沒有具體的工作崗位需求出現。

一、React→按順序做： [一](https://www.youtube.com/watch?v=MhkGQAoc7bc&list=PLoYCgNOIyGABj2GQSlDRjgvXtqfDxKm5b) ， [二](https://egghead.io/courses/the-beginner-s-guide-to-reactjs) ， [三](https://egghead.io/courses/advanced-react-component-patterns) 。然後再去查閱 [官方文件](https://reactjs.org/tutorial/tutorial.html) ，通讀所有的資料。如果你有錢， [這是](https://tylermcginnis.com/courses/) 最好的 React 教程。

二、如果你有時間，想要學習更多的關於 React 的深度教程，你可以 [點擊這裡](https://btholt.github.io/complete-intro-to-react/) 。

三、可選：學習 Redux→觀看 [本](https://egghead.io/courses/getting-started-with-redux) 課程。不要讓你的腦袋爆炸。然後閱讀關於它的 [文檔](http://redux.js.org/docs/introduction/) 。

四、使用  [create-react-app](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) 構建示例 React 應用 [程序](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) 。創建 React 應用程序會為你開啟一個新的世界。

五、在 [Heroku](https://devcenter.heroku.com/articles/git) 上部署你的應用程序。

六、在 [GitHub 頁面](https://pages.github.com/) 上部署你的應用程序。

七、開始 [關注 Medium 上面的 Top10 文章](https://medium.com/browse/top) ，閱讀任何有關編程的文章。註冊這些電子郵件列表，與業界正在發生的事情保持聯繫：[Javascript](http://javascriptweekly.com/) 和 [React](https://react.statuscode.com/)。

八、開始建立你的在線簡歷。在這個問題上，有些人給出的建議比我好。看看 [這個](https://medium.freecodecamp.com/how-to-write-a-good-resume-in-2017-b8ea9dfdd3b9#.nifu8uw1m) 和 [這個](https://medium.freecodecamp.com/5-key-learnings-from-the-post-bootcamp-job-search-9a07468d2331#.4kjyb4763) 。我還寫了一篇關於這個的文章，你可以 [看看](https://medium.com/@andreineagoie/how-to-interview-land-a-job-and-get-a-raise-an-unconventional-method-for-programmers-5a5566b20f13#.lnnnd520t) 。

<font color = darkred>

## 最後一個月：服務器、數據庫以及把這些點連起來

**要回答的一個大問題是：服務器、數據庫和樹莓派在哪裡適合這些方面？**

</font>

一、[HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP)，[JSON](https://www.w3schools.com/js/js_json_intro.asp) 和 [AJAX](https://www.w3schools.com/xml/ajax_intro.asp)。了解這些如何讓你與服務器通信。

二、學習 [如何構建一個 API 服務器](https://hackernoon.com/restful-api-design-with-node-js-26ccf66eab09) 。然後再進一步， [在這裡](https://frontendmasters.com/courses/api-design-nodejs/) 學習 node 和 Express.js 。

三、一旦你完成了這一步，使用一個有趣的 API，比如 [這一個](https://swapi.co/) ，創建一個簡單的應用程序。

四、訂閱 [computerphile](https://www.youtube.com/channel/UC9-y-6csu5WGm29I7JiwpnA)  youtube 頻道，並觀看他們的視頻。儘管聽懂其中的話題可能很難，但它會給你帶來一些神奇的東西。

五、什麼是計算機/服務器/操作系統：買一個 [樹莓派](https://www.raspberrypi.org/products/) 並建立自己的服務器。在 YouTube 上查看不同的項目，你可以開始用你的樹莓派。最後，在樹莓派上製作一個簡單的腳本。按照 [這個課程](https://www.youtube.com/watch?v=Jj4pjfU_-jo&list=PLsa31gkyINsly6N_usaeHrtDPYnwxO-1Y) 。在樹莓派上託管你的網站。你會驚訝於自己是多麼的酷。

六、在下面的主題上花一天時間。你不需要很好地掌握它們。只要了解為什麼他們在那裡，他們正在解決什麼問題：測試，機器學習，時間複雜度， [SQL](https://www.codecademy.com/learn/learn-sql)，UX / UI，持續交付，[基本數據結構](https://frontendmasters.com/courses/computer-science/) 。你應該能夠解釋什麼是數據結構。提示：數組和對像是兩種流行的 Javascript 數據結構。

我已經聽到有人看到上面的建議後開始對我大喊大叫。「你瘋了嗎？！你不認為測試很重要嗎？」

但請聽我說。我同意以上觀點（測試）對於成為一名優秀的開發人員很重要，每個人都應該學習這些技能。然而，我們正努力在這裡打基礎。開始深入研究一個話題是很容易的，但是如果沒有基礎，你就不知道為什麼它很重要，或者它與你正在做的事情有什麼關係。此外，在我發現的大多數招聘信息中，幾乎沒有提到上述技能。把這些知識留到你工作的時候再去學習。

> <font color = darkred>**記住：你的目標是要以最高效的方式工作。**</font>

七、使用 [Firebase](https://firebase.google.com/docs/web/setup) 作為數據庫構建一個小型項目。

八、閱讀  [JavaScript 的兩大支柱的第一部分](https://medium.com/javascript-scene/the-two-pillars-of-javascript-ee6f3281e7f3) 和 [JavaScript  ](https://medium.com/javascript-scene/the-two-pillars-of-javascript-ee6f3281e7f3)[的兩大支柱的第二部分](https://medium.com/javascript-scene/the-two-pillars-of-javascript-pt-2-functional-programming-a63aa53a41a4) 。

## Reference

- [五個月成為 JavaScript 工程師的完整攻略，每個月要幹嘛都寫出來讓你照著做！](https://buzzorange.com/techorange/2018/01/04/learn-coding-in-5-months/)