Page 1

清单符号

使用 Details 与 Summary 制作原生手风琴 (含收合动画!)

手风琴是一种常见的网页 UI 模式,通常是一系列垂直堆叠的标题可以用于展开收合显示不同资讯,在 HTML 当中有项新颖的语法 <details> 和 <summary> 可帮助快速实现类似的功能,并且配合上最新的 interpolate-size 和 transition-behavior 制作滑顺的展开闭合动画。

清單符號

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

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

下载符号

使用 preload、prefetch、dns-prefetch、preconnect 最佳化资源加载顺序!

先前面试时面试官询问到我早期制作的一个 SPA 网站在换页后图片载入体验不太好的问题,当时我把脑袋能想的所有答案都提出来了😅,最终有答到一点边缘知识,但太少用所以回答的不是很确定,因此这次来补齐这方面浏览器提供的机制,主要介绍浏览器如何处理安排资源的加载。

下載符號

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

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

資料庫符號

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

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

人影符号

使用 Express.js Session 实作会员系统

依照先前的教学我们已经可以创建基本的CRUD 程式,但基于HTTP 是无状态的协议,如果单纯实作会员系统用户将会需要在每次操作登入会员相关的行为时重复验证,明显是糟糕的使用体验。一种解决方案是在请求时伺服器将会建立 Session。

人影符號

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

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

星星符号

如何架构一个超赞的前端专案于 2025 年 (feat. Vue)

随着前端演进,我们时常需要依靠现成的框架轮子协助,而其中Vue 又是继React 外第二热门且成熟的选项,但很少有教学提到一个完整的专案该如何建构,以及有哪些模式可以遵循。这次来介绍一下如果从头开始我会怎么建构一个 Vue 专案,在 2025 年!

星星符號

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

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

打开的书图示

Express.js 串接 MySQL 实作书本管理 App

先前系列提到使用 Express.js 简单的创造一个 CRUD App 并用 MVC 分层,这次流程差不多,目标是把后端接上本地的 MySQL 服务器并使用 MySQL2,一个专为 Node.js 应用设计的 MySQL 数据库连接工具。