Categories
圖片
docker
身份驗證 Auth
軟體工程師
資料結構 Data Structure
About
JavaScript
Node.js
前端工程師
後端工程師
CSS
CSS Framework
網路廣告
網路行銷
HTML
Cheesheet
Svelte
JavaScript Framework
Vue.js
程式專案管理
Chrome extension
單元測試
Mac
生產力
MySQL 8
輸入法
Linux
Terminal
Ubuntu
Windows 10
wsl
Nginx
剪映
影片字幕建立
聲音轉字幕
PotPlayer
Video Screenshot
影片截圖
影片聲音擷取
iPad
Magic Eraser
修圖
Procreate
Database
SQL
OBS
VSCode
MacOS
Windows
Gitlab
docker-compose
MySQL

Test
2024
【Laravel】Intervention Image v3 圖片套件圖片處理範例:參數、圖片 Meta 資訊、resize 圖片縮放、scale 圖片等比例縮放、cover 裁切合併、crop 裁切、brightness 亮度、contrast 對比、gamma 校正、colorize 顏色校正、greyscale 灰階、flop 左右鏡像翻轉、flip 上下鏡像翻轉、rotate 旋轉、blur 模糊、invert 顏色反轉、pixelate 像素化、reduceColors 減少顏色數量、quality 品質

【Docker】解決「zsh: command not found: docker-compose」 找不到 docker-compose 指令問題

【身份驗證 Auth】JWT Token 記住登入帳號 Remember Me:使用 JWT Token Refresh Token 機制、JWT Token 效期過長安全性問題、JWT Token 加入 remember_token、remember_token 安全性

【身份驗證 Auth】記住登入帳號 Remember Me:一般登入流程、帳號登入必要條件、Session 限制、記住登入帳號、remember_token 安全性、Laravel 記住登入範例

【資料結構 Data Structure】Binary Tree 二元樹:Heap 堆積、Heap 結構、Max Heap 比較流程、Min Heap 最小堆積、Max Heap 最小堆積、時間複雜度 Time Complexity

【資料結構 Data Structure】Binary Search Tree(BST)二元搜尋樹:定義、Depth First Traversal、Breadth First Traversal、時間複雜度 Time Complexity

【資料結構 Data Structure】Linked List 鏈結串列:Singly & DoublyLinked List 定義、Linked List 優點、Array 和 Linked List 的差異

【資料結構 Data Structure】Array 陣列:Stack 堆疊 & Queue 佇列

【Localization 在地化】Language Code 語系代碼:ISO & ISO 639-1 語言代碼表

【Localization 在地化】Country Code 國家代碼:電話代碼、ISO CODE 完整代碼表

【JavaScript 時間套件】moment.js: 輸出格式設定、變更語系及輸出格式技巧、人類可閱讀相對時間格式

【JavaScript HTTP 套件】Axios API 請求:CORS 請求、Instance、Debug 除錯模式、錯誤處理、設定檔

【網路廣告】Google Adsense 與 Google Ad Manager 差異在哪,要怎麼選擇?怎麼用網路廣告在網站或部落格開始賺錢,對廣告進行更精細化管理提高收入

【CSS Framework TailwindCSS】Cheetsheet: Backgrounds, Spacing, Sizing, Typography, Borders, Flexbox & Grid, Layout, Effects

【CSS Flex】比較不同的 flex 容器屬性: display, flex-direction, flex-wrap, flex-flow, justify-content, align-items, align-content

【HTML 特殊字元】拉丁、間隔修飾、變音、希臘字母、西里爾字母、常用標點、貨幣、字母、箭頭、框線、區塊元素、幾何圖形、雜項、印刷、表情、笑臉表情、膚色表情

【CSS 圖片】比較不同的 CSS 圖片大小 & 位置屬性: sobject-fit, object-position, background-size, background-position

【Svelte 檔案】使用 SheetJS 載入 Excel檔案,監聽 input file 檔案上傳事件

【Svelte Store】解決編譯錯誤訊息「Error: localStorage is not defined」與 localStorage 同步儲存資料

【JavaScript Cheesheet】Import, Export 等價表示式

【JavaScript Cheesheet】ES6

【程式專案管理】Functional Programming 函式編程

【JavaScript Vue.js】生命週期 Life cycle

【JavaScript Vue.js】檔案匯入匯出 Import / Export

【CSS 原理】大小 Size

【CSS Framework TailwindCSS】概念 Concept

【CSS Framework TailwindCSS 設定】tailwind.config.js 完整設定檔說明

【Node.js Http】建立 http server

【JavaScript 核心原理】Stack 堆疊 / Queue 佇列 / Heap 堆

【JavaScript 核心原理】hoisting 提升

【JavaScript 壓力測試】使用內建函式、chrome devtool 進行壓力測試

【JavaScript 函式】常用函式:console 除錯

【JavaScript 函式】Prototype 原型

【JavaScript 函式】Promise / Async / Await

【JavaScript 函式】IIFE 立即執行的函數 (Immediately Invoked Function Expression)

【JavaScript 函式】function expression(函式陳述式) VS declaration (函式運算式)

【JavaScript 函式】Currying 柯里化

【JavaScript 函式】Closure 閉包

【JavaScript 事件】event loop 事件迴圈

【JavaScript 事件】Emitter 事件函式

【JavaScript 變數】記憶體管理 Memory Management

【JavaScript 變數】記憶體洩漏(memory leaks)

【JavaScript 變數】淺拷貝 (Shallow Copy) 與深拷貝 (Deep Copy)

【JavaScript 變數】型別轉換 Type Transform

【JavaScript 變數】Primitive types vs objects 原生型態與 object 比較

【JavaScript 變數】immutable (可變的) 與 immutability (不可變的)

【JavaScript 變數】Delete 刪除變數釋放記憶體

【Node.js 檔案】所有檔案函式、檔案例外處理、同步處理檔案、串流讀寫檔案

【JavaScript 模組】匯出模組、匯出部分函式、匯出函式並重新命名

【JavaScript 時間】時間時區轉換

【JavaScript HTML】HTML DOM Elememnts 元素:尋找、事件、比較、Class 類別操作方式比較

【JavaScript 變數】變數類型介紹:函式 Function、箭頭函式

【JavaScript 變數】變數類型介紹:this 物件

【JavaScript 變數】變數類型介紹:String 字串

【JavaScript 變數】變數類型介紹:Set

【JavaScript 變數】變數類型介紹:Object 物件

【JavaScript 變數】變數類型介紹:Number 數字

【JavaScript 變數】變數類型介紹:Math 數學運算

【JavaScript 變數】變數類型介紹:Map

【JavaScript 變數】變數類型介紹:Closure 閉包

【JavaScript 變數】變數類型介紹:Class 類別

【JavaScript 變數】變數類型介紹:Array 陣列

【JavaScript 變數】變數解構賦值,變數資料是如何定義與給予的

【JavaScript 變數】var let const 變數定義方式比較差異

使用 SvelteKit 建立 Chrome extension 套件環境:偵測檔案異動自動編譯,立即看到開發異動的畫面

解決 PHPUnit 出現「Metadata in doc-comments is deprecated and will no longer be supported in PHPUnit 12.」問題

Mac 也能聽寫!在 Mac 使用語音輸入文字,不用再一個字一個字的鍵盤打字了,講的比用手打的還快!如何開啟 Mac 聽寫打字功能

2022
在 Mac 安裝免費版無蝦米輸入法

解決 Cannot connect to the Docker daemon at unix:///var/run/docker.sock. 問題

在 Windows Terminal 打造漂亮好用的 Terminal by powerlevel10k

在 Windows 使用 WSL2 操作 Ubuntu 系統

解決 Nginx -s reload 時,出現 /var/run/nginx.pid failed 的問題

2022 使用剪映 2.6 版本 AI 辨識產生繁體中文字幕

使用 PotPlayer 擷取影片中的截圖

解決 /run/nginx.pid 的 No such file or directory 問題

解決 Nginx conflicting server name 問題

使用 PotPlayer 擷取影片中的聲音

2021
在 iPad 使用 Magic Eraser 替圖片去背

在 iPad 使用 Procreate 替圖片去背

SQL Select 撈取順序

OBS 提升錄音聲音品質

VSCode 的 Code Helper (Renderer) 導致 CPU 使用過高,風扇起飛

在 MacOS 使用 nvm 安裝 Node 環境

在 Windows 使用 nvm 安裝 Node 環境

使用 Gitlab page 建立私密的靜態部落格網站

docker crontab 定期排程執行程式

docker compose build 映像檔名稱

打造漂亮好用的 Terminal by powerlevel10k

Welcome to emergency mode on Ubuntu 16.04,無法正確 mount 硬碟
