Page 7

检测性能符号

通过 Lighthouse CI 自动化检测网站性能

Lighthouse 是一款开源的自动化网页性能检测工具,通常在遇到网页性能问题时才逐个打开网页测试,手动测试总是会有:单次的测试结果不稳定、耗时费力、不利于团队开发的问题,今天来尝试使用 Lighthouse CI 自动化在每次代码更动时检测网页的性能问题吧!

檢測效能符號

透過 Lighthouse CI 自動化檢測網站效能

Lighthouse 是一款開源的自動化網頁效能檢測工具,通常都是遇上網頁效能問題才一個一個開網頁開來測試效能,手動測試總是會有:單次的測驗結果不穩、耗時費力、不利於團隊開發的問題,今天來嘗試使用 Lighthouse CI 自動化的在每次代碼更動時檢測網頁的效能問題吧!

文章搜寻符号

使用 Pagefind 替任何静态网站添加搜寻功能

不到 3 步骤让你的网站拥有以 WebAssembly 高效驱动的客制化搜寻功能。静态网站像是部落格、文件、个人网站、公司网站……等这类阅读体验为主的网站通常都有搜寻内容的需求,恰逢 Pagefind 1.0 的推出我把原先自制的fuse.js 搜寻功能换成Pagefind,分享如何在任何静态网站上加入搜寻功能。

文章搜尋符號

使用 Pagefind 替任何靜態網站添加搜尋功能

不到 3 步驟讓你的網站擁有以 WebAssembly 高效驅動的客製化搜尋功能。靜態網站像是部落格、文件、個人網站、公司網站……等這類閱讀體驗為主的網站通常都有搜尋內容的需求,恰逢 Pagefind 1.0 的推出我把原先自製的 fuse.js 搜尋功能換成 Pagefind,分享如何在任何靜態網站上加入搜尋功能。

愛心符號

什麼是 Shadcn UI?為什麼在前端圈這麼火爆?

近期工作接觸使用 Shadcn for Vue 來打造網頁 UI,這是一款基於 Tailwind 可彈性客製化的元件組合,讓我們可以快速建立出符合需求的網頁介面。這篇文章將會介紹現有樣式庫的問題以及 Shadcn UI 的特色,以及為什麼在前端圈這麼火爆。

一隻手操縱觸控板符號

如何正確的設計表單?必須知道的用戶輸入 UX 基礎

表單是是網站中最常見的功能性元素也是與用戶溝通的橋樑,像是購買商品、註冊會員、問卷填寫……等各項行動都離不開它,然而這麼重要的體驗卻時常被忽略,於是我決定整理一個良好的表單應該具備的體驗以及為什麼應該這樣設計,供所有人了解常見的表單設計問題。

警戒符号

如何处理 TypeScript 抛出的错误?

JavaScript 有 try...catch 语法用于捕捉程序中的错误情境,在需要时使用 throw 语法来抛出「任何错误」,通常建议会抛出 JS 默认的错误对象,但在 TypeScript 要怎么做才能确保抛出的错误的类型?

容器装载惊叹号符号

使用 Zod 于运行时检验类型

Zod 是以 TypeScript 为首的 Schema 声明和验证库,为什么有了 TypeScript 还需要 Zod?轻易的撰写运行时数据验证就是 Zod 的目的,像是验证第三方 API 传递的数据、用户输入在 URL 中或表单中的数据使用 Zod 来验证都很方便。

警戒符號

如何處理 TypeScript 拋出的錯誤?

JavaScript 有 try...catch 語法用於捕捉程式中的錯誤情境,在需要時使用 throw 語法來拋出「任何錯誤」,通常建議會丟出 JS 預設的錯誤物件,但在 TypeScript 要怎麼做才能確保拋出的錯誤的型別?

容器裝載驚嘆號符號

使用 Zod 於 Runtime 檢驗型別

Zod 是以 TypeScript 為首的 Schema 聲明和驗證庫,為什麼有了 TypeScript 還需要 Zod?輕易的撰寫 Runtime 資料驗證就是 Zod 的目的,像是驗證三方 API 傳遞的資料、用戶輸入在 URL 中或表單中的資料使用 Zod 來驗證都很方便。

两个人相互沟通符号

达成共识的描述方式:目标、问题、解方

最近阅读 Stay SasSy 提到的 Goals, Problem, Solutions 猛然察觉这不是我日常工作拆分问题的方式吗!简直是不谋而合,正好也想写一篇文章来分享这个达成共识的方法,同时这也是一个很好向上沟通的方式,不管是对团队还是对上级沟通都有帮助。