## 課程目標 - 使用 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 專案連結，貼到留言區即可
因為一直找不到工作(...汗)所以來整理作品 [成果展示](https://superyngo.github.io/to_do_list/) 基本上是參考[Let's Write](https://www.letswrite.tw/)做的[Demo](https://letswritetw.github.io/letswrite-food-check/) 在頁面下方有作品導覽以及Github連結 使用工具： 1.Github Page 2.[Google Tag Manager](https://tagmanager.google.com/#/home) 步驟： 1.申請GTM並取得GTM代碼 2.將GTM代碼插入所有專案的index.html中，並將所有專案上傳github，開啟page頁面 3.另外做一個myNavbat的github page，將所有專案連結放進去，可參考[我做的](https://github.com/superyngo/myNavbar) 4.用GTM的「自訂HTML」功能將myNavbar和github連結塞進所有專案中，參考代碼如下： ``` <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" /> <div class="myNav"></div> <div class="github"> <a class="githubHerf"> <i class="fa fa-github" aria-hidden="true"></i> </a> </div> <script> var githubHerf=document.querySelector(".githubHerf") githubHerf.setAttribute("href","https://github.com/superyngo"+{{Page Path}}) var myNav2 = document.querySelector(".myNav"); var iframe2 = document.createElement("iframe"); iframe2.setAttribute("src", "https://superyngo.github.io/myNavbar/"); iframe2.setAttribute("width", "100%"); iframe2.setAttribute("frameborder", "0"); myNav2.appendChild(iframe2) </script> <style> body{ background-color: #fff0df; } .github { position: fixed; left: 0; bottom: 0; display: flex; width: 100px; height: 100px; cursor: pointer; z-index: 2; :hover { position: absolute; left: 10px; bottom: 5px; font-size: 3rem; color: #fff; scale: 0.9; } } .github::before { content: ""; width: 0; height: 0; border-style: solid; border-width: 100px 0 0 100px; border-color: transparent transparent transparent #6e5494; } .github .fa { position: absolute; left: 10px; bottom: 5px; font-size: 3rem; color: #fff; } @media screen and (max-width: 600px) { :root { font-size: 12px; } .github { width: 70px; height: 70px; } .github::before { border-width: 70px 0 0 70px; } .github .fa { left: 8px; bottom: 4px; font-size: 2rem; } } </style> ``` 注意事項； 1.不知為何我GTM塞iframe一直不給過，所以用append的。 2.iframe內的超連結預設會在iframe內開啟，要避免只要在myNavbar的head裡加上<base target="_parent" />就可以了。 3當初做這些作業時完全沒考慮theme和RWD，花了一些時間但又不想花太多時間結果就勉勉強強用手機也都能開。 閒聊： 前陣子都在codeSignal上刷題，看別人解法真的很神，學很多... 有沒有北部公司缺人啊...投履歷都沒人回..中年轉行真的不行嗎...
這兩家服務好像不錯 https://vercel.com/ https://render.com/ 基本上研究服務，首先點進「Pricing」頁面看看收費，有沒有免費方案，就對了 這兩款，好像點幾下按鈕，就可以從 github 直接把專案部署了，還不錯呀
作為一名軟體工程師，您希望確保您的程式碼高效、可讀且可維護。為了幫助您實現這些目標，我列出了您在編碼時應該加入的 10 件最重要的事情。 這些有價值的技巧將提高您的編程技能並使您的程式碼更加健壯。 因此，讓我們深入探討每個軟體工程師都應該考慮的基本要素。 原文出處：https://dev.to/dhruvjoshi9/top-10-things-you-should-add-while-coding-valuable-tips-for-programmers-4m3n ### 1. 有意義的變數名 選擇描述性且有意義的變數名稱對於編寫乾淨且可維護的程式碼至關重要。不要使用“var1”或“temp”等通用名稱，而是選擇反映變數用途的名稱。 這種做法提高了程式碼的可讀性並減少了引入錯誤的機會。 ### 2. 簡潔的註解 註釋在程式碼文件中起著至關重要的作用。它們為複雜的程式碼部分提供了額外的上下文和解釋。通過加入註釋，您可以使您自己和將來可能參與該專案的其他開發人員更容易理解您的程式碼。 請記住保持您的評論簡潔、相關且最新。 ### 3. 一致的程式碼格式 程式碼格式的一致性可以增強可讀性，並使其他人更容易理解您的程式碼。遵循您所使用的編程語言的既定編碼約定和風格指南。 一致的縮進、間距和命名約定使您的程式碼看起來專業且可維護。 ### 4. 錯誤處理和異常管理 錯誤處理是編碼的一個關鍵方面。正確處理錯誤和異常可以提高程式碼的可靠性和健壯性。辨識潛在的錯誤場景並實施適當的錯誤處理機制。 使用 try-catch 塊或異常處理技術來優雅地處理異常並防止程序崩潰。 ### 5.優化的資料結構 高效的資料結構是性能良好的軟體應用程式的支柱。根據程序的具體要求選擇合適的資料結構。了解不同資料結構的優點和缺點將使您能夠優化內存使用並提高程式碼的整體效率。 ### 6.高效的算法設計 算法是解決問題的逐步過程。設計有效的算法對於實現最佳程序性能至關重要。考慮算法的時間和空間複雜性，並努力尋求最有效的解決方案。 分析程式碼中是否存在任何不必要的循環或冗餘操作，並重構它們以提高效率。 ### 7. 模塊化和可重用的程式碼 模塊化程式碼提高了程式碼的可重用性和可維護性。將程式碼分解為更小的、獨立的模塊或執行特定任務的函數。這種方法允許您在程序的不同部分重用程式碼，並在必要時更輕鬆地除錯和更新功能。 ### 8. 測試和除錯 徹底的測試和除錯是開發過程中不可或缺的一部分。建立全面的測試用例以確保您的程式碼在不同場景中的行為符合預期。使用除錯工具和技術來辨識和修復任何問題或意外行為。 定期測試和驗證您的程式碼，以便及早發現潛在的錯誤。 ### 9. 版本控制 版本控制系統（例如 Git）是軟體開發專案中管理程式碼更改和協作的重要工具。使用版本控制來跟踪修改，根據需要恢復到以前的版本，並與其他團隊成員有效協作。 熟悉常見的版本控制命令和工作流程，以簡化您的開發流程。 ### 10.持續學習 編程是一個快速發展的動態領域。秉持持續學習的心態，及時了解最新技術、編程語言和最佳實踐。探索在線資源，參加研討會或會議，並與編程社區互動，以擴展您的知識並提高您的編碼技能。 ## FAQ ### 問：為什麼有意義的變數名稱在編碼中很重要？ 答：有意義的變數名可以增強程式碼的可讀性，並且更容易理解變數的用途。它們提高了程式碼的可維護性並減少了引入錯誤的可能性。 ### 問：註釋對程式碼文件有何幫助？ 答：註釋為複雜的程式碼部分提供了額外的上下文和解釋。它們使開發人員更容易理解程式碼並充當文件的形式。 ### 問：為什麼我們應該遵循一致的程式碼格式？ 答：一致的程式碼格式可以提高程式碼的可讀性和可維護性。它使原始開發人員和將來可能參與該專案的其他開發人員更容易理解程式碼。 ### 問：編碼中錯誤處理的重要性是什麼？ 答：錯誤處理對於防止程序崩潰和提高程式碼的可靠性至關重要。正確的錯誤處理可以從錯誤中正常恢復，並增強軟體的整體穩健性。 ### 問：資料結構如何影響程序的性能？ 答：高效的資料結構可以優化內存使用，提高程序的整體性能。根據程序的具體要求選擇適當的資料結構對於實現最佳性能至關重要。 ### 問：為什麼模塊化程式碼在編程中很重要？ 答：模塊化程式碼提高了程式碼的可重用性和可維護性。將程式碼分解為更小的、獨立的模塊可以更輕鬆地管理和更新功能，從而生成更清晰、更易於維護的程式碼。 ## 最後 將這 10 件事納入您的編碼實踐將顯著提高您的編程技能，並幫助您建置更好的軟體應用程式。 通過關注有意義的變數名、清晰的註釋、一致的程式碼格式、錯誤處理、優化的資料結構、高效的算法設計、模塊化的程式碼、徹底的測試、版本控制和持續學習，你將成為一名更加熟練的軟體工程師。 請記住，編程是一個不斷改進的旅程，因此請接受這些有價值的技巧，並在編碼工作中追求卓越。
如何在微前端中處理 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 實現等解決方案。
阿川收到網友提問如下： ``` 哈囉站長你好 我目前有在看蓬蓬的自學影片跟寫你分享的練習題 有件事想詢問一下我目前快26之前的工作經歷跟軟體一點關係都沒有 高職畢業 目前在自學一些程式語言的技能 如果未來要朝這個方向走建議我先去讀個二技相關科系補學歷嗎？ 還是直接找線上課程或補習班轉職謝謝 原本的打算是想說上二技假日進修補個學歷順便幫自己打底 因為網路上看到蠻多分享是上完課後基礎理論不好 想順便詢問一下沒有學歷的話對未來的工作發展影響大嗎？ 還是學歷只是初期比較看待後面看能力這樣子 ``` 寫一篇完整、公開回答跟大家分享，給類似狀況的人參考： # 不建議回學校補學歷 回學校補學歷真的太花時間了，動輒數年以上 何況入學之後還未必喜歡學校、未必喜歡寫程式 業界很多人也是「學歷普普且無經驗」自學4-9個月後，半路出家轉職成功 不論是金錢 or 時間成本來說，都應該先這樣試試看比較保險吧 # 很多人半路出家之後覺得自己底子不好 本科＆非本科，基礎一定有差 但是現在網路資源、書本資源很多 寫網站不是什麼需要博士學位的「太空火箭科學」 工作上缺哪方面，就往哪方面慢慢自己補充，且戰且走也還夠用的 這行業根據職位狀況，難度可深可淺，一開始先負責較簡單的網頁工作也行 發現自己底子不好，趕快花業餘時間，大力自修一下呀 甚至先入行之後，週末再去學校進修，都比較保險吧 # 學歷對未來工作影響大嗎 學歷好看的話，當然在職場上有優勢 但如果態度不專業、工作多年還是沒什麼作品集，那也很難當工程師吧？ 反過來說，學經歷不強的話 如果態度積極，作品集擺開在那邊，就算不是「超猛」的作品，也讓人知道這工程師有基本的「戰鬥力」呀 更不用說，如果積極貢獻社群、Github 專案有一堆星星，這種時候誰會管這工程師的學歷？ 所以這題的答案是：學歷出色還是很吃香，但也還好啦！畢竟軟體工程這行，偏向「實力主義」，很難靠「關係」或者當「花瓶」或者「辦公室政治」就能混得出色 # 不建議直接跳進去補習班 另外我也不建議直接跑去需「全職上課」半年左右，學費十萬以上那種實體補習班 首先，班上同學程度不一，如果你稍微沒跟上進度，後面老師在講什麼就聽不懂，這樣花了大錢、時間，學習效果也不怎麼樣呀 我建議先大量找免費或便宜的教材，先吸收，多試幾份，真的卡關了，再開始挑補習班 先直接找一些作業跟專案寫寫看，從免費 -> 便宜的 -> 稍貴的，這樣一點一點花錢，風險比較小 更認識自身需求之後，再去比較市面上的各種補習班，最後再把這錢花下去，比較保險 事實上，也有很多人，最後根本沒去補習班，只靠著免費＆便宜的一些資源，就直接順利轉職的呢！ # 結論 這行學無止盡，就算台大畢業，工作十年經驗，還是一直在不斷自學寫程式的奇妙＆精益求精 另外，我也有設計免費的 html&css 教材，還有便宜的 javascript 教材，內含「大量練習專案」，不論你最後選擇哪種學習方式，我都推薦搭配拿去學習、練習，稍有難度，但不少人全做完之後就順利面試上班了 以上，簡單分享個人看法
人工智能遍地開花，隨處可見一些新的人工智能工具。在 [ChatGPT](https://openai.com/blog/chatgpt)、[AutoGPT](https://autogpt.net/)、[Midjourney](https://www.midjourney.com/home/) 之間， [Dall-E](https://openai.com/dall-e-2) 和 [GitHub Copilot](https://github.com/features/copilot)，您可以建置、編碼、獲取答案，以及創造美麗的藝術品……至少我們中的一些人可以。 為什麼有些人在使用生成式 AI 時比其他人獲得更好的結果？為什麼有些人製作的藝術品配得上盧浮宮，而另一些人卻得到了接近狗屁的東西？ 這一切都取決於您使用的輸入。此輸入稱為“提示”。提示是您提出的問題，或者您用來建立內容的詞語。那些“製作”提示或對輸入有策略的人將其稱為“提示工程”。 原文出處：https://dev.to/github/prompt-engineering-for-ai-what-is-prompt-engineering-and-how-to-get-good-results-from-ai-engines-5ch6 ## 什麼是提示工程？ 提示工程是指專門設計提示，以便從 AI 獲得更好的結果。 [OpenAI](https://openai.com/)、[Google](https://bard.google.com/) 等人工智能係統的建立者甚至聘請“快速工程師”來幫助訓練他們的模型。一些“創作者”甚至在 Etsy 等平台上出售他們的 Midjourney 提示。 簡而言之，人工智能系統就像資料：輸入垃圾，輸出垃圾。如果輸入錯誤，可能會得到錯誤的結果。提示工程在很大程度上受上下文影響。 ## 人工智能的背景 當涉及到我們得到的結果時，上下文是最大的問題之一。例如，如果我用谷歌搜尋“donut”（或“doughnut”:doughnut:），我可以獲得一整套結果；從甜甜圈食譜到甜甜圈圖片，或者在哪裡可以買到這種美味的甜點。這是因為我沒有給搜尋引擎任何其他上下文。當然，Google 會使用我之前的搜尋歷史記錄和我的位置等訊息來幫助確定結果，但僅此而已。  _搜尋引擎中的術語“甜甜圈”可以指任何形狀、Slack 插件、應用程式，或者 GitHub Universe 2022 上提供的這些美味的 GitHub 甜甜圈_ 例如，如果我想找到一個關於在 Blender 中建立甜甜圈 3D 模型的教程，那麼如果我只輸入“甜甜圈”，搜尋結果可能不會顯示。我需要更具體。諸如“甜甜圈 Blender3D 教程”之類的東西會為我提供更準確的結果。 人工智能也是如此。您需要為 AI 提供足夠的上下文，以便根據您的需要獲得更好的結果。 ## 聊天應用的提示工程 許多人向我們展示了來自 ChatGPT 的一些瘋狂結果。雖然它們並不總是準確的，但 ChatGPT 確實擅長一件事：散文。寫出優美、結構合理、流暢的句子真是令人難以置信。結果很容易閱讀，聽起來真的很棒。但獲得準確的回應完全是另一回事。例如，人們厭倦了使用 ChatGPT 撰寫歷史文章，雖然文章可能讀起來不錯，但在歷史上可能並不准確。比如你讓ChatGPT“寫一篇關於中國的淪陷的2000字的文章”，它就會給你寫一篇關於中國的淪陷的2000字的文章。但它不一定是事實正確的。  _雖然某些內容可能讀起來不錯，但實際上可能不正確。提示：我沒有博士學位_ :wink: 這是因為 ChatGPT 從各種來源獲取訊息並將它們融合在一起。這些來源本身可能並不准確。 ChatGPT 也不知道您指的是中國的_哪個_秋天。因此它很容易錯誤地交叉引用日期。通過以對話方式向 ChatGPT 提供訊息，然後要求它寫一篇 2000 字的文章，您將獲得更好的結果。 那到底是什麼意思？有些人認為 ChatGPT 是一種單向的、對話式的、單一輸入的獲取訊息的方法。但事實並非如此。它被稱為“聊天”是有原因的。進行對話，完善您的問題，為您的回答提供背景訊息。 例如，如果我想要一段關於“NDC 會議”的旅行報告，我不會以“給我寫一段 NDC 旅行報告”來開始我的 ChatGPT。相反，我會首先弄清楚 ChatGPT 對 NDC 了解多少，並在此過程中提供上下文。您提供的輸入在很大程度上決定了輸出。這就是為什麼有些人能夠獲得非常好的結果，而其他人則不能。  _沒有任何上下文，ChatGPT 不知道我指的是什麼 NDC_ 另一個例子：如果你要去參加工作面試，你想要一些提示，讓 ChatGPT“給我一些準備工作面試的提示”，會給你一些很好的回應，但它遠非具體。相反，諸如“我要去一家 AI 初創公司面試軟體開發人員的職位。你能給我一些準備面試的提示嗎？”將為您提供更加量身定制的個性化結果。這就好比你讓台上的專家給觀眾中的 1000 個人一個答案，他們可能會提供一些通用的東西，這樣每個人都有一個外賣訊息。但如果你一對一地問同一個人，他們可能會問你一些後續問題以了解你的情況，因此會提供更個性化、更具體的答案。 ## 藝術應用的提示工程 您可能已經看到一些人使用穩定的傳播應用程式創作的一些精美藝術品。然後是看起來“錯誤”的藝術品。其中很多都歸結為上下文。例如，如果我使用 [Night Café](https://nightcafe.studio/)（我最喜歡的生成器之一），然後輸入“dog”這個詞，這就是我得到的：  _使用 Night Café 生成的圖像，以及提示符“dog”_ 有一些隨機的“狗”字寫成一個標誌，前景中有一隻看起來很奇怪的狗，而且它的顏色非常奇怪。現在，如果我想像成年德國牧羊犬在陽光明媚的日子裡在公園裡的照片般的圖像，那可能不是我要得到的。人工智能沒有那種背景。它無法讀懂我的想法（還沒有！）。當你想創作藝術品時，你需要描述你在腦海中想像的圖像。您提供的細節越多，輸出就越好。這就是它變得棘手的地方。許多穩定的擴散應用程式都有有限的字符數。因此，您需要對如何製作提示具有意義和戰略性。 與 ChatGPT 類似，您需要不斷地重新製作提示並完善它們。然而，基於聊天的 AI 的優勢在於，您可以繼續對話並不斷向 AI 提供更多訊息和不同的問題，以獲得良好的回應。雖然一些藝術生成器允許您“重新混合”您的輸出，但它仍然依賴於新的提示。因此，您一直在等待輸出，查看未加入的內容，然後發送經過調整的新提示。一些用戶在 Midjourney 上花費數小時，接收輸出並重新製作他們的提示以產生一些驚人的作品。這都是練習的問題。這就是為什麼一些創作者在 Etsy 上出售他們的提示！  _我的朋友 Jean 使用 Midjourney 製作的藝術品_ 有一件事是肯定的，如果你想製作一些高質量的藝術品，不要指望花幾秒鐘寫一個提示，點擊“建立”按鈕然後看到莫內。沒有！相反，您需要投入時間（和金錢）來創作數百件藝術品，在每次迭代中重新處理您的提示以製作您的傑作。 ## 提示工程程式碼 我不會花大量時間談論如何為 [GitHub Copilot](https://github.com/features/copilot) 之類的東西製作好的提示。我的同事 [Rizel](https://twitter.com/blackgirlbytes/) 寫了一篇精彩的博文，深入探討了 GitHub Copilot 的提示工程： https://dev.to/github/a-beginners-guide-to-prompt-engineering-with-github-copilot-3ibp 我要說的是——類似於 ChatGPT——GitHub Copilot 依賴於上下文。存儲庫中還編寫了哪些其他程式碼？文件的擴展名（以及語言）是什麼？ GitHub Copilot 還為您打造了什麼？您在程式碼中加入了哪些註釋？所有這些都將幫助 GitHub Copilot 為您合成更準確的程式碼。 可以這樣想：如果您寫了一條評論，說明您想要建立一個使用後端資料並解決特定問題的複雜函數，那麼您可能不會僅僅通過一條評論就得到很好的回應。就像你的程式碼——至少它應該是——被分解成許多函數，（希望）有很多有用的評論，當你分解東西時，GitHub Copilot 工作得更好。 而不是要求 GitHub Copilot： `//反轉句子`（使用 JavaScript） 想想如何從邏輯上分解問題。例如，如果有人給我一張紙，上面寫著一句話，讓我把它倒過來，我會怎麼做？像這樣寫評論會更有益。如果您這樣做，GitHub Copilot 將擁有更多的上下文並更好地理解您想要什麼。 與 ChatGPT 之類的東西相比，GitHub Copilot 的另一個區別是 GitHub Copilot 考慮了你擁有的_所有_上下文。我上面提到的所有事情： - 什麼是文件擴展名 - 專案中還有哪些其他文件 - 你是怎麼寫其他評論的 - 其他程式碼是如何建置的 - 您輸入的評論是什麼 - 您輸入的程式碼是什麼 ChatGPT 和其他聊天應用程式會更加重視您對聊天所做的最後評論； 也就是，您加入到對話中的最後一條訊息。但是，GitHub Copilot 始終會考慮上下文以生成更好的程式碼結果。 ## 更好的提示工程 歸根結底，從任何類型的生成式 AI 中獲得好的結果都在你身上——你提供輸入的人。正如我一開始所說：垃圾進，垃圾出。因此，在製作提示時請考慮以下重要提示： - 提供良好的**上下文**；提供有關您要實現的目標的示例和訊息 - 請明確點**;如果它是針對特定觀眾的，那麼就說 - **分解**問題 - **清楚**你如何提問。如果返回的內容聽起來不對，請澄清 - 根據您的提示**改寫**和**精煉** 最後，始終，始終驗證您從 AI 收到的訊息。對於藝術品生成器而言，這不太重要，但如果您查看程式碼和訊息，它就很重要。檢查您收到的程式碼是否按照您的預期工作。驗證提供給您的書面訊息的準確性。 請記住，無論發生什麼，您仍然是飛行員。您仍然是負責人，您對使用和共享哪些藝術作品、哪些程式碼片段以及哪些訊息有最終決定權。
## 介紹 在軟體開發的世界裡，Git 已經成為版本控制必不可少的工具。它允許開發人員有效地協作、跟踪更改和有效地管理程式碼存儲庫。無論您是初學者還是經驗豐富的開發人員，理解和掌握 Git 命令對於最大限度地提高工作效率至關重要。在這篇博文中，我們將探索每個開發人員都應該知道的最重要的 Git 命令。 原文出處：https://dev.to/syedsadiqali/mastering-git-top-commands-every-developer-should-know-5hkn ### git init： 使用 Git 的第一步是初始化存儲庫。通過在您的專案目錄中執行 git init，您可以建立一個空的 Git 存儲庫，從而為您的專案啟用版本控制。此命令為 Git 設置必要的基礎結構以開始跟踪更改。 ``` $ git init ``` ### git clone： 要開始處理現有專案，您通常需要製作存儲庫的本地副本。 git clone 允許您將整個存儲庫及其歷史下載到本地計算機。它在您的本地副本和遠程存儲庫之間建立連接，使您能夠獲取更新並為專案做出貢獻。 ``` $ git clone https://github.com/example/repository.git ``` ### git add： 在將更改提交到存儲庫之前，您需要暫存要包含在下一次提交中的文件。 git add 允許您有選擇地將文件或整個目錄加入到暫存區。它為即將到來的提交做好準備，表明您希望將這些更改包含在存儲庫中。 ``` $ git add file.txt $ git add folder/ $ git add . ``` ### git commit： 暫存更改後，您可以使用 git commit 建立新的提交。提交充當專案在特定時間點的快照，保留您所做的更改。每個提交都有一個唯一的標識符、提交訊息，並引用以前的提交，從而形成專案的時間順序歷史記錄。 ``` $ git commit -m "Initial commit" ``` ### git pull： 協作專案通常涉及在同一個存儲庫上工作的多個開發人員。 git pull 允許您從遠程存儲庫獲取最新更改並將其合併到本地分支。它確保您的本地副本是最新的，在您開始工作之前包含其他人所做的任何新提交。 ``` $ git pull origin master ``` ### git push： 一旦您對本地分支進行了更改並想與其他人共享它們，您可以使用 git push 將您的提交上傳到遠程存儲庫。它將您的本地更改與中央存儲庫同步，使它們可供從事該專案的其他人使用。 ``` $ git push origin master ``` ### git branch： 分支是 Git 中的一項強大功能，可實現並行開發和實驗。 git branch 允許你建立新分支或列出現有分支。您可以通過使用 git checkout 在分支之間切換來獨立處理不同的功能或錯誤修復。 ``` $ git branch $ git branch new-feature ``` ### git merge： 當你完成一個特性分支的工作或者想要將一個分支的更改合併到另一個分支時，你可以使用 git merge。它將源分支中的更改合併到目標分支中，建立一個包含兩組更改的新提交。 ``` $ git merge new-feature ``` ### git stash： 有時，您可能需要在處理未完成的更改時切換到不同的分支。 git stash 允許您將修改臨時保存在類似堆棧的結構中，使您能夠在不提交或丟棄更改的情況下切換分支。稍後，您可以將隱藏的更改應用到適當的分支。 ``` $ git stash save "Work in progress" $ git stash apply ``` ### git log： 要檢查存儲庫的提交歷史，git log 是一個方便的命令。它顯示按時間順序排列的提交列表，包括作者、時間戳和提交訊息。您可以使用此命令的各種選項來根據您的要求過濾和格式化輸出。 ``` $ git log $ git log --author="John Doe" ``` ## 結論： Git 是一個強大的版本控制系統，它使開發人員能夠有效協作並跟踪專案中的更改。通過掌握這些頂級 Git 命令，您將能夠輕鬆導航存儲庫、管理分支和跟踪更改。無論您是從事個人專案還是參與大型軟體開發，理解和使用這些命令
開源對很多事情都非常有用。其中之一是學習新技能。在本文中，我們將介紹 GitHub 上一些最好的開源 React 專案，您可以使用它們來快速提升您的 React 技能。 原文出處：https://dev.to/livecycle/top-github-repositories-to-learn-modern-react-development-5d3h ## 你可以學習的開源 React 專案  ## Cal.com  [https://github.com/calcom/cal.com](https://github.com/calcom/cal.com) Cal.com 將自己標榜為“絕對適合所有人的日程安排基礎設施”。他們是 Calendly 等預約安排服務的競爭對手。他們同時提供託管和自託管產品。它是一個全棧 Next.js 應用程式，它依賴 tRPC 進行類型安全的客戶端到伺服器通信。該存儲庫具有相當廣泛的 Monorepo 設置（使用 Turborepo），可將應用程式拆分為多個包。在樣式方面，Cal.com 使用 TailwindCSS 和無頭 Radix 元件。存儲庫非常活躍，他們積極鼓勵貢獻者。許多問題被標記為“良好的第一期”和“需要幫助”。 ## Taxonomy  [https://github.com/shadcn/taxonomy](https://github.com/shadcn/taxonomy) 這個有點不同。它由單個開發人員建置，作為探索新的 Next.js 13 App Router 功能的演示。但是不要讓那個愚弄你。它可以說是使用新 App Router 的最全面的開源應用程式之一。因此，即使對於想要學習如何在生產中使用 App Router 的經驗豐富的 React 開發人員來說，這也是一個很好的資源。 除了用於前端和後端的 Next.js 之外，Taxonomy 使用 NextAuth 進行身份驗證，使用 Prisma 作為 ORM，使用帶有 Radix 的 TailwindCSS 進行樣式設置。特別有趣的是 Stripe 訂閱集成。因此，如果您想了解如何將訂閱集成到您的應用程式中，這就是適合您的存儲庫。 ## Highstorm  [https://github.com/chronark/highstorm](https://github.com/chronark/highstorm) Highstorm 是這個街區的新玩家。它是一種監視應用程式中發生的事件的服務。您通過他們的 API 提交事件，然後將其輸入 Highstorm 儀表板。再次重申，這是一個基於 Next.js 的專案。它使用 Tinybird 作為分析資料的資料庫，並使用 Clerk 進行身份驗證。如果您想學習如何處理大量分析資料並將它們顯示在精美的圖表中，那麼這個專案很棒。 ## Dub.sh  [https://github.com/steven-tey/dub](https://github.com/steven-tey/dub) Dub.sh 大約在一年前作為開源連結縮短器推出。它是 Bitly 等服務的替代品。它也是基於 Next.js 並結合使用舊頁面和新 App 路由器。它通常是最早採用 Next.js 新功能（例如元資料 API）的專案之一。 該存儲庫是了解多租戶 Next 應用程式的好地方。這些是為不同域下的不同用戶提供服務的應用程式。在 Dub.sh 的情況下，用戶可以加入自己的域以在其下建立縮短的連結。該應用程式的設計也很精美，整個網站上都有許多令人愉悅的動畫。 Framer Motion 庫用於幫助解決此問題。 ## Bulletproof React  [https://github.com/alan2207/bulletproof-react](https://github.com/alan2207/bulletproof-react) Bulletproof React 與我們目前介紹的其他專案不同。該存儲庫確實包含一個功能齊全的演示 React 應用程式。但最大的價值來自閱讀此應用程式附帶的綜合文件。本文件列出了設計大型 React 應用程式各個方面的最佳實踐。這是一個很好的資源，可以定期參考以刷新您對最佳實踐的記憶。 ## 總結和開始 正如我們所見，上述每個存儲庫都提供了一個獨特的視角來了解大型 React 應用程式是如何建置的。每個人都可以從研究存儲庫的程式碼中獲益，無論您有多有經驗。 開始從存儲庫中學習的一個很好的實用技巧是提出一個特定的問題。例如，您可能會問“Taxonomy 如何處理 Stripe 訂閱？”之類的問題。然後挖掘程式碼層以找到問題的答案。 最後一點——探索開源存儲庫是提升 React 技能的好方法，但這不是您唯一應該做的事情。將您新獲得的知識應用到您自己的專案中也很重要。這就是您鞏固新技能和保留訊息的方式。 最主要的是享受這個過程，並認識到開源是培養新技能的友好場所，無論您目前的經驗水平如何。
[Travel Maker](https://superyngo.github.io/Travel-Maker/) [原始碼](https://github.com/superyngo/Travel-Maker) 用vue+Google Maps做的旅程規劃網站 用意是把在google maps上找到想去的景點輕鬆點進行程規劃 算是以前愛出去到處亂走時想要用的東西 做出來差強人意 也還沒為手機優化 search過App Store有很完整的類似產品 就當作實作練習 寫的過程幾個心得： 1.UI建議先想好甚至可以先做，才能確認資料要怎麼配合處理 2.很多工具(pinia,vue router,vue各種用法等)都是邊做邊學，也不斷打掉重做 3.之後的side project會想要用Nuxt.JS做看看 4.寫得很髒很亂...常常頭腦發麻時乾脆心一橫把功能幹下來 5.其實還有寫一個node小工具幫忙從google maps上撈地點詳細類型的資料(例如墨西哥餐廳等)，因為google maps api沒有提供...(網路上找到相關功能的請求從2017年就有了，不過就是一值沒提供)。我就用node去fetch地點的Google maps網頁就可以在meta裡找到地點詳細類型，再回傳到這個網站。不過還沒專研好node程式的部屬，就先拿掉了... 6.自學了3、4個月，要開始認真找工作了...
公司開始丟一些專案給我，主要都是修改樣式 聽起來還好，不會太困難，結果打開專案檔案是PHP檔，之前被沒有碰過PHP的部分，所以有點不習慣 專案中可能每個時期是不同人修改的，出現了CSS權種問題，加上PM時間上急需，改起來真的困難 找檔案這部分也是很困難，都翻西找用搜尋還未必能找到(公司有新舊公版和客制化的版) 問公司前輩說目前前後端分離只佔百分之五十，剛好我遇到的都是沒有分離 另外還有多人開發時git問題，一直很怕當雷隊友，把別人的檔案覆蓋過去，結果組長說我太緊張了，叫我放輕鬆不要那麼焦慮XD
感謝站長關懷～ 是的，這禮拜確實有遇到一些之前有稍微碰過卻不太熟悉的東西，也有之前沒有碰過的東西，是有些小崩潰...，但還是可以稍微跟大家分享與請教一下： 這裡有一些前期提要：公司目前的前端開發並不使用現在的主流前端框架，也沒有使用打包整合工具...（像是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的部分，我了解這些終究只是工具且我自己也沒有到非常熟，只要可以完成專案目的即可，我的實力在哪裡我也知道，但以目前公司的開發模式來說，我需要考量沒有踏上趨勢的這個問題嗎？還是我多慮呢了？
我創了一個Github page，專案裡有兩個分支，我想要這兩個分支都能在Github Page上瀏覽網頁，但對於git版控都還是不熟悉，網上也沒找到相關的範例(有可能都用中文)，跑去問GPT也說的不清楚，比較需要圖文並茂的方式Q。 現在的問題是只能顯示其中一個分支，另一個分支要如何也可以瀏覽出來? 或是能提示給我個關鍵字之類的QQ 謝謝! 專案:https://github.com/pchun2330/Project 網頁:https://pchun2330.github.io/Project
大家好，我從站長的Dcard貼文中知道這個論壇的。 希望能夠在這裡跟大家一起學習成長。 我有一些問題想請問大家，我是資工畢業的，目前待業中，退伍後決定要朝後端發展，但是因為大學專題及所學都跟後端無關，因此退伍後一直自學到現在(一個月），下面是我建立的網站。 https://paulzhu.netlify.app/ 目前學的有html,css,javascript,git,node.js,express.js 大學專題是深度學習結合APP做掌紋辨識 想請問大家後端該學到什麼樣子的程度，才能夠求職。 謝謝各位抽空觀看這篇文章。
[VS Code](https://code.visualstudio.com/) 是一款免費、跨平台、開源的程式碼編輯器，近年來成為開發者最熱門的選擇。 在本文中，我整理了一些最有用的外掛，您可以使用它們來提高工作效率。 原文出處：https://dev.to/madza/19-vs-code-extensions-to-boost-your-productivity-4npo --- ### 1\. [Swimm](https://go.swimm.io/ide-plugin?utm_source=Hashnode&utm_medium=paid_influencer&utm_campaign=launch_may&utm_content=madza_dev) 使用 Swimm 的富文本編輯器建立文件。記錄跨越多個文件和存儲庫的複雜流程，其中包含與程式碼交互並在您進行更改時自動更新的豐富內容。 在本地驗證和更新文件，並將其作為 CI 工作流的一部分，自動修復簡單的錯誤，並且僅在發生重大更改時提醒您。 在正確的時間找到正確的文件——就在相關程式碼旁邊。當您看到一個 wave 時，這意味著存在與該特定程式碼部分相關的文件。  ### 2\. [GitLens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens) 借助 GitLens，開發人員可以通過提供有關 Git 存儲庫的高級可視化和訊息，更好地了解其程式碼庫的歷史、作者身份和更改。 GitLens 還提供了一組豐富的自定義選項，以及內聯責備註釋、提交和差異詳細訊息，甚至無需離開編輯器即可查看和編輯提交訊息的能力。  ### 3\. [Thunder Client](https://marketplace.visualstudio.com/items?itemName=rangav.vscode-thunder-client) Thunder Client 是用於 Visual Studio Code 的輕量級 Rest API 客戶端擴展，具有簡單易用的 UI。 支持集合和環境變數和 GraphQL 查詢，以及使用基於 GUI 的界面進行無腳本測試。 所有請求的資料都本地保存在您的設備上。  ### 4\. [Tabnine](https://marketplace.visualstudio.com/items?itemName=TabNine.tabnine-vscode) Tabnine 是一個 AI 程式碼助手，可以通過在所有最流行的編碼語言和 IDE 中實時完成程式碼來提高您的開發速度。 Tabnine 由多種語言專用的機器學習模型提供支持，這些模型是在程式碼上從頭開始進行預訓練的。  ### 5\. [Remote-SSH](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-ssh) Remote - SSH 擴展允許您使用任何帶有 SSH 伺服器的遠程機器作為您的開發環境。 無需在本地計算機上安裝源程式碼即可獲得這些好處，因為該擴展程序直接在遠程計算機上執行命令和其他擴展程序。 您可以打開遠程計算機上的任何文件夾並使用它，就像文件夾在您的計算機上一樣。  ### 6\. [Docker](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-docker) Docker 擴展使從 Visual Studio Code 建置、管理和部署容器化應用程式變得容易。 它還提供了對容器內 Node.js、Python 和 .NET 的一鍵式除錯。  ### 7\. [Git History](https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory) 使用此擴展，用戶可以輕鬆瀏覽提交歷史記錄、檢查文件更改並比較程式碼的不同版本。 該擴展提供了一個 GUI，可以在時間軸中顯示提交歷史記錄。每個提交都與其提交訊息、作者、日期和時間一起顯示。 用戶還可以查看與每個提交關聯的分支和標籤名稱。  ### 8\. [Markdown All in One](https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one) 對於在 VS Code 中使用大量 Markdown 的任何人來說，這是一個有用的工具。它使建立和編輯 Markdown 文件變得更加容易和快速，幫助您提高生產力和效率。 這些功能包括語法突出顯示、程式碼塊格式化、目錄、預覽模式、表情符號支持、鍵盤快捷鍵等等。  ### 9\. [Regex Previewer](https://marketplace.visualstudio.com/items?itemName=chrmarti.regex) 該擴展在並排文件中顯示當前正則表達式的匹配項。這可以使用 Ctrl+Alt+M 打開/關閉。 可以通過狀態欄條目加入全局選項和多行選項，以便使用並排文件進行評估。當並排文件有多個匹配示例時，這會很有用。  ### 10\. [Better Comments](https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments) 使用此擴展，您將能夠將註釋分類為提醒、查詢、TODO、突出顯示等。 註釋掉的程式碼也可以設置樣式以明確程式碼不應該存在。您可以在設置中指定您想要的任何其他評論樣式。  ### 11\. [Bookmarks](https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks) 書籤擴展可幫助您導航程式碼，輕鬆快速地在重要位置之間移動。 不再需要搜尋程式碼。它還支持一組選擇命令，允許您選擇書籤行和書籤行之間的區域。它對日誌文件分析非常有用。  ### 12\. [Project Manager](https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager) 專案管理器可幫助您輕鬆存取您的專案，無論它們位於何處。不要再錯過那些重要的專案了。 您可以定義您的專案（也稱為收藏夾），或選擇自動檢測 Git、Mercurial 或 SVN 存儲庫、VS 程式碼文件夾或任何其他文件夾。 此外，您還可以使用標籤來組織您的專案。  ### 13\. [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) 一個基本的拼寫檢查器，適用於程式碼和文件。 這個拼寫檢查器的目標是幫助捕獲常見的拼寫錯誤，同時保持較低的誤報率。  ### 14\. [Image Optimizer](https://marketplace.visualstudio.com/items?itemName=MadsKristensen.ImageOptimizer) 向解決方案資源管理器中的任何文件夾和圖像加入右鍵單擊菜單，使您可以自動優化該文件夾中的所有 PNG、GIF 和 JPEG 文件。 只需右鍵單擊任何包含圖像的文件或文件夾，然後單擊其中一個圖像優化按鈕。  ### 15\. [CSS Peek](https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek) 該擴展支持符號定義跟踪的所有正常功能，但它適用於 CSS 選擇器（類、ID 和 HTML 標記）。 您可以內聯加載 CSS 文件並在此處進行快速編輯，直接跳轉到 CSS 文件或在新編輯器中打開它或在懸停時顯示定義。  ### 16\. [Placeholder Images](https://marketplace.visualstudio.com/items?itemName=JakeWilson.vscode-placeholder-images) 使用各種第 3 方服務（如 Unsplash、LoremFlickr 等）在 Visual Studio Code 中生成佔位符圖像並將其插入到 HTML 中。 您可以選擇圖像寬度、高度、文本和顏色，將生成的 IMG 標籤插入到您的 HTML 中或將其複製到剪貼板，或者將圖像 URL 插入到您的 HTML 中，複製到剪貼板，或在您的瀏覽器中打開它。  ### 17\. [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) 具有實時瀏覽器重新加載功能的快速開發實時伺服器。從狀態欄單擊即可啟動或停止伺服器。 允許用戶建立可自定義的端口號，設置伺服器根目錄，並在設置中提供默認的瀏覽器配置選項。  ### 18\. [Peacock](https://marketplace.visualstudio.com/items?itemName=johnpapa.vscode-peacock) 使用 Peacock，您可以巧妙地更改 VS Code 工作區的顏色。 當你有多個 VS Code 實例、使用 VS Live Share 或使用 VS Code 的遠程功能，並且你想快速辨識你的編輯器時，這是理想選擇。  ### 19\. [Polacode](https://marketplace.visualstudio.com/items?itemName=pnp.polacode) Polacode 是 VS Code 的擴展，它可以對你的程式碼進行截圖。 該擴展生成一個與源具有相同風格和主題的螢幕截圖。  --- 以上簡單分享，希望對您有幫助～
如站長所說，工作上一切都好混亂 光是設定開發環境就耗掉兩天，不知道為什麼很不順利，我根本薪水小偷٩(◦`꒳´◦)۶ 還有要找MIS幫我設定權限等等問題，聽到一些不是很熟悉的名詞 例如：GCP、遠傳、SFTP、SSH KEY 然後git 部分還多知道了git submodule這個關鍵字，有空要研究一下是什麼 因爲公司的同事前輩忙，沒空理我只好東翻西翻看前人寫的code，不得不說真的複雜 有些沒有前後端分離，也看不懂PHP，光是改個CSS小小的樣式就有點困難，因為找不到引入外部資源的CSS檔 回家繼續研究vue cli的部分
 ## 解決方法 1. 前往控制台 2. 點擊時鐘和區域  3. 點擊地區  4. 點選系統管理  5. 點選變更系統地區設定  6. 勾選 '使用 Unicode UTF-8 提供全球語言支援' (會要求重新啟動電腦)  7. 開啟 terminal 輸入 `chcp` 看查 VSCode 編碼 8. 輸入 `chcp 65001` 轉換 VSCode 編碼至 utf-8 ### 結果  ## 參考 [參考來源](https://github.com/anseki/readline-sync/issues/48)
## 課程目標 - 替 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 讀取檔案的方法 學會這方法，可以用 node 寫出簡易的檔案內容分析程式 --- 建立一個 `my-name.txt` 文字檔，在裡面輸入你的名字 然後建立 `read-my-name.js` 程式，裡面輸入 ``` var fs = require('fs'); fs.readFile('my-name.txt', function(err, data) { console.log("您好，" + data); process.exit(0); }); ``` 然後去終端機輸入 ``` node read-my-name.js ``` 你會看到一段打招呼的訊息！ --- 讓我們逐行說明一下 ``` var fs = require('fs'); ``` 這是載入「檔案系統模組」的意思，`fs` 是 `file system` 的縮寫 `readFile` 函式，第一個參數是檔案名稱，第二個參數是「一個函式定義」 看起來有點怪，其實是「非同步程式設計」的關係 之前在學網頁元素的事件處理時，就是用「非同步」程式設計處理 也就是我不確定「點擊」事件何時會發生，但我先「綁定」好事件發生時要做的任務 還有在網頁呼叫 AJAX 時也是，我不確定「主機回應」何時會拿到，但我先「綁定」好拿到之後要做的任務 這邊 `fs` 的意思就是：我不確定何時會「檔案讀取完畢」，但我先「綁定」好讀取完畢之後，要做的任務 看起來很怪、很醜，這種設計的意義不明，對嗎？我也覺得！後面會教你如何改寫成「同步程式設計」，先照做就好 -- `console.log` 是印出訊息到終端機（語法就跟在瀏覽器環境一樣！） `process.exit(0);` 是結束程式的意思。那個 `process` 是代表當前 node 程式的全域變數 --- 在瀏覽器裡面，無法去操作「檔案系統模組」，否則也太可怕，每個人上網時，都能用 js 亂改電腦上的檔案，資安大問題！ 在瀏覽器裡面，也沒有 `process` 這個全域變數 用 node 跑完這段程式，你應該會發現，這段程式拿到網頁環境，是無法執行的！ 在瀏覽器、node 跑 js 程式，有很多相似，也有很多相異之處，希望你慢慢抓到兩者的感覺！ ## 課後作業 讓我們嘗試開發一個 CLI 版本的待辦管理工具 請建立一個檔案 `todos.json` 並放入以下內容 ``` [ { "title": "去操場跑步" }, { "title": "去市場採購" }, { "title": "找朋友吃飯" } ] ``` 然後建立一個 `read.js` 檔案 使用者輸入 `node read.js` 之後，終端機會去讀取 `todos.json` 並且顯示 ``` 您的待辦事項： #0 去操場跑步 #1 去市場採購 #2 找朋友吃飯 ``` 完成以上任務，你就完成這次的課程目標了！ --- 交作業的方法： **方法一** 直接截圖視窗內容，上傳到留言區 **方法二** 開一個新資料夾，用 git 初始化這個資料夾 接下來的作業，都放在這個資料夾，然後上傳 github 然後把 github 專案連結，貼到留言區即可
你的轉職路上，還缺少一份自學作業包！寫完這幾包，直接拿作品去面試上班！
本論壇另有附設一個 LINE 新手發問＆交流群組！歡迎加入討論！
