[CS50] Week 1 C - 中文導讀筆記

＊此筆記是依據胡立老師的 CS50 中文導讀直播影片所寫。

胡立老師的直播：
CS50 中文導讀：week 1

如果想要對第一週內容有更全面的了解，建議配合 [CS50] Week 1 C - 課程筆記 一起閱讀。因為第一週課程筆記內容已經蠻長了，所以我把課程筆記裡沒寫到，而胡立老師有額外補充的部分寫在這一篇，如果在課程筆記就寫過的部分（像是 command line 指令），這篇就沒有重複寫。這篇我略過關於 Scratch 的講解。

以下是我的筆記整理：

[CS50] Week 1 C - 作業筆記

＊此作業筆記是依據 CS50x 2017 版本（也就是哈佛大學 2016 秋季班的 CS50）所寫。

作業筆記我只會寫出我做作業時遇到的問題，或是需要特別注意的地方，但不會把完整的程式碼寫出來。也因為這個緣故，所以只能用文字與少量的程式碼描述，可能會有難以理解的地方，還請見諒。

即使課程影片我都看得懂，但是做作業時還是卡關了一下，但做完後發現其實真正難的不是如何寫出程式，而是要寫出符合作業規定的 UX 設計。

第一週的作業分四小題，第三跟第四題還有分比較簡單的（他們叫做 less comfortable） 和比較困難的（他們叫做 more comfortable）這兩種版本，每個作業說明裡面都會有助教的講解短片 Walkthrough，基本上看完 Walkthrough 後就可以抓到如何寫作業的方向，強烈建議一定要看過才動手寫。

[CS50] Week 1 C - 課程筆記

＊此課程筆記是依據 CS50x 2017 版本（也就是哈佛大學 2016 秋季班的 CS50）所寫。

CS50 原本就提供很詳細的課程筆記了（第一週筆記），所以這個筆記偏向記錄我比較不熟悉的部分而已（事實上這個筆記也是很長，廢話不小心寫太多）。

雖然我學程式的資歷還很淺，但已經不算是完全新手，看完第一週的課程影片後，覺得如果當初 CS50 是我的第一門程式課，我應該是痛苦不堪然後快速投降 XD

剛開始學程式的時候，我花了不少時間才完全理解第一週裡面教到的東西，像是函式、迴圈、條件判斷、資料型態等等，有些甚至到現在都還不算完全理解，像是浮點數。而 CS50 用一堂課就全部都講完了。雖然看完課程之後，我自認有 80% 以上的內容對我而言都是以前學過的東西，或容易理解的概念，但是在寫作業的時候仍然卡關嚴重（因為之前都沒有認真練寫程式 XD）。

即使第一週課程大部分的內容對我來說都不陌生，不過上完課還是收穫很多，Malan 教授上課的脈絡非常清晰，課程的步調也抓得很好，我甚至懷疑他在課堂上連出錯都是原本就安排好的，因為想要讓學生了解寫程式會發生的錯誤和一些邏輯思考，不過到底是不是真的出錯這就不得而知了。

[CS50] Week 0 Scratch - 中文導讀筆記

＊此筆記是依據胡立老師的 CS50 中文導讀直播影片所寫。

胡立老師的直播：
CS50 中文導讀：week 0

原本不想寫這次的導讀筆記，因為所有內容都在胡立老師的 初心者的計概與 coding 火球術 有學過。但是呢，之後應該都會寫每週的導讀筆記，只有第零週沒有寫總覺得不完整（這應該是強迫症 XD），所以最後還是決定寫一下導讀有講到的，而 CS50 課程裡面沒有講到的一些補充。

以下是我的筆記整理：

[CS50] Week 0 Scratch - 課程筆記與作業

＊此課程筆記是依據 CS50x 2017 版本（也就是哈佛大學 2016 秋季班的 CS50）所寫。

可能有些人不清楚如何在線上註冊 CS50，所以我大概講解帶過。

在 edX 上註冊帳號之後，還要到 Introduction Computer Science Harvardx CS50x 課程頁面上註冊加入課程，目前最新的課程內容是 CS50x 2017。課程本身是免費的，如果希望在修完課程後可以拿到證書，才要繳交費用。

稍微看一下他們的 FAQs，裡面有說到你一開始上課的時候不需要決定要不要拿證書，可以在完成所有作業及課程後才申請。所有作業都要 70% 以上才可以申請到證書。但是你可以繳交很多次作業，他們只會記錄你最後交的作業成績。

我猜測 CS50x 是指放在 edX 的課程，而 CS50 是指哈佛的課程，其實兩個是一樣的，只是時間上會有半年的差異，通常他們只錄製秋季班的課程（春季班應該也會有 CS50 但是沒有錄製），然後在隔年才放到 edX 上，因為影片需要時間剪接上字幕，還有一些其他的教學材料的準備，所以才會有半年的時間差。

[CS50] 導讀哈佛大學程式課程：CS50 - 緣起

昨天正當我還沉浸在 Diablo 的世界時，收到胡立老師的關切。
他說：「所以妳有要一起來修 CS50 嗎？XD」

馬上從 Diablo 的世界中驚醒，然後我回：「好想繼續耍廢啊 😂」
的確是上個前端課程結束之後就一直耍廢，因為剛好 Diablo 死靈法師出了啊 XDD

最近胡立老師創了自己的教學網站 Lidemy 鋰學院，然後下個星期要開始一個新的課程：導讀哈佛大學程式課程：CS50。上次課程快結束前，胡立老師就有建議我可以再去上 CS50，但是我懶惰，只是放在「待修課程清單」XD

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 檔案都打包起來。

Frontend Intermediate Course - 作業七直播筆記

交作業時就有備註自己知道的兩個 bug，跑版問題跟語言按鈕在第一次切換時 CSS 無法轉換。

跑版問題因為胡立老師在我交作業前有提示過，所以他就沒有再解答，要我靠自己 XD

第二個語言按鈕切換問題，胡立老師給這樣的提示：

這是因為你第一次按按鈕之後執行 selectButton，這個 function 會幫 div.menu button 加上 click 事件所以你第一次按鈕之後，只是加上這個事件，並不會被執行到第二次按的時候因為已經有加上 click 事件了，所以才會有作用。

後來解決方法是在 selectButton 函式中拿掉 click 事件，改成每次清空兩個語言按鈕的 selected class，然後再加上 selected class 到點選的按紐。

完成的程式碼：

function selectButton(lang) {
    $('#zh-tw').removeClass('selected');
    $('#en').removeClass('selected');
    $('#' + lang).addClass('selected');
}

Frontend Intermediate Course - 作業七

作業七的 GitHub 連結：走向國際：i18n

這次也是在最後一天做完，還參考（偷看）了兩個同學的作業才寫出來。雖然相較於作業四、五、六簡單，但我還是在後面卡了一下。原本很希望能夠自己解開，最後還是跟胡立老師求救 XD

作業沒有要求用 button 做出切換語言的按鈕，但想要讓畫面好看，所以選擇用 button 然後加了一些 CSS，並且讓當前語言的按鈕有被選取的感覺。可是在切換語言的時候，會出現一個外框，而且已經在 CSS 中設 border: none;，所以一直搞不清楚為什麼會有外框。

如圖：點選英文按鈕出現外框線。

後來看了其中一個同學的 CSS 檔案，才發現還要設 outline: none; 才可以。應該是 HTML 對 button 的原有設定，要是沒有偷看同學的作業我可能會卡關更久 QAQ

Frontend Intermediate Course - 作業六直播筆記

這次交作業的時候問了胡立老師關於 error handling 的問題，因為在 DevTools 的 Console 裡會看到 "Uncaught ReferenceError: err is not defined at XMLHttpRequest.request.onreadystatechange" 這一段錯誤碼，所以想問他這個問題應該要怎麼修正。

他的回答很詳細：

你看一下上次作業的這一段：

error: function(err) {
        $container.append('<div class="error">Failed to Load Twitch Data.</div>');
}

這邊的 err 是 $.ajax 幫你傳進來的錯誤參數 可是當這次改寫成 vanilla js 的時候，你會發現你沒有 err 這個東西可以拿了 為什麼？因為它沒有給你，所以你這一段：

request.onreadystatechange = function () {
    if (this.readyState === 4 && this.status === 200) {
        var response = JSON.parse(this.responseText);
        callBack(null, response);
    } else {
        callBack(err);
    }
}

他才會出這個錯誤：Uncaught ReferenceError: err is not defined at XMLHttpRequest.request.onreadystatechange，意思就是 err 這個變數沒有宣告，也找不到這東西在哪 要改掉的話，你可以自己建一個 Error 出來，或是傳一個字串其實也可以

request.onreadystatechange = function () {
    if (this.readyState === 4 && this.status === 200) {
        var response = JSON.parse(this.responseText);
        callBack(null, response);
    } else {
        callBack(new Error('xhr not ready or status not equal to 200'));
    }
}

解答之後豁然開朗啊！果然對 Vanilla js 還不太懂，所以還一直用 jQuery 的思考方式去寫。

Frontend Intermediate Course - 作業六

作業六的 GitHub 連結：返璞歸真：vanilla js

這次作業趕在最後一天才做完，中間也是不斷的崩潰 XD

原生 JavaScript 仍然有很多不懂的地方，都是靠原本 jQuery 怎麼寫，然後再去 google 搜尋怎麼轉換成 vanilla js。不過最花時間的是思考如何改寫我原本寫的這一段：

success: function (response) {
            var streams = response.streams;
            for (var i = 0; i < streams.length; i++) {
               $(getViewbox(streams[i])).insertBefore($('#first_viewbox'));
            }

一直搞不清楚如何改寫原本用 jQuery 呼叫出的 callback function，google 找了幾篇都不是我要的答案，後來只好參考（偷看）其中一位同學寫的作業，才知道如何繼續，不然恐怕這次又要遲交了，嗚嗚。

Frontend Intermediate Course - 作業五與直播筆記

作業五的 GitHub 連結：讓網頁變得更完整：加上 placeholder 與 infinite scroll

如果說作業四是是越級打怪，這次的作業讓我覺得是裝備很差的情況下要打大魔王。இдஇ

因為連從哪裡努力起都沒有頭緒，一般的線上課程不太會講到這個部分，google 搜尋也不知如何搜尋起，雖然找到幾篇 Stack Overflow 有提到 placeholder，但是我也不知道怎麼應用在我的作業上。上 PTT 有找到一個人放在 CodePen 上的 placeholder 例子，但是也是有看沒有懂。關於 infinite scroll，雖然胡立老師有放一篇關鍵的文章，但是不知道為什麼我就是沒辦法在捲軸捲到底的時候載入新的資料，所以從頭卡到尾，嚴重卡關。

想說那去偷看其他同學的作業，看看能不能至少有個頭緒，結果 JavaScript 技能點數還不夠，連想偷看也看不懂 XD

本來想要跟胡立老師求救，當他知道我超級卡關之後就說「那就到時候看解說吧，聽完解說之後會海闊天空，想說怎麼那麼簡單」。當時半信半疑，我應該是裡面最菜的了，其他人都有一些程式的基礎，好幾個同學也覺得這次作業難度很高，連其他人都覺得有難度，那我這麼菜怎麼可能解得出來，然後就看開了（？ 於是就放棄嘗試，繼續去做 FreeCodeCamp 的題目了...

咖啡蛋糕捲

母親節前兩天又再次問媽媽想吃什麼蛋糕，最後她指定要吃咖啡蛋糕捲 XD
我做了咖啡蛋糕捲然後大家都有口福，媽媽英明～

這次的食譜是參考 Carol 老師的食譜：咖啡戚風布丁捲。因為媽媽不喜歡布丁，所以我沒有加入布丁，只有夾鮮奶油。也因為沒有夾布丁，所以我把鮮奶油的份量多加一些，這樣比較容易捲。如果你不喜歡鮮奶油也可以自己調整，不一定要跟我做的一樣（但是鮮奶油真的好好吃～）。

蛋糕捲其實是戚風蛋糕的延伸，如果還不熟悉戚風蛋糕的做法，可以先看我上次寫的：巧克力戚風蛋糕。

蛋糕捲沒有想像中的難，但要做得很漂亮需要練習。最容易失敗的點應該是，捲的時候容易有蛋糕體裂開的情形，不過基本上不會影響味道，只是美觀上的差別。失敗了不用難過，因為自己烘焙的重點是好吃而不是賣相 XD

建議先把鮮奶油打好然後冷藏，再做蛋糕的部分。

Frontend Intermediate Course - 作業四直播筆記

今天看完直播多收穫（筆記也會很多），胡立老師也在前兩天改好我的作業了。

這次他給我的評語是：「都不錯～ 點進去要到直播那個加的很好，原本應該這樣加的但我忘記講 XD append 那一段可以排版一下」

原本只是想要自己練習用，所以加入點進預覽圖片可以連到 twitch 直播的 URL，結果被誇獎了 XD。當時真的寫作業寫到昏頭，完全忘記可以用連接字串的方式排版，稍微排版之後可讀性增加很多。

$('.container').append(
                '<div class="viewbox">'+
                    '<div class="preview">'+
                        '<a href="'+url+'" target="_blank"><img src="'+channel.preview.medium+'"></a>'+
                    '</div>'+
                    '<div class="bottom">'+
                        '<div class="headpic">'+
                            '<img src="'+channel.channel.logo+'">'+
                        '</div>'+
                        '<div class="intro">'+
                            '<div class="channel_name">'+channel.channel.status+'</div>'+
                            '<div class="host_name">'+channel.channel.display_name+'</div>'+
                        '</div>'+
                    '</div>'+
                '</div>');