[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>');

Frontend Intermediate Course - 作業四

作業 4 的 GitHub 連結：從假資料到真資料：Ajax 與 API 串接

因為 JavaScript 還沒學熟，所以為了要寫這次的作業上了好幾個線上課，還有看了幾個 Youtube 教學影片，最後還靠了胡立老師的幫忙才能按時把作業寫完。

這次除了寫作業遇到的問題跟解決方法之外，還想要記錄為了寫這個作業看的一些課程跟教學影片的心得，所以會有很多廢話。

胡立老師的課程正式開始前，有上微軟 Microsoft Virtual Academy 的 JavaScript Fundamentals for Absolute Beginners，當時雖然大致上聽得懂（例如迴圈的概念，條件判斷的概念...等等），但很多細節其實還是模糊的。前面的作業著重在 HTML/CSS 上，所以只是想要先有 JavaScript 基礎的概念，想說還有時間可以精進 JavaScript。另外一點是，我不太適應微軟 MVA 那位老師的教學風格，所以沒看得很認真，也想說可以在上 Hahow 的課時再仔細學過，但後來發現到要寫作業四時，當時上課教的都忘得差不多了，果然「大致上聽得懂」並沒有進入頭腦中。

Frontend Intermediate Course - 作業三直播筆記

這次作業老師給我的評語是：「Good! 很不錯」，還有《值得參考》的標籤！
(*´▽`*) 太開心了～

胡立老師的直播：
3. 寫 CSS 必備神器：CSS 預處理器

看完直播後沒甚麼大問題，有幾個地方寫一下筆記：

1. 在 Command Line 上直接編譯 Sass。
正常好像應該要用 Compass 在 Command Line 上編譯 Sass 檔案，但我是用 Sublime 上的 SASS Build 編譯的。應該短時間不會換別的文字編輯器，單純自己對 Command Line 有莫名的恐懼感（？，所以一直沒有研究如何操作 Command Line，之後應該要研究一下。

2. 寫出有效率的 CSS。
前幾天有一個同學問到關於 CSS 巢狀結構的一些問題，然後有另一個同學提到巢狀結構不要太多，否則會影響瀏覽器的效率，這篇文章很不錯：如何撰寫有效率的CSS選擇器 (CSS Selector)。還有另一篇文章是老師在直播的時候提到的 淺談 CSS 方法論與 Atomic CSS，這篇是講解寫 CSS 選擇器命名的一些規範，也是學 CSS 更深入之後要研究的東西。

3. PostCSS。
剛開始要了解 PostCSS 覺得很頭大，後來用了 Autuprefixer 之後覺得真是太好用了！還沒有仔細研究 PostCSS 裡面的每一個 plugin，不過之後應該要研究如何好好應用。


自己直播筆記大致上就這樣。之後的作業就把重點放在 JavaScript 上了，覺得壓力大，因為我的 JavaScript 還沒學熟，要努力惡補～

Frontend Intermediate Course - 作業三

作業 3 的 GitHub 連結：寫 CSS 必備神器：CSS 預處理器

第三個作業原本以為應該不會花很多時間，不過研究如何在 Sublime 上面把 Sass 編譯成 CSS 花了不少時間，還另外寫了一篇：在 Sublime Text 3 將 Sass 編譯成 CSS。

Sass 的基本大致了解，不過還是想要仔細學過一次，剛好 Codecademy 上面有 Sass 的課程：Learn Sass，所以昨天把那門課上完，上完後才知道原來除了可以使用變數、mixin 之外，Sass 還有運算跟函式的功能，以及如何管理 Sass 檔案等等，是不錯的課程，對於 Sass 也有更全面的了解。

Frontend Intermediate Course - 作業二直播筆記

今天剛看完直播，老師也蠻早就修改我的作業了。

這次作業二老師修改後給我的建議有：

1. 檔案名稱可以統一叫 indes.html，比較有一致性。
2. 滑鼠移到圖片上面會變色塊，是你在測試什麼嗎 XD
3. 可以試著幫 box-shadow 加上 transition 看看，效果更好。

第一點只需要修改檔名即可，當時想說要區別不同作業所以才叫不同的檔名，不過檔案其實放在不同資料夾內，所以的確不需要另外命名。

第二點是因為在自我練習裡，其中的第一題是要滑鼠 hover 過去時背景顏色改變，但在我看完老師的直播後才發現我理解錯誤他的問題，其實只要 background 換一個顏色就可以了，我想得太複雜了 XD。

第三點也很容易修改，當時忙著處理改變背景忘記加 box-shadow，所以也忘記加上 transition，後來老師改之前有修改加上 box-shadow 但完全忘了 transition。

卡士達泡芙

泡芙應該是我曾經做失敗最多次的甜點。以前剛開始學做泡芙的時候，沒有抓到訣竅，失敗了兩、三次，泡芙都無法順利膨脹。可是即使失敗，爸爸跟弟弟也會幫我吃光光，所以我更加努力研究想做出成功的泡芙給他們吃。好在失敗三次後就成功了，不然他們要一直幫我吃失敗的作品 XD。

今天的食譜，泡芙外皮是參考 Carol 老師的 基本泡芙外皮，卡士達醬是參考她的 烘焙新手變達人的第一本書 中的第 48 頁的「卡士達醬」。

因為想要把步驟講的盡量詳細，所以照片比較多。

基本上泡芙的材料很簡單，只要抓到訣竅就可以做得很成功。我建議先做卡士達醬，這樣泡芙烤好後就可以馬上加入卡士達醬享用了～

在 Sublime Text 3 將 Sass 編譯成 CSS

在 動畫互動網頁程式入門（HTML/CSS/JS）上，吳哲宇老師使用 Sass 當作 CSS 的預處理器，可以設定變數、利於 Nesting、引入 Mixins 等等優點，比起純 CSS 還要方便好用。剛好 Frontend Intermediate Course 中的第三週作業就是要用預處理器寫 CSS，於是想要在 Sublime 上面設定 Sass，並將 Sass 編譯成 CSS。

在 Sublime 上面把 Sass 編譯成 CSS 比我想像還要麻煩，本來以為只要在 Sublime 上面安裝 Sass 套件就可以了，結果根本不是這樣子（我太天真的啊...）

Google 搜尋之後發現還需要安裝 SASS Build 套件才可以將 Sass 編譯成 CSS。當我以為這樣就完成安裝設定後才發現，不是只在 Sublime 上面安裝那兩個套件，還要在電腦安裝 Ruby 跟 Sass 才可以，我果然是太天真了...

於是就努力的研究一下到底要怎麼安裝設定才可以，以下是我自己的設定過程，如果需要比較詳細的教學，我在 YouTube 上面發現 Peter Sommerhoff 教學影片還不錯 Sass Beginner Tutorial，可惜是在我差不多都設定完成之後才看到。

Frontebd Intermediate Course - 作業二

作業 2 的 GitHub 連結：讓畫面變得更動態：神奇的 CSS transition

第二個作業是第一個作業的延續，基本上在方塊的 CSS 下面增加 :hover，然後增加亮度 filter: brightness(1.2) 就達到作業的基本要求了，前後不到 5 分鐘就快速完成 XD 亮度沒有調很高，因為實況主的頭像是淺色的，亮度太高看起來很刺眼。

如果是在 CSS 裡用加圖片，要做到自我練習第一題的要求，hover 的時候改變顏色，也沒有很困難。:hover 下面加入方塊視窗的屬性，然後改變背景顏色，這裡我原本的背景是插入圖片的，所以有先移除背景圖片 background-image: none 再改背景顏色。

Frontend Intermediate Course - 作業一直播筆記

今天剛看完胡立老師的直播，剛好他也改完我的作業，所以趕快來寫一下這次的筆記。

老師這次給我的建議有：

1. row1、row2、row3 有共同的 CSS，所以應該在 div 的 class 裡多加 row，這樣擴充性比較高，才不用增加 row 就要改一次 CSS。HTML 改成如下：

<div class="row row1">
....
</div>

2. 頻道名稱跟實況主名字那邊做垂直置中對齊。

第一點的確是我疏忽沒加到，要修改也蠻容易的，所以我就馬上改了我上次 CodePen 上面的檔案。

不過第二點我想要在頻道名稱跟實況主名字外面加 div 然後再去定位，不過這樣 CSS 那邊要修改的地方很多，加上看別人寫的作業，才發現我的 HTML 跟別人長得不一樣 XD，所以想說整個大修改好了，之後的作業二就會用修改過的版本。

巧克力戚風蛋糕

四年多前剛開始自學烘焙的時候，心裡想著我要是能把戚風蛋糕做成功就滿足了。後來當然沒有因為學會戚風蛋糕就因此滿足，有段時間天天烤不同的東西吃，甚至還自己養酵母做麵包，對烘焙很入迷。

最近比較少動手烤東西了，突然很想念巧克力戚風蛋糕，於是就動手烤一個來吃，然後拍照記錄一下。處理照片跟寫文章的時間比做蛋糕還多很多，真心佩服網路上那些美食部落客。這是我第一次寫烘焙教學文，平常都只會發一張完成照在 Instagram 跟 facebook。我沒受過專業的烘焙訓練，如果有錯還請多多指教。

這次的食譜是參考 Carol 自在生活：烘焙新手必備的第一本書 中第 230 頁的「超軟巧克力戚風蛋糕」，原食譜上有燙麵糊，我以前嘗試過但是不太成功，所以這次沒有使用燙麵法。我是 Carol 老師的書迷，手上大部分的烘焙書也是她的烘焙書。她的部落格上也有很多食譜可以挖寶，如果喜歡她也可以買她的書支持她～

在 Google Blogger 顯示程式碼

因為開始記錄寫作業的過程，作業裡面含有許多程式碼，想要特別區分出來，但是 Google Blogger 的後台並沒有支援，所以研究了一下要怎麼做。

不研究還好，研究後才發現事情沒那麼好解決，花了好多時間在上面（不過後來發現是因為自己疏忽而白白浪費時間）。

先說明一下為什麼當初會選擇 Google Blogger 寫部落格。

• 比起其他的 Blog Service Provider (BSP)，Google 的未來比較穩定，至少在短期內不會倒。如果部落格寫一段時間了，BSP 宣布經營不善，到時候要搬整個部落格真的好麻煩。
• Google Blogger 是免費的，而且短期內也不會有需要付費的趨勢。
• 頁面乾淨，不會強迫被放置自己非自願放置的廣告。
• 可套用 Blogger 的版型，在後台微調字型大小跟顏色很容易，也可以自己改寫CSS。

不過缺點就是後台沒有方便顯示程式碼的功能。

Frontend Intermediate Course - 作業一

作業 1 的 GitHub 連結：基本 HTML/CSS 練習：以 Twitch 為例

這個作業還沒有用到 JavaScript，我也剛好上完 動畫互動網頁程式入門（HTML/CSS/JS）的 HTML 跟 CSS 的部分，趁記憶還很新所以 4 月 9 號開始寫，大概3-4個小時完成吧，因為剛開始還犯了一個很笨的錯誤所以拖了一點時間。

九個方塊其實把一個刻出來之後複製九次就可以了，不過如何把九個方塊放到我想放的位置上讓我考慮了很久。

一開始想直接對九個方塊分別定位，但是這絕對不是最好的選擇，在不同螢幕大小上一定會跑掉，雖然作業沒有要求 RWD，我也還沒學完 RWD，不過有預感這絕對是最糟糕又最花時間的方式，所以被淘汰。

後來想到吳哲宇老師有教過 flexbox，可以利用 justify-content: center 跟 align-self: center 來左右跟上下置中，比起設定 margin-left: auto、margin-right: auto 來調整寬度還要準確方便（詳細 felxbox 的用法可參考：A Complete Guide to Flexbox），但又考慮到 flexbox 上下間距的調整比較不方便，或許因為我也還不熟悉的關係 flexbox 所以不太會應用。後來想到的方法是把九個方塊分成三列，然後三列各用一個 block 包住三個方塊，所以可以利用 flexbox 的置中方便性，也可以方便調整上下距離。

Frontend Intermediate Course - 緣由

之前有提到在 Hahow 上面買了線上課程 初心者的計概與coding火球術，後來收到胡立老師寄給學生的 email，詢問我們上課的情形以及回饋。原本想要等我全部的課程影片看完才回 email，不過當時已經偷懶了好一陣子沒繼續上課，又想說胡立老師這麼認真，應該要好好寫 email 鼓勵一下他。

然後來回 email 了 3、4 次，後來胡立老師問我有沒有在學其他的程式語言，還有對他即將要開的免費程式線上課程有沒有興趣，只是這次的課程屬於前端網頁設計的加強課程，所以必須要有一些基礎，要懂 HTML、CSS、JavaScript。而我其實對那些都不懂，只有 3 年多前在 Codecademy 自學一點點 HTML/CSS，但幾乎都忘光光了。

三隻小貓三歲生日快樂

三年多前 Mary 流浪到我家後院，瘦得皮包骨吃著原本應該給小鳥吃的麵包，爸爸看她可憐買了貓飼料給她吃，然後就住在我家後院。當時 Mary 還不親人，所以即使發現她是母貓後也無法把她帶去結紮，終於在漸漸信任我們之後，我們才發現她已經懷孕了。

然後在三年前的四月四日，Mary 生下了兩灰一黑小貓貓，有著跟她一樣的白色襪子、白肚子、以及可愛的白下巴。

苦思要幫她們取什麼名字一個月後，才終於決定幫她們取名為 Sushi、Bento、Mochi，分別是壽司、便當、麻糬。雖然住在美國，但平常在家都跟貓貓講台語，而這三個單詞剛好是台語中的日語詞彙，所以有英文拼音，用台語叫起來很順口，要帶她們去獸醫看病也可以寫成英文，而且也很美味（？

從她們一出生就看著她們長大，看她們學習走路、學習跑跳、學用貓砂、學爬樹，經歷她們第一次去看獸醫，第一次生病、結紮，第一次幫她們餵藥、剪指甲。努力學習貓貓的營養學，了解如何看飼料跟罐頭的成分以及算出碳水化合物，成為鏟屎官及陪睡員，要處理便便跟嘔吐物，有時還要處理她們從外面帶回來的「禮物」。

雖然她們頑皮、任性、傲嬌，但是撒嬌起來又可愛的不得了。無時無刻都想吃東西，像小豬豬一樣，但看她們吃飯的樣子覺得很滿足。她們生病時為她們擔心，看到她們安詳的睡臉及聽到她們的呼嚕聲就會覺得被療癒了，她們是幸福的貓貓，而我也是幸福的貓奴。

去年 11 月 30 日 Mary 去當小天使了，心中有許多不捨。感謝 Mary 來到我們家，帶給我們三隻可愛的小貓貓，有她們的陪伴，讓每天的生活都充滿歡笑。

Sublime Text 3 套件安裝紀錄

這篇只是單純想記錄自己的 Sublime Text 3 安裝了哪些好用的套件，萬一哪一天需要重新安裝 Sublime 的時候可以回頭看，未來應該會持續發現好用的套件，也可以更新及寫下各個套件使用的小技巧，總之算是自己的 Sublime 小抄。

在網路上參考了許多前輩的教學文章，受益良多。其實我仍在摸索中，安裝的套件目前以前端網頁設計為主。

首先當然一定要安裝 Sublime Text 3，然後再安裝 Package Control，未來要安裝任何套件都要透過它。安裝步驟可以參考 The Will Will Web 保哥寫的文章，圖文並茂很詳細，我也有安裝不少個保哥推薦的套件。

Microsoft Virtual Academy - Introduction to Programming with Python

之前曾在 Codecademy 自學 Python 的課程，但是學到 60% 左右就開始很吃力，後期的練習幾乎都沒辦法自己想出答案，要一直看討論區上別人寫出的答案，但我非常不喜歡那樣，覺得好像在偷看別人考卷上的答案。所以就思考是否因為我的基礎不夠好，才會造成這樣的現象。這也是讓我想要去 Hahow 上 初心者的計概與coding火球術 的主要原因之一。

後來大惡魔推薦我看微軟上的 Python 課程 - Introduction to Programming with Python，這堂課就真的非常適合初學者，兩位老師教得很淺顯易懂，而且互動活潑，這樣的教學課程比起只有單一老師的教學又來的更生動有趣。

我個人最喜歡的部分是兩位老師分享自己在工作上遇到的一些情況，以及給學生們的提醒和建議。舉個例子，他們在課程開始就鼓勵大家在自己的程式碼裡面加入註解，以便日後自己回頭看的時候輕鬆了解當初為什麼那樣寫，也幫助其他人理解自己的程式碼。但是他們也強調，當註解是為了解釋自己所設的變數代表什麼的時候，反而是沒有必要的，需要做的事情應該是設字面上有意義的變數，而非用註解去解釋變數（例如比起用 x 作為變數，用 userAddress 才是更好的選擇）。

像是這樣的提醒跟建議真的很受用，而且可以幫助培養好的寫程式習慣。不過這樣的分享在很多自學的網站或單一老師授課的教學裡比較少，所以這堂課真的真的很推薦給 Python 初學者。雖說是給初學者的課程，但是寫程式的應該懂的基本都有教，而且重點是免費！

微軟的 Microsoft Virtual Academy 還有不少免費的課程，有興趣的人也可以看看～

用Scratch做小遊戲 - Little Tank 2

這是上次的 Little Tank 1 進階版，一整個大躍進 XD

首先在 Pinterest 上找了素材，然後用 Affinity Photo 去背（當然可以用任何繪圖/照片編輯軟體去背），接著上傳素材到 Scratch 上。

最困難的還是寫程式，這次跟上次不同的地方有：
1）有兩個背景
2）敵方小坦克會發射子彈
3）增加大魔王坦克，並在固定時間出現

其實第一點跟第三點不太難，最難的是第二點。敵方小坦克設定隨機出現，同時要發射子彈，我完全不知道要怎麼用 XD。後來跟大惡魔求救，原本要用清單去做，但是 Scratch 的清單功能比較陽春，無法指定物件，所以又換了別的方法。修修改改四、五次，到最後仍然有小bug，敵方小坦克跟子彈有時候不太同步，常常敵人還沒出現就出了子彈，或是敵人明明死了還有子彈跑出來 XD。

坦克遊戲就告一段落了，我也不知道為什麼想做坦克遊戲，哈哈，可能單純覺得射擊遊戲比較簡單，但做了之後才發現要考慮很多，沒有想像中的簡單。不過也有可能 Scratch 的功能本來就比較簡單，所以有些想要做出的效果都沒辦法做到。但是可以自己寫一個小遊戲還是蠻有成就感的 :)

Little Tank 2 on Scratch

用 Scratch 做小遊戲 - Little Tank 1

去年在 Hahow 上買了一門線上課程叫做 初心者的計概與coding火球術，胡立老師在課程裡面介紹了 Scratch 這個網站，它是由麻省理工學院開發出來的一個免費程式語言學習網站，很簡單易懂，是由組合積木的概念去寫程式，所以即使你任何程式語言都不會也可以寫出一些簡單的小遊戲。

我之前有在 Codecademy（也是免費的程式語言學習網站）自學過一點點 HTML、CSS，跟 Python，但是不常用容易一下子就忘光光了 XD。現在網路上也越來越多這類的學習程式語言的網站，像這篇：想學程式設計，你怎麼能錯過這 31 個學 Coding 的網站 裡面就推薦很多個，有興趣的人可以看看。

而 Scratch 跟這些網站不同的地方在於，你不用會寫任何一個程式語言就能寫程式，所以想要學習程式語言的人，就不會被繁雜的語法給困住而自信心下降。Scratch 是訓練你理解程式語言運作的邏輯，當然，如果你本身已經有基礎，一定是比完全沒接觸過程式語言的人還容易上手。

由於我只是接觸過一點點皮毛的初心者，所以還是從簡單的小遊戲開始練習，才不會挫折感太大。我參考了胡立老師在課程裡面教的東西去做變化，做了一個射擊方塊的小遊戲，把它叫做 Little Tank 1，因為之後還想做進階版本 XD。

這看起來簡單的小遊戲（其實對會寫程式的人來說也的確是簡單的小遊戲 XD），在做的過程中也是有遇到一些問題，然後每次自己試玩的時候就會發現還可以改進的地方或小 bug，然後去做調整，這個小遊戲仍然不是最完美的狀態，不過學習的過程就是如此，而這是我學習程式語言的過程和小成果 :)

Little Tank 1 on Scratch

開張大吉

突然想要記錄一下生活中的學習心得，可以當作自己的筆記本，或許也能跟其他人一起分享。

預計會放一些烘焙、手作、程式語言或貓咪相關的東西，希望自己能盡量寫，不要太懶惰 XD