Photo by Timo Volz on Unsplash

密碼驗證

常見的網頁資料輸入驗證會讓使用者輸入兩次密碼,比對兩次是否相同。

驗證的方法可以使用 Mongoose Schema 當中的驗證屬性(Validate Property)。

const mongoose = require('mongoose');
const validator = require('validator');
const userSchema = new mongoose.Schema({
password: {
type: String,
required: [true, 'Please provide a password'],
minlength: 8,
},
passwordConfirm: {
type: String,
required: [true, 'Please confirm your password'],
validate: {
// 參數1 : 驗證器的值可以使用一個自定義函式。
// 參數2 : 當驗證結果等於 false 的時候回傳 message。
validator: function (el) {
return el === this.password;
},
message: 'Passwords are not the same!',
},
},
});
const User = mongoose.model('User', userSchema);module.exports = User;

雜湊加密

👉 對密碼進行雜湊加密(hash encryption)

👉 使用 bcrypt 雜湊加密演算法

👉 使用非同步版本

✍️ bcrypt 能夠將一個字串做雜湊加密,其中有個參數叫 saltRounds 是在密碼學中的加鹽(salt),加鹽的意思是在要加密的字串中加特定的字符,打亂原始的字符串,使其生成的散列結果產生變化,其參數越高加鹽次數多越安全相對的加密時間就越長。 — 引述自 andy6804tw

✍️ 該加多少鹽? bcrypt.hash第二個參數數值越大加鹽越多則越安全,其運算與電腦CPU有關係,預設值為10,2021年的今天電腦效能普遍不錯因此可以設定12來提升安全性,如果是20年前可能要降8來維持電腦運作速度。 — 引述自 Jonas Schmedtmann

userSchema.pre('save', async function (next) {
// guard clause(看守子句) : 如果密碼沒有變更,就直接傳到下一個中介軟體。
if (!this.isModified('password')) return next();
// 密碼進行雜湊處理 (cost 12)
this.password = await bcrypt.hash(this.password, 12);
// 刪除 passwordConfirm 欄位,因為只是拿來驗證,不需要儲存到資料庫。
this.passwordConfirm = undefined;
next();
});

事實上加密(Encrypt)與雜湊(Hash)並非指相同的事情,但具體內容已超出本文,建議延伸閱讀更為正確的相關資訊,一次搞懂密碼學中的三兄弟 — Encode、Encrypt 跟 Hash

攝影師:RODNAE Productions,連結:Pexels

表單的東西並不難,查一下MDN也可以很容易理解,但是有一個也特別容易搞混的就是label揪竟是對應id還是對應name?如果能記住就可以省下每次查找MDN的時間,很剛好我有一個有點好記的方法🧐

在大腦喜歡這樣學這本書中有提到,運用已知理解未知是一個優秀的學習法,因此運用比喻可以更容易學習,以下就是我對於 form 上述的問題所想到的特殊記憶法:

我們對於監獄的印象就是犯人被關在一格一格的門裡,那個鐵門的外觀正好很像表格,因此我們可以在大腦中輸入一個暗示,表單就是一個監獄,對任何犯人所貼的標籤(label)都來自這個人的編號(id),因為在監獄裡是沒有名子的,而背後處理這些人的高官(back-end)則是只會記得這個犯人的姓名(name)。

<form>
<label for="email">Email</label>
<input type="email" id="email" name="email">
</form>

最後補充一個觀念,這東西不難理解但容易忘記是因為我們沒有讓大腦認知到這個東西需要被記起來,那麼當然很自然而然就忘記了,所以一個想要記起來的東西除了比喻法之外還要反覆的回想。(我的監獄可以讓你更好回想)

Photo by Jason Weingardt on Unsplash

RWD的元素大小單位已經由px轉為rem哩!

Rem 代表root em。它的作用類似於 em,但它不檢查父元素以調整字體大小,而是檢查根元素。

根元素是<html>標籤,預設值字體大小是16px,改成10px可以更方便計算,但這樣會影響瀏覽器字體選擇失效的問題,最好的作法是改成62.5%。

計算時間 : 10px / 16px = 0.625 = 62.5%

html {
font-size: 62.5%;
}
h1 {
font-size: 6.2rem;
}

在CSS社群當中有許多程式設計師使用這個方法 — Jonas Schmedtmann

Photo by Alex Radelich on Unsplash

😡方法1 : 選擇List元素設定margin並使用偽類別(pseudo-class)來設置最後一個元素不要有margin。

.box ul li {
margin-bottom: 12px;
}
.box ul li:last-child {
margin-bottom: 0;
}

😀方法2 : 父元素設置display: flex調整direction並給予gap(間距)。

.box ul {
display: flex;
flex-direction: column;
gap: 12px;
}

😀方法3 : 父元素設置display: grid並給予gap(間距)。

.box ul {
display: grid;
gap: 12px;
}
Photo by Green Chameleon on Unsplash

之前介紹過曾經介紹過Node伺服器的使用目的、與其他後端伺服器相異之處、以及用比喻的方式來解釋PORT的意義。

還沒看過可以點此👉 Node.js | Clients & Servers

那麼這一篇主要是寫法上的知識點筆記。

知識點1: 請求服務監聽可以縮寫

// 原始寫法const server = http.createServer()server.on('request', (req, res) => {...})
// 縮寫寫法const server = http.createServer((req, res) => {...})

知識點2: 設置回傳的狀態碼跟檔案類型有兩種寫法

// 寫法1// res.writeHead(200, {//   'Content-Type': 'application/json',// })// 寫法2// res.statusCode = 200 //可以不寫,預設200。// res.setHeader('Content-Type','application/json')

知識點3: Content-Type有三種常見格式

// 1. text/plain// 2. application/json // 要用JSON.stringify將物件轉JSON字串// 3. text/html // 回傳html格式的資料必須一行一行的輸入。
Photo by David Werbrouck on Unsplash

不是只有RGBa可以設定透明度,事實上RGB就可以!

本文提出我認為最實用的三種方法來做分享,網路文獻還可以查到HEXA、HSLa也可以做到透明度的設定,不過我認為相對麻煩也不常用。

#1 HEX & Opacity

大家熟悉的設定方法,但缺點是整個區塊含區塊內的元素都會是半透明,也就是說文字也會變透明。

background:#000;
opacity: .5;

#2 RGBa

大家熟悉的設定方法。

background: rgba(255,255,2255,0.5);

#3 RGB

一種較少人知道的設定方法,供大家做為參考。

2021/07/08 補充 : 這個寫法SCSS不認識,因此無法被翻譯到CSS。

background: rgb(255 255 255 / 50%);
Photo by Cenk Batuhan Özaltun on Unsplash

隨著網頁的發展,在不同時期有著不同的方法來進行水平垂直置中,這篇內容挑出最常見又簡單現代CSS語法進行分享!

#方法1 Flex

可以說Flex一問世就改變了整個切版生態,這個方法是最常見的寫法。

.container{
display: flex;
justify-content: center;
align-items: center;
}

#方法2 Position

Position算是中流砥柱,老方法一個,但卻仍時常活躍於人們面前,以下這個寫法不是最簡短卻是最好記的方法。

.container{
position: relative;

.box{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
}

#方法3 Grid

Grid年紀最輕,也能輕鬆做到Flex比較難做的排版,是個很值得投資的技能,不過要注意支援度問題,曾有前輩在布魯斯前端群組分享Grid寫得很開心但最後瀏覽器不支援,整個專案又寫了一次Flex的版本。

.container{
display: Grid;
justify-content: center;
align-items: center;
}

參考 :

CSS垂直置中技巧,我只會23個,你會幾個

[CSS] 元素置中的 N 個方法

張昆裕 | Kun-Yu Chang

資管人,曾在半導體業打滾了幾年,持續追逐著那個屬於我的理想形狀。

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store