# 季芳 t6_code review
### 怎麼在 npm run 你的 sass
```json
用 ./node_modules/.bin/sass --watch sass/all.scss style.css
可以加這行："sass": "sass --watch sass/all.scss:style.css"
{
"name": "jami",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"sass": "sass --watch sass/all.scss:style.css"
},
"author": "",
"license": "ISC",
"description": "",
"devDependencies": {
"sass": "^1.77.0"
},
"dependencies": {
"bootstrap": "^5.3.3"
}
}
```
### html
#### header / nav 為什麼要寫兩組 html 結構
```
處理 search bar 的架構。
季芳：也可以用一個架構寫出，只是要包很多層～
如果真的是這樣設計的話，可以跟設計師溝通看看，因為非必要不會用到兩組 html
資料是固定的話，資料跟樣式要改兩次，很多頁的話你就要改很多次
也是會有電腦版跟手機版結構完全不同，就不是 rwd 了
```
#### input="search" onsubmit 事件不寫也可以
```
form="submit" 提交會重整，所有 input 值就會清除。
如果是預設不要清除，會用 preventDefault
```
#### form action=""?
```
是 form 的預設動作，不寫的話預設就是這個
form 送出後 網址會變，代表發請求的時候要送到哪，之後學時會再設定
```
其他的可以參考[這裡](https://developer.mozilla.org/zh-TW/docs/Web/HTML/Element/form)
#### banner 多包一層
### css
#### .service
```
z-index:2 沒作用可以拿掉
```
### 畫面問題
#### FEATURED WORKS
```
建議在小裝置箭頭可以分開一點，使用者體驗
```
#### 小裝置的 footer 建議改成 fat footer
### 拆檔案的想法
```
共用拆出來，通用的放在 abstract，小元件類的放 component
季芳：元件要到多小要拆？看自己怎麼理解重用，這個版比較難看出來是否有重用。
我的做法是 swiper 給我的，就拆成一個 swiper 檔。
輪播按鈕，視為是 Bootstrap 給我的，拆到 Bootstrap 檔。
```
### source code
#### custom_container
```scss
可以不用寫那麼多斷點，如果需要可改為：
$tablet: 576px;
$md: 768px;
$desktop: 992px;
$xl: 1200px;
// 斷點
@mixin deviceSize($breakpoint) {
@media (min-width: $breakpoint) {
@content;
}
}
.custom_container {
@include deviceSize($tablet) {
margin: 0 auto;
max-width: 566px;
}
@include deviceSize($md) {
max-width: 758px;
}
@include deviceSize($desktop) {
max-width: 982px;
}
@include deviceSize($xl) {
max-width: 1140px;
}
}
```
#### button / input 的 style
```
命名可以清楚一點，例如 initial-style . color-style
盡量讓讀者看到命名直接知道你在幹嘛，不用再點進檔案
```
#### url 要不要用""包起來
可以看[這裡](https://www.w3.org/TR/css-values-4/#urls)
#### @use 用了 as *
```
讀起來有點太冗長的我就有使用
季芳：要注意，變數名稱如果有使用同樣命名的話，後面會蓋掉前面的
```
### @mixin / @extend
```
@extend 編譯後長怎樣
- 會以 , 逗號、群組方式呈現
季芳是用在 輪播的兩個按鈕，覺得很適合是因為：樣式差不多，只差在箭頭方向
同一個群組、同一層的東西
要講得出 @extend 和 @mixin 差別在哪裡，得知不用 @extend 的原因
```
# Eva t6 code review
### componet (X) component (O)
> 命名要多注意～
### 這行樣式會產生什麼樣的作用？[🔗](https://github.com/Jamixcs/t6/blob/62470dc09ac60a5d91a82dbcf4a16269bdf8ecf2/sass/componet/_text-clamp.scss#L2)
```scss!
display: -wekbit-box; 可以用來定義 flex 容器，相似於 display:flex;
有相應的屬性可以設置排列方向、主次軸對齊方式。
>> 看範例
display: -wekbit-box;
-webkit-box-orient: horizontal; /* 排列方向為水平 */
-webkit-box-pack: center;/* 主軸對齊方向為 center */
-webkit-box-align: end; /* 次軸對齊方向為 end */
```
[參考](https://cloud.baidu.com/article/3317139)
[Can I Use](https://caniuse.com/?search=webkit-box)
### icon 系列的 class有沒有機會改寫成更能複用的形式？[🔗](https://github.com/Jamixcs/t6/blob/62470dc09ac60a5d91a82dbcf4a16269bdf8ecf2/sass/componet/_social-media.scss#L66)
```scss!
before：區塊設置好 layout，而 header 和 footer 由兩組 mixin 控制，html 為每個 icon 一個 class name。
after：區塊設置好 layout，設置每個元素的位置(backgroun-position-x)，使用時再進行變化。
```
### 選用 mixin的原因是什麼？[🔗](https://github.com/Jamixcs/t6/blob/62470dc09ac60a5d91a82dbcf4a16269bdf8ecf2/sass/componet/_input.scss#L3)
```scss!
這版有四個 input，想法是：可以寫一支預設的樣式，在不同地方引用。
而 @extend 我把它理解是：同一區塊、同一層的元素，要繼承於同一層的其他元素的時候用。
```
### 選用 mixin的原因是什麼？[🔗](https://github.com/Jamixcs/t6/blob/62470dc09ac60a5d91a82dbcf4a16269bdf8ecf2/sass/componet/_button.scss#L3)
```scss
這題是 button ，選用的想法和 input 一樣，承上題
```
### 討論：extend / mixin 的差別
#### extend
```scss!
When one class extends another, Sass styles all elements that match the extender as though they also match the class being extended. When one class selector extends another, it works exactly as though you added the extended class to every element in your HTML that already had the extending class. You can just write class="error--serious", and Sass will make sure it’s styled as though it had class="error" as well.
```
> 延伸、compilie出來會不同，像是我有兩個地方都是 error 我要寫一個基礎的共用樣式，然後在不同情況下寫一些樣式給他的時候用
#### mixin
> 一包樣式挪用，比較不會有上方那種情境
### 怎麼區分什麼寫在 _base.scss 什麼寫在 _reset.scss？[🔗](https://github.com/Jamixcs/t6/blob/62470dc09ac60a5d91a82dbcf4a16269bdf8ecf2/sass/base/_base.scss#L24)
```scss!
_reset.scss：像是 CSS Normalize 的概念，由於各家瀏覽器有不同渲染 html 的方式，因此在這支檔案裡面進行標準化。
例如：清除 h1 到 h4 的 margin。
_base.scss：主要針對 tag 作用，會放 layout 中最基本會用到的樣式。
例如：對 html tag 設置最小寬度、對 a 設置預設樣式。
_base.scss 中的 p { margin: 0; } 已刪掉
```
> 有看過 sass 7.1 拆檔案例，但想詢問目前 sass 、或未來到框架拆檔時，是否有更正確或是習慣的分類的概念
### 這個 commit 的用意是？[🔗](https://github.com/Jamixcs/t6/blob/62470dc09ac60a5d91a82dbcf4a16269bdf8ecf2/sass/all.scss#L8)
```scss
之前寫的時候都有開 ouline 在看元素、容器的位置，所以把他寫在這邊。
```
> 寫在這裡沒有關係，但可以多考慮某些東西或 Comment 如果是不需要被第二個人看到，就不要把他 Commit 上去，或是註解寫的用意是否有幫助
### 在 html 下 min-width 的用意是什麼？[🔗](https://github.com/Jamixcs/t6/blob/62470dc09ac60a5d91a82dbcf4a16269bdf8ecf2/sass/base/_base.scss#L6)
```scss!
之前在 code review 的時候我是下在 body，因為有開 ouline 的關係，所以螢幕再縮小時紅線會跑出來，當時被問為什麼會這樣，是 html 的關係。
```
> 檢視過後是 Chrome 瀏覽器的問題，因為 body 是內容，還是寫在 body 上比較好。
### href ## 和 # 的差異是什麼？[🔗](https://github.com/Jamixcs/t6/blob/62470dc09ac60a5d91a82dbcf4a16269bdf8ecf2/index.html#L23)
```scss
# 會跳轉到頁面上方
## 會停留在原地
```
[參考](https://chentsu.wordpress.com/2014/01/07/html-%E7%84%A1%E4%BD%9C%E7%94%A8%E9%80%A3%E7%B5%90-href-hrefjavascriptvoid-%E5%B7%AE%E5%88%A5%E5%9C%A8%E5%93%AA%EF%BC%9F/)
### 這段註解存在的用意是什麼？[🔗](https://github.com/Jamixcs/t6/blob/62470dc09ac60a5d91a82dbcf4a16269bdf8ecf2/index.html#L20)
```scss!
當初思考到：因架構不是一般的 header 包 nav，怕讀者一開始會不太懂，所以就想說做標註。
```
> 讀者其實看 code 就好了，可以思考是否要寫這些 Comment
### 有 as * 和沒有的差別是什麼？[🔗](https://github.com/Jamixcs/t6/blob/62470dc09ac60a5d91a82dbcf4a16269bdf8ecf2/sass/layout/_footer.scss#L3)
```scss!
include 寫法有區別：
沒有使用 as *： @include 檔案名稱.mixin名稱
有使用 as *： @include mixin名稱 ----------> 會有命名重複的風險。
例如：button / input 都有寫為 initial-style 的 mixin，當我使用了 namespace，就會不知道引用到的是哪隻檔案的 initial-style。
是因為有時候讀起來會有點冗長贅字，就會使用as *。
例如：color: color.$white，這時我就會將 color 使用 as *。
但上次季芳 code review 時有說到，現在結構小，但未來如果和其他人協作，就要考慮到是否有重複命名。
```
> 這邊有兩個用法都有用到，可以注意“一致性”這件事，有關讀者是否可以預測
### 使用者體驗
> 有很好，沒有也不一定是一個問題，當然在和 UX 協作的時候可以對他提出的東西有提問，但是主要還是以還原為主。
### 命名
> 可以多考慮第二個人讀的時候的想法，可以問問看別人看不看得懂、不懂是為什麼，or 可以嘗試回去看自己之前寫的東西，如果沒有辦法順順地讀，可以想一下為什麼並且做改善。
### Commit 用意
> 將你做的功能切分成小任務，不要一次 commit 一大包比較好，協作時不太會知道你這一個版本做了什麼事，盡量切分、並寫清楚，但要做到版本不要壞掉，至少做到一個階段。
盡量可以從小地方多練習。
# Chris t6_code review
### 必須知：具備什麼條件怎麼會讓自己懂
```!
可能是：先知道這件事情、小規模練習、再了解之外的特性、組合跟什麼很像、再放著、然後某天就會突然懂了。
或這項東西需要練習嗎？是不是這件事不是用"看的"，是需要經過什麼"體會"才學得會。
不是學會就好，要找學習的方法，自己要去探索這件事情。
學習這件事本來就是孤獨的，有夥伴這件事有好處也有壞處，當別人在做什麼是他們適合這件事情，但自己不一定，所以不一定要把注意力放到別人身上。
在做不同事情的切換，常常會需要比較多時間，可能一下子切版一下子寫 JS，這時候就會考驗腦袋的耐受力，所以對於"暖機"的時間要有感(很重要ㄛ)。
```
### footer testimonals
```
對話框框
文字應該是靠左對齊
圓角是用 border-radius 所以有點缺角(clip 可以畫畫看圓角)
```
### 命名～
1. custom_container
custom 命名不太精準
2. responsive-layout
這個命名，會讓人覺得咦，那你其他東西沒有 responsive 嗎？會覺得常態是沒有 responsive 這邊才有(可以叫 grid system 之類的)
```
思考命名：(16:10)
1. 到頁面上思考他是什麼意思
2. 思考這個語法有什麼作用
3. 在處理什麼問題
```
#### 沙盤推演一下
```
custom_container 要幹啥的？
：設備在某個寬度以上之後，我要中間的內容設置一個最大寬度。
重點：中間的"內容的寬度"
-- 可命名為 content-container。
```
>不斷思索本質上他在講什麼，詞窮的時候就是對問題不夠了解
```!
例如：a + b 可能會被問：為什麼用 a 和 b？
當工程師前的思維：他就是 a 和 b 啊 --------------- 到這邊就停止思考了！
當工程師之後，必須要這樣問自己：對，他為什麼是 a 和 b ，是我對問題不夠了解嗎？要反覆這樣去問自己！
身為軟體工程師你要不斷地去書寫東西，所以你要想辦法多擠一點東西出來。
那他應該叫什麼，他是數學問題，數學問題上就叫：加數和被加數。
很多東西會習慣性忘記他，但要想他是拿來幹嘛的，有沒有更適合的命名，因為我們必須描述的非常深刻，養成一種精準用字的習慣！
```
### 分檔
```scss!
vender carousel . navbar 可以用 Boostrap 資料夾裝起來、分類分不出來就先丟一起(這貌似是通則)。
utilities：工具類樣式，用於解決常見的排版和排列問題，並且可以在整個專案中重複使用。
- 工具箱，就是其他，不知道什麼分類的就放這裡。
base：包含全局的基礎樣式，用於定義網站的基本外觀和風格；
- 是基本的其他，基本的東西
```
#### 我到底要怎ㄇ做
```!
想像不到那個未來，再走過去就很吃腦力。
思想上已經快要不行，已經想像不到再過去會是什麼，那就先做。
先做了，再往後看，感覺一下，不要花那麼多腦力去思考這麼多事情！！！
例如有個資料夾分類叫 abstracts 抽象的，可以試試看放，用"視覺"去確定結果，看完不適合再改，不要用感覺去感覺，調整過後體驗一下，跟他有互動，就會有答案ㄌ
```
### base.scss 的東西啊
```scss!
html {
min-width: 360px;
}
body {
background: $grey-wood;
background-repeat: repeat;
box-shadow: inset 0 100px $black, inset 0 -295.5px $black;
padding: 10px 20px 0 20px;
}
a { ——
display: inline-block; |
color: $black; |
text-decoration: none; |
font-size: 14px; |
} | 這邊可以考慮放到 font.scss
| base.scss 裡面就都是 區塊區塊區塊
p { |
font-size: 14px; |
} ——
.content_container {
max-width: 1140px;
margin: 0 auto;
}
```
### reset.scss 的 normalize
```!
這些事情不一定要 reset 裡面做，當下寫 scss 改也可以，不然有時候其實會不記得哪些 tag 有預設的 margin 啊，哪些有預設的什麼
```
### 補寫原本的樣式(38:25)
```scss!
@mixin initial-style {
width: 100%;
padding: 8px;
border-radius: 3px;
border: 0.5px solid $grey-400;
background-color: $grey-200;
font-size: 14px;
&:focus { ------------------------> 這段原本是什麼？不知道。因此 Chris 會補 :focus 之前是長怎樣，原因是，搞不好以後改樣式會不小心改為預設的，因為一點都不想記這種事情
outline-color: $theme-green;
outline-offset: 0;
}
}
// 補完長這樣
@mixin initial-style {
width: 100%;
padding: 8px;
border-radius: 3px;
border: 0.5px solid $grey-400;
background-color: $grey-200;
font-size: 14px;
outline-color rgb(0, 0, 0); -------> 還不錯吧
outline-offset 0px;
&:focus {
outline-color: $theme-green;
outline-offset: 0;
}
}
```
```scss!
原因是：想要和原本的狀態比較，一眼就可以知道 :focus 是為什麼特別要設定的，如果我要改，改回跟預設一樣怎辦？
所以要把原本的寫在上面，:focus、:hover、斷點，這種都會寫這樣。
當寫到斷點，可以把斷點前長怎樣跟後長怎樣擺在一起，並且把預設值補上
並且可以分類語法。
看程式碼的時候，視覺會落在一個區間，這行跟哪一行有關，看到會不會有疑問沒辦法被解答。
一個視覺區間=看到的資訊，在寫的時候就知道要這樣整理～
要問自己是不是有些東西在你腦海裡，而沒有寫在上面的，要察覺這件事
視覺會告訴你，喔對！！
利如 mixin 就是在做，你寫很多屬性、把同類的抓出來，做到縮短行數。
寫程式會需要做這件事，寫 JS 慢慢磨練這件事就好。
```
### social media
會建議在 :nth-child(1) ~ :nth-child(5) 這邊寫註解看是哪個social-media 的 icon，或是把它寫成變數
```scss!
// 寫註解看是哪個
@mixin icon-basic-position {
:nth-child(1) {
// facebook icon
background-position-x: 0;
}
}
// 寫成變數
// $facebook_icon: 1;
@mixin icon-basic-position {
:nth-child( $facebook_icon) {
// facebook icon
background-position-x: 0;
}
}
```
### * tag
```scss!
改為 a tag 比較好
*會降低效能，因為他會去找找找找有誰
＊＋＊ 貓頭鷹選擇器，任何接在某的東西後面的所有東西，邪門歪道XDDDD
遇到"方便"就要小心 :)
```
[＊＋＊](https://juejin.cn/post/6844903487159926797)
### 巢狀用到爆或不要用，這是兩派
```!
現在不知道為什麼要寫、不知道為什麼不寫，那你就選一派去純粹的用它，要馬都寫、要馬都不寫，之後你就會產生自己的一套標準，並且知道另一派為什麼要寫、為什麼不寫。
就需要有這種契機去學習這些，否則就是一直在延後學習這個事情的機會。
為什麼要用、為什麼不用，準則這件事，會慢慢長出！
養成自己變成 senior，就是要長出一套準則。
```
### responsive-flex-row
responsive-flex-row(25px,25px) 可叫 xGap-yGap(25px,25px)
```
命名會讓自己忘記作用，所以寫的時候就要想：這是什麼意思、這個意思的範圍到哪裡。
可以先預想好要怎麼使用了，再開始寫 class。
```
```scss!
// 命名補充
button.initial-style
color.black
grid.xGap-yGap
名詞要當動作 > 就用動名詞
動詞要當形容詞 > 就用過去分詞
funciton 是可執行物件，物件本身是名詞，但他是個可執行物件，就可以用動名詞
養出準則，不只有程式層面，任何都可以
```
### 可以再想一下的
reset
base
整個的分類
responsive 那隻檔案
動畫區塊整理
namespace 使用
### map 檔案
```scss!
沒有 map 的話，瀏覽器檢查會直接看到 css檔案，阿你就很難回去改，我也不可能直接改 css 檔案，會被蓋過。
所以這是用來讓你在瀏覽器的時候檢查屬性可以直接查看 sass 檔。
```
### 一堆器
> 原始碼（source code）→ 預處理器（preprocessor）→ 編譯器（compiler）→ 組譯程式（assembler）→ 目的碼（object code）→ 連結器（linker）→ 執行檔（executables），最後打包好的檔案就可以給電腦去判讀執行了。
```scss!
前置處理器 > 是用特徵字替換
編譯器 > 在做 原始碼 到原始碼，機器還沒讀，編譯器後變組合語言，然後再組譯一次
目的碼：CPU可以讀它，像是把 010101010010101 幾位元幾位元丟到 CPU 裡面電腦就知道你在幹嘛。
連結器：是當你的code翻成 010101010 的時候，你呼叫的函式要跳去哪、你的函式寫在哪，link 在幫你連結，不然就會找不到你什麼都沒定義
需懂比較大的專有名詞，之後會遇到更多這種名詞分類軟體
例如：框架 framework 、套件 library 遇到時，就要去了解背後的意義
Vue 是框架，React 是套件
要去理解為什麼是這樣，因這會影響你使用他的靈活度，會不會寫出糙 code，因此要懂為什麼 library 可以隨便用
```
### 會不會對 tag 做事
```!
header 需要寫 .header 嗎
可以想權重這件事情，我是不是有很多 header 以至於我需要多寫一個 class 給 header 説我是哪裡的 header，這種情況使用起來就比較合理
```
### mixin / extend 使用的時機
```scss!
extend：會把一樣的地方統整在一起，各個地方都特例，做"基底"和"特例"的區分
mixin：同一套規則的衍生物，所以可以放參數，例如你寫的：flex 的排版、但 gap 不一樣
都是在處理軟體中繼承問題，只是該怎麼實現，基底是實體的、規則不是實體的
用 extend 會有基礎類別和延伸類別的差別的實現
例如我寫一個基底按鈕 再寫黑色、綠色，那我就有三種可以用
比較不好的做法是：把黑色當作綠色的延伸，那你有第三個呢？(不要做兩個互相繼承)
比較好的做法是：兩個都做出來 在尋找共用的地方 有第三個就直接長出來
mixin 共同的是一套規則
兩個差別就是有沒有人用共同的那個東西，如果有的話 mixin 和 extend 差異就會出來～
```
Sign in with Wallet
Connect another wallet