Page 5

简报符号

Slidev:基于网页的简报创作方案

近期工作研究到使用 Slidev 来呈现简报,一个基于 Vite + Vue3 的简报工具整合了大大小小的套件方便用网页创作简报,主要以 Markdown 来撰写内容,这样的方式让我们可以专注在内容上,而不用花太多时间在花俏的简报软体操作。

簡報符號

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

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

清单符号

使用 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 年!