建構正確的網頁 UI 不應該是個麻煩的問題
身為前端工程近期工作的感悟是很多時候開發問題還是陷於介面的外觀、行為或互動層面上,並不是說花時間製作這些層面的事情就很遜,它們實際需要依靠經驗豐富的開發者透過多方面的研究與考量才能打造合理的架構,例如有許多要留意的事:效能、適用性、可維護性、可測試性、搜尋引擎最佳化、跨平台相容性、多語系……
身為前端工程近期工作的感悟是很多時候開發問題還是陷於介面的外觀、行為或互動層面上,並不是說花時間製作這些層面的事情就很遜,它們實際需要依靠經驗豐富的開發者透過多方面的研究與考量才能打造合理的架構,例如有許多要留意的事:效能、適用性、可維護性、可測試性、搜尋引擎最佳化、跨平台相容性、多語系……
AI 並不會離開我們的生活,並且只會越來越普及,這也意味著我們的生活將受到影響。什麼事情是人類能 AI 不能的?未來的工作會是怎麼樣?人們能做什麼來保證未來?什麼事情是人類能 AI 不能的?未來的工作會是怎麼樣?人們能做什麼來保證未來?思考以上問題。
Manual testing has issues like unstable results and is time-consuming. Let’s try using Lighthouse CI for automated performance checks!
Lighthouse 是一款开源的自动化网页性能检测工具,通常在遇到网页性能问题时才逐个打开网页测试,手动测试总是会有:单次的测试结果不稳定、耗时费力、不利于团队开发的问题,今天来尝试使用 Lighthouse CI 自动化在每次代码更动时检测网页的性能问题吧!
Lighthouse 是一款開源的自動化網頁效能檢測工具,通常都是遇上網頁效能問題才一個一個開網頁開來測試效能,手動測試總是會有:單次的測驗結果不穩、耗時費力、不利於團隊開發的問題,今天來嘗試使用 Lighthouse CI 自動化的在每次代碼更動時檢測網頁的效能問題吧!
Give your site a custom search powered by WebAssembly. With the release of Pagefind 1.0, I replaced my custom fuse.js search with Pagefind.
不到 3 步骤让你的网站拥有以 WebAssembly 高效驱动的客制化搜寻功能。静态网站像是部落格、文件、个人网站、公司网站……等这类阅读体验为主的网站通常都有搜寻内容的需求,恰逢 Pagefind 1.0 的推出我把原先自制的fuse.js 搜寻功能换成Pagefind,分享如何在任何静态网站上加入搜寻功能。
不到 3 步驟讓你的網站擁有以 WebAssembly 高效驅動的客製化搜尋功能。靜態網站像是部落格、文件、個人網站、公司網站……等這類閱讀體驗為主的網站通常都有搜尋內容的需求,恰逢 Pagefind 1.0 的推出我把原先自製的 fuse.js 搜尋功能換成 Pagefind,分享如何在任何靜態網站上加入搜尋功能。
近期工作接觸使用 Shadcn for Vue 來打造網頁 UI,這是一款基於 Tailwind 可彈性客製化的元件組合,讓我們可以快速建立出符合需求的網頁介面。這篇文章將會介紹現有樣式庫的問題以及 Shadcn UI 的特色,以及為什麼在前端圈這麼火爆。
表單是是網站中最常見的功能性元素也是與用戶溝通的橋樑,像是購買商品、註冊會員、問卷填寫……等各項行動都離不開它,然而這麼重要的體驗卻時常被忽略,於是我決定整理一個良好的表單應該具備的體驗以及為什麼應該這樣設計,供所有人了解常見的表單設計問題。
JavaScript has try...catch syntax for capturing errors. How can we ensure the type of errors thrown in TypeScript?
Zod is a schema declaration and validation library led by TypeScript. The purpose of Zod is to easily write runtime data validation.
JavaScript 有 try...catch 语法用于捕捉程序中的错误情境,在需要时使用 throw 语法来抛出「任何错误」,通常建议会抛出 JS 默认的错误对象,但在 TypeScript 要怎么做才能确保抛出的错误的类型?
Zod 是以 TypeScript 为首的 Schema 声明和验证库,为什么有了 TypeScript 还需要 Zod?轻易的撰写运行时数据验证就是 Zod 的目的,像是验证第三方 API 传递的数据、用户输入在 URL 中或表单中的数据使用 Zod 来验证都很方便。
JavaScript 有 try...catch 語法用於捕捉程式中的錯誤情境,在需要時使用 throw 語法來拋出「任何錯誤」,通常建議會丟出 JS 預設的錯誤物件,但在 TypeScript 要怎麼做才能確保拋出的錯誤的型別?