2024年10月15日 星期二

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

目的

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

分析表


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

Padding vs Margin


結論

Padding:對內間距
Margin:對外間距

歡迎轉載,請註明出處。

2024年7月13日 星期六

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. 我和其他兩位共同開發同一份程式碼,我要如何確認對方寫的如何和我的沒衝突?


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


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


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


歡迎轉載,請註明出處。

2024年7月7日 星期日

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

目的

因為近期收到通知突然無法收到否位置的來件,但是到後臺發現基本功能正常,到底是發生什麼事情?
也因為這樣也讓我多學到一課,這設定也是如此的重要

SPF ( Sender Policy Framework )
說明:就像是確認信件是從正確的地址寄出的郵遞系統。
為啥要檢查:檢查發送郵件的伺服器是否有權限代表發送者的域名發送郵件。
如何工作:發送者的域名會有一個 SPF 記錄,列出允許發送郵件的伺服器 IP 地址。接收郵件的伺服器會檢查這封郵件的發送伺服器是否在這個列表中。
目的:防止垃圾郵件伺服器偽裝成合法發送者發送郵件。


DKIM ( Domain Key Identity Mail )
說明:就像是在信件上加上一個電子簽名,確保信件來自正確的發送者並且沒有被篡改。
為啥要檢查:檢查郵件的內容是否附有有效的電子簽名,確保郵件在傳輸過程中沒有被篡改。
如何工作:發送郵件的伺服器會使用私鑰對郵件的某些部分進行簽名,接收郵件的伺服器會使用公鑰來驗證這個簽名是否有效。
目的:確保郵件內容未被篡改,並驗證發送者的身份。

這兩者的最大差異
SPF: 郵件來源
DKIM: 郵件內容

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

歡迎轉載,請註明除處。

2024年7月6日 星期六

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");
        }
    }
}

歡迎轉載,請註明出處。

2024年6月10日 星期一

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)





歡迎轉載,請註明出處。

Maven - Java 專案管理用途 ( 一 )

這章節不談論環境相關、安裝相關等問題

前提

各位大大
想必為啥 Java 專案用 Jar 匯入專案就可以用的嚇嚇叫
為啥最後要用啥 Maven 的東西來介入該專案內
用這一個東西到底有什麼好處?
如果是有好處的的話那要怎麼閱讀?

本文

自從工作後就沒有再離開過 Maven 了
不是說離不開
而是走到哪就被使用到哪裡
這就像是一個專案已經被定義好注定

生活例子( 前 ):

蛋糕的製作( 草莓蛋糕 )
成份:
雞蛋、麵粉、牛奶、草莓...等

我相信大家看到以上菜單就一股腦兒直接去蒐集材料並且開始製作
但是
如果你是幫XX超商出的蛋糕
能夠北區、中區、南區的長相、口味、口感沒有標準嗎?
材料的來源及作法能夠自己說的算嗎?
當然不能的
所以要制定規範

生活例子( 後 ):

蛋糕的製作( 草莓蛋糕 )
成份:
雞蛋( 台南XX山烏骨雞雞蛋 )
麵粉( XX貿易商X筋麵粉 )
牛奶( 日本北海道XX鮮乳 )
....

有了以上的規範
就能讓產出的內容更加有保障
也不會因為生產地區的不同導致產出的結果不一致
這就是 Maven 專案管理主要的用意

結論

因為有管理資源的設定
所以不管是哪裡支援的工程師( 蛋糕師傅 )
都可以快速掌握並且不會因為材料來源的不同
導致產出不符預期的產品出來


官方網站: 連結

2024年5月1日 星期三

MySQL-安裝與執行( 一 ) Mac

因為近期有安裝 MySQL 在 Mac 的需求
發現安裝起來好像在微軟的程序有點差異
所以在此記錄下來
以便下次瀏覽和確步驟

安裝 MySQL

  1. 首先到 MySQL 官方網站( 連結 )並且點擊網頁最下方的 Download Server 項目




  2. 點選其他下載版本



  3. 選擇合適你 Mac OS 版本以及 CPU 版本的安裝包
    PS: 我電腦版本 Mac OS 12 所以只能選 8.0.30



  4. 點選安裝包
    PS: 有時候會出現惡意程式提醒,記得去安全性及隱私權解除封鎖







  5. 我們這裡點選預設值



  6. 開始設定密碼( 目前預設長度看起來都要超過 8 碼 )
    PS: 因為僅在本機練習,所以先設定: 12345678




  7. 安裝完成



  8. 確認是否安裝成功,所以我們要去系統偏好內是否存在 MySQL 項目
    PS: 這項目檢測建議重新開機 





安裝 MySQL WorkBench

因為我們上方的步驟僅在本地安裝資料庫 ( DataBase ),如果要查看這資料庫或者是遠端( 線上 ) 資料庫,如果要實際對該資料庫( DataBase )操作,除了終端機外,還有使用官方提供的工具對指定資料庫操作。
  1. 首先到 MySQL 官方網站的 WorkBench( 連結 )並且點擊網頁最下方的 Download WorkBench 項目



  2. 點選其他下載版本



  3. 選擇合適你 Mac OS 版本以及 CPU 版本的安裝包
    PS: 我電腦版本 Mac OS 12 所以只能選 8.0.30



  4. 執行安裝步驟



  5. 安裝完成及歡迎介面



  6. 在 MySQL Connections 旁邊圖示( + ) 點選新增並設定剛剛在本機新增的資料庫連線資料
    Connection Name: TestDB
    Hostname: 127.0.0.1
    Port: 3306
    Password: 12345678( 請自行依照設定填寫 )



  7. 點選 Test Connection 進行測試確認結果



  8. 點選 OK 後,此新增的項目就會添加在介面內以便後續管理



  9. 點選後就可對此資料庫進行管理





歡迎轉載,請註明出處。

2024年4月21日 星期日

WebSite-如何匯入 Dynamic Web Project 至 Eclipse



如何載入 Dynamic Web Project 專案?
0. 下載專案並開啟 Eclipse
PS: 需要在 Eclipse 設置 Tomcat Server


1.  開啟專案
2. 選擇專案
3. 確認專案
4. 匯入專案

PS: 因為有些專案用得到 HttpServler,所以我們要針對專案進行相關設定,否則會出現一堆紅蚯蚓( 錯誤提醒 )
1. 查看專案特性
2. 確認專案內容
以此專案需要用到 Java 、 HttpServlet...etc
所以要勾選以上項目並且在 Web 項目掛載本機的 Server 才能載入相關的資源


測試網址: http://localhost:8080/xxxx/


歡迎轉載,請註明出處。