Frontend Intermediate Course - 作業十直播筆記

最後一次作業胡立老師沒有修改，不過交完作業之後，在 Slack 群組裡面胡立老師有提到其實應該所有的 JavaScript 檔案都應該檢查才對，當時我在 webpack.config.js 裡面出現的錯誤不知道怎麼修改，所以就把設定檔都放在忽略檔案名單裡，不是最正確的方式。

後來才知道，原來在 webpack.config.js 檔案裡，如果沒有用到 webpack 這個變數，其實是不用引入的，這跟我原本的認知不一樣，點破我的盲點 XD

也加入 path.join() 修正我的另外一個錯誤。

所以在 package.json 裡面，讓設定檔也要被 semistandard 檢查：

"semistandard": {
    "ignore": [
      "src/css/",
      "dist/*.min.css",
      "dist/*.min.js",
      "node_modules/"
    ]
  }

然後在 webpack.config.js 裡面，拿掉 var webpack = require('webpack');，同時引入 var path = require('path');，修改一下路徑的寫法：

module.exports = {
  entry: './src/js/index.js',
  output: {
    path: path.join(__dirname, '/dist'),
    filename: 'bundle.min.js'
  }

/* Original codes:
module.exports = {
  entry: './src/js/index.js',
  output: {
    path: __dirname + '/dist',
    filename: 'bundle.js'
  }
*/

最後再重新用 semistandard 檢查一次，全部都沒有問題了～

Frontend Intermediate Course - 學習心得

有點不敢相信自己居然可以堅持到最後，而且每週都有交作業（除了第五週作業寫不出來，看完直播講解後才交作業），每週也都有寫部落格記錄作業筆記跟直播筆記，都沒有偷懶呢！

以下是我上完這個課程的一些心得，寫得很長 XD

30 歲才開始
30 歲才開始學寫程式，總是會懷疑自己能不能學好，不過看到這篇：60歲才接觸電腦、日本81歲奶奶開發出 iPhone 遊戲 App 之後，又覺得 30 歲開始其實也不晚。年齡不應該是阻止自己學習的藉口，如果想著「我年紀大了，學這個太晚了還是不要學」，這樣其實是為自己的懶惰找藉口，沒有開始學習就說自己學不會，當然不可能學會的。開始踏出嘗試的第一步才是重點。

不可否認如果年紀輕一點開始學習，記憶力、反應力跟學習能力比較高，我也常常想，如果早個五年來學寫程式，是不是會比現在還輕鬆許多？但五年前的自己，根本不認為自己能夠寫程式，也對寫程式沒有一點興趣。雖然開始學寫程式的原因有點好笑，是因為失戀而想要學一個很難而且從沒有接觸過的東西，困難到不要讓我分心想不開心的事情，所以才開始學寫程式。

一開始也沒有想過學了要做什麼，也不確定自己會不會喜歡寫程式，但我的個性有一個奇怪的特點，就是「真正嘗試了之後才能決定自己對此事物的感覺」。雖然以前不認為對寫程式有興趣，但我從沒有真正寫過程式，這樣又如何下定論我是討厭寫程式的呢？剛好也趁這個機會好好嘗試看看寫程式，然後再來決定我對寫程式有怎麼樣的感覺。於是就在 Codecademy 上開始學 Python，後來卡關跑去 Hahow 上了胡立老師的課，也才開始了這次的課程。

Frontend Intermediate Course - 作業十

作業十的 GitHub 連結：改掉你的壞習慣：ESLint 與 standard

這次作業應該是最快完成的一個作業～

我選擇 semistandard 做為我這次作業的規範，是 standard 的分號版本，兩個版本大同小異，最大差別在於 semistandard 在程式碼裡面要加分號，而 standard 不用加分號。因為我原本的程式碼都有加分號的習慣，所以就選 semistandard。

semistandard 需要 Node.js 支援並用 npm 安裝，這個部份經過前兩個作業的訓練已經很熟悉了。後來發現 Sublime 上有套件可以用，也有順便安裝。

Frontend Intermediate Course - 作業九直播筆記

這次作業胡立老師給了「做得很好，gulpfile 很完整」的評價之外，還得到《值得參考》的榮譽標籤！(*´▽`*) 太開心了～～

胡立老師的直播：
9. 節省 Request 的極致：一為全，全為一

以下是看直播的一些筆記。

1. gulp.task 的用法。

gulp.task('default', function () {
  // do something...
});

在 gulp.task 裡面的 'default' 是每次執行 Gulp 會執行的程式碼，如果命名成自訂名稱，譬如說 'hello' 的話：

gulp.task('hello', function () {
  // do something...
});

那在執行 Gulp 的時候要指定執行 'hello'，否則 Gulp 會回應找不到 'default' 裡的程式碼。

胡立老師是用 Mac，而我用的是 Windows。Windows 的 command line 的指令跟 Mac 的 terminal 不一樣，所以我照胡立老師的示範去執行沒辦法成功，還要再研究。不過也可以寫成：

gulp.task('default', ['hello']);

這樣直接執行 Gulp 就會執行到 'hello' 裡面的程式碼了。

Frontend Intermediate Course - 作業九

作業九的 GitHub 連結：節省 Request 的極致：一為全，全為一

這次作業要使用 Gulp 來自動化工作流程，作業要求是要將 CSS 跟 JavaScript 檔案都 inline 進 index.html 裡面，不能發出 CSS 跟 JavaScript 的 Request。雖然手動可以做到這件事情，但每次修改 CSS 跟 JavaScript 檔案就要手動 inline，這樣的確很麻煩。

有了上次做 Webpack 作業的經驗，這次讀了兩篇學習資源的文章，知道如何安裝之後就開始動手做作業了。最主要是參考 Gulp 官網 跟胡立老師的 可以幫我自動化嗎，拜託：Gulp。大概是有了上次 Webpack 作業的經驗，這次的 Gulp 作業上手很快，也沒有感覺那麼困難了，除了中間因為 Webpack uglifyJS plugin 卡住了一些時間，大致上都算順利。

Gulp 跟 Webpack 一樣需要用 Node.js 支援，上次的作業後已經比較熟悉 Node.js 跟 npm 的操作，也比較熟悉 command line 的操作，所以這個部分就不會像上次一樣卡關。

Gulp 到底是做什麼用的呢？簡單來說就是幫你把原本需要手動完成的工作，全部自動化。舉例來說，原本我用 Sublime 的套件幫我把 Sass 編譯成 CSS，然後再用另一個套件把 CSS 檔案加入 prefixer，有 Gulp 之後，我就不用再手動處理這些東西，安裝 Gulp plugins 然後寫好程式就可以一次幫我處理好。 而且 Gulp 有各式各樣的 plugins 可以使用，所以當要手動處理的事情越來越多的時候，使用 Gulp 就變得好方便！

Frontend Intermediate Course - 作業八直播筆記

這次作業都沒有問題，太好了 ヽ(●´∀`●)ﾉ

胡立老師的直播：
8. 當我們包在一起：Webpack（上）
8. 當我們包在一起：Webpack（下）

以下是看直播的筆記。

1. 什麼是 Node.js？
雖然我已經完成 Webpack 的作業，但 Node.js 到底是什麼我其實還是不清楚，只知道大概可以在後端跑 JavaScript 的東西這樣子 XD。

Node.js 的官網解釋是「Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient. Node.js' package ecosystem, npm, is the largest ecosystem of open source libraries in the world.」，胡立老師解釋是「Node.js 可以在電腦上直接執行 JaveScript 而不用透過瀏覽器」。

Node.js 有許多內建的模組，胡立老師在直播裡示範利用 http module 建立一個簡單的伺服器，覺得厲害！

var http = require('http');

var server = http.createServer(function(req, res) {
    res.end('hello, world');
});

server.listen(3333);

Frontend Intermediate Course - 作業八

作業八的 GitHub 連結：當我們包在一起：Webpack

作業的說明裡面，胡立老師也清楚的說這次作業比較複雜，所以讓我很擔心無法完成作業，結果居然可以即時完成作業，實在太感動了！（當然也是問了胡立老師很多問題才有辦法完成 XD）

稍微研究了學習資源裡的文章，其實都看得霧煞煞，能確定理解的只有安裝而已 XD 所以想說還是先動手安裝，然後再慢慢解決其他問題，不然一直看文章也沒進展。

前幾次作業我有提到對 command line 有莫名的恐懼感，而 Webpack 許多安裝與操作都要用到 command line，所以只好認真惡補一下，除了重新看過之前胡立老師在 Hahow 上的 初心者的計概與 coding 火球術 之外，另外找到 thenewboston 的 youtube 頻道上的 Windows Command Line Tutorials，增進一些基礎。

這次作業套句胡立老師說的「以往是寫 code 難，但作業八難在不是寫 code，所以難」。其實原本 JavaScript 檔案裡的程式碼變動不多，難在 Webpack 安裝跟環境設定，然後利用 require 跟 module.exports 把原本的 script 檔案都打包起來。