🔍 搜尋結果:專案

🔍 搜尋結果:專案

Github Desktop 新手入門教學:第3課 ── 學會簡易的檔案變化操作

## 課程目標 - 學會簡易的檔案變化操作 ## 課程內容 來學一點簡單的檔案變化操作吧! 打開 `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 視窗截圖,這是本次作業的第二張截圖 --- 完成以上任務,你就完成這次的課程目標了! --- 交作業的方法: 請把第一張、第二張截圖,分別貼到留言區

Github Desktop 新手入門教學:第2課 ── 學會基本指令

## 課程目標 - 學會基本指令 ## 課程內容 繼續上一課的內容,這次在同個資料夾內,再新增一個檔案 `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 視窗的內容,上傳到留言區

Github Desktop 新手入門教學:第1課 ── 學會專案初始化

## 課程目標 - 學會專案初始化 ## 課程內容 在開始之前,我先再次說明一下 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 視窗的內容,上傳到留言區

Laravel 5.8 升級到 8.83 版本心得&筆記分享

手上有多個網站 都是 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

回答網友提問:如果前端要銜接後端的話,是不是學 node.js 比較快?

昨天在我們新手寫程式 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 一點,這樣 以上,簡單分享,希望對類似狀況的朋友有幫助!

回應網友提問:我是新手前端,公司叫我學一點 php + laravel 串 API,該從哪邊學起呢?

昨天在我們新手寫程式 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 的時候,很多觀念無法融會貫通,長遠來說,根本事半功倍 --- 話說回來,如果老闆不是叫你硬改現成的後端專案,而是叫你從無到有寫後端 那這工作內容實在不太合理,除非你一開始應徵的就是「全端工程師」的職缺&薪資 以上,簡單幾個方向分享,希望對你有點幫助!

轉職軟體工程師的方法很多,到底該如何選擇:實體補習班、線上補習班、不花錢自學?

昨天在我們新手寫程式 LINE 群組,有幾個業界工程師&想要轉職的新手在討論: 實體補習班、線上補習班、不花錢自學,推薦哪種方法? https://line.me/ti/g2/nipkjq2WoZPKX5dTn9tE9266aEOt6EOICFGa1g 看完大家的討論,我決定整理大家的討論內容,寫一篇指南 --- 我認為半路出家者,經濟壓力很大,要兼顧成本&時間,以下是我推薦給大家的判斷方法 首先,先教大家怎麼挑選程式語言,你可能在考慮 PHP JavaScript Python 之類的 各種程式語言,通常會跟產業類型相關,不同產業偏好不同程式語言 請打開人力資源網站,看看各語言有哪些職缺、以及職缺數量,看看這些公司是不是你有興趣的 然後看看這些職缺「無經驗可」的比例如何,很多的話表示歡迎半路出家者 還是通通都要求「一年以上工作經驗」,那就表示不歡迎半路出家者&新手 很多台灣的程式語言 FB 社團也可以先加,裡面很多職缺資訊,就一起看看 先鎖定幾個你覺得可行的程式語言,接下來進入以下流程: # 先問自己第一個問題:我身邊有沒有可以請教的工程師? 兄弟姐妹、或是很熟的朋友、同學,都可以,要是一個你「極度信賴」的人 這樣他幫你推薦大方向時,你不用擔心他在敷衍你 他不用像保母一樣每天在你旁邊陪你、幫你解答問題(這樣是在凹他) 但在你卡關的時候,至少可以跟他請教解決的方向 然後他最好可以協助你找「技術書籍」、「免費/便宜影音課程」 如果這題的答案是 YES,你有機會在極少花費之下,就轉職成功 如果答案是 No,請往線上補習班的方向查詢,進入下一個問題 # 第二個問題:這間線上補習班有沒有導師、助教制度? 這類課程收費大概數萬元,通常會幫你排進學期內,安排導師、助教,自己在家看影片 我推薦這方向,是因為在教室上課,你可能跟不上,會很悲劇 在家看影片,可以按照自己節奏、可以重複觀看 因為你付了數萬元,卡關時,趕快請教導師、助教 我認為這方向不錯,費用也合理,缺點是,線上補習班的選擇不多,你想要的程式語言,可能沒有業者在開課 如果這題的答案是 YES,多查一下學員心得分享、確認一下學員就業成功率,就上吧 如果答案是 No,請往實體補習班的方向查詢,進入下一個問題 # 第三個問題:有沒有政府補助可以申請 這類課程大概要求你全職上課半年左右,收費十萬元以上 我聽過太多進教室之後跟不上進度,花費半年、十幾萬元,最後轉職失敗的慘痛案例 職訓局、勞工局、勞動部,有時會有一些補助可申請 如果政府出錢,那就去吧,至少風險少很多 --- 如果以上問題答案通通都是 No 那就是要自己出錢、花半年去教室上課了 請務必貨比三家、謹慎再謹慎、多查詢學員心得分享、確認就業成功率 值得一提的是,有些小班制的業者,老師極度有經驗&教學熱情,你會看到超多推薦心得文 如果查資料過程中,發現這種老師,那就沒問題,他將會是你的貴人 如果是大品牌、大班制,你拼一波就報名了,我真的覺得很像在賭博,賭你會遇到好老師、賭課程安排你吸收得了 就我的觀察,這些大品牌,很多課程內容,實在太包山包海了,我看了很不喜歡,我覺得90%學員會吸收不良,什麼作業跟專案,簡直就是助教在幫你寫,只是貼一貼改一改,跑得動就畢業了,學員自己心裡都很不踏實 多花點時間查畢業學員評價吧,也多跟業者詢問、聊聊,真的心動了,就衝吧,也沒其他方法了 以上,簡單幾個問題,希望對你找方向有點幫助!

回答網友提問:32歲非本科考慮轉職工程師,壓力很大,怎麼辦?

阿川收到網友提問如下: ``` 我最近有在看前端的一些基礎課程,想問問如果32歲想轉職工程師是不是不吃香😅畢竟我也不是本科的 ``` 看過很多人提出類似問題,寫一篇公開回答跟大家分享,給類似狀況的人參考。 --- 首先我自己親自指導過轉職的,年齡最大的是31歲、非本科、私立科大夜間部,原本在餐飲業 在網路上搜尋「30歲轉職工程師」、「40歲轉職工程師」、「50歲轉職工程師」 會發現30歲相關文章很多,大家議論紛紛 40歲相關文章比較少,持鼓勵、正面意見的佔少數 50歲相關文章,一篇心得分享都沒有 我建議把幾歲轉職當成是一個「漸層問題」,不是非黑即白的「二元問題」 也就是年紀越大越難,但沒有過了幾歲就一定不行這種事 --- 再來我認為要務實一點,不論自學或上課,半路出家至少也需要2個月~6個月的時間 請減少生活開銷,然後原本工作可以的話,先別辭掉,利用晚上&週末的時間進修,壓力也小一點 不然壓力大到睡不著覺的話,精神不佳,學習效果怎麼會好呢? 然後建議多找幾種學習方法試試看,如果一種不行,就換另一種方法試試 別太快覺得「自己不行」,說不定是「老師不行」,或只是方法不適合你 我建議先大量找免費或便宜的教材,先吸收,多試幾份,真的卡關了,再開始挑補習班 先直接找一些作業跟專案寫寫看,從免費 -> 便宜的 -> 稍貴的,這樣一點一點花錢,風險比較小 更認識自身需求之後,再去比較市面上的各種補習班,最後再把這錢花下去,比較保險 --- 最後我必須說,2023 全球軟體業狀況比較嚴峻,目前職缺好像比較緊縮,不知道何時會恢復 這跟 2008 年金融海嘯出社會的新鮮人狀況一樣,就是比較倒霉 反正轉職過程中,記得早點開人力銀行等等網站,看看職缺狀況,心裡有個底,知道一下要面臨多少競爭 順帶一提,我也有設計免費的 html&css 教材,還有優惠的 javascript 教材,內含「大量練習專案」,不論你最後選擇哪種學習方式,我都推薦搭配拿去學習、練習,稍有難度,但不少人全做完之後就順利面試上班了 以上,祝各位轉職順利!

去補習班進教室學全端開發,有90%的機率你會吸收不良

阿川近期收到網友私訊詢問,簡單來說,就是他報名了某補習班,需要進教室上課四個月 從設計軟體 figma 到後端 php 到前端 vue 通通都教,最後要分組做一個完整專案 結果吸收不良,感覺什麼都碰、什麼都沒學好,現在糊裡糊塗在搞專案,就算弄出來也感覺很不踏實,怎麼辦? --- 阿川從過去幾年指導朋友半路出家的經驗、幫朋友找補習班的經驗,一聽就知道,這種安排,90%的學員會吸收不良 原因主要有兩個 第一,每位學員的積極程度、理解速度,通通不一樣。大家一起進教室聽老師一堂一堂講,一定有人嫌慢,一定有人嫌快 嫌慢就算了,至少該學的都有學到。嫌快就慘了,花了大錢結果跟不上進度,之後還要每週到教室報到,這很折磨人,學習效率也差 第二,半路出家,通常就找「無經驗可,後端」或者「無經驗可,前端」的職缺,先入行,賺點薪水,慢慢累積經驗&自信就對了 去補習班挑戰四個月學習全端?就算是 full time 上課,我認為還是太硬了,90%的人都會吸收不良,學習效果不好 --- 就我這幾年的觀察,只有兩種人在這環境能順利學習、成長、轉職 第一種,畢業於台大XX系,在YY領域工作數年之後,毅然決然辭職,報名轉職軟體工程師成功 這種是學習能力本來就很好,學歷通常就是台清交、只是非本科 第二種,學歷不佳,工作幾年之後遇到重大挫折,有強烈經濟壓力,破釜沈舟之下,抱著巨大的決心、壓力,全心投入補習&學習 這種是壓力逼迫人成長,在自己給自己高壓&痛苦之下惡補成功轉職 我認為90%的人,不符合以上狀況,會變成花大錢、花超多時間,最後還效果不理想 最糟糕的是,學習應該是要能逐漸建立興趣&信心的 這種學習成果,就算最後開始去幾間公司面試,也會超心虛,覺得自己好像來騙的,專案根本自己也沒搞懂幾行程式碼,拼拼湊湊不知道在幹嘛 --- 我在多篇文章提到過,我建議就是先找「便宜、有口碑的線上課程」 至少可以按自己步調學習,至少不會花那麼多錢 然後先專心在前端或後端就好了,可以稍微花點時間碰全端,有一點概念,也很好,但不要嘗試直接專精兩者 學過、有更了解之後,再花錢去補習班。不要一開始就用「賭賭看」的心態進教室,你的時間&金錢很寶貴 何況很多人就用線上資源學一學,就順利去上班了,有些根本是用國外「免費」資源,一毛錢沒花 --- 最後,對很多人來說,看到這篇文章,時間已經花下去了,錢已經花下去了,怎麼辦? 阿川還是有些建議可以給大家 第一,全課程這樣上完,雖然吸收不佳,但至少有稍微留個印象 請拿出筆記本,多多做筆記「這邊沒聽懂 但好像很有趣」、「這邊沒聽懂 但老師剛有提到幾個關鍵字」,找時間自己多 google 一下 還有「這邊沒聽懂 但感覺好古板啊 這東西業界真的有用?」,找時間去社團或論壇發問,請教一下業界人士 總之,挑能吸收的部份 加減吸收一點 自主練習時,卡關了,至少還知道點方向 第二,不要太快失去信心 「如何學習」本身就是一輩子的技能,有時是學習方法問題、或節奏問題、或方向問題,先別急著放棄 課堂上的作業,找時間自己重看一次:如果有哪行程式碼不懂,就多 google 或發問,慢慢弄懂,慢慢補回自信 --- 最後,我再補充一個觀念給大家,半路出家不容易,我鼓勵大家把學習想成是一個「逐漸清晰」的過程 看過電腦讀取大張高清圖片的樣子嗎?先是模模糊糊的馬賽克,接著一塊一塊慢慢變清晰,最後才是變成完整的美麗圖片 學習會有點類似這樣,一開始到處模模糊糊的沒關係,保持耐心,逐步提高各處的解析度即可 只要先有一整張模糊的圖片即可。不需要執著在圖片一個角落,覺得這塊不清楚,就不能往下走 更千萬不要因為圖片模糊,就覺得「我果然不適合寫程式,放棄好了」,這絕對是搞錯重點 以上,簡單建議分享,希望對你有幫助!

後端 JS 訓練二:第3課 ── 使用 ejs 模板並讀取變數

## 課程目標 - 使用 ejs 模板並讀取變數 ## 課程內容 這一課來學習如何讀取變數之後,放進 ejs 模板呈現! 先來安裝之前用過的 readline-sync 套件 ``` npm install readline-sync ``` 替這課建立一個資料夾,然後建立 `index.js` `hello.ejs` `users.json` 這幾個檔案 此時資料夾會長類似這樣 ``` repo ├── package.json ├── package-lock.json ├── node_modules ├── lesson1 │   └── index.js ├── lesson2 │ ├── hello.ejs │   └── index.js └── lesson3 ├── users.json ├── hello.ejs    └── index.js ``` 在 users.json 放入以下內容 ``` [ { "name": "小明", }, { "name": "小華", }, { "name": "小王", } ] ``` 在 hello.ejs 放入以下內容 ``` <div> <% for(var i = 0; i < users.length; i++) { %> <p> <%= users[i].name %>同學,你好! </p> <% } %> </div> ``` 在 index.js 放入以下內容 ``` const express = require('express'); const app = express(); const engine = require('ejs-locals'); const fs = require('fs'); app.engine('ejs', engine); app.set('views', './lesson3'); app.set('view engine', 'ejs'); app.get('/', function(req, res){ const data = fs.readFileSync('./lesson3/users.json'); const users = JSON.parse(data); res.render('hello', { users: users }); }); app.listen(3000); ``` 然後去終端機輸入 ``` node lesson3/index.js ``` 接著打開瀏覽器,在網址輸入 ``` http://localhost:3000/ ``` 你會看到很多則訊息,分別跟多位同學打招呼! --- 這段程式不用我多加說明了吧!檔案讀取也是之前教過的內容! 這邊唯一多學的東西,就是 ejs 關於 for 迴圈的語法,反正就是 `<%` 跟 `%>` 之類的東西包起來而已 ejs 還有支援很多豐富的語法&功能,有興趣的話,自行研究一下吧! ## 課後作業 這次要練習匯入資料到 ejs 模板 請新建立 hw3 資料夾,採用以下結構 ``` /repo /hw3 /index.js /homepage.ejs /posts.json ``` 請修改 homepage.ejs 內容,將文章內容移出來,放在 posts.json 裡面 ``` [ { "title": "第一篇日記", "content": "今天天氣很好,夏天太陽很大,讓我心情很好" }, { "title": "第二篇日記", "content": "早起出門運動,回家沖個澡,整天心情很好" }, { "title": "第三篇日記", "content": "下大雨一整天,整天在家追劇,滿舒服的" } ] ``` 這樣 homepage.ejs 內就不會只是 html 了,你會練習到 ejs 獨有的模板語法! 完成以上任務,你就完成這次的課程目標了! --- 請更新你的 github 專案內容,此時應該變成這樣 ``` /repo /hw1 /index.js /hw2 /index.js /homepage.ejs /hw3 /index.js /homepage.ejs /posts.json ``` 依此類推,之後就這樣交作業!

後端 JS 訓練二:第2課 ── 使用 ejs 模板渲染出 html

## 課程目標 - 使用 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 ``` 依此類推,之後就這樣交作業!

後端 JS 訓練二:第1課 ── 回應 http get request

## 課程目標 - 使用 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 專案連結,貼到留言區即可

用Github Page整理作品集

因為一直找不到工作(...汗)所以來整理作品 [成果展示](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上刷題,看別人解法真的很神,學很多... 有沒有北部公司缺人啊...投履歷都沒人回..中年轉行真的不行嗎...

回答網友提問:需要在意框架背後幫你做了哪些事情嗎?可以永遠不去管嗎?

收到網友提問如下: ``` 這是最近跟一個朋友聊天聊到的 朋友是寫 .net Framework 的 我剛碰Vue的時候,跟他說我看不懂Vue在背後是怎麼運作的、為什麼這樣寫會變成這樣的結果? 他跟我說,不用去在意框架背後幫你做了哪些事情 反正就是做那些制式的動作,把功能實現就好 不然工程師哪有那麼多腦力去記住程式底層都做了什麼 這樣真的是好的嗎? 工程師的等級差距並不在於是否知其所以而不知其所以然嗎? ``` 這應該是每個年輕工程師都有的疑問,寫一篇完整、公開回答跟大家分享,給類似狀況的人參考。 我先講結論:這取決於你想不想越變越強、不斷提升競爭力,還是只想混口飯吃 如果只想混口飯吃,什麼工具都是學個用法,懶得研究,然後東西做出來交差了事,那可以永遠不去管工具背後原理 不過,這種心態,職涯成長、薪水成長空間會很有限,然後在 40 多歲的時候會有「中年危機」,會很慘、壓力很大 因為屆時新工具你跟年輕人一樣不太會用,舊有的經驗又幫不上忙,因為你從來不肯學背後通用的觀念 回到問題本身,我認為有兩件事情值得分享,有兩個觀點你需要去權衡,我們先談談「抽象」 # Abstraction 抽象 軟體工程師的主要工作就是「抽象化」,把各種邏輯分不同層次「封裝為抽象」 這樣才有重用性,別人才能基於你的成果,進一步開發更豐富的東西 網路的七層架構,各種協定,程式語言,語言上面的工具、套件、框架,都是抽象 # The Law of Leaky Abstractions,抽象滲漏法則:除非無關緊要,否則所有抽象都或多或少會滲漏 這是在軟體圈知名的一個理論,稍微資深的開發者都應該要知道這篇文章 https://www.joelonsoftware.com/2002/11/11/the-law-of-leaky-abstractions/ 我簡單說明一下,抽象滲漏法則就是在說:所有抽象都一定會在某些情境下失效,此時便是滲漏。 你只要工作時間夠久就會知道,長遠來說,你還是要花時間去研究它抽象背後的東西。 你本以為只是前端隨便寫一寫交差,卻發現有一天需要認真去看 HTTP 協定、CORS 在講什麼,否則無法處理資安問題 你本以為只是後端 CRUD 隨便寫一寫交差,卻發現有一天需要認真去看 database 索引機制、記憶體管理,否則無法處理效能問題 結論:「抽象」幫助我們省下一些工作的時間,但關於技術細節的學習時間,無法省下來。 # 你的生產力要對公司商業產值有幫助 我認為工程師常常在另一個方面犯錯,就是鑽研自己喜歡的細節,不去管對於公司的商業產值與個人生產力 我曾遇過公司要求協助更換一張網頁圖片,某工程師居然兩個星期還沒更換完成 問他原因,原來是他看圖片尺寸不順眼,在研究分割、壓縮、整個網頁的整合機制,以及相關工具的導入 問題是,那個網頁跟圖片並不重要,此時專案還沒進到效能優化的階段,此功能應該盡快上線,視情況決定下一步 這完全是沒搞清楚優先順序,只顧著研究自己爽的東西,也沒跟相關人士確認任務目標 # 結論 回到原 po 的描述 ``` 不然工程師哪有那麼多腦力去記住程式底層都做了什麼 ``` 這是大錯特錯,隨便找一個優秀的資深工程師,從 Vue 到 React 到各種工具,背後原理、相關機制,都能深入淺出跟你說明 什麼 shadow DOM / virtual DOM / pure function / fiber tree / proxy / immutable 等等,就算好幾個月不碰工具,還是能輕鬆解釋,根本不是死記硬背的,這全都是經驗&融會貫通的結果 但是過猶不及,不顧公司需求,自顧自地研究技術細節也不好 該花多少時間研究背後機制?這是一個需要權衡的問題 請從公司需求的角度,以及個人長期職涯的角度,視情況判斷 以上,簡單分享

Pair Programming:實務技巧與工具推薦

合作對於開發高質量程式碼至關重要。在本文中,我們將探討結對編程的概念,揭示其優點並推薦有用的工具。我們還將打破一些關於結對編程的常見誤解。 原文出處:https://dev.to/documatic/pair-programming-best-practices-and-tools-154j ## 什麼是結對編程? [結對編程](https://en.wikipedia.org/wiki/Pair_programming) 是一種讓兩個開發人員一起完成同一任務的技術。在這個過程中,一個人編寫程式碼(驅動程序),另一個人檢查每一行並提供反饋(導航器)。這種方法不同於傳統的單獨編程,並具有多種優點。 驅動程序的職責是專注於操作計算機和輸入程式碼的機制。導航員的責任是思考需要做什麼以及我們要去哪裡。兩人會不斷地溝通並頻繁地轉換角色,可能每隔幾分鐘。 ![結對編程](https://martinfowler.com/articles/on-pair-programming/driver_navigator.png) ## 結對編程的好處 ### 提高程式碼質量 當兩個軟體工程師一起工作時,他們可以快速發現彼此的錯誤,從而產生高質量的程式碼,從而顯著減少遺漏錯誤的機會。編程合作夥伴可以提供寶貴的見解、提出改進建議,並在做出承諾之前獲得有關其想法的反饋。 例如,在處理編碼問題時,一個軟體工程師可以專注於實現解決方案,而另一個軟體工程師則監視任何錯誤或語法錯誤。這樣,團隊就可以建立更清晰、更實用、更優化的程式碼。 ### 加強協作和溝通 結對編程還增強了兩個開發人員之間的協作。它幫助他們在相同的程式碼庫上工作並分享他們的知識和技能,從而更好地解決問題。它還解決了同事之間的溝通鴻溝,因為它促進了溝通,實現了快速、輕鬆的訊息共享。 例如,在開發新功能時,一名軟體工程師可以解釋他們的思維過程和想法,而另一名軟體工程師可以提供反饋並提出問題以澄清需要做什麼。這樣,團隊就可以共同尋找最佳解決方案並避免誤解。 ### 提高生產力 結對編程可以提高開發團隊的生產力。當兩個軟體工程師一起工作時,他們可以通過分擔責任更快地完成任務。一個可以解決問題,另一個可以搜尋潛在的錯誤。這樣,團隊就能比單獨工作更高效地解決問題、更有效地工作。這也取決於個人,一些軟體工程師在單獨工作時效率更高。 例如,在一個專案上的兩人合作中,一個人可能需要一兩個小時才能完成一項單獨開發人員需要三四個小時才能完成的任務。第二對可以專注於查找程式碼中的錯誤或其他問題。這意味著團隊可以用更少的時間和更少的精力完成任務,從而提高整體生產力。 ## 關於結對編程的誤解 在討論結對編程的最佳實踐之前,讓我們先澄清一些關於結對編程的誤解。 ### 誤區#1:結對編程很昂貴 這是關於結對編程的一個常見誤區。但實際上,這是對團隊生產力、程式碼質量和創新的投資。從長遠來看,通過及早發現錯誤可以節省時間並降低成本。所以,這不是真的。 ### 誤區#2:結對編程很慢 結對編程比其他編碼方法更快,因為它允許快速更正。當兩個開發人員協作時,他們可以避免許多錯誤和錯誤並加快問題解決速度。因此,除非開發人員只是為了好玩而不是高效地工作,否則這是不正確的。 ### 誤區#3:結對編程導致緊張 一些人認為結對編程會給開發人員帶來太大壓力,導致工作場所發生衝突。然而,這種情況只發生在該技術實施不佳的情況下。這取決於您與編程夥伴的關係如何。如果它很好,那麼這不適用於你。 ## 結對編程的最佳實踐 為了充分利用結對編程課程,請考慮遵循以下最佳實踐: ### 明確定義角色 明確界定駕駛員和領航員的角色。駕駛員編寫程式碼,而導航員檢查程式碼並提供反饋。經常切換角色以保持兩位開發人員的參與並避免一個人主導整個會話。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/govzbp92oczw6yx7259t.png) ### 有效溝通 結對編程期間,溝通至關重要。雙方開發人員都應該積極參與,表達自己的想法,並認真傾聽。分享想法、提出問題並公開討論程式碼。使用螢幕共享和程式碼審查平台等協作工具來促進溝通。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y46bjmfoivparjdb5lu2.png) ### 尊重和同理心 相互尊重和同理心對於成功的結對編程至關重要。重視彼此的意見、想法和專業知識。對建設性批評持開放態度,避免人身攻擊。建立一個鼓勵協作和學習的支持性和非評判性環境。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e34ughpeje20bxfbuekt.png) ### 休息一下 結對編程可能對智力要求很高。定期休息對於防止疲勞和保持工作效率非常重要。利用這些休息時間反思進展、討論挑戰併計劃下一步。請記住考慮彼此的精力水平並相應地安排休息時間。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/au3xmal7cftl1xtx5tub.png) ### 擁抱學習機會 結對編程是學習和技能發展的絕佳機會。與您的合作夥伴分享知識、技術和最佳實踐。對新想法和方法持開放態度。鼓勵參與的開發人員不斷學習和成長。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k1myouifacd659tc2ox6.png) ### 練習主動程式碼審查 利用結對編程的力量來持續審查和驗證程式碼。討論潛在的改進、及早發現缺陷並解決設計缺陷。利用兩位開發人員的專業知識來確保程式碼具有最高質量。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/chmhnulefghzk17ulmy9.png) ### 計劃並設定目標 在開始結對編程課程之前,討論並調整手頭任務的目的和目標。將工作分解為更小的、可管理的部分。設定明確的里程碑並確定任務的優先順序,以保持重點和進展。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7hse6ayo7sggjfrico6y.png) ### 記錄和分享知識 在結對編程會議期間做筆記,以記錄重要的討論、決策和見解。建立可以與團隊共享的文件,有助於傳播知識並確保整個專案的一致性。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kfqcuoqdpv2dq9bxigiz.png) ### 反思和改進 完成結對編程課程後,花時間反思這次經歷。討論哪些方面進展順利,哪些方面可以改進。根據反饋和經驗教訓不斷完善您的結對編程實踐。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3dlrw737qbsij0i3fvb8.png) *通過遵循這些最佳實踐,您可以最大限度地發揮結對編程的優勢。協作和程式碼質量將得到改善,開發人員將有機會增長他們的技能和知識。* ## 結對編程工具 為了充分利用結對編程,開發人員可以依靠各種工具來簡化流程。以下是一些可用的最佳工具: ### 實時分享(VS Code) [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) 是 VS Code 的擴展。它包含在最新版本的 VS Code 中。該工具使使用 VS Code 的開發人員能夠實時協作。 ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1686383031679/a2336e60-fe72-477b-ada7-978c113961ef.png) ### Replit [Replit](https://replit.com/) 是一個在線工具,可讓您與其他開發人員協作,而無需下載或安裝任何額外的軟體。您所要做的就是打開網絡瀏覽器,然後就可以開始了。如果您只是需要與其他人一起實時編輯程式碼,那麼它是完美的。 Replit 的一大優點是它支持 50 多種編程語言,使其具有多功能性並適合廣泛的專案。 ![](https://replit.com/public/images/IDE2/hero-image.svg) ### CodeSandbox Live [CodeSandbox](https://codesandbox.io/blog/introducing-codesandbox-live-real-time-code-collaboration-in-the-browser) Live 是一項實時協作功能,使開發人員能夠在同一平台上工作實時專案。借助 CodeSandbox Live,多個開發人員可以同時處理同一個程式碼庫,從而更輕鬆地協作處理複雜的專案。 ![](https://codesandbox.io/_next/image?url=%2Fnew%2Fblog%2Fintroducing-codesandbox-live-real-time-code-collaboration-in-the-browser%2F0.gif&w=1920&q=75) ### Codeanywhere [Codeanywhere](https://codeanywhere.com/) 是一個基於雲的集成開發環境 (IDE),允許開發人員使用任何具有網路連接的設備從任何地方編碼、協作和管理他們的專案。它提供了一套全面的工具和功能來促進編碼和簡化開發工作流程。 ![](https://i.imgur.com/jIr0IqV.png) ### [CodeTogether](https://www.codetogether.com/) CodeTogether **允許您通過 Eclipse、IntelliJ 或 VS Code 主持和加入協作編碼會話**。來賓可以從安裝了 CodeTogether 的自己的 IDE 加入會話,即使它與主機的 IDE 不同。訪客還可以通過任何現代瀏覽器加入會話,無需進行任何設置。 ![](https://i.imgur.com/8KDJzAv.png) ## 結論 最後,結對編程對於軟體開發人員來說是一種非常有效的技術。它增強了協作、程式碼質量、團隊生產力和許多其他方面。遵循最佳實踐並使用適當的工具是成功結對編程的關鍵。

改善重用性:Vue Composables 的推薦技巧&Design Patterns

本文將分為三個部分: 1. 通用設計模式 2. 我的建議 3. 進一步閱讀 享受並且讓我知道您在專案中使用的模式和實踐🚀 原文出處:https://dev.to/jacobandrewsky/good-practices-and-design-patterns-for-vue-composables-24lk ## 通用設計模式 我認為了解建置可組合項模式的最佳來源實際上是 Vue.js 文件,您可以在[此處](https://vuejs.org/guide/reusability/composables.html)查看 ### 基本可組合項 Vue 文件顯示了以下 useMouse 可組合項的示例: ``` // mouse.js import { ref, onMounted, onUnmounted } from 'vue' // by convention, composable function names start with "use" export function useMouse() { // state encapsulated and managed by the composable const x = ref(0) const y = ref(0) // a composable can update its managed state over time. function update(event) { x.value = event.pageX y.value = event.pageY } // a composable can also hook into its owner component's // lifecycle to setup and teardown side effects. onMounted(() => window.addEventListener('mousemove', update)) onUnmounted(() => window.removeEventListener('mousemove', update)) // expose managed state as return value return { x, y } } ``` 稍後可以在元件中使用它,如下所示: ``` <script setup> import { useMouse } from './mouse.js' const { x, y } = useMouse() </script> <template>Mouse position is at: {{ x }}, {{ y }}</template> ``` ### 異步可組合項 為了獲取資料,Vue 建議使用以下可組合結構: ``` import { ref, watchEffect, toValue } from 'vue' export function useFetch(url) { const data = ref(null) const error = ref(null) watchEffect(() => { // reset state before fetching.. data.value = null error.value = null // toValue() unwraps potential refs or getters fetch(toValue(url)) .then((res) => res.json()) .then((json) => (data.value = json)) .catch((err) => (error.value = err)) }) return { data, error } } ``` 然後可以在元件中使用它,如下所示: ``` <script setup> import { useFetch } from './fetch.js' const { data, error } = useFetch('...') </script> ``` ### 可組合合約 根據上面的示例,以下是所有可組合項都應遵循的約定: 1. 可組合文件名應以 use 開頭,例如 `useSomeAmazingFeature.ts` 2. 它可以接受輸入參數,這些參數可以是字串等基本類型,也可以接受 refs 和 getter,但需要使用 toValue 幫助器 3. Composable 應該返回一個 ref 值,該值可以在解構可組合項後存取,例如 `const { x, y } = useMouse()` 4. 可組合項可以保存可以在整個應用程式中存取和修改的全局狀態。 5. 可組合性可能會產生副作用,例如加入窗口事件偵聽器,但在卸載元件時應清除它們。 6. 可組合項只能在 `<script setup>` 或 `setup()` 掛鉤中呼叫。它們也應該在這些上下文中同步呼叫。在某些情況下,您還可以在生命週期掛鉤中呼叫它們,例如“onMounted()”。 7. 可組合項可以呼叫內部的其他可組合項。 8. 可組合項應在內部包裝某些邏輯,當過於復雜時,應將它們提取到單獨的可組合項中以便於測試。 ## 我的建議 我已經為我的工作專案和開源專案建置了多個可組合項 - NuxtAlgolia、NuxtCloudinary、NuxtMedusa,因此基於這些,我想根據我的經驗在上面的合同中加入一些要點。 ### 有狀態或/和純函數可組合項 在程式碼標準化的某個時刻,您可能會得出這樣的結論:您希望對可組合項中的狀態保留做出決定。 最容易測試的函數是那些不存儲任何狀態的函數(即它們是簡單的輸入/輸出函數),例如負責將字節轉換為人類可讀值的可組合函數。它接受一個值並返回一個不同的值 - 它不存儲任何狀態。 不要誤會我的意思,你不必做出“或”的決定。您可以完全保留有狀態和無狀態可組合項。但這應該是一個書面決定,以便以後更容易與他們合作 🙂 ### 可組合項的單元測試 我們希望使用 Vitest 為我們的前端應用程式實施單元測試。在後端工作時,進行單元測試程式碼覆蓋率非常有用,因為您主要關注邏輯。然而,在前端,您通常使用視覺效果。 因此,我們認為對整個元件進行單元測試可能不是最好的主意,因為我們基本上將對框架本身進行單元測試(如果按下按鈕,檢查狀態是否更改或模式是否打開)。 由於我們已將所有業務邏輯移至可組合項(基本上是 TypeScript 函數)內,因此它們很容易使用 Vitest 進行測試,並且允許我們擁有更穩定的系統。 ### 可組合項的範圍 不久前,在 VueStorefront 中,我們開發了自己的可組合方法(早在它們實際上像這樣被呼叫之前)。在我們的方法中,我們使用可組合項來映射電子商務的業務領域,如下所示: ``` const { cart, load, addItem, removeItem, remove, ... } = useCart() ``` 這種方法絕對有用,因為它允許將域包裝在一個函數中。在“useProduct”或“useCategory”等更簡單的示例中,實現和維護相對簡單。然而,正如您在此處的“useCart”示例中看到的那樣,當包裝一個包含更多邏輯而不僅僅是資料獲取的域時,這個可組合項正在發展成為一種非常難以開發和維護的形狀。 此時,我開始為 Nuxt 生態系統做出貢獻,其中引入了不同的方法。在這種新方法中,每個可組合項僅負責一件事。因此,我們的想法不是建置一個巨大的“useCart”可組合項,而是為每個功能建置可組合項,即“useAddToCart”、“useFetchCart”、“useRemovefromCart”等。 因此,維護和測試這些可組合項應該更容易 🙂 ## 進一步閱讀 這將是我的研究的全部內容。如果您想了解有關此主題的更多訊息,請務必查看以下文章: * https://vuejs.org/guide/reusability/composables.html * https://www.youtube.com/watch?v=bcZM3EogPJE * https://vueschool.io/articles/vuejs-tutorials/what-is-a-vue-js-composable/ * https://blog.logrocket.com/getting-started-vue-composables/ * https://macopedia.com/blog/news/how-can-vue-3-composables-make-your-life-easier

給新手的建議:寫程式的 10 個注意事項

作為一名軟體工程師,您希望確保您的程式碼高效、可讀且可維護。為了幫助您實現這些目標,我列出了您在編碼時應該加入的 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 件事納入您的編碼實踐將顯著提高您的編程技能,並幫助您建置更好的軟體應用程式。 通過關注有意義的變數名、清晰的註釋、一致的程式碼格式、錯誤處理、優化的資料結構、高效的算法設計、模塊化的程式碼、徹底的測試、版本控制和持續學習,你將成為一名更加熟練的軟體工程師。 請記住,編程是一個不斷改進的旅程,因此請接受這些有價值的技巧,並在編碼工作中追求卓越。

回答網友提問:26歲無經驗、高職畢,先去讀個二技 vs 直接補習轉職?

阿川收到網友提問如下: ``` 哈囉站長你好 我目前有在看蓬蓬的自學影片跟寫你分享的練習題 有件事想詢問一下我目前快26之前的工作經歷跟軟體一點關係都沒有 高職畢業 目前在自學一些程式語言的技能 如果未來要朝這個方向走建議我先去讀個二技相關科系補學歷嗎? 還是直接找線上課程或補習班轉職謝謝 原本的打算是想說上二技假日進修補個學歷順便幫自己打底 因為網路上看到蠻多分享是上完課後基礎理論不好 想順便詢問一下沒有學歷的話對未來的工作發展影響大嗎? 還是學歷只是初期比較看待後面看能力這樣子 ``` 寫一篇完整、公開回答跟大家分享,給類似狀況的人參考: # 不建議回學校補學歷 回學校補學歷真的太花時間了,動輒數年以上 何況入學之後還未必喜歡學校、未必喜歡寫程式 業界很多人也是「學歷普普且無經驗」自學4-9個月後,半路出家轉職成功 不論是金錢 or 時間成本來說,都應該先這樣試試看比較保險吧 # 很多人半路出家之後覺得自己底子不好 本科&非本科,基礎一定有差 但是現在網路資源、書本資源很多 寫網站不是什麼需要博士學位的「太空火箭科學」 工作上缺哪方面,就往哪方面慢慢自己補充,且戰且走也還夠用的 這行業根據職位狀況,難度可深可淺,一開始先負責較簡單的網頁工作也行 發現自己底子不好,趕快花業餘時間,大力自修一下呀 甚至先入行之後,週末再去學校進修,都比較保險吧 # 學歷對未來工作影響大嗎 學歷好看的話,當然在職場上有優勢 但如果態度不專業、工作多年還是沒什麼作品集,那也很難當工程師吧? 反過來說,學經歷不強的話 如果態度積極,作品集擺開在那邊,就算不是「超猛」的作品,也讓人知道這工程師有基本的「戰鬥力」呀 更不用說,如果積極貢獻社群、Github 專案有一堆星星,這種時候誰會管這工程師的學歷? 所以這題的答案是:學歷出色還是很吃香,但也還好啦!畢竟軟體工程這行,偏向「實力主義」,很難靠「關係」或者當「花瓶」或者「辦公室政治」就能混得出色 # 不建議直接跳進去補習班 另外我也不建議直接跑去需「全職上課」半年左右,學費十萬以上那種實體補習班 首先,班上同學程度不一,如果你稍微沒跟上進度,後面老師在講什麼就聽不懂,這樣花了大錢、時間,學習效果也不怎麼樣呀 我建議先大量找免費或便宜的教材,先吸收,多試幾份,真的卡關了,再開始挑補習班 先直接找一些作業跟專案寫寫看,從免費 -> 便宜的 -> 稍貴的,這樣一點一點花錢,風險比較小 更認識自身需求之後,再去比較市面上的各種補習班,最後再把這錢花下去,比較保險 事實上,也有很多人,最後根本沒去補習班,只靠著免費&便宜的一些資源,就直接順利轉職的呢! # 結論 這行學無止盡,就算台大畢業,工作十年經驗,還是一直在不斷自學寫程式的奇妙&精益求精 另外,我也有設計免費的 html&css 教材,還有便宜的 javascript 教材,內含「大量練習專案」,不論你最後選擇哪種學習方式,我都推薦搭配拿去學習、練習,稍有難度,但不少人全做完之後就順利面試上班了 以上,簡單分享個人看法

AI 咒語工程簡介:什麼是 AI 咒語工程?如何利用各種 AI 得到理想產出?

人工智能遍地開花,隨處可見一些新的人工智能工具。在 [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 會使用我之前的搜尋歷史記錄和我的位置等訊息來幫助確定結果,但僅此而已。 ![GitHub 甜甜圈](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rp4pnnp89sr7u1nkqnli.jpg) _搜尋引擎中的術語“甜甜圈”可以指任何形狀、Slack 插件、應用程式,或者 GitHub Universe 2022 上提供的這些美味的 GitHub 甜甜圈_ 例如,如果我想找到一個關於在 Blender 中建立甜甜圈 3D 模型的教程,那麼如果我只輸入“甜甜圈”,搜尋結果可能不會顯示。我需要更具體。諸如“甜甜圈 Blender3D 教程”之類的東西會為我提供更準確的結果。 人工智能也是如此。您需要為 AI 提供足夠的上下文,以便根據您的需要獲得更好的結果。 ## 聊天應用的提示工程 許多人向我們展示了來自 ChatGPT 的一些瘋狂結果。雖然它們並不總是準確的,但 ChatGPT 確實擅長一件事:散文。寫出優美、結構合理、流暢的句子真是令人難以置信。結果很容易閱讀,聽起來真的很棒。但獲得準確的回應完全是另一回事。例如,人們厭倦了使用 ChatGPT 撰寫歷史文章,雖然文章可能讀起來不錯,但在歷史上可能並不准確。比如你讓ChatGPT“寫一篇關於中國的淪陷的2000字的文章”,它就會給你寫一篇關於中國的淪陷的2000字的文章。但它不一定是事實正確的。 ![ChatGPT 生物響應](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8jc4mphrlgsmfw3yobfo.png) _雖然某些內容可能讀起來不錯,但實際上可能不正確。提示:我沒有博士學位_ :wink: 這是因為 ChatGPT 從各種來源獲取訊息並將它們融合在一起。這些來源本身可能並不准確。 ChatGPT 也不知道您指的是中國的_哪個_秋天。因此它很容易錯誤地交叉引用日期。通過以對話方式向 ChatGPT 提供訊息,然後要求它寫一篇 2000 字的文章,您將獲得更好的結果。 那到底是什麼意思?有些人認為 ChatGPT 是一種單向的、對話式的、單一輸入的獲取訊息的方法。但事實並非如此。它被稱為“聊天”是有原因的。進行對話,完善您的問題,為您的回答提供背景訊息。 例如,如果我想要一段關於“NDC 會議”的旅行報告,我不會以“給我寫一段 NDC 旅行報告”來開始我的 ChatGPT。相反,我會首先弄清楚 ChatGPT 對 NDC 了解多少,並在此過程中提供上下文。您提供的輸入在很大程度上決定了輸出。這就是為什麼有些人能夠獲得非常好的結果,而其他人則不能。 ![ChatGPT 響應](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eks1e166pqqu0jh9hpll.png) _沒有任何上下文,ChatGPT 不知道我指的是什麼 NDC_ 另一個例子:如果你要去參加工作面試,你想要一些提示,讓 ChatGPT“給我一些準備工作面試的提示”,會給你一些很好的回應,但它遠非具體。相反,諸如“我要去一家 AI 初創公司面試軟體開發人員的職位。你能給我一些準備面試的提示嗎?”將為您提供更加量身定制的個性化結果。這就好比你讓台上的專家給觀眾中的 1000 個人一個答案,他們可能會提供一些通用的東西,這樣每個人都有一個外賣訊息。但如果你一對一地問同一個人,他們可能會問你一些後續問題以了解你的情況,因此會提供更個性化、更具體的答案。 ## 藝術應用的提示工程 您可能已經看到一些人使用穩定的傳播應用程式創作的一些精美藝術品。然後是看起來“錯誤”的藝術品。其中很多都歸結為上下文。例如,如果我使用 [Night Café](https://nightcafe.studio/)(我最喜歡的生成器之一),然後輸入“dog”這個詞,這就是我得到的: ![圖片說明](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/61ibs1fd5j3ht37e4epn.jpg) _使用 Night Café 生成的圖像,以及提示符“dog”_ 有一些隨機的“狗”字寫成一個標誌,前景中有一隻看起來很奇怪的狗,而且它的顏色非常奇怪。現在,如果我想像成年德國牧羊犬在陽光明媚的日子裡在公園裡的照片般的圖像,那可能不是我要得到的。人工智能沒有那種背景。它無法讀懂我的想法(還沒有!)。當你想創作藝術品時,你需要描述你在腦海中想像的圖像。您提供的細節越多,輸出就越好。這就是它變得棘手的地方。許多穩定的擴散應用程式都有有限的字符數。因此,您需要對如何製作提示具有意義和戰略性。 與 ChatGPT 類似,您需要不斷地重新製作提示並完善它們。然而,基於聊天的 AI 的優勢在於,您可以繼續對話並不斷向 AI 提供更多訊息和不同的問題,以獲得良好的回應。雖然一些藝術生成器允許您“重新混合”您的輸出,但它仍然依賴於新的提示。因此,您一直在等待輸出,查看未加入的內容,然後發送經過調整的新提示。一些用戶在 Midjourney 上花費數小時,接收輸出並重新製作他們的提示以產生一些驚人的作品。這都是練習的問題。這就是為什麼一些創作者在 Etsy 上出售他們的提示! ![AI生成戰鬥兔](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z0411o5c2fgbz7oikzwz.jpg) _我的朋友 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 收到的訊息。對於藝術品生成器而言,這不太重要,但如果您查看程式碼和訊息,它就很重要。檢查您收到的程式碼是否按照您的預期工作。驗證提供給您的書面訊息的準確性。 請記住,無論發生什麼,您仍然是飛行員。您仍然是負責人,您對使用和共享哪些藝術作品、哪些程式碼片段以及哪些訊息有最終決定權。