前端三分鐘

一起用三分鐘分享技術與知識

前端模組化與打包工具 (Webpack、Rollup、Parcel)

從把妹角度理解前後端如何和平相處

模組可以理解是在情場小白在跟女孩相處的過程中卻意外擁有把妹高手前同事提供的 “教戰守則”,同事總會在一些時間、情境時告訴你一些小撇步讓男女之間感情升溫。 打包工具則是在這些 “鍛鍊” 的過程中,讓 “教戰守則” 能夠自然且最佳化的融入到自身進而能夠靈活的運用。 模組化載入封裝元件最簡單的方式是透過 IIFE 和 Module Pattern 來產生元件模組。 在網路上一篇關於模組化載入 的文......
me
林彥成
2022-10-05 | 3 min.

Monorepo 和 Polyrepo

從把妹角度理解前後端如何和平相處

在版本控制系統中 Monorepo 和 Polyrepo 分別是兩種用來管理模組化程式碼的軟體開發策略。 以男女之間來說,就像是金錢是要分開管理 (Poly) 或是一起管理 (Mono),即使一起管理是單純全部丟在一起 (Monolith) 還是有做簡單的分類 (Monorepo) 像是個人花費和公共花費等等。 👉 小編點評: 該分開就早點分開,這個道理在哪似乎都適用 接下來這篇文章以前後......
me
林彥成
2022-10-03 | 4 min.

前後端分離或在一起 (CSR 與 SSR)

從把妹角度理解前後端如何和平相處

前後端分離或是在一起間接影響網頁渲染的方式,常見的渲染形式會有用戶端渲染 (CSR) 和伺服器端渲染 (SSR) 兩種。 這就好像男女朋友是否同居一樣,會大大影響兩人的日常生活型態,分開時兩者的自由度都較高,在一起同居時總會需要考慮彼此狀態。 前後端要分離或是在一起? 渲染的方式該怎麼決定? 小編覺得也各自有各自的優缺點,接下來就來開箱 CSR 跟 SSR 吧。 Client Side Re......
me
林彥成
2022-10-02 | 4 min.

前任物品斷捨離 X 專案資料夾架構與收納

從把妹角度理解前後端如何和平相處

專案資料夾架構今天談談專案資料夾的結構,在還沒開始寫任何程式前,可以思考的是檔案要怎麼收納。 不知道各位情場高手都怎麼收納前男友或前女友們的禮物呢? 是按照物品種類來分類? 還是依照對象來分類? 或是直接丟掉? 隨著數量上升後管理的難度也會上升,以小編這幾年看過不少專案的經驗下來,覺得程式碼也跟收納一樣分成兩種流派 按照屬性分類 按照功能分類 接下來就讓我們看看兩種收納的差別吧! 屬性分......
me
林彥成
2022-09-30 | 5 min.



Git 時光機 X 專案協作與開發指南

從把妹角度理解前後端如何和平相處

Git 版本控制Git 本身是一個分散式 (一個遠端和很多本地端) 的版本控制工具,會把每次提交的內容 (commit) 用快照透過校驗碼標示並儲存起來,校驗碼概念上可以當成車廂號碼,告訴可以查看車廂中的檔案及狀態。 實際比較像資料結構中的 Linked List 透過改變指標回到某個狀態也可以自由的切割和移動節點。 本日結果 -> 昨日結果 -> 前日結果 紀錄每個提交的項目主......
me
林彥成
2022-09-29 | 6 min.

語意化版本透露什麼訊息

從把妹角度理解前後端如何和平相處

當我們使用 JavaScript 開發時,常常會需要使用 npm 進行 node_modules 的安裝,相關的使用說明可以參考前一篇寫的 NPM 常用指令教學。 在時間管理大師的世界裡,記住曾經和每個對象的回憶跟說過的話是很重要的,隨著對象越多就越有可能在某天踢到鐵板?! 如果對象與對象之間的相似性和重疊性越高,就可能面臨不敢改變的風險,譬如工作譬如興趣譬如作息譬如說過的情話,隨著時光飛逝......
me
林彥成
2022-09-28 | 3 min.

npm 入門到進階X常用指令與版本規則教學

從把妹角度理解前後端如何和平相處

npm 介紹什麼是 npm? npm 是 Node Package Manager 的縮寫,是 Node.js 預設的 node 套件管理平台,npm 本機端的相關工具在安裝 node.js 時也會一起安裝,另一套 Package Manager 本機端工具則是 Facebook 推出的 Yarn。 套件做到的事就是別人已經研究過的東西我們可以不需要再研究一次,就像增加魅力的日常穿搭或是實用......
me
林彥成
2022-09-27 | 4 min.

定義屬於你的風格 X VS Code Extensions X ESLint X Prettier

從把妹角度理解前後端如何和平相處

VS Code ExtensionsVSCode 的市集提供了相當多的 Extensions 能增進工程師的開發效能,Extensions 就像把妹神器,會幫你產出撩妹金句、決定今日穿搭 OOTD、推薦節日可以吃的餐廳或可以送的禮物。 以程式開發來說,各種語言的 Extension Pack,能快速協助我們進行相關語言的開發 React Extension Pack Node.js Ext......
me
林彥成
2022-09-26 | 3 min.