阿川收到網友提問如下： > 阿川您好 我是一位工業設計師，最近想轉職前端工程師，但年齡已38，有爬過一些文章大部分是說年齡確實會是就業一個限制但我想這在所有的行業大概都一樣，但同樣的能力和薪水要求如果企業可以用一個20幾歲的又何必用一個快40歲的人也是一個不爭的事實，想請問前輩的看法~ 非常感謝 > 我說明一下想轉職的原因， 1.評估一 下自己的人格特質 喜歡研究、解題(像是在工業設計需要3d建模，遇到建不出來的造型會不眠不休的找答案解出來並且從中得到成就感) 2.有設計美學基礎應該可以替成為前端工程師加分 3.軟體工程師遠端工作的機會較多，這樣找公司比較沒有地域限制 我在這邊寫一篇公開回答跟大家分享，給類似狀況的人參考。 --- 首先，我自己指導過年紀最大的，是31歲私立科大夜間部，原職餐飲服務業，之後順利轉前端。應該很少人比這背景更「非本科」 但我確實沒有指導過38歲的，所以我請這位網友先進我們 LINE 群組跟大家聊聊，裡面一堆工程師＆正在轉職的新手 https://line.me/ti/g2/nipkjq2WoZPKX5dTn9tE9266aEOt6EOICFGa1g 我看了一下對話，大家鼓勵、勸退的意見，大概各一半，下面分享我的看法 --- 首先，我認為設計師出身，來寫前端的話，做出來的介面一定「非常漂亮」 站在雇主角度，能雇用這種前端工程師，一定是很難得，何況還是付 junior 的薪水！根本賺到吧！ 而且看這位網友的自我描述，感覺是喜歡研究、對細節在乎的人，這是滿適合工程師的特質 所以光論背景＆態度，我覺得滿適合轉職前端的，可能上班會被公司凹同時做設計師＆工程師 但一開始如果真的找不到工作，就給人家凹個半年一年，可能忍耐一下吧，畢竟有工作經驗＆作品集，之後工作會更好找 --- 接著，關於年齡的問題 這不是一個非黑即白的二元問題，沒有說超過30或35就一定不行、來不及之類的 本來就是程度問題，年齡越大就越有挑戰性，我是覺得38還好呀，還是有公司缺人 何況接案公司之類的，甚至本來就流動率高一點，又不是終生雇傭制，只是雇用你工作幾年而已，不會不合適呀 我期許這位兄弟，在新手練習階段，就做一些「超漂亮」並且「設計完成度遠超過一般轉職者」的網頁 這樣絕對會讓面試官印象深刻，這也是你的優勢所在 --- 再來，談一下花費的問題 很多人半路出家，是未滿30歲，拿政府補助去全職補習班 那些補習班自費的話，大概要十萬元 既然你沒有政府補助可以用，請先大量找免費或便宜的教材，先吸收，多試幾份，真的卡關了，再開始挑補習班 我本人就有設計一套「練功作業包」，我鼓勵所有正在轉職者，拿去搭配、練習 https://codelove.tw/courses 我有一些讀者根本沒去補習，光是寫這份作業包，就直接去面試＆開始上班了 --- 最後，這位網友在最開始有提到兩件事，我順便說明一下 ### 有設計美學基礎應該可以替成為前端工程師加分 -> Yes，加分，加爆了，這是很棒的技能組合 ### 軟體工程師遠端工作的機會較多，這樣找公司比較沒有地域限制 -> Yes，的確比一般職缺，WFH 的機會多很多，但是，就我觀察，在台灣，遠端彈性大到可以允許你「跨縣市」的公司，沒那麼多喔 通常是混合辦公居多，也就是一星期幾天在家、幾天進公司。所以，這方面不能太天真，請多多打開人力銀行 or 相關 FB 社團，多觀察為主 以上，簡單幾點分享，希望對你有幫助，祝各位轉職順利！
大家好，我是站長阿川 我留意到 LINE 群組的討論非常踴躍 很多迷惘、想轉職的新手，各種發問，都有業界工程師幫忙回答，非常熱心！ 各位很多的回答「非常詳細」，完整到我覺得：只有群組內的新手看到，也太可惜！ 應該讓網路上更多人都能看到，這樣更造福眾生、未來有人 google 搜尋也能夠找到！ 繁體中文社群，需要知識不斷累積。如果一直在 FB 等等聊天室討論，然後被洗掉，有點可惜！ 這也是我建立 CodeLove 網站的初衷！所以我設計了一個新計畫，跟大家分享一下！ # CodeLove 前輩分享寫作計畫：VIP 審核限定 我鼓勵大家，在回答新手之餘，如果覺得 LINE 訊息文字篇幅不夠，或是 LINE 程式碼排版不易 請直接在 CodeLove 寫一篇完整文章，然後再貼到 LINE 群組內！ 舉例來說，我自己就有這樣回答 LINE 群組新手的習慣： [轉職軟體工程師的方法很多，到底該如何選擇：實體補習班、線上補習班、不花錢自學？](https://codelove.tw/@howtomakeaturn/post/NxN2Kx) [回答網友提問：如果前端要銜接後端的話，是不是學 node.js 比較快？](https://codelove.tw/@howtomakeaturn/post/2anP0x) [回應網友提問：我是新手前端，公司叫我學一點 php + laravel 串 API，該從哪邊學起呢？](https://codelove.tw/@howtomakeaturn/post/Zq4Ona) # 如何成為這個計畫的 VIP？ 原則上只接受「業界工程師」加入，也就是有工作經驗者加入！ 就算只有一年工作經驗，也是正在轉職的新手的前輩，所以也歡迎！ 越資深的話越好，因為您有大量的知識＆經驗可以分享！真的是大前輩！ **請在 CodeLove 網站上，任意發表一篇技術文章 or 工作心得，完成之後，點擊下方 LINE 群組加入：** https://line.me/ti/g2/9V19e5igoaUts-hrn1Vr3nNHMcGLLa1hJiaFRg 經過我審核之後，您就加入這個 VIP 群組了！ （例外情況：您是學生，但明顯有極大分享熱情＆知識，也會允許加入） # 身為這個群組的 VIP，可以幹嘛？ 首先，我希望您寶貴的文章，能被儘量多的讀者看到！ 您只要負責寫作就好，我會幫您「製造精美封面圖片」以及「行銷宣傳您的文章」！ 凡是 VIP 前輩發文，我都會在有超過三百人的群組「愛寫扣論壇：發問&交流&討論群」轉貼，並且「設定為公告置頂至少24小時」！ 再來，VIP 群組內都是「樂於分享、經驗豐富、寫作能力出色」的業界人士，大家可以在小群組內交流，我認為互相交換情報，也很有價值！ 最後，如果我覺得您的文章實在應該被「成千上萬的更多讀者看到」，我會直接到各大論壇，到處轉貼宣傳您的文章，類似下面這樣： - https://www.dcard.tw/f/softwareengineer/p/252600314 - https://www.dcard.tw/f/f2e/p/252598230 - https://forum.gamer.com.tw/C.php?bsn=60076&snA=7835159 - https://forum.gamer.com.tw/C.php?bsn=60292&snA=8421 我會確保您的文章被數千、數萬人閱讀！身為寫作者，通常文章四處發表，會到處被不同工程師嘴砲、開嗆，沒關係，這很正常，我會擋在砲火最前面！您不用被這些負面訊息轟炸，我只會回報有意義的正面留言給您！ 如果有很棒的留言或 feedback，我會貼回 VIP 群組內通知您！ # 我想加入，但我沒什麼寫作靈感，怎麼辦？ 首先，如果您有想發表的技術文章，當然可以直接當成寫技術部落格，寫一篇發表！ 再來，您可以在 LINE 群組，看看新手們都在問些什麼，然後就當作在回答他們，直接公開寫一篇完整回答！ 最後，也可以是您近期的一些技術筆記、工作隨筆，稍微整理之後發表，這種筆記也常常對後人很有價值！ # 結論 我真的覺得繁體中文世界，需要有一個優質的討論區、寫作園區，知識才能有效累積，這個國家的軟體產業才能進步、發達 另外，這個 CodeLove 論壇是有 [文章 API](https://codelove.tw/@howtomakeaturn/post/jqeDka) 功能的 您可以在這邊大量寫作，之後呼叫 API 串接到自己的部落格，markdown 格式與 html 格式的轉換我都已經幫您做好了 以上，各位熱心的工程師，誠摯歡迎您加入「CodeLove 前輩分享寫作計畫」！一起造福眾生吧！ https://line.me/ti/g2/9V19e5igoaUts-hrn1Vr3nNHMcGLLa1hJiaFRg 有問題歡迎直接留言與我討論！
現在幾乎所有軟體專案都會使用 git 進行管理 不過，對新手來說，git 的設定與指令需要學習一段時間，有點太難 所以很多人會先用 Github Desktop 來管理專案，其實暫時也夠用 不過，很多 git 的進階指令與強大功能，只用 Github Desktop 是做不到的 剛開始工作，懶得學 git，就先用 Github Desktop 沒關係 但是長遠來說，我還是鼓勵大家找時間去把 git 學好，在程式碼管理比較複雜的情境，才有辦法自己動手解決 --- 找時間休息、整理、消化一下目前的內容，感受一下 Github Desktop 的強大與魅力吧！ 這些好用的功能，以個人開發專案來說，已經足以應付絕大多數情境 不過，在實務上，以團隊開發來說，只會這些功能是不夠的 還需要有 branch 的觀念，以及 branch 管理的技巧，才能團隊合作 這些會在後續的課程提到！ **新教材研發中，敬請期待！**
## 課程目標 - 能夠從 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 專案連結，貼到留言區
## 課程目標 - 學會重置指令 ## 課程內容 來學一個強大的指令：重置 上一課的取消功能，是針對修改到一半的檔案 這時很自然會浮現一個問題：如果是之前已經提交過的內容，有辦法取消嗎？ 點開 `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 視窗的內容，上傳到留言區
昨天在我們新手寫程式 LINE 群組，有幾個業界工程師＆剛轉職的新手在討論： 公司有實施 WFH 在家工作制度，但沒人可以詢問、經常怕自己漏看訊息、整天感覺更焦慮了，怎麼辦？ https://line.me/ti/g2/nipkjq2WoZPKX5dTn9tE9266aEOt6EOICFGa1g 這主題很好，我決定單獨寫一篇文章討論這件事情，跟大家分享 --- 首先，我認為 WFH 是一種「團隊技能」，也就是説：這不是一個人就能做好的事情，需要整個團隊的合作 再來，因為是技能，這不是每個人一入職就會的東西，需要經過訓練 總體來說，我認為要習慣「新的四種溝通方式」，分別說明如下 # 批次溝通 在辦公室大家可以隨時找同事討論、發問，也可以臨時團隊開會之類的。 遠端工作很難這樣做。因為人與人溝通的頻率被迫降低了，所以每次溝通的內容量要提昇。 建議養成批次溝通的習慣。也就是一次詢問多個問題、一次安排多個工作事項。 舉例來說，大家早上團隊視訊/語音開會的時候，不要只是每個人安排一天的工作量，最好把一整週的工作事項都先預排好。 這樣一來，當你手上的任務卡住，需要詢問別人問題、等待答覆、等待別人工作先做完時，可以先改做其他待辦任務。 這會讓負責安排工作任務的主管，工作難度提高不少。但習慣一下會發現效果很不錯。 發問的時候也是一樣。可以拿筆記本、或是在電腦開個檔案，整個早上陸續遇到、想到的問題，都記錄下來。 下次終於有機會跟同事通話時，一口氣問清楚。 就算只是用聊天室也一樣。 我常常一口氣丟出好幾個不同事項的不同問題。反正同事有空再逐一回答即可。 # 過度溝通 遠端工作絕對要避免這個狀況：因為溝通誤會，導致做了整天的白工。 絕對不可讓這種情況發生。平常在辦公室，隨時都能知道同事在幹嘛、有疑問也可隨時跟主管確認。在家工作可不行。 所以要養成過度溝通的習慣。我自己習慣是剛剛視訊時已經講過的事情，結束前我會再統整一遍、然後每件事描述確認一次。 結束之後，還會把我剛剛確認的事情打成幾個待辦，貼到聊天室讓對方再看一次。等於每件事我都跟對方確認2-3次。 我甚至會把同樣幾件事情，換個方式、換個角度再重新描述幾次，讓相關人都同意，我才放心沒有做錯方向。 有留紀錄的話，事後出問題也比較容易討論責任歸屬。 總之，在家默默工作幾天，然後才發現通通在做白工，是絕對不可以發生的。 如果你發現在家工作之後，自己會一直跟同事確認事情，或是同事會多次重複確認同樣的事情，好像大家變得有點神經質？ 別擔心，這不但是很正常的現象，還是很鼓勵的現象。 # 被動溝通 拍同事的肩膀問問題、叫他過來開會、打電話給他…等等，屬於主動式溝通：以發問的人優先，被問的人配合發問的人的時間。 貼便條紙給同事、張貼事項在公告欄…等等，屬於被動式溝通：以被問的人優先，發問的人配合被問的人的時間。 被動式溝通以被問的人、接收訊息的人為主，有空時才答覆、做出反應。 遠程工作的團隊一定要習慣被動式溝通，否則遠程工作就沒有意義，也沒有效率，會變成很痛苦的事情。 網路時代讓被動式溝通輕鬆許多，只要採取多層次溝通就行了。 # 多層次溝通 多層次溝通指的是依照主動/被動程度的不同，分成至少3-4層溝通工具。舉例來說： 即時溝通：見面、手機/Skype/Hangouts/Zoom 通話 通訊軟體：Skype、Line、Facebook Messenger 工作聊天室：Slack 任務管理軟體：Bitbucket/Github、Trello 即時溝通是最主動的一種，碰面開會、打電話等等都算。在很多情況下，還是需要用這種方式討論、腦力激盪。最好每天約個固定時間線上通話一下。 通訊軟體則是次之的溝通方式，但因為訊息通知會一直跳出來，還是有點干擾。 工作聊天室是最常發生溝通的地方。這類工具的特色在於，忙著工作的人，可以直接把聊天室關掉，就不會被打擾。有空時再打開來看看有什麼需要回答的、討論的。 任務管理軟體是大家一起紀錄工作待辦事項的地方。需要日後方便翻閱的東西都記在這裡。 其它工具軟體像是 Google Docs、Google Sheets、hackmd 也都非常好用。 --- 以上是四種 WFH 個溝通方式，另外有兩點補充 # 被動式溝通優先，非必要不使用主動式溝通 上面提到的多層次溝通模型，越上面是越主動，越下面是越被動的溝通方式。團隊成員要慢慢習慣，非必要別使用主動式溝通。沒那麼急著得到答覆、急著需要處理的事情，就盡量用被動的手段溝通。 話雖如此，每天慣例性地在固定時段通話一次，可以大幅增加團隊的安全感。 # 每次開會都做線上筆記，所有檔案都對所有人公開 因為大家沒待在一起，開會完忘記會議細節的話，會需要一直詢問同事，很浪費時間也很煩。 所以開會時建議使用 Google 文件、hackmd 或是其他可以共同編輯的軟體，開會的時候一邊做線上筆記。 然後這些文件最好公開給整個團隊的人看到，讓全部資訊同步到全部人腦中。 這些技巧熟練之後，團隊成員不但可以專心工作，溝通能力也會全部上升。 像是跟客戶、合作廠商溝通這種本來就需要遠端溝通的任務，remote 工作者也比一般的工作者更知道怎麼溝通、避免溝通誤會。 # 結論 這些工作方式有點違反一般的工作直覺，所以容易被忽略。 但只要習慣一下，一定會發現遠端工作的好處，工作效率甚至比在辦公室更高。
在我們新手寫程式 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，那你可能要同時請他推薦職缺了！因為幾乎沒有願意給你機會的職缺！ 以上，簡單分享，希望對你有幫助！ 可以留言：你想看的程式語言，我找時間做一份更新、涵蓋更多語言的！
昨天在我們新手寫程式 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 的時候，很多觀念無法融會貫通，長遠來說，根本事半功倍 --- 話說回來，如果老闆不是叫你硬改現成的後端專案，而是叫你從無到有寫後端 那這工作內容實在不太合理，除非你一開始應徵的就是「全端工程師」的職缺＆薪資 以上，簡單幾個方向分享，希望對你有點幫助！
## 目錄 ##### [【前端動手玩創意】等待的轉圈圈效果 (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
昨天在我們新手寫程式 LINE 群組，有幾個業界工程師＆想要轉職的新手在討論： 實體補習班、線上補習班、不花錢自學，推薦哪種方法？ https://line.me/ti/g2/nipkjq2WoZPKX5dTn9tE9266aEOt6EOICFGa1g 看完大家的討論，我決定整理大家的討論內容，寫一篇指南 --- 我認為半路出家者，經濟壓力很大，要兼顧成本＆時間，以下是我推薦給大家的判斷方法 首先，先教大家怎麼挑選程式語言，你可能在考慮 PHP JavaScript Python 之類的 各種程式語言，通常會跟產業類型相關，不同產業偏好不同程式語言 請打開人力資源網站，看看各語言有哪些職缺、以及職缺數量，看看這些公司是不是你有興趣的 然後看看這些職缺「無經驗可」的比例如何，很多的話表示歡迎半路出家者 還是通通都要求「一年以上工作經驗」，那就表示不歡迎半路出家者＆新手 很多台灣的程式語言 FB 社團也可以先加，裡面很多職缺資訊，就一起看看 先鎖定幾個你覺得可行的程式語言，接下來進入以下流程： # 先問自己第一個問題：我身邊有沒有可以請教的工程師？ 兄弟姐妹、或是很熟的朋友、同學，都可以，要是一個你「極度信賴」的人 這樣他幫你推薦大方向時，你不用擔心他在敷衍你 他不用像保母一樣每天在你旁邊陪你、幫你解答問題（這樣是在凹他） 但在你卡關的時候，至少可以跟他請教解決的方向 然後他最好可以協助你找「技術書籍」、「免費/便宜影音課程」 如果這題的答案是 YES，你有機會在極少花費之下，就轉職成功 如果答案是 No，請往線上補習班的方向查詢，進入下一個問題 # 第二個問題：這間線上補習班有沒有導師、助教制度？ 這類課程收費大概數萬元，通常會幫你排進學期內，安排導師、助教，自己在家看影片 我推薦這方向，是因為在教室上課，你可能跟不上，會很悲劇 在家看影片，可以按照自己節奏、可以重複觀看 因為你付了數萬元，卡關時，趕快請教導師、助教 我認為這方向不錯，費用也合理，缺點是，線上補習班的選擇不多，你想要的程式語言，可能沒有業者在開課 如果這題的答案是 YES，多查一下學員心得分享、確認一下學員就業成功率，就上吧 如果答案是 No，請往實體補習班的方向查詢，進入下一個問題 # 第三個問題：有沒有政府補助可以申請 這類課程大概要求你全職上課半年左右，收費十萬元以上 我聽過太多進教室之後跟不上進度，花費半年、十幾萬元，最後轉職失敗的慘痛案例 職訓局、勞工局、勞動部，有時會有一些補助可申請 如果政府出錢，那就去吧，至少風險少很多 --- 如果以上問題答案通通都是 No 那就是要自己出錢、花半年去教室上課了 請務必貨比三家、謹慎再謹慎、多查詢學員心得分享、確認就業成功率 值得一提的是，有些小班制的業者，老師極度有經驗＆教學熱情，你會看到超多推薦心得文 如果查資料過程中，發現這種老師，那就沒問題，他將會是你的貴人 如果是大品牌、大班制，你拼一波就報名了，我真的覺得很像在賭博，賭你會遇到好老師、賭課程安排你吸收得了 就我的觀察，這些大品牌，很多課程內容，實在太包山包海了，我看了很不喜歡，我覺得90%學員會吸收不良，什麼作業跟專案，簡直就是助教在幫你寫，只是貼一貼改一改，跑得動就畢業了，學員自己心裡都很不踏實 多花點時間查畢業學員評價吧，也多跟業者詢問、聊聊，真的心動了，就衝吧，也沒其他方法了 以上，簡單幾個問題，希望對你找方向有點幫助！
除了幾間知名的人力銀行網站之外 有些ＦＢ社團也常常有職缺資訊，可以逛一下 https://www.facebook.com/groups/javascript.tw https://www.facebook.com/groups/javascript.html.css.node https://www.facebook.com/groups/f2e.tw 還有像這種 github 頁面也有職缺 https://github.com/f2etw/jobs/issues 加油囉各位！
阿川收到網友提問如下： ``` 我最近有在看前端的一些基礎課程，想問問如果32歲想轉職工程師是不是不吃香😅畢竟我也不是本科的 ``` 看過很多人提出類似問題，寫一篇公開回答跟大家分享，給類似狀況的人參考。 --- 首先我自己親自指導過轉職的，年齡最大的是31歲、非本科、私立科大夜間部，原本在餐飲業 在網路上搜尋「30歲轉職工程師」、「40歲轉職工程師」、「50歲轉職工程師」 會發現30歲相關文章很多，大家議論紛紛 40歲相關文章比較少，持鼓勵、正面意見的佔少數 50歲相關文章，一篇心得分享都沒有 我建議把幾歲轉職當成是一個「漸層問題」，不是非黑即白的「二元問題」 也就是年紀越大越難，但沒有過了幾歲就一定不行這種事 --- 再來我認為要務實一點，不論自學或上課，半路出家至少也需要2個月～6個月的時間 請減少生活開銷，然後原本工作可以的話，先別辭掉，利用晚上＆週末的時間進修，壓力也小一點 不然壓力大到睡不著覺的話，精神不佳，學習效果怎麼會好呢？ 然後建議多找幾種學習方法試試看，如果一種不行，就換另一種方法試試 別太快覺得「自己不行」，說不定是「老師不行」，或只是方法不適合你 我建議先大量找免費或便宜的教材，先吸收，多試幾份，真的卡關了，再開始挑補習班 先直接找一些作業跟專案寫寫看，從免費 -> 便宜的 -> 稍貴的，這樣一點一點花錢，風險比較小 更認識自身需求之後，再去比較市面上的各種補習班，最後再把這錢花下去，比較保險 --- 最後我必須說，2023 全球軟體業狀況比較嚴峻，目前職缺好像比較緊縮，不知道何時會恢復 這跟 2008 年金融海嘯出社會的新鮮人狀況一樣，就是比較倒霉 反正轉職過程中，記得早點開人力銀行等等網站，看看職缺狀況，心裡有個底，知道一下要面臨多少競爭 順帶一提，我也有設計免費的 html&css 教材，還有優惠的 javascript 教材，內含「大量練習專案」，不論你最後選擇哪種學習方式，我都推薦搭配拿去學習、練習，稍有難度，但不少人全做完之後就順利面試上班了 以上，祝各位轉職順利！
 您需要了解的有關 docker 的所有訊息都在這篇文章中。別擔心 - 我會保持非常簡短和簡潔 ⚡ 我將引導您了解這些概念：容器、圖像等。然後我們將編寫自己的“Dockerfile”來容器化一個非常簡單的 Python 應用程式！ 原文出處：https://dev.to/dhravya/docker-explained-to-a-5-year-old-2cbg ### 什麼是docker？ Docker 是一種“容器化”應用程式的方法（將程式碼放入可以獨立工作的盒子中）。它神奇地製造了一台虛擬計算機，但你猜怎麼著——它們並不是真正的虛擬計算機。 容器是沒有主機操作系統的盒子，因此它們獨立於執行的設備。 可以這樣想——有一隻蜜蜂只喜歡住在自己的蜂巢裡，如果它住在其他地方就無法工作。你只需將蜜蜂困在一個看起來和摸起來都像蜂窩的盒子裡。這就是容器化。 容器是使用“Images”製作的  ### Docker 鏡像 Docker 鏡像就像模板——一本 *擁有全部製造流程說明* 的工藝手冊。或者，換句話說，它包含一組用於建立容器的指令。 但是如何製作這些圖像（以便稍後製作容器）？ 這是使用 Dockerfile 完成的。 ### 關於 Dockerfiles Dockerfile 是一個文本文件，其中包含用戶可以在命令行上呼叫來組裝映像的所有命令。 好吧，讓我們一起製作一個 Dockerfile。 現在，我們將從 docker 開始動手！ 在您的設備上快速下載 docker：https://www.docker.com/get-started 現在您已經有了它，讓我們編寫一個簡單的 Flask 應用程式並將其容器化！ 這是一個非常簡單且最小的 flask 應用程式  現在，儘管這可能非常基本，但它實際上需要很多東西才能執行： - Python 3.9 - Flask（執行“pip install Flask”） - 暴露於端口5000 有些程序可能只能在特定的操作系統上執行 - 例如僅限 Windows 或僅限 Linux 的東西。 所有這些問題都可以通過編寫一個簡單的 dockerfile 來解決，該文件為我們設置了一個 docker 鏡像。 所以你需要建立一個名為“Dockerfile”的文件（確切地說，沒有任何文件擴展名） 這是一個演練： - 使用 FROM 使用 python 基礎鏡像 - 使用 COPY 將 app.py 文件複製到容器中 - 使用RUN來pip安裝flask - 當容器啟動時使用CMD執行“python app.py” 就這麼簡單！  > 小修正：該文件應命名為 Dockerfile ### 建置鏡像並執行容器 現在，使用“docker build”命令建置 docker 映像，然後使用“docker run .”命令執行該映像。 還可以使用`--tag`給鏡像起個名字，方便自己以後執行 ``` docker build --tag flask . docker run --name flask -p 5000:5000 flask ``` 這裡，`--name`是要執行的容器的名稱（我將其命名為flask），-p將docker CONTAINER的端口設置到您的機器，這樣您就可以在`localhost`上看到您的應用程式。最後，名稱中的“flask”是要執行的鏡像的名稱。 ### 更多命令 大概就是這些！ “docker ps”命令獲取正在執行的容器的列表， “docker ps -a”獲取所有容器的列表 “docker images”獲取圖像列表 “docker --help”獲取所有命令的列表 多多嘗試看不同指令吧！
資深開發者 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" } ``` ## 總結 以上簡單分享，希望對您有幫助！
阿川近期收到網友私訊詢問，簡單來說，就是他報名了某補習班，需要進教室上課四個月 從設計軟體 figma 到後端 php 到前端 vue 通通都教，最後要分組做一個完整專案 結果吸收不良，感覺什麼都碰、什麼都沒學好，現在糊裡糊塗在搞專案，就算弄出來也感覺很不踏實，怎麼辦？ --- 阿川從過去幾年指導朋友半路出家的經驗、幫朋友找補習班的經驗，一聽就知道，這種安排，90%的學員會吸收不良 原因主要有兩個 第一，每位學員的積極程度、理解速度，通通不一樣。大家一起進教室聽老師一堂一堂講，一定有人嫌慢，一定有人嫌快 嫌慢就算了，至少該學的都有學到。嫌快就慘了，花了大錢結果跟不上進度，之後還要每週到教室報到，這很折磨人，學習效率也差 第二，半路出家，通常就找「無經驗可，後端」或者「無經驗可，前端」的職缺，先入行，賺點薪水，慢慢累積經驗＆自信就對了 去補習班挑戰四個月學習全端？就算是 full time 上課，我認為還是太硬了，90%的人都會吸收不良，學習效果不好 --- 就我這幾年的觀察，只有兩種人在這環境能順利學習、成長、轉職 第一種，畢業於台大ＸＸ系，在ＹＹ領域工作數年之後，毅然決然辭職，報名轉職軟體工程師成功 這種是學習能力本來就很好，學歷通常就是台清交、只是非本科 第二種，學歷不佳，工作幾年之後遇到重大挫折，有強烈經濟壓力，破釜沈舟之下，抱著巨大的決心、壓力，全心投入補習＆學習 這種是壓力逼迫人成長，在自己給自己高壓＆痛苦之下惡補成功轉職 我認為90%的人，不符合以上狀況，會變成花大錢、花超多時間，最後還效果不理想 最糟糕的是，學習應該是要能逐漸建立興趣＆信心的 這種學習成果，就算最後開始去幾間公司面試，也會超心虛，覺得自己好像來騙的，專案根本自己也沒搞懂幾行程式碼，拼拼湊湊不知道在幹嘛 --- 我在多篇文章提到過，我建議就是先找「便宜、有口碑的線上課程」 至少可以按自己步調學習，至少不會花那麼多錢 然後先專心在前端或後端就好了，可以稍微花點時間碰全端，有一點概念，也很好，但不要嘗試直接專精兩者 學過、有更了解之後，再花錢去補習班。不要一開始就用「賭賭看」的心態進教室，你的時間＆金錢很寶貴 何況很多人就用線上資源學一學，就順利去上班了，有些根本是用國外「免費」資源，一毛錢沒花 --- 最後，對很多人來說，看到這篇文章，時間已經花下去了，錢已經花下去了，怎麼辦？ 阿川還是有些建議可以給大家 第一，全課程這樣上完，雖然吸收不佳，但至少有稍微留個印象 請拿出筆記本，多多做筆記「這邊沒聽懂 但好像很有趣」、「這邊沒聽懂 但老師剛有提到幾個關鍵字」，找時間自己多 google 一下 還有「這邊沒聽懂 但感覺好古板啊 這東西業界真的有用？」，找時間去社團或論壇發問，請教一下業界人士 總之，挑能吸收的部份 加減吸收一點 自主練習時，卡關了，至少還知道點方向 第二，不要太快失去信心 「如何學習」本身就是一輩子的技能，有時是學習方法問題、或節奏問題、或方向問題，先別急著放棄 課堂上的作業，找時間自己重看一次：如果有哪行程式碼不懂，就多 google 或發問，慢慢弄懂，慢慢補回自信 --- 最後，我再補充一個觀念給大家，半路出家不容易，我鼓勵大家把學習想成是一個「逐漸清晰」的過程 看過電腦讀取大張高清圖片的樣子嗎？先是模模糊糊的馬賽克，接著一塊一塊慢慢變清晰，最後才是變成完整的美麗圖片 學習會有點類似這樣，一開始到處模模糊糊的沒關係，保持耐心，逐步提高各處的解析度即可 只要先有一整張模糊的圖片即可。不需要執著在圖片一個角落，覺得這塊不清楚，就不能往下走 更千萬不要因為圖片模糊，就覺得「我果然不適合寫程式，放棄好了」，這絕對是搞錯重點 以上，簡單建議分享，希望對你有幫助！
簡單複習一下，在這次的課程中，我們學會了 - 用 express 處理 http get 請求 - 用 express 處理 http post 請求 - 用 express 提供靜態檔案 - 取得 url 參數 - 取得表單參數 是不是很有趣呢？ --- 再次說明，這次的課程主要是學習網頁協定＆基本觀念，實務上後端開發有很多東西要學 舉例來說，下面這些東西本課程都省略了： - ejs 模板的 layout 功能 - 連接資料庫軟體 - 會員系統、註冊登入、驗證功能 雖然省略了很多東西，但我認為已經能讓你對於 http 協定與後端開發，有大致的了解 因此基本功比一般的前端開發者更好！這也是本課的目的所在！ 很多前端工程師，工作了好一陣子，卻還是搞不清某些觀念、任務屬於前端還是後端！要避免這種混淆，職業發展才能順利又有效率！ 後面的課程，我會進一步教你清楚認識前端、後端的區別、以及釐清一些常見迷思！讓你在前端之路上，走得更順遂！ --- 消化、研究完本課程之後，請接著前往下一份教材，繼續邁向資深之路吧！ **教材研發中，敬請期待**
因為一直找不到工作(...汗)所以來整理作品 [成果展示](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上刷題，看別人解法真的很神，學很多... 有沒有北部公司缺人啊...投履歷都沒人回..中年轉行真的不行嗎...
你的轉職路上，還缺少一份自學作業包！寫完這幾包，直接拿作品去面試上班！
本論壇另有附設一個 LINE 新手發問＆交流群組！歡迎加入討論！
