簡報符號

Slidev:基於網頁的簡報創作方案

近期工作研究到使用 Slidev 來呈現簡報,一個基於 Vite + Vue3 的簡報工具整合了大大小小的套件方便用網頁創作簡報,主要以 Markdown 來撰寫內容,這樣的方式讓我們可以專注在內容上,而不用花太多時間在花俏的簡報軟體操作。

清單符號

使用 Details 與 Summary 製作原生手風琴 (含收合動畫!)

手風琴是一種常見的網頁 UI 模式,通常是一系列垂直堆疊的標題可以用於展開收合顯示不同資訊,在 HTML 當中有項新穎的語法 <details> 和 <summary> 可幫助快速實現類似的功能,並且配合上最新的 interpolate-size 和 transition-behavior 製作滑順的展開閉合動畫。

下載符號

使用 preload、prefetch、dns-prefetch、preconnect 最佳化資源載入順序!

先前面試時面試官詢問到我早期製作的一個 SPA 網站在換頁後圖片載入體驗不太好的問題,當時我把腦袋能想的所有答案都提出來了😅,最終有答到一點邊緣知識,但太少用所以回答的不是很確定,因此這次來補齊這方面瀏覽器提供的機制,主要介紹瀏覽器如何處理安排資源的加載。

資料庫符號

後端入門可以了解的資料庫概念

資料庫就是一個儲存資料的軟體,根據儲存資料性質不同,合適的資料庫種類也會不同。了解 Transaction、ACID、Normalization……等核心概念非常重要。還有更多可以深掘的細節,先單純把學到的知識紀錄一下,未來個別用更多文章詳細描述 :)

人影符號

使用 Express.js Session 實作會員系統

依照先前的教學我們已經可以創建基本的 CRUD 程式,但基於 HTTP 是無狀態的協議,如果單純實作會員系統用戶將會需要在每次操作登入會員相關的行為時重複驗證,明顯是糟糕的使用體驗。一種解決方案是在請求時伺服器將會建立 Session。

星星符號

如何架構一個超讚的前端專案於 2025 年 (feat. Vue)

隨著前端演進,我們時常需要依靠現成的框架輪子協助,而其中 Vue 又是繼 React 外第二熱門且成熟的選項,但很少有教學提到一個完整的專案該如何建構,以及有哪些模式可以遵循。這次來介紹一下如果從頭開始我會怎麼建構一個 Vue 專案,在 2025 年!

打開的書圖示

Express.js 串接 MySQL 實作書本管理 App

先前系列提到使用 Express.js 簡單的創造一個 CRUD App 並用 MVC 分層,這次流程差不多,目標是把後端接上本地的 MySQL 伺服器並使用 MySQL2,一個專為 Node.js 應用設計的 MySQL 資料庫連接工具。

更新符號

撰寫自動化發布語意化版本 TypeScript NPM 套件

使用套件時總是會好奇一般管理套件開發的流程是如何?我透過 Matt Pocock 的 Blazing Fast Tips: Publishing to NPM 教學影片順手實作了一次,並且把自己之前遇過的需求寫成一個獨立的 TS 套件公開發布:edit-element。

重疊的抽象幾何線條符號

Express.js 入門建構 MVC 範例

Express 提供便捷優雅的 API 讓我們接收請求經過處理後回應,但會發現隨著規模龐大起來路徑、商業邏輯、資料……等代碼都塞在一個 app.js 實在不是一個好做法,於是這篇文章介紹使用 MVC 架構替代碼進行用途上的切割,以方便維護。

打勾圓圈符號

Express.js 入門造個簡單的增刪查改待辦事項

近期正在學習後端相關領域,與前端最貼近的框架絕對就是 Express.js 了,很適合目標為全端的工程師,因為可以使用單一語言最快接觸到兩種領域。這次實作並不會牽扯到資料庫相關的部分,侷限在使用 Express.js 打造一個簡單的 in-memory 代辦事項後端伺服器,熟悉一下開設增刪查改相關 API。

無障礙符號

前端需要知道的無障礙網頁

近期看到 Web Dev Simplified 推出的教學促使我趕緊打開這篇文章記錄其中提到的網頁無障礙需要留意的地方,並且補充上一些我自己實驗有幫助的資訊。無障礙一直是我想重視但實際開發時優先順序總是排在最後的要求,差勁的無障礙對某些使用者來說會嚴重影響到網頁互動的體驗,身為前端讓網頁保持良好的無障礙是基本責任。

GitHub Logo 符號

如何編寫 GitHub 個人檔案

「如何編寫 GitHub 個人檔案」這個問題其實就像是「開發者怎麼製作自己的名片」,畢竟對你感興趣的人來說 GitHub 個人檔案就是第一印象,所以可以斟酌放些「你熱愛參與的專案或展示專業」基本不會錯。像我有熱情持續經營展現技術部落格那就放上最大篇幅去介紹,把作品、部落格或履歷放上。

一個人坐在座位上符號

CSS Grid 與表單實作電影院座位選位系統

之前碰到一道有趣的前端 UI 題,發現需要對於前端有較為全面的認知才有辦法解出來,並且也可以針對感興趣的領域延伸提出更更多問題,於是特地紀錄一下我的思考解題過程。身為一名前端工程師,你會怎麼實作上圖的電影院座位選位系統?