阿川收到網友提問如下： > 您可以分享您的軟體工程師職崖規劃嗎?再次感謝 我個人的職涯規劃其實比較偏激，是同時做「上班＆接案＆創業」這三件事 我簡單說明一下爲什麼我會這樣做，給大家參考 --- 我是 79 年次，2013 年退伍的，大學資管系畢業 出社會第一個月我就發現，我滿不喜歡上班的，但是我沒有能力、也沒有錢創業 於是我設計了一個我稱之為「三把梯子」的方法論，作為長期生涯指引 # 三把梯子理論 第一把梯子是上班：成為資深工程師、跳槽更大公司、賺更多薪水，這樣不斷往上爬 第二把梯子是接案：接親戚朋友介紹的案子、累積個人品牌、得到更多的客源，開公司接案，這樣不斷往上爬 第三把梯子是創業：研發軟體產品，從 side project 開始，從 open source 開始，學習行銷，學賺錢、寫更多產品、開公司創業，這樣不斷往上爬 基本上就是上班族、自由工作者、創業者三種職業生涯 --- 我給自己的三把梯子指引是：先從第一把梯子開始往上爬，稍微爬一段，就往旁邊的第二把梯子踩過去，接著爬 接著在第二把梯子慢慢往上爬，稍微爬一段，準備好了就往第三把梯子爬過去，慢慢往上爬 在這個過程中，只要覺得腳步沒踩穩、會摔死，就往回踩過去，爬前一把梯子 你可能覺得很離譜：想要同時兼顧三件事，不就會變成通通都搞砸嗎？ 其實，你只要... # 做同時對兩三把梯子有幫助的事情 職涯的大方向有了，接著就是付諸行動，要做一些能「同時對兩三把梯子有幫助」的事情 ## 部落格 我在 2013 年想到的事情是「寫部落格」，我非常勤奮地寫了兩三年，很多文章都還找得到 - https://blog.turn.tw/ - https://startup.turn.tw/ - https://dev.turn.tw/ 寫部落格、並且試著得到流量，會同時學到寫作、銷售、溝通能力，對三把梯子都會有幫助 我在寫到多篇文章都有數十萬瀏覽量之後，我就大致知道自己掌握這項技能了 ## 研討會 接著我想到的事情是「參與 conference 分享」 其實這沒有大家以為的那麼難，算是寫作的延伸加強版而已，拿原創的文章去一些小聚、研討會發表 我在成為 PHPConf Taiwan 2015 以及 LaravelConf Taiwan 2018 的講者之後，我就大致知道自己掌握這項技能了了 ## 做專案 再來是「寫 side project」以及做「open source」 一開始可以先做好玩為主，但之後要稍微從一些商業野心出發，才能學習 `monetization` （賺錢）這件事 我做了一些專案，在國內外論壇到處分享，成績馬馬虎虎，但我也學到很多 --- 上面這三件事情，會同時對「前兩把梯子」有巨大幫助，在找工作、或者接案的時候，很多人會更信賴你，對第三把梯子也會有點幫助 當然，像這樣同時爬三把梯子，沒辦法跟「專心爬一把梯子」的人比，這是一定的，而且要付出的時間相當龐大 但是，這讓我獲得足夠的安全感，避免一次做太高風險的事情，而且也有後路可退 # 我目前的三把梯子的進度 第一把：我現在去投履歷、找工作，在各種大小的公司都還是有面試機會，也有很多業界的朋友可以幫忙介紹，要上班沒問題 第二把：在完全不主動去找案子的情況下，很多朋友會幫忙轉介紹案子給我 我也是美國接案平台的簽約工程師 https://www.toptal.com/resume/chuan-hao-you 有時會接一些歐美的案子，所以要接案沒問題 第三把：我大概做了70個左右的 side project 目前正在經營的有這幾個 梗圖工具 https://memes.tw/ 每月60萬不重複使用者 咖啡廳資料 https://cafenomad.tw/ 每月3萬不重複使用者 活動平台 https://yii.tw/ 每月2萬不重複使用者 工程師交流 https://codelove.tw/ 您目前正在看的網站 另外還有 房地產 https://landchart.tw/ 書評網 https://wenwen.life/ 美女圖 https://beautyhunt.tw/ 批踢踢閒逛 https://www.ptt.best/ 這些網站，其中有幾個，是有一些收入的，所以第三把創業的梯子也還可以 目前這三把梯子，其實我都還正在爬，並沒有最後一定會待在哪一把梯子上面 # 結論 這邊簡單分享我替自己設計的職業生涯，「三把梯子」算是一種很偏激的職業生涯 業界像這樣做的工程師應該非常少數，最大缺點就是要花費的時間非常多，優點就是，其實樂趣不少 其實，學無止盡，這就只是同時在「技術」跟「商業」兩方面花時間學習而已 能分享的事情還有很多，大家有興趣就多多按讚吧，也許我再多寫一些這方面的文章！ 也歡迎大家多多發表文章，這個 CodeLove 就是我做來給工程師們互相交流的地方！ 以上簡單分享，希望對你有幫助～！
最近在幫客戶專案寫 e2e 測試，發現幾個常見錯誤 首先，e2e 跑起來很慢，會拖慢 CI 速度，應該不是多多益善，而是要挑高價值的來寫 很多基本狀況、訊息提示、UI 表現，應該要用 unit test 來處理，vue 與 react 應該都有對應的 `component test` 工具可以寫 --- 再來，e2e 處理的情境要怎麼切分？這是典型的程式邊界（boundary）問題，也是 `抽象化` 問題的一種 網路上四處找範例，沒找到比較好用的設計方法，我試著自己設計 目前思考出幾個參考原則，要同時符合以下條件，才放進 e2e 測試 - 高價值原則：如果用戶處在這個情境，然後測試跑失敗了，老闆會很緊張，工程師就算在週末也需要緊急修理 - 變動頻繁原則：相關程式碼經常變動，所以每次在 CI 都跑測試會很有幫助 - 最後手段原則：這裡提供的安全感，沒辦法用 unit test 或 integration test 取代 --- # Refs - https://filiphric.com/how-to-structure-a-big-project-in-cypress - https://sendgrid.com/blog/ideas-for-configuring-organizing-and-consolidating-your-cypress-tests-frontendtwiliosendgrid/ - https://www.linkedin.com/pulse/organizing-maintaining-your-cypress-test-suite-best-kate-serebryakova/ - https://kentcdodds.com/blog/static-vs-unit-vs-integration-vs-e2e-tests
https://www.youtube.com/watch?v=Rr5AqASIyxw ## TL;DR - 在 JSX 使用 0 時，雖然是 falsy 但還是渲染出來 - [官方文件特別提醒要注意](https://react.dev/learn/conditional-rendering#logical-and-operator-:~:text=in%20its%20place.-,Pitfall,-Don%E2%80%99t%20put%20numbers) - [hackmd 版本](https://hackmd.io/@jason60810/BkKJwzk6h) ## Logical AND operator (&&) 在使用 `&&` 時要特別注意數字 0 的使用。 常見情況 : 根據是否是空陣列決定要不要印出陣列。 ### [範例程式碼](https://stackblitz.com/edit/react-uufonv?file=src%2FApp.js) ### 錯誤使用方法 1. 紅色 : 把 0 渲染出來 ### 解決方法 1. 變成布林值 1. 綠色 : 判斷是否大於 0 2. 綠色 : 利用兩個 `!!` 2. 橘色 : 使用 Logical OR operator (||) 
想玩一下 stable diffusion 在 macbook 嘗試了一下 不太好安裝 拿出家中的老舊筆電 2018 年買的 asus zenbook 上面有雙系統 ubuntu 18.04 不過顯卡一直沒有順利啟用 不管了先用 cpu 硬跑 https://github.com/AUTOMATIC1111/stable-diffusion-webui 按照 repo 指令照做 然後我有參考這篇文章 亂跑一些 pip 安裝指令之類的 反正亂裝一通 https://zhuanlan.zhihu.com/p/628058158 在執行這個時 會遇到很多錯誤訊息 ``` ./webui.sh ``` 在 terminal 先設定一些環境變數 好像是關閉搜尋顯卡吧 ``` export COMMANDLINE_ARGS="--skip-torch-cuda-test --precision full --no-half" ``` 就可以了 實際跑起來，產生一張圖，大概要 5 分鐘左右
租用了新的雲端主機，有一天發現全部線上網站都掛了 經檢查發現是硬碟被吃光了，但是我應該沒有存那麼多資料＆圖片才對 使用指令慢慢檢查根目錄，在查到 var 時 ``` du -sh /var ``` 發現是 var 資料夾佔用了 125 GB，顯然問題就在這裡 接著使用 ``` du -h /var ``` 發現疑似是 mysql 資料夾，佔用大量硬碟空間 繼續使用指令確認 ``` du -sh /var/lib/mysql ``` 以及查看細節 ``` du -h /var/lib/mysql ``` 發現就是這個資料夾沒錯，cd 進去 ls 看一下，看到大量的 binlog 檔案，命名類似這樣 ``` ... binlog.000738 binlog.000739 binlog.000740 ... ``` 經研究，是 mysql 某種備份機制，暫時不深入研究，我目前不想使用這個備份功能 --- 輸入以下 SQL 緊急移除這些備份 ``` PURGE BINARY LOGS BEFORE NOW(); ``` 硬碟緊急狀況排除！ --- 接著要避免之後再出現這個問題 參考這篇做法 https://askubuntu.com/questions/1322041/how-to-solve-increasing-size-of-mysql-binlog-files-problem 建立獨立檔案，方便日後維護 ``` touch /etc/mysql/mysql.conf.d/howtomakeaturn.cnf ``` 放入以下內容 ``` # Added by howtomakeaturn at 2023-08-15 because of 100% disk usage issue. [mysqld] log_bin = # turn off binlog_expire_logs_seconds = 86400 # 1 day max_binlog_size = 104857600 # 100M ``` 完成之後重啟資料庫 ``` service mysql restart ``` 大功告成！應該大致關閉 binlog 功能了，持續觀察幾天看看！
https://youtu.be/I7dwJxGuGYQ ## TL;DR - 在使用 useContext 時，一定要將其包裝成 custom hook - [好讀版本](https://hackmd.io/@jason60810/rklVqNUh2) - [React 官方文件新增了 TypeScript 使用專文](https://react.dev/learn/typescript?fbclid=IwAR3Pgkr8xpS48Vwa0ADo3oagaAPKX1q05jHhtbXH8ltV8MKwa8FAvePoXPU) - [英文版本](https://jason60810.hashnode.dev/always-use-a-custom-hook-for-context-api-not-usecontext-react-context-api-typescript) ## 資料夾結構 ( 使用 next app route )  ### theme-context.tsx 一定要加上 `use client`，因為 useState 只能在 client component 運作 ， **特別注意，就算這裡加了`use client`，所有的子層還是 server component (預設)**  ### layout.tsx 加上 provider 之後，下面所有的子層都可以拿到值，不用用 prop 一個一個傳下去  ### page.tsx  ### logo.tsx 1. 因為 useContext 要在 client component 運作，所以要加上 `use client`。 2. 當使用 useContext 時，一定要引入 ThemeContext，用起來很麻煩 3. 因為 ThemeContext 預設是 null，所以當不是在 provider 裡使用 `useContext` 時 ( Logo component )，會發生錯誤，因此需要先確認有 context  舉例:不是在 provider 裡使用 `useContext`  ### 創建 custom hook  ### 使用 custom hook 現在引入 ThemeContext 和處理錯誤的問題，已經抽離到 custom hook 中  ### 加上型別 1. React.ReactNode，可以接受 JavaScript primitives ，如果只想要是 jsx 可以使用 React.ReactElement ( [react 官方文件](https://react.dev/learn/typescript#typing-children) ) 2. `type Theme` 可以讓 `useState` 在 get 和 set 時，可以使用正確的型別，例如:當想要 `setTheme('blue')` 時，會報錯，因為 `type Theme` 只有 'dark' 和 'light' 3. 在給予 createContext 型別時，可以利用 ts 的 union 讓 createContext 知道可能有 null 這個型別 ( [react 官方文件](https://react.dev/learn/typescript#typing-usecontext) ) 
## 課程目標 - 能夠從 Github 抓專案下來 ## 課程內容 我們在上一課發佈專案到 Github 了 這次來學習把專案從 Github 抓下來吧！ 首先來把電腦上的專案刪掉，模擬我們今天拿到一台新電腦的情境 在主視窗點選 `Current Repository` 會秀出專案列表 對著我們的專案 `my-first-repo` 按右鍵，然後選 `Remove` 刪除，確認視窗繼續按 `Remove` 會發現 Github Desktop 變回初始畫面了！ --- 但目前只是 Github Desktop 停止追蹤專案而已，那個資料夾其實還在電腦上喔 請在電腦上，直接前往那個資料夾，會發現檔案都還在 請把 `my-first-repo` 整個資料夾刪掉，這樣才是真的模擬拿到新電腦 --- 現在來試著把專案從 github 抓下來吧！ 點擊 `Clone a Repository from the Internet` 因為已經登入 github 了，應該會顯示專案列表 找到上次發佈的 `my-first-repo` 專案 （如果專案沒出現，畫面上有一個重新整理的按鈕，按一下） 然後 `Clone` 按鈕按下去 成功囉！專案回來囉！ `History` 分頁按下去，看看是不是跟之前都一模一樣？ 軟體工程師在跨裝置工作（使用多台電腦）、或是多位工程師合作時，就是這樣同步專案內容的！ ## 課後作業 接續前一課的作業，專案已經傳到 github 了 現在來模擬你拿到新電腦，第一次從 github 抓專案的情境 請把原本電腦上的那個專案資料夾，整個刪掉 這時去看 Github Desktop，應該會顯示「Can't find」開頭的提示 請將 Github Desktop 視窗截圖，這是本次作業的第一張截圖 截圖完畢之後，點擊畫面上的 `Remove` 將這個專案刪掉 --- 現在電腦上已經沒有專案了，就當作你今天拿到一台新電腦，準備開始工作，要把 github 上的專案抓下來 請點擊 `Add` 然後選 `Clone Repository...` 接著找到你在 github 上的專案 把剛剛那個專案整個抓下來之後，你應該會發現，剛剛整個刪掉的專案資料夾，現在內容又通通出現囉！ 請將 Github Desktop 視窗截圖，這是本次作業的第二張截圖 --- 完成以上任務，你就完成這次的課程目標了！ --- 交作業的方法： 請把第一張、第二張截圖，分別貼到留言區
## 課程目標 - 能夠發佈專案到 Github ## 課程內容 我們已經在上一課成功連線 Github 了 這一課，來把我們的專案發佈到 Github 吧！ 如果是跟同事合作，處理公司的專案，我們稱為 `Private repository` 如果是開源專案，發佈給全世界工程師使用，我們稱為 `Public repository` 在 Github Desktop 主視窗，會看到 `Publish repository` 按鈕 點下去，會看到 `Name` 預設就是專案名稱，`Description` 可以省略不填 下面的 `Keep this code private` 預設是勾選，也就是私人專案，把這取消掉，就是開源專案了 最後的 `Publish Repository` 按鈕按下去，視窗會自動關閉，代表發佈成功了！ 回到 Github，右上方點擊自己的頭像，`Your repositories` 點下去，會看到剛剛發佈的專案！ 以我的範例來說，我的專案在這邊，可以看到專案的各種檔案內容 https://github.com/howtomakeaturn/my-first-repo 然後這邊可以看到 commit 歷史記錄 https://github.com/howtomakeaturn/my-first-repo/commits/main 很酷吧！ ## 課後作業 接續前一課的作業，現在你打算把專案上傳到 github，當做雲端備份，也方便自己在桌電、筆電上都能工作 請點擊 `Publish repository` 將專案發佈到 github 發佈之後，你應該會在 github 網站上面，找到剛剛發佈的專案、看到專案的程式碼、也能看到多筆 commit 歷史紀錄 完成以上任務，你就完成這次的課程目標了！ --- 交作業的方法： 請把 github 專案連結，貼到留言區
## 課程目標 - 學會連線 Github 帳號 ## 課程內容 這課的任務很簡單：來準備連線 Github 吧 大名鼎鼎的 Github 是軟體工程師，最重要的資源網站之一 超大量的開源專案，都在 Github 上面分享，是一個必用的網站 請先前往官網註冊帳號 https://github.com/ 註冊完成之後，請回到 Github Desktop 請在 Github Desktop 上方的導覽列，選擇 `Preferences` 然後選擇 `Accounts` 在 Github 那邊選擇 `Sign In` 登入 應該會跳回瀏覽器，然後進行登入、授權、確認流程 完成之後，你的 Github Desktop 就成功連線 GitHub 囉！ ## 課後作業 接續前一課的作業，我們來準備發佈專案到 github 吧！這次先試著登入帳號就好！ 請註冊一個 github 帳號，然後在 Github Desktop 登入 github 帳號 請在 Github Desktop 上方的導覽列，選擇 `Preferences` 然後選擇 `Accounts` 在 github 那邊登入帳號，登入成功之後，應該會看到登入按鈕，變成 `Sign Out` 登出按鈕 完成以上任務，你就完成這次的課程目標了！ --- 交作業的方法： 請直接截圖 Github Desktop 視窗的內容，上傳到留言區
## 課程目標 - 學會重置指令 ## 課程內容 來學一個強大的指令：重置 上一課的取消功能，是針對修改到一半的檔案 這時很自然會浮現一個問題：如果是之前已經提交過的內容，有辦法取消嗎？ 點開 `History` 分頁，假如我們今天對「上上次的提交內容」不滿，也就是 `add another work` 那筆 commit 不滿意，怎麼辦？ 其實很簡單！ 請把滑鼠游標移到 commit 上面，點擊右鍵，選擇 `Revert Changes in Commit` 你會發現 `History` 多了一筆 commit！ 這筆 commit 內容跟原本的 commit 內容完全相反，也就是會抵銷掉那筆 commit！ 打開資料夾看一下，會發現 `my-document-3.txt` 檔案整個不見了！ 這就是 git 強大的地方：不只是正在修改的檔案內容，連之前修改的內容，都可以追蹤、回溯、管理！ --- 看到這邊你可能會心想：為什麼要多一筆 commit？ 怎麼不把那筆 commit 直接刪除掉就好？ 其實，這是因為 git 通常是「團隊在使用」的工具 已經送出去的 commit，通常已經同步到很多人的電腦上了 如果這時工程師 A 刪了這筆 commit，工程師 B 刪了那筆 commit，那最後同步起來，大家電腦上的 commit 歷史記錄，到底長怎樣？很亂吧？ 所以，git 就一律設計成：想要回溯，就也是加一筆 commit！只是會自動進行相反的變化！ 這樣大家電腦上的 commit 歷史記錄，同步起來，就單純很多了！commit 數量永遠都是加法，不斷加上去而已！ 很聰明的設計吧！ ## 課後作業 這次來模擬實際工作的時候，你突然對之前的 commit 內容不滿意，想要把檔案內容還原的過程 繼續修改我們的履歷表專案吧！ 目前裡面有 `me.txt` `about.txt` `background.txt` `goals.txt` 四個檔案 你突然又有點反悔，覺得 `about.txt` 跟 `background.txt` 很多餘，想要把內容移回 `me.txt` 裡面 開發專案時，像這樣反反覆覆其實很正常，git 就是為了處理這種情境而生的 請切換到 `History` 分頁，找到之前把 `me.txt` 檔案改寫的那個 commit 然後使用 `Revert Changes in Commit` 功能來還原 commit 內容 還原之後，你可以看一下資料夾內容，應該會發現變回之前的樣子了！ 然後在 `History` 分頁應該會看到，多了一筆 commit，是用來記錄那筆還原的 完成以上任務，你就完成這次的課程目標了！ --- 交作業的方法： 請直接截圖 Github Desktop 視窗的內容，上傳到留言區
## 課程目標 - 學會簡易的檔案變化操作 ## 課程內容 來學一點簡單的檔案變化操作吧！ 打開 `my-document-1.txt` 然後多加下面這行字 ``` 是一段亂打的字 ``` 你會在 Github Desktop 再次看到 `my-document-1.txt` 檔案出現了，然後內容變化會在右側出現 假設我們今天對這次的變化內容不滿意，想要整個取消，該怎麼用 git 做到呢？ 請把滑鼠游標移到檔案上面，點擊右鍵，選擇 `Discard Changes...` 會跳出確認視窗，跟你確認真的要捨棄這些變化嗎？點擊 `Discard Changes` 會發現檔案消失在 `Changes` 分頁囉！ 代表檔案內容又變回去了，所以目前沒有任何變化～很酷吧！ 軟體工程師在工作時，常常會一口氣修改很多檔案，然後常常改到一半又對某些修改反悔，這時就可以這樣快速取消變化！ ## 課後作業 這次來模擬實際工作的時候，檔案改到一半，反悔了，然後取消的過程 繼續修改我們的履歷表專案吧！ 首先，你想補充更多學歷資訊 請先在 `background.txt` 加入以下資訊 ``` - 國小：開心國小 - 國中：快樂國中 ``` 你應該會在 `Changes` 分頁看到變化的部份出現 請將 Github Desktop 視窗截圖，這是本次作業的第一張截圖 --- 想了一下，你突然又覺得，國中國小學歷，應該沒人關心，還是別放進去好了 請使用 `Discard Changes...` 功能把 `background.txt` 檔案變回原樣 這時再看 `Changes` 分頁，應該又乾乾淨淨了，裡面沒有東西 請將 Github Desktop 視窗截圖，這是本次作業的第二張截圖 --- 完成以上任務，你就完成這次的課程目標了！ --- 交作業的方法： 請把第一張、第二張截圖，分別貼到留言區
## 課程目標 - 學會基本指令 ## 課程內容 繼續上一課的內容，這次在同個資料夾內，再新增一個檔案 `my-document-2.txt`，裡面放入以下內容 ``` 我的第二個筆記檔案 ``` 接著打開 Github Desktop 看看狀況 會看到 `Changes` 分頁下面，現在有兩個檔案 分別點選檔案，可以在右側主視窗看到內容 --- 在 git 的觀念裡面，git 預期我們每次工作，都會修改到很多檔案 每次工作到一段落時，要提交進度給團隊時，都會一口氣將這些檔案變化送出去 這個所謂的「提交」，在 git 中稱之為 `Commit` 所以，你會很常聽到工程師說「這個 commit」、「那個 commit」、「上次的 commit」、「你昨天的 commit」 來試試看提交我們的第一次版本紀錄吧！ 每次提交，都需要打一段提示訊息，方便日後翻閱，大致知道每個提交的內容 請在左下角的 `Summary` 輸入 ``` this is my first commit, i am so happy! ``` `Description` 可以省略，不用輸入 接著點擊 `Commit to main` 你會發現 `Changes` 分頁列表清空了！本來的兩個檔案不見了 這是因為 `Changes` 代表「這次正在修改的檔案」，送出 commit 代表「本次修改完成並提交」了，所以就不再有「這次正在修改的檔案」了 請點選旁邊的 `History` 分頁，會看到剛剛的 commit，點選 commit 可以看到相關的檔案內容變化，很酷吧！ --- 讓我們多提交幾次檔案，試試看多次提交的感覺！ 先建立新檔案，請建立 `my-document-3.txt` 並放入以下內容 ``` 我的第三個筆記檔案 ``` 然後在 `Summary` 輸入 ``` add another work ``` 之後就 `Commit to main` 直接點下去！又送出一筆 commit 囉！ --- 來，我們再建立新檔案一次，請建立 `my-document-4.txt` 並放入以下內容 ``` 我的第四個筆記檔案 ``` 然後在 `Summary` 輸入 ``` add one more work ``` 之後就 `Commit to main` 直接點下去！又送出一筆 commit 囉！ --- 點開 `History` 分頁看看吧！ 會看到剛剛的三筆 commit 記錄都在裡面 點擊不同的 commit 可以看到對應的 commit 內容 Git 會追蹤整個資料夾內的所有變化！包括：建立新檔案、檔案內容的增加、檔案內容的減少、檔案被刪除 這些變化也會在每次提交 commit 時被記錄下來，所以都可以在 `History` 分頁看到記錄，很強大吧！ ## 課後作業 接續前一課的作業，你的專案目前有一個 txt 檔案 這次要來模擬實際工作的時候，反覆修改檔案、增減檔案的過程 請按照以下順序送出 commit **第一個 commit：** 請把目前的 `me.txt` 檔案放進 commit 裡面。 **第二個 commit：** 你改變心意，覺得拆成多個檔案比較清楚，之後分別寫內容比較好 請把 `me.txt` 檔案的內容清空，改放以下內容 ``` 我是XXX，請參考其它檔案，瞭解更多我的介紹與背景。 ``` 新增 `about.txt` 以及 `background.txt` 兩個檔案 並且把 `我是誰` 的內容放進 `about.txt`，把 `我的學歷` 的內容放進 `background.txt` **第三個 commit：** 你靈機一動，覺得在履歷寫一些個人的大目標，會讓人感覺氣勢很強 新增一個 `goals.txt` 檔案，裡面放入以下內容 ``` 我的目標，是成為貴公司的 CTO（技術長）。 ``` --- 最後，點開左側的 `History` 分頁，應該會看到以上三個 commit 的訊息！ 完成以上任務，你就完成這次的課程目標了！ --- 交作業的方法： 請直接截圖 Github Desktop 視窗的內容，上傳到留言區
## 課程目標 - 學會專案初始化 ## 課程內容 在開始之前，我先再次說明一下 Git 與 Github Desktop 的不同 Git 是軟體工程師每天都會用到的，強大的專案版本管理工具，本身是命令列工具，要一直在終端機打指令 Github Desktop 是 Github 公司，為了方便入門者，所開發的 GUI（圖形化介面）工具，用起來簡單很多 本課程會交替使用這兩個名詞，前者代表 Git 正在發揮作用，後者代表正在操作 Github Desktop 功能 有點分不清楚沒關係，反正就知道有這差別即可，日後經驗更多，會越來越清楚 --- 讓我們開始玩玩看 Github Desktop 吧！ 請先前往官網下載並安裝 https://desktop.github.com/ 在登入 Github 帳號的步驟，先選 `Skip this step` 跳過就好，我們後面課程再登入就好 --- 進入到 Github Desktop 主畫面之後，首先我們要設定一下 git 基本資訊 也就是在用 git 管理專案紀錄時，每次提交變化時，當筆提交的「作者資訊」 請在 Github Desktop 上方的導覽列，選擇 `Preferences` 然後選擇 `Git` 把 `Name` 跟 `Email` 欄位填寫一下，然後點擊 `Save` 按鈕，就可以囉！ --- 來建立第一個用 git 管理的專案吧！ 在主畫面，點選 `Create a New Repository on your Hard Drive` `Name` 就輸入 `my-first-repo` `Description` 可以省略不填 `Local Path` 隨便選一個方便的路徑 其餘的選項都保持預設就好，不用勾選 `Create Repository` 點下去，就建立第一個專案資料夾囉！ --- 請在電腦上，直接打開那個資料夾，然後在資料夾裡面新增一個檔案 `my-document-1.txt`，裡面放入以下內容 ``` 我的第一個筆記檔案 ``` 接著打開 Github Desktop 看看狀況 會看到 `Changes` 分頁下面，有出現 `my-document-1.txt` 這個檔案 然後右側的主視窗，有顯示出檔案內容 這代表 git 已經發現它的存在了 我們成功使用 git 開始追蹤專案的歷史變化了！ 這是一個很好的開始，本課先做到這樣就好！ ## 課後作業 假設你正在準備履歷表，整理一些自我介紹、經營個人品牌的檔案 請建立一個名為 `my-resume` 的資料夾，並使用 git 開始追蹤這個資料夾 請在其中建立一個 `me.txt` 的文字檔案，裡面放入以下內容 ``` # 我是誰 - 我是XXX，目前在自學程式設計 # 我的學歷 - 高中：積極高中 - 大學：品質大學 ``` 你應該會在 `Changes` 分頁看到檔案出現 然後在右側主視窗，看到文字檔案的內容 完成以上任務，你就完成這次的課程目標了！ --- 交作業的方法： 請直接截圖 Github Desktop 視窗的內容，上傳到留言區
在我們新手寫程式 LINE 群組，有幾個業界工程師＆想要轉職的新手在討論： 非本科轉職，到底要學什麼語言？ https://line.me/ti/g2/nipkjq2WoZPKX5dTn9tE9266aEOt6EOICFGa1g 這個問題在群組中，重複出現快十次了！ 我決定設計一個量化指數，給大家參考，一次回答這個「大哉問」！ --- # CodeLove 程式語言新手友善指數 - 簡介 我設計的這個指數，我命名為「CodeLove 程式語言新手友善指數」 因為每次有人問我，我都是請對方報名補習班之前，先打開人力銀行，親眼看一下那些職缺＆產業是否喜歡！ 如果歡迎新手的職缺很少，那這個語言不管多強大、多好學，在台灣都不能算是適合新手！畢竟大家轉職就是想儘快找到工作！ 指數公式是這樣： - 打開 104 人力銀行，搜尋「某某程式語言」、只搜尋職務名稱、經歷要求1年以下，得到歡迎新手的職缺數 X - 打開 1111 人力銀行，搜尋「某某程式語言」、僅搜尋職缺名稱、工作經驗選無經驗，得到歡迎新手的職缺數 Y - 把 X + Y = 最終結果 這個最終數字，大概就是你今天去找工作，市場上歡迎你這種非本科、無經驗的職缺數量！ 不論你是補習班畢業或者自學結束，請參考這些數字：願意給你機會的職缺大概是這麼多！ --- # CodeLove 程式語言新手友善指數 - 2023年8月份排行榜 - `#1` Java (267) - `#2` C# (241) - `#3` PHP (167) - `#4` Python (87) - `#5` Golang (32) - `#6` Ruby (3) - `#7` Rust (2) # 結論 非本科轉職，到底要選什麼程式語言？ 你當然要綜合考量： - 有沒有喜歡的補習班開課 - 程式語言本身的學習難度 - 身邊熟識的工程師是專精哪個 - 相關的免費、付費線上自學資源多寡 我知道，上面這個指數，公式過度簡化，但至少有個參考數字！ 我有留意到，有些人，因為煩惱這個問題，重複研究了很久，遲遲做不了決定，很害怕選錯 實務上，有些職缺會貼在 FB 社團、或其他人力資源網站、有些職缺沒把語言寫在「職務名稱」上，所以真正的職缺其實更多！ 我個人認為，1 ~ 4 光看數字就知道還不錯！有心動的課程就去報名吧，別一直胡思亂想嚇自己！ 5 你就再多多評估、研究一下！應該也還行！ 6 7 這種數字，我只是想說明，如果你有認識的工程師，推薦你非本科去學 Ruby 或 Rust，那你可能要同時請他推薦職缺了！因為幾乎沒有願意給你機會的職缺！ 以上，簡單分享，希望對你有幫助！ 可以留言：你想看的程式語言，我找時間做一份更新、涵蓋更多語言的！
手上有多個網站 都是 Laravel 5.8，放在一台 Ubuntu 18.04 的機器上（租用 Linode 機器） 四、五年了，一直沒去更新，最近終於下定決心來更新 首先把 Laravel 5 -> 6 -> 7 分多次升級，然後部署 都還算順利，官方的 upgrade guide 很清楚，簡單照做就完成 但是無法升到 laravel 8 因為需要 php 8 我那台 ubuntu 18.04 安裝 php 8 一直失敗 直接升級 OS 也失敗，一堆問題會出現 最後決定，在 Linode 租一台新的 Ubuntu 22.04 然後把專案通通搬過去 --- 因為專案中很多「用戶上傳的圖片」放在 local，所以都需要一起搬運 最後是用 scp 硬搬檔案 然後用 mysqldump 搬運資料 才終於順利升級到 laravel 8.83 了 詳細用到的指令大概像這樣 ``` scp -r [email protected]:/{PATH}/{FOLDER} /{PATH} scp -r [email protected]:/etc/apache2/sites-available/{CONF_FILE} /etc/apache2/sites-available/ a2ensite service apache2 reload create mysql user & database with phpmyadmin mysqldump --column-statistics=0 --default-character-set=utf8mb4 -h xxx.xxx.xxx.xxx -u {USER} --single-transaction -p{PASSWORD} {DATABASE} > /home/dump.sql; mysql -u root -p{PASSWORD} {DATABASE} < /home/dump.sql artisan down legacy site composer install -> new site is now online ``` --- 簡單筆記分享一下，希望能幫到一些人～ # Refs - https://www.digitalocean.com/community/tutorials/how-to-install-linux-apache-mysql-php-lamp-stack-on-ubuntu-22-04#how-to-find-your-server-s-public-ip-address - https://itslinuxfoss.com/install-laravel-ubuntu-22-04-lts/ - https://www.digitalocean.com/community/tutorials/how-to-configure-apache-http-with-mpm-event-and-php-fpm-on-ubuntu-18-04 - phpmyadmin password left blank, so it's random now - https://www.digitalocean.com/community/tutorials/how-to-install-and-secure-phpmyadmin-on-ubuntu-22-04 - skip the whole Step 2 — Adjusting User Authentication and Privileges - `ssh-keygen` because I need a public key
昨天在我們新手寫程式 LINE 群組，有幾個業界工程師＆新手在討論： 如果前端要銜接後端的話，是不是學 node.js 比較快？ https://line.me/ti/g2/nipkjq2WoZPKX5dTn9tE9266aEOt6EOICFGa1g 這主題很好，我決定單獨寫一篇文章討論這件事情 --- 首先，我很推薦新手前端也去學一點後端，這樣對整體概念會更清楚 這位網友提到的 node.js 很不錯，但是我更推薦去學 php，簡單幾個原因說明如下 # 無框架開發 常見的後端語言，在寫網站時，都需要套件＆框架才能開發 - python 需要 django - ruby 需要 rails - java 需要 spring - node 需要 express 我建議你直接寫 php 做好玩的小網站，不要用框架 php 雖然現在都用 laravel 框架，但古早時代大家都寫純 php 如果現在只是自己做個小專案，當然寫純 php 也是夠用的 學框架沒什麼不好，但是，在新手一開始的階段，我更推薦從單純的東西開始學起 一來上手很快，二來等於是紮穩馬步，三來之後學框架可以去思考：如何用純 php 語言寫出框架元件 如果自己想補充後端知識，就試試純 php 吧！先別學 laravel，晚點再去學就好 # 後端先避免非同步程式設計 這件事比較 tricky，javascript 語言本身支援非同步，這在前端 UI 處理很好用 也就是常用的 async/await，`.then().then().then()` 或者到處傳 callback function 那些的 但是！我認為在寫後端的時候，這個語言特色會讓後端開發時，顯得有點囉唆 以後端讀取檔案內容來說，絕大多數情況下，你就是要現在就讀取好檔案、讀取完才讓程式接著繼續跑，才有意義 幾乎不存在「非同步去讀取檔案，不等結果，先直接去處理別的任務」這種情況 於是 node 後端程式碼就需要去傳 callback function 或者 async/await 我認為這有點囉唆，這些情境實在沒必要用「非同步程式設計」處理！ node 社群自己也知道，所以除了 `fs.readFile` 之外，還有提供 `fs.readFileSync` 函式 作為一個教育者，我很不喜歡跟新手解釋，為甚麼會有這兩種函式，差異在哪 我認為新手後端，多去學非同步程式設計的觀念與技巧，是徒增挫折 用 python/php/ruby/java 寫後端，都不會遇到這個困擾 新手後端就學好 http 協定，GET 跟 POST 參數是怎麼傳遞的，怎麼使用 session，怎麼連接資料庫就好了 不要多被一個 asynchronous programming 困擾 # 多學一個程式語言 本身是前端工程師，再去學後端想用 node 繼續寫 javascript 當然很合理 不過，長遠來說，多學幾種程式語言，對職業生涯比較健康 首先，你會更有自信一點，並且，能夠開始比較各種程式語言的差異與哲學 很多在 A 語言理所當然的事情，在 B 語言是很罕見的 很多在 A 語言社群大家都說「對」的事情，在 B 語言社群大家都說「錯」 長遠職業生涯來說，你需要至少寫過多種程式語言，才會發現大多數事情都只是「不同社群」的「主觀偏好」 你會發現網路上多數講的斬釘截鐵的對錯觀念，都只是一種偏執。你的觀點會更全面 # 結論 以這位網友的狀況來說，本身是前端，其實，學 nodejs 或 php 都不錯啦 我個人是偏好 php > nodejs 一點，這樣 以上，簡單分享，希望對類似狀況的朋友有幫助！
昨天在我們新手寫程式 LINE 群組，有幾個業界工程師＆剛轉職的新手在討論： 我是新手前端，公司叫我學一點 php + laravel 串 API，該從哪邊學起呢？ https://line.me/ti/g2/nipkjq2WoZPKX5dTn9tE9266aEOt6EOICFGa1g 這主題很好，我決定單獨寫一篇文章討論這件事情 --- 我猜你面臨的情況，老闆不是真的叫你從無到有寫後端，應該是去硬改現成的後端專案 因為是公司馬上需要的，先求速成為主，背後細節就先別管了 就分幾個步驟來做吧 # Step 1 laravel 官網 `Installation` 章節讀一讀，然後看你用什麼作業系統，網路上 laravel 安裝教學找幾份試試看 先想辦法把環境跑起來，讓目前專案可以在電腦上跑 然後找一款有 GUI（圖形化介面）的資料庫管理軟體，在 UI 上點一點，準備好資料庫 # Step 2 `Routing` `Controllers` `Requests` `Responses` 這幾個章節讀一讀 至少稍微看懂，後端是哪些地方在接收參數、回應參數 # Step 3 把 `Eloquent ORM` 章節讀一讀，這個類別提供很多神奇的方法，很輕易就能做到 CRUD 至少稍微看懂，後端是哪些地方在跟資料庫互動，自己有辦法新增資料、更新資料、刪除資料這樣 --- 除此之外，上網找幾份 laravel 的簡易 CRUD 範例教學，不太懂背後原理沒關係，按照指示，做個部落格之類的 然後就去硬改公司現成的後端專案，頂著用，不然短期內也沒辦法真的學精 laravel，就先這樣吧！先能滿足公司需求就好！ 其實，以上所說，真的是很混的學習方法：ORM 背後的觀念、資料庫的 SQL 觀念，幾乎都沒學到 長遠來說，如果是真的要學 php + laravel 後端，我都是建議先從「純 php + mysql」開始學起 也就是我鼓勵新手用純 php 寫一個部落格網站，寫純 SQL 去連接資料庫，先搞懂這種最純粹的寫法 然後再開始學 laravel 以及 ORM 等等好用套件工具 不然的話，我知道很多人直接從 laravel 開始寫起，半知半解，工作很久了，卻連哪些功能是 php 提供的，哪些是 laravel 提供的都分不出來 然後在需要換框架 比如 CodeIgniter 或者 Yii 的時候，很多觀念無法融會貫通，長遠來說，根本事半功倍 --- 話說回來，如果老闆不是叫你硬改現成的後端專案，而是叫你從無到有寫後端 那這工作內容實在不太合理，除非你一開始應徵的就是「全端工程師」的職缺＆薪資 以上，簡單幾個方向分享，希望對你有點幫助！
## 前情提要 還在問說要不要學JQUERY？別問了，學就對了，沒人說學了一定要用好嗎。 以下讓我們先看一段純純的JS，就跟國中生的戀愛一樣， 牽牽小手，超純。 ## JS純 ``` // 純 JavaScript 選取元素清單 let list = document.querySelectorAll(".navigation li"); function activeLink(event) { // 使用 forEach 迴圈移除所有元素的 "hovered" 類別 list.forEach((item) => { item.classList.remove("hovered"); }); // 在滑鼠移過的元素上新增 "hovered" 類別 event.target.classList.add("hovered"); } // 使用 forEach 迴圈為每個元素加上滑鼠移過事件的監聽器 list.forEach((item) => { item.addEventListener("mouseover", activeLink); }); ``` ## 轉大人 接下來我們要轉大人了。 ### 選擇器 關於querySelectorAll這種querySelector很簡單，JQ都是用$這個字符來選取。 ## 修改class item.classList.remove("hovered"); event.target.classList.add("hovered"); 這兩個的話JQ有寫出兩隻API： removeClass addClass 所以很方便很好用 ## 事件監聽 addEventListener的話JQ則是用on來表達，這個看過幾次就能夠理解了唷！ ## JQ的寫法寫出來 ``` // 使用 jQuery 選取元素清單 let list = $(".navigation li"); function activeLink() { // 移除所有元素的 "hovered" 類別 list.removeClass("hovered"); // 在滑鼠移過的元素上新增 "hovered" 類別 $(this).addClass("hovered"); } // 使用 jQuery 的 each 方法為每個元素加上滑鼠移過事件的監聽器 list.each(function () { $(this).on("mouseover", activeLink); }); ``` ## 心得 JQ到底有沒有被拋棄或是需不需要學習，其實都是假議題，一堆人嘴上用JQ，然後嘴砲JQ 我們身為學習者其實就是花個一小時 就能學起來的東西，沒必要故意閉著眼睛不去了解。 以上，一篇文章馬上帶你學會JQuery！ 比較想要玩切版可以看這個: https://ithelp.ithome.com.tw/articles/10312922 [【前端動手玩創意】置頂按鈕，老梗經典｜帶你的網頁搭電梯](https://ithelp.ithome.com.tw/articles/10312922)
## 目錄 ##### [【前端動手玩創意】等待的轉圈圈效果 (1)](https://ithelp.ithome.com.tw/articles/10311621) ##### [【前端動手玩創意】google五星評分的星星(2)](https://ithelp.ithome.com.tw/articles/10311643) ##### [【前端動手玩創意】CSS-3D卡片翻轉效果(3) (今天難度頗高，想挑戰再進來！)](https://ithelp.ithome.com.tw/articles/10311672) ##### [【前端動手玩創意】一句CSS做出好看的hero section！(4)](https://ithelp.ithome.com.tw/articles/10311691) ##### [【前端動手玩創意】創造一個Skill bar(5)](https://ithelp.ithome.com.tw/articles/10311756) ##### [【前端動手玩創意】遮蔽廣告(D卡未登入)腳本、自定義新增名單(6)](https://ithelp.ithome.com.tw/articles/10311999) ##### [【前端動手玩創意】前端canvas截圖的招式！竟然有三招，可存成SVG或PNG (7)](https://ithelp.ithome.com.tw/articles/10312001) ##### [【前端動手玩創意】讓你的PDF檔案更難被抓取(8)](https://ithelp.ithome.com.tw/articles/10312046) ##### [【前端動手玩創意】哇操！你敢信？花式寫todo-list，body裡面一行都沒有也能搞？(9)](https://ithelp.ithome.com.tw/articles/10312056) ##### [【前端動手玩創意】卡片製作，才不是！是卡片製作器！(10)](https://ithelp.ithome.com.tw/articles/10312066) ##### [【前端動手玩創意】太屌了吧！？用Class(類)製作Jquery的效果！(11)](https://ithelp.ithome.com.tw/articles/10312114) ##### [ 【前端動手玩創意】置頂按鈕，老梗經典｜帶你的網頁搭電梯(12)](https://ithelp.ithome.com.tw/articles/10312922) ## 前情提要 一陣子沒寫前端動手玩創意了 今天要來點好料的 我們談談關於藝術 對 就算是寫程式我們也是可以有藝術氣息的 別這麼驚訝XD 假設我有一組資料 一般人來說 最直覺的就是把html裡面的元素寫出來寫死 直覺菜鳥就是寫出來啊 ``` <div id="items_list"> <li class="buy_item">1.紅茶 <div class="price">10</div> <div class="del_btn">X</div> </li> <li class="buy_item">2.奶茶 <div class="price">15</div> <div class="del_btn">X </div> </li> <li class="buy_item">3.綠茶 <div class="price">30</div> <div class="del_btn">X</div> </li> </div> ``` 要更新則是就去更改DOM就好了 反正我都學會JS了 有什麼大不了(? 但是現在已經進入大前端時代了就算你寫原生 也會有data model的概念 這部分可以參考站長阿川寫過的好文 裡面的文筆跟邏輯 不誇張 是我見過「華文圈寫得最好的前端教學」 尤其就是這篇 關於data model的介紹 切入點非常的有趣也很有道理 有興趣的自己去花心思讀看看 [認識 data model 與 render function](https://codelove.tw/@howtomakeaturn/post/9xLo5q) 稍微有點料的前端學習者 本身就會寫一寫 想說：既然有一隻API是createElement 那是不是我可以整個html都用js寫出來(? 這是個超級有趣的觀點 ## 關於data render的概念: 「是不是我可以整個html都用js寫出來」 相傳牛頓提出三大定律以後 認為地球和八大行星一開始的慣性力叫「上帝的第一推動力」 實際上這個： 「整個html都用js寫出來」 也是推動前端往框架邁進的思考第一步 可以說是前端慣性的上帝推力了 當然如果你有打籃球 也可以比喻成上籃的第零步XD ## 觀念筆記 ### html程式碼 ``` <div id="buylist"> <h1>myBuylist 購物清單</h1> <div class="buyitem"> <label>產品名</label> <input/> <label>價錢</label> <input/><span class="addbtn">+新增</span> </div> <div id="items_list">這邊準備用JS插入東西所以這段只是說明文字</div> </div> ``` 把整個頁面的元素寫出來 但是資料的區塊保留著 因為等等我們要用JS的API去動態生成 未來直接data render 方便更新與管理 ### JS程式碼 ``` var shoplist = {}; shoplist.name = "購物清單"; shoplist.list = [ { name: "吹風機", price: "300" }, { name: "麥克筆", price: "20" }, { name: "筆記型電腦", price: "29300" }, { name: "Iphone 9", price: "5200" }, { name: "神奇海螺", price: "1000" }, ]; var item_html = "<li id={{id}} class='buy_item'>{{name}}<div class='price'>{{price}}</div><div class='del_btn'>X</div></li>"; var total_html = "<li class='buy_item total'>總價<div class='price'>{{price}}</div><div class='del_btn'>X</div></li>"; var total_price = 0; for (var i=0; i < shoplist.list.length; i++) { var item = shoplist.list[i]; total_price += item.price; var current_item_html = item_html.replace("{{num}}", i + 1) .replace("{{name}}", item.name) .replace("{{id}}", "buyitem_" + i) .replace("{{price}}", item.price); $("#items_list").append(current_item_html); } ``` 這邊值得關注的一點是資料的處理 也就是數據結構上使用物件與陣列去儲存資料 為什麼要學 陣列 為什麼要學物件 這兩個都是抽象的名詞 他們都是為了來處理資料所規劃的兩種不同內容 ## 關於物件與陣列 物件就像是RPG角色 會有很多的屬性 魔法 敏捷 力量 血量 這些屬性都是被附加在person上面 所以person.blood是一個資料 person.power是一個資料 person.magic是一個資料 最後都存在person裡面 這個person就是一個含有很多屬性的物件 感覺就是有血有肉很3D 而陣列就比較平面化 就是很多數字排成一列而已 其實沒什麼特別需要關注的 這兩個也不會不好區分 只要稍微做個比喻 都很好理解 以我們的code來講解 shoplist就是一個物件 含有一些屬性 包含名字與清單 因為清單很多 所以清單用一個陣列儲存 陣列裡面放很多個物件 這些物件就是每一個清單包含的那些購買項目 其實不用太在意誰是誰因為用看的就很清楚 最後我們用迴圈去把shoplist裡面的每一筆資料都丟進去 中途replace是文字處理 把我們設置的{{name}}這種花括號的東西換成真實資料 這部分有點樣板語言的感覺XD 其實非常有趣 很值得玩味 ## 心得 這次比較多實在的JS程式碼 就不只是玩玩切版了 算是有點靠近框架的部分(◉３◉) 動手玩創意這個系列其實靈魂之處就在於「有趣」兩個字 坊間把前端描繪成為了找工作的銅臭味 以及把切版講成無聊的工匠苦力活 我認為都是錯誤的解讀 我認為 只要是有趣的地方就是前端最有價值的地方 而不是誰學了那個框架 誰又認為哪個東西比較厲害 哪個語言比較屌 那都是很無聊的文字遊戲罷了 如果你喜歡這樣子的前端 請跟著這個系列繼續走(￫ܫ￩) 我們才只是在桃花源外的小溪旁玩水而已呢！ 未來會往天空飛翔哦XD
然後作為一個計時器可是總是顯示undefined 小米手環文件 https://cdn.discordapp.com/attachments/1132882463522312204/1132987644255670322/helloworld_pro.bin ``` var time_val; var go_timer; var stop_time = 0; function add_zero(num, digit) { let numString = String(num) while (numString.length < digit) { numString = "0" + numString } return numString } function timers() { if (true) { let temp_timer = new Date().getTime() - go_timer; let day = add_zero(Math.floor(temp_timer / (24 * 60 * 60 * 1000)), 2); let hours = add_zero(Math.floor((temp_timer % (24 * 60 * 60 * 1000)) / (60 * 60 * 1000)), 2); let minutes = add_zero(Math.floor((temp_timer % (60 * 60 * 1000)) / (60 * 1000)), 2); let seconds = add_zero(Math.floor((temp_timer % (60 * 1000)) / 1000), 2); let milliseconds = add_zero(temp_timer % 1000, 3); return [day, hours, minutes, seconds, milliseconds]; } } go_timer = new Date().getTime(); time_val = setInterval(() => { var time = timers(); console.log(time[0] + "天\n" + time[1] + "時\n" + time[2] + "分\n" + time[3] + "秒\n" + time[4] + "毫秒"); }, 1); /* undefined天 undefined時 undefined分 undefined秒 undefined毫秒 */
你的轉職路上，還缺少一份自學作業包！寫完這幾包，直接拿作品去面試上班！
本論壇另有附設一個 LINE 新手發問＆交流群組！歡迎加入討論！
