# 2020/06/11

## 今日進度：

1. 看完 MTR 04 計畫簡介 / 交作業流程
2. 寫了個從臉書社團 I am Programmer,I have no life 看到的題目：

function myFunc(n) {
  let [arr1, arr2, arr3] = [[1], [3], [2]];
  for (let i = 0; i < n; i++) {
    let res = arr1[i];
    let count = Number(res);
    for (let j = 0; j < i; j++) {
      count += 2;
      res += ` ${count}`;
    }
    arr1.push(arr1[i] + arr2[i]);
    arr2.push(arr2[i] + arr3[i]);
    arr3.push(arr3[i] + 1);
    console.log(res);
  }
}

寫得蠻醜的 XDD But works!

# 2020/06/12

## 今日進度：

1. 觀看 [MTR04] 第一周-課程簡介 / 檔案格式 / 網頁前後端整體架構說明

## 今日筆記：

1. 純文字 vs 有格式的文字

純文字：給電腦看的。電腦會將特定文字轉換成某種易於人類觀看的格式，例如我們正在寫的 Marldown 語法，
\# 會轉換成標題，\## 會轉換成副標，讓文章富有層次感，在視覺上傳達更多訊息。純文字對人類來說比較難理解，
沒有學過會看不懂。

有格式的文字：給人類看的。有標題、副標、文本內容、圖片、超連結…等，我們網頁打開所看到的一切，
解讀方式類似於圖像，較為直覺。電腦看不懂這些有什麼差別，他只知道這樣畫出來的結果是人類想看的。

## 今日自我檢測：

1. 你說得出程式如何執行：
最近在朋友的車廠當打工戰士，工作的過程我認為跟電腦運作很類似。首先我得記住各種工具 / 機器的位置，
這樣我就能做好一件事了：幫忙拿工具。也就是說，只要師傅一聲令下：14 號 氣動槍，我就會去工具所在位置
拿 14 號鎖頭與氣動工具給車底下的師傅。
電腦也是一樣，設定好資料存取的位置，只要告訴電腦位置電腦就會去那個地方取得資料。

2. 你理解寫程式的本質只是一行行的指令：
延續剛才打工戰士的例子，某天，師傅教我如何使用切割工具：

步驟 1. 測量好鋼材的長度
步驟 2. 鎖緊鋼材
步驟 3. 開啟電源
步驟 4. 小心切割
步驟 5. 關閉電源
步驟 6. 鬆開鋼材
步驟 7. 完成

這樣我又能做好一件事了：幫忙切鋼材。
之後只要師傅一聲令下：幫我切 1 支 51 mm 口徑 30 公分，我就能切好材料。
寫程式就像是師傅在教我使用工具的過程，我將步驟一一記在腦中，之後我只要收到"切 X 支 XmmXcm"這樣的訊息
就會照著上面的步驟操作機器切割材料。

用程式的角度來看就像這樣：

切鋼材 ( 口徑 A , 長度 B ) {

1. 找到 A 口徑的鋼材
2. 量出 B 公分
3. 鎖緊鋼材
4. 開啟電源
5. 小心切割
6. 關閉電源
7. 鬆開鋼材
8. 完成
}

當師傅需要材料時，就呼叫：切鋼材 ( 51, 30 ) 。
沒有發生意外的話過 30 秒左右就能獲得所需要的材料。

## 今日心得：

為了生存一邊打工一邊上課好累阿 QQ，中午利用休息時間看課程影片，回家累得半死但是不得不擠出最後一點
力氣學習，下個月就能全天專心學習了，再撐半個月！

# 2020/06/13

## 今日進度：

1. 完成 week1 hw1,3,4

## 今日筆記：

- git remote -v : 查看目前的遠端資料庫
- git clone \_\_\_(url) : 複製遠端資料庫到本機
- git branch : 查看所有 branch 與目前所在 branch
- git branch \_\_\_\_(branch name) : 建立新的 branch
- git checkout \_\_\_\_(branch name) : 切換 branch
- git push origin \_\_\_\_(branch name) : 將目前 branch 推到遠端資料庫
- git pull origin master : 將遠端的 master 分支拉回本機合併
- git branch -d \_\_\_\_(branch name) : 刪除 branch

## 今日自我檢測：

關於意志力的極限：其實這種事很簡單，不做這件事就要承擔毀天滅地的後果，再怎麼累無論如何還是得做，
沒錯就是進度報告就是你，我希望我不要缺交任何一天進度報告。

## 今日心得：

先求有、求穩就好，這個月一邊工作一邊跟課就是會比較累一點，至少要跟上官方配速員，每日進度報告不要缺，
作業按時交。

# 2020/6/14

## 今日進度：

1. 第一週作業完成並繳交

## 今日筆記：

- push 的時候遇到 Permission denied ，原因是我換了個 github 帳號，導致 push 時出現認證問題。
在 windows 的認證管理員刪除 git:https://github.com ，重新 push 就會跳出帳號密碼輸入框，輸入我新的 github 帳號就 OK 了。

## 今日自我檢測：

關於假日的安排：今天是休假日不用上班，沒有週休二日真的很痛苦，根本沒時間休息。今天睡到下午 4 點才起來做事，
還好作業沒卡關太久，遇到問題稍微 google 一下就解決了。課程進度穩定推進中，下禮拜想開始第二週的部分。

## 今日心得：

想要一週至少找一天游泳鍛鍊體力，撐住阿我的身體。

# 2020/06/15

## 今日進度：

重新挑戰 week1 超級挑戰題，因為昨天使用了 fx ，導致超級挑戰題輕鬆完成，但這樣是不對的，沒有用規定的方法練習作業
會學不到該學的東西，今天驚人發現 git-bash 裡有 touch cat grep sed...等程式，我之前都用 VS code 的 Terminal (cmd) ，想說
windows 都沒有那些上課教的實用指令 QQ，真的很 87 ，都不知道開錯程式。順帶一提，原來之前在 schell script 裡使用 touch 以為都沒反應，結果檔案都建立到 ming64/bin 裡了。

# 2020/06/16

## 今日進度：

觀看 JS101 位元運算　/ 變數

## 今日筆記：

& : and 位元運算
&&: and 邏輯運算
| : or 位元運算
|| : or 邏輯運算
^ :兩個東西一樣就回傳 0，不一樣回傳 1
~ : 把二進位的數字 0 變 1、1 變 0，要注意的是其實二進位數字是例如這樣儲存的: 00000...001111,
所以在用 ~ 運算時會把前面的 0
都變成 1
num & 1 == 0 // 偶數
num & 1 == 1 // 奇數
{a:1}==={a:1} // false，記憶體位置不一樣
變數就是存記憶體位置

# 2020/6/17

## 今日進度：

MTR04 第三週 程式基礎 下

## 今日筆記：

設定 eslint (ECMAScript lint)：

1. 到 \mentor-program-4th-awuuu0716 npm install
2. commit 時會自動觸發 eslint (git hooks)，檢查不符合標準的語法
嘗試使用 eslint 後報了一大串錯誤，節錄一些重點：

- Expected linebreaks to be 'LF' but found 'CRLF'
換行符號 eslint 建議用 LF，修改 VS code 預設配置即可，settings --> Text Editor --> Files --> eol --> \n

- Unary operator '++' used
for 迴圈內也不行用 i++嗎 QQ，eslint 真嚴格，我是習慣除了 for 迴圈以外都不會用 ++ 拉 ( 用+= )，有點想忽略這條規則 XD /_eslint no-plusplus: ["error", { "allowForLoopAfterthoughts": true }]_/

- Strings must use singlequote
我的 Prettier 預設使用雙引號，改成單引號即可。

# 2020/6/18

## 今日進度：

完成 week3 作業，但還沒繳交，因為 eslint 導入後改了超多東西 XD，實在是太可怕了，原來我以前寫的東西一大堆都不符合 eslint 的規則，改完後丟到 LIOJ 上測試出現了一些錯誤，目前已修正皆 AC 了，等明天頭腦清醒一點時再檢查一次沒問題再上繳作業。

## 今日筆記：

- 'xxx' is never reassigned. Use 'const' instead 。不會改變的值就用 const，我之前全都用 let 。
- Expected an assignment or function call and instead saw an expression。不要濫用三元運算符，[說明](https://hant-kb.kutu66.com/javascript/post_1091610)，可是好好用 XD，一行就能解決一堆 if else。
- Identifier 'xxx_xxx' is not in camel case。一律用 camel case，不用底線命名變數。
- Use object destructuring。使用解構賦值，const a = obj.a --> const { a } = obj

## 今日心得：

我想 eslint 應該是團隊協作相當重要的一個規範，如果大家都有自己一套寫 code 的風格，協作起來感覺會很難閱讀彼此的程式碼 XD，像我自己就很多奇奇怪怪的寫法…這個練習感覺受益良多~

# 2020/6/19

## 今日進度：

JS102-模組化與 Library、NPM：把你們的力量借給我吧

## 今日筆記：

- 引入模組：const 任意變數名稱 = require('模組名稱')
- 輸出模組方法 1：module.exports = 要輸出的東西 (function / 變數 / 物件 ...) ，引入時要輸入路徑名與檔案名，例如：require('./double')
- 輸出模組方法 2：exports.double = double，會輸出物件。
- npm install --save，將模組寫進 package.json 的 dependencies。
- npm init，初始化 npm 會產生 package.json，npm install 時就會安裝 dependencies 裡的東西。
- npm script，寫進 package.json 裡的 "scripts" 的東西可以用 npm run "script 名稱" 執行

## 今日心得：

感謝 zangwang 同學提供的 Badge ~ 超強的

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/6/20

今晚休息。白天上班，晚上 Last of us 2。

# 2020/6/21

## 今日進度：

1. JS102 來幫你的程式寫測試吧！/ 配備升級：ES6
2. 繳交 week3 作業 1~6 & 挑戰 1, 2

## 今日筆記：

- TDD : Test-driven Development ，先寫測試在寫程式，寫完程式後可以馬上跑測試看是不是對的。這種感覺有點像寫 LIOJ 或 codewar 的題目，只不過測試內容是我們自己寫。

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/6/22

## 今日進度：

NET101 理解網路以前，先來理解溝通是怎麼一回事 / 由上到下：從 HTTP 協定開始講起

## 今日筆記：

- 為什麼我們需要協定( protocol )，方便溝通與規模化，例如去國外買東西用計算機 (阿拉伯數字) 按一按就知道價格多少。
- DNS (Domain Name System)，計程車司機，我要去中正紀念堂，老司機就會帶你去台北市中正區中山南路 21 號。
- 瀏覽器只是另外一個程式，沒有瀏覽器還是可以發 request 從伺服器拿到東西。

## 今日心得：

NET101 是我比較不熟悉的主題，預計花個一週時間慢慢消化知識~
[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/6/23

## 今日進度：

MTR04 網路基礎
NET101 由上到下：從 HTTP 協定開始講起 / 由下到上：從 TCP/IP 開始談起

## 今日筆記：

- 我們為什麼要學網路基礎？加深整個網路運作模型，將來 debug 時能將運作流程拆的更細，找出是哪個環節出了問題。
- HTTP return codes cheat sheet :
1\*\*. Hold on
2\*\*. Here you go
3\*\*. Go away
4\*\*. You fucked up
5\*\*. I fucked up
- 網路七層? (理論)，TCP / IP 四層 (實作)
- 192.168.0.135 沒有辦法連到 Huli
- 192.168 / 10 開頭的通常是虛擬 IP
- port : 區別不同服務 ，HTTP 80 / HTTPS 443 / FTP 21
- TCP : 三次握手，可靠的協議，HTTP / FTP 都建立在 TCP 上
- UDP : 要求傳輸快，例如：視訊

## 今日心得：

看完網路四層介紹對應到傳紙條的流程，什麼什麼層的似乎具體了一些，對於網路這種黑科技比較沒那麼恐懼了。
蠻好奇各種不同網路遊戲是用什麼通訊協議？動森常常跟朋友連不上線超不爽的，出現什麼 NAT 穿透失敗完全看不懂的訊息，
而且神祕地改用 wifi 或手機熱點連線就沒問題了，網路真的是黑科技阿 QQ。
[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/6/24

## 今日進度：NET101 你一定聽過的名詞：API

## 今日筆記：

- 所謂串接 API : 丟 request ，拿到資料，如此而已。
- XML : Extensible Markup Language，一種標籤語言，跟 HTML 很像

<?xml version="1.0" encoding="UTF-8"?>
<user>
    <id>2</id>
    <firstName>Janet</firstName>
    <lastName>Weaver</lastName>
    <avatar>http://...</avatar>
</user>

- JSON.parse(json 格式字串) : 把 JSON 字串變成 JavaScript 物件。
- JSON.stringify(JavaScript 物件) : 把 JavaScript 物件變成 JSON 字串

## 今日心得：

加班好累。
[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/6/25

## 今日進度：NET101 透過網路交換資料的第一種方式：SOAP / 以及後面剩下的單元

## 今日筆記：

- SOAP : 透過 XML 資料交換
- RESTful : 不是協定，是一種風格，要你好好去使用 HTTP 給你的那些東西 (GET / POST / DELETE / PATCH)

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/6/26

## 今日進度：

undefined

## 今日心得：

終於放假了，大休息。

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/6/27

## 今日進度：

undefined

## 今日心得：

再...再休一天就好

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/6/28

## 今日進度：

寫 week4 作業

## 今日心得：

今天試著用 node.js 內建的 http 模組來發 request：

const http = require("http");

const options = {
  host: "lidemy-book-store.herokuapp.com",
  path: "/books?_limit=10",
};

const callback = (response) => {
  let str = "";
  response.on("data", (chunk) => {
    str += chunk;
  });

  response.on("end", () => {
    const result = JSON.parse(str);
    console.log(result);
  });
};

http.request(options, callback).end();

用 JSON.parse() 可以將拿到的 str 轉換成 JS 物件，然後 callback 函式中的 response.on() 有點搞不清楚怎麼用 QQ ，
有點在蝦七八寫，能拿到資料就好，可能要再仔細研究一下這模組怎麼用。
[官方教學](https://nodejs.org/en/knowledge/HTTP/clients/how-to-create-a-HTTP-request/)

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/6/29

## 今日進度：

寫 week4 作業

## 今日心得：

大致上完成了 hw2 ，剩下 update 的功能不知道為什麼一直出錯，再研究看看。

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/6/30

## 今日進度：

無

## 今日心得：

打工終於結束了，最後一天還在加班 QQ，接下來要全天用力衝刺了，今晚先休息一下。

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/7/1

## 今日進度：

寫 week4 作業

## 今日筆記：

- 用 node.js 內建模組: http 發帶有資料的 request 時，要記得在 headers 內帶 content-type，
可以用 application/x-www-form-urlencoded 或是 application/json。[詳細資料](https://medium.com/@des75421/post-%E8%AB%8B%E6%B1%82%E9%A0%AD-content-type-82b93f9230f7)

## 今日心得：

寫 hw2 卡關卡爆，一直沒辦法完成 post 跟 patch 的功能。之前用 axios 時似乎模組自動讓 headers
帶上 content-typecontent-type 了。用 node.js 的 http 模組需要自己寫入 content-type，沒發現這件事導致我卡關。

在此感謝 JAS0N HUANG 同學的 week4 作業~ 我參考你的程式碼之後才找到我哪裡出錯 QQ，幫了我大忙。
希望你順利繼續往前衝帶大家前進 XD

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/7/2

## 今日進度：

week 4 作業 1 ~ 4 完成

## 今日心得：

用 http 模組發 request 時要小心他不會自動跟著轉址，要寫處理轉址的 code 好像有點困難，所以在 hw4 我直接改用 https 模組避免轉址問題了 QQ

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/7/3

## 今日進度：

week4 作業 1~5 完成並繳交

## 今日心得：

接下來的進度是複習周，嗯…明天來計畫一下要做什麼吧！

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/7/4

## 今日進度：

觀看 MTR04 第五週（07/13 ~ 07/19）：複習週

- Show time！公車即時動態

## 今日筆記：

## 今日心得：

公車即時動態 8:25 秒時突然看得霧煞煞，才發現 Huli 是要查 request 這套件的用法 XD，讓我想到這張梗圖
然而我覺得這張圖並不是要諷刺什麼，工程師本來就不是在訓練記憶力，而是訓練邏輯與使用工具的能力，
那些不用查資料就能寫出來的 code 並不是硬背出來，而是早已寫過千百遍、不想記也自然記起來的語法，
而比較不常用的工具自然得去查文件了解用法。對我這個新手來說，所有東西都是不熟的 XD，
寫個題目查資料查半天也是家常便飯，看到 Huli 做了類似的事情感到十分親切，也許這個工作流程也會在將來不斷重複呢…

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/7/5

## 今日進度：

觀看 MTR04 第五週（07/13 ~ 07/19）：複習週

- Show time！寄信小程式
&& 小魔女諾貝塔打完人偶王

## 今日心得：

今天稍微放鬆了一下，看完 Huli 做完寄信小程式後上 Steam 買了小魔女諾貝塔，真不愧是類黑魂遊戲，超級不放鬆的，
但是[角色](https://www.ptt.cc/bbs/C_Chat/M.1593764267.A.012.html)真的香到爆，而且只要 250 塊，超便宜。（欸不是，程式的心得呢？
[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/7/6

## 今日進度：

MTR04 第六週（07/20 ~ 07/26）：前端基礎 HTML 與 CSS

- Zeplin 介紹
- 課程簡介
- 作業介紹

## 今日筆記：

- Zeplin : 工程師與設計師溝通的工具，可以看到網頁的設計圖、用什麼字體、字體大小等，一個很方便的東西，
以後工作可能會用到，沒有的話請節哀，因為真的很方便。
- 在 HTML 盡量使用有語意的標籤，對 SEO 與無障礙瀏覽比較好，例如：h1 代表標題，需要標題時就用 h1 取代 div。

## 今日心得：

偷喵了一下第六周的要做的事，發現工作量驚人 XDD，想說 1~4 周課程復習得差不多了，趕緊來預習接下來的課程，HTML / CSS 是我剛開始接觸程式的'偽'程式語言 ( 一年就這樣過去了好快 QQ )，那時買了深入淺出三本 ( JS、HTML / CSS、JQuery )，只有 HTML 那本啃得下去，JS 跟 JQuery 因為資質駑鈍打開來全都是精靈語完全看不懂 QQ。
可能因為 HTML 與 CSS 比較容易具象化，可以直接打開網頁看到剛剛寫的東西，語意化的標籤也容易知道在幹嘛 ( h1 就是標題、navbar 就是導覽列、p 就是段落、img 就是圖片)，CSS 更是親切了，甚至能直接在 Chrome 上修改看到變化，但之後要實戰切版還是蠻痛苦的 XD，那些文字跟圖片永遠會找到辦法跑版…或是換個瀏覽器什麼鬼都看不到。

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/7/7

## 今日進度：

- Lidemy HTTP Challenge 通關

## 今日心得：

前情提要：
HTTP 挑戰在五月多時已經打開來玩破到 14 關，但是完全沒頭緒，就加入書籤等未來某天再來破。

到了未來某天：
點開躺在書籤的 HTTP Challenge lv14 ...
還是完全沒頭緒阿 XDD，此時突然想到 JAS0N HUANG 有寫[攻略](https://medium.com/@jas0nhuang/lidemy-http-challenge-%E4%B8%8B-axios-%E9%80%9A%E9%97%9C%E6%94%BB%E7%95%A5-73c69c9cc937) XD ，偷喵一眼好了。（防雷圖）
原來是這樣!!!!
我一直誤會那句 " 讓 Google 搜尋引擎看到的內容跟我們看到的不一樣 "，我以為是指用 Chrome 瀏覽器看的內容會不一樣，
原來讓是 " google 爬蟲 " 看得不一樣，而 google 爬蟲有自己的 User-agent ，接下來就很簡單了…
[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/7/8

## 今日進度：

[FE101](https://lidemy.com/courses/enrolled/390445) 前端基礎：HTML 與 CSS

- HTML 基礎

## 今日筆記：

- \<div> : 分組的意思，會換行，左右兩邊都不會有東西
- \<span> : 也是分組，但不會換行
- \<ol><li> : 排序清單，可以想成 markdown 的 1. 2. 3.
- \<ul> : 無排序清單，可以想成 markdown 的 *
- \<pre> : 用來顯示程式碼
- 關於行與列 : 永遠都記不住的行列怎麼排，row 是水平排列、column 垂直排列
- \<table> : 表格
- \<th> : table header
- \<tr> : column
- \<td> : row，TableData
- \<a> : 超連結，anchor，也可以在頁面內導覽，例如：<a href = "#p3" > To p3 </a>，點下去後就會到 id 為 p3 的段落
- href : hypertext reference


- <main> : 把你覺得網頁最重要的地方包起來
- <nav> : 導覽列
- <footer> : 網頁最下方 copyright 之類的資訊
- </iframe> : 用 src 屬性帶入目標網址，可以把網頁嵌進來，但是伺服器可以設定擋 iframe
- <form> : 表單，搭配 <input type = "text" /> 或 <input type = "password" /> 使用，再使用 <input type = "submit" />送出表單

補充資料: [關於 input 有哪些 type](https://www.w3schools.com/tags/att_input_type.asp)

- <label for ="male"> : 在 label 標籤加入 for 屬性，點到 label 元素時會去觸發目標 id 的元素。搭配 input 可以實現點到文字就能選取選項的功能

[Huli 的 label 示範 6:13 秒](https://lidemy.com/courses/390445/lectures/5958278)

- SEO : Search Engine Optimization，搜尋引擎優化，有點難理解，大概是做得好的話搜尋引擎就能更好找到你的網頁
- 跟 SEO 有關的關鍵字 : <meta>標籤、Open Graph Protocol、JSON-ld (JSON for link data)、因為沒有實作過所以還不是很熟悉這些東西的效果，只能大概知道有這些東西存在
- escape : 讓被解析成 HTML 標籤的文字以純文字顯示。附上一個方便的轉換小工具：

[HTML Escape / Unescape](https://www.freeformatter.com/html-escape.html)

## 今日心得：

在看關於 SEO 的課程是我有點好奇搜尋引擎到底是什麼呢？他是怎麼爬到網頁的？搜尋引擎又會看到那些資訊？他是怎麼排序網頁的呢？
[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/7/9

## 今日進度：

[FE101](https://lidemy.com/courses/enrolled/390445) 前端基礎：HTML 與 CSS

- CSS

* week2 超級超級挑戰題 完成

## 今日筆記：

- CSS : Cascading Style Sheets (階層式樣式表)
- 從其他檔案引入 CSS :<link rel="stylesheet" href="./style.css" />，rel 是 relationship
- 同時符合多個條件 : div.bg-yellow {...}，中間不能有空格
- .lv1 > .bg-red : .lv1 底下 1 層的 .bg-red
- .lv1 .bg-red : .lv1 底下 所有的 .bg-red
- .bg-red + .bg-red : 同一層 .bg-red 正旁邊的 .bg-red
- .bg-red ~ .bg-red : 同一層 .bg-red 之後所有的 .bg-red
- 如何在 DevTool 測試 hover : Styles > Force element state > :hover
- :first-child :last-child :nth-child(n;odd;even;2n+1) : 選第一、最後、第 n 個元素。需要注意的是他會先看元素底下的第 n 個元素，在判斷他是不是你設定條件的那個元素。
- 偽元素(before;after;[更多...](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements)示範 : .wrapper::before {
content: "123";
color:red;
}
這樣就會在 .wrapper 前面加上一個內容為 123 的元素。也可以在 content 中取得 attr ，
例如： content: attr(data-id)，就會取得屬性名稱為 data-id 的值
- CSS Selector 權重的大致判斷 : important > inline-style > id > class > tag

* 背景圖片置中不重複 : background: url("./bg.jpg") no-repeat center center。也可以 right;left;top;bottom
* border : 邊框會往裡面長，會動到元素位置
* outline : 邊框往外面長，不會動到元素位置
* padding : padding:(上下) (左右)
* 文字水平置中 : text-align: center
* 文字垂直置中 (只有一行的情況) : height 跟 line-height 設一樣
* word-break : 幫你把文字換行，可以選 break-word 或 break-all
* white-space : 文字永遠在同一行 (no-warp)
* 讓超出範圍的文字呈現"..." : text-overflow : ellipsis ; overflow : hidden
* transition 記得不要加在 :hover 上
* box-sizing : border-box，不用再手動加加減減 width border padding
* block vs inline-block : block 不能並排 inline-block 可以並排
* relative 不會影響其他元素的位置
* absulote 會影響其他元素的位置，設為 absulote 的元素會跳出正常排版流程
* 絕對定位的參考點 : 往上找找到第一個不是 static 的元素
* position : sticky 當瀏覽器往下滾到設置的 top 高度自動保持 top 高度 XD? 天阿好難用文字說明，有點像滑到一定高度變成 fix，平常就跟 static 一樣

## 今日心得：

真不愧是超級超級挑戰題，不太好解呢，最後卡關靠洗澡大法找出 bug，感謝浴室之神。

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/7/10

## 今日進度：

week 2 超級挑戰題完成
week 5 心得撰寫 ( 60% 完成 )

## 今日筆記：

今天發 PR 時把 Huli 的新課綱混入作業裡拉 XDDD，一秒惹怒助教都是真的，原來我少了一個 push 的步驟，我的遠端功課區沒有更新 master，所以不管我之後切到哪個分支，push 的時候遠端那邊都會發現：唉唷不錯，新的內容喔，拿來讓我看看，交作業的 PR 那邊就會噴一堆 Files Changed，讓助教玩威利在哪裡。

- 超簡易更新課綱步驟：

1. 更新課綱不急，但時機很重要，最好是作業剛改完 pull origin master 下來，還沒開始寫任何作業的時候。
2. git checkout master
3. git status (確認 nothing to commit)
4. git pull https://github.com/Lidemy/mentor-program-4th.git master ( 拉 Huli 最新課綱回本地 )
5. git push origin master ( 推最新課綱進自己的作業遠端 )
6. 完成

## 今日心得：

當初沒仔細看[特殊情形：更新到最新狀態，與我的 master 同步](https://lidemy.com/courses/932146/lectures/17312880)，想說之後要用再來看，結果就出錯了，後來發現好像不少人有同樣問題 XD，有同伴真好 (誤
[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/7/11

## 今日進度：

week5 作業 done
function 額外補充 part1, part2

## 今日心得：

阿...
今天好想發懶
不是好想
是已經耍廢一天了
只寫了一點複習週心得作業
還有看今天 Huli 新發的影片
JavaScript 真的很神奇呢
雖然這樣講但我也只會 JavaScript 而已
function 可以執行一段程式碼
可以當參數傳
還可以幫它加屬性呢 >///< (欸不是 影片沒有講這個

function a() {
  console.log("aaa");
}
a.sayHello = "Hello";
console.log(a.sayHello); // 'Hello'

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/7/12

## 今日進度：

none

## 今日心得：

今天 SIU 息，跟朋友發生了一些事情有感而發。
提供意見給別人真的不是那麼簡單的事，有時候只是分享自己的作法給他人參考，
事後我發現當初的想法可能有些問題，再重新提出來討論，
卻被罵說阿你當初不是很有自信說 ＿＿＿?
聽到之後除了產生對方是個都不自己思考的伸手牌的防衛心態之外，
也讓我反省是不是自己有時候下結論下的太武斷，導致對方深信我一開始提出的方法，
事後發現我換了想法便氣得像罵政府政策急轉彎一樣，
我想從今以後在提出意見或發表想法時，或許得先仔細評估這個想法的可信度有多少，
保留一些討論的空間，畢竟不太可能有完美的解答存在，最好不要把話說死。

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/7/13

## 今日進度：

第六週餐廳頁面-跟著影片動手切

- navbar
- banner

## 今日筆記：

- [background shorthand 寫法](https://www.w3schools.com/cssref/css3_pr_background.asp)

## 今日心得：

[切版補充教學 01 - Navbar 21:50 秒：](https://lidemy.com/courses/932146/lectures/17815075)
Huli：奇怪我又不是設計師，幹嘛一直調這個？
看到這邊笑出來 XD

再跟著 Huli 一起切版的時候確實能感受到課程一開始 Huli 重複強調這部分是他比較不擅長的領域，
切板時碰到蠻多問題的，在影片中直接老老實實地卡關給我們看 XD，我是覺得這樣也蠻不錯的，
畢竟連 Huli 都會卡了我們想必會更加地卡到爆 XD，在影片中還能看到 Huli 解決問題的過程，也是一種學習。

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/7/14

## 今日進度：

第六週餐廳頁面-跟著影片動手切

- 一堆圖片
- footer

## 今日筆記：

- @media 要放在 CSS 最下面，不然有機會被蓋掉導致頁面壞掉。

## 今日心得：

緩慢切版中...
是說 google map 的嵌入意外地超簡單 XDD，iframe 直接嵌進去就完成了，效果看起來又超猛的。
明天來挑戰網友評論區

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/7/15

## 今日進度：

week6 hw1 完成
hw2 電腦版頁面完成

## 今日心得：

原本覺得會花一整個下午來搞定這兩個切版，結果兩個半小時就完成了，還睡了午覺，真棒。
但是睡午覺的時候夢到有人要我切深海火山跟管蟲的版面，因為火山的形狀很特殊，一直搞不定，卡關卡很久，很困擾。

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/7/16

## 今日進度：

- 看 [Alex 宅抬槓 #9 凡人宅家聊 - 別人前端好好賺，我轉前端超混亂！](https://www.youtube.com/watch?v=sqoHFZld6t0)
並且對未來感到不安陷入焦慮
- week 6 - hw2 RWD 版面完成
- week 6 - hw3 第一題想提一下 canvas，這個東西我曾經寫過很爛的仿 Flappy Brid 遊戲 XD，想重新改寫一下再放進來介紹

## 今日心得：

那個 canvas 小遊戲記得是剛接觸 JS 不久時寫的，剛打開程式碼一看整個驚為天人，我到底寫了什麼鬼東西 XDDD。
完全不敢放上來，如果對爛 code 跟 canvas 有興趣的同學，歡迎 slack 我 QQ。

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/7/17

## 今日進度：

- 重寫 canvas 小遊戲

## 今日筆記：

- 操作 git 時不小心斷頭了，還遺失 git log 差點回不去原本的版本，還好找到一個方法叫做 [reflog](https://zlargon.gitbooks.io/git-tutorial/content/patch/reflog.html)，順利 checkout 回去

## 今日心得：

重寫了當初的 canvas 練習 (畫面超簡化版，手機暫無支援)：[傳送門](https://github.com/awuuu0716/notFlappyBird)
自己都玩到惱火的一個糞 GAME XD，即使是原版也很令人憤怒，我到底為什麼選這款當練習 XDD

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/7/18

## 今日進度：

完成 week6 簡答題作業

## 今日筆記：

沒設定 box-sizing: border-box 的盒子：

設定 box-sizing: border-box 的盒子 (中間變成 280 x 180)：

| | 換行 | width | height | padding | border | margin |
| ------------ | ---- | ----- | ------ | ------- | ------ | ------ |
| inline | No | No | No | Yes | Yes | Yes |
| block | Yes | Yes | Yes | Yes | Yes | Yes |
| inline-block | No | Yes | Yes | Yes | Yes | Yes |

## 今日心得：

寫完簡答題去看檢討發現一堆沒有寫完整的地方，忍痛砍掉寫不好的部分重寫一遍，希望有比之前詳細。
挑戰題先擱置，Huli 在作業檢討提到之後還有很多作業會練到切版，先繼續往前邁進了。

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/7/19

## 今日進度：

無

## 今日心得：

休息一天，一直睡一直睡。晚上用四百塊振興券買了一件衣服，新衣服的味道好香，吸吸。

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/7/20

## 今日進度：

[FE102](https://lidemy.com/courses/390588/lectures/6227043) 前端必備：JavaScript

## 今日筆記：

- document.querySelector('CSS 選擇器') : 只會選到第一個找到的元素
- document.querySelectorAll('CSS 選擇器') : 選到所有的元素
- 幫元素添加 class：element.classList.add('className')
- element.classList.toggle('className')：如果 class 不存在就加上去，存在就移除
- innerText vs innerHTML：前者只抓文字，後者可以抓到 HTML 標籤
- element.removeChild()：要找到他的 parent 才能刪除
- document.createElement('TagName')：新增元素
- document.createTextNode('string')：新增純文字
- element.appendChild(element)：在 parent 底下最後面新增一個元素
- css Attribute Selector：[可以選到特定的屬性值](https://www.w3schools.com/css/css_attribute_selectors.asp)
在 [表單事件處理 3:17 秒](https://lidemy.com/courses/390588/lectures/9653617) 有用到這個，第一次看到，筆記起來
- 先捕獲，再冒泡，事件目標則不分。[Huli DOM 的事件傳遞機制：捕獲與冒泡](https://blog.techbridge.cc/2017/07/15/javascript-event-propagation/)
- event delegation：事件代理，將 eventListen 掛在上層元素，再檢查是否有點到目標元素，如果點到目標再執行動作。
如此一來就不用幫底下每個元素加上 eventListener 了

// 在上層元素加上 eventListener
document.querySelector(".outer").addEventListener("click", (e) => {
  // 檢查目標元素的 class 是否包含 btn
  if (e.target.classList.contains("btn")) {
    // 有的話 alert data-value 這個屬性的值
    alert(e.target.getAttribute("data-value"));
  }
});

- localStorage 與 sessionStorage：存在瀏覽器的資料，例如：

// 在 localStorage 存進一筆名為 name 值為 AAA 的資料
window.localStorage.steItem("name", "AAA");

影片看到這邊馬上就想到學習系統的進度報告，打開 devtool 果不其然能找到現在打的進度報告，甚至還有模板也存在裡面，真 U 趣

## 今日心得：

原本傍晚想去剪頭髮，可是衣服襪子都穿好了之後突然猛爆性不想出門症發作，就躺在床上看 Youtube 廢片了。
[很棒的 JavaScript 基礎教學 建議周圍沒有人再收看](https://www.youtube.com/watch?v=eaGY8J7Ne8c)
[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/7/21

## 今日進度：

[FE102](https://lidemy.com/courses/390588/lectures/9653899) 前端必備：JavaScript
寫 week7 作業

## 今日筆記：

- XHLHttpRequest：

// 實例化一個 XMLHttpRequest 物件
const request = new XMLHttpRequest();
// 當收到 response 時執行這個 function
request.addEventListener("load", function () {
  // 如果成功就印出 response.responseText
  if (request.status >= 200 && request.status < 400) {
    console.log(request.responseText);
  } else {
    // 出現錯誤就印出 err
    console.log("err");
  }
});
// HTTP 方法 / 網址 / 非同步
request.open("GET", "api 網址", true);
// 送出 request
request.send();

- 同源政策：僅限於瀏覽器
- JSONP 透過 Script 標籤不受同源政策傳輸資料：

// server.js
sayMyName({
  id: 1,
  name: "ohLongJohnson",
});

// index.js
function sayMyName(person) {
  console.log(person.id, person.name);
}

- 單向資料傳輸：偷偷塞給你一個小圖片讓你去載入例如：<img width='1' height='1' src="123.com">，一旦載入他就知道你已讀了，豪恐怖

- form 裡面不能再用 form ：[說明](https://stackoverflow.com/questions/555928/is-it-valid-to-have-a-html-form-inside-another-html-form)

## 今日心得：

寫完 week7 hw1 了，試著用 function 把重複的動作包起來後程式碼簡潔了許多。

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/7/22

## 今日進度：

week 7 hw2 完成

## 今日筆記：

- element.querySelector('CSS selector') : 從某個元素開始往下找符合標籤的元素

## 今日心得：

在實作 event delegation 時發現 element.closest() 只會往上找，害我很緊張找半天該如何往向下搜尋，
結果暮然回首…就是我們一直在用的 querySelector XD：

// 抓 ul
const questionList = document.querySelector("#questions__list");
// 幫整個 ul 加個 eventListener
questionList.addEventListener("click", (e) => {
  // 抓點擊目標往下找到的第一個 class 為 .answer__hidden 的元素
  const answer = e.target.querySelector(".answer__hidden");
  // 加上一個名為 answer__show 的 class 實現展開功能
  answer.classList.toggle("answer__show");
});

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/7/23

## 今日進度：

week 7, hw3

- 基本介面
- 新增 / 刪除功能

## 今日心得：

沒有設計稿好痛苦 QQ，幾乎每個樣式都要自己想，還好至少有範例可以參考，不然真不知道會生出什麼妖魔鬼怪...

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/7/24

## 今日進度：

week 7 作業 1~4 修改 & 完成

## 今日心得：

呼，總算是完成第 7 週作業了，有種綜合能力測驗的感覺，不但要能夠靈活運用 JS 操作 DOM，還要會用 CSS 控制畫面，然後 CSS 再跟 JS 尬在一起玩，超累人的 QQ。

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/7/25

## 今日進度：

1. 第六週特別補充課程：position 與 display 實戰篇 by minw 助教
2. 第八週（08/03 ~ 08/09）：前端基礎串 API 課程簡介/作業介紹

## 今日筆記：

- .debug \*, .debug {outline:1px solid gold}

- rem: 以根元素作為基礎的單位

- flex-drection 改變方向,一些置中的屬性也得重新調整

- .video:not(:first-child) 不是第一個 .video 的 .video 元素

## 今日心得：

minw 助教的教學影片真的很讚，講解得非常清楚，剪輯也很流暢~
接下來要進入第八週了，想說可以靠看課程影片逃避實戰作業，結果一下就看完了 QQ

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/7/26

## 今日進度：

無

## 今日心得：

休息日，衝動之下買了[死亡擱淺](https://store.steampowered.com/app/1190460/DEATH_STRANDING/?l=tchinese)來玩，初期遭遇 BT 真的超恐怖的，只能屏住呼吸慢慢行，超怕把地圖炸得坑坑洞洞 XD，拿到血液手榴彈後終於能反殺，超爽ㄉ。

明天要繼續跟 week 8 戰鬥惹，加油加油。

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/7/27

## 今日進度：

week 8 hw1 完成

## 今日心得：

完成了 hw1，明天先繼續 hw2，剩下幾天再來優化與加功能

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/7/28

## 今日進度：

week 8 hw2 完成

## 今日心得：

hw2 也完成了，明後天來優化頁面與加油添醋 (X

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/7/29

## 今日進度：

week8 hw2 新增手機板的 menu 開關功能

## 今日心得：

今天做的事很少，一直睡 55555，下次的直播 Q&A 也太多怪問題了 XD，笑死

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/7/30

## 今日進度：

week8 hw2 增加載入更多遊戲的功能 (卡關中)

- 拿不到特定遊戲的資料

## 今日心得：

有包含 & 字元的遊戲就算了，可以跳脫處理，但是 Agrou 是怎樣 XDD，到底哪裡不開心，快崩潰ㄌ

2020/7/30 下午 9:22
沒事，找到問題點解決了

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/7/31

## 今日進度：

week 8 hw2

- 增加捲到底載入更多實況的功能
- 改善 UI 效果

## 今日心得：

今天難得起了個大早，一起床突然對昨天跟 JAS0N HUANG 討論的問題有了靈感 XD，馬上打開來 debug，
我還不太知道怎麼看別人的 code、爬梳別人的邏輯，真的要多練習，感謝同學給我這個機會 XD。
hw2 的網站一天比一天豐富，真有成就感，但感覺還是有進步空間 QQ
可能是我曾經帶著很爛的作品去面試結果被慘電吧，一輩子的陰影阿，我到底有什麼臉拿那個垃圾去面試 orz
（竟然還有公司想面我），從此就算覺得很懶很懶得優化，還是會告誡自己：這東西你敢拿給別人看嗎？
再多進步一點就好，至少做到問心無愧、已經想不到該如何做得更好吧，這樣的程度吧！

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/8/1

## 今日進度：

寫 week8 hw3 簡答題

## 今日心得：

早上起床又發現 hw2 的網頁有 bug XDD，拖延了一整天還是沒解開 (應該是不難，大概有個底，但是拖延)，
決定去剪個頭髮吃午餐，回到家天氣太好冷氣很舒服，就怒睡了一下午，睡起來省思今天的作為，
發現什麼事都沒做非常良心不安，就先寫點簡答題降低罪惡感。
等等出門吃飯再慢慢發散思考 bug 怎麼處理。

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/8/2

## 今日進度：

week 8 作業完成

## 今日心得：

用一張圖表示今天的心得

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/8/3

## 今日進度：

- MTR 04-9 後端基礎 PHP 與 MySQL
- BE101 用 PHP 與 MySQL 學習後端基礎

## 今日筆記：

- PHP 字串相加要用 .
- 宣告變數要用 $name = "aaa", 使用變數也要加 $：echo $name
- fileZilla 安裝時會偷偷安裝 AVG AntiVirus ，很 G8
- phpmyadmin 其實就只是個 PHP 檔，底層是 SQL 指令，莫名的震驚，我一直把它當成某種網路黑科技…
- phpmyadmin 真滴慢 QQ，可能要練習用 MySQL Workbench
- 查詢資料：select \* from `mytable` (查詢 mytable 內的所有資料) 也可以放欄位名稱 多個欄位用逗號隔開 table 的反引號可以不加，如果名稱包含語法保留字就要加
- 呈上，如果輸入 SELECT username as name FROM mytable，就會從 mytable 抓出 username 並且以 name 來命名這個欄位
- 呈上，在最後加入 WHERE 可以條件搜尋，例如 id = 2，就會找出 id 為 2 的資料，如果是字串要用 "" 或是 '' 包起來
- 呈上，如果要多個條件同時符合就用 and 連接，其中一個符合就用 or
- 新增資料： INSERT INTO `mytable` (id, username) values
- 更新資料：UPDATE `mytable` SET username = "abc" WHERE id = 1，把 mytable 內 id 為 1 的 username 更改為 abc
- 呈上，如果要一次更新多筆欄位要用逗號隔開：UPDATE `mytable` SET username = "abc", age = 20 WHERE id = 1
- 刪除資料：DELETE FROM `mytable` WHERE id = 1，刪除 mytable 內 id = 1 的資料
- 為了避免釀成無法挽回的錯誤，可以多用一個欄位標註此資料已刪除，
抓取資料時就用 SELECT \* FROM mytable WHERE is_deleted = 0

## 今日心得：

還好之前已經先架好環境了，記得當初自己蝦七八架環境就搞了[一整天](https://medium.com/@mealiy62307/php-%E7%AC%AC%E4%B8%80%E5%A4%A9-baf6f3f29e5d) XD，現在可以直接開始練習，真開心。
有課程可以看真的差很多，剛接觸 PHP 時自己到網路上東拼西湊，邊看邊罵幹這到底是什麼鬼東西，資料庫到底是三小，為什麼要裝一堆軟體才能跑個 "Hello world"，然後 MySQL Workbench 超級複雜 (那時不知道 phpmyadmin)，崩潰。
現在看 Huli 示範很快就進入狀況了 QQ 都知道現在在幹嘛，感恩 Huli 讚嘆 Huli。

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/8/4

## 今日進度：

- [BE101] 用 PHP 與 MySQL 學習後端基礎

## 今日筆記：

- 在開始寫 PHP 前 chrome devtool - Network - Disable cache 一定要先勾起來，避免靈異現象產生
- $\_GET\[key] 取得 query string 的值
- $\_POST\[key] 取得 POST 方法的值
- empty() 可以檢查某個值是否為空
- [PHP isset()和 empty()的區別](https://newaurora.pixnet.net/blog/post/171735396-php-isset%28%29%E5%92%8Cempty%28%29%E7%9A%84%E5%8D%80%E5%88%A5)
- -> 代表存取物件，類似 JavaScript 的 .
- sprintf("INSERT into users(username) values('%s')", $username)，第一個參數內的 %s 會被第二個參數取代，避免很難看的大量""''..出現，突然好想念 JS 的字串模板
- [sprintf 詳細](https://sites.google.com/site/phplearnmark/php/php-zhi-ling-qing-dan/zi-chuan-han-shi/php-sprintf)
- header("Location: index.php") 在 header 加上 Location 就會跳轉到 index.php
- SELECT \* FROM users ORDER BY id ASC：將撈出來的資料由 id 從小到大排序，DESC 則是從大到小
- $conn -> affected_rows，被影響了幾列
- die()：之後的程式碼都不會執行
- $conn->query('SET NAMES UTF8'); 避免亂碼
$conn->query('SET time_zone = "+8:00"'); 設定時區
- MySQL workbrench 設定 DATETIME 為當前時間：
Default/Expression 欄位填上 CURRENT_TIMESTAMP 即可
- 在迴圈裡輸出 HTML：

<?php
  while($row = $result->fetch_assoc()) {
?>
<div>
<?php echo "Hello world" ?>
</div>
<?php } ?>

- white-space / word-break ，非常常用的屬性

## 今日心得：

明天來實戰留言板

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/8/5

## 今日進度：

- BE101 用 PHP 與 MySQL 學習後端基礎
- week9 hw1 基本版面/資料庫串接/新增讀取留言

## 今日筆記：

- $result->num_rows 取出來有幾筆資料
- $\_COOKIE 可以拿到目前的 cookie
- 呈上，如果 $\_COOKIE[username] 不是空的 (!empty())，代表已登入
- PHP 中的 if statement 可以拿來控制是否輸出某段 HTML：

<?php if(...) { ?>
<div>
...
</div>
<?php } ?>

- 修改 apache 預設目錄：[教學](https://codertw.com/%E4%BC%BA%E6%9C%8D%E5%99%A8/381885/)

## 今日心得：

下午 3 點 20 分：
拖延症超絕發生中，該看的影片都看完了，但是卻遲遲不想動手實作，開始想打掃房間、整理書桌，很久沒碰的手遊突然又重返蜜月期…體力刷完了還是想一直開遊戲 orz
原因大概是進入後端這個比較陌生的領域吧 QQ，突然一下湧進太多新資訊（資料庫、新語言、cookie session）、害怕實作遇到困難（好像也不知道在怕什麼）、現在課程才第八週我還有很多時間 ヽ(✿ ﾟ ▽ ﾟ)ノ。
還有奇怪的念頭冒出來：55555 我不想學 PHP QQ，拜託讓我回到熟悉的 JS 舒適圈（其實也沒多熟悉）
不知道之前的學長姐們在進入後端時的心得是什麼？會不會也有類似心情？
或是有同學也進入第九週時開始渾身不對勁想拖延的，歡迎留言訂閱分享 (X

下午 5 點 15 分：
克服了拖延症，完成了留言版的基本版面、資料庫串接、讀取留言、新增留言，寫個心得休息一下。
把拖延症症狀記錄下來之後似乎好了很多，嘗試踏出第一步後就豁然開朗了，第一步是什麼呢？

git status

沒錯，就是一個無聊的指令 XD，但這指令對進入狀況很有幫助，git status 之後緊接著就是寫作業 SOP，
git checkout master、git pull origin master、git branch -d week8、git checkout -b week9…
這些不用動腦的 SOP 就好像那些拖延雜事一樣，我可以放心地無腦去做，讓身體自動執行任務，
享受拖延快感的同時也完成了一點工作，真是一舉兩得！
緊接著就開個 index.php、開 XAMPP、開 MySQL Workbench…這些也不用動腦
環境弄好就準備開始切版，切板其實也不太需要動腦 XD，在前幾週的切版地獄裡已經差不多練好一個套路了，
首先分成使用者輸入區、顯示留言區…沒惹，然後使用者區需要一個表單、兩個 input、一個 input submit…
顯示留言裡面切成一個頭像 + nickname/date 並排，底下在放 comment…
版面不知道怎麼設計時就打開 Facebook 參 (ㄈㄨ ˋ) 考 (ㄓ ˋ) 一下。

開始切板後拖延症大概就消失惹，就是一一把動作接著做下去而已，
開環境->切版->功能，
知道現在在幹嘛腦袋自然就給出下一步了。

在連線資料庫時碰到了問題，$server_name 要寫 mentor-program.co 才行，
寫 localhost 會出錯，想想也是理所當然的：

  // conn.php
<?php
  $server_name = 'mentor-program.co';
  $username = 'mtr04group2';
  $password = 'Lidemymtr04group2';
  $db_name = 'mtr04group2';

  $conn = new mysqli($server_name, $username, $password, $db_name);
?>

## 本日拖延症對抗心得：

首先要對自己的身心狀況有所覺察，才能及時對症下藥，多問問自己 484 在拖延？
發現正在拖延的話，就從不用動腦的工作開始進行，讓身體誤以為還在拖延，在最輕鬆的狀態下起步，
接著不斷問自己下一步要做什麼，因為從簡單的任務開始，應該能很容易找到下一步，
進行了好幾個下一步後，此時拖延症已經沒那麼嚴重了，大腦與身體也可以應付一些稍微困難的問題，
回過神來你已經完成了今天的工作！可喜可賀！

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/8/6

## 今日進度：

week9 hw1

- 刪除文章/登入/註冊 完成

## 今日心得：

家裡網路好像有問題，整個爆幹慢的，話說網路出問題連 localhost 都會變慢，重整 PHP 頁面都要超久，
不知道有沒有離線開發 PHP 的方法，可是要連資料庫，感覺離線只能切版而已 QQ。

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/8/7

## 今日進度：

week8 hw1

- 改善登入與註冊介面
- 更改刪除文章的機制, 原先用 query string 傳 id, 現在改用 form 表單以 POST 方法傳送 id
- 設置 cookie , 簡單實作一個 session, 現在留言板比較會認人了

閱讀 cookie 與 session 三篇：

1. [白話 Session 與 Cookie：從經營雜貨店開始](https://medium.com/@hulitw/session-and-cookie-15e47ed838bc)
2. [淺談 Session 與 Cookie：一起來讀 RFC](https://blog.huli.tw/2019/08/09/session-and-cookie-part2/)
3. [深入 Session 與 Cookie：Express、PHP 與 Rails 的實作](https://blog.huli.tw/2019/08/09/session-and-cookie-part3/)

## 今日筆記：

有很多種不同型態的 session，而藉由交換 cookie 所建立的 session 有幾個重點：

每個 session 都有開始與結束，
每個 session 都是相對短暫的，
瀏覽器或伺服器任何一方都可以終止這個 session，
Session 蘊含了交換狀態資訊的概念在裡面，

像極了愛情。

## 今日心得

我超討厭像極了愛情這個梗 XD，可是讀到那一段真的忍不住想到像極了愛情。

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/8/8

## 今日進度：

- week9 hw1
改善留言區 UI
- 重新閱讀有點難懂的 session 與 cookie 後兩篇，第三篇好硬 QQ 感覺等級不夠無法吸收

## 今日筆記：

- PHP 在 function 裡使用全域變數要先在 function 裡用 global 開頭宣告：

function aaa () {
  global $conn;
  ...
}

## 今日心得：

今天做的事有點少，時間拿去休息跟打電動了 QQ，晚上用振興券吃燒烤，好滿足。
不知道明天能不能完成 week9 作業…要被進度追上了 QQ
[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/8/9

## 今日進度：

- 偷看第十周 Show time 影片
餐廳官網
活動報名

## 今日筆記：

- margin clollapsing：[說明](https://wcc723.github.io/css/2016/06/08/css-margin-collapsing/)
- 針對不同解析度載入圖片：[說明](https://www.astralweb.com.tw/responsive-solutions-use-html5-picture/)
- cta : call to action (我要報名連結、做些事情之類的)
- aria-role : 可以讓標籤更有語意，方便無障礙瀏覽，例如說用 <a> 來代替 button 時，可以加入 aria-role="button"
- 在 CSS 裡運算：calc(100vh - 62px) 算出 100 vh - 62px 的值

## 今日心得：

看完 show time 真的就像 Huli 講的「前十週學完，你就具備了「可以寫出完整專案」的技能」，
我們學完第十周後應該會有能力寫出一個完整的網站，並且可以上線運作，
感覺大概是通過獵人試驗那樣吧，但是不久後就要被念能力屌打了 XD。

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/8/10

## 今日進度：

- 依舊是 week9 hw1
改善 UI
加入簡單的留言過濾 HTML 標籤
註冊頁面加入重複帳號驗證

## 今日心得：

永無止境的留言板，這禮拜日前不管完成度 QQ，一定要交出去了。

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/8/11

## 今日進度：

- week9 hw1
貼文小選單：刪除 & 編輯功能
過濾有害的暱稱

## 今日心得：

好累喔

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/8/12

## 今日進度：

week9 hw2

- 寫完惹

## 今日筆記：

寫了一篇關於 MySQL 的[筆記](https://hackmd.io/@js8fgfQPQUWFalwMkuQ-Nw/SktbcbWfv)

## 今日心得：

網購了上萬元的小姐在 7-11 結帳超久的，自己有沒有付款過都ㄅ清楚ㄇ。齁 777777

## 今日迷因：

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/8/13

## 今日進度：

- week9 hw1
留言增加 MarkDown 功能，現在可以放一堆多拉 av 夢跟貓貓圖了，還有 youtube
調整 UI

## 今日心得：

功能做出來惹 ~ 好開勳喔

## 今日迷因：

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/8/14

## 今日進度：

week9 hw1 最後修改 & 繳交

## 今日心得：

[Demo](http://mentor-program.co/mtr04group2/Awu/week9/hw1-board/index.php)
week9 留言板，歡迎歡迎

## 今日迷因：

想休息個一兩天，豪累
[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/8/15

## 今日進度：

Siu 息一天。

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/8/16

## 今日進度：

- 無

## 今日心得：

今天也休息，稍微看了一下第十周要什麼事，明天來挑戰[綜合能力測驗](http://mentor-program.co/huli/game/index.php)與[r3:0 異世界網站挑戰](https://r30challenge.herokuapp.com/)
[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/8/17

## 今日進度：

破關 [綜合能力測驗](http://mentor-program.co/huli/game/index.php) 與 [r3:0 異世界網站挑戰](https://r30challenge.herokuapp.com/)

## 今日心得：

兩個小遊戲真滴有趣，可是綜合能力測驗最後直接用迴圈暴力猜數字 XD，沒有解開 hint，感覺該去研究一下。
r3:0 第一關就卡關 XDD，感謝 ruofan 同學的提示 ~ 後來順利找出問題了。
明天來寫第十周心得作業。

## 今日迷因：

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/8/18

## 今日進度：

完成 week 10 心得

## 今日心得：

房間的燈壞惹，太陽下山後陷入一片黑暗，慘。

## 今日迷因：

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/8/19

## 今日進度：

- [BE101](https://lidemy.com/courses/be101-php-mysql/lectures/16776078)
真正的實戰：留言板 - 修正問題篇
真正的實戰：留言板 - 新增功能篇
- [r30 新關卡](https://r30challenge.herokuapp.com/) 破關

## 今日筆記：

- PHP Prepare Statrments

$sql = "select * from users where username=?"; // 把原本的字串拼接改成這樣，參數用 ? 代替
$stmt = $conn -> prepare($sql); // 打開 prepare 功能
$stmt -> bind_param("s", $username); // 一個參數一個 s，兩個參數兩個 s
$result = $stmt -> execute(); // 最後要記得 excute();
$result = $stmt -> get_result(); // 這個才會把結果拿回來

## 今日心得：

明天實戰 11 週作業

## 今日迷因：

DROP TABLE

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/8/20

## 今日進度：

- week11 hw1
使用 prepared statement 代替原本的字串拼接防止 SQL 注入
使用 PHP 內建 session 代替自己產生 token 寫 cookie
增加管理權限功能
修正註冊時有欄位沒填也能註冊的 bug

## 今日筆記：

[幫密碼加密](https://hackmd.io/@js8fgfQPQUWFalwMkuQ-Nw/SymIXp9MP)
[PHP 內建 session](https://hackmd.io/@js8fgfQPQUWFalwMkuQ-Nw/Skgghp5Gw)
[用 prepared statement 防止 SQL 注入](https://hackmd.io/@js8fgfQPQUWFalwMkuQ-Nw/HJRCInoMP)

## 今日迷因：

每次打算熬夜衝進度時

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/8/21

## 今日進度：

- week 11 hw1
增加分頁功能

## 今日心得：

今天過得很怠惰，只有做一個功能，希望明天能把管理後台做出來。

## 今日迷因：

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/8/22

## 今日進度：

- week11 hw1
切了管理頁面

## 今日心得：

睡了一整天，慘。
不過明天可以ㄘ燒烤，真期待。

## 今日迷因：

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/8/23

## 今日進度：

- null

## 今日心得：

感覺已經習慣假日兩天耍廢了，今天吃東港強 A5 和牛，第一次吃和牛老實說還蠻普通的 XDD，
是還蠻軟嫩的但好像也還好，被網路影片騙了 QQ，但反正用振興券免費吃 XD，讚。

## 今日迷因：

印象中最早用過 DOS 系統...這輩子第一次學 command line 是如何開啟遊戲 XD
[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/8/24

## 今日進度：

- week11 hw1
完成管理頁面(調整用戶權限、文章管理)
實作 Double Submit Cookie
修正頁碼顯示錯誤
修正編輯文章 bug

## 今日筆記：

[實作 Double Submit Cookie](https://hackmd.io/@js8fgfQPQUWFalwMkuQ-Nw/r19n2mWQD)

## 今日心得：

今天效率蠻好的，明天應該可以前進部落格。

## 今日迷因：

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/8/25

## 今日進度：

- week11 hw2
資料庫建立
CRUD
管理員功能
XSS / CSRF 防禦

## 今日心得：

hw2 Huli 提供了 html 版面，想說試試看直接套 PHP 上去，結果超級快就完成功能了，這就是有前端分工的感覺嗎 QQ，
好感動。
基本功能完成了，明天再微調跟加功能~

## 今日迷因：

把衣服給我穿回去喔

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/8/26

## 今日進度：

- week11 hw2
增加分頁功能
串接 CKeditor

## 今日心得：

首頁預覽文章時如果有圖片會被容器的 max-height 跟 overflow: hidden 咖掉，但是全部顯示 Read More 按鈕又顯得無用 XD，
除了寫 js 讓容器撐開外，不知道有沒有更簡便的方式讓預覽的時候不要咖掉圖片。明天再來處理惹。

## 今日迷因：

有聲音
[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/8/27

## 今日進度：

- week11 hw3 完成

## 今日心得：

對部落格分類功能完全沒有頭緒 QQ，只好先來寫簡答題。

## 今日 Joke：

有個工程師某日在下班前接到老婆的電話...

老婆說：「下班順便帶一斤包子回家，如果看到賣西瓜的，就買一個。」

晚上工程師回到家，老婆看了就問：「怎麼只買了一個包子？」

工程師：「因為看到賣西瓜的。」

來源：[PTT](https://www.ptt.cc/man/joke/DE63/D4EB/D334/M.1297590153.A.208.html)
[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/8/28

## 今日進度：

- week11 hw2
標籤與文章篩選功能

## 今日心得：

從天亮一直奮戰到天黑終於初步搞定這功能，還沒有測試不知道會不會壞掉 XD，先休息慶祝一下，明天再來重構跟測試 QQ，
只顧著先求能運作，都不管程式碼好看不好看 XD。

## 越來越長的今日迷因：

後臺管理系統 QQ



我也希望睡一覺起來昨天的 BUG 會自動消失 (好像不見得是好事


[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/8/29

## 今日進度：

- week11 hw2
更改整體部落格 UI
修正一些錯誤的超連結
新增帳號密碼錯誤時的訊息
- 看台北實體聚直播

## 今日心得：

今天大部分時間都在改 UI，這東西越改越上癮，停不下來。
話說頁碼一多可能會破版，分類標籤一多似乎也會破版，不過明天想交作業了 QQ，如果來不及修完就算了。

## 今日迷因：





迷因學習法

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/8/30

## 今日進度：

week11 作業繳交

## 今日心得：

終於是交了作業，到最後一刻都還在修漏洞，到底是有多少漏洞。

## 不是今日迷因：

真的 4 北七輸入法內，ㄡ你媽個頭，有完沒完
[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/8/31

## 今日進度：

- FE201
jQuery
Bootstrap
- BE101
留言板 - API 篇

## 今日筆記：

有點懶得做筆記 XDD，放兩個查資料網站就好
[You might not need jQuery](http://youmightnotneedjquery.com/)
[Bootstrap](https://getbootstrap.com/docs/4.5/getting-started/introduction/)
明天實戰 12 週作業ㄅ

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/9/1

## 今日進度：

- week12 實作後端 API
熟悉一下 PHP 該如何將資料打包成 JSON

## 今日心得：

明天應該可以完成 hw1

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/9/2

## 今日進度：

week12 hw1 新增、顯示文章完成

## 今日心得：

JQuery 跟 Bootstrap ，真香。
明天做 hw1 載入更多，然後稍微做一點 hw2

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/9/3

## 今日進度：

- week12 hw1
沒有必要但我很想做的留言點讚小功能
載入更多功能

## 今日心得：

hw1 大致上完成了，js 的部分可能需要重構一下，明天得趕快開始做 hw2 了

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/9/4

## 今日進度：

- week12 hw2
新增/刪除/編輯/標記完成功能 OK
ajax 儲存資料至後端 OK

## 今日心得：

成功存資料進資料庫了，明天再實作識別狀態ㄉ功能。

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/9/5

## 今日進度：

- week12 hw2 完成
新增 todo✅
編輯 todo✅
刪除 todo✅
標記完成/未完成 ✅
清空 todo✅
篩選 todo（全部、未完成、已完成）✅
儲存功能 ✅

## 今日心得：

等等出門看天能囉～

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/9/6

## 今日進度：

week12 作業繳交

## 今日心得：

最後一刻出現未知的 BUG，逃避雖可恥但有用，我選擇逃避。

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/9/7

## 今日進度：

- FE201 SCSS
- 補充系列
Fetch 與 Promise 補充系列（一）：初探 Fetch
Fetch 與 Promise 補充系列（二）：fetch 的 POST 與錯誤處理
Fetch 與 Promise 補充系列（三）：fetch 的使用注意事項
Fetch 與 Promise 補充系列（四）：淺談 Promise
Fetch 與 Promise 補充系列（五）：async 與 await
- week 13 hw1 改寫 SCSS 完成

## 今日迷因：

當我看完 Fetch 與 Promise 的感受：

突然覺得天能也沒那麼難懂嘛

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/9/8

## 今日進度：

- week13 hw3 完成
- JS201
Babel
gulp
Webpack
- 帶著做留言板 plugin：part1

## 今日心得：

自己一個月前的 code 到底在寫三小 XD，改寫的好痛苦

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/9/9

## 今日進度：

- 帶著做留言板 plugin：part2,3,4
- 重構 week12 留言版程式碼，明天 webpack build 起來

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/9/10

## 今日進度：

- 拜讀[webpack 新手教學之淺談模組化與 snowpack](https://blog.huli.tw/2020/01/21/webpack-newbie-tutorial/)
- week13 hw2 build 出來了，明天應該可以完成這個作業

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/9/11

## 今日進度：

- week13 hw2 board-plugin 完成

## 今日心得：

plugin 大致上完成了，明天寫 hw4 && 整理作業 DEMO 與 PR，希望明天可以交作業，讓禮拜天 siu 息一下

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/9/11

## 今日進度：

- week13 hw2 board-plugin 完成

## 今日心得：

plugin 大致上完成了，明天寫 hw4 && 整理作業 DEMO 與 PR，希望明天可以交作業，讓禮拜天 siu 息一下

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/9/12

## 今日進度：

- 交了 week 13 作業

## 今日心得：

上傳 hw2 時遇到神秘的錯誤訊息 "Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0"
找問題點找了半天原來是我忘記上傳 PHP 的 conn 跟 utils XD，有夠 87

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/9/13

## 今日進度：

- 無

## 今日心得：

休息一天，把之前快要棄坑的遊戲全破了，真棒

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/9/14

## 今日進度：

- AWS 環境建置

## 今日心得：

費盡千辛萬苦，終於可以 Hello world，明天來試著更改網域，然後把 PHP 部落格之類的放上去。

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/9/15

## 今日進度：

- week14 部屬 blog 到 AWS

## 今日心得：

費盡千辛萬苦終於把 blog 搬到 AWS 上了，現在只想好好睡一覺

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/9/16

## 今日進度：

- week14 建立網域，連接到 AWS
- 寫了一點 hw3

## 今日心得：

取網域名字好難，最後取了一個很白癡的名字。
話說我把我的網站分享到 line 之後，line 的預覽文字把首頁的文字全抓下來了，
感覺應該有辦法調整預覽畫面跟文字？

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/9/17

## 今日進度：

- week14 hw3 大致上完成
- 看 Huli 示範網站部屬

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/9/18

## 今日進度：

- week 14 hw3 改寫一點東西
- 一邊收聽是在哈囉世界一邊滑手游
- 解剖一個電子書網站，學到了一點關於 base64 圖片的知識，原本想發問的但感覺不太能貼原始碼，這樣人家也看不懂，就算惹

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/9/19

## 今日進度：

- 無

## 今日心得：

siu 息一天

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/9/20

## 今日進度：

- week14 作業完成繳交

## 今日心得：

穩定的推進度中，下禮拜複習周，試試看多寫一點心得好了。

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/9/21

## 今日進度：

- 寫 week15 複習周心得
- 觀摩 minw、ClayGao、yakim 助教的 15 週心得

## 今日心得：

寫說試著多寫一點心得，但想不到要寫什麼就把自我檢討回答一遍看看，結果光是一週就寫了一個下午，
不過換算 LHCR 大概只有 50% 吧 XD，5 個小時有 2 個半小時神秘蒸發掉了，晚上又補了兩個小時，多寫了一點心得，
照著自我檢討走好像還不錯，確實抓到一些自己還不熟的部分，讚讚。

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/9/22

## 今日進度：

- week15 心得(99%)

## 今日心得：

差最後一個 trigger 了，不知道為什麼一直出錯，好像 DECLARE 出問題但又找不到原因，明天再繼續研究

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/9/23

## 今日進度：

- 繳交 week15 複習週心得
- 觀看 JS201
先從變數開始談起
變數的生存範圍：Scope
從 Hoisting 理解底層運作機制
- 閱讀文章
[我知道你懂 hoisting，可是你了解到多深？](https://github.com/aszx87410/blog/issues/34)

- 觀看路人超能 100 S1+S2+OVA 馬拉松[直播](https://youtu.be/4nUYBjE0GsQ)
從小酒窩到花澤被剃頭的部分

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/9/24

## 今日進度：

- JS201
物件導向基礎與 prototype
先學完物件導向，學 this 才有意義
- 觀看路人超能 100 S1+S2+OVA 馬拉松[直播](https://youtu.be/4nUYBjE0GsQ)
路人撿起被撕碎的小說那集 QAQ

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/9/25

## 今日進度：

- 觀看 PHP 的物件導向影片
[程式導師實驗計畫第二期：Week5-2：物件導向程式設計](https://youtu.be/nZhzLcV9eHI)
[Week5 物件導向（續）：繼承與 static](https://www.youtube.com/watch?v=k5TGAw7faNg&ab_channel=Lidemy%E9%8B%B0%E5%AD%B8%E9%99%A2)
- 閱讀文章
[該來理解 JavaScript 的原型鍊了](https://blog.huli.tw/2017/08/27/the-javascripts-prototype-chain/)
[深入探討 JavaScript 中的參數傳遞：call by value 還是 reference？](https://blog.huli.tw/2018/06/23/javascript-call-by-value-or-reference/)
- 寫作業
week16 hw1

## 今日心得：

晚餐ㄘ麥當勞的時候有隻蒼蠅飛到我嘴巴旁邊黏著真的很靠北，還揮不走，直接用手撥掉之後又轉彎停在我肩膀上ㄇㄉ，第一天當蒼蠅阿，為什麼趕不走？學校怎麼教的？

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/9/26

## 今日進度：

- 無

## 今日心得：

休息一天，睡了午覺，夢到跑去健身房練舉重，但我其實超級不想運動的，不知道這夢是在暗示我什麼。

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/9/27

## 今日進度：

- 無

## 今日心得：

休息第二天，明天開工

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/9/28

## 今日進度：

- week16 hw2~4 完成

## 今日心得：

下雨好煩喔

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/9/29

## 今日進度：

- 觀看 BE201
Express 簡介
超重要觀念：Middleware
把留言板變得更完整

## 今日心得：

好像有點倦怠，提不起精神，希望明天能把 BE201 看完

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/9/30

## 今日進度：

- 修正微軟新注音蝦七八選字問題
- BE201
ORM 與 Sequelize

## 今日心得：

做了一直想做的事：修正新注音自動選字問題。刪除了原本的紀錄，重新訓練新注音，才發現其實他還蠻聰明的，最多三次就可以記得常用的詞了，壞處是絕對不能打錯字，不然他好的不學學壞的，這大概就是為人師表的感覺吧。

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/10/1

## 今日進度：

- 沒有進度 QAQ，烤肉日休息一天

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/10/2

## 今日進度：

- 完成 week16 作業
- 複習 this
[arrow function 的 this](https://lidemy.com/courses/390599/lectures/8627054)
[[Javascript] Arrow function 與一般匿名 function 對 this 的行為比較](https://medium.com/%E4%B8%80%E5%80%8B%E5%B0%8F%E5%B0%8F%E5%B7%A5%E7%A8%8B%E5%B8%AB%E7%9A%84%E9%9A%A8%E6%89%8B%E7%AD%86%E8%A8%98/javascript-arrow-function-%E8%88%87%E4%B8%80%E8%88%AC%E5%8C%BF%E5%90%8D-function-%E5%B0%8D-this-%E7%9A%84%E8%A1%8C%E7%82%BA%E6%AF%94%E8%BC%83-dcde0e2611d3)

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/10/3

## 今日進度：

- week17 hw1 寫了一點

## 今日心得：

買ㄌ新的記憶體，8G 已不堪負荷，開個 chrome 就吃好吃滿了。

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/10/4

## 今日進度：

- 陪老媽吃火鍋
- 觀看 [Re：從零開始的異世界生活 第二季](https://ani.gamer.com.tw/animeVideo.php?sn=16344)
4~13 集
- 觀看[SHAAAAAARK Gura 初登場](https://youtu.be/chetyAW4cgw)
- 放鬆

## 今日心得：

最近一直被朋友用 Vtuber 洗版，導致我的 Youtube 一直推薦各種 Vtuber 給我看，導致我最後訂閱了 Gawr Gura，導致我看了一堆 Gawr Gura 玩恐怖遊戲實況，真的不是我願意的，我絕對不會喜歡任何虛擬偶像的！任何！

## 今日迷因：


[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/10/5

## 今日進度：

- week17 hw1 部落格重新裝潢
利用 Sequelize CLI 串接資料庫
顯示所有文章完成

## 今日心得：

node.js 比起 php 抽象許多，express 的基礎架構也還不太熟 QQ，model 跟 controller 有點分不太清楚分別做了什麼，一個好像處理資料，另一個則是拿資料後做其他處理再丟給 view，實戰第一天進度緩慢，希望明天能更上手。

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/10/6

## 今日進度：

- week 17 hw1
新增/編輯/刪除文章完成
後台管理完成
登入登出完成
使用 bcrypt

## 今日心得：

喔喔喔好像比較上手了喔，讚讚讚

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/10/7

## 今日進度：

- week17 hw1
錯誤訊息處理
分類功能完成
- week17 hw3
MVC、ORM

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/10/8

## 今日進度：

- week17 hw1
在數個請求中增加權限檢查
完成 commit 修正 ESLint 錯誤

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/10/9

## 今日進度：

- week17 hw2
完成：抽獎功能、登入登出、後台管理、新增獎項、編輯獎項
未完成：UI 美化、圖片上傳、部屬

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/10/10

## 今日進度：

- week 17
調整 hw2 UI、新增圖片瀏覽
部屬 blog 到 Heroku

## 今日心得：

部屬夭壽卡的，誤打誤撞蝦七八弄還是成功了，謝天謝地，明天希望也能順利把抽獎網頁給弄上去

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/10/11

## 今日進度：

- 完成 hw2 部署、hw 3、繳交 week17 作業
- 寫了 [Heroku 部署筆記](https://hackmd.io/@js8fgfQPQUWFalwMkuQ-Nw/Bk-zpDlvP)

## 今日心得：

交了 17 週作業，繼續前進囉 GOGOGO

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/10/12

## 今日進度：

- week18 作業
搬遷餐廳首頁、抽獎、Q&A
使用 SCSS 改寫
稍微看一下 PD101

## 今日心得：

搬遷餐廳官網目前沒遇到什麼問題，不過發現自己之前寫的 CSS 有夠爛 XDD，過兩天再來重構一下，明天先來做餐廳後台

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/10/13

## 今日進度：

- week18
餐廳管理員系統
餐廳後台(施工中)
點餐頁面(施工中)

## 今日心得

CSS 依舊調皮難搞

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/10/14

## 今日進度：

- week18
點餐頁面切版
檢討 week17 作業

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/10/15

## 今日進度：

- week18
點餐頁面切板完成
建立餐廳網站的資料庫

## 今日心得：

CSS 好難 QQ

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/10/16

## 今日進度：

- week 18
管理頁面切版 && modal 功能用力趕工中

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/10/17

## 今日進度：

- week18
後臺管理菜單完成 (新增/刪除/更新)
管理抽獎、常見問答超絕趕工中

## 今日筆記：

- sequlize 筆記
destroy()
destroy()
destroy()
很重要所以寫三次，我寫成 destory() 然後找錯誤找半天 QQ

## 今日心得：

大概是來ㄅ及在禮拜天結束前交作業了，要落後囉

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/10/18

## 今日進度：

- week18
餐廳問答前台/後台完成
餐廳菜單前台/後台完成
餐廳抽獎後台完成，前台仍在努力中

## 今日心得：

是我不夠熟練嗎 QQ，總覺得這作業搞超久的，寫了很多重複的東西，感覺是差不多的功能卻寫兩遍給不同頁面使用，
好處應該是比較不會互相影響拉，不會改這邊壞另一邊，但缺點就是看起來很重複很冗長，應該有辦法重構得漂亮一點，只是需要點時間

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/10/19

## 今日進度：

- week18
餐廳網站完成布署
然後發現還有簡答題沒寫，有一種考完試才知道考卷還有背面的感覺，明天再來寫ㄌ

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/10/20

## 今日進度：

- week18 作業繳交
- week19
觀看 PD101

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/10/21

## 今日進度：

- week19
構思 final project
看 MTR 04 - week 20 Show time

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/10/22

## 今日進度：

- week ??
構思 final project
- 觀看 FE301 React 基礎
先別急著學 React
React 環境建置
React 基礎

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/10/23

## 今日進度：

- week ??
觀看 FE301 React 基礎
React 的生命週期
觀摩同學們的作業，看別人的程式碼總是受益良多！

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/10/24

## 今日進度：

休息一天

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/10/25

## 今日進度：

- week ??
研究命名規範：
[常見重點整理](https://github.com/Lidemy/mentor-program-4th/blob/master/examples/common.md)
[資料庫表字段的命名規則](https://www.itread01.com/p/1397452.html)
[前端開發規範：命名規範、html 規範、css 規範、js 規範](https://www.itread01.com/content/1548431105.html)
延伸閱讀：
[如何寫出好的 Alt 圖片替代文字](https://seo.whoops.com.tw/what-is-alt/)

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/10/26

## 今日進度：

- week ??
觀看影片 React 實戰：Form 報名表單 && 練習 react
閱讀 [React 性能優化大挑戰：一次理解 Immutable data 跟 shouldComponentUpdate](https://github.com/aszx87410/blog/issues/26)
「如果你的 state 或 props 『永遠都會變』，那 PureComponent 並不會比較快」
- week20
優化新拖延運動黑客松 Day1

1. 刪除 HTML 中多餘文字：出師表、長恨歌、作業介紹
2. 刪除不必要的 script 與 CSS 引用：angular、vue、material-components-web、sweetalert、material-icons
3. 使用 CDN 引入資源取代靜態檔案：bootstrap css、jQuery
4. 使用 gulp 管理壓縮 JS、CSS、圖片

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/10/27

## 今日進度：

- week 20 優化新拖延運動黑客松 Day2
使用 webp 圖片格式
使用 defer 模式載入外部 script
刪除純粹用來嚇人的 JavaScript 程式碼
壓縮 HTML
字型載入似乎是效能瓶頸，但還找不到方法改善

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/10/28

## 今日進度：

- 無，身體不舒服休息了一天

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/10/29

## 今日進度：

- week20
week 20 優化新拖延運動黑客松 Day3
使用 preload 載入 slick.woff 檔
改善圖片大小
PageSpeed 分數忽高忽低的 XD，不知道為什麼，可惡好想要 100 分 QQ

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/10/30

## 今日進度：

- week 20 優化新拖延運動黑客松 Day4
優化拖延運動的我同時也在拖延優化運動是不是搞錯了什麼
把一些 mobile 版的圖片變小
規劃 Final Project

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/10/31

## 今日進度：

- week 20
複習 week16
寫複習週心得

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/11/1

## 今日進度：

- week 20
複習 week16
寫 week20 心得

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/11/2

## 今日進度：

- week 20 週複習心得完成，明天來完成網站優化心得

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/11/3

## 今日進度：

- week 20 作業完成&&繳交

## 今日心得：

終於是寫完了最後的複習週作業，剩下一個月了！！！加油！！！

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/11/4

## 今日進度：

- week 21
FE302 React 基礎 - hooks 版本
React 基礎

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/11/5

## 今日進度：

- week 21
React 基礎
中場休息時間
再戰 todo list 與其他 hooks

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/11/6

## 今日進度：

- week 21
再戰 todo list 與其他 hooks
React 中的性能優化
hw 1

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/11/7

## 今日進度：

- week21 hw1
新增 todo ✅
刪除 todo✅
標記完成/未完成 ✅
清空 todo✅
篩選 todo（全部、未完成、已完成）✅
使用 form 元素與 onSubmit 屬性代替 onClick 送出 todo (方便使用 Enter 鍵送出)✅
使用 style-component 加上簡單的 css style (調整中)?

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/11/8

## 今日進度：

- week21
FE 301 React 中的性能優化
Function component vs Class component
prop drilling 與 context
部署 React App

## 今日筆記：

propTypes 可以設定各個 prop 要傳的資料型態或是否一定要傳(required)，如果傳入的參數不正確就會跳出錯誤，也能方便其他人查看這個元件傳了那些參數下去 [官方文件](https://zh-hant.reactjs.org/docs/typechecking-with-proptypes.html)
re-export : 讓資料夾與檔案結構更乾淨

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/11/9

## 今日進度：

- week 21 && 22
week21 hw1 修改介面樣式
React 實戰篇 - 部落格
[淺談新手在學習 SPA 時的常見問題：以 Router 為例](https://blog.huli.tw/2019/09/18/spa-common-problem-about-router/)

## 今日筆記：

- 「SPA 從來都不是指說「網址列不能變」，而是不能去載入其他頁面，這點一定要搞清楚。」
- 解決重新整理找不到檔案問題 --> 讓路徑導到 index.html

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/11/10

## 今日進度：

- week21
hw2 規劃版面元件中，還在思考怎麼放棋盤

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/11/11

## 今日進度：

- week21 hw2
身為一個使用者，我希望黑棋白棋可以輪流在棋盤下棋 ✅
身為一個使用者，我希望遊戲可以分出勝負 ✅
身為一個使用者，我希望知道現在輪到黑棋還是白棋 ✅
身為一個使用者，我希望黑棋可以先下 ✅

## 今日心得：

基本的功能大致上完成惹，明天再把完整度提高一點

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/11/12

## 今日進度：

- week21 hw2
身為一個使用者，我希望有個重新開始遊戲的按鈕 ✅
身為一個使用者，我希望可以回到過去試著讓故事繼續 ✅

## 今日心得：

做遊戲豪好玩喔 QAQ，明天繼續挑戰挑戰題

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/11/13

## 今日進度：

- week 21 hw2
身為一個使用者，我希望有一個紀錄棋譜的功能，在下完棋之後可以把對局分享給朋友，朋友就能看到這一局棋的棋譜 ✅
身為一個沒朋友的使用者，我希望有電腦陪我下棋 (施工延期中)

## 今日心得：

五子棋 AI 可能會卡好幾天 QQ，先暫時跳過先做 hw3 表單好了，明天開工 hw3

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/11/14

## 今日進度：

- week21-hw2
修正一個判斷勝負的邏輯漏洞

- week21-hw3
UI 元件切完
將 input value 綁入 state

有點睡眠不足，明天再來完工 week21 作業 QQ

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/11/15

## 今日進度：

- week21 作業完成 && 繳交

## 今日心得：

明天來做 week22 作業!

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/11/16

## 今日進度：

- week 22 hw1
React 實戰篇 - 部落格
跟著 Huli 動手做

## 今日心得：

以往都是看完影片再開始做，這次試試看跟著 Huli 的影片來做這個作業，感覺還蠻不一樣的，但是還蠻花時間的 QQ，自己寫過一遍又再看影片發現跟自己寫的完全不一樣 XD，只好乖乖修正成 Huli 的形狀(?

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/11/17

## 今日進度：

- week22 hw1
登入頁面：輸入帳號密碼後可以登入 ✅
註冊頁面：可以開放使用者註冊 ✅
About 頁面：隨意顯示一些關於這個部落格的話 ✅
文章列表頁面：可以看到所有文章，一頁只會顯示 5 筆，需要支援分頁功能，可以換頁 ✅
單篇文章頁面：點進去文章以後可以看到文章完整內容 ✅
發表文章頁面：可以輸入標題跟內文發文 ✅
- week22 hw2
卡在 [從實際案例看 class 與 function component 的差異](https://blog.techbridge.cc/2020/06/13/class-function-component-and-useeffect/) 中，天阿好困難 QQ

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/11/18

## 今日進度：

- week22 交作業
- week23 初戰 Redux
在認識 Redux 之前
Redux 簡介
開了 npx create-react-app my-app --template redux 稍微摸了一下這ㄍ新玩具

## 今日心得：

加入了期末報告小組！

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/11/19

## 今日進度：

- week23
嘗試攻略 Redux todo-list 中...
新增 Todo ✅
刪除 Todo ✅
清空 Todo ✅
過濾 Todo ✅

## 今日心得：

好像完成了？

## 今日迷因：

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/11/20

## 今日進度：

- week23
hw1 完成
hw2 施工中

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/11/21

## 今日進度：

- week 23 作業繳交
- 研究 final project 金流串接
[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/11/22

## 今日進度：

- Final project
研究綠界金流

## 今日心得：

金流串接有點小麻煩，在本機似乎沒辦法正常測試，可能要開個 Heroku 伺服器來測試了。

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/11/23

## 今日進度：

- week24 hw1
將 blog 原有功能用 Redux 改寫
MTR04 - SSR 簡介、Next.js、TypeScript

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/11/24

## 今日進度：

- final propject
研究綠界金流串接
撰寫串接心得
部屬簡單的購買測試網頁

## 今日心得：

突破之前的問題後就海闊天空了，測試網頁一上線就沒問題有點怕怕的，太順利了，感覺有詐。
好久沒打心得，今天老哥從中國出差回來，問我需不需要生活費，我說有點缺，他二話不說馬上匯了一筆錢給我。
我跟他的人生似乎是截然不同的風景，不過話說回來應該沒有誰的人生是差不多的吧？
總之，他一路念到大學畢業、當完兵、找了份工作，工作後將近八年順利百萬年薪。
我則是大學重考、大二轉系、大四延畢、工作後一年也不管存款多少就辭掉準備轉職去寫程式，要是我生在傳統家庭應該早就被家人 K 到頭破血流了，花那麼多錢給你念書結果跑去學人家寫什麼程式？
我在大四時寫過一篇[人物報導](https://chhuttaichi.weebly.com/part-1/9021464)，是課堂練習寫人物報導的作業，雖然是寫別人，但我卻一直想到我自己，我覺得我跟他很像，很少考慮自己的未來，等到要做抉擇的時候發現幹不對等等這不是我想要的，拜託讓我重來，從零開始的 XX 生活，這段人生我打的超爛幹 55555。

不過我現在還沒有後悔跑來學程式拉，我寫得 hen 開勳，對於看不懂的技術會感到很興奮，還沒有覺得幹好煩不想學，我學這要幹嘛？頂多會有未知的恐懼而已，害怕的時候就想想助教在 podcast 說的話：恐懼的背後什麼都沒有。唯一的壓力就在下個月的面試結果了，要是這一年多來的努力沒有收穫，不知道我頂不頂得住這打擊。

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/11/25

## 今日進度：

- week24 hw1
改寫登入頁面
改寫新增文章頁面
- final project
每週小組會議

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/11/26

## 今日進度：

- week24
hw1 完成，稍微再做些測試後應該就 OK 了
hw2 閱讀 Redux Middleware && SSR 相關資料

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/11/27

## 今日進度：

- week 24 作業繳交

## 今日心得：

課程上完惹，呀呼~

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/11/28

## 今日進度：

休息一天 zzzzz

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/11/29

## 今日進度：

- 最後ㄉ休息日，打打巫師三
- final project
做了 Logo

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/11/30

## 今日進度：

- INT 101 最後的波紋
- final project
建立起基本 react app、redux、router 檔案架構
Header 元件
首頁 Carousel 功能 (施工中)

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/12/1

## 今日進度：

- final project
產品促銷區
Footer

## 今日心得：

有些地方比想像中難切 QQ，在選擇適當方法時花了不少時間。

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/12/2

## 今日進度：

- final propject
每週會議
首頁 footer、nav hover 效果完成

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/12/3

## 今日進度：

- 履歷寫寫寫

## 今日心得：

決定好第一版的履歷該交出什麼東西了，但要回頭去大升級之前的作業，擬定好之後突然發現要做的事情一大堆，然後就不知從何下手了 XD，總之先完成這週的 final project 進度好了，履歷計畫預計下週末前完成，下下週給他投爆。

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/12/4

## 今日進度：

- final project
商品頁面完成

- 履歷
規劃作品 1 頁面、功能，希望明天可以完成它

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/12/5

## 今日進度：

- 履歷作品 1
光是首頁 + RWD 就搞了半天，可能還要兩三天這個東西才能完成 orz

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/12/6

## 今日進度：

- 提不起勁的一天，看了一大堆工作機會，好想直接投阿阿阿，但是自己的作品還沒準備好 QQ，雖然 Huli 是說求職永遠不會有準備好的一天，可是沒有達到自己覺得的最低標準感覺很不心安。打算死線設在下禮拜結束吧，過了死線就得開始投了，晚上來整理一下公司名單，把想去跟沒那麼想去的公司排一排~

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/12/7

## 今日進度：

- 履歷作品 1
後台施工中，規劃資料庫與後台介面

## 今日心得：

昨天不應該在睡前突發奇想複習進擊的巨人的 QQ，一不小心就把一整季看完了，歐買尬

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/12/8

## 今日進度：

- Final Project：
產品頁面切換瀏覽圖
Modal - 加入成功訊息，結帳、返回

- 履歷作品 1：
菜單頁面 && RWD

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/12/9

## 今日進度：

- final project
每週會議
修改 UI
繼續切版：會員頁面、登入頁面
- 履歷作品 1
登入頁面

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/12/11

## 今日進度：

- 履歷作品 1
後台上傳商品圖片功能
後台商品 CRUD

TODO：
會員註冊/登入/登出
前台菜單 API 串接
前台訂位 API 串接
後台訂單版面、API 串接
後端部屬 Heroku
前端部屬 Github page

## 今日心得：

昨天被地震震完之後跑去看漫畫壓壓驚(臨死之前也要把漫畫看完)就忘記 PO 進度報告惹，最近開著螢幕共享寫程式感覺效果還不錯，今天成功早起做事了！但是作品進度推進的頗慢 QQ，禮拜五六可能要多花一點時間了，希望能在禮拜日完成履歷。

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/12/12

## 今日進度：

- 履歷作品
永無止境的完整度，想要做訂位系統就必須有會員，有會員就必須要做註冊，註冊要驗證輸入，後端要做 JWT，為了防止壞份子亂註冊訂位，就要串個寄信認證帳號，然後有會員的話是不是需要更基本改資料頁面？是不是要能夠查詢自己的訂位？

原本只是想做個簡單的餐廳網站，結果越搞越複雜 QQ，解決一個功能又冒出更多需要做的功能，天啊到底明天做不做的完，今晚要爆肝趕工了 QQ。

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/12/13

## 今日進度：

- 履歷作品
總算是幾乎完成了，等等花一小時測試所有功能，然後把網站部署上去，今天就能安心地入睡了

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/12/14

## 今日進度：

- 履歷作品超絕進度延宕
總算是部署了網站，但沒想到又遇到各種新問題， webp 格式在手機上的瀏覽器(safari/chrome)沒有支援，又重新改成 jpg 或 png，然後架在 Heruko 上的後端 API 似乎會因為伺服器閒置而沒反應，導致菜單會載半天沒東西，不知道能不能調整，RWD 也怪怪的，手機版面很慘。README 也還沒寫好歐買尬超多事要做，好想放假打整天電動喔 QAQ。

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/12/16

## 今日進度：

- final project
會員專區切版(會員資料、訂單查詢)
登入與註冊頁面切版
小組週會

- 履歷與求職
完成 cakeresume 與 104 履歷
作品 README、Bug 修正
第一波履歷攻擊

## 今日心得：

履歷準備得差不多了，先投個幾十間試試水溫，明天開始複習面試常考題，然後做 final project 進度。

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/12/17

## 今日進度：

焦慮超絕爆炸中
昨天晚上投了約 30 家公司，今天一早被面試邀約電話叫醒，心想靠邀喔也太快，我根本來不及準備 QQQ，下午緊急練了幾小時問答，把常見的問題試著回答了一次，但覺得超緊張快吐了。目前收到 3 間面試，明天一場，下禮拜一、二各一場，另外有間公司需要我回答一些考題才考慮要不要給面試，題目有基本的技術題（其中兩題裡面的技術沒聽過）以及一題串接 API 實作，20 號前要回覆，壓力山大，拜託一切順利 QQ。

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/12/18

## 今日進度：

- 面試
[心得](https://spectrum.chat/lidemy/interview/~f9098065-7ad1-4bc6-823b-1a23aa7f8b87)

- final project
theme state 改用 redux 管理

## 今日心得：

算是輕鬆的面試，技術問題都是作品內使用的東西，蠻好回答的，下週再面兩間比較看看，奢望最後能有多個 offer 自由挑選 QQ，但很怕公司催促我做決定，那就先發制人催促下禮拜的公司能夠早點回覆吧 XDD

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)

# 2020/12/19

## 今日進度：

- 實體聚會
原本因為很怕生怕尷尬所以不敢參加實體聚會，要不是有期末專案的組員在我想我沒辦法出現在今天這個超有趣的聚會 QQ

說到這裡，真的很慶幸加入你們的團隊，在跟 huiming 報名專案小組的前幾天其實我陷入了非常深的低潮，課程進度也開始不如自己預期，看著課程即將結束，感覺自己還是無法做出個什麼值得拿出來的作品，也不確定自己有沒有好好把課程學的扎實，但看到你們寫的規格書、mockup、資料庫規劃，當時真的蠻震撼的，因為我真的寫不出來，也無法想像自己的產品該長什麼樣子（19 週作業抱歉了 QQ，我真的交不出來）。第二次衝擊大概是某週的小組會議中，你們說到關於蛋炒飯的事情 XD，我們努力了半天做的作品其實對於資深的工程師來說搞不好就像平凡的蛋炒飯一樣，這句話影響了我蠻深的吧，我原本覺得一定要拿出屌到爆的作品才能找的到工作，因為我不是本科生、在履歷上也沒有特別的亮點，只能靠作品加分。但後來我就想說，既然我只會蛋炒飯，那我就做好我的蛋炒飯，把我會的東西做好就好，沒有必要要求到非常完美，我就蛋。因此我開始準備履歷第一版的作品－非常基本的餐廳官網，只有看菜單與訂位功能，加上會員與後台管理就好，沒有購物車沒有金流，做完之後莫名其妙就開始面試了，雖然還不知道最後結果如何，不過我已經很滿意能夠拿到幾個面試機會了 QQ，剩下的靠運氣跟天意了吧，反正這波不行就等 final project 完成再試一波，我們的專案比我的拉基官網更完整更複雜，絕對有籌碼讓我們談到更好的工作~

最後講一下新年願望ㄅ（No falsy wishes）：

希望我的兩位組員－huiming、阿里蓉蓉，你們真的很強，一定能找到理想的工作
希望導師課程的同學也都能順利完成課程，找到滿意的工作
希望 Huli、助教們未來工作也都順利（詞...詞窮），Huli 也能繼續培養下一代的優秀學員們 XD

好像都在講工作 XD，工作狂逆？

[](https://lidemy.slack.com/app_redirect?channel=U014Z0E5M1R)