# Week12（06/28 ~ 07/04）：前後端整合

## Jun.28
預計開始上課時間 = 08:00
實際開始上課時間 = 09:00

#### 關鍵結果
1. 主線 : [ \[FE201\] 前端中階：那些前端會用到的工具們](https://hackmd.io/CHaHgdZQR6WhQwNM__ZWBw?view) : 20%
2. 支線 : 複習 php
3. 支線 : 補眠了一下XDD

#### 心得感受
- 今天學了 jQuery 也都跟著實作完成
- 複習了一下 php 的鐵人文章 : https://ithelp.ithome.com.tw/users/20107394/ironman/1332

#### 今日覆盤
- 了解了 jQuery 以前稱霸前端的背景，到目前依然有不少支持者
- 要不要用又是可以戰的問題 : 純JS vs jQuery

#### 決定行動
- 主線 : [ \[FE201\] 前端中階：那些前端會用到的工具們](https://hackmd.io/CHaHgdZQR6WhQwNM__ZWBw?view) : 看完本周進度

> 附圖為 : 強迫症縮排XDD

今日上課時數 = 0006:00
累積上課時數 = 0562:00

###### 報告人 : 士育 (benben)

---

## Jun.29
預計開始上課時間 = 08:00
實際開始上課時間 = 09:30

#### 關鍵結果
1. 主線 : [ \[FE201\] 前端中階：那些前端會用到的工具們](https://hackmd.io/CHaHgdZQR6WhQwNM__ZWBw?view) : 看完本周進度
2. 主線 : 參加 week11 直播

#### 心得感受
- 早上在 gather.town 營幕共享室耍廢一下 ( 開營幕共享打 lol )，看大家都好認真帶頭耍廢 XDD
- 看完了 Bootstrap ，發現 [You don't need Bootstrap](https://davidhartsough.com/you-dont-need-bootstrap/) ( 這系列好煩XDD )，也順便看完了

#### 今日覆盤
- 關於 You don't need Bootstrap
- 大小 : Bootstrap v4 minified is 160 KB of CSS + 60 KB of JS + 71 KB of jQuery + 21 KB of Popper.js ( 約 312 KB )
- 自幹 200 行 css ( 約 5 kb )
- 大多的 css 是有能力寫的出來的，共免之
- 那還要學 Bootstrap 嗎？要啊，共免之 ( 例如快速開發的時候，~~可能還沒有感覺，但我覺得之後找工作，應該會常常需要快速開發的技能XD~~ )

#### 決定行動
- 主線 : week12 作業

[](http://www.youtube.com/watch?v=f8rhLMymVrA)
> 附圖為 : HowFun / 與瘦子E.SO的雙聲道之間
> 超好笑XDD

今日上課時數 = 0008:00
累積上課時數 = 0570:00

###### 報告人 : 士育 (benben)

---

## Jun.30
預計開始上課時間 = 08:00
實際開始上課時間 = 10:00

#### 關鍵結果
1. 主線 : hw1 80%
2. 支線 : JS 30 讀書會 [JavsScript 30 Day1](https://hackmd.io/YeMmUjUmSl-Yqf6dN9XhGA?view)

#### 心得感受
- 練習試著講看看 [JavsScript 30 Day1](https://hackmd.io/YeMmUjUmSl-Yqf6dN9XhGA?view)，主要在講 JavaScript 的部分，不過 html & css 也可以學到不少東西
- 把結構想清楚，真的會清楚很多，尤其是 HTML, CSS, JavaScript 的結構，因為框架、套件用的再多，還是要回到這三個東西

#### 今日覆盤
- 關於 CSS background shorthand
- 一個簡單的背景 CSS 如下

  background: url('https://i.imgur.com/3yp2agW.png') center center;
  background-size: cover;

- background shorthand

  background: #ffffff url("URL") no-repeat right top;
  
  /* 參照以下順序
  background-color
  background-image
  background-repeat
  background-position */

- 其實這是第二次分享，但你 484 又忘記了，我 4 ，我道歉QQ

#### 決定行動
- 主線 : week12 作業

> 附圖為 : JS30 Day01 - JavaScript Drum kit
> 我在打基本節奏，好組團喔wwww
> demo : https://codepen.io/benben6515/full/XWKrmzg
> 試試看👉 : sd, s, sj, s, sd, s, sj, s ( sd 表示一起按 )，以上重覆

今日上課時數 = 0008:00
累積上課時數 = 0578:00

###### 報告人 : 士育 (benben)

---

## Jul.01
預計開始上課時間 = 08:00
實際開始上課時間 = 08:30

#### 關鍵結果
1. 主線 : 完成 week12 hw1
2. 主線 : week12 hw2 到前端完成

#### 心得感受
- 今天都在寫作業，寫到晚上有點累了，看來是該休息一下QQ
- 哇，時間好快喔，己經 7 月了啊

#### 今日覆盤
- 關於 input 勾選的 CSS

  input[type="checkbox"]:checked+label {
	text-decoration: line-through;
	color: #888;
  }

- 這樣就可以在 label 裡面加上 CSS 了
- 但要注意 input & label 要是兄弟元素，才可以使用 `+`

#### 決定行動
- 主線 : 完成 week12
- 支線 : 練習個什麼好了

> 附圖為 : JS30 Day02 - JavaScript 極簡時鐘

今日上課時數 = 0008:00
累積上課時數 = 0586:00

###### 報告人 : 士育 (benben)

---

## Jul.02
預計開始上課時間 = 08:00
實際開始上課時間 = 09:05

#### 關鍵結果
1. 主線 : 完成 week12 作業
2. 支線 : JS30 Day03 - Playing with CSS Variables and JS
3. 支線 : 練習無蝦米

#### 心得感受
- 依然在寫作業中度過，遇到了後端又拖延了一下wwww
- 本來想自己寫，但還是卡到不行，抱歉了 php

#### 今日覆盤
- 在 Todo 編輯的功能想很久，試了很久，總算是想出來了
1. 要先取得原本的的值
2. 放入更新的 input 當作預設值
3. 最後在更新回去 DOM 上面

#### 決定行動
1. 支線 : 練習 P5.js
2. 支線 : 練習英文口說

> 附圖為 : [JS30 Day03 - Playing with CSS Variables and JS](https://codepen.io/benben6515/full/jOrOPGv)

今日上課時數 = 0009:00
累積上課時數 = 0595:00

###### 報告人 : 士育 (benben)

---

## Jul.03
預計開始上課時間 = 08:00
實際開始上課時間 = 09:06

#### 關鍵結果
1. 主線 : 回去補了 [程式導師實驗計畫第二期：Week6-2：資訊安全](https://www.youtube.com/watch?v=HGjjxKsCgr0&ab_channel=Lidemy%E9%8B%B0%E5%AD%B8%E9%99%A2)
2. 支線 : JS30 Day04 - Array Cardio Day1

#### 心得感受
- 今天是微休息的一天
- 今天晚上依然也是在 JS30 讀書會，明日休息 ( 周日嘛 )

#### 今日覆盤
- 跟著 JS30 複習了 array 的各種用法，蠻常搞混的，可以參考 [@安潔的記筆](https://hackmd.io/Z9rZgNC6RhKm0zubfHDiPg?view)
- filter()
- map()
- sort()
- reduce()

[](https://www.youtube.com/watch?v=7LqCetoIld0)
> 附圖為 : 【大嘻哈時代】EP3完整版 Cypher饒舌接力 (上)

#### 決定行動
- 主線 : 訂正 week 11 作業 跟 week 12 的作業 ( 也改太快XD )
- 支線 : P5.js

今日上課時數 = 0003:00
累積上課時數 = 0598:00

###### 報告人 : 士育 (benben)

---

## Jul.04

今天是開心周日，早上參加讀書會，終於練習了 P5.js 超久沒碰了QQ

感覺時間過好快喔，這個 MTR05 計劃不知不覺就過完一半了，真是有「一種時間一天一天的過，程式碼一天一天的跑」的感覺，忘記在哪裡聽 huli 講過了XDD

這禮拜把上禮拜所有的 [Lidemy - 5th 實體聚會分享](https://www.notion.so/Lidemy-5th-6677904580e84b4bbe43617be82d6627) 都聽完，大家都分享的超棒，不管是心態、求職、學習、Final Project 都有包函，也順便在留言區留下了時間軸的部分 ( 除了 @Xiang 的分享自帶時間軸，讚讚 ) ，可以去聽 @roufan 笑話精華的部分 ( 注意音量 wwww

---

#### 本周覆盤
- 指定教材
- [x] [BE101] 裡面「真正的實戰：留言板 - API 篇」
- [x] [FE201] 前端中階：那些前端會用到的工具們
- [x] 補充教學影片（在 MTR05 裡面）
- 作業
- [x] HW12 作業
- 自我檢測
- [x] P1 你知道什麼是 SPA
- [x] P1 你知道怎麼樣用 PHP 自己寫出 API
- [x] P1 你知道如何在前端與自己開的 API 串接
- [x] P1 你知道在 server 與在 client render 的差別
- [x] P1 你知道 jQuery 是做什麼的
- [x] P1 你知道 jQuery 與 vanilla js 的差別
- [x] P1 你知道什麼是 Bootstrap
- [x] P2 你知道 Bootstrap 原理及如何應用

---

下午把之前 week11 跟 week12 作業都看過了，看起來是沒什麼大問題
- week11 是粗心，漏了幾個可以 XSS 地方XD
- week12 就比較沒什麼大問題，但還是有不少可以優化的地方
- 以下的邏輯，助教有建議可以用 `switch` ，但不知道如何優化XD
- 不知道大家有什麼看法，20 點求解 QQ，有看到一位同學用 `data-` 的方式，好像也不錯
- 也附上 [我原本的 PR](https://github.com/Lidemy/mentor-program-5th-benben6515/pull/19)

// ...
if ($(target).hasClass('btn-all')) {
    $('.card').show()
} else if ($(target).hasClass('btn-undo')) {
    $('.card').show()
    $('.checked').hide()
} else if ($(target).hasClass('btn-done')) {
    $('.card').hide()
    $('.checked').show()
} else if ($(target).hasClass('btn-remove')) {
    $('.checked').each( (i, e) => {
        todoCount--
        e.remove()
    })
// ...

其實也有想過用 `switch` 寫，但寫起來如下，這樣好像又怪怪的 QQ

// ...
let num = 0
if ($(target).hasClass('btn-all')) {
  num = 1
} else if ($(target).hasClass('btn-undo')) {
  num = 2
} else if ($(target).hasClass('btn-done')) {
  num = 3
} else if ($(target).hasClass('btn-remove')) {
  num = 4
})

switch(num) {
  case 1 :
    // handle case 1
  break
  case 2 :
    // handle case 2
  // ...
}
// ...

本周上課時數 = 0048:00
累積上課時數 = 0604:00

###### 報告人 : 士育 (benben)

---

#### 第十二週尾聲隨意聊

這週主要是想提醒大家幾個東西
第一個是交作業之後，記得站在助教的立場檢視一下作業
意思就是假設你什麼都不知道而且你是助教，你有沒有辦法改這份作業？
如果沒有後台登入帳號密碼，該怎麼改？
如果沒有附上網址，該怎麼改？
如果程式碼混到上一週的，該怎麼改？
如果有檔案遺漏掉的該怎麼辦？

自己通常看不清楚，所以一定要換一個角度去看
一定要假設自己什麼都不知道，然後去看看有沒有遺漏的資訊
課程越往後會對這些東西越來越嚴格
因為在計畫內沒做好頂多被助教提醒一下，然後作業改得慢點
但結業之後如果在公司裡面這樣，就是不專業的一個表現
而且那時會一起拖慢同事 review PR 的速度，降低工作效率
所以確保自己交出去的東西是有一定的品質的，也是件重要的事情
也可以開無痕模式去看，避免被已經有的 cookie 什麼的干擾

再來呢，希望大家無論進度在哪週，都可以先去把課綱全部看過一次
就一路看看看看到第二十四週，看一下每週大概學一些什麼
我其實以為大家都會這樣做，但想了想覺得似乎不然
會希望大家把課綱全部看過，是因為這樣才能知道總共會學些什麼
這樣你在學習的時候就比較不會超出範圍
例如說第八週你在研究串 API 研究到 fetch，然後花一堆時間在那上面
但如果你有看過課綱，就會知道這個十三週就會講到，就只會先看過去
所以知道之後大概有哪些東西，能幫助你更清楚每週的 scope

最後是要提醒大家對自己寫的 code 要有一定的理解程度
你在看一段程式碼的時候，要很清楚一件事情，那就是 code 的 flow
就是這一段執行完會到哪邊，這邊呼叫函式以後又跳到哪邊等等
要能講出現在執行到哪一段，然後下一段又會去哪裡
要理解的原因是唯有這樣你才能 debug
當 bug 發生時，你才知道是哪一段可能有錯
如果是這一行錯會怎樣？我要怎麼驗證是不是這行有錯？
是這個 function 寫錯嗎？我可以怎樣驗證？

另外就是如果你對某個指令有疑惑
例如說 PHP 講到 prepare statement 那邊
指令有點多而且有點混雜，又有 $conn 又 $stmt 又 $result
這些到底是什麼？
最好的方法絕對不是用猜的，因為你猜對也沒什麼
而是去看文件
你就 google: php prepare statement
你就會看到那個 method 的回傳值是什麼，然後做了什麼事情 那邊的解答會是最準的也是最有幫助的
如果要把「debug 能力」具象化，大概就是：

1. 知道 code 的 flow
2. 知道每一行 code 大概在幹嘛
3. 發生錯誤時，知道怎麼驗證是哪一段有錯
4. 知道去 google 去看文件，理解出錯的 method 在幹嘛

這週大概就是這樣，主要是提醒一些注意事項
我們下週見～