Git make sure you configure your 'user.name' and 'user.email' in git

VS Code Commit時出現的錯誤
make sure you configure your 'user.name' and 'user.email' in git
開啟終端機輸入以下指令

config --global user.name "你git上面的名稱"
config --global user.email 你git註冊的mail

CSS Flex練習 & 補充

1.將容器設定成flex

<div class="container"></div>
.container{
  display: flex;
}

2.外層容器屬性
2-1 主軸 justify-content

justify-content: center; 
justify-content: flex-start;
justify-content: flex-end; 
justify-content: space-between;左右"不"留白等距
justify-content: space-around; 左右留白等距

2-2 主軸方向 flex-direction

flex-direction: row;
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;

2-3 主軸換行 flex-wrap

flex-wrap: nowrap;
flex-wrap: wrap;
flex-wrap: wrap-reverse;

2-4 交錯線 align-items

常用如下更多請看下方參考資料
align-items: flex-start;
align-items: flex-end;
align-items: center;
align-items: stretch;

補充1.容器內容分離，容器僅負責定位
補充2.搭配以下語法可減少計算失誤

*{
 box-sizing: border-box;
}

*,*::before,*::after {
    box-sizing: border-box;
}

補充3.如果為顯示類似購物車，可多一個col div來當容器

.col-1{
 width:calc(100%/12);
 padding-left:10px;
 padding-right:10px;
}

.col-2{
 width:calc(100%/12*2);
 padding-left:10px;
 padding-right:10px;
}

.col-12{
 width: 100%;
 padding-left:10px;
 padding-right:10px;
}

補充4.變數共用

:root {
    --text-green: #57A203;
}
.cgreen {
    color: var(--text-green);
}

補充5.手機板禁用X軸(下方左右卷軸)，設定了固定的width就會產生此問題
補充6.max-width取代width，最好在最外層的container要設一下，解決補充5方法

1.如果父元素比較寬時，保持既有寬度
2.如果父元素比較窄時，依父元素寬度自動調整

補充7.Flex依比例調整寬度，下為左占2右邊占3

.left{
	flex:2;
}
.right{
	flex:3;
}

補充8.格線系統響應式小方法

@media screen and(max-width: 768px){	
	[class*="col-"]{
    	width:100%;
	}
}

補充9 權重

HTML 標籤：1 分
class 選擇器：10 分
ID 選擇器：100 分
inline style：1000 分
!important：10000 分

html body .container .box{22分}
.box.box.box{30分}

補充10圖片改變大小時換圖

<picture>
  <!-- 當螢幕寬度少於992px時，替換圖片 -->
  <source srcset="./images/M2.png" media="(max-width: 992px)">
  <!-- 預設圖片，通常是桌面版本 -->
  <img src="./images/M1.png" alt="Logo">
</picture>

參考資料
flex
六角線上課

Nas 對接電腦傳輸速度變慢

使用網路芳鄰時跑的速度很慢
1.檢查網路線是否接好
2.網路線品質cat?
3.先檢查Nas跟PC或筆電的網路速度
4.透過 Windows (SMB / CIFS) 傳輸檔案時速度緩慢，該如何解決？或[網路芳鄰 (SMB)] 如何解決Windows 11無法使用SMB功能的問題?
5.通常會需要關閉SMB簽名要求，用管理員開啟Power Shell

Set-SmbClientConfiguration -RequireSecuritySignature $false

參考資料
透過 Windows (SMB / CIFS) 傳輸檔案時速度緩慢，該如何解決？
[網路芳鄰 (SMB)] 如何解決Windows 11無法使用SMB功能的問題?

Windows chkdsk

最近常遇到磁碟無法讀取或是USB隨身硬碟讀LAG很久
微軟有個命令chkdsk嘗試後不錯用記錄一下

chkdsk /f /r /x d:

/f	修正磁碟上的錯誤。 磁碟必須鎖定。 如果 chkdsk 無法鎖定磁碟機，則會出現一則訊息，詢問您是否要在下次重新啟動電腦時檢查磁碟機。
/r	找出損毀的磁區並復原可讀取的資訊。 磁碟必須鎖定。 /r 包含 /f 的功能，以及實體磁碟錯誤的額外分析。
/x	如有必要，強制磁碟區先卸除。 磁碟機的所有開啟控點都會失效。 /x 也包含 /f 的功能。

試過之後USB隨身硬碟問題解決了 參考資料
chkdsk

React class & style(3)

1.先清除index.css，換成

.parent{
    color:  rgb(147, 60, 229);
}

.child{
    color: rgb(232, 150, 27);
    background-color: rgb(234, 78, 11);
}

2.接著回到App.jsx加入class

const Child = () => {
  return (
    <>
      <h3 className="child">Child Component</h3>
    </>
  )
}

const App = () => {
  return (
    <>
      <h2 className="parent">App Component</h2>
      <Child />
      <Child />
    </>
  )
}
export default App

React的class必須寫成className
3.修改Child component加入inline styles

const Child = () => {
  return (
    <>
      <h3 className="child" style={{
        backgroundColor: '#BBFFFF'
      }}>Child Component</h3>
    </>
  )
}

原css中如有-則使用小駝峰（lower camel case)
inline styles優先度大於class
參考資料
Adding styles
React JS 19 Full Course 2025 | Build an App and Master React in 2 Hours

React Component(2)

React Component寫法有蠻多種的
以下是個人覺得比較簡潔的
1.將App.jsx內容先全部清除改成

const App = () => {
  return (   
      <h2>App Component</h2>   
  )
}
export default App

完成第一個Component了
2.接著新增一個Child Component

const Child = () => {
  return (
    <>
      <h3>Child Component</h3>
    </>
  )
}

3.在App Component中使用多個Child Component

const App = () => {
  return (
    <>
      <h2>App Component</h2>
      <Child />
      <Child />
    </>
  )
}
export default App

表示Component可重複使用
特別注意 Component第一個字為大寫
參考資料
Your First Component
React JS 19 Full Course 2025 | Build an App and Master React in 2 Hours

React VS Code + Vite + React開發(1)

React過去有幾個地方令人詬病，React 19改善了許多
目前在寫法上也改進了許多，本篇開始紀錄開發過程
開啟VS Code > Terminal

npm create vite@latest

Project name:
.(於目前開啟的資料夾)

Select a framework:
react(或輸入想要的名稱)

Select a variant:
javascript(或擅長的開發方式)

檢查一下package.json > dependencies > react 版本是不是19.0.0

npm install

npm run dev

點開網頁完成了第一次建立
如何建立發佈檔案

npm run build 

檔案會在dist下
參考資料
Build a React app from Scratch
React JS 19 Full Course 2025 | Build an App and Master React in 2 Hours

IIS At least one other site is using the same HTTPS binding and the binding is configured

一台Server IIS使用多網站憑證問題
At least one other site is using the same HTTPS binding and the binding is configured

解決方式

勾選Require Server Name Indication

中文版請參考下方參考資料
參考資料
IIS 多站台使用 HTTPS 憑證的設定方式

npm : 因為這個系統上已停用指令碼執行，所以無法載入

1.開啟PowerShell
2.執行

get-executionpolicy

3.如為Restricted執行

set-executionpolicy remotesigned

4.如有例外改執行

Set-ExecutionPolicy -Scope CurrentUser RemoteSigned

參考資料
VSCode 執行 npm install 失敗

SQL Server 無法修改強制執行密碼原則

新增SQL使用者時，強制密碼原則未勾選時錯誤
"The CHECK_POLICY and CHECK_EXPIRATION options cannot be turned OFF when MUST_CHANGE is ON"

USE Master
GO
ALTER LOGIN UserName WITH PASSWORD = 'password'
GO
ALTER LOGIN UserName WITH
      CHECK_POLICY = OFF,
      CHECK_EXPIRATION = OFF;

參考資料
Can't Alter Login

SQL Server provider: Named Pipes Provider, error: 40

這問題新手時常遇到所以大概解法
1.開啟 Sql Server Configuation Manager，啟用具名管道

2.防火牆設定輸入規則1433 port
通常這樣就解決了，但我問題還是沒解決
後來詢問主機廠商才知道1433 port常被駭，所以主機商先鎖了，所以需要在Server上使用另一個Port
以下為解決方法
1.開啟 Sql Server Configuation Manager，修改TCP/IP > 改port > 重啟服務
2.防火牆設定輸入規則"自訂的"port
最後專案或程式碼修改連線字串
連線字串比較特別，例如自訂的port為9527，原"192.168.1.100",要改成"192.168.1.100,9527"