隨著程式設計技術的快速發展，我們必須學習很多新東西。有些語言和框架非常複雜，您可能記不住所有的語法或方法。備忘單就是您易於存取的筆記了。 每當有人發現任何有幫助或有價值的事情時，我們都會做筆記。但是，您不需要對在書籍、研討會或文章中看到的每個細節都做筆記。 為了幫助您學習，我編寫了這份頂級備忘單列表。 - 原文出處：https://dev.to/ishratumar/15-must-have-cheatsheets-for-developers-1n92 --- ## HTML, CSS, and JavaScript Cheatsheet 您可以在此處找到 HTML、CSS 和 JavaScript 程式碼範例。每個例子都有一個解釋。像這樣的備忘單是我的最愛之一。 連結：https://htmlcheatsheet.com/js/  ## JavaScript Cheatsheet 這是對初學者的 JavaScript 的完整、快速的介紹。值得看一下。 連結：https://quickref.me/javascript  ## React.js Cheatsheet React 是最流行的 JavaScript 函式庫。對於 React 愛好者來說，這是一個簡單但有用的備忘單。一定要將它加入書籤，以便快速參考。 連結：https://devhints.io/react/  ## Cheatography 沒有比這更好的資源了。它有超過 5,000 個備忘單、修訂輔助工具和快速參考！每個人都可以在這裡得到他們需要的一切，而不僅僅是軟體工程師。在這裡，您可以找到有關 Web 開發、商業、遊戲、健康、數位行銷等的備忘單。 連結：https://cheatography.com/  ## Java Cheat Sheets 此處簡要列出了教科書中使用最多的 Java 語言特性和 API。這是一個很好的快速參考。 連結：https://introcs.cs.princeton.edu/java/11cheatsheet/  ## OverAPI Over API 是一個了不起的資源。對於大多數編程語言，您可以在此處找到備忘單。 連結：https://overapi.com/  ## Devhints 這裡有一些範例、連結、片段等，可讓您簡要了解該語言的基礎知識。在一頁上，您會找到詳細的說明。值得研究。 連結：https://devhints.io/  ## Gitsheet Git 是開發人員應具備的最重要的技能。這是一個非常簡單的 git 命令備忘單。如果您可以存取此 Gitsheet，則無需記住所有命令。 連結：https://gitsheet.wtf/  ## Vue.js cheatsheet 此備忘單包含 Vue.js 的詳細程式碼片段和解釋。它包括與屬性、DOM、資料、事件、生命週期、API 等相關的片段。如果您正在尋找 Vue.js 的快速參考，請檢查一下。 連結：https://marozed.com/vue-cheatsheet/  ## HTML5 Canvas Cheat Sheet 可在此處找到 HTML5 Canvas 的程式碼示例，包括其元素、2D 上下文、線條樣式、顏色、陰影等。在此處了解有關 HTML 畫布的所有訊息。 連結：https://simon.html5.org/dump/html5-canvas-cheat-sheet.html  ## Web 開發人員的 SEO 備忘單 這個網站是關於 SEO（搜尋引擎優化）的。在最有效的搜尋引擎優化技巧中，這是最有用的快速參考之一。 Web 開發人員和軟體工程師也受益於輕鬆存取 SEO 技術標準。 連結：https://moz.com/learn/seo  ## Easing functions 通過使用緩動函數，您可以調整動畫的速度以建立各種效果，例如彈跳、減速、放大等。有關詳細訊息，請參閱此 Microsoft 文件。 此外，參數隨時間變化的速率由緩動函數指定。現實世界中的物體幾乎從不以一致的速度移動，也很少突然開始和結束。使用此頁面，您可以選擇理想的緩動函數。 連結：https://easings.net/en#  ## CSS3 動畫 這個網站有一些驚人的動畫效果，你可以在你的下一個專案中使用。 連結：http://www.justinaguilar.com/animations/#  ## CSS 網格 CSS 網格可能有點挑戰性。因此，很難記住它的所有屬性。您可以將此備忘單加入到您的書籤中以供快速參考。 連結：https://grid.malven.co/  --- 以上，簡單分享，希望對您有幫助！
使用 useWorker 在單獨的執行緒中，處理昂貴且阻塞 UI 的任務。 眾所周知，Javascript 是一種單線程語言。所以，做任何昂貴的任務，它都會阻塞 UI 互動。用戶需要等到它完成，才能執行剩餘的其他操作，這會帶來糟糕的用戶體驗。 為了克服和執行這些任務，Javascript 有一個名為 [Web Workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers) 的解決方案，它允許在 web 中執行消耗效能的任務時，瀏覽器不會阻塞用戶界面，使用戶體驗非常流暢。 本篇文章簡單介紹這個 hook。 原文出處：https://dev.to/nilanth/multi-threaded-react-app-using-useworker-gf8 --- ## Web Workers Web Worker 是一個在後台執行而不影響用戶界面的腳本，因為它在一個單獨的線程而不是主線程中執行。所以它不會對用戶交互造成任何阻塞。 Web Worker 主要用於在 Web 瀏覽器中執行昂貴的任務，例如對大量資料進行排序、CSV 導出、圖像處理等。  參考上圖，我們可以看到一個昂貴的任務是由一個工作線程並行執行的，而不會阻塞主線程。當我們在主線程中執行相同的操作時，會導致 UI 阻塞。 ## React 中的 Concurrent mode 呢？ React [並發模式](https://beta.reactjs.org/reference/react/startTransition) 不會並行執行任務。它將非緊急任務轉移，接著立即執行緊急任務。它使用相同的主線程來處理。 正如我們在下圖中看到的，緊急任務是使用上下文切換來處理的。例如，如果一個表正在呈現一個大型資料集，並且用戶試圖搜尋某些內容，React 會將任務切換為用戶搜尋，並首先處理它，如下所示。  當為同一任務使用 worker 時，表格渲染在一個單獨的線程中並行執行。檢查下圖。  ## useWorker [useWorker](https://github.com/alewin/useWorker) 是一個通過 React Hooks 在簡單配置中使用 Web Worker API 的函式庫。它支持在不阻塞 UI 的情況下執行昂貴任務，支援 promise 而不是事件監聽器，還有一些值得注意的功能： 1. 結束超時 worker 的選項 2. 遠程依賴 3. Transferable 4. Worker status > useWorker 是一個 3KB 的庫 ## 為什麼不用 JavaScript 內置 web worker？ 在使用 javascript web worker 時，我們需要加入一些複雜的配置，來設置多行程式碼的 worker。使用 useWorker，我們可以簡化 worker 的設置。讓我們在下面的程式碼中，看看兩者之間的區別。 ## 在 React App 中使用 JS Web Worker 時 ``` // webworker.js self.addEventListener("message", function(event) { var numbers = [...event.data] postMessage(numbers.sort()) }); ``` ``` //index.js var webworker = new Worker("./webworker.js"); webworker.postMessage([3,2,1]); webworker.addEventListener("message", function(event) { console.log("Message from worker:", event.data); // [1,2,3] }); ``` ## 在 React App 中使用 useWorker 時 ``` // index.js const sortNumbers = numbers => ([...numbers].sort()) const [sortWorker] = useWorker(sortNumbers); const result = await sortWorker([1,2,3]) ``` 正如我之前所說，與普通的 javascript worker 相比，`useWorker()` 簡化了配置。 讓我們與 React App 整合並執行高 CPU 密集型任務，來看看 useWorker() 的實際執行情況。 ## Quick Start 要將 useWorker() 加入到 React 專案，請使用以下命令 `yarn add @koale/useworker` 安裝套件後，導入 useWorker()。 `import { useWorker, WORKER_STATUS } from "@koale/useworker";` 我們從函式庫中導入 useWorker 和 WORKER_STATUS。 **useWorker()** 鉤子返回 workerFn 和 controller。 1. `workerFn` 是允許使用 web worker 執行函數的函數。 2.controller 由 status 和 kill 參數組成。 status 參數返回 worker 的狀態和用於終止當前執行的 worker 的 kill 函數。 讓我們用一個例子來看看 **useWorker()**。 使用 **useWorker()** 和主線程對大型陣列進行排序 首先建立一個SortingArray元件，加入如下程式碼 ``` //Sorting.js import React from "react"; import { useWorker, WORKER_STATUS } from "@koale/useworker"; import { useToasts } from "react-toast-notifications"; import bubleSort from "./algorithms/bublesort"; const numbers = [...Array(50000)].map(() => Math.floor(Math.random() * 1000000) ); function SortingArray() { const { addToast } = useToasts(); const [sortStatus, setSortStatus] = React.useState(false); const [sortWorker, { status: sortWorkerStatus }] = useWorker(bubleSort); console.log("WORKER:", sortWorkerStatus); const onSortClick = () => { setSortStatus(true); const result = bubleSort(numbers); setSortStatus(false); addToast("Finished: Sort", { appearance: "success" }); console.log("Buble Sort", result); }; const onWorkerSortClick = () => { sortWorker(numbers).then((result) => { console.log("Buble Sort useWorker()", result); addToast("Finished: Sort using useWorker.", { appearance: "success" }); }); }; return ( <div> <section className="App-section"> <button type="button" disabled={sortStatus} className="App-button" onClick={() => onSortClick()} > {sortStatus ? `Loading...` : `Buble Sort`} </button> <button type="button" disabled={sortWorkerStatus === WORKER_STATUS.RUNNING} className="App-button" onClick={() => onWorkerSortClick()} > {sortWorkerStatus === WORKER_STATUS.RUNNING ? `Loading...` : `Buble Sort useWorker()`} </button> </section> <section className="App-section"> <span style={{ color: "white" }}> Open DevTools console to see the results. </span> </section> </div> ); } export default SortingArray; ``` 這裡我們配置了 useWorker 並傳遞了 bubleSort 函數來使用 worker 執行昂貴的排序。 接下來，將以下程式碼加入到 App.js 元件，並導入 SortingArray 元件。 ``` //App.js import React from "react"; import { ToastProvider } from "react-toast-notifications"; import SortingArray from "./pages/SortingArray"; import logo from "./react.png"; import "./style.css"; let turn = 0; function infiniteLoop() { const lgoo = document.querySelector(".App-logo"); turn += 8; lgoo.style.transform = `rotate(${turn % 360}deg)`; } export default function App() { React.useEffect(() => { const loopInterval = setInterval(infiniteLoop, 100); return () => clearInterval(loopInterval); }, []); return ( <ToastProvider> <div className="App"> <h1 className="App-Title">useWorker</h1> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <ul> <li>Sorting Demo</li> </ul> </header> <hr /> </div> <div> <SortingArray /> </div> </ToastProvider> ); } ``` 我們已將 React 徽標加入到 **App.js** 元件，該組件每 **100ms** 旋轉一次，以直觀地表示執行昂貴任務時的阻塞和非阻塞 UI。 執行上面的程式碼時，我們可以看到兩個按鈕 Normal Sort 和 Sort using **useWorker()**。 接下來，單擊 Normal Sort 按鈕在主線程中對陣列進行排序。我們可以看到 React 徽標停止旋轉幾秒鐘。由於排序任務阻塞了UI渲染，所以排序完成後logo又開始旋轉了。這是因為兩個任務都在主線程中處理。檢查以下gif  讓我們使用 [chrome 性能記錄](https://developer.chrome.com/docs/devtools/performance/) 檢查其性能分析。  我們可以看到 Event: click 任務用了 **3.86 秒** 來完成這個過程，它阻塞了主線程 3.86 秒。 接下來，讓我們嘗試使用 **useWorker()** 選項進行排序。點擊它的時候我們可以看到 react logo 還在不間斷的旋轉。由於 useWorker 在不阻塞 UI 的情況下在後台執行排序。這使得用戶體驗非常流暢。檢查以下gif  您還可以使用 `sortWorkerStatus` 在控制台中看到 worker 狀態為 **RUNNING**、**SUCCESS**。 讓我們看看這種方法的性能分析結果   正如我們所看到的，第一張圖片表示主線程中沒有長時間執行的進程。在第二張圖片中，我們可以看到排序任務由一個單獨的工作線程處理。所以主線程沒有阻塞任務。 您可以在以下沙箱中試用整個範例。 https://codesandbox.io/embed/useworker-sorting-example-041qhc?fontsize=14&hidenavigation=1&theme=dark ## 何時使用worker 1.圖像處理 2. 排序或處理大資料集。 3. 大資料CSV或Excel導出。 4. 畫布繪圖 5. 任何 CPU 密集型任務。 ## useWorker 的限制 1. web worker 無權存取 window 物件和 document。 2. 當 worker 正在執行時，我們不能再次呼叫它，直到它完成或被中止。為了解決這個問題，我們可以建立兩個或多個 useWorker() 鉤子實例。 3. Web Worker 無法返回函數，因為響應是序列化的。 4. Web Workers 受限於最終用戶機器的可用 CPU 內核和內存。 ## 結論 Web Worker 允許在 React 應用程式中使用多線程來執行昂貴的任務而不會阻塞 UI。而 useWorker 允許在 React 應用程式中以簡化的掛鉤方法使用 Web Worker API。 Worker 不應該被過度使用，我們應該只在必要時使用它，否則會增加管理 Worker 的複雜性。
恭喜你完成了一系列的專案開發挑戰 放眼市面上的新手教材，應該沒人會把作業設定到這麼困難！ 但我認為時機差不多了，所以要求一些有挑戰性、有趣的專案來讓你做，應該難不倒你 而且這種只用基本功能，就完成複雜專案的經驗，有助於掌握框架的本質、熟練框架基礎 既然你通通順利完成了，代表你的學習狀況「相當不錯」...... 再次跟你說聲恭喜！ --- 這些專案內容，已經相當接近實務上、職場上會遇到的開發需求 也就是說，你的開發經驗已經「大大提升」了不少 事實上，光是目前的技能與經驗，已經可以應付職場上絕大多數的功能要求 你已經離「進入職場工作」，又大大靠近了一步！ 但是呢，要能夠與團隊共同開發中大型專案，還是需要學習框架進階觀念、生態系、以及 JavaScript 生態系各種工具 坊間補習班，通常會在課程很早期開始教上述這些內容。我認為這會令學習者非常眼花撩亂 所以我讓你僅僅學完 `Essentials` 的內容，就立刻動手開發複雜、好玩的應用程式 我認為這樣才能清楚認識框架的強大，以及知道「工具不是導入越多、搞得越複雜就越好」 而是要視情況，只導入必要的、大小適宜的技術工具，這樣才能收放自如 那麼更大型的專案，又該引入哪些進階觀念、生態系工具呢？ 這些會在後續的課程提到！ --- 消化、研究完本課程之後，關於 JavaScript 更多必學的基本觀念 請接著前往「自學網頁の嬰兒教材：JavaScript（九）」開始學習吧！ https://codelove.tw/@howtomakeaturn/course/QxMYx5
## 課程目標 - 能夠寫出國家資訊與地圖應用程式 ## 課程內容 開發應用程式時，經常需要把多種 API 組合起來使用！ 如果各種 API 有提供 Vue 包裝的元件版本，通常會容易許多 如果沒有，那就自己想辦法管理好狀態，在 Vue 裡面使用，通常也沒問題 --- 這一課來寫各國資訊查詢 使用這服務來取得各國資料 https://restcountries.com/ 內含每個國家「中心點」的經緯度 --- 接著要用地圖套件 Leaflet https://leafletjs.com/ 底層圖資，使用 OpenStreetMap https://www.openstreetmap.org/ ## 課後作業 請使用 https://replit.com/ 來寫作業 這次作業的規格如下： - 顯示世界地圖，上面有上百個代表國家的大頭針（marker），放在國家「中心點」的經緯度 - 點擊大頭針，會跳出一個視窗，視窗內含以下資訊： - 國旗圖案 - 國家名稱 - 首都名稱 - 貨幣符號 做出以上功能，你就完成這次的課程目標了！
## 課程目標 - 能夠寫出天氣查詢應用程式 ## 課程內容 開發應用程式時，經常需要上網找一些資料 API 比如搜尋 `台灣氣象資料 api` 會找到中央氣象局開發的 API 服務 https://opendata.cwb.gov.tw/index 想使用這些 API，通常就把官網說明文件看一看，試一試即可 如果不順利，就上網找找看有沒有人寫過 API 串接教學，照做即可 為了避免 API 服務被濫用、過度呼叫，通常 API 需要註冊之後，取得金鑰（key）才能呼叫 如何使用金鑰驗證？通常是在發出 api call 的時候，在 http request header 裡面附上 API key 也有可能就直接在呼叫的 url 附上，或者在 http post 內用 form data 附上 各種 API 驗證方式不同，取決於 API 提供者的主觀偏好 多找找範例、說明文件，多多嘗試即可 --- 這一課來寫天氣查詢應用程式 關鍵字 `weather app ui` ## 課後作業 請使用 https://replit.com/ 來寫作業 這次作業的規格如下： - 頁面上有一個「縣市」選單，可選擇要查詢的縣市 - 選擇縣市之後，在畫面上顯示此縣市當下的這些資訊： - 天氣現象 - 最高溫度 - 最低溫度 - 降雨機率 做出以上功能，你就完成這次的課程目標了！
## 課程目標 - 能夠寫出體重追蹤應用程式 ## 課程內容 找套件時，如果官方沒有提供特定框架的版本，通常會有開發者，自行包裝一個，分享給大家使用 搜尋 `how to use 套件名稱 in 框架名稱` 大概就找得到相關資源了 舉例來說，這款圖表套件，官方沒有提供框架版本 https://www.chartjs.org/ 但是社群就有人做好了 https://vue-chartjs.org/ --- 介紹一個網站 https://dribbble.com/ 業界設計師，經常在上面搜尋別人的成品、找靈感、分享靈感 除了在 google 搜尋關鍵字，也可以常常到 Dribbble 搜尋 --- 這一課來寫體重追蹤應用程式 關鍵字 `weight tracking` ## 課後作業 請使用 https://replit.com/ 來寫作業 這次作業的規格如下： - 這種程式應該要讓人註冊登入使用，需要後端配合，但我們簡化吧：免登入、把資料存在 local storage 就好 - 此程式能夠新增一筆體重資料，input 欄位有「體重」、「日期」 - 有清單列表顯示每一筆輸入的資料，按照日期排序。每筆資料旁邊有刪除按鈕 - 使用 Chart.js 將體重的走勢，用折線圖（Line Chart）呈現 - 請「不要」使用社群包裝的版本（vue-chartjs），學著自己在框架內導入套件 --- 提示：vue 跟 chart.js 整合的時候，有一個地雷！會導致 `RangeError: Maximum call stack size exceeded ` 要解決這個地雷，請參閱這邊的討論 https://codelove.tw/@birdie2019/post/Ja69K3 --- 做出以上功能，你就完成這次的課程目標了！
## 課程目標 - 能夠寫出行事曆應用程式 ## 課程內容 現在新推出的大部份 javascript 套件，都會提供 native（原生）、React、Vue 三種版本，方便使用 舉例來說，這款行事曆套件，就有多種版本 https://fullcalendar.io/ 也有易安裝的 CDN 版本 https://fullcalendar.io/docs/initialize-globals --- 所謂的 React、Vue 或是任何框架版本，其實就只是把套件，根據框架規格，封裝成元件而已 （元件的觀念，之後會教，先別擔心） 套件會大量跟 DOM 互動，框架也會跟 DOM 互動，兩者容易衝突，使用上通常會 bug 一大堆 所以官方會推出套件版本，改掉一些底層寫法，方便框架用戶使用 如果沒有，那就由開發者自己小心管理，通常也沒太大問題 就是把初始化相關放在 `mounted` 裡面，然後狀態更新時，找方法與套件狀態同步，就這樣而已 --- 這一課來寫行事曆應用程式 關鍵字 `calendar app ui` ## 課後作業 請使用 https://replit.com/ 來寫作業 這次作業的規格如下： - 這種程式應該要讓人註冊登入使用，需要後端配合，但我們簡化吧：免登入、把資料存在 local storage 就好 - 有一個「新增活動」按鈕，點擊可以輸入「活動名稱」、選擇「活動日期」與「活動時間」 - 不用做成「開始、結束」兩個時間點，就做成開始時間就好 - 日期時間的 UI，請使用 https://github.com/xdan/datetimepicker - 上述功能，可以做成 modal 視窗（輸入欄位放在視窗內），也可以直接把輸入欄位都放在畫面上 - 使用 FullCalendar 呈現行事曆，將活動顯示在對應日期 - 點擊行事曆內的活動，可以刪除活動。請使用 javascript 內建的 `confirm` 函式，確認「是否刪除此筆活動？」後刪除 - 請「不要」用官方 Vue 版本，請用 CDN 版本，學著自己在框架內導入套件 做出以上功能，你就完成這次的課程目標了！
## 課程目標 - 能夠寫出分帳應用程式 ## 課程內容 實務上，在開發應用程式，難免需要用到一些數學計算 通常也不用到太進階，大概國中數學的內容就很好用了 我個人經驗是，其實國中數學、高中數學的內容，超級強大、好用 只是大家普遍是填鴨式教育出身，失去創意、不知如何運用了 --- 這一課來寫分帳應用程式 關鍵字 `bill split online` `分帳 app` `splitwise 網頁版` ## 課後作業 請使用 https://replit.com/ 來寫作業 這次作業的規格如下： - 這個程式的用途，是跟一群朋友出遊時，方便均分所有支出 - 可以隨時打開使用，所以資料要隨時存到 local storage - 可以清楚看到，誰目前還欠多少錢、誰目前先出了多少錢 - 旅遊結束時，可以根據上述資料，快速地互相結清帳款 UI 規格如下： - 頁面上有一個「分帳成員」清單，裡面列出目前參與分帳的成員 - 有一個「新增成員」按鈕，點擊可以輸入「成員姓名」後新增 - 有一個「新增支出款項」按鈕，點擊可以輸入「款項名稱」、「款項金額」，並且可以選擇「由誰付款」 - 上述兩個功能，可以做成 modal 視窗（輸入欄位放在視窗內），也可以直接把輸入欄位都放在畫面上 - 頁面上條列出所有帳款，顯示付款人、金額、款項名稱，旁邊有刪除按鈕 - 在「分帳成員」清單內，每個成員旁邊顯示「應付金額」或者「應收金額」，分別顯示為紅色、綠色（目前總支出，除以成員人數之後，與成員目前代墊支出的差額） - 頁面上有一個「旅程結束」按鈕，點擊後刪除所有成員、所有款項 做出以上功能，你就完成這次的課程目標了！
## 課程目標 - 能夠寫出筆記應用程式 ## 課程內容 應用程式簡單沒關係，只要精準解決用戶通點 甚至可以收一點點月租費，替開發者「賺到一點零用錢」 這一課來寫筆記應用程式 關鍵字 `write notes online` `online note tool` 研究看看目前市面上，大家都做得怎樣 最簡潔的是這兩款 - https://justnotepad.com/ - http://simplenotes.online/ ## 課後作業 請使用 https://replit.com/ 來寫作業 這次作業的規格如下： - 有一大塊輸入文字的地方，用戶可以當成臨時打筆記的地方 - 以 `textarea` 實作即可，純文字即可，不需要複雜的文章格式編輯器 - 筆記內容要隨時記錄到 local storage，用戶隨時關閉、開啟網頁，都不會失去資料 - 側邊或底部，有一排「筆記清單」，用戶可以在多則筆記之間切換 - 畫面上有一個「建立新筆記」按鈕 - 「筆記清單」的每個筆記旁邊，都有「刪除」按鈕 做出以上功能，你就完成這次的課程目標了！
## 課程目標 - 能夠寫出碼表應用程式 ## 課程內容 千萬不要小看簡易、陽春的小應用程式 只要做到夠簡單好用、能解決使用者的問題 就算只是放一些網路廣告，也能夠替開發者「賺到一點零用錢」 這一課來寫碼表應用程式 關鍵字 `online stopwatch` `線上碼表` ## 課後作業 請使用 https://replit.com/ 來寫作業 這次作業的規格如下： - 有一個「開始」按鈕，一個「重設」按鈕 - 按下開始之後，「開始」按鈕會變成「暫停」按鈕 - 按下暫停之後，「暫停」按鈕會變成「繼續」按鈕 - 按下重設按鈕，整個碼表會歸零 - 畫面上有清楚的計時數字，起始格式為 `00:00.00` 做出以上功能，你就完成這次的課程目標了！
在 Vue 的學習旅程中 目前只學了官網 `Essentials` 的內容 坊間補習班，通常會接著教 Vue 元件、模組化開發方法、Vue 進階工具、Vue 生態系工具、以及 JavaScript 生態系各種工具 但是我認為，僅僅只是 `Essentials` 的內容，已經足以開發許多功能強大、好用的網頁應用程式、web 工具 在這次的課程，我們將開發一系列「非常有趣、實用」的應用程式 藉由這些練習，打好對於 Vue 理解的基礎，等於是紮穩馬步、練好內功 --- 我曾多次提過，身為工程師，常常要做一些沒做過的功能 需要自學能力、需要願意面對未知的信心與勇氣 這次的課程，我只會提供簡單介紹＆關鍵字 接著就直接提出作業規格，你需要自行研究如何完成作業 --- 這堂課要做的各種專案，內容有趣到「你在找工作的時候，能夠直接當作品集放上去」 請以這個目標為標準，把樣式做漂亮、UX 做完整！ --- 話不多說，讓我們馬上開始來寫 Vue 吧！
自從改用 React Hooks 搭配 Functional Component 之後，Class 的概念都快忘光光了呢~ (也有可能是根本沒懂過？) 決定 refresh 一下 Class 如何使用。 # 甚麼是 Class？ class 是用來創造 Object 的。 想像成 class 是一間汽車工廠，只要給不同的零件就能生成不同型號的車。 # Property 和 Method ### Property Property 用來表示 Object 內有什麼東西。 在定義 Class 之初，需要先建構一個 constructor，用來接收外部參數並指派這些參數給對應的 Property。 ### Method Method 用來表示 Object 可以執行什麼動作。Method 會定義在 constructor 之後。 範例： ``` class Animal { constructor(_species, _sound){ this.species = _species this.sound = _sound } makeSound(){ return `${this.sound.toUpperCase()}!` } } const scooby = new Animal('dog','scooby-dooby-doo'); console.log(`Scooby is a ${scooby.species}`); // Scooby is a dog console.log(`Scooby says "${scooby.makeSound()}"`) // Scooby says "SCOOBY-DOOBY-DOO!" ``` **注意** 如果在 constructor 以外的地方要使用傳進來的參數，要指派給 Property 再用 this.PropertyName 來取用喔！ --- 參考資料: [JavaScript Classes Tutorial from freecodecamp_YT](https://youtu.be/2ZphE5HcQPQ)
* [第1課 ── 認識 Vue 基本環境與 render state](https://jsfiddle.net/birdie2019/54pzj7w2/51/) * [第2課 ── 體驗一下 Reactivity 的效果與便利](https://jsfiddle.net/birdie2019/54pzj7w2/55/) * [第3課 ── 學習 Vue 條件判斷式的寫法](https://jsfiddle.net/birdie2019/54pzj7w2/84/) * [第4課 ── 學習 Vue 迴圈的寫法](https://jsfiddle.net/birdie2019/54pzj7w2/94/) * [第5課 ── 學習 Vue 事件處理的寫法](https://jsfiddle.net/birdie2019/54pzj7w2/396/) * [第6課 ── 認識 Lifecycle Hooks 與 Watchers](https://jsfiddle.net/birdie2019/54pzj7w2/415/) * [第7課 ── 認識 Template Refs](https://jsfiddle.net/birdie2019/54pzj7w2/432/) 心得分享： 老樣子，一樣一開始措手不及，文件有些看很多次還是看不懂，一直試才慢慢了解 (但還是有不了解的地方)，確實用Vue方便很多！程式碼部分少打逗號分號或括號對不起來的機率增加，如果作業過程跑不動說不定你跟我一樣遇到這個問題XD
簡單示範動畫效果：https://jsfiddle.net/birdie2019/bhdL4r7u/26/ 之前看國外網友的作品覺得作品裡的表單動畫好看，細讀了code，發現只需用HTML和CSS就能做到 主要用到： * [HTML <input> required 屬性](https://developer.mozilla.org/zh-TW/docs/Web/HTML/Element/input) * [CSS :required 選擇器](https://developer.mozilla.org/en-US/docs/Web/CSS/:required) * [CSS :focus 選擇器](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus) * [CSS :valid 選擇器](https://developer.mozilla.org/en-US/docs/Web/CSS/:valid) 了解他們的用法和關係，可以試試製作其他驗證動畫效果喔！
Michael Lin 是前網飛資深工程師，年薪高達 45 萬美元，約合新台幣 1300 萬元 但是他在工作四年後離職了，並且在網路上分享了心得 - 原文出處：https://dev.to/_michaellin/why-i-quit-a-450000-engineering-job-at-netflix-1f0g ---  > 金手銬 —— 你留在一份你寧願辭職、只是為了錢而待著的工作。 我以為我會永遠留在 Netflix。市場上薪酬最高。講求自由與責任。無限帶薪假期。你還能要求什麼呢？ 所以當我在 2021 年 5 月離開 Netflix 時，每個人都認為我瘋了。我父母首先反對。他們來自文化大革命時期的中國，當時幾乎沒有足夠的食物吃，他們認為我正在拋棄他們來到美國所經歷辛苦的一切。 “低下頭去幹活就對了！”他們說。 “不要對你所擁有的不知感恩！”他們說。 我的朋友們也不相信。 “有一堆免費食物欸！” “FAANG 巨頭欸！” “帶著慢慢領股票呀！” 我聽到的唯一讓我略微停頓的反對論點，來自我在 Netflix 的導師。他說我不應該在沒有找到另一份工作的情況下辭職，因為“我會放棄我在 Netflix 的高薪所擁有的影響力。”  > 一邊休息一邊慢慢領股票 這讓我停頓了整整 3 天，但我還是放棄了。8 個月後的現在，我 100% 確定這是正確的決定。 在這篇文章中，我想談談幫助我了解金手銬真正成本的 3 個因素，以及為什麼每年 50 萬美元的薪水也無法讓我繼續從事我不再喜歡的工作。 ## 一個失敗的角色轉換 隨著辦公室於 2020 年 3 月關閉，工作中所有最好的部分 ——社交、同事、津貼，都消失了。 而你剩下的就是工作本身。因此，如果您不喜歡這份工作，而這就是您的全部，那麼 COVID 會將這一事實放大 10 倍以上。 而且我不喜歡這份工作。但原本不是這樣的。 我在 Netflix 工作了將近 4 年，擔任用戶增長方面的資深軟體工程師。一開始，我覺得自己得到了豐厚的報酬來學習。工作了 1.5 年左右，我都喜歡它。 Netflix 的文化與我之前在亞馬遜經歷過的更為隱秘的文化截然不同。每個產品決策的備忘錄都可供所有員工閱讀。這就像拿錢去讀 MBA。  > Netflix 對其所有產品決策的透明度是在那裡工作的最佳福利之一。這與蘋果和亞馬遜更為隱秘的文化形成鮮明對比。 但是在我的後半段時間裡，工程工作開始感覺像是複制粘貼。 需要啟動一個新的微服務？ 複製粘貼一個舊的，更改業務邏輯，你就完成了。 新的 A/B 測試？ 複製粘貼舊的，更改一些測試變體，就完成了。  > Netflix 非常喜歡 A/B 測試。這是他們從主頁（來自 Netflix 技術部落格）測試的 CTA 的 4 個變體 我覺得毫無疑問工程可以為 Netflix 所用，但我覺得更好的問題是，某個特定專案是否充分利用了工程資源。所以我想過渡到產品管理，在那裡我可以領導這些工作。我花了 2 年的時間在公司轉了一圈，不停地建立聯繫，與每個組織交談，併申請我能找到的每一個職位。 當我向每個組織申請時，我提交了關於我作為 PM 的優先事項的建議：客戶服務、開發人員生產力、工作室、合作夥伴關係和通知。我建議在我自己的團隊中建立一個角色來幫助管理不斷增長的基礎設施。我還建議其他 PM 可以將更多工作委託給我，這樣他們就可以騰出時間來發展他們的組織。所有這些提議最終都沒有成功。  > 我花了 2 年的時間兜圈子試圖在 Netflix 找到一份 PM 的工作，但最終落得一場空。 回過頭來看，我意識到自己的錯誤。我想如果我再努力一點，我最終會得到這份工作。但現在我意識到，有時由於結構性問題，事情超出了你的控制。 Netflix 沒有適當的流程來支持這樣的橫向角色變更；我從未見過工程師在這裡成功過渡到產品管理。 他們為我提供了更多與產品管理合作的機會，以培養產品技能，對此我深表感謝。但合作與擁有角色本身不同。歸根結底，你不能只讀一本關於游泳的書就指望學會游泳。你必須跳入水中。 ## 動力減弱，表現減弱 在我失敗的 PM 求職接近尾聲時，我覺得高薪是一個越來越糟糕的優點。原本是在賺錢和學習。現在我只是在賺錢。 我團隊的目標和我的興趣也開始出現分歧。我的團隊正在朝著涉及平台遷移的更注重工程的方向發展。但我的興趣更多地轉向創業和產品管理。我分配的工程工作永遠不會適用於我以後所做的任何其他工作。 我開始覺得我又犯了以前的職業錯誤 - 在一份不適合我的工作上待的時間比我應該做的要長。這個錯誤的代價比人們想像的要高。如果你在一份你想離開的工作上多呆了兩年，並且在你的一生中做了 5 份以上的工作，那麼你只是在你不想做的工作上浪費了你生命中的 10 年。我覺得我在浪費時間。  > 沒有什麼比錯過工作訊息更讓人焦慮的了。 我的動力減弱了，我的表現也隨之減弱。我越來越少參加會議，盡量減少做任何與開發產品管理技能不直接相關的工作，並在溝通方面拖拖拉拉。最後唯一的動機就是不想被解僱。感覺我已經達到了我的目標是這麼低的標準，甚至努力跨越它，這讓我有點難過。 不幸的是，我的經理開始注意到了。在持續 2 個多小時的激烈績效評估中，他告訴我，我需要 1) 更多地參與這次遷移，以及 2) 更加溝通。用他的話說，“如果我想留在團隊中”，我必須在這些方面有所改進。 ## 重新評估 COVID-19 期間的生活優先事項 疫情大流行是一記警鐘。 看著數以百萬計的人死於 COVID 讓我意識到明天是無法保證的。在您的任何夢想實現之前，您可能會死於 COVID。你推遲夢想的時間越長，它永遠不會實現的風險就越大。所以如果有什麼你想要的，你必須現在就去做。 不想再說晚點才是時候了。現在就是時候。  > 被推遲的夢想就是被拒絕的夢想。我一直以來最喜歡的名言。 我意識到金手銬的真正代價是什麼。代價是你的青春，你的時間，你的生命。人們不會準確判斷這些成本，因為薪水是一個硬數字，而你的青春價值更無形。但僅僅因為某些東西難以衡量，並不意味著它的價值就低於金錢等可數的東西。很難衡量品牌、心理健康或愛情的價值，但我們知道這很重要。 看到所有這些人死於 COVID，我害怕有一天我的墓碑上會寫著： > “這裡躺著 Michael。他一生都在做他不想做的工作。然後他感染了 COVID 接著就死掉了。祝安息。” 我在一份我不喜歡的工作上待的時間越長，這成為我墓碑的可能性就越大。我知道我現在必須採取行動 - 我不能一直把棘手的職業問題推到一邊。我不得不辭職。 ## 最後的日子 我把糟糕的績效評估和被解僱的威脅當成是一種解脫。但我想在不被解僱的情況下先拿到遣散費。 因此，幾週後，我在一對一面談中，向我的經理提案，我們討論了“先發制人的遣散費方案”。 我這樣說：“我的表現在下降，因為我的動力在下降。我沒看到我的積極性有可能提高，因為團隊的目標與我的職業目標背道而馳。如果我們現在討論 Netflix 的先發制人遣散費而不是拖延下去會怎麼樣？這樣 Netflix 就可以省錢，你可以更快地找到更適合團隊的人選，我也可以去做我想做的事。對每個人來說都是雙贏的局面。”  > 掙脫束縛。 在他與 HR 討論後，我與他和 HR 進行了最後一次會面，他們同意先發制人地解僱我，然後我拿到了最後的遣散費。金手銬 —— 再見了。 ## Netflix 之後的生活 我以為離開公司我的生活就結束了，但事實恰恰相反。我擔心我會沒有社交生活，但實際上我在退出後遇到了更多的人 —— 其他的創業者、企業家和建設者。 我看到我的心理健康得到改善，因為如果我錯過了另一封電子郵件或 slack 訊息，我因擔心而產生的焦慮消失了。 我現在感到內心深處的平靜，一種堅定的信念，即一切都會好起來的，即使現在不能保證未來的成功。當我在周日晚上打字時，如果工作對我有利，我對周末工作沒有任何問題。沒有比知道我掌握了自己工作的所有價值更好的動力了。  通過只做讓我充滿活力的事情，它可能會諷刺地釋放比我以前賺的更多的潛在收入。 我從 2021 年 5 月辭職已經 8 個月了。我在 2021 年剩下的時間裡休息了一段時間。我在紐約住了幾個月，在猶他州和亞利桑那州進行了一次公路旅行，總體上很享受生活。 我決定全身心地為自己工作。雖然我才剛剛起步，沒有任何真正可靠的收入來源，但我會相信這個過程，如果我致力於讓我充滿活力的事情，好事就會發生。 --- 我現在真的相信，安全行事是最冒險的選擇。當你謹慎行事時，你同樣會暴露在所有的危險之中，而且沒有向上的機會。正如海倫凱勒曾經說過的：  > 謹慎行事是最冒險的選擇。
# 資源分享-練手項目以及結構教學 跟各位分享一個日本的教學網站 做的非常的好 [PAGE](https://code-step.com/)  可以進去逛一下 用擴充軟件翻譯成中文 會發現他的教材做的很用心 很有質感 非常適合新手！ 日本不愧是大國（？ 這教材至少我自己沒有看過台灣有這樣子的規劃 可以供各位參考練習
https://chat.openai.com/chat 昨天認識了這個ChatGPT 還可以教程式語言 真的太神奇了，大家可以試試 
恭喜你完成這份奇怪的 Vue 入門課程 如同我在這門課程中不斷強調的 任何的技術工具，其實都充滿了大量的過時觀念、多餘觀念、錯誤觀念 也就是很多小功能、小語法，要嘛是已經很少人在用了，要嘛是重複設計了，要嘛是根本設計失敗了。這些學了也用不到 偏偏你在補習班或者上網自學的時候，沒有人敢跟你這樣講。因為講的人自己也不太確定、沒有真正深入了解 所以我在這門課程只引導你使用最基本的語法、用最基本的功能 你已經完成了所有作業，代表這些基本功你都順利掌握了 不要小看這種只專注在基本功的學習方法 把基本功摸熟的人，在有必要學習任何進階觀念的時候，會比別人更快融會貫通 --- 偷偷跟你說一句，即便是業界工程師、業界講師，大多數人對於程式設計、大型工具的許多觀念，也都是一知半解的 這沒有什麼問題，我也總是跟你說：能解決問題就好 比較有問題的是：不確定的東西，要知道自己不懂、承認自己也不確定。在有必要的時候，要知道往哪個方向去深究 除此之外，既然自己也不太確定，就不要跟別人說 XXX 寫法一定比 YYY 寫法好，諸如此類的話 在程式開發這個圈子，絕大多數意見，都只是主觀意見，卻被講得好像是科學證明過的公認客觀意見、有對錯之分。這絕非事實 請積極學習，但也請保持懷疑＆批判的態度。面對新工具、新觀念，不需要感到太困擾或者焦慮 --- 翻閱 Vue 官方文件，你會發現 `Essentials` 這個段落，你幾乎通通讀完了 這些就是 Vue 的基礎觀念，已足夠你開發出各種易於維護、架構彈性的中型應用程式了 那麼該如何開發大型應用程式呢？那就需要更進一步學習模組化、元件等等的觀念 這些會在後續的課程提到！ --- 消化、研究完本課程之後，關於 JavaScript 更多必學的基本觀念 請接著前往「自學網頁の嬰兒教材：JavaScript（八）」開始學習吧！ https://codelove.tw/@howtomakeaturn/course/jqe6xX
## 課程目標 - 認識 Template Refs ## 課程內容 來讀一下 Template Refs 的說明 - https://vuejs.org/guide/essentials/template-refs.html 簡單來說，在我們使用了任何前端框架之後，就已經把「所有 DOM 更新相關」的工作，委託給了框架處理 我們從此只要寫框架提供的語法就好了，不要直接去操作 DOM！ 不然的話，框架已經接手了整個 DOM，你又在某些地方對 DOM 做出更新，會引起衝突，會造成很多 bug！ 而且這種 bug 很難處理，因為你不知道框架實際上是怎麼更新 DOM 的，需要深入研究框架背後的機制才行 所以才會說，用了框架，就請避免操作 DOM 但是，很多時候，會需要用一些現成的第三方套件（例如你學過的一堆 jQuery 外掛套件），那些套件初始化設定時，又都需要提供一個 selector 這種情況下，Vue 提供了 ref 功能，讓你可以存取「vue 底下真正的 DOM」，可以拿來跟其他小套件整合 --- 看到這邊，你可能會心想： 「那我如果不使用 ref，我就是要直接使用 `document.querySelector()` 來抓取 DOM 元素，然後作為參數放進其他小套件執行，會怎樣？」 老實講，根據我個人經驗，在絕大多數情況下，其實也根本不會怎麼樣，程式還是可以順利運作的 所以，你真的要這樣做，也是可以的 但如果真的遇到很難解決的 bug，例如抓不到 DOM 元素、抓錯 DOM 元素時，記得往這方向研究一下就是了！ ## 課後作業 承接上一課的作業 在輸入記事內容的地方，為了加強 UX，我們來加上 autosize 功能 請使用此款套件 https://github.com/jackmoore/autosize 將 textarea 加上 autosize 功能吧！ 做出以上功能，你就完成這次的課程目標了！
## 課程目標 - 認識 Lifecycle Hooks 與 Watchers ## 課程內容 來認識一下 Lifecycle Hooks - https://vuejs.org/guide/essentials/lifecycle.html 簡單來說，在 vue 執行階段，又可分為 `mounted` `updated` `unmounted` 等等，將近十個時間點 根據應用程式的需要，可以在這十個時間點，進行必要的檢查＆執行特定任務 但是，實務上，除了 `mounted` 經常用來跑一些初始化任務之外，其餘的時間點，幾乎不會用到 所謂 Lifecycle Hooks 是一個有點過時的觀念！稍微讀一下就好，相關功能大多被 Watchers 取代了 --- 接著就來認識一下 Watchers - https://vuejs.org/guide/essentials/watchers.html 簡單講，在 Vue 中，所謂的 Reactivity 已經很好用了： 「某些變數在更新之後，其他相關變數、以及畫面 UI，會跟著自動更新」 除此之外，還可以進一步使用更進階功能： 「隨時監控某些變數，如果發現它們更新，就執行一些相關的任務」 這些任務我們稱之為 `副作用（side effects）` 關於 side effects 怎麼解釋，是一個比較困難的主題 這邊先不詳談，目前有點困惑沒關係，作業中會讓你練習一下，先有點小感覺就好 ## 課後作業 承接上一課的作業 這一課要來做自動儲存功能 請使用 Watchers 去監聽 `notes` 狀態 每次 `notes` 有更新，就自動儲存到 Local Storage 裡面！ 接著，在 `mounted` 裡面檢查 Local Storage 如果有資料，就把資料更新到 `notes` 裡面 如此一來，就完成了自動儲存功能，連儲存按鈕都不用做！ --- 提示：普通的 watchers 不夠用，要使用 Deep Watchers 這部份有點難解釋，你先知道：普通的 data 變數型態，例如字串、數字、布林，可以用普通的 watcher 但如果是陣列或物件型態的 data，就要使用 Deep Watchers 先知道這樣就好 --- 做出以上功能，你就完成這次的課程目標了！
你的轉職路上，還缺少一份自學作業包！寫完這幾包，直接拿作品去面試上班！
本論壇另有附設一個 LINE 新手發問＆交流群組！歡迎加入討論！
