第 2 頁

警告符號

@ts-ignore 與 @ts-expect-error 的使用時機差異

近期在替專案做大型重構,其中就有將技術轉換為 TypeScript 與 Monorepo,途中一些還沒有頭緒如何解決的型別問題,就會使用 `@ts-ignore` 或 `@ts-expect-error` 來先行忽略,但這兩者的使用時機有所不同,這篇文章就來談談這兩者的差異。

節點連接符號

完整介紹 Git 分支策略 feat. Git Flow, GitHub Flow, GitLab Flow, TBD

近期在維護不同規模的專案,想說可以了解一下不同 Git 分支策略的優缺點來替專案選擇適合的開發策略。現階段我最常接觸的是 Gitflow 的方式來進行開發,但發現這樣的策略在小型規模的專案(5 人以下)並沒有這麼靈活好用,恰巧可以在全新的專案上嘗試其他策略。

Tailwind LOGO

絕對要避免的 5 項 Tailwind 反模式

撰寫這篇文章是因為接手過非常反人類的 Tailwind 專案,一些不應該出現的反模式其實都可以在早期被輕鬆避免,當專案規模變大時,這些反模式就會變成一個巨大的問題難以修正。這篇文章將會介紹一些我在專案中看到的反模式,並且提醒你千萬不要這麼做!

鍵盤圖示

我如何選擇自己鍵盤的故事

我是一個物慾非常低的人,日常東西就是用到壞才換新,直到某天常用的薄膜鍵盤壞了才開始尋找新的鍵盤。在挑選新鍵盤的過程中讓我想到選擇鍵盤的一些故事促使寫下這篇文章。作為軟體工程師不外乎每天接觸到的硬體生產力工具大概就是:鍵盤、滑鼠、電腦、螢幕、椅子、筆電、大水杯(喝水非常重要),其中鍵盤絕對是情感最深厚的一個。

複製貼上符號

無聊的 UI 是好的 UX,為什麼現在的網站都長得差不多?

為什麼如今網站大多數都長得差不多,就連體驗也差不多?我們時常會聯想設計網頁是一門富含創意創新的工作,但對使用者來說創新並不全然是一件好事。本篇文章希望引導讀者了解網頁發展的經歷並推導出為什麼「無聊的使用者介面是好的使用者體驗」這個結論。

有驚嘆號的卡片的符號

建構正確的網頁 UI 不應該是個麻煩的問題

身為前端工程近期工作的感悟是很多時候開發問題還是陷於介面的外觀、行為或互動層面上,並不是說花時間製作這些層面的事情就很遜,它們實際需要依靠經驗豐富的開發者透過多方面的研究與考量才能打造合理的架構,例如有許多要留意的事:效能、適用性、可維護性、可測試性、搜尋引擎最佳化、跨平台相容性、多語系……

機器人圖示

在 AI 時代應該如何保障未來

AI 並不會離開我們的生活,並且只會越來越普及,這也意味著我們的生活將受到影響。什麼事情是人類能 AI 不能的?未來的工作會是怎麼樣?人們能做什麼來保證未來?什麼事情是人類能 AI 不能的?未來的工作會是怎麼樣?人們能做什麼來保證未來?思考以上問題。

檢測效能符號

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

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

文章搜尋符號

使用 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 於 Runtime 檢驗型別

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

兩個人相互溝通符號

達成共識的描述方式:目標、問題、解方

最近閱讀 Stay SasSy 提到的 Goals, Problem, Solutions 猛然察覺這不是我日常工作拆分問題的方式嗎!簡直是不謀而合,正好也想寫一篇文章來分享這個達成共識的方法,同時這也是一個很好向上溝通的方式,不管是對團隊還是對上級溝通都有幫助。