Lala Code

你是否有遇過，想測試一個功能，或是想在不同裝置上測試，卻又要大費周章部署到測試機，你其實可以不用這麼麻煩！
ngrok 可以在本地 localhost 的環境下直接進行測試，重點是 免費版 就夠給我們一般使用

Google reCAPTCHA 是一個智慧驗證工具，可以幫助網站阻擋機器人，或任何形式的自動攻擊，既簡單又安全，不用再輸入難以辨識的驗證英文數字圖了😆

1
2
3
4
5
6
7
8

<script setup>
import { defineProps, defineEmits } from 'vue';
const props = defineProps({
  foo: String
})

const emit = defineEmits(['change', 'delete'])
</script>

在 Vue3 編譯時出現這個警告
[@vue/compiler-sfc] defineProps is a compiler macro and no longer needs to be imported.
[@vue/compiler-sfc] defineEmits is a compiler macro and no longer needs to be imported.

Vite 是由 Vue 之父 尤雨溪開發的新打包工具，可以說是 Vue Cli 的升級版，Cli 因為有依賴 webpack 解決了很多打包上複雜的問題，然而，當專案越來越大，打包時間隨著專案變大包跑得越久，大大降低了開發者的開發效率和幸福感。

vite 解決了開發速度上的痛點，秒啟動根本驚為天人⚡️⚡️⚡️！打包速度極快，不用像 vue-cli 要進行編譯後啟動，省了很多開發上的時間。

填寫表單時，需要驗證是否必填(require)、或是格式是否正確，自己手刻很複雜，可能也會不夠全面，用套件來做驗證是最省事又快速的。在 Vue2 框架時，我偏好使用 vee-validate 來做驗證，因為它簡單又好用，但到了 Vue3，veeValidate4 怎麼好像是另一個世界惹😱，vee-validate4 該怎麼使用呢

你有沒有遇過，當你分享網站連結到 Facebook 時，出現了詭異的縮圖，甚至連縮圖、介紹都沒有，不寫個訊息的話，完全不會讓人想點進去，有人可能還會以為你被盜了😅

今天在更新網站時，github actions 在 npm install 時發生了錯誤

1
2
3
4

npm ERR! code 1
npm ERR! path /home/runner/work/portfolio/portfolio/node_modules/node-sass
// ...中間太多省略
Error: Process completed with exit code 1.

根據資訊推測是 node-sass 的問題，爬了一下文發現，

在網站上常常會使用到 icon 圖示做為點綴，而現今行動版普及化，響應式網站大多使用縮放都不會失真的 svg 向量圖檔，來獲得最佳的視覺體驗。網路有很多的插件內建 svg 圖示可以做為字型使用，例如 fontawesome 使用上就很方便快速，不過有時候想要自行定義圖示，或是只有用到少數的 icon，不想載入太大包檔案，這次要介紹的就是可以自行客製 icon 的 icoMoon

上次被後端問了關於 Header 的問題，發現我對這 HTTP 的知識薄弱，實在慚愧🥺，馬上上網科普一下，
好在找到了偷米騎巴哥大大分享的直播影片，以下是從影片內容裡整理的資料，筆記記錄一下

有時候我們在開發專案時，會遇到開發環境跟正式環境資料不一樣的狀況，比較常見的就是域名不同，
最近我遇到的需求是，上正式站時，某個連結網址要換成正式站網址，但開發環境要用測試連結，那我們可以怎麼做呢?
像這種時候，可以使用環境變量，簡單解決各個環境的問題。