第 2 頁

層級符號

具體來說可以怎麼建立與管理產品的設計令牌或變數

近期執行的專案在進行翻新包含了整體的視覺設計,因此前端也面臨要如何同步管理產品視覺的問題。先說痛點,先前專案並沒有具體的規範應該如何定義 UI 當中的數值,導致魔法數字(沒有規範與描述的值)流竄於整個產品當中,造成了非常大的的困擾。我會解釋得盡量具體明白如果要重新設計一款數位產品會怎麼管理其中的數值。

格線符號

如何透過 CSS Grid 讓元素跳脫容器

為了確保頁面內容保持在合理的範圍內,很多時候會需要在外層使用固定的尺寸作為網頁內容的容器。而近期在翻新的頁面有一些獨特的布局樣式,透過 CSS Grid 來更靈活的讓容器內容也能跳脫安排在各處,主要參考 Kevin Powell 的做法。

選色器符號

用正確的方式製作深色模式(或任何網站風格)

先前提到「添加深色模式要考慮的代價」無可避免的會增加比預想中還要多的成本,但如果能在一開始用正確的方式製作網頁風格,那麼可以有效的避免掉許多問題。如果你希望製作不同風格的數位產品都可以參考本篇文章,用更省力的方式定義風格。

奔跑的人符號

擁抱低效率的一天

經營這個部落格時我逐漸養成了「不管再忙也要推新進度上來」的習慣,不管是寫文章、小短文、找題材、修復 BUG 推新功能……總之每天都要盡量以讓部落格更好這個方向努力進而強制自己去精煉思考。這種生產力非線性與專注在目標大方向的概念幫助我建立了不少習慣。

文件符號

如何達成更為流暢的代碼審核?

開發至今從來都沒有特別去了解如何好好的執行代碼審核,大家都默認會寫代碼就代表你也有能力去審核別人代碼,但我想這是一門額外的學問,因而促使我寫下這篇文章去了解如何進行代碼審核。審核代碼是最直接可以發掘並改善問題的環節,主持得當的代碼審核能夠補足團隊成員間的知識盲區進而提升整體代碼水平。

死掉的人臉表情符號

逐漸凋零的瀏覽器引擎前綴

瀏覽器引擎前綴是為了讓開發者在瀏覽器尚未正式支援的情況下先使用這些前綴來實現一些新的 CSS 特性,甚至當時還時常會使用 PostCSS 這類預處理器的 autoprefixer 插件來預處理 CSS 添加上這些前綴。近期發現需要前綴的屬性越來越少,未來也大機率不會再有新的前綴被加入了。

上傳檔案圖示

我如何使用 Git LFS 來託付大型 Git 檔案?

Git 允許我們紀錄任何檔案的變更,並且可以輕鬆地回溯到任何一個版本,但是當需要儲存大型檔案時 Git 就會顯得力不從心,因為 Git 並不是為了儲存大型檔案(圖片、影片、音樂……等二進制檔案)而設計的。而這次介紹的 Git Large File Storage 是 Git 的擴充,專門用於解決以上問題。

GitHub Logo 符號

3 招提高 GitHub 代碼審查效率

如今 Git 與 GitHub 已經成為業界主流,有很大機率你的專案也會使用到它們來進行版本控制,但由於 GitHub 是一款基於 Git 附加的服務,所以我們時常會輕視它的功能,其實 GitHub 有許多不錯的功能卻不是那麼明顯,因此主要分享一些我認為有用但日常使用沒有查覺到的功能。

升級符號

來看看 Nx 如何解決套件框架更新的問題 - nx migrate

近期將公司的新 Nx Monorepo 架構專案透過 GitHub Action 添加了自動更新套件的功能,會想實踐該功能是因為舊專案疏於更新導致吃了非常多的苦頭,希望在新架構下可以有更輕鬆且自動化的方式去執行更新。其中 Nx 有專屬的 nx migrate 指令幫助我們達成這件事,並且背後有些非常有趣的機制與理念。

深色模式符號

添加深色模式要考慮的代價

近期維護的專案希望導入深色模式 (Darkmode),但分析下來我認為實踐這個需求並不是一項划算的選擇,這篇文章將會討論為什麼我會這樣認為。如今許多網站和應用程式預設都提供了深色模式,這是一種將背景色轉為深色,前景色轉為淺色的設計手段,具備各種功能性和情感上的特點,例如:節省裝置電力、降低眼睛疲勞……

警告符號

@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 專案,一些不應該出現的反模式其實都可以在早期被輕鬆避免,當專案規模變大時,這些反模式就會變成一個巨大的問題難以修正。這篇文章將會介紹一些我在專案中看到的反模式,並且提醒你千萬不要這麼做!