原文出處：https://dev.to/lovestaco/good-bye-crud-apis-hello-sync-realtime-postgresql-with-electricsql-1f8j ## API 的混亂：我們的互動是否過於複雜？ Web 應用程式上的每個操作都會觸發一系列網路呼叫。以在 Instagram 等社群媒體平台發佈貼文為例。開啟貼文會觸發 _GET_ API 呼叫，點擊「讚」會觸發 _POST_ API 呼叫，評論會引發另一個 _POST_ API 呼叫。每次互動、每次點擊和每次提交都會從前端到後端發出一串 API 呼叫，以獲取或更新資料庫中的資料。 這種傳統的設定雖然實用，但卻在使用者介面和後端之間堆積了多層互動。每個新增的層都是潛在的故障點、延遲點或瓶頸。對於開發人員和工程師來說，管理這種複雜的 API 可能是一項日常工作。每個 API 呼叫都經過精心設計、測試和維護。時間和資源方面的開銷是真實存在的。 此外，另一端的使用者經常發現自己在等待這些網路呼叫完成，即使只是一瞬間。在速度和即時互動決定使用者體驗的時代，這些微小的延遲可能會累積起來，影響使用者的參與和滿意度。 現在，想像一個可以減少大量 API 呼叫的設置，一個允許與資料庫直接互動、消除延遲和混亂的設置。這就是 _ElectricSQL_ (ESQL) 發揮作用的地方... ## ElectricSQL：消除 API 混亂 ESQL 提出了一種更乾淨、簡化的方法。它與 Postgres DB 一起執行，減少了對多個 API 呼叫的需求。使用 ESQL，評論或投票等操作在瀏覽器本機儲存 (SQLite) 內的專用表中處理，然後與 Postgres 同步。此設定無需呼叫後端 API 將資料儲存到 Postgres，從而減少了通訊層數和相關延遲。前端和資料庫現在可以更直接、更有效率地互動。這簡化了開發人員的工作流程並加快了前端的使用者互動速度。現在讓我們看看這是如何實現的以及內部發生了什麼。 ## 使用 Electric 實現瀏覽器和 Postgres DB 之間的交互  此圖示範了瀏覽器和 Postgres 資料庫之間透過_Electric 服務_進行的通訊路徑。本質上，[Electric Sync Service](https://electric-sql.com/docs/usage/installation/service)，一個[Elixir應用程式](https://elixir-lang.org/)，https://electric-sql.com/docs/intro/active-active 使用者本地資料庫與Postgres之間的資料複製。 瀏覽器透過 [electric-sql](https://www.npmjs.com/package/electric-sql) 函式庫與本機資料庫互動。本地資料庫連接到_Electric服務_，Electric-SQL中有一個衛星，用於與_Electric服務_通信，並用於本地資料庫和Postgres之間的資料複製。 每當本地資料庫或 Postgres 中發生資料變更時，_Electric 服務_ 都會充當衝突解決程序，確保無縫資料複製。此配置無需呼叫 API 來儲存評論或更新等新資料條目，從而簡化了資料互動過程。 繼續閱讀全文 [https://journal.hexmos.com/reduce-apis-using-electric/](https://journal.hexmos.com/reduce-apis-using-electric/)
原文出處：https://dev.to/turculaurentiu91/why-you-should-choose-htmx-for-your-next-project-o7j 在本文中，我們將旨在了解為什麼您下次為 Web 應用程式選擇技術堆疊時應該考慮 HTMX 作為 React 的替代品。我們將研究傳統 HTTP JSON API + React 帶來的複雜性和挑戰，以及如何透過使用 HTMX 輕鬆避免它們。 **注意**：在本文中，我將討論 React，但它可以替換為任何其他前端框架，如 Angular、Vue、Svelte 或 Solid，但我談論 React 是因為它是大多數 Web 的預設技術開發人員預設為。 ### HTMX 到底是什麼 如果您還不知道，[HTMX](https://htmx.org/) 是一個小型瀏覽器 (JS) 庫，它使用一些屬性擴展了 HTML，允許您使用來自伺服器。它還使 HTML 能夠對所有動詞發出 HTTP 請求，而不僅僅是 GET 和 POST。 ## React 解決了什麼問題 React 是一個 JavaScript 程式庫，可協助您透過保持使用者介面與狀態同步來編寫高度互動的應用程式。您告訴它如何渲染給定的狀態，每次更新狀態時，它都會重新渲染（盡可能有效率）UI 以反映狀態變更。 每次狀態發生變化時，您都會通知庫它發生了變化，並提供新的狀態，它將處理 UI 更新。 需要本地記憶體狀態的高互動應用程式的範例可以是您可以在網路上找到的各種文字編輯器（VSCode）之一、拖放看板（如 Trello 或 JIRA）、視訊播放器或聊天室。 什麼不是此類應用程式的範例？您正在建立的待辦事項清單、您正在閱讀的新聞網站、您發布的部落格以及周圍的大多數網站。如果我們看一下 [80/20 規則](https://en.wikipedia.org/wiki/Pareto_principle) >80% 的結果來自 20% 的原因，80% 的結果來自 20% 的努力。 你可以說 80% 使用 React 的 Web 應用程式不需要本地狀態。對於那 20% 需要它的人來說，你可以說它只是應用程式的一小部分（大約 20%），其餘部分只能用 HTML 來表達。 **這些數字是編造的，我沒有任何研究來支持這一點** ## React 也解決了哪些問題，使其被現代網站廣泛採用 HTML 已經過時了。使用 HTML 製作應用程式的舊方法涉及頁面、連結和表單的集合，這些頁面、連結和表單向使用者描述給定資源的當前狀態以及他們可以執行哪些操作來更改它。 每次使用者與資源互動時，應用程式只能重新載入整個頁面以顯示資源的新狀態。 幾年後，FaceBook 推出了 React，這是一個 JS 程式庫，可讓開發人員建立單頁應用程式 (SPA)。導航時不再需要重新加載整個頁面，狀態更新的酷過渡、對用戶的有趣反饋以及其他使 Web 開發人員在其網站中採用 SPA 框架的細節。 ## 複雜性問題  如果你不理解上面的架構，不用擔心，沒有什麼好理解的。我要求 ChantGPT 為我生成它，由於它過於複雜且沒有任何意義，它完美地反映了現代 Web 應用程式目前的預設基礎架構。 一個很酷的程式設計原則是**KISS**，它代表“保持簡單，愚蠢”，或者有些人可能喜歡開玩笑，“保持簡單，愚蠢！” 現代開發人員預設建立 Web 應用程式的當前基礎設施和技術堆疊極其複雜，做了很多不必要的事情，只是因為它很酷！ 當您自己建立第一個 POC 時，效果很好，但下一刻您加入了更多團隊成員，並且使用多次迭代和「擁抱」更改的敏捷方式，它有點崩潰，原因是我們將往下看一下。 ## 傳統 HTTP JSON API + React 的狀態管理問題 在 Web 應用程式中，您經常要做的就是從資料庫中獲取資源的狀態並將其呈現給使用者。讓我們以任務管理應用程式為例。使用者有一個任務列表，每個任務都有一個狀態： - 任務的標題 - 說明 - 任務完成時的標誌 - 截止日期（可選） 我們通常將此狀態儲存在資料庫中，並將此資訊呈現給用戶，您必須： - 從使用者有權存取的資料庫中取得所有任務。 - 可以選擇轉換資料（也許您儲存完成的日期並從中計算「is_completed」標誌）。 - 將資料序列化為 JSON。 - 透過 HTTP 請求取得資料。 - （可選但通常）根據模式驗證資料，可能使用 YUP 或 ZOD。 - 使用 Redux、Zustand、react-query 或其他狀態管理庫將 JSON 轉換為狀態並將其儲存在快取中。 - 轉換 HTML 中的狀態，通常會決定使用者可以使用資料做什麼。 簡而言之，我們正在描述如何在 JavaScript 中渲染所有資源的所有可能狀態，在瀏覽器中下載所述 JavaScript，然後 JavaScript 下載一堆 JSON 格式的資料並將其渲染（如果它知道如何）瀏覽器顯示為HTML！ 向使用者顯示任務清單需要做大量工作，特別是當任務僅在使用者變更時才更改時，應用程式必須將應用程式置於載入狀態，發出另一個 HTTP 請求（以PUT 或PATCH 或DELETE）使快取值（狀態）無效並重新獲取它以顯示更改的任務。 或者更糟的是，當用戶更改某些任務時，樂觀地更新本地狀態並立即顯示更改，並在幕後執行更新請求，僅在他們成功更新後通知用戶更新失敗。 這是非常容易出錯的。對於這個待辦事項應用程式來說，它可能會很有效，因為您是唯一的開發人員，並且該應用程式足夠大，您可以在腦海中保留正在發生的所有事情的地圖。但是當你的團隊規模更大時，尤其是當你將團隊分成前端和後端時，溝通不良可能會導致很多問題。 後端可能使用“is_completed”標誌，而前端可能需要“is_active”標誌。後端可能會將經過 Markdown 處理的「描述」傳送到 HTML，而前端可能希望它不被處理。後端可能會將“描述”設為可選，以允許使用者在前端不同步時保存草稿，並且您會看到許多“未捕獲的類型錯誤：無法讀取未定義的屬性（讀取“toLowerCase” ）” 另一方面，在 HTMX 上，您可以直接在範本上呈現 HTML，只要後端語言允許，就可以確保類型安全。您僅向瀏覽器發送相關訊息，向使用者提供對資源的適當控制，並指示瀏覽器或 HTMX 如何解釋使用者操作以及後端對這些操作的回應。所有應用程式狀態都是 HTML，這個概念稱為 [HATEOAS](https://htmx.org/essays/hateoas/) ## 傳統 HTTP JSON API + React 對文件的需求 為了讓兩個團隊（後端和前端）獨立工作並透過 HTTP JSON API 進行通信，您需要擁有適當的 API 文件。您還需要記錄如何計算使用者可以對給定資源執行哪些操作以顯示控制項。 大多數此類文件寫起來都很痛苦，特別是因為通常需要在實作之前編寫，而開發人員尚未完全理解問題的範圍，因此前端可以並行開發。這通常會在開發過程中進行許多更新，以適應開發過程中出現的問題，並可能導致團隊之間的版本不一致。 您還需要對 API 進行版本控制，並注意不要在非主要版本變更中引入重大變更。您無法再在不變更主要版本的情況下變更欄位名稱。您還需要保持 API 的多個版本運作或強制前端團隊進行調整。 大多數時候，文件已經過時了。有些必須緊急修復，有些新要求是在發布前一天提出的，現在您的文件已經過時，即使在很短的時間內。而且您必須記住更新它，或者更糟的是，您建立了一張票來記住它，而其他人拿起它，但沒有完整的圖片並記錄了錯誤！ ## 重複的邏輯問題 對於每個資源，您必須實施授權策略。您必須確定目前使用者是否可以將任務 **46234** 標記為已完成。您必須在後端程式碼的某個位置編寫此檢查。否則，您的應用程式將開放給_不安全的直接物件參考_，或任何使用 Postman 的人都可以將您的任務標記為已完成。 您還必須在前端實現相同的邏輯，僅當用戶有權標記已完成時才顯示標記按鈕（讓我們假設您可以與其他用戶共享您的任務，但只有您可以更改它們）。 現在每次這個邏輯改變時，你都必須在兩個應用程式中實作它，並同時發布它或擁有多個版本的API。 ## 效能問題 為了使用 React 在瀏覽器中呈現網站，您需要將佔用大量內存和解析/處理影響的 React 程式碼、狀態管理庫程式碼、腳趾 UI 庫程式碼、CSS-IN- 捆綁在一起。JS 庫程式碼、應用程式程式碼以及我們透過NPM 安裝和使用的任何js 程式庫（我們並不羞於安裝新套件，請參閱[leftpad 問題](https://www.theregister.com/2016/03/23/npm_left_pad_chaos/))。這通常會導致透過網路傳送大塊的 JavaScript 資源。當然，您可以在瀏覽器中緩存，但在現代敏捷開發中，每個衝刺至少部署一次，因此這無法解決任何問題。這會消耗網路流量和電池，這對行動裝置來說是一個經常被忽視的問題。 上述JavaScript需要由瀏覽器來解釋，消耗處理能力和電池。 JavaScript，尤其是 ReactDOM，需要追蹤 DOM 的鏡像。在其之上加入普通 DOM 和本地狀態緩存，以及所有渲染函數，以及所有“useMemo”、“useCallback”和“useState”。也要加入需要在記憶體中保存所有上下文變數的所有閉包。 JavaScript 引擎並不以其記憶體效率而聞名！您會聽到人們抱怨瀏覽器消耗了多少內存，但他們低估了他們存取的網站所消耗的內存量。 所有這些加起來，最終會耗盡用戶的電池和記憶體。當然，您可以付出努力並優化所有這些，或使用其他程式庫（如 Svelte），但所有這些努力都可以用於為您的用戶提供更有意義的功能。 ## 服務端渲染的需要 近年來，我們播種了伺服器端渲染專用框架（如「Next.js」）的興起。它們的流行凸顯了對以 HTML 格式交付內容的需求，特別是出於可存取性優化、效能和搜尋引擎優化的原因。 你不想等待瀏覽器下載 JavaScript 來渲染頁面，然後等待 JavaScript 發出 HTTP 請求來獲取內容然後渲染它，你希望它立即渲染，特別是對於上面的情況折疊內容。 這又增加了一層複雜性，包括： - 基礎設施，現在您還需要另一台伺服器用於前端應用程式 - 程式碼更複雜，包括什麼程式碼在伺服器上執行以及什麼在瀏覽器上執行的思維導圖 - 部署管道現在更加複雜 - 測試基礎設施現在更加複雜 - 現在解決問題變得更加困難，您需要了解問題是在瀏覽器上、在客戶端應用程式伺服器上還是在 API 伺服器上 ## 解決這些問題 Web 開發社群各自使用自己的語言或開發技術，以不同的方式解決這些問題： - Next.js（以及 Nuxt 等） - 反應伺服器元件 - 拉維爾 - 慣性.JS - 活線 - 點網 - Blazor 頁面 - 靈藥 - 鳳凰即時查看 - 鐵鏽 - 樂浦伺服器功能 還有許多我忘記或從未聽說過的其他解決方案！ 無論如何，此類解決方案的存在和流行證明了這些問題是有效的並且在 Web 開發人員的日常生活中遇到過。否則他們不會不遺餘力地解決這些問題，尤其是以開源的方式！ 還有 [Turbo](https://turbo.hotwired.dev/) 以及採用它們的框架、Ruby on Rails、PHP Symphony 以及其他可能以與 HTMX 相同的方式解決相同問題的框架。選擇 HTMX 只是個人喜好，但你絕對應該了解這一點，這和 HTMX 一樣酷！ 在所有這些中，HTMX 脫穎而出，不僅因為它不會將您鎖定到特定技術，您可以透過對模板進行微小更改來從 PHP 切換到 Rust，而且還因為它完全消除了對有狀態元件的需求，或者需要追蹤與資源無關的應用程式的某種狀態。 例如，讓我們採用確認對話方塊模式。您通常最終要做的是，您有一個本地記憶體狀態（如果它是開啟的），並根據該狀態將其顯示給使用者。在 HTMX 中，狀態 **IS THE HTML** 意味著當您按一下開啟模式時，您 **GET** `tasks/{taskId}/confirm-delete` 並將回應 HTML 嵌入到 DOM 中。當它被刪除時，您就完全刪除了模式和任務！這以一種獨特且極其簡單的方式解決了上述所有問題，您不需要： - 追蹤狀態 - 知道如何渲染對話框 - 記錄API - 檢查使用者是否可以刪除任務（在前端） - 您的後端應用程式始終負責 - 您可以獲得更好的安全性，因為您不會向瀏覽器發送不相關的資料並竊取敏感資訊 - 你會得到更好的表現 __*最重要的是，您可以讓您的應用程式保持簡單，只有在解決使用者問題時才允許複雜性！*__ 您只需指示 HTMX 從何處獲取對話框以及將其放置在何處，一切就完成了！ ``` <!-- the delete button --> @if ($chirp->user->is(auth()->user())) <form> @csrf @method('delete') <x-dropdown-link :component="'button'" type="submit" hx-get="{{ route('chirps.confirm-destroy', $chirp) }}" hx-swap="beforeend" hx-target="closest .chirp" > {{ __('Delete') }} </x-dropdown-link> </form> @endif <!-- the dialog template --> <div class="modal fixed z-10 inset-0 overflow-y-auto flex justify-center items-center bg-black bg-opacity-50" style="backdrop-filter: blur(14px);"> <div class="bg-white rounded p-6"> <h2 class="text-xl border-b pb-2 mb-2">Confirm Action</h2> <p>Are you sure you want to delete this chirp?</p> <div class="flex justify-end mt-4 gap-4"> <x-secondary-button _="on click remove closest .modal" > Cancel </x-secondary-button> <form> @csrf <x-danger-button hx-delete="{{route('chirps.destroy', $chirp)}}" hx-target="closest .chirp" hx-swap="delete"> Delete </x-danger-button> </form> </div> </div> </div> ``` _這個範例來自我的 [HTMX with Laravel] 教學（https://dev.to/turculaurentiu91/laravel-htmx--g0n) ，請看！_ 就像這樣，當我們單擊刪除按鈕時，我們指示 HTMX 對 `chirps/{chirp}/confirm-destroy` 執行 **GET** 請求，並將結果 HTML 放在最接近的父級 `< 之前div class="chirp">` 結束（在底部）。在刪除對話方塊中，當使用者確認時，我們指示 HTMX 對 `chirps/{chirp}` 端點執行 **DELETE** 請求，成功後，我們刪除具有 `chirp` 類別的最接近的父級。 ## 結論 在不斷發展的 Web 開發領域，看到 HTMX 等倡導簡單性和回歸基礎的工具令人耳目一新。透過利用 HTML 和 HTTP 的強大功能，HTMX 允許開發人員建立動態 Web 應用程式，而無需傳統 JavaScript 框架的複雜性和開銷。 因此，下次您開始新專案或考慮重構現有專案時，請嘗試 HTMX。您可能會驚訝於用這麼少的錢就能取得如此大的成就。
## 簡介 Web 開發的世界可能會因資源太多而令人不知所措。為了簡化這個過程，我列出了專為 Web 開發人員量身定制的 24 個最佳資源。 本指南涵蓋 HTML、CSS 和 JavaScript 的核心技術，旨在為初學者和專家提供有價值的工具和見解，以提高他們的 Web 開發技能。請探索這些精心挑選的資源，以幫助您在 Web 開發中脫穎而出。 原文出處：https://dev.to/swirl/24-best-resources-for-web-developers-html-css-javascript--2hog --- ## [Swirl](https://github.com/swirlai/swirl-search) [](https://github.com/swirlai/swirl-search) 搜尋多個來源具有挑戰性。 Swirl 結合了您所有的資料庫、筆記、PDF、Jira、GitHub、向量資料庫、Discord、Slack、Teams Chat 等，並允許您搜尋它們。 允許您： - 產生答案的人工智慧摘要。 🤖 - 管理您的資料並建立知識庫。 📚 - 節省時間並提高工作效率。 ⏳ 請在 GitHub 上給 Swirl Search 一個 ⭐️。 💖 https://github.com/swirlai/swirl-search 在 GitHub 上給 Swirl ⭐ --- ## CSS 工具 #### 1. [CSS 漸變](https://cssgradient.io/) CSS Gradient 是一個可讓您為網站建立免費漸變背景的專案。  #### 2. [Colorhunt](https://colorhunt.co/) Colorhunt 為設計師和藝術家提供了很棒的調色板。  #### 3. [CSS 技巧](https://css-tricks.com/) CSS Tricks 提供了有關級聯樣式表的一些最佳建議、提示、技巧和程式碼片段。  #### 4. [Haikei 生成器](https://haikei.app/generators/) Haikei 是一款 Web 應用程式，可產生令人驚嘆的視覺內容 - 可與您的設計工具和工作流程一起使用。  #### 5. [FFFuel](https://fffuel.co/gggrain/) Fffuel 是一個顏色工具和免費 SVG 生成器的集合，用於漸變、圖案、紋理、形狀和背景。  #### 6. [SVG 背景](https://www.svgbackgrounds.com/) SVG 背景託管一系列可在您的網站上使用的 SVG 背景。  #### 7. [動畫背景](https://animatedbackgrounds.me/) 動畫背景託管各種動畫背景的程式碼片段，可用作網站的背景。  #### 8. [Flowbite](https://flowbite.com/blocks/publisher/blog-templates/) Flowbite 提供了一組基於流行的 Tailwind CSS 框架的強大設計令牌和元件。  #### 9. [DaisyUI](https://daisyui.com/) DaisyUI 為 Tailwind CSS 新增了一組可自訂的顏色名稱，這些新顏色使用 CSS 變數作為值。  --- ## HTML #### 10. [Quackit 的 HTML 範本](https://www.quackit.com/html/templates/) Quackit 提供了大量免費網站模板可供選擇。根據您的選擇，您可以從簡單或更高級的模板清單中進行選擇。  --- ## 圖示 #### 11. [Devicon](https://devicon.dev/) Devicon 是一組代表程式語言、設計和開發工具的圖示。您可以將其用作字體或將 SVG 程式碼複製/貼上到您的專案中。  #### 12. [Flaticon](https://www.flaticon.com/) 為您的專案下載免費圖示和貼紙 - 由設計師製作並為設計師製作的 PNG、SVG 等格式的圖像。  --- ## 低程式碼工具 #### 13. [Framer](https://www.framer.com/) Framer 是一款低程式碼、基於人工智慧的拖放式網站建立器。  #### 14. [泡泡](https://bubble.io/) Bubble 自稱是世界上唯一的全端、無程式碼平台。 Bubble 是一款讓您無需編寫任何程式碼即可建立應用程式的工具。  #### 15. [阿達洛](https://www.adalo.com/) Adalo 是一種低程式碼響應式 Web 應用程式設計工具。  --- ## 其他 #### 16. [CDN JS](https://cdnjs.com/) CDN JS 是一個免費開源的內容傳遞網路。它允許 Web 開發人員直接搜尋 npm 套件並將其載入到靜態頁面的 HTML 頭部，而無需擔心 npm 安裝。  ## 免費圖片 #### 17. [Unsplash](https://unsplash.com/) 雖然我們有圖像生成工具，但沒有什麼比Unsplash帶給我們的超現實主義更重要了。您可以在網站上使用許多圖像（請記住向攝影師捐贈並在使用他們的圖像時提及他們）。  #### 18. [DALLE-3](https://openai.com/dall-e-3) Open AI 影像生成工具的第三次迭代。您可以使用 Bing AI 圖像產生器工具免費使用此工具。  --- ## 模型 #### 19. [模型世界](https://www.mockupworld.co/) 大量免費、合法、完全分層、易於自訂的逼真 PSD 模型：可在您的專案、應用程式展示和演示中使用！ 〜在他們的網站上提到！  #### 20.【免費模型世界】(https://www.freemockupworld.com/) Free Mockup World 是高品質、最佳免費模型的合作，包括 Apple 裝置、品牌、標誌、印刷、數位藝術、時尚、服裝等。 〜在他們的網站上提到。  #### 21.【UI設計日報】(https://uidesigndaily.com/) 適合您網站的免費開源 UI 設計資源。 （包含登入頁面等的 Figma 模型）  --- ## 其他有用的開源程式庫 #### 22.【ShadCN】(https://ui.shadcn.com/) 使用 Radix UI 和 Tailwind CSS 建立的設計精美的元件。  #### 23. [點選投票](https://clickvote.dev/) Clickvote 是一個開源函式庫，可以省去圍繞內容建立反應元件的麻煩。  #### 24. [斯巴達NG](https://www.spartan.ng/) ShadCN 用於 Angular。開源、社群建構。  --- ## 用於搜尋資料 - Swirl ### [漩渦](https://github.com/swirlai/swirl-search) **Swirl 是一個開源搜尋平台，它改變了您與資料互動的方式。** [](https://github.com/swirlai/swirl-search) 將其視為專門為您的獨特資料集量身定制的 ChatGPT。無論是筆記、程式碼片段、PDF 檔案還是電子郵件，Swirl 都是您獲取即時、人工智慧驅動見解的首選平台。 Swirl 與眾不同的特質： - **一般搜尋**：無縫搜尋筆記、程式碼、文件、資料庫、電子郵件、聊天、日誌等。 🔍 - **個人人工智慧驅動的知識助理**：您可以為您的公司、新創公司或個人資料建立安全、可搜尋的知識庫。 🤖 - **一鍵檢索增強生成**：使用 Swirl，您可以立即執行人工智慧摘要和分析。您可以透過產生這些資料的資料來源來獲得答案。 🛠️ **請在 GitHub 上給 Swirl Search 一個 ⭐️。 💖** https://github.com/swirlai/swirl-search 在 GitHub 上給 Swirl ⭐ 並加入我們的【開源 Slack 社群 💕】(https://join.slack.com/t/swirlmetasearch/shared_invite/zt-1qk7q02eo-kpqFAbiZJGOdqgYVvR1sfw) --- 再次感謝您的閱讀！
資深開發者 Jatin Sharma 在國外論壇分享了個人使用的 VSCode 設定，內容豐富，跟大家分享！ 原文出處：https://dev.to/j471n/my-vs-code-setup-971 ## 🎨主題 我使用 [**Andromeda**](https://marketplace.visualstudio.com/items?itemName=EliverLara.andromeda) 作為我的 VS Code 的主要主題  ## 🪟圖標 對於圖標，我會在 [**材質圖標主題**](https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme) 和 [**材質主題圖標**]( https://marketplace.visualstudio.com/items?itemName=Equinusocio.vsc-material-theme-icons) **找找看。** ### 材質圖標主題  ### 材質主題圖標  ## ⚒️外掛 最讚的部分來了，有很多擴展我只提到了我最喜歡的或我每天主要使用的擴展。 ### 自動重命名標籤 自動重命名配對的 HTML/XML 標記，與 Visual Studio IDE 的操作相同。 **下載：** [**自動重命名標籤**](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag)  ### 括號對著色切換器 VS Code 擴展，為您提供一個簡單的命令來快速切換全局“括號對著色” **下載：** [**括號對著色切換器**](https://marketplace.visualstudio.com/items?itemName=dzhavat.bracket-pair-toggler)  ### C/C++ C/C++ 擴展向 Visual Studio Code 加入了對 C/C++ 的語言支持，包括編輯 (IntelliSense) 和除錯功能。 **下載：** [**C/C++**](https://marketplace.visualstudio.com/items?itemName=ms-vscode.cpptools)  ### 程式碼執行器 執行多種語言的程式碼片段或程式碼文件 **下載：** [**程式碼執行器**](https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner)  ### 程式碼拼寫檢查器 一個基本的拼寫檢查器，可以很好地處理程式碼和文件。 該拼寫檢查器的目標是幫助發現常見的拼寫錯誤，同時保持較低的誤報數量。 **下載：** [**程式碼拼寫檢查器**](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)  ### DotENV VSCode `.env` 語法高亮。 **下載：** [**DotENV**](https://marketplace.visualstudio.com/items?itemName=mikestead.dotenv)  ### 錯誤鏡頭 ErrorLens 通過使診斷更加突出來增強語言診斷功能，突出顯示語言生成的診斷的整行，並內聯打印訊息。 **下載：** [**錯誤鏡頭**](https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens)  ### ES7+ React/Redux/React-Native 片段 ES7+ 中的 JavaScript 和 React/Redux 片段以及 [VS Code](https://code.visualstudio.com/) 的 Babel 插件功能 **下載：** [**ES7+ React/Redux/React-Native 片段**](https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets)  ### ESLint 該擴展使用安裝在打開的工作區文件夾中的 ESLint 庫。如果該文件夾未提供，則擴展程序將查找全局安裝版本。如果您尚未在本地或全局安裝 ESLint，請在工作區文件夾中執行“npm install eslint”進行本地安裝，或執行“npm install -g eslint”進行全局安裝。 **下載：** [**ESLint**](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)  ### Git 圖 查看存儲庫的 Git 圖表，並從圖表中輕鬆執行 Git 操作。可配置為您想要的外觀！ **下載：** [Git Graph](https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph)  ### GitLens GitLens **增強了 VS Code 中的 Git，並解鎖每個存儲庫中**未開發的知識**。它可以幫助您通過 Git Blame 註釋和 CodeLens 一目了然地**可視化程式碼作者**，**無縫導航和探索** Git 存儲庫，**通過豐富的可視化和強大的比較命令**獲得有價值的見解**，等等更多的。 **下載：** [**GitLens**](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)  ### HTML 樣板 此擴展提供了所有 Web 應用程式中使用的標準 HTML 樣板程式碼。 **下載：** [**HTML 樣板**](https://marketplace.visualstudio.com/items?itemName=sidthesloth.html5-boilerplate)  ### Import Cost 此擴展將在編輯器中內聯顯示導入包的大小。該擴展利用 webpack 來檢測導入的大小。 **下載：** [**Import Cost**](https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost)  ### Live Server 它將啟用實時更改而不保存文件。 **下載：** [**Live Server**](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)  ### Markdown 多合一 Markdown 所需的一切（鍵盤快捷鍵、目錄、自動預覽等）。 ***注意***：VS Code 具有開箱即用的基本 Markdown 支持（例如，**Markdown 預覽**），請參閱官方文件了解更多訊息。 **下載：** [**Markdown All in One**](https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one)  ### Markdown 預覽增強 它顯示了 Markdown 內容的增強預覽。 **下載：** [**Markdown 預覽增強版**](https://marketplace.visualstudio.com/items?itemName=shd101wyy.markdown-preview-enhanced)  ### 將 JSON 粘貼為程式碼 複製 JSON，粘貼為 Go、TypeScript、C#、C++ 等。 **下載 -** [**將 JSON 粘貼為程式碼**](https://marketplace.visualstudio.com/items?itemName=quicktype.quicktype)  ### 更漂亮 使用 Prettier 的程式碼格式化程序 **下載 -** [**Prettier**](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)  ### Python IntelliSense (Pylance)、Linting、除錯（多線程、遠程）、Jupyter Notebooks、程式碼格式化、重構、單元測試等。 **下載 -** [**Python**](https://marketplace.visualstudio.com/items?itemName=ms-python.python)  ### 設置同步 使用 GitHub Gist 跨多台計算機同步設置、程式碼片段、主題、文件圖標、啟動、按鍵綁定、工作區和擴展。 **下載 -** [**設置同步**](https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync)  ### Tailwind CSS IntelliSense 適用於 VS Code 的智能 Tailwind CSS 工具 **下載 -** [**Tailwind CSS IntelliSense**](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)  ### 所有亮點 突出顯示程式碼中的“TODO”、“FIXME”和其他註釋。 有時，在將程式碼發佈到生產環境之前，您會忘記檢查編碼時加入的 TODO。所以我長期以來一直想要一個擴展來突出顯示它們並提醒我還有註釋或尚未完成的事情。 希望這個擴展也能幫助您。 **下載 -** [**TODO 突出顯示**](https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight)  ### Turbo 控制台日誌 自動編寫有意義的日誌訊息的過程。 **下載 -** [**Turbo 控制台日誌**](https://marketplace.visualstudio.com/items?itemName=ChakrounAnas.turbo-console-log)  ### 塔布寧人工智能 Tabnine 是一款 AI 程式碼助手，可讓您成為更好的開發人員。 Tabnine 將通過所有最流行的編碼語言和 IDE 中的實時程式碼完成來提高您的開發速度。 **下載 -** [**Tabnine AI**](https://marketplace.visualstudio.com/items?itemName=TabNine.tabnine-vscode)  ## ⚙️設置 以下“JSON”程式碼顯示了我的 VS Code 設置： ``` // user/settings.json { "files.autoSave": "afterDelay", "editor.mouseWheelZoom": true, "code-runner.clearPreviousOutput": true, "code-runner.ignoreSelection": true, "code-runner.runInTerminal": true, "code-runner.saveAllFilesBeforeRun": true, "code-runner.saveFileBeforeRun": true, "editor.wordWrap": "on", "C_Cpp.updateChannel": "Insiders", "editor.suggestSelection": "first", "python.jediEnabled": false, "editor.fontSize": 17, "emmet.includeLanguages": { "javascript": "javascriptreact" }, "editor.minimap.size": "fit", "editor.fontFamily": "Consolas, DejaVu Sans Mono, monospace", "editor.fontLigatures": false, "[html]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "python.formatting.provider": "yapf", "[css]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "git.autofetch": true, "git.enableSmartCommit": true, "html-css-class-completion.enableEmmetSupport": true, "editor.formatOnPaste": true, "liveServer.settings.donotShowInfoMsg": true, "[python]": { "editor.defaultFormatter": "ms-python.python" }, "diffEditor.ignoreTrimWhitespace": false, "[json]": { "editor.defaultFormatter": "vscode.json-language-features" }, "[c]": { "editor.defaultFormatter": "ms-vscode.cpptools" }, "editor.fontWeight": "300", "editor.fastScrollSensitivity": 6, "explorer.confirmDragAndDrop": false, "vsicons.dontShowNewVersionMessage": true, "workbench.iconTheme": "material-icon-theme", "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.renderWhitespace": "none", "workbench.startupEditor": "newUntitledFile", "liveServer.settings.multiRootWorkspaceName": "", "liveServer.settings.port": 5000, "liveServer.settings.donotVerifyTags": true, "editor.formatOnSave": true, "html.format.indentInnerHtml": true, "editor.formatOnType": true, "printcode.tabSize": 4, "terminal.integrated.confirmOnExit": "hasChildProcesses", "terminal.integrated.cursorBlinking": true, "terminal.integrated.rightClickBehavior": "default", "tailwindCSS.emmetCompletions": true, "sync.gist": "527c3e29660c53c3f17c32260188d66d", "gitlens.hovers.currentLine.over": "line", "terminal.integrated.profiles.windows": { "PowerShell": { "source": "PowerShell", "icon": "terminal-powershell" }, "Command Prompt": { "path": [ "${env:windir}\\Sysnative\\cmd.exe", "${env:windir}\\System32\\cmd.exe" ], "args": [], "icon": "terminal-cmd" }, "Git Bash": { "source": "Git Bash" }, "C:\\WINDOWS\\System32\\WindowsPowerShell\\v1.0\\powershell.exe (migrated)": { "path": "C:\\WINDOWS\\System32\\WindowsPowerShell\\v1.0\\powershell.exe", "args": [] }, "Windows PowerShell": { "path": "C:\\WINDOWS\\System32\\WindowsPowerShell\\v1.0\\powershell.exe" }, "Ubuntu (WSL)": { "path": "C:\\WINDOWS\\System32\\wsl.exe", "args": [ "-d", "Ubuntu" ] } }, "javascript.updateImportsOnFileMove.enabled": "always", "[dotenv]": { "editor.defaultFormatter": "foxundermoon.shell-format" }, "editor.tabSize": 2, "cSpell.customDictionaries": { "custom-dictionary-user": { "name": "custom-dictionary-user", "path": "~/.cspell/custom-dictionary-user.txt", "addWords": true, "scope": "user" } }, "window.restoreFullscreen": true, "tabnine.experimentalAutoImports": true, "files.defaultLanguage": "${activeEditorLanguage}", "bracket-pair-colorizer-2.depreciation-notice": false, "workbench.editor.wrapTabs": true, "[markdown]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[ignore]": { "editor.defaultFormatter": "foxundermoon.shell-format" }, "terminal.integrated.fontFamily": "courier new", "terminal.integrated.defaultProfile.windows": "pwsh.exe -nologo", "terminal.integrated.shellIntegration.enabled": true, "terminal.integrated.shellIntegration.showWelcome": false, "editor.accessibilitySupport": "off", "editor.bracketPairColorization.enabled": true, "todohighlight.isEnable": true, "terminal.integrated.shellIntegration.history": 1000, "turboConsoleLog.insertEnclosingClass": false, "turboConsoleLog.insertEnclosingFunction": false, "files.autoSaveDelay": 500, "liveServer.settings.CustomBrowser": "chrome", "liveServer.settings.host": "localhost", "liveServer.settings.fullReload": true, "workbench.editor.enablePreview": false, "workbench.colorTheme": "Andromeda Bordered" } ``` ## 總結 以上簡單分享，希望對您有幫助！
## 課程目標 - 使用 ejs 模板並讀取變數 ## 課程內容 這一課來學習如何讀取變數之後，放進 ejs 模板呈現！ 先來安裝之前用過的 readline-sync 套件 ``` npm install readline-sync ``` 替這課建立一個資料夾，然後建立 `index.js` `hello.ejs` `users.json` 這幾個檔案 此時資料夾會長類似這樣 ``` repo ├── package.json ├── package-lock.json ├── node_modules ├── lesson1 │ └── index.js ├── lesson2 │ ├── hello.ejs │ └── index.js └── lesson3 ├── users.json ├── hello.ejs └── index.js ``` 在 users.json 放入以下內容 ``` [ { "name": "小明", }, { "name": "小華", }, { "name": "小王", } ] ``` 在 hello.ejs 放入以下內容 ``` <div> <% for(var i = 0; i < users.length; i++) { %> <p> <%= users[i].name %>同學，你好！ </p> <% } %> </div> ``` 在 index.js 放入以下內容 ``` const express = require('express'); const app = express(); const engine = require('ejs-locals'); const fs = require('fs'); app.engine('ejs', engine); app.set('views', './lesson3'); app.set('view engine', 'ejs'); app.get('/', function(req, res){ const data = fs.readFileSync('./lesson3/users.json'); const users = JSON.parse(data); res.render('hello', { users: users }); }); app.listen(3000); ``` 然後去終端機輸入 ``` node lesson3/index.js ``` 接著打開瀏覽器，在網址輸入 ``` http://localhost:3000/ ``` 你會看到很多則訊息，分別跟多位同學打招呼！ --- 這段程式不用我多加說明了吧！檔案讀取也是之前教過的內容！ 這邊唯一多學的東西，就是 ejs 關於 for 迴圈的語法，反正就是 `<%` 跟 `%>` 之類的東西包起來而已 ejs 還有支援很多豐富的語法＆功能，有興趣的話，自行研究一下吧！ ## 課後作業 這次要練習匯入資料到 ejs 模板 請新建立 hw3 資料夾，採用以下結構 ``` /repo /hw3 /index.js /homepage.ejs /posts.json ``` 請修改 homepage.ejs 內容，將文章內容移出來，放在 posts.json 裡面 ``` [ { "title": "第一篇日記", "content": "今天天氣很好，夏天太陽很大，讓我心情很好" }, { "title": "第二篇日記", "content": "早起出門運動，回家沖個澡，整天心情很好" }, { "title": "第三篇日記", "content": "下大雨一整天，整天在家追劇，滿舒服的" } ] ``` 這樣 homepage.ejs 內就不會只是 html 了，你會練習到 ejs 獨有的模板語法！ 完成以上任務，你就完成這次的課程目標了！ --- 請更新你的 github 專案內容，此時應該變成這樣 ``` /repo /hw1 /index.js /hw2 /index.js /homepage.ejs /hw3 /index.js /homepage.ejs /posts.json ``` 依此類推，之後就這樣交作業！
## 課程目標 - 使用 ejs 模板渲染出 html ## 課程內容 上一課我們成功讓後端回應 html 給瀏覽器了，很棒 可是每次都讓 res.send 回應一大串 html，就太奇怪了 至少要讓 html 內容放在單獨一個檔案，才有寫網頁的感覺吧！ 這課來學習如何做到這點吧！ --- 來安裝一款新套件，請在終端機輸入 ``` npm install ejs-locals ``` 替這課建立一個資料夾，然後建立一個 index.js 檔案與一個 hello.ejs 檔案 此時資料夾會長類似這樣 ``` repo ├── package.json ├── package-lock.json ├── node_modules ├── lesson1 │ └── index.js └── lesson2 ├── hello.ejs └── index.js ``` 在 hello.ejs 放入以下內容 ``` <h1>恭喜您，成功囉！</h1> <h2>您真的做得很棒！</h2> <p>繼續學習，不斷進步吧！</p> ``` 然後在 index.js 放入以下內容 ``` const express = require('express'); const app = express(); const engine = require('ejs-locals'); app.engine('ejs', engine); app.set('views', './lesson2'); app.set('view engine', 'ejs'); app.get('/', function(req, res){ res.render('hello') }); app.listen(3000); ``` 然後去終端機輸入 ``` node lesson2/index.js ``` 接著打開瀏覽器，在網址輸入 ``` http://localhost:3000/ ``` 你會看到一段打招呼訊息！ --- ejs 是 javascript 社群常用的一款「模板引擎」套件 我們不是直接安裝 ejs 套件，而是安裝 ejs-locals 套件，這是一款把 ejs 整合進 express 的方便套件！ 在載入 ejs-locals 之後，接著用 app.engine 告訴 express 我們要設定模板引擎 然後用 app.set 告訴 express 要去哪邊找到 `模板檔案` 最後，處理 http 請求的地方，把原本的 res.send 改成 res.render 並放進模板檔案名稱，就可以囉！ 多看幾眼這段程式，這就是後端開發，用 node、express 來讀取一段 html，並且回應給瀏覽器的方式，不難吧！ ## 課後作業 這次要練習使用 ejs 模板 請新建立 hw2 資料夾，採用以下結構 ``` /repo /hw2 /index.js /homepage.ejs ``` 並開發一個 app，打開首頁 `http://localhost:3000/` 會顯示 homepage.ejs 的內容作為部落格首頁，homepage.ejs 的內容先放這些 html 就好： ``` <h1>我的個人日記 APP</h1> <div> <h2>第一篇日記</h2> <div>今天天氣很好，夏天太陽很大，讓我心情很好</div> </div> <div> <h2>第二篇日記</h2> <div>早起出門運動，回家沖個澡，整天心情很好</div> </div> <div> <h2>第三篇日記</h2> <div>下大雨一整天，整天在家追劇，滿舒服的</div> </div> ``` 完成以上任務，你就完成這次的課程目標了！ --- 請更新你的 github 專案內容，此時應該變成這樣 ``` /repo /hw1 /index.js /hw2 /index.js /homepage.ejs ``` 依此類推，之後就這樣交作業！
## 課程目標 - 使用 node 與 express 回應 http get request ## 課程內容 在 node 中開發後端程式，通常會使用一款叫做 express 的套件 雖然不用 express 也能夠開發後端應用，但 express 提供很多現成好用功能 所以先來安裝 express 吧！ ``` npm install express ``` 建立一個資料夾，放我們每課的練習內容，這一課就叫 lesson1 吧 然後建立一個 index.js 檔案 此時資料夾會長類似這樣 ``` repo ├── package.json ├── package-lock.json ├── node_modules └── lesson1 └── index.js ``` 在 index.js 檔案放入以下內容 ``` const express = require('express'); const app = express(); app.get('/', function(req, res){ res.send('<h1>恭喜您，成功囉！</h1>'); }); app.listen(3000); ``` 然後去終端機輸入 ``` node lesson1/index.js ``` 接著打開瀏覽器，在網址輸入 ``` http://localhost:3000/ ``` 你會看到一段大大的打招呼訊息！ --- 讓我們逐行說明一下 前面兩句是載入 express 套件，然後建立主程式物件 `app.get()` 是註冊登記一個處理 `HTTP GET 請求` 第一個參數是 `要處理的網址` 第二個參數是放進一段「函式定義」代表要如何處理 函式定義通常會用 `(req, res)` 當參數，有人會寫 `(request, response)`，都可以，分別是代表 `請求` 與` 回應` 的物件 這段看不太懂沒關係，需要稍微研究一下「HTTP 協定」才會知道定義 反正就先用 `res.send` 來回應一段 html 就對了！ 最後用 `app.listen(3000);` 來在 port 3000 跑這段後端程式 --- 在一台電腦上，多個程式之間彼此溝通，通常會在電腦上各自使用一個 port 號碼 在瀏覽器中，通常只會輸入網址，例如 `https://www.google.com.tw` 之類的 只輸入網址，代表使用 443 當作 port，舉例來說，你可以在網址輸入 `https://www.google.com.tw:443` 看看，結果一模一樣 一個 port 只能同時給一個程式使用，為了避免用到別的程式在用的 port，我們請 node 在這邊使用 3000 這個冷門的 port，方便我們測試 然後 `localhost` 不是真的網址，是請瀏覽器直接在本機電腦上尋找網站開啟的意思！ 以上通通看不懂沒關係，需要對 `網際網路協定` 稍微研讀才比較懂，先照做即可！ ## 課後作業 這次的系列作業，要練習開發一個「個人日記 APP」 首先來練習如何用 node 回應 http get request 請開發一個 app，打開首頁 `http://localhost:3000/` 會顯示 `<h1>我的個人日記 APP</h1>`，先做到這樣就好 完成以上任務，你就完成這次的課程目標了！ --- 交作業的方法： 請建立一個 repo 上傳到 github 這個 repo 的檔案結構應該會是這樣： ``` repo ├── package.json ├── package-lock.json ├── node_modules └── hw1 └── index.js ``` 接下來的每次作業，都新開一個小資料夾 然後把 github 專案連結，貼到留言區即可
如何在微前端中處理 CSS？畢竟，樣式始終是*任何* UI 片段所需要的東西，但是，它也是全局共享的東西，因此是潛在的衝突來源。 在這篇文章中，我想回顧一下現有的不同策略來馴服 CSS 並使其擴展以開發微前端。如果這裡的任何內容對您來說聽起來很合理，那麼也可以考慮研究一下[“微前端的藝術”](https://microfrontends.art/)。 **本文的程式碼可以在[github.com/piral-samples/css-in-mf](https://github.com/piral-samples/css-in-mf)找到。請務必查看示例實現。** CSS 的處理是否會影響每個微前端解決方案？讓我們檢查可用的類型來驗證這一點。 原文出處：https://dev.to/florianrappl/css-in-micro-frontends-4jai ## 微前端的類型 過去我寫了很多關於存在哪些類型的微前端、為什麼存在以及何時應該使用什麼類型的微前端架構的文章。採用 Web 方法意味著使用 iframe 來使用來自不同微前端的 UI 片段。在這種情況下，沒有任何限制，因為無論如何每個片段都是完全隔離的。 在任何其他情況下，無論您的解決方案使用客戶端還是伺服器端組合（或介於兩者之間的東西），您最終都會得到在瀏覽器中評估的樣式。因此，在所有其他情況下，您都會關心 CSS。讓我們看看這裡有哪些選項。 ## 無特殊處理 好吧，第一個 - 也許是最（或根據觀點，最不）明顯的解決方案是不進行任何特殊處理。相反，每個微前端都可以附帶額外的樣式表，然後在渲染微前端的元件時附加這些樣式表。 理想情況下，每個元件僅在首次渲染時加載所需的樣式，但是，由於這些樣式中的任何一個都可能與現有樣式衝突，我們也可以假裝在微前端的任何元件渲染時加載所有“有問題的”樣式。  這種方法的問題在於，當給出諸如“div”或“div a”之類的通用選擇器時，我們還將重新設置其他元素的樣式，而不僅僅是原始微前端的片段。更糟糕的是，類和屬性也不是故障保護措施。像“.foobar”這樣的類也可以在另一個微前端中使用。 **您將在引用的演示存儲庫中找到兩個衝突的微前端的示例，網址為 [solutions/default](https://github.com/piral-samples/css-in-mf/tree/main/solutions)。** 擺脫這種痛苦的一個好方法是進一步隔離元件 - 就像 Web 元件一樣。 ## 影子 DOM 在自定義元素中，我們可以打開一個影子根來將元素附加到專用的迷你文件，該迷你文件實際上與其父文件屏蔽。總的來說，這聽起來是一個好主意，但與這裡介紹的所有其他解決方案一樣，沒有硬性要求。  理想情況下，微前端可以自由決定“如何”實現元件。因此，實際的 Shadow DOM 集成必須由微前端完成。 使用 Shadow DOM 有一些缺點。最重要的是，雖然 Shadow DOM 內部的樣式保留在內部，但全局樣式也不會影響 Shadow DOM。乍一看，這似乎是一個優勢，但是，由於整篇文章的主要目標只是隔離微前端的樣式，因此您可能會錯過諸如應用某些全局設計系統（例如 Bootstrap）之類的要求。 要使用 Shadow DOM 進行樣式設置，我們可以通過“link”引用或“style”標籤將樣式放入 Shadow DOM 中。由於 Shadow DOM 是無樣式的，並且外部的樣式不會傳播到其中，因此我們實際上需要它。除了編寫一些內聯樣式之外，我們還可以使用捆綁器將“.css”（或者類似“.shadow.css”的內容）視為原始文本。這樣，我們只會得到一些文本。 對於 esbuild，我們可以配置 `piral-cli-esbuild` 的預製配置，如下所示： ``` module.exports = function(options) { options.loader['.css'] = 'text'; options.plugins.splice(0, 1); return options; }; ``` 這會刪除初始 CSS 處理器 (SASS) 並為“.css”文件配置標準加載器。現在，shadow DOM 中的某些樣式的工作方式如下： ``` import css from "./style.css"; customElements.define(name, class extends HTMLElement { constructor() { super(); this.attachShadow({ mode: "open" }); } connectedCallback() { this.style.display = "contents"; const style = this.shadowRoot.appendChild(document.createElement('style')); style.textContent = css; } }); ``` 上面的程式碼是一個有效的自定義元素，從樣式角度來看它是透明的（“display：contents”），即只有其內容會反映在渲染樹中。它託管一個包含單個“style”元素的影子 DOM。 `style` 的內容設置為 `style.css` 文件的文本。 **您將在 [`solutions/shadow-dom`](https://github.com/piral-samples/css-in-mf/tree/main) 引用的演示存儲庫中找到兩個衝突的微前端的示例/解決方案/shadow-dom）。** 域元件避免使用影子 DOM 的另一個原因是，並非每個 UI 框架都能夠處理影子 DOM 中的元素。因此，無論如何都必須尋找替代解決方案。一種方法是轉而使用一些 CSS 約定。 ## 使用命名約定 如果每個微前端都遵循全局 CSS 約定，那麼就可以在元級別上避免衝突。最簡單的約定是在每個類前面加上微前端的名稱。因此，舉例來說，如果一個微前端稱為“shopping”，另一個微前端稱為“checkout”，那麼兩者都會將其“active”類分別重命名為“shopping-active”/“checkout-active”。  這同樣適用於其他可能存在衝突的名稱。舉個例子，在微前端稱為“shopping”的情況下，我們將其稱為“shopping-primary-button”，而不是像“primary-button”這樣的ID。如果由於某種原因，我們需要設置元素的樣式，我們應該使用後代選擇器（例如“.shopping img”）來設置“img”標籤的樣式。現在，這適用於具有“shopping”類的 *some* 元素中的“img”元素。這種方法的問題是購物微前端也可能使用其他微前端的元素。如果我們看到“div.shopping > div.checkout img”怎麼辦？儘管“img”現在由通過“checkout”微前端帶來的元件託管/集成，但它的樣式將由“shopping”微前端 CSS 設計。這並不理想。 儘管命名約定在一定程度上解決了問題，但它們仍然容易出錯並且使用起來很麻煩。如果我們重命名微前端會怎樣？如果微前端在不同的應用程式中獲得不同的名稱怎麼辦？如果我們在某些時候忘記應用命名約定怎麼辦？這就是工具幫助我們的地方。 ## CSS 模塊 自動引入一些前綴並避免命名衝突的最簡單方法之一是使用 CSS 模塊。根據您選擇的捆綁器，這可以是開箱即用的，也可以通過一些配置更改來實現。  ``` // Import "default export" from CSS import styles from './style.modules.css'; // Apply <div className={styles.active}>Active</div> ``` 導入的模塊是一個生成的模塊，保存將其原始類名（例如“active”）映射到生成的類名的值。生成的類名通常是 CSS 規則內容與原始類名混合的哈希值。這樣，名稱應該盡可能唯一。 作為示例，讓我們考慮使用“esbuild”建置的微前端。對於“esbuild”，您需要一個插件（“esbuild-css-modules-plugin”）和相應的配置更改以包含 CSS 模塊。 使用 Piral 我們只需要調整 `piral-cli-esbuild` 已經帶來的配置。我們刪除標準 CSS 處理（使用 SASS）並用插件替換： ``` const cssModulesPlugin = require('esbuild-css-modules-plugin'); module.exports = function(options) { options.plugins.splice(0, 1, cssModulesPlugin()); return options; }; ``` 現在我們可以在程式碼中使用 CSS 模塊，如上所示。 CSS 模塊有一些缺點。首先，它附帶了一些標準 CSS 的語法擴展。這對於區分我們想要導入的樣式（因此要進行預處理/哈希）和應保持原樣的樣式（即稍後在不導入的情況下使用）是必要的。另一種方法是將CSS直接帶入JS文件中。 ## CSS-in-JS CSS-in-JS 最近的名聲很差，但是，我認為這是一個誤解。我也更喜歡將其稱為“CSS-in-Components”，因為它為元件本身帶來了樣式。一些框架（Astro、Svelte 等）甚至允許通過其他方式直接執行此操作。經常被提及的缺點是性能 - 這通常是由於在瀏覽器中編寫 CSS 造成的。然而，這並不總是必要的，在最好的情況下，CSS-in-JS 庫實際上是建置時間驅動的，即沒有任何性能缺陷。  然而，當我們談論 CSS-in-JS（或 CSS-in-Components）時，我們需要考慮現有的各種選項。為簡單起見，我只包含三個：情感、樣式元件和香草提取物。讓我們看看它們如何幫助我們在將微前端整合到一個應用程式中時避免衝突。 ### Emotion Emotion 是一個非常酷的庫，它附帶了 React 等框架的幫助程序，但沒有將這些框架設置為先決條件。情感可以很好地優化和預先計算，並允許我們使用可用的 CSS 技術的完整庫。 使用“純粹”情感相當容易；首先安裝包： ``` npm i @emotion/css ``` 現在您可以在程式碼中使用它，如下所示： ``` import { css } from '@emotion/css'; const tile = css` background: blue; color: yellow; flex: 1; display: flex; justify-content: center; align-items: center; `; // later <div className={tile}>Hello from Blue!</div> ``` `css` 幫助器允許我們編寫被解析並放置在樣式表中的 CSS。返回值是生成的類的名稱。 如果我們特別想使用 React，我們還可以使用 Emotion 中的 jsx 工廠（引入了一個名為 css 的新標準 prop）或 styled 幫助器： ``` npm i @emotion/react @emotion/styled ``` 現在感覺很像樣式是 React 本身的一部分。例如，“styled”幫助器允許我們定義新元件： ``` const Output = styled.output` border: 1px dashed red; padding: 1rem; font-weight: bold; `; // later <Output>I am groot (from red)</Output> ``` 相比之下，“css”輔助屬性使我們能夠稍微縮短符號： ``` <div css={` background: red; color: white; flex: 1; display: flex; justify-content: center; align-items: center; `}> Hello from Red! </div> ``` 總而言之，這會生成不會衝突的類名，並提供避免樣式混合的穩健性。 “styled”助手尤其受到流行的“styled-components”庫的啟發。 ### 樣式元件 “styled-components”庫可以說是最流行的 CSS-in-JS 解決方案，並且常常是此類解決方案聲譽不佳的原因。從歷史上看，這實際上是在瀏覽器中編寫 CSS 的全部內容，但在過去幾年中，他們確實極大地推進了這一點。今天，您也可以對所使用的樣式進行一些非常好的伺服器端組合。 與“emotion”相比，安裝（針對 React）需要更少的軟體包。唯一的缺點是打字是事後才想到的 - 所以你需要安裝兩個包才能完全喜歡 TypeScript： ``` npm i styled-components --save npm i @types/styled-components --save-dev ``` 安裝後，該庫就已經完全可用： ``` import styled from 'styled-components'; const Tile = styled.div` background: blue; color: yellow; flex: 1; display: flex; justify-content: center; align-items: center; `; // later <Tile>Hello from Blue!</Tile> ``` 其原理與“情感”相同。因此，讓我們探索另一種選擇，嘗試從一開始就實現零成本，而不是事後的想法。 ### Vanilla Extract 我之前寫的關於利用類型更接近元件（並避免不必要的執行時成本）的內容正是最新一代 CSS-in-JS 庫所涵蓋的內容。最有前途的庫之一是“@vanilla-extract/css”。 使用該庫有兩種主要方式： - 與您的捆綁器/框架集成 - 直接使用 CLI 在此示例中，我們選擇前者 - 並將其集成到“esbuild”。為了使集成正常工作，我們需要使用“@vanilla-extract/esbuild-plugin”包。 現在我們將其集成到建置過程中。使用 `piral-cli-esbuild` 配置，我們只需將其加入到配置的插件中： ``` const { vanillaExtractPlugin } = require("@vanilla-extract/esbuild-plugin"); module.exports = function (options) { options.plugins.push(vanillaExtractPlugin()); return options; }; ``` 為了使 Vanilla Extract 正常工作，我們需要編寫 `.css.ts` 文件，而不是普通的 `.css` 或 `.sass` 文件。這樣的文件可能如下所示： ``` import { style } from "@vanilla-extract/css"; export const heading = style({ color: "blue", }); ``` 這都是有效的 TypeScript。我們最終會得到一個類名的導出 - 就像我們從 CSS 模塊、Emotion 中得到的一樣 - 你明白了。 所以最後，上面的樣式將像這樣應用： ``` import { heading } from "./Page.css.ts"; // later <h2 className={heading}>Blue Title (should be blue)</h2> ``` 這將在建置時完全處理——而不是執行時成本。 您可能會感興趣的另一種方法是使用 CSS 實用程序庫，例如 Tailwind。 ## CSS 實用程序，例如 Tailwind 這是一個獨立的類別，但我認為既然 Tailwind 是這個類別中的主要工具，我將只介紹 Tailwind。 Tailwind 的主導地位甚至達到了甚至有人問“你寫 CSS 還是 Tailwind？”之類的問題。這與 jQuery 在 DOM 操作領域的統治地位非常相似。 2010 年，人們問“這是 JavaScript 還是 jQuery？”。 無論如何，使用 CSS 實用程序庫的優點是根據使用情況生成樣式。這些樣式不會衝突，因為實用程序庫始終以相同的方式定義它們。因此，每個微前端將僅附帶實用程序庫中根據需要顯示微前端所需的部分。  如果使用 Tailwind 和 esbuild，我們還需要安裝以下軟體包： ``` npm i autoprefixer tailwindcss esbuild-style-plugin ``` esbuild的配置比之前複雜一點。 `esbuild-style-plugin` 本質上是 esbuild 的 PostCSS 插件；所以必須正確配置： ``` const postCssPlugin = require("esbuild-style-plugin"); module.exports = function (options) { const postCss = postCssPlugin({ postcss: { plugins: [require("tailwindcss"), require("autoprefixer")], }, }); options.plugins.splice(0, 1, postCss); return options; }; ``` 在這裡，我們刪除了默認的 CSS 處理插件 (SASS)，並將其替換為 PostCSS 插件 - 使用 PostCSS 的“autoprefixer”和“tailwindcss”擴展。 現在我們需要加入一個有效的 *tailwind.config.js* 文件： ``` module.exports = { content: ["./src/**/*.tsx"], theme: { extend: {}, }, plugins: [], }; ``` 這本質上是配置 Tailwind 的最低要求。它只是提到應該掃描 `tsx` 文件以了解 Tailwind 實用程序類的使用情況。然後找到的類將被放入 CSS 文件中。 因此，CSS 文件還需要知道生成/使用的聲明應包含在哪裡。至少我們只有以下 CSS： ``` @tailwind utilities; ``` 還有其他“@tailwind”指令。例如，Tailwind 帶有重置和基礎層。然而，在微前端中，我們通常不關心這些層。這屬於應用程式 shell 或編排應用程式的關注範圍 - 而不是域應用程式。 然後，CSS 將被替換為 Tailwind 中已指定的類： ``` <div className="bg-red-600 text-white flex flex-1 justify-center items-center">Hello from Red!</div> ``` ## 比較 迄今為止提出的幾乎每種方法都是微前端的可行競爭者。一般來說，這些溶液也可以混合。一個微前端可以採用影子 DOM 方法，而另一個微前端則對 Emotion 感到滿意。第三個圖書館可能會選擇使用香草精。 最後，唯一重要的是所選擇的解決方案是無碰撞的，並且不會帶來（巨大的）執行時成本。雖然某些方法比其他方法更有效，但它們都提供了所需的樣式隔離。 |方法|遷移工作|可讀性|穩健性|性能影響| | ----------- | -------------- | -------------- | ---------- | ------------------ | |大會 |中等|高|低|無 | | CSS 模塊 |低|高|中等|從無到低| |影子 DOM |低到中|高|高|低| | JS 中的 CSS |高|中到高|高|從無到高| |順風|高|中等|高|無 | 性能影響很大程度上取決於實施。例如，對於 CSS-in-JS，如果解析和組合在執行時完全完成，您可能會產生很大的影響。如果樣式已經預先解析但僅在執行時組合，則影響可能很小。如果使用像香草精這樣的解決方案，您基本上不會產生任何影響。 對於 Shadow DOM，主要的性能影響可能是 Shadow DOM 內部元素的投影或移動（本質上為零）以及“style”標籤的重新評估。然而，這是相當低的，甚至可能會產生一些性能優勢，給定的樣式總是切中要害，並且僅專用於要在影子 DOM 中顯示的某個元件。 在示例中，我們有以下捆綁包大小： |方法|索引 [kB] |頁碼 [kB] |表 [kB] |總體 [kB] |尺寸 [%] | | ----------------- | ---------- | --------- | ----------- | ------------ | ------ | |默認| 1.719 | 1.719 1.203 | 1.203 0.245 | 0.245 3.167 | 3.167 100% | |大會 | 1.761 | 1.761 1.241 | 1.241 0.269 | 0.269 3.271 | 3.271 103% | | CSS 模塊 | 2.149 | 2.149 2.394 | 2.394 0 | 4.543 | 4.543 143% | |影子 DOM | 10.044 | 10.044 1.264 | 1.264 0 | 11.308 | 11.308 357% | |情感| 1.670 | 1.670 1.632 | 1.632 25.785 | 25.785 29.087 | 29.087 918% | |樣式元件 | 1.618 | 1.618 1.612 | 1.612 63.073 | 63.073 66.303 | 66.303 2093% | |香草精 | 1.800 | 1.800 1.257 | 1.257 0.314 | 0.314 3.371 | 3.371 106% | |順風| 1.853 | 1.853 1.247 | 1.247 0.714 | 0.714 3.814 | 3.814 120% | 對這些數字持保留態度，因為在情感和样式元件的情況下，執行時可以（並且可能甚至應該）共享。另外，給定的示例微前端確實很小（所有 UI 片段的總體大小為 3kB）。對於更大的微前端，增長肯定不會像這裡描述的那麼問題。 Shadow DOM 解決方案的大小增加可以通過我們提供的簡單實用腳本來解釋，該腳本可以輕鬆地將現有的 React 渲染包裝到 Shadow DOM 中（無需生成新樹）。如果這樣的實用程序是集中共享的，那麼其大小將更接近其他更輕量級的解決方案。 ## 結論 在微前端解決方案中處理 CSS 並不困難 - 只需從一開始就以結構化和有序的方式完成，否則就會出現衝突和問題。一般來說，建議選擇 CSS 模塊、Tailwind 或可擴展的 CSS-in-JS 實現等解決方案。
感謝站長關懷～ 是的，這禮拜確實有遇到一些之前有稍微碰過卻不太熟悉的東西，也有之前沒有碰過的東西，是有些小崩潰...，但還是可以稍微跟大家分享與請教一下： 這裡有一些前期提要：公司目前的前端開發並不使用現在的主流前端框架，也沒有使用打包整合工具...（像是Webpack、Parcel這類的)，ＪＳ使用JQuery，並且將ＪＳ檔案一個一個的引入網頁中。 ## 遇到的問題1 ：CSS樣式問題 過去在自學的時候其開發方法是：在本機開發，然後在處理樣式與ＲＷＤ時就是開啟Chrome 的 Dev Tools來做調整，但也有遇過在Chrome的Dev Tools中看起來將樣式都調整好了之後，部署到網路上之後換手機來查看頁面時卻發生了一些差異，這些差異可能包含滿版、間距等等，這部分我自己理解的差異可能會是有些手機會有瀏海的緣故以及Chrome與Safari之間的小差異．到新公司後發現在更多的裝置上，例如安卓手機，則存在的差異更多，包含顏色、日期時間選取器等等的樣式，因為型號真的太多了． ###到這裡可以跟大家分享的以及向各位請教的： 這裡我自己有想到幾個解決的方式，第一個是最懶的方法我最想用但是我有些不知道該如何整合給其他人使用的方法，例如透過Vue cli直接在npm下載PostCSS以及Autoprefixer這樣的工具來使用，一次解決主流瀏覽器的差異，但目前我不太曉得如何在公司的開發方法下，不透過整合工具來完成這個流程． 另一個我想到的方法是加入CSS Normalize來減少各個瀏覽器在不同樣式的預設值差異，過去我們可能都有寫過非常簡易CSS reset 例如： ```css= *{ padding: 0; margin:0; box-sizing:border-box; } ``` 但這樣如果把每一個樣式的預設值全部強制歸零，可能會導致有些樣式到後來要重新寫，或許Ｎormalize可以只是單純地減少差異（也是因為網路上有人已經整理好了ＸＤ）． ## 遇到的問題2 ：API串接 過去我自己練習串接API的方式實在是相當簡易，我拿的是中央氣象局開放資料平台的API，所以之前很簡單的一行fetch就拿到資料了，毫無難度哈哈哈，但第一天公司需要我去切幾個版面並且串接運輸資料ＴＤＸ的資料，恩...我一開始不知道要如何在ＪＳ中塞入登入資料並且拿回Token的方式．以及我要查詢的數值該如何發出． ###到這裡可以跟大家分享的以及向各位請教的： 這中間我摸索了fetch的一些選項設定，這應該也適用其他的非同步請求方法，例如ajax、axios(這兩個我還沒用過，後續應該會來摸索一下axios），包含請求方法（method)，header與body中的內容設定等等． 至於API該如何塞入a頁面填入查詢參數並且跳轉到b頁面顯示查詢解果，在沒有前端框架全域狀態管理的支援下，這邊則是摸索了encodeURIComponent以及decodeURIComponent這樣的函式，將要查詢的參數在a頁面進行編碼並丟入到ＵＲＬ中，跳轉到b頁面後再進行解碼．並fetch我要的資料．最後是有成功的，只是覺得自己像薪水小偷哈哈哈，效率並不高． 這個方法感覺並不建議應用在需要輸入有個人資料的內容中，因為編碼的方式是雙向的，資料可以編碼也可以解碼，所以....像個資這類的內容就應該不建議塞在ＵＲＬ中用這種方式傳輸．至於要用什麼方法，這也是我想知道的． ## 遇到的問題3：不同裝置的問題 這個並非第一個樣式的問題，而是我目前覺得還沒有解的問題，就是我在網頁中需要獲取使用者的位置，因此用了navigator.geolocation 這個API，但神奇的是，在本機中都可以抓得到資料，打開Dev Tools檢查回傳的狀態碼與經緯度也都是沒有問題，但是在手機中雖然會顯示是否能夠取得使用者位置的提示，但按了同意後卻一直無法獲取資料，而且尷尬的是，我無法在手機中打開Dev Tools，所以我也不知道問題發生在哪....，過去有使用過navigator.geolocation 好像也沒有碰過這樣的問題 想跟各位請教的是，有什麼方式可以查看手機上的問題嗎？ ## 遇到的問題4：不同的開發方式 這個是我自己很好奇的，雖然說我知道Vue是漸進式框架，但我卻不知道該如何漸進．我理解的漸進式是，有些頁面或元件可以自行選擇要不要使用Vue開發，還是這個漸進式的意思是可以自行選擇要使用多少Vue的套件工具呢（像是要不要使用Vue Router or Vuex)． 會這樣問是因爲，假如現在有一份專案一共是十個頁面，我被分到了其中五頁，另外的同事則是負責另外五頁，誠如開頭所說，假如公司既定的開發方式並不使用框架與其他整合工具，我有可能使用框架進行開發並與之合作嗎？還是我這是一個很奇怪的問題，本來就應該要統一一個開發方式？ --- 感謝看到這邊的各位，以上有些觀念上是我這位小菜雞自己摸索的，是可能不是正確的（例如有些函式、工具的用途或使用情境），因此歡迎大家指教與討論，這是我這禮拜可以跟大家分享的啦． 謝謝～～ --- ＰＳ：我自學八個月的時間有摸了原生JS、ＣＳＳ、Vue.js、Tailwind、SCSS這樣的工具，本來我是很想要在第一份工作多了解與強化上述工具以及多人開發GitHub的部分，我了解這些終究只是工具且我自己也沒有到非常熟，只要可以完成專案目的即可，我的實力在哪裡我也知道，但以目前公司的開發模式來說，我需要考量沒有踏上趨勢的這個問題嗎？還是我多慮呢了？
簡單複習一下，在這次的課程中，我們學會了 - 寫 node 程式 - 讀取、寫入檔案 - 匯入、匯出模組 - 從終端機輸入、輸出訊息 - NPM 套件管理工具 - 非同步語法、同步語法 是不是很有趣呢？ --- 補充一點，我在課程中多次提到非同步程式設計很多餘，其實不太精準 拿 node 寫 CLI 當然會覺得非同步程式設計很多餘，那是因為 node 設計的初衷是拿來寫網站後端！ 相比於其他像是 php 或 python 語言，js/node 非同步的設計會讓網站後端的效能比較強大！ 詳細原因可以先不用知道，有興趣再自己去研究一下即可！ --- 再補充一點，隨著 js 與 node 的發展 套件匯入匯出的語法，有時會看到 `require` 的寫法，有時會看到 `import` 的寫法 用 `import` 寫法有一些額外設定＆調整要弄 我是為了教學方便，才使用 `require` 的寫法，現在主流都改用 `import` 寫法了！ 實務上，就以 `import` 寫法為主吧！ 不過，反正就是模組管理而已，你就看情況，隨便哪一種寫法都可以，程式能解決問題最重要！ --- 這次的課程內容，完全不需要打開瀏覽器，沒有任何程式是在 `瀏覽器 js 環境` 執行的喔！ 都是從 `終端機` 直接要求 `node 主程式` 來執行！ --- 坊間的 Node 課程，大多是從「web 後端程式設計」開始教起 雖然也不錯，但是需要一開始就碰 node 的 `http` 模組，或是 `express` 模組 從前端開始認識 javascript 的學習者，常常會在這地方有點「腦袋打結」 分不清 `瀏覽器 js 環境` 以及 `node 環境` 的差別 也分不清為何 `node_modules` 的內容一下是在瀏覽器上出現，一下是在伺服器端出現 所以，我決定退一步來教，我們先學老派的 CLI 應用程式開發 這樣，過程中跟 `網站` `瀏覽器` `web 伺服器` 完全沒關係，你就可以先抓到純粹 node 寫程式的感覺！ 古早年代，所有程式都是 CLI 程式，文書處理、作業系統、連電腦遊戲都是 CLI 時至今日，CLI 應用程式看似老派，但依然是開發人員最重要的操作 UI 之一！所以值得學一下！ 但我們學一點就好了，不用深入鑽研 CLI 程式的開發技巧，這只是替後面 node 的進階應用、以及後端開發學習鋪路而已！ --- 消化、研究完本課程之後，請接著前往下一份教材，繼續邁向資深之路吧！ https://codelove.tw/@howtomakeaturn/course/bap2xj
## 課程目標 - 替 CLI 應用程式加上顏色 ## 課程內容 這一課來做有趣的任務吧！很花俏的那種！ 我們來替終端機的文字，加上顏色吧！ 看一下這個套件的介紹 https://www.npmjs.com/package/colors 請先輸入指令安裝 ``` npm install colors ``` 安裝之後，記得觀察一下 `package.json` 與 `node_modules` 內容的變化喔！ --- 建立 `try-colors.js` 程式，裡面輸入 ``` var colors = require('colors'); console.log(colors.green('hello')); console.log(colors.red.underline('i like cake and pies')) console.log(colors.inverse('inverse the color')); console.log(colors.rainbow('OMG Rainbows!')); console.log(colors.trap('Run the trap')); ``` 然後去終端機輸入 ``` node try-colors.js ``` 你會看到終端機出現，花俏、華麗的顏色文字！ 更多用法可以參閱套件介紹 https://github.com/Marak/colors.js ## 課後作業 接續前一課的作業，現在來替我們的 CLI 應用程式，加上顏色！ --- 請打開之前的所有檔案 目前這些程式，終端機訊息全都是預設的白色文字 請把這些訊息的文字顏色改變！ 不用通通改變，改一部份，讓程式看起來更清楚即可 可以使用這款套件 完成以上任務，你就完成這次的課程目標了！
## 課程目標 - 把 node 非同步設計改寫為同步設計 ## 課程內容 前面我說過，node 有些地方的寫法設計，看起來很怪、很醜 在瀏覽器 js 環境，我們的確不知道用戶何時會點擊按鈕、不知道 AJAX 回應何時會拿到 不能讓網頁整個停下來卡住、等待上述事件發生，所以必須用「非同步程式設計」處理 可是檔案系統模組，絕大多數情況下，你就是要現在就讀取好檔案、讀取完才讓程式接著繼續跑，才有意義 實在沒必要用「非同步程式設計」處理！ 取得用戶輸入就更不用說了，程式就是該停在這裡、等用戶輸入完再接著繼續執行，才有意義 何必用「非同步程式設計」處理！ 其他程式語言，大多都是「同步程式設計」，例如用 Python 寫同樣程式時 就是一行一行寫下來即可，不用像這邊這樣把函式當參數傳進去 簡單講，javascript 的非同步設計，在網頁畫面上運作時，有其優勢與必要 但是在用來寫腳本時，顯得多餘而不必要 --- 來學習怎麼改寫吧，打開 `read-my-name.js`，改寫成以下內容 ``` var fs = require('fs'); var data = fs.readFileSync('my-name.txt'); console.log("您好，" + data); process.exit(0); ``` 執行看看！ ``` node read-my-name.js ``` 跑起來一模一樣，但是不是好讀多了？ 注意 `fs.readFileSync` 後面的 sync，那就是同步的意思 --- 接著來改寫第二個程式吧，打開 `write-my-name.js`，改寫成以下內容 ``` var fs = require('fs'); const readlineSync = require('readline-sync'); var answer = readlineSync.question('請問您的大名？\n'); fs.writeFileSync('my-name.txt', answer); console.log('儲存成功。'); process.exit(0); ``` 是不是好讀多了？ 新函式名稱，就是後面加上 sync 而已，node 官方知道大家的抱怨，所以有提供這些同步函式 但是，這段 code 不能直接執行，因為 `readline-sync` 不是官方內建模組，是社群開發的，需要透過 npm 安裝 怎麼辦？ --- NPM 全稱為 Node Package Manager，也就是 Node 套件管理工具 關於 npm 的安裝，網路上有非常多教學，請根據你的作業系統，自己找一套安裝方法 安裝好之後，你就可以使用「終端機」運行 npm 指令 --- 請在終端機輸入 `npm install readline-sync` 即可安裝 `readline-sync` 套件 會多出兩個檔案 `package-lock.json` `package.json` 用來記錄目前專案用到的 npm 套件，你可以打開這兩個檔案看一看 還會多出一個資料夾 `node_modules`，套件本身會下載到這個地方，你可以打開資料夾逛一逛 接著執行看看！ ``` node write-my-name.js ``` 跑起來一模一樣，但是好讀多了！ ## 課後作業 接續前一課的作業，現在來嘗試「同步」的語法 請把「非同步」的語法改寫，通通改用「同步」的語法 改完之後，程式碼中，應該就不會出現 callback function 了 也就是不會出現「把一段函式定義當作參數傳進另一個函式」這種情況 完成以上任務，你就完成這次的課程目標了！
身為網站工程師，對於 JavaScript 在 `瀏覽器還境` vs `Node.js 環境` 的關係，通常有點困惑 我認為單獨教一下 Node.js 開發，對於前端工程師的能力會有很大幫助！ 坊間要教 Node.js 通常會教「網頁後端程式設計」，這種教法當然沒問題 不過，我找到了一個更好吸收的教學法，就是從「命令列程式設計」開始教起！嘿嘿！ 命令列英文是 Command Line Interface，我們通常簡短稱呼為 CLI CLI 程式就是那種打開一個全黑的視窗，用戶需要手動打字，然後視窗又會跳出一堆字的程式 聽起來像是 40 年前人們使用電腦的方式，感覺是老派過氣的東西，對嗎？ 其實大錯特錯！ 工程師在 ssh 遠端處理主機的設定時，幾乎都還是操作透過 CLI 操作 使用 Linux 系列電腦的朋友（例如 Ubuntu 作業系統），日常中也會大量使用 CLI 即便是前端工程師，在開發過程，還是有大量的情況要使用 CLI，例如 NPM 相關指令通通會用到 --- 其實，CLI 是電腦程式最原始的 UI 介面！ Windows 電腦是一種 UI、網頁是一種 UI、手機是一種 UI 工程師在開發工具給別的工程師使用時，很常會懶得設計 UI 比如我寫了一個很強的檔案壓縮程式、或是硬碟清理程式，核心演算法寫完，我就想發佈給大家用了 我幹嘛還要花時間去寫一個漂亮、五顏六色、有按鈕的 UI？程式就用 CLI 操作就可以了，反正用戶都是工程師 --- 因為 CLI 是最原始的 UI，我認為教你寫一些 CLI 應用程式，對於 Node.js 會有極大的幫助 別擔心，這門課非常簡單，也非常好玩，也會讓你知道 Node.js 拿來寫 CLI 是什麼感覺 雖然這年頭市面上沒有人會去教 CLI 程式開發了，不過我保證你會獲益良多，還能讓之後學 Node.js 網頁後端開發，吸收得更好 嘿嘿，讓我們馬上開始吧！
04/28 週五 本週閒聊串 一週又要結束囉～ 各位本週有學到什麼新東西？有遇到什麼問題？技術觀念想不通？職涯有迷惘？ 歡迎留言分享 😁😁😁 --- 特別要 cue 三位完成 JS 九系列的同學 @birdie2019 @hung @superyngo git / npm / vue 3 這些相關技能有開始找資料了嗎？ 是否有地方卡關？ 稍微準備一下，儘早開始投履歷面試看看吧 😁😁😁
第1課 ── 學習 Vue 元件基本觀念 [作業](https://tinyurl.com/yst8ytys) 第2課 ── 學習 Vue 的 props 觀念 [作業](https://play.vuejs.org/#eNrtF11vFFX0r1w3MW0JM7MYiWRZQCE+YBSJPLo+zO7c7oydvTPeuftRm000lQCWpESMoCFRowIJKU2MMVWqv6azLE/+Bc/9mrl3dtvSiPHFPmznnu9z7vm6a7U30tQd9HGtUWtmHRql7GyLRL00oQy9s3reD7r4MsWDCA/RMk16qFVzPRvOuVu101WuGfKCrkXwSFAGeNnvxwyttQhCnQTYCSYsa6C1iurjhdDxcU4b+MxfXJJ8CFHM+pToE0JpkjGQoY9cdJzQBtgyDCMGNggZ8o/hEbug0e3Y76xY6Nhv45ijLChN+iTAQQUuTeN/bW7qmyO/l8YYvHn/A4UZg/OarodZmATcV4lL+0xxlI6BeWGUuZY4N+1n4eIacl1XILmzaLwkJEtfSZbE2I2T7uIst6aTNsjfoc86YWmHHbwA47SBGO3jwrvQJ0GMqWkmBCrp+PEVllAfLjrD7CLDvcVWrSevjV4GqRAq9NaVdy+5GaMR6UbLq9JArnGpdECHUf+vBPMFWVagEb93U4V102iuxXZIS+r9nFA3DlnDcFBaV97fGakm9WmGFy2Du/uEcmkJnTtXSlCKZ61DZ7RJh2uohMFQYWGKJObp3PSKpgEHkJPGPsNwQqgZRAPUif0sOwOyk2C1VRPwCiYikPoXEsL8iGBa0ACVKL7iiND00cazT3cmt69N129Ovt5+9v3m9MbPJbopJCG2mmIQK2q+VSvUiPNFTgHAgdNLAhwDmAfP1bReqduzle9vy+Sra/nWnRdnS9GQDrZHyDc6nJIsqJRko8lJM7hoE1zRLHhNPFxlB4dJHGAKNODxdHcnv/qTSIb86gPwvKQ2TK2GanJ3O791f3LvRn7v9vTBFzNB0rarrqrjomMX4s5KOxnNRkrRmzbMhKndZywh6PVOHHVWOGPRZSHR8q27k+u3nm5/tvfnRtOTpDpDPUjRedmayoE0N1/DE2fVvGp68F3AK2O0UZyTVIgUBW1GEJh1sdmSTEuUlLJejZBrlXJ+AfElPHxbXq8chjzcPHR6lBnaD+Yu0vNoEgy9XYoxOYTPbMADZ1nwmT0IJcv2XDDTFqGGVmvSzOY3EJruWMRGGVoM2guLWNW3Rajcq5LOJK1VOmbWFd/6q+kZ7RWOGVuN+ecxOU96Pu1GpIHqoj+nfhDAyJLHcYu4vAFrwpEzjAIGM/9U/WVB3YuIE+KoG8LoP1XPBqGABlEG6lYbaDnGI1PMWaR0coTT9rMIBvOJuhDGieyWLkmrwhRzEFHcYVEChkMU+z0iUB/2MwbT1oFlhsFGCDj4xVTg/DjqEgf2uB4oNeBdH9aBExT3lBHVSv2PzKiU6YFWDCln5r/zRMGoVTdeO66rX2/uLzkOH0n5k9+fPtrQyzJHovzq+t6TX//avbm3c3/y5fZk85e9nY38+p3882+n63+0iMhdBJ/5j99NH27lj7+xpysvBAhAlcgee6K05uBhSuSPf2sRXeuThz/ku5stkm+uTz9Zb4SMpVnD8z7q+5lP3QAPPDAZtOmXgCdqx0OOo1Je7xrzHhAp76fFgqh2/itic1PbmLHsW3C15VuwYsc/n8A67ZNikXuOrUdZoFcf4/513TfEVQKyWFTb8PToCqUiBRNabKHKk8L48pmRUBjN7/lB1Ae/dYzPoYWT9XS0gBpoob6g91CpWPWWtTXpMhpDWh3eYKz1T8Y3hooqOkbdVUkKaQyV4mTRx5hDT2loke4REYxtWEBXBEa6AFmejhA8W6IAiTdYKWuodLxWr/Y191Ut3juGBpiyCJZaR5QlBCtJT6Nj3r51Yzxd/y8fu3zKp7c8j/9B1qswP1/Wm3rlSK2WgEVxWD1YxHOLA/7vVx4W89FrRa96s7Uyr1Je+Xfr5OTR62T8N2L3XWg=) 一開始方向錯誤，沒有懂老師出題的用意，就照先前的想法做了控制面板，後來才想清楚不是單純用vue做東西，而是做出quasar這種開發模板用的componen 第3課 ── 學習 Vue 的 events 觀念 [作業](https://play.vuejs.org/#eNrNV1tvG0UU/iuTVVHsNL7kIUJaArQplwgRhIjEC4vU8e7YXrI3ZmedGMtPIaJtIvJAaWkkbiK0qaqmCCGakhT+C/I6zlP+Amdmdta7rhPaChCWsto555uzc8755ptJR7sYBOVWRDRdmwtNagfsFcOz3cCnDC225yPGfA/Vqe8iQytXlIXPMLSXDM/wyKrAWqSOI4ehjuEhZPoQwCMeC3XUGYbpTnOnhRkuFCUQIUpYRD01QijE7QX7bTtkOvpA2dDQzX8BphD69RY8dMSadlgWk0Rw9XNwjTg6rHnRdw0t5zJ9x6fcRYk14mJklV1S7gYlxBsBhPYnREfV8mzOSv3Is3RUx05I8vCPI1grLJJGWYesw1NltmyH4Xw7HzXN7TU8mkCam2M3mqzm8C6dnmEQ0cAZRagUXxyX4kgiwwxHc3+GFHmdme01xuf4FjaXT0vSwnQZZrfPzNH2RufLDGeeKb9/qYOLtIwuehahoT9KtXwr28Rx/JWzEh3T7P8XW8+flmDNebLHudRWmjYbn9vYJj5XZv9EhqX/KsPn2IYfJm9dEG1ldwlr+hbXaOkTMlrwUm1GCDuEsoKhLdiwSHQeefBnaBMThlYUcYZfSAozdjbY89P//HrnZH/rySBKCsZGeTNxnr0S+VzBzGxCXnLEj6OIEShcYnChjDDmpxA38JrMVdLTDwaMuIGDGYERQnOW3UKmg8PwZWilb4HeCDt41NGm1toq1X0KKAcOMOTXh6eZoSnIBUmqEuGsSqDlDNGGSF0QS0HEIOMU5FJOMcg4OblKOURKtwyKM0z5+XvGJYimfGKAXhW0QwnJsmEE+dJAYnQKuiILWoGKwttcJVNnGIas7fDXKdl8F9OG7YGAiQYH2LKg+7AjKHHB0jW8Mm+GxK7YFoOGz1SrLwh0k3DVFIaw1RQmyw7hW21YkUNWhaWBAyGPMiASjtIK5Vb+FDYM8uuVYHe6sE9ChimT3wa+JKvVprXstYhfpCZKJTS4t9F7/MfR9d1476v+jUdH25/G62u9g18Hd28ffX43fvhjvP7w5HD7fSjS0huX0LuwtIYoNC9Fk7Eg1CuVsG7ymB+FZZ82KtzDqwih44Pfju5tpFcrDkIy/snhZm//dv/6g/7WL739jfjKzfjat4O1x3Kq4ASCYbzz3WD3fry3PVjb7N96cPz91uDqzxIzJE8O2L/xWXz/ZhYoKDkGE6/fifceJZoCvMpDNq8eX/ky3rkT/7SVXAEFvfq7P8SHiSXhUNZ0wXRsczkX6fjgm/4X1+LfN6G2vYODeOMWKpU4rdKdPO5uGlAfSqvkJZHoJUaHN5CMMufsic7nbFKk34ncGqGJKdHoed93CPYULhHorPVppKeWkRclQa4SnWRTydKA4xxxbVaYzIjJ5LRcdVFhdcFawKbyWoOjSRJPl9VIj4ykNmk5UkfNp3BleQ9bdgSVXMSsWca1sFBQOjFbhX1fLaISKqRqMCtMRVDtyWB1Mg3l2B5ZSPbqZRM7ZuFch9e0i6aSnVm8nILrvseWRMFz0CkhCRlcKhV/G1FmMg5YFUgU+o5tIXF+q1ldWUt5BHQ6yS7ogiZwZZMNO0Pcyqp9koLZ8nvwP5MQnWRZ6diM4IJI9cC34diiifipOHrTbxEKwQwWQhpEnynP8HUKiuWEqvsXUnaEYQ==) 嘗試從quasar的原始碼反向工程做出一樣的效果 第4課 ── 學習 Vue 的 v-model 觀念 [作業](https://play.vuejs.org/#eNrNVltv3EQU/iuDVdQN2mtuTc0m4iIh8YAEqtQXzIPXnt012B4zHm8SrRa1TSuVhrA8tAmKkKDqRakCSSsQDckGfgzr3eQpf4EzF3udTSraPvXB9pwz5z7nfOO29n4QFFsR1nStGlrUCdiC4TteQChDnyx/7AcRQ3VKPGRoxZJicHlDe9fw8ZKQs3HdjFyG2oaPkEVA2cc+C3XUTk108nzPNpmZm5ByCFHMIuonFEIOl7xquhHWkR+5rlBBqAOO4C0oD7MmsbllSS+azGqmFHcdMWynDI9EPtDcJWdwS9VSmiUQDHuBazIMFEJV22khyzXDcN7QasReNjTBhx2VRhKp7hEbuyJUEB3FbWiJxHtRAMni04I5Hy+K9QSaX0C5kR6aR+nWyIZr1rALanXHdbE94itaUKU3IkISMdfxszGmnEyU1RIUGFbVUqbsQIZs2eXLd2QreCZtOL6OyuLcA9O2Hb8hyY7hF/nBSMFFx2Zw+JVy+W0h2sROo8kEI2w1Bct2QnC0rKO6i5cEhy8KtkOxxRwCXiziRp4vtmqm9VWDQsvYBeASqiPaqOWm5vJo6hJ/JmQE0EEqYC2vZSaCT9BbhQI62l7tH/4zvLsV7/w4WP9ruHkzvrXSP/jz6Mnj4fdP4ueP4lvPT3qbV6GoVz76EH0K8UmvvBhNxoJQL5XCusVtfhkWCW2U+A6vI5iOD/aH26vJXHEZJM2f9L7r7z0e3N0ddP/o763GtzfiOz8frRxKzVZBnDMCRvzwl6Ot3+Kdzfha799r1+Puevz3BqyloDjSU2KDX2/2D9fiH9aGW89Oerfj7m7/4FF/b41nuNJFn0VmaFIUr94b3ts+vvFgsPXgqLt7vL8BAcVPnw2f3o/Xd47v7w4f7sc/bQ02rh/fuBOv/Q5mTnrfSp+yoRFoxr2uZCX9o5ioUFC9kgzvedATUALFSwBFZKKjK4xC/ygskZ509AEhLjZ9xU2cjfNHo8GhjC0H8FXmEscZuFIQJd/YczgAfm5oZ8bM0L54RSyyiM9MCJCOAElMZgqcdjLjowHUE+V2mrT85jPpplXujBR5mqDG8FLWWksBRDaNFEmEa9i8wLPOXTyT8cU8uoBbcCUUGcw2hq4dwxGKv45gJMcxTfZindBRegvttmrRTqdaEquXwpZiWkPVKiR0JABQDNJOCwsISLBnphxwuIBpN3zpbkzLrIUAHExqubguYEfoQAVJkKWo6ada0CWT5bIXIl52kwqBDNZU5qbyqHLpsngpuIHbWNygWcgDG8p6Co+TwHlppyOzep1YUYi+kUWFvpRcOCDHTrjStcgqsZ+JeW4mjyYrk/CameEhIxRapgszUS5eTlwV1YSrH4QX55sFYSkyC9A7O8sftU+ojUHdh3+MDKNQI4wRD+oAZYCjgejP01YNn6rzC0WNR5O0MIUCJLQsjIj4hS4Wm45qAVBiPKwa5XeQj8MwVymKesgCpJP2GiWYhhtoGpKYHitB5VSq5xg6L9t0+NN8U86ZjMddnD3q1MP/CZ5bn8rZG7XzH5rEyeY=) 同上 第5課 ── 學習 Vue 的 slots 觀念 [作業](https://play.vuejs.org/#eNqdVd1uG0UUfpWDEeJH3o0TCqkWUylBofiiroQbIaS9Ge+O7VHXM6uZsR0TWSoqkVADBFAFFarUIgpEKj8XVCjQwtNk3fQKHoEzM7trO2mo2ht7zpnv/M45325X1tLUHw5oJajUVSRZqs+FnPVTITVcGK8TzqmEjhR9CCv+UqExFmHljZDTLYuMaYcMEg3bIQeIBJpzyrUKYHvmZFI1lzHR5KWXHRBAUj2QHLYn6ApyRJ/qnoiNrZNHREe9UjLOB5rGpaIvBhxl49MojKf6UlkJCpr204RoihJAPWZDiBKi1JthpS3icVixerwpE5XoMaZxrgd4j0JE+IsaOozHMBYDCYoMaYzZRyylCjABlpgLUKzLgXHfBHbGZXgYeioROiCRZoKXzhHRHmiNmrcuNi81mpsbsNaCNTi/udG6VF/K7wpMq3G+CY1mqS+jLC1UaRRFObYJ/19go+OSJyPQPaagbWFVFGh+xkdANWW8C4pSDu2xsXimMt/faJ0oq3nxhOrfWzduPGWZRsTnxdMCDkWlx4k5vuLmrk9kl/EAanbqUhLHWJgTJyH3zVg44IjFGkdvuVZ7wUJ7lHV72irUsGdVMVMYaBxAV7LYarokRYSkfSuRBEfCiwTOKEdLpYnULk7IXXUuVFvImMoAOG6ONWyT6HLXvlSAE9Wjkhk7swCJQBz6jWg7GThwB/17in1AsQr/bBE7GkhlsKlgGF4eq9Z/rcClQjHzWgFONDaNDY1TzNDlFwSkg9bFbueFhBW7//PGpK1Egrtp1YwrijDX4lkt2Amb/qjHcqBIScQ0NtBBtSS8cJhfYaorChLGKTE1zLUu6IkhNm0+wZk7f8WBkQ3y569UK/MEZijvOc+DkB/d3c3u//nw7m7JVuYesp2rh/d//+fBJ4cHP0yv/zrdu3d4sJt9/HV27dbR1b9C/uj250f7Pz/85iMwIw+oy+7cnl7/O9v5Ptv5KfviWrbzY/bLHyF3yzCPym7uo6/DgyvTz76c3ryS7f2WfXjPmT769tPszleFab6rMN3/LnuwB55nxrukt8fRbypFapk3Nw1gXYiEEm759Wn40Tw2wbbLGUma66C4nwuRH6o5XwT4jtjACRrWTdXnMKT7cwta+ipcuQ4VcOCkTxe0x82ftOl+mXvelFNG3M/5LeeFLW+28mo4esxurZZbY/WjnBHO1Nz4min1SprwV0p0QjXOqKfMeLr1qy2vnn193leH9FmCk/uuaAstquCRNE2op8YKa6zC2pByhqy8jjEuXyBRy+rfRssqtGhXUNhs2C8iwDs0GVLNIoJWkpGkitzOlaeQRDqnLOTzq+3lDjErcwrFlMRhqC1nD3jVlWcamc/4sW4vcIIWyIy5CX77XZNKuWTSTkK3XFfw4I2k4VPze4JdLRP4xYbM0agnScwGuARnUuNpkQQm/wFjNTqv) 嘗試模仿quasar拼裝不同呃component 第6課 ── 學習用外部狀態管理 vue 元件 [作業](https://play.vuejs.org/#eNrtVktvFEcQ/ivFhshrsi+bWEo2hgBOohwgQiBx2gO9M727HWamx909axtrTwQFsBUOIRA45KEQHkJAFEUBYkj+jGdtn/gLqX7M7KyxwcohyiF7mO2u/rq6q+qrql4uHY3jWj+hpWZpVnqCxepwK2JhzIWCE0vHEqV4BB3BQ2iVavVMone0Sh8UkB8xEvBuEWklObIV0UWD9WmHJIGC5VYE4HFUENFIySYsw/wxFTXzYyswb3VokdM/qOhdPlGkPGk1AAiqEhHhdhJQoZrQIYGkFVQddZgI3RwGeAdw+0OqetzXR1oNZuPU9MGRTicro3DSbMy22u8CUV4Pt9uZNiJR1M8FIU8inGt1WqCPnq3n3sWJomEcEEVxBjA7X20rlOpDAtKmwaFW6ag+vVWyQo8HXKCwHRDvXCZUdFFVs5WFHlPoZrvSlOw8ReFUJhB4Hd8Oj8REoLertI9fxBgr4RDsMwO74fBs3dwou5xvXd+vhtw3l3NYs44In/XdEOA4FzQEFsskBF9fDiRTQNDhOh6SekoHC4jPYiaZx6Iu0ICpGpyiArcIGtMgoJGfyEyj3t/nQRIr9Fc2kqANYKgVKSV4th0dFPlMMSYhpqJD0VQfx4orEprA6B8lQBTwMMKVPg0gSsL5hIRAF6nwGJ7CkJAhkERVICIqkRAy5Dmp2LN0iNDImjO+PrK+GMdRJOeOc5mHZpdYvi6aO8RzLKJ7i6n+dQJO9Lpg3V4uHg82jm20dyXmnM2qf4GaLn+1IW64R3rm6P8J+t8k6G6R/Qckna0XSilOpVoK9PCALeQhEV2GLaVhanhMfB8DaqeDVtTm/pLFLTBfYT2fajTeNsge1ccbgez3jKiN7ugas6wbmvDWND3oHaRWF9Z3d3SpUio2v7HGulMLjAWPTfcz/D1DgoQ24RjnASWRaTdvah8YYPACIqV1rSIsoqJVwoxgHRSN1I5lRL5F9ojPF3BtjCpFxAKLECE1RAZcIdD9ZfhstFs0avm1nMkckwZZ3ATSlpgwSjsRgGH+odNtsDAvUNNSE7qC+TZ8yEiKzsfWGiHMwy8V1vujA5pt2kH2Z68Lh0Ui6TfI3k5+NdKi2y5PvT9dgemp9/Az494EPCaYj3jFRm3GCDoswCs1oW3YG1Epy7hkweer6EW6mJOv5rzqPJJRcwrL025863Q6Zikki1XH2JlGI160eC58KqoCK1eCdHrXifNjp7Ydexi250htxp79KptHjz7N5n3VKmw+WFl/8dfGtXvpo2+H159t3PoivXhhfe33zft3Nr66nz75Ob345OXzW2cSCqc/mYOTGElrjOZFTylkfL0uO57W+bmscdGt6xVNPVSdrv2x8WAlfwhqEFj9L5+vrj+9M7z2eHj1t/WnK+mlG+mV7zcvvCh0I8BpevuHzXsP00e3Ni+sDm8+3vrx6ublX7c3pzHg8PqX6cMbRaCpjztg0ot300fPLEYXvnHI6uWtS9+kt++mv1wtdDgY3vspfe4kEqs5MrQoOuIFzDs3pmlr7bvh11fSP1fRt+tra+nKTahWdY7tqZgU/NGE00ogt1x/0fbP7SA35m6TafOa8FkStqlwIlOft8GMiXnNyvYaK7dL+3MBdpuTMY+TeHxtL5WubejgbHPFKXQkyXqFdSUu7KchU+UJ23s+1q1nomKtnBw9RzTLEZu/+kdZhwVGeynvys6XufvyBZt4p1zenSCqV8PaUi7bwH+IKQqYXJNQhbKLPMqMaBLegYl4cSJXFWAF+9S1nrMeCbzy/mUdgwHmqk3PybM5uIPF7bQJ0Bj0gCkhBVxeWt6o0VqyE7BhkIAVk/n6EeOdK9zDMsL8OeHAvdTsbHnZ5dIAK4tuFjaMr+sXWVAtkYtBifDtU6h3BYGXCKkjFHPmGgOSXZAoK/gSraIw3WiE+Dgj0vXt/Khmj/ez/mSgWDJrrmgWyuHgb/u4VhA=) 稍微翻了quasar的原始碼，還是搞不懂為何上一個v-close-popup的attribute就可以讓按鈕有關掉modal的功能 很神奇 第7課 ── 學習開發狀態複雜的 vue 元件 [作業](https://play.vuejs.org/#eNrlWdty20YS/ZUJJSekQ4CgHMkWLXkTpdbaVG22UrJrX0SlNCSGJMoggABDijKL/57TcwGGAEQ5l7fYLgno6enL6Qt6xtvOD1nmr1eiM+pcFNM8yuS7cRItszSX7Lcf0zjN2SxPl2zc8Qc/PyoCsY87b8eJ2Ci2UMz4KpZsO04Ym6bYm4hEFiO2tRJ2fVoKueTdnmZjLBdylSf2jbGF2Iyg5SgYBsM3b8YdtYWxHfTgp3pbCrlIQxKs3x+4nC7KN9K8kiIsCct0leCdVBKBJF0MSh/xIsUyi7kUeGPsIozWbBrzorgcd6ZpInmUiHzcUYtYnqykTBP2/TSOpp/AAnvZJfvm6L368w0YpSjkxUDzKQVqH8QaEXj5zZsqQNbeMg1FrMWMO2xgtQwsu326GDhW4rWQjzE9vtTILXk+j5IRCxRMGQ/DKJnr19048Sdp+KgZH6JQAqthELxQrAsRzRdSEYr1wrCXbus9pbhhkG0aLO9YzYaKCzAbMzv9jpM1e0nWlj2HUySfT0bs9s5kBmNrHkfhzfXVHtHkUWsCZXmaqbxU6P+fxysxYh9kDicNh1hGlLm3484qgzFiVHGOO1pJlYVaARR+TG/mky4eStMpHZNC0uIN0gS//GI1KZSq7rDPXvWUWXuM1w3GV3122sJ41WA87bPXFaPB7TbjeSF+SiRZdtNnw7NeHzGtaNcttCtFuzOyNCgK+Y/pf8Smi4enfPzfajkROXHcBnc9X6Ya2C7E+cikD5LnsnvSR2yCcecJ9x0Zwz8jg5BxZJz8ARkGtPuj4y05tFO/rvWvq919DRBAj0yphXww+CRExmZRDmtiISWq5MguRjPW/Wrw61H3NvDOf/De322D/tmudzyIfGocSpQjizG5iApfdxm0RTSJb5tpZHn8WCRzuWAeG1YeoRAr1Xuan9d7TIXQba2CPpnR0GKBUTWJLShLEwjhSAcoxLESVZyEj4DMhfQVvZJLRhsWvcLeXbKAff213WioF5fs5PS06YGJkHou09e+9So9ht32Ehh26/u+ZbSFAAeZiAvRUAMed4sV4+yrVZIohASSUUj2OGY74VaPFeS11FvwJIxRrvjY/YjnuXCl6EqY8Fx/eGFZZe89bO0eb63ZqNJdnwX417svu6fhAtVhHCrGNq6g77Cd3O0cngoBbRN9OHI+/XR1yLafuVz4fFKUgYKRSGoK8GFbmxuH7sanbG9uOym3tfqiiyMXM3AT9ioM/izN/82ni25XxH0WJSF1hct3bq5oDJZRArdF7OPBSUCzyCn2tMjpM7q/iLzSiyrrnWWQ1LfWR1r9gs+byOUj6tbzkANq1qCCtflwq2y7c5N/MGAQfB/jk85zb57zMMLwhlDU9gDFJq1n2+KeJRNEeZ5j+Ao/RJ+p0rtUq4AVXvcwNGDk6LEB65LDhvgtWtwLNZyowdJUTmWnA/tDzjN42dD105LPSdk9AIumlSdqevXOg1DMy3geb+vZSMXAgheHOFAF7NWrgyyoAHZ2dpCF9JCfJXS6rBsTq15sazEItNNgnmxeLWyHuotGGEOZ/Ij5tgsT3ATW25uNx/qgHxpzuPlWKkvcLmW+tdYoPT7V7Cpl27YnNu8BpkLxKVmmYbxkgX9yfo6scrsBUU/fvHapKHaiDoffsXJGZ2z45qx6+RcycxIjghgpSyINmA+LSOpjUD2K9liiV9xRszrsKCj3/PiSYP+BgH9R0J8P/BcEv1aqNl4VIs8dvL7yPHZRrOf2DCRhC9vgbHSKAY092gd7NqNlnLa2W0oJttvRCWlDgunQRGKY5zVPdKZtQA66iPtutbrMEGyGneroFpHrlcdaChh/4YmI3eRwhCi43DX5mInShYpcOw46iYYeqUc7rL3eW1H9D1T0O1TESM2pZYHs3laN0VMUMFTh3729d2V9r3yDLGeq3VufxKscy7XZpWJpHl9rgCIxlY4C+K89fC5B60bltzKd0QnDRbvIeFLuxtp/+YRQbritqhDOOOWLxMDx7Ya+e+POtf51hcOb+WghY0otA1LzTIirz3xbkNtXTZjVokvHtw5kJLND4pTpGDja84G6lLb7UMD2jmctcWn6Zu1P1CzdcOCLDWiO+8dijc/uweT463cbjE3SjVdEnxVlkuahyD2QzCWFKe69m4+TQF9PwKCXZgeuLLINK1K4QPlHByr613vLXg5KHQsepg/Qir+n4AYfp5FTzaLGEqWd5o0VbgW+M1qqyxNs05S0iGSUwqNcwOloTW3YMXc0EagMc8SgwQE46qsMtT1KUH0lGqUsTK9pjO+tIn/2VKxKkKomoMuFqXpRa2nGp5F8BKt/ou2AJbZnaRvSlaS5cMQS3Ojt3RqdWizr10rU2TxMPEkBV5YjtiLHprzQ29UqMmYOu6fwTuSKPIOv3oMRfR5o28voa+D33RseBrRsN+Yeq43PiRDFVSutKQijAukJjGax0BYo4z1guESoSxdIZ9UJTABXeUGIZ2lUOlpN5SOmQMLNC2Q4aeSmZBUrgDP5FAE6oMmxb+rGxIbAXL9Z5LxYzNT93j41t9d+hlxG1LxXKQO0KNfRmvp0IDI/Av/MpH2VWxGN3iNWP0Osed6tPMY9U43QWj5NO6jMIf11oA8I9dVcABM4kKTm0SYzylyH4+MCnUmVtBOk0ciCWgBrGCAVlwrdQbjLi1NrqcW/tLzmUMPkUR0ItW7zRTzAD3K5anNOCzqhVG3d/2QxPOfzaJGuba8spjyGs0Nf539bA2zT3lCzTD8DABD+IbDW/P17IFUt7HZ/lrgjZcU/BVXj6N8DJ6Q7087+bHBm4HjiA0XqZzHpWERhKOjuZv9/OXa/A88llUk=) 研究了前輩的作業才發向若要讓input的值可以被檢查就不能限定number，要不然輸入非number會直接show出來，卡這個很久... 因為想學quasar的樣式(range條的顏色變化等)做了些研究，後來嘗試把所有想法塞進去，結果做出來是蠻炫的但不是很好看... 心得：覺得老師的出題方向就是幫助學生從業界的需求去學習，然後一點一點從小地方開始做，並且能夠自行研究，而且不強調怎麼寫，而是確實做出來，很務實的取向，覺得獲益良多，上完9堂課默默繳了不貴的學費，有新的課堂會再回來做。 目前正嘗試自行開發一個網頁應用，寫cdoe真的要很有耐心，其實想想現在有很多輔助/查詢工具真的很方便，越寫越佩服那些做框架的人...
## 前情提要 逛論壇或網站常常有惱人的蓋板廣告，要馬就是要你登入、註冊， 要馬就是搞一堆課程的販售廣告， 對重視使用者體驗的人來說，真的是一場噩夢！ 為了解決這個問題，我模擬了AdBlock的其中一個功能，刪除頁面上的元素！ 乾乾淨淨才是王道阿。 ## 效果 按下ctrl+Q啟動刪除元素模式：  被選取的會加上邊框色彩，讓人確認是否要刪除：  點選確認後：  煩人的元素就此消失在這個永恆的宇宙裡。 ## 觀念筆記 ### 套件一：toastr ```javascript= //toast.js cdn匯入 const toastJS = ` <link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.4/toastr.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.4/toastr.min.js"></script>` $('body').append(toastJS); ```  [測試效果反應網站](https://codeseven.github.io/toastr/demo.html)  [[十分鐘學習] toastr - 簡易提示訊息](https://ithelp.ithome.com.tw/articles/10197861) ### 套件二：SweetAlert2 ```javascript= //設定cdn使用Sweetalert套件 let Sweetalert2=`<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>` $('html').append(Sweetalert2) ```   有提供很多API範例，還可以自己定義可愛的小動物XD [官方網站](https://sweetalert2.github.io/) ### 監聽鍵盤組合鍵 ``` document.addEventListener('keydown', function(e){ if(e.which==81 && e.ctrlKey==true){ //..... } ``` ### Object.assign 動態修改樣式  [用JS動態修改CSS的三種寫法，花式JS玩弄樣式，嚇死你的同事！](https://codelove.tw/@JsLover0018/post/Ja64Kx) ## 油猴程式碼 ```javascript= // ==UserScript== // @name 刪除廣告元素 // @namespace http://tampermonkey.net/ // @version 0.1 // @description try to take over the world! // @author You // @match *://*/* // @require https://code.jquery.com/jquery-3.6.3.min.js // @icon https://www.hexschool.com/ // @grant none // ==/UserScript== (function() { //--------------------------------------- // 宣告變數 let set let Check = true; let List=[] //設定選取的border色彩效果 let styleNeon = `@keyframes neon-color { from { filter: hue-rotate(0deg); } to { filter: hue-rotate(360deg); } }` $('style:last').append(styleNeon) //設定cdn使用Sweetalert套件 let Sweetalert2=`<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>` $('html').append(Sweetalert2) //使用者點選某個元素 執行刪除元素function function SetDeleteEl(e){ e.preventDefault(); set=e.target.class console.log(set) const border={ border:"4px dotted red" } const Neon={ animation: "neon-color 2.5s linear infinite" } const NoBorder={ border:"none" } const StopNeon={ animation: "" } Object.assign(e.target.style,border) Object.assign(e.target.style,Neon) //e.target.remove() if (Check==true){ Swal.fire({ title: '確定要刪除這個元素?', showDenyButton: true, showCancelButton: false, confirmButtonText: '確認', denyButtonText: `取消`, }).then((result) => { /* Read more about isConfirmed, isDenied below */ if (result.isConfirmed) { e.target.remove() List.push(e.target.className) localStorage.setItem('List',List); Check=false; Swal.fire('成功刪除此元素!', '', 'success') } else if (result.isDenied) { Check=false; Swal.fire('動作已取消', '', 'info') Object.assign(e.target.style,NoBorder) Object.assign(e.target.style,StopNeon) }; }); } //選取流程結束後 解開選取流程的事件綁定 $('body').unbind('click',SetDeleteEl) } //toast.js cdn匯入 const toastJS = ` <link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.4/toastr.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.4/toastr.min.js"></script>` $('body').append(toastJS); // 當使用者按下Ctrl+Q 就執行主程序 document.addEventListener('keydown', function(e){ if(e.which==81 && e.ctrlKey==true){ RemoveListItem(); toastr.options = { // 參數設定[註1] "closeButton": false, // 顯示關閉按鈕 "debug": false, // 除錯 "newestOnTop": false, // 最新一筆顯示在最上面 "progressBar": false, // 顯示隱藏時間進度條 "positionClass": "toast-bottom-right", "preventDuplicates": false, // 隱藏重覆訊息 "onclick": null, // 當點選提示訊息時，則執行此函式 "showDuration": "300", // 顯示時間(單位: 毫秒) "hideDuration": "1000", // 隱藏時間(單位: 毫秒) "timeOut": "2000", // 當超過此設定時間時，則隱藏提示訊息(單位: 毫秒) "extendedTimeOut": "1000", // 當使用者觸碰到提示訊息時，離開後超過此設定時間則隱藏提示訊息(單位: 毫秒) "showEasing": "swing", // 顯示動畫時間曲線 "hideEasing": "linear", // 隱藏動畫時間曲線 "showMethod": "fadeIn", // 顯示動畫效果 "hideMethod": "fadeOut" // 隱藏動畫效果 } toastr.success( "已開啟刪除元素模式！" ); $('body').on('click',SetDeleteEl) Check=true }}) function RemoveListItem(){ if (localStorage.getItem('List')!=null){ item=localStorage.getItem('List').split(',') for (i=0;i<item.length;i++){ item[i]='.'+item[i] item[i]=item[i].replaceAll(' ','.') try{ document.querySelector(item[i]).remove()} catch{} } // item='.'+item // item=item.replaceAll(' ','.') // document.querySelector(item).remove() } } //-------------------------------------------------------- })(); ``` ## 心得 短短150行左右的程式碼，就寫得好辛苦！（汗 過去寫過很多次類似的東西，所以基本上沒有卡關的地方， 只是設計邏輯、嘗試的過程還是比想像的還要耗精神( ´•̥̥̥ω•̥̥̥ ) 但寫出來比過去快很多，也比過去好看超級多的。 給自己一個讚讚！ 重新把localstorge複習一遍，Object.assign、套件使用等。 算是一個確確實實的實力鞏固過程。 ## 延伸 未來可以新增控制黑名單元素的UI。 可以新增、刪除，看有哪些元素被列入要刪除的黑名單。
有幾位同學已經寫完系列一～九的全部作業了 整體能力已經可以準備開始面試前端工程師的職缺了 這邊寫一篇簡單說明 # 需要補充的技能 前端技能中最困難的部份已經有相當基礎了 剩下有些東西沒那麼難，但要學一下，上班會用到 這些東西我未來可能會寫教材，但我最近很忙，近期無法寫新教材 ## git 程式碼版本管理工具，找書或者上網找文章學一下，至少要會 add commit push pull 這些指令 ## npm 作業都是用線上環境，實際開發都是在本機為主，需要知道 javascript 套件管理工具 npm 怎麼用 ## create-vue https://github.com/vuejs/create-vue 要能在本機架起來 vue 開發環境，這款至少要知道一下 ## vue 3 教材安排是學 vue 2，但現在很多公司都已經轉用 vue 3 語法了 背景知識大同小異，但語法差異不少，要知道一下怎麼轉成 vue 3 寫法 --- 老樣子，學的時候有點一知半解沒關係，大概會用就好，畢竟是面試 junior developer 的職缺，公司通常會有工程師同事，技術長＆他們會協助你實務上的細節 # 投履歷的公司篩選 在找工作的時候，投那種「無經驗可」的職缺 很多公司會寫「一年以上工作經驗」，這種就是不歡迎半路出家剛學完者 因為很多人從補習班畢業之後，連 hello world 都寫不出來，公司想要避免遇到這種人 就先投「無經驗可」的職缺就好 公司類型基本上有分「接案公司」、「做自己公司產品」兩種 第一份工作沒差，去接案公司練功、去做自家產品慢慢打磨產品，都可以，待個半年，先進入業界再說，都可以學到很多 長期來講，我之後再寫文章說明差異 # 履歷表的寫法 基本上你照自己習慣寫，簡潔有力即可，這行業基本上是實力主義，唬爛幫助不大 但有幾個東西務必要寫進去 ``` 學習的過程中，為了瞭解網頁的基礎，而不只是當個框架的使用者，我有用純 html/javascript 練習多個元件 [附上第三課全部作業] 並且有找一些看起來很紅的業界套件，練習導入使用 [附上第四課全部作業] 然後我有用 vue 寫了多個應用程式練習 [附上第八課全部作業] 還有試著拿 vue 生態系的元件庫做範例，模仿做了幾個元件 [附上第九課全部作業] ``` 我認為履歷表附上這些東西，會讓99%的面試官印象深刻，覺得你幾乎是「即戰力」，對你更有信心 # 結語 以上，如果你寫完系列一～九全部內容了，那我認為你離上班已經很接近了 如果正在準備轉職，準備一下，試著投一些履歷試試看，試試水溫 不用急著辭職，因為今年全球景氣充滿不確定性，但就試試看能收到多少面試邀請，等於秤秤自己的斤兩，比較有個底 順利上班之後記得來寫文章分享心得 然後最好養成習慣寫技術部落格，直接在這邊寫即可 求職過程有疑問，一樣多多來這邊發問即可 求職卡關、面試不順、薪資待遇有疑慮、業界實務有困惑，都上來發問即可 我會視情況公開 or 私下回答 以上，有打算轉職的同學，祝大家早日上班囉～
原文出處：https://dev.to/mikenikles/why-i-moved-from-react-to-svelte-and-others-will-follow-210l # React 多年來一直是我的首選 2015 年 10 月 14 日，我主持了 [首屆 React 溫哥華聚會](https://www.meetup.com/ReactJS-Vancouver-Meetup/events/225362860/)。當時我在一年中的大部分時間裡都在使用 React，並希望將志同道合的開發人員聚集在一起。 那時的 React，我敢說，是 web 前端世界的革命性的。與 jQuery、Backbone.js 或 Angular 1.x 等替代方案相比，使用 React 進行開發感覺直觀、清新且富有成效。就個人而言，隔離建置塊（又名元件）的想法真的很吸引我，因為它自然會導致結構化、組織良好且更易於維護的程式碼庫。 在接下來的幾年裡，我一直密切關注 Angular 2.x+、Vue 等，但沒有一個是值得跳槽的選擇。 # 然後我了解了 Svelte 我第一次了解 Svelte 是在 2018 年年中，也就是 3.0 版發布前將近一年（見下文）。 “[計算機，為我建置一個應用程式。](https://www.youtube.com/watch?v=qqt6YxAZoOc)”[Rich Harris](https://twitter.com/Rich_Harris) 讓我著迷Svelte。 > 如果您不熟悉 Svelte ([https://svelte.dev/](https://svelte.dev/))，請存取網站並花 5 分鐘閱讀介紹。 閱讀了嗎？真的？優秀👍 看完影片後，我心中的主要問題是是否值得學習 Svelte 並開始將其用於新專案甚至現有專案。平心而論，Svelte 給我留下了深刻的印象，但仍然不足以讓我完全接受它。 # Svelte 3.x 2019 年 4 月 22 日 - [Svelte 3：重新思考反應性](https://svelte.dev/blog/svelte-3-rethinking-reactivity) 是我一直在等待的博文。 > 請花一些時間閱讀博文並[觀看影片](https://www.youtube.com/watch?v=AdNJ3fydeao) - 這是關於電子表格的，但我保證它很有趣😉 為什麼這是一件大事？首先，Svelte 團隊一直在談論版本 3，我想看看它的實際應用。另一方面，Svelte 及其承諾比我第一次聽說 React 時更讓我興奮。 那時我指導 Web 開發人員，並花了很多時間讓他們加快 React 的速度。為了開發 React 應用程式，需要學習、理解並在一定程度上掌握 JSX、CSS-in-JS、Redux、create-react-app、SSR 和其他概念。 > 對於 Svelte，這些都不是必需的。 ``` <script> let name = 'world'; </script> <style> h1 { color: blue; } </style> <h1>Hello {name}!</h1> ``` 夠簡單嗎？我同意。事實上，它非常簡單，我將它推薦給我的 Web 開發新手。 ## 很快，那段程式碼發生了什麼？ `script` 標籤是元件邏輯所在的位置。 `style` 標籤定義了這個元件的 CSS - 這些都不會洩漏到元件之外，所以我們可以安全地使用 h1 並且它只適用於這個元件。它是真正的 CSS，而不是偽裝成 CSS 的 Javascript 對像或偽裝成 CSS 的字串文字。 底部是元件的 HTML。使用帶有 `{myVariable}` 的變數。與 React 的 JSX 相比，Svelte 允許您使用正確的 HTML 標籤，例如 `for`、`class` 而不是 `forHtml` 和 `className`。請參閱 React 文件中的“[屬性差異](https://reactjs.org/docs/dom-elements.html#differences-in-attributes)”以獲取所有非標準 HTML 屬性的列表。 # 讓我們重建 React 示例 為了讓您了解 Svelte 與 React 的對比，讓我們重新建置 [https://reactjs.org/](https://reactjs.org/) 上列出的內容。 ## 一個簡單的元件 請參閱上面的程式碼片段。 ## 一個有狀態的元件 [互動演示](https://svelte.dev/repl/6e9ef214ae774287b21f902d7e6f0e68?version=3.16.6) ``` <script> let seconds = 0; setInterval(() => seconds += 1, 1000); </script> Seconds: {seconds} ``` React：33行 Svelte：6 行 ## 一個應用程式 [互動演示](https://svelte.dev/repl/817d413fd6c344bf859f0dbf8063de2f?version=3.16.6) ``` <script> /* App.svelte */ import TodoList from './TodoList.svelte'; let items = []; let text = ''; const handleSubmit = () => { if (!text.length) { return } const newItem = { text, id: Date.now(), }; items = items.concat(newItem); } </script> <div> <h3>TODO</h3> <TodoList {items} /> <form on:submit|preventDefault={handleSubmit}> <label for="new-todo"> What needs to be done? </label> <input id="new-todo" bind:value={text} /> <button> Add #{items.length + 1} </button> </form> </div> ``` ``` <script> /* TodoList.svelte */ export let items = []; </script> <ul> {#each items as item} <li key={item.id}>{item.text}</li> {/each} </ul> ``` React：66行 Svelte：43 行 ## 使用外部插件的元件 [互動演示](https://svelte.dev/repl/28f4b2e36e4244b8b23cae3d584c4c88?version=3.16.6) ``` <script> const md = new window.remarkable.Remarkable(); let value = 'Hello, **world**!'; </script> <svelte:head> <script src="https://cdnjs.cloudflare.com/ajax/libs/remarkable/2.0.0/remarkable.min.js"></script> </svelte:head> <div className="MarkdownEditor"> <h3>Input</h3> <label htmlFor="markdown-content"> Enter some markdown </label> <textarea id="markdown-content" bind:value={value} /> <h3>Output</h3> <div className="content"> {@html md.render(value)} </div> </div> ``` React：42行 Svelte：24 行 > 更少的程式碼 = 更少的錯誤 > 更少的程式碼 = 更好的性能 = 更好的用戶體驗 > 更少的程式碼 = 更少的維護 = 更多的時間來開發功能 # 我還喜歡 Svelte 什麼？ ## 反應性 另一個強大的功能是 [反應式聲明](https://svelte.dev/tutorial/reactive-declarations)。讓我們從一個例子開始： ``` <script> let count = 0; $: doubled = count * 2; function handleClick() { count += 1; } </script> <button on:click={handleClick}> Clicked {count} {count === 1 ? 'time' : 'times'} </button> <p>{count} doubled is {doubled}</p> ``` 每當你有依賴於其他變數的變數時，用 `$: myVariable = [引用其他變數的程式碼]` 聲明它們。以上，每當 count 發生變化時，doubled 都會自動重新計算，並且 UI 會更新以反映新值。 ## Stores 在需要跨元件共享狀態的情況下，Svelte 提供了存儲的概念。 [教程很好地解釋了 store](https://svelte.dev/tutorial/auto-subscriptions)。無需閱讀冗長的教程 - store 就這麼簡單。 ### Derived stores 通常，一家 store 依賴於其他 store。這就是 Svelte 提供 derived() 來組合 store 的地方。 [有關詳細訊息，請參閱教程](https://svelte.dev/tutorial/derived-stores)。 ## 作為邏輯塊等待 好吧，這是一個非常優雅的。讓我們從程式碼開始（[交互式演示](https://svelte.dev/repl/b9fc662a253443dc901ff189ce1cdd4b?version=3.16.7)）： ``` <script> let githubRepoInfoPromise; let repoName = 'mikenikles/ghost-v3-google-cloud-storage'; const loadRepoInfo = async () => { const response = await fetch(`https://api.github.com/repos/${repoName}`); if (response.status === 200) { return await response.json(); } else { throw new Error(response.statusText); } } const handleClick = () => { githubRepoInfoPromise = loadRepoInfo(); } </script> <input type="text" placeholder="user/repo" bind:value={repoName} /> <button on:click={handleClick}> load Github repo info </button> {#await githubRepoInfoPromise} <p>...loading</p> {:then apiResponse} <p>{apiResponse ? `${apiResponse.full_name} is written in ${apiResponse.language}` : ''}</p> {:catch error} <p style="color: red">{error.message}</p> {/await} ``` 看到 HTML 中的“#await”塊了嗎？在真實世界的應用程式中，您將有一個加載元件、一個錯誤元件和在這種情況下呈現 API 響應的實際元件。嘗試在文本框中輸入無效的 repo 名稱以觸發錯誤案例。 # “等等，那……呢？” ## 開源元件？ 當我向某人介紹 Svelte 時，我得到的主要回應是“但是生態系統、元件、教程、工具等呢？” 是的，開源 Svelte 元件遠不及 React 元件多。話雖如此，您多久使用一個開源 React 元件並在沒有任何問題或不必要的開銷的情況下集成它？我認為我們 Javascript 社區中的許多人已經變得過於依賴 `npm install ...` 來拼湊一個 web 應用程式。通常建置自己的元件，尤其是在 Svelte 中，可以減少整體花費的時間。我沒有資料可以證明，這是基於我個人的經驗。 不過，與此相關的是，對於任何願意重用開源元件的人來說，Svelte 元件的列表越來越多。 ## 正在找工作？ 機會很多，請參閱 [https://sveltejobs.dev/](https://sveltejobs.dev/)。 Apple 的欺詐工程團隊正在[尋找 Svelte 開發人員](https://sveltejobs.dev/jobs/apple-senior-front-end-developer)（截至 2019 年 12 月）。 還要記住，與申請需要 React、Vue、Angular 等的工作相比，競爭要小得多。 # 然後，有 Sapper 來部署 Svelte 應用程式 開發應用程式只是整個蛋糕的一小部分——應用程式還需要部署。為此，Svelte 團隊提供了 [Sapper](https://sapper.svelte.dev/)。這本身就是一篇完整的帖子，所以現在請查看網站了解詳細訊息。 # 結論 每天，新的 Web 開發人員開始他們的旅程，許多人遇到的第一件事就是不確定首先要學什麼。我說未來就是簡單、快速的開發時間，我想不出比這更簡單、更快的事情了： ``` <script> let name = 'world'; </script> <style> h1 { color: blue; } </style> <h1>Hello {name}!</h1> ``` 以上分享，希望對您有幫助
原文出處：https://dev.to/vintharas/discovering-svelte-getting-started-with-svelte-writing-a-pomodoro-technique-app-2lph ## 開始使用 Svelte [開始使用 Svelte 的最簡單方法](https://svelte.dev/blog/the-easiest-way-to-get-started) 是： 1. 瀏覽 [svelte.dev 中的 Svelte 教程](https://svelte.dev/tutorial) 2. 在 [svelte.dev 中的 Svelte REPL](https://svelte.dev/repl) 中進行試玩 3. 使用 svelte 模板從頭開始建立應用程式 儘管我認為通讀教程對於學習 Svelte 的語法和可用的東西確實很有幫助，但我認為**學習某些東西的最佳方法是在盡可能接近它的環境中實際操作**會在現實世界中開發一個 Svelte 應用程式。 **[你需要自己努力解決問題才能真正學到東西](https://amzn.to/2soWN5m)**。 ## 建立一個新專案 我們使用 [degit](https://github.com/Rich-Harris/degit)（也是由 Svelte 的建立者 Rich Harris 編寫的專案腳手架工具）生成一個新專案。類型： ``` $ npx degit sveltejs/template il-pomodoro ``` 這將在 `il-pomodoro` 目錄中建立一個全新的 Svelte 專案。我們跳進去，安裝依賴項並執行開發伺服器： ``` # Jump in $ cd il-pomodoro # Install the dependencies $ npm install # Run the development server $ npm run dev ``` 現在我們在 localhost:5000 上打開瀏覽器，讓我們看看我們得到了什麼…… **塔達！測試成功！**  ## 設置你的編輯器 Svelte 是一個編譯器優先的框架，它編譯代表 Svelte 元件的 .svelte 文件來建置 Web 應用程式。我在教程中看到的那個特殊的 .svelte 擴展和非 Web 標準語法告訴我，我需要在我的編輯器中提供一些額外的支持來處理 Svelte。 Svelte 博客有一篇關於[如何設置編輯器以使用 Svelte](https://svelte.dev/blog/setting-up-your-editor) 的好文章。我通常使用 Vim 或 VSCode，所以讓我們設置這兩個編輯器以使用 Svelte。 ### 設置 VSCode 以使用 Svelte 對於 VSCode，有 [svelte-code](https://marketplace.visualstudio.com/items?itemName=JamesBirtles.svelte-vscode) 插件，它支持 `.svelte` 語法突出顯示、診斷、自動完成和 [更多](https://marketplace.visualstudio.com/items?itemName=JamesBirtles.svelte-vscode)。 ### 設置 Vim 以使用 Svelte 對於 Vim，[設置你的編輯器文章](https://svelte.dev/blog/setting-up-your-editor) 沒有提供很多支持。它基本上告訴您將 .svelte 文件的文件類型更改為 HTML。經過一番挖掘，我發現了一些插件，它們可以讓你在 Vim 中獲得更好的 Svelte 體驗，並達到 VSCode 的標準： * [vim-svelte](https://github.com/evanleck/vim-svelte) 為 .svelte 文件提供語法高亮和縮進 * [coc-svelte](https://github.com/coc-extensions/coc-svelte) 通過連接到 Svelte LSP [^2] 為 Svelte 開發提供類似 IDE 的高級支持。這是 [coc.nvim](https://github.com/neoclide/coc.nvim) 自動補全插件（恰好是我最喜歡的 vim 補全插件）的擴展。 好的，現在我們已經設置好了編輯器，讓我們仔細看看我們的新 Svelte 專案。 ## 檔案結構 我們在編輯器中打開 il-pomodoro 文件夾，我們會看到一堆文件和文件夾： * 一個 `src` 文件夾，其中包含 Svelte hello world 應用程式的源程式碼 * 一個 `public` 文件夾，在 Svelte 編譯器編譯和處理後將包含我們的 Web 應用程式 * `rollup.config.js`，其中包含我們的捆綁器 ([rollup](https://rollupjs.org/)) 的配置。 Rollup 負責使用 Svelte 處理我們的源程式碼文件，以生成可以在瀏覽器中執行的開發和生產包。 對於初學者來說非常有趣的部分發生在 `src` 文件夾中，所以我們接下來要看的地方。該文件夾僅包含兩個文件： * `App.svelte` 這是我們應用程式的根元件 * `main.js`，其中包含用於初始化我們的應用程式的引導程式碼 作為我們應用程式入口點的文件是“main.js”： ``` import App from './App.svelte'; const app = new App({ target: document.body, props: { name: 'world' } }); export default app; ``` 這會建立一個新的 Svelte `App` 元件，並將其附加到 `document.body`，並使用一個名為 `title` 的屬性，其值為 `world`。 讓我們看看 `App` 到底是什麼： ``` <script> export let name; </script> <main> <h1>Hello {name}!</h1> <p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p> </main> <style> main { text-align: center; padding: 1em; max-width: 240px; margin: 0 auto; } h1 { color: #ff3e00; text-transform: uppercase; font-size: 4em; font-weight: 100; } @media (min-width: 640px) { main { max-width: none; } } </style> ``` 我懂了！所以 Svelte 元件是一些可重用的 UI，它封裝了元件的標記 (HTML)、它的行為（`<script>` 標籤內的 JavaScript）及其外觀和感覺（`<style>` 標籤內的 CSS） .涼爽的！這就說得通了。 如果我們回到標記中，我們可以理解當我們將它指向 localhost:5000 時我們在瀏覽器中看到的內容： ``` <main> <h1>Hello {name}!</h1> <p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p> </main> ``` prop `name` 在實例化時傳遞給元件，並保存在該 `name` 變數中： ``` <script> export let name; </script> ``` 然後傳播到元件的標記，並呈現在我們在瀏覽器中看到的“h1”標籤內。涼爽的！有點奇怪但熟悉的“export let name”語法必須是**Svelte 元件將其 API 定義為 props 的方式**。 ## 加入標題 讓我們開始修補一些簡單的東西，比如為應用程式的第一個視圖加入標題並將其綁定到一些資料。初始模板給了我如何做到這一點的提示。我只需要向我的元件加入一個新變數以包含該標題。因為我在原始模板中沒有用到 `name` 變數，所以我將替換它： ``` <script> export let title </script> ``` 並更新 `main.js` 以注入我的應用程式的標題： ``` import App from './App.svelte'; const app = new App({ target: document.body, props: { title: 'il Pomodoro' } }); export default app; ``` 再想一想，我真的不需要將該變數公開為道具。我們不希望此元件的用戶更改此標題，因此我們將其保留為元件內部的一部分。 讓我們重寫我們的 App 元件來執行此操作： ``` <script> let title = "il Pomodoro"; </script> ``` 最後，我將更新 HTML 模板以使用“title”而不是“name”： ``` <main> <h1>{title}</h1> </main> ``` **搞定了！**  ## 任務列表 驚人的！讓我們繼續建立一個非常簡單的任務列表。由於這感覺像是一個完全獨立的責任，我們將把它放在它自己的元件中。 我建立了一個新文件“TaskList.svelte”來表示該新元件並加入了一些標記，以便在我從“App.svelte”中使用它時盡可能少地出錯： ``` <p>I'm a list of tasks</p> ``` 我將它加入到 `App.svelte`： ``` <script> let title = "il Pomodoro"; </script> <main> <h1>{title}</h1> <TaskList /> </main> <style> /* styles omitted for sake of clarity. They'd be here. */ </style> ``` 而且……沒用。嗯……我做錯了什麼…… VSCode 和瀏覽器都會警告我以下內容： ``` 'TaskList' is not defined. svelte(missing-declaration) ``` 這告訴我兩件事： 1. 我的 vim 設置沒有按預期工作，因為我在編輯器中沒有收到錯誤（稍後要解決的問題），並且 2.我好像忘記導入元件了！ 當然！所以我將它加入到“App.svelte”元件中： ``` <script> let title = "il Pomodoro"; import TaskList from './TaskList.svelte'; </script> <main> <h1>{title}</h1> <TaskList /> </main> ``` 是的！**  現在讓我們加入一些任務。我今天的前 3 項任務是： ``` <script> const tasks = [ "plan some fun trip with Teo", "buy some flowers to my wife", "write an article about Svelte" ]; </script> ``` 現在我需要在列表中的螢幕上顯示這些內容。 Svelte 有一種特殊的方法來迭代模板內的列表：[{#each} 塊](https://svelte.dev/docs#each)。 它是這樣工作的： ``` <ul> {#each tasks as task} <li>{task}</li> {/each} </ul> ``` 因此，我們遍歷 tasks 列表中的每個 task 並將其放入列表項 li 元素中。我們還從列表中刪除了點，因為它們看起來很糟糕： ``` <style> ul { list-style: none; } </style> ``` 這就是我們得到的：  **叮叮叮！** 番茄鐘結束了。得走了！我們將很快繼續使用更多 Svelte、交互式任務列表和番茄鐘。 > ### 尋找番茄鐘應用程式的源程式碼？ > https://github.com/Vintharas/il-pomodoro-in-svelte > https://svelte.dev/repl/27164871e86d4ce1a9815489dc323500?version=3.16.7 ## 到目前為止的一些思考 驚人的！這是開始使用 Svelte 的快速方法。到目前為止，這是我的印象： * [svelte.dev](https://svelte.dev/docs) 真的很棒。 * [交互式教程](https://svelte.dev/tutorial) 有一個循序漸進的介紹，帶您了解 Svelte 的所有功能和重要概念。 * [Svelte playground](https://svelte.dev/repl) 真的很酷，它可以讓你修改 Svelte 建立多文件應用程式，保存它們並與你的朋友和同事分享。 * [開發文件非常好](https://svelte.dev/docs) 也非常全面並且有很多示例。將它們加入書籤並根據需要用作參考。 * **以上所有內容都提供了與 Svelte 的美妙初次接觸**，當您第一次進入一個新的生態系統時，您會非常感激。 * 開始新專案的方式有點奇怪。我已經習慣了所有具有 CLI 的流行框架，使用 `npx degit etc...` 來建立一個新專案有點令人困惑。但在前 5 秒的混亂之後，我只是執行命令並繼續我的生活。 * **我對文本編輯器支持的第一印象並不好**，例如，VSCode 沒有在 Svelte 模板內為我提供語句完成功能，而我希望它能工作（例如，允許我過濾“任務” `）。在我試用 Svelte 的短暫時間內，我沒有讓 Vim 設置正常工作。 * **使用 Svelte 本身就是一種非常好的體驗**。 * 初次接觸時，感覺 Web 標準非常友好，並且一切如您所願。最小驚奇原則非常適用於 Svelte。 * 我喜歡 Svelte 元件的平面結構，以及它在 HTML 標記、Javascript (`<script>`) 和 CSS (`<style>`) 中劃分元件的方式，這很有意義。樣板文件的數量幾乎可以忽略不計。 * 在標記中註入資料很簡單 * 使用 `export` 暴露 props 雖然不是標準的但很有意義並且很容易理解。 * 我想知道為什麼 Svelte 使用 `{#each tasks as task}` 而它可以使用 `{#for task of tasks}` 並減少學習 Svelte 的人的認知負荷。 （也就是需要學習更多的自定義語法） 這就是今天的全部內容！希望你喜歡這篇文章。保重並期待更多 Svelte 即將推出。 > 您是一位經驗豐富的 Svelte 用戶嗎？如果是這樣，請不要猶豫，告訴我我做事有多麼錯誤 :D 我很樂意聽取您的意見，我們都會因此變得更好。 ## 在 Vim 中修復 Svelte 經過一些故障排除後，我意識到按照 Svelte 博客中的建議，我之前使用自動命令設置 Svelte 以將 .svelte 文件的文件類型更新為 html： ``` augroup svelte au! BufNewFile,BufRead *.svelte set ft=html augroup END ``` 這意味著沒有應用 coc-vim 和 svelte 語法文件，因為它們需要 svelte 的文件類型。刪除自動命令後，一切都像在 Visual Studio Code 中一樣好用。哇哇！ [^1]：查看 [這個超級古老的番茄工作法應用程式](https://www.barbarianmeetscoding.com/projects/ilpomodoro/) 我在開始進行 Web 開發的那一天使用 Knockout.js 編寫的。 [^2]: LSP 代表語言伺服器協議。 （來自維基百科）它是一個開放的、基於 JSON-RPC 的協議，用於文本編輯器或 IDE 和提供編程語言特定功能的伺服器之間。該協議的目標是允許獨立於任何給定的編輯器或 IDE 實現和分發編程語言支持。
向您介紹這個開發人員工具列表。它是一個開源專案，由社群整理。 讓我們開始吧！ 🚀 原文出處：https://dev.to/dostonnabotov/ultimate-tools-for-developers-2aj2 --- ## 程式碼編輯器和 IDE 💻 - [Visual Studio Code](https://code.visualstudio.com/) 作為免費的開源程式碼編輯器，Visual Studio Code 是開發人員的絕佳工具。它帶有許多功能和外掛，使其成為開發人員的絕佳選擇。 - [CodeSandbox](https://codesandbox.io/) 簡單來說，CodeSandbox 就是 Visual Studio Code 的在線版本。 - [Dev - Visual Studio Code](https://github.dev/) github.dev 基於網絡的編輯器是一種輕量級的編輯體驗，完全在您的瀏覽器中執行。 有兩種方法可以打開基於 Web 的編輯器 1. 在任何存儲庫或拉取請求上按 `.` 鍵 2. 將 URL 中的 .com 替換為 .dev。例如。 `https://github.dev/username/repo` - [CodePen](http://codepen.io/) CodePen 是網絡前端的遊樂場。這是一個試驗、測試和展示您的前端工作的地方。此外，您還可以從其他開發人員那裡找到許多靈感。 - [Replit](https://repl.it/) Replit 是一個簡單、強大且協作的在線 IDE。這是編碼、協作和託管專案的好地方。 - [StackBlitz](https://stackblitz.com/) 面向前端和全棧開發人員的 Web IDE。 - [TypeScript Playground](https://www.typescriptlang.org/play/) 想玩玩看 TypeScript 嗎？ TypeScript Playground 是一個適合你的地方。 ## 圖片 🖼 - [Unsplash](https://unsplash.com/) 為您的下一個專案輕鬆找到精美、高質量的照片。所有照片均可免費用於商業和個人用途。 - [Pexels](https://www.pexels.com/) Pexels 是免費庫存照片的重要來源。所有照片均可免費用於商業和個人用途。 - [Carbon](https://carbon.now.sh/) Carbon 是一個很棒的平台，可以建立和共享程式碼的精美圖像，允許您使用語法突出顯示、主題、字體等自定義圖像。 ## 顏色 🎨 - [Color Space](https://mycolor.space/) 再也不會浪費時間尋找完美的調色板！只需輸入顏色！並生成漂亮的調色板 - [Coolors](https://coolors.co/) 建立完美的調色板或從數千種美麗的配色方案中汲取靈感。 - [Color Wheel](https://www.canva.com/colors/color-wheel/) 想知道什麼顏色搭配起來好看嗎？ Canva 的色輪讓色彩組合變得簡單。 ## 排版 📝 - [Google Fonts](https://fonts.google.com/) Google Fonts 是一個包含免費授權字體系列的庫。只需選擇您想要的字體，將它們下載到您的計算機或使用提供的 CSS 或 HTML 鏈接將它們嵌入您的網頁。 - [Fontsource](https://fontsource.org/) 如果您不想從 CDN 獲取字體，則可以使用整齊打包的 NPM 包中的自託管開源字體。 - [Nerd Fonts](https://www.nerdfonts.com/) Nerd Fonts 使用大量字形（圖標）修補針對開發人員的字體。 ## 設計 🎨 - [Figma](https://www.figma.com/) 一個免費的線上協作界面設計工具和原型製作工具。 - [Pinterest](https://www.pinterest.com/) Pinterest 是一種視覺發現工具，可用於為您的所有專案和興趣尋找創意。 ## 文檔 📚 - [MDN 網絡文檔](https://developer.mozilla.org/en-US/) 學習Web開發的最佳平台。每當您對 HTML、CSS、JavaScript 或任何其他網絡技術有疑問時，請務必先查看 MDN。 - [W3Schools](https://www.w3schools.com/) 幾乎所有您能想到的程式語言的參考。 - [CSS 技巧](https://css-tricks.com/) 提供使用 CSS（層疊樣式表）的提示、技巧和技術的最佳平台之一。 ## 工具 🛠 等一會兒！工具中的工具？是的，你沒有聽錯。這裡有一些工具可以幫助您找到更多工具。 😃 - [Stack Overflow](https://stackoverflow.com/) Stack Overflow 是一個面向專業和狂熱工程師的問答網站。這是提出問題和獲得答案的好地方。 - [Micro Digital Tools](https://mdigi.tools/) 一組對開發人員有用的工具。 - [Small Dev Tools](https://smalldev.tools/) 一組對開發人員有用的工具。 - [Can I Use](https://caniuse.com/) Can I Use 提供了最新的瀏覽器支持表，以支持桌面和移動 Web 瀏覽器上的前端 Web 技術。 - [網站圖標生成器](https://favicon.io/) 您是否曾經為了替自己的網站建立網站圖標而苦惱？不同的尺寸，不同的格式，不同的平台。 從文本、圖像或從數百個表情符號中選擇快速生成您的網站圖標。 - [Font Awesome](https://fontawesome.com/) 免費和高級圖標庫。 - [OverAPI.com](https://overapi.com/) 以有組織的格式查找大量不同技術的備忘單。 - [Transform](https://transform.tools/) 多語言網絡轉換器。輕鬆將 HTML 轉換為 Pug、將 TypeScript 轉換為 JavaScript、將 Markdown 轉換為 HTML 等等... - [Frontend Tools](https://murtazajoo.github.io/tools/) 一個網站，您可以在其中找到具有更好用戶體驗的所有工具。 - [GitProtect](https://gitprotect.io/) 適用於所有 GitHub、GitLab、Bitbucket 和 Jira 資料的 DevOps 備份和災難恢復軟體。 - [Linear](https://linear.app/) 在團隊中組織問題和拉取請求的好工具。 ## 結論 🎉 希望您覺得這個列表有用。
你的轉職路上，還缺少一份自學作業包！寫完這幾包，直接拿作品去面試上班！
本論壇另有附設一個 LINE 新手發問＆交流群組！歡迎加入討論！
