Firebase - Hosting 建立自己的簡易網站 By GitHub

各位大大想如果有網頁開發基礎( Html JavaScript Css )
但是不太懂要如何買伺服器去架設
那 Firebase Hosting 是你的好選擇
但是要注意會有容量限制請自行注意

為什麼要有 GItHub 的存在
因為 Firebase 部署上去
是無法把所有的資源下載檔案( 壓縮檔 )下來的
除非自己線上一個一個抓
所以過了一段時間自己電腦程式碼遺失就容易造成無法挽回悲劇

前置準備

• 本地端要有 Node、Firebase-Tool 工作環境
• Firebase 帳號
• Github 帳號

操作步驟

1. Firebase 建立( 新 )專案( hosting-deploy-by-github )
   
   
   
2. Github 建立 Firebase 對應的專案 Repository( hosting-deploy-by-github )
   
   
   
3. 從 Github Clone Repostory 到本地端
   
   
   
   
4. 開啟命令提示字元
   
   
5. 登入 Firebase
   PS: 要先登出的原因在於避免暫存影響到後續操作
   firebase logout
   firebase login
   firebase init
   
   
6. 選擇建立好的專案項目
   
   
   
   
7. 是否建立對外公用資料夾及是否建立首頁
   
   
   
8. 是否使用 GitHub 設定自動建置和部署？
   
   
   
9. 輸入對應的 Repository 名稱 ( AAA/hosting-deploy-by-github )
   
   
   
   
10. 啟動工作時候是否要執行 Script? No( 常用於 Vue、Angular 等專案前置作業)
    
    
    
    
11. 是否設定提出 PR 合併後自動部署並確認對應分支名稱
    PS: 此分支是直接上正式環境，如要模擬請開分支於本機驗證
    
    
    
12. 最後只要對此 Github Reporsitory 進行操作的部署即可
    PS: 必須對應到您設定的監聽分支為主
    git add .
    git commit
    git push
    
    
13. 登入 Github Action 確認分支完成後狀態是否為綠色打勾
    
    
    
    
14. 登入 Firebase Hosting 建立網站網址內容是否已經更新，如果有就代表成功囉
    
    
    
    

PS: 設定 firebase.json

參考資源：

Deploying Your Website to Firebase Hosting from GitHub

[ 筆記 ] Firebase Deploy (Hosting) Part 2: GitHub Actions

開箱28:新手搭建～Vue+Vite+GitHub部署到Firebase Hosting

歡迎轉載，請註明出處。

Html - Padding 和 Margin 有什麼差異 What's different Padding and Margin ?

目的

在開發前端頁面時候，我們常常會遇到 Padding 或是 Merge，功能都是間距不是嗎？
為了能夠讓各位能夠理解這兩個屬性我們就來分析吧

分析表

Feature	Padding (內邊距)	Margin (外邊距)
功能	控制 內容 與 邊框 之間的距離	控制 元素 與 其他元素 之間的距離
位置	在邊框內部，包圍內容	在邊框外部，包圍整個元素
影響背景顏色	會繼承元素的背景顏色	不影響（完全透明）
是否改變元素尺寸	是，會讓元素變大	否，不會改變元素本身的尺寸
應用範例	加文字與邊框的間距，避免內容擁擠	增加元素之間的距離，讓佈局更整齊
CSS 語法範例	padding: 20px;	margin: 10px;
影響其他元素布局	不會影響周圍元素	會影響相鄰元素的距離

結論

Padding：對內間距

Margin：對外間距

歡迎轉載，請註明出處。

Git - Git 和 GitHub 有什麼差異 What's different Git and GitHub - 2?

目的

我們常常聽到 Git 和 GitHub 在我們的工作環境，但這兩個時常讓我們搞不清楚各個功用到底是什麼？就像是 Java 和 JavaScript 有什麼關係，這是一樣的嗎？以下就讓我們了解其中的差異吧！

分析表

名詞說明

本機：個人電腦主機

雲端平台：線上硬碟( Google Drive、DropBox... etc )

協作：同時多人對同一個專案開發

特性	Git	GitHub
基本概念	版本控制系統 用來跟蹤和管理程式碼的變更	雲端平台 用來存放和分享使用 Git 管理的程式碼庫
功能	基本功能 提交、分支、合併和回退等操作	除了 Git 的基本功能外 還有遠端操作項目管理工具
範圍	本機安裝的軟件 管理本機程式碼	雲端平台 可以在任何地方通過網絡訪問和管理倉庫
協作方式	本機版本控制 通過本機網絡協作	提供網絡上的協作功能，如 pull requests、code reviews 和 issues
例子	小明在自己的電腦上使用 Git 來管理程式碼	小明和小紅通過 GitHub 在不同地方一起開發項目

總結

• Git：是一個版本控制工具，幫助開發者在本機管理程式碼的變更。
• GitHub：是一個基於 Git 的雲端平台，提供協作和項目管理功能，使得團隊開發更加方便。

歡迎轉載，請註明出處。

Git - 為什麼要用 Git 進行版控 Why use to Git by Source Code control - 1?

目的

因為各軟體公司都把 Git 的使用都列為加分的依據，但是與其說加分，倒不如說這是在開發上的良藥，對開發者來說是有益的。

所以利用這機會寫下自己對 Git 的想法，能有機會讓分享給各位也是一個福音。

用途

在開發過程因為有可能會遇到多人共同維護同一個專案，檔案內容會因為需求、拋錯...等很多種情況而異動程式碼，但是但是，如果遇到以下的窘境，你們該怎麼做？

1. 開發完成一個需求後，過半年後，要如何和新的程式碼哪裡有差異？

2. 同一個專案有多個需求要開發，但是要分批在不同的時間上線？

3. 有問題的程式碼是誰開發的，怎麼追蹤開發紀錄？

4. 我這次開發的內容和已經上線的差異？和不同環境的程式碼差異？

5. 我和其他兩位共同開發同一份程式碼，我要如何確認對方寫的如何和我的沒衝突？

以上當然只是比較常見的案例，其實還有很多例外可循。

你 / 妳也是用檔案複製和貼上進行保存等動作嗎？其實也可以用以上的範例進行測試，看能不能是用以上的情境。

所以我們就會有一個版控工具，讓我們在開發上更加的有利也能掌握狀態。

歡迎轉載，請註明出處。

NetWork - 什麼是 SPF 和 DKIM ? What's SPF and DKIM ?

目的

因為近期收到通知突然無法收到否位置的來件，但是到後臺發現基本功能正常，到底是發生什麼事情？

也因為這樣也讓我多學到一課，這設定也是如此的重要

SPF ( Sender Policy Framework )

說明：就像是確認信件是從正確的地址寄出的郵遞系統。

為啥要檢查：檢查發送郵件的伺服器是否有權限代表發送者的域名發送郵件。

如何工作：發送者的域名會有一個 SPF 記錄，列出允許發送郵件的伺服器 IP 地址。接收郵件的伺服器會檢查這封郵件的發送伺服器是否在這個列表中。

目的：防止垃圾郵件伺服器偽裝成合法發送者發送郵件。

DKIM ( Domain Key Identity Mail )

說明：就像是在信件上加上一個電子簽名，確保信件來自正確的發送者並且沒有被篡改。

為啥要檢查：檢查郵件的內容是否附有有效的電子簽名，確保郵件在傳輸過程中沒有被篡改。

如何工作：發送郵件的伺服器會使用私鑰對郵件的某些部分進行簽名，接收郵件的伺服器會使用公鑰來驗證這個簽名是否有效。

目的：確保郵件內容未被篡改，並驗證發送者的身份。

這兩者的最大差異

SPF: 郵件來源

DKIM: 郵件內容

這兩者一起工作，可以大大提高電子郵件的安全性，防止垃圾郵件和詐騙郵件。

歡迎轉載，請註明除處。

Java - 程式碼排版的好處

目的

隨著開逐漸頻繁，我們就會產生非常多的程式碼內容，之後要如何將程式碼做有效的留存？如何要轉交給下一位同仁時能夠更快能夠更快上手。

爲什麼要排版

提高可讀性

清晰的程式碼結構和一致的格式可以讓程式碼更容易理解。良好的排版使得程式碼邏輯一目了然，減少理解程式碼的時間和精力。

減少錯誤

良好的排版有助於發現和避免錯誤。整潔的程式碼可以讓潛在的錯誤更容易被發現，例如缺失的括號或錯誤的縮排。

便於合作

在團隊合作中，一致的程式碼風格能夠讓團隊成員更容易閱讀和理解彼此的程式碼，減少溝通成本和程式碼衝突。

提高維護

程式碼在維護過程中需要頻繁地被閱讀和修改。良好的排版可以使得維護人員更容易理解程式碼邏輯，從而提高維護效率。

實際範例

修改前

public class Example {
public static void main(String[] args) {
int a = 10;
int b = 20;

if (a > b) {
System.out.println("a is greater");
} else {
System.out.println("b is greater");
}
}
}

修改後

public class Example {
    public static void main(String[] args) {
        int a = 10;
        int b = 20;
        
        if (a > b) {
            System.out.println("a is greater");
        } else {
            System.out.println("b is greater");
        }
    }
}

歡迎轉載，請註明出處。

Java-錯誤及例外處理的第一步

各位大大
想必大家想順順利利的編寫程式碼
最好都不要有任何重大的錯誤
但是
通常事與願違
在開發的過程中
只會一直遇到錯誤並且快速修正減少錯誤再次發生
然後無限迴圈
直到事前直接想到之前有遇到過相同的雷
直接去迴避它

對的
去面對他才是有效解決的好辦法
最怕的是連錯誤訊息都沒有顯示
那真的讓人恐懼

我們就先簡單介紹如何快速去排除問題吧！

錯誤項目

一般錯誤排除

常常發生於直接複製程式碼、編寫程式碼打錯字、沒有引用到正確資源等。
排除方式：

1. 會在錯誤的地方文字底下有紅蚯蚓提醒

2. 在當行前面有紅色燈泡提醒 Icon 點選下去有建議調整( 排除 )方式

PS: 雖然有提供方式給你選擇，但實際方向開發者要自己知道。

例外錯誤排除( Checked and Unchecked Exception  )

通常是在執行中遇到不符合預期內容、類別...等問題

排除方式：

1. 查看 Console Log 視窗或是 *.log 檔案

2. 如有明顯錯誤內容會存在 Error 敏感文字

3. 分析該區塊文字說明( 由上而下閱讀 )

- 先找第一行的例外類別為何( 下圖中第一個紅框框 ) ? ( 可先 Google 該例外簡易說明 )

- EX: Exception in thread "main" java.lang.NumberFormatException: For input string: "一"

- 在訊息內發生問題( 錯誤 )的程式碼位置

PS: 通常我們直接從專案底下( Packages )的程式碼找起，較少機會出現在依賴的資源內。

at java.lang.NumberFormatException.forInputString(NumberFormatException.java:65) 

at java.lang.Integer.parseInt(Integer.java:580) 

at java.lang.Integer.valueOf(Integer.java:766) 

at com.text.Hello.main(Hello.java:9)

歡迎轉載，請註明出處。