關於 #前端 的內容

在開始實作後端之前，我們先將原本都集中在 src/App.vue 的程式碼整理一下。這個處理也可以在開發的過程中逐步重構，可以根據現況調整。

透過 Playwright 的 Mock API 機制，我們已經有了非常簡單的後端整合機制，接下來我們要繼續加上結帳的按鈕並且模擬成功跟失敗的兩種情境，讓我們在不依賴後端的狀況下完成一個非常基礎的購物車前端實現。

現階段我們已經具備了新增跟移除商品的機制，然而要跟後端搭配的話就無法避免跟真實的 API 來進行串接，在測試環境中就不會那麼好處理。我們可以利用 Playwright 的 Mock API 機制來模擬我們想要的 API 回應。

延續現有的「加入購物車」功能，我們要繼續加入「移出購物車」的機制，因為原本的設計只是單純的滿足計數，這次還需要實現實際存在的商品列表來反應現實狀況。

我們現在已經準備好了可以使用 Cucumber 撰寫功能測試（Feature Test）的開發環境，接下來我們會用前端實作購物車的功能並且測試，然後接續實現後端完成一個具備非常基礎功能的前後端分離專案。

因為 Cucumber 是能夠跨越不同開發環境使用的，因此這次我們會以前端與後端互相搭配的方式進行，在前端的部分採用 Vite 和 Playwright 來進行測試。

最近在準備明年（2024）的連載主題，在實作的時候意外發現自己逐漸習慣「不使用瀏覽器」的狀況下去進行開發，除了比較常用的後端情境之外，連前端也很順利的可以實踐這件事情。

最近在工作上或者跟有在做網站開發的朋友聊天，都剛好會討論到 Bootstrap 這個 CSS 框架。

在業界，我想大部分的公司也大多會以 Bootstrap 為基礎來開發網站，而這幾年網路上可以買到的版型也多以 Bootstrap 為主。

從這些跡象看起來，會使用 Bootstrap 很重要，中間的過程跟原因是什麼呢？

這週的 CSS Weekly 以及幾個前端相關的電子報都提到了叫做 Maintainable CSS 的專案，乍看之下還以為是討論可維護 CSS 專案的文章，沒想到是一種 CSS 框架。

幾年前 Responsive Web Design 和 Single Web Application 開始熱門起來的時候，大家也注意到網站使用的 CSS 逐漸複雜。所以開始有像是 OOCSS、SMACSS、BEM 等等理論出現，綜合來看這些技巧對於維護網站的樣式上都是很有幫助的。

會寫這篇文章是因為 Maintainable CSS 在很多地方上跟我自己使用的方式類似，而我目前採用的則是 SMACSS 跟 BEM 的混合版本，所以就打算來分享一下自己的經驗和技巧。

昨晚公開了畢業製作的官網「遠古神話 - The Lost Mythologies」並且使用了「全景攝影技術」在網站上。

喜歡我們的話請到粉絲專頁幫我們按個讚 XD

沒想到反應還蠻熱烈的，雖然官網目前也只有全景預覽以及 LOGO 而已，不過似乎造成了一點點話題。

那麼，這個效果到底是如何做出來的呢？這篇文章就會簡單的說明。

主要的目標大致上有：

• 順暢的瀏覽
• 清晰的畫面
• 全景圖片的製作