文、Raymond老師 對大多數的工程師而言，AI 工具最大的效用莫過於在已深度整合到各種編輯器中的輔助工具。不管是前陣子十分火紅的 Cursor，或是高度整合在 VSCode 中的 Copilot，這些工具都能有效提升開發效率，特別是 AI 驅動的 autocomplete 更是讓程式設計變得更加流暢。本文將簡單介紹與探討如何妥善運用這些 AI 工具在網頁設計的開發之中。 功能簡介 雖然現在AI輔助開發的工具遍地開花，但對於天天都需要碰到程式碼的工程師來說，以下兩點無非是最常用且最常見的功能： 程式碼自動補全（autocomplete） 在行內即時編寫程式碼時，所有的編輯器都早已有針對各個語言的關鍵字補全功能，讓工程師們可以少打非常多的字，不過autocomplete的功能是建立在AI即時的讀取目前編輯內容的上下文後，去提示出可能符合當下開發情境的內容，例如下圖我僅僅只是打出了其中一項要return的內容，Copilot便去讀取上下文認為猜測我可能是在撰寫有關Select元件選單的相關程式（會需要label以及value等元素），於是就提示了下一行給我。 透過prompt生成程式碼 透過下達prompt（提供給AI的提示詞或指令），我們也能在IDE中直接生成大段落的功能以及程式碼，在清楚目前所需的內容或是架構的情形，工程師能靠描述現在所需的功能去讓AI給出基本的prototype，再來做後續修正補全，甚至相反過來，在已經完成建構的內容中，讓AI直接修改程式碼或是提出修正建議，透過Copilot Edit或是Cusor Composer都能很好地完成以上的工作。 對網頁設計開發的影響 在目前競爭十分激烈的AI編輯器中，往往每過幾週或一兩個月，就能迭代出新的功能或是產品，尤其是前端網頁的開發，由於有大量的資料能夠訓練且部分靜態內容AI開發的速度遠遠超過人工，只要思路夠清晰、結構夠完備，短短幾分鐘內就能產出大量的網頁內容，甚至社群媒體上不乏充斥著那些「AI幫我在半小時內完成網站」或「Cursor讓我增加了三倍效率」等等內容，開發速度確實是帶來了不小的衝擊，不過對於網頁設計開發來說，僅僅做出能看的東西只能被稱作demo page，而不是一個好的web page，即便做出來了也還得經過安全性或效能等等的驗證，大語言模型的運作原理本質上就是一種多數決，但不代表是最佳解。 不論是使用哪種AI工具，Copilot也好、Cursor也罷，在能妥善運用他們工程師面前確實是如虎添翼，之所以有這樣的效果是因為他們「本來就知道要做什麼」，若是有從頭到尾自己設計並開發過一個網站的人便能理解，產出目前的內容只是剛開始，後續如何迭代更新與維護才是重點所在，保持著信任並驗證的開發習慣，更能讓自己上手各種推陳出新的AI工具。 ⭐點我加入官方LINE，獲得第一手最新消息⭐ FB粉絲團：https://www.facebook.com/lccnetzone YouTube頻道：https://www.youtube.com/@Lccnet-TW 痞客邦Blog：http://lccnetvip.pixnet.net/blog
文、Raymond老師 「你先建一下環境，然後看看還有什麼問題」 踏入新公司的第一天，你拿到了公司發的筆電，你的主管或mentor在簡單跟你介紹了部門狀況以後，丟下了這句話就先去忙了，此時你可能會有點疑惑，「建環境」究竟應該要先做什麼？難道你可以把公司的電腦變得像你自己在用的個人電腦一樣嗎？這方面我想各個公司應該都有更為細部的資安規定，在開始建立你自己的開發環境前，務必要先把規則搞清楚，才不會踩到公司規定的雷區。 在確認好公司內規定後，通常就可以開始進行所謂的環境佈建，對所有的工程師來說這是必備的技能，越是資深的工程師在開發時可能會同時運用到的工具也可能隨之增加，而多年累積的個人習慣也會影響到開發的效率，這部分的細節甚至可以延伸到編輯器的快捷鍵等等，而本文則會著重在開始網頁開發前可能碰上的一些狀況進行闡述。 建立你自己的開發環境 假設你拿到的是一台什麼都沒有的空白電腦，除了那些你自己個人習慣使用硬體所需要的驅動程式以外，必定需要的東西還有三個：git、瀏覽器、Node.js，git的部分在前一篇已有提過便不在此處多加贅述，接下來讓我們聚焦其餘兩個對於網頁開發十分重要的工具上。 網頁瀏覽器 現今的網頁瀏覽器可說是功能十分強大，以目前較為大宗的Google Chrome或是Firefox，在他們各自的開發者工具中基本上都可以做到即時的調整網頁樣式、監控網頁發生的各種網路請求、分析JavaScript上的程式錯誤等等功能，但對於網頁工程師來說，瀏覽器還有一個最重要的功能，那就是實際反應用戶的所見所用，不同瀏覽器或不同裝置載體所呈現的狀況可能都不盡相同，這也是許多新手常常忽略的重點之一，開發前就該先確認好用戶的使用環境狀況，並在自己的開發環境中選用所需的瀏覽器，才更能貼合用戶的去開發與設計，著迷於新語法卻忽視了相容性也是新手常常踩到的雷點之一，現在也有不少網站整理了瀏覽器相容性的資料，如Mdn Web Docs或是CanIUse等等，都是在開發時值得去複查的資源。 圖片來源：caniuse Node.js 很多新手工程師會將Node.js單純理解為「讓 JavaScript 可以在server也run起來」的工具，但實際上它所衍伸出來的生態已經不止於此，其中最讓大家愛不釋手的工具之一便是Node Package Manager，也就是俗稱的npm，這讓開發者們可以輕易的站在巨人的肩膀上，功能橫跨前後端甚至檔案處理等等，一般來說，npm會跟著電腦上的Node.js一起自動安裝好，如果專案中有package.json的檔案便可以使用npm相關的指令進行安裝、更新、改動等等的動作，也因此安裝Node.js便會是建環境時不可忽略的步驟。 而此處也是有許多新手工程師會碰到的另外一個障礙處：我究竟要安裝哪個版本的Node.js，對於這個問題筆者必須直接說，請直接詢問你的主管或mentor以確保自己是安裝正確的版本，雖然在大多數情況Node.js都是可以向下兼容的，往最新的穩定版裝通常都不會有問題，但以防萬一還是務必先詢問好才不會踩到奇怪的雷點，安裝時請直接在Node.js查詢安裝途徑即可，不同的OS會有不同的安裝方式，好好閱讀官方文件也是作為工程師必備的技能。 圖源：nodejs 另外若有餘力，筆者也十分推薦使用nvm這個Node.js版本管理工具，因為在公司內往往不會只維護開發單一的專案，在不同專案底下選擇最適配的版本也更能讓自己順利開發。 說了這麼多也許有些人會納悶，這些東西裝完我還是沒辦法開始開發啊，平常我習慣使用的VSCode去哪裡了？編輯器就不重要嗎？由於編輯器本身是一個非常個人化的工具，若以通用性而言個人認為並不是最優先的項目，但也不代表編輯器就不重要，之後再和大家介紹目前較為流行的IDE以及部分輔助工具，若想要了解或學習更多網頁設計知識，歡迎填寫下方表單預約了解課程。 ⭐點我加入官方LINE，獲得第一手最新消息⭐ FB粉絲團：https://www.facebook.com/lccnetzone YouTube頻道：https://www.youtube.com/@Lccnet-TW 痞客邦Blog：http://lccnetvip.pixnet.net/blog
文、Raymond老師 「你能想像一年後的你在做什麼嗎？」 對許多嚮往成為工程師的人來說，學習技術本身只是一種手段，我們最終的目的都是希望可以拿到一份薪資符合預期、工作環境優良的offer，然而一旦你踏進了公司大門成為員工時，我們所面臨的往往是層出不窮的需求以及被deadline追著跑的壓力，也許公司會給你適應的時間或是有mentor可以帶你，但有些人也是到這個階段才發現，這跟他想像中的似乎不太一樣。 因此這系列的主軸便如標題所說，我們會模擬一名工程師從錄取到可以獨當一面，在各個階段中可能會碰到的問題或挑戰，由於筆者本身也是網頁工程師，所以我們將會以junior網頁工程師的角度去進行這個系列。 歡迎入門 在經過一場場技術考驗與面試之後，你終於成功踏入工程師的職場大門，雖然在兩週後才要進到新公司工作，但兢兢業業的你仍然想要先做一點準備，好讓自己能快速地適應這第一份工程師工作，那麼問題來了，要是只能選一個必定要在工作前先做好準備或是熟悉的技術，那麼會是什麼呢？讓筆者來選的話，肯定非git莫屬。 什麼是git，為什麼需要它？ 對於一個剛入門且可能只有一到兩個side project的junior前端來說，即便有用過git可能也只是把它當作一種可以存放程式碼紀錄的倉庫而已，甚至會認為GitHub就是git本身， git的重要之處在哪，大致可以用三個方向去描述： 1. 歷史記錄的追蹤 使你的程式碼有跡可循，更方便去進行回溯與修正。 2. 多人協作 使多名開發者可以同時工作，彼此不會干擾。 3. 安全性 只要有金鑰或存取權，便能隨時還原遠端倉庫中的內容。 git其實就像一位給程式碼專案用的秘書，只要你在專案中加入這位秘書後，他就會開始幫你記錄你專案中的增修刪改，這也就是第一點提到的追蹤功能，而後兩者都需要有遠端倉庫的存在才能使其發揮效用，最普遍大宗的便是GitHub這個平台，若要進行練習，你需要做的就是在你的電腦中裝上git工具，並找一個遠端倉庫去實作。 多人協作中使用git的要點？ 相信在網路就能找到許多關於git的教學，包含從安裝到基本指令該如何操作都已經十分萬全了，但對於新手來說，最缺乏的經驗肯定是多人協作，尤其是對在學習階段時獨立開發side project的人而言，branch merge rebase等等概念基本上也不好想像，這邊就針對多人協作的部分再多延伸一些內容。 如同先前所說，git其實就像一個程式碼秘書，他將你手上的專案歷程記錄都保留了下來，那麼再想像一個情境：今天專案本身是一本書，主管拿著這本書複印了兩份影印稿以後，分配給你跟你的同事，主管要你們分別處理第一章節與第二章節的錯字校對，於是你們各自回去處理工作，過了一週後你們完成了工作並將影印稿交給了主管，主管此時必須把這兩份修正好的影印稿內容合併回他手上的這本書中，於是他將影印稿丟給了秘書請他處理，秘書好好的比對了這兩份文件後發現，由於你初來乍到，不小心搞錯了範圍而導致你處理的範圍跟同事有了重疊，於是秘書回頭來問你們究竟該以哪份為主，你跟同事討論一番後得出了結論，秘書也因此可以好好的完成合併比對的工作。 而有基本git概念的你肯定很快就發現了其中的要點，兩份影印稿代表的便是你與你同事各自從原書（master）中開立出去的分支（branch），而中間你們可能會做一些同步（pullpush），最終秘書在處理的便是這些影印稿的合併（merge），那麼他比對到了內容有差異或衝突（conflict）時，你跟你同事就得決定誰的版本才是正確（rebase），最後達成一致以後才能提交出去。 每個團隊處理git的workflow肯定都不盡相同，但只要先有了基本概念，後續要去釐清整個流程中的步驟都不是難事，最怕的就是一知半解，嚴重者甚至可能會造成整個專案被錯誤的合併覆蓋，在多人協作時請一定要特別小心，若想要更了解網頁設計，歡迎填寫下方表單預約諮詢課程喔~ ⭐點我加入官方LINE，獲得第一手最新消息⭐ FB粉絲團：https://www.facebook.com/lccnetzone YouTube頻道：https://www.youtube.com/@Lccnet-TW 痞客邦Blog：http://lccnetvip.pixnet.net/blog
Photoshop Beta版🖥️生成填充工具
今天要來跟大家介紹覺得Generative Fill的生成工具，Generative Fill本身是屬於Adobe Photoshop的Beta版本，他的功能非常強大，擴張圖片、新增元素，快速完成客戶需求...
本網站使用相關網站技術以確保使用者獲得最佳體驗，通過使用我們的網站，您確認並同意本網站的隱私權政策。欲了解詳情，請參閱 隱私權政策。
zoom教室下載
