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;
justify-content: space-evenly;
justify-content: stretch; 

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;

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

*{
 box-sizing: border-box;
}

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

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

參考資料
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"

c# 台灣載具正規表達式

目前查了一下台灣載具規則如下
載具規則
1.總長度8碼
2.第一碼必為[/]
3.後七碼為[半形]數字[0-9]、英文大寫[A-Z]、符號[.][-][+]
以下為驗證，如有錯誤請告知

using System.Text.RegularExpressions;
 public static bool taiwancarrier(string input) {
    return  Regex.IsMatch(input, @"^/[0-9A-Z.+-]{7}$");
 }
 

參考資料
手機條碼、自然人憑證條碼與捐贈碼檢核規則
用 regular expression 驗證電子發票手機條碼格式 。E-invoice mobile barcode validator by regular expression.

Asp.net 404.15 - Not found

連結字串長度問題
修改web.confiog

<system.web>
  <httpRuntime maxQueryStringLength="102400" maxUrlLength="102400" />
</system.web>
<system.webServer>
 <security>
  <requestFiltering>
   <requestLimits maxUrl="102400" maxQueryString="102400" />
  </requestFiltering>
 </security>
</system.webServer>

jQueryUI datepicker改變字體大小或CSS

  $('.datepicker').datepicker({
      beforeShow: function () {
          setTimeout(function () {            
              $('.ui-datepicker').css('font-size', '16px');
          }, 0);
      }
  });