第 1 頁

溫度計符號

為什麼要替軟體進行測試?

近期我對自己看待撰寫程式這件事有更高的期許,除了最基本的效能、閱讀性、擴充性……之外還有一個非常重要的領域就是:測試。不過程式好端端的能動就代表測試沒有必要了嗎?在我剛工作時實際上做了一段時間的自動化 QA 工程一段時間,不過那時候的我其實也並不明白寫測試的原因,就是有程式就拿來自動化測試,並沒有想太多。

箱子符號

了解 ES6 JavaScript 當中的內建資料結構: Map

JavaScript ES6 中有一個用法與物件近似的資料結構我一直不是很清楚用途。 —— Map,這篇文章會主要拿熟知常見的物件與 Map 來做比較以分辨出 Map 的特性與使用時機。總結來說可以把 Map 當作是用來頻繁讀寫的物件,它具備更好的性能、更明確的語法。

不高興表情符號

為什麼專案時間預估這麼難?具體可以如何解決時程預判問題

發現身為初階打工人其實通常只是看見問題並拼命解決它,但換個角度思考:「如果現在手上專案燒起來,主管定個超乎預期的時程但你也沒有自己一套說法,要如何交代?」,最貼近實作的人其實是最能開出真實預估的人。參考:The work is never just “the work” - Dave Stewart 文章。

層級符號

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

近期執行的專案在進行翻新包含了整體的視覺設計,因此前端也面臨要如何同步管理產品視覺的問題。先說痛點,先前專案並沒有具體的規範應該如何定義 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),但分析下來我認為實踐這個需求並不是一項划算的選擇,這篇文章將會討論為什麼我會這樣認為。如今許多網站和應用程式預設都提供了深色模式,這是一種將背景色轉為深色,前景色轉為淺色的設計手段,具備各種功能性和情感上的特點,例如:節省裝置電力、降低眼睛疲勞……