前端想弄懂的 Dockerfile & Docker Compose 實作

2021-07-05# DevOp

繼上一篇 Docker Container 架構的說明,這一篇要來討論 Docker 實作,並實際實作幾個自己會用到的 Container,同時也會從指令開始了解這些檔案是怎麼設定的。

繼續閱讀

前端想弄懂的 Docker Container

2021-07-05# DevOp

因為最近 Side Project 增加,常常都要一條龍而且環境也都不盡相同,決定花一點時間了解 Docker,結束原本都只會 docker compose up 的狀態。Docker 是一個基於 Container 的封裝環境工具,為什麼會需要這樣的工具?又為什麼會有 Docker 誕生,就要先來看看從以前到現在是怎麼去部署一個服務。

以下內容非常的長,如果只想要了解 Docker 怎麼操作可以從 Docker 第一步開始閱讀。

繼續閱讀

用 Notion API 搭配 Gatsby 打造部落格

2021-06-01# front-end

由於原先在 Local 端搭配 Markdown 來進行編輯部署的方式讓寫作這件事有些麻煩,於是希望可以有個 CMS 工具管理自己的文章,以便調整一些 meta 資訊,主要嘗試了 Ghost 與 Notion API 這兩種方案,最終決定使用 Notion API。

以下分享關於 Source Notion API Plugin 的一些使用心得。

繼續閱讀

最小可行的 Vue Component Library

2020-12-26# front-end

最近工作上開始規劃 Design System 啦(撒花)但人人都沒有 Design System 的經驗 TAT,決定從巨人的肩膀上開始學習,所以先從分析各大公司 Design System 的 Vue Component Library 跟 Front End Master 的新課程 Desgin System with React。

繼續閱讀

狀態管理與 XState

2020-03-18# front-end

如果現階段剛踏入前端的話,第一次接觸到狀態可能已經是在狀態管理體系已經很成熟的時候了。

狀態管理裡面的各種議題被打包成一系列的技術棧,以自己最熟悉的 React - Redux - Redux Observable 方案來說,分別就在處理狀態轉 UI、跨元件與把控狀態流的狀態管理到非同步狀態這些都會被稱作狀態管理工具,這讓我開始思考什麼是狀態?以及 xState 的應該用在哪裡?

繼續閱讀

不使用 Stater 建置 Gatsby Blog

2020-02-13# front-end

醞釀要開一個部落格很久,卻遲遲沒有勇氣,但眼看一年都已經到了六月這樣不行 ...... 就慢慢的把之前零零碎碎的筆記寫成一篇篇文章。

而當然也包含半年前,心血來潮的看到 Gatsby 這個新的架構,心裡想著:「如果可以使用 Component 的話是不是就可以做出很多很酷的資料視覺化文章了!」的初衷,開始使用 Gatsby 將這個部落格的心得記錄。

繼續閱讀

深入 CSS Display & Position

2020-01-15# front-end# css

CSS 大概是前端工程師的切版日常風景之一,雖然現在已經越來越多成熟的 CSS 預處理、或 Design System 打包好 Component Library,但 CSS 還是入門前端的時候的必經之路。

但每每提到切版的時候,都會有一種切版像是在鑽 CSS 的漏洞,各種 CSS tricks 跟 hack 讓人防不勝防,也讓不少前端工程師產生 CSS 可能是最簡單也最困難、像是蛋炒飯一樣的語言。

於是想要來深入研究一下這個每天都會使用到的 CSS 排版基礎屬性:Display 跟 Position 的原理到底是什麼?

繼續閱讀

思考設計思考的工作坊 - 一次質問的旅程

2018-12-15# design

前陣子一個籌備了兩個多月的清大服科所設計思考工作坊終於在 2018 年 12 月 9 日落幕,舉辦工作坊對我來說已經不僅僅只是一次推廣,而是對我三年以來對設計的質問、回顧與再出發,也希望打破大家對於設計思考工作坊的想像,而這一切都要從一句質問開始:

繼續閱讀