會學習 volta 主要是在進行 node 版本切換的時候，原本會是使用 nvm 的方式，但是聽說現在有一個更好用的工作叫做 volta，所以開始對這個工具進行研究。 首先是 volta 的官網： https://volta.sh/ 進到這個官網以後，就可以看得到如何安裝的方式。 在這裡就打開終端機，然後下這串指令： 1curl https://get.volta.sh | bash 就會自動安裝成功了，在這裡我自己有遇到一些問題，就是安裝明明是成功的，但是當我下volta -v試圖去查詢版本號時，卻得到not found volta的結果，讓我以為沒有成功安裝，但後來發現只是因為使用 vscode 內建的終端機去下載安裝完還需要重載不然不會正確顯示，其實原本還是有安裝，這點要記得注意。 如何使用官網在這裡把 volta 的管理分成 Managing your toolchain Managing your project 在這裡的第一個會使用到的指令是volta install 剛開一個新專案時都是空的，還沒有任何資料，這時候切換 node 版本的方式就只能是用volta i ...

剛開始學習時常常搞混的地方，關於什麼時候屬於「回傳」什麼時候得「印出」常常傻傻搞不清楚，在這裡做個筆記紀錄一下，我自己研究完後的理解。 這部分要先知道所謂的「回傳」在 JavaScript 使用的語法是return，而「印出」則是console.log。 回傳：return通常是使用在函式裡面，代表說回傳一個值的概念，這邊要注意，只是代表說會回傳一個值但是不會印出來，所以說假如去互叫一個只有retrun卻沒有console.log的函式，那會發現什麼也不會發生。 假如是想要在呼叫函式的時候，也可以印出值的話，就得在函式中去retrun出值，然後在外面的部分去進行console.log的東西才有辦法做得到。 12345function call(name) { return name;}console.log(call("vic")); 印出：console.log單純把被console.log裡面的值給印出來，跟回傳不一樣的地方是，假如今天函式內直接做console.log，那在外面呼叫時就會直接印出東西來。 印出東西的情境我覺得最多是用在找 ...

自己研究時的參考資源： -在 JavaScript 中獲取使用者輸入| D 棧 -Hans-Tsai/Node.js-Learn -Node.js 官網node.js 要取得使用者輸入會需要方法，我目前在使用的方式是用 readline 的方式，可以藉由它直接去做到使用者輸入 主要的幾種方式 readline => node.js 提供，可直接引用來幫助取得輸出輸入 prompt-sync => readline prompt-sync Text 非同步 同步 Text 不需要安裝 需要安裝 readline引用基於 callback and sync 的 API 1const readline = require('node:readline'); 引用基於 promise 的 API 1import * as readline from 'node:readline/promises'; CJS 範例版本 => commonJs 123456789101 ...

在好想工作室中參與其他案子累積經驗時，過程中剛好碰到這個案主挑戰賽的活動，主要是給一些在好想工作室一些還在學習的學員讓他們有接案的經驗，可以參考這一篇：練功活動: 模擬案主!! - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天 本來沒有要參加，但在最後一刻還是加入了進去。 以下就來談談我這次的經歷跟學習到的經驗吧！ 模擬案主這個案主挑戰賽由工作室內資深的前輩進駐者擔任案主，他們會根據之前做過的案子，挑選其中的難題作為挑戰賽的主軸，包括題目設定和驗收的故事。在挑戰賽的過程中，參賽者可以和案主不斷互動，獲得寶貴的指導和建議。 比賽分成幾組進行，主辦方會根據參加者的程度平均分配隊伍。這次比賽主要分成三個組別，每組由三個人組成，並在一個禮拜內完成案主的需求，編寫出一個完整的網站。 一切始於一個風和日麗的下午，所有參加這次案主挑戰賽的人都聚集在大會議室裡。我看著大家，人數很多讓我感到有點緊張。主辦方首先要求我們寫下想和誰組隊的名字，我隨手寫下了一個名字，然後交了出去。接著是主辦方的操作，他們通過一個我不太了解的機制，選出了我的兩個隊友。分組組合印在會議室的大白板上，主辦方開始講解比賽的 ...

此篇文章建立已經有 npm 的情況下。 如果是像我還有需要 node.js 的人，只要去安裝了 node.js，也會同時安裝 npm，至於如何安裝 node.js 可以去它的官網看=>https://nodejs.org/en/ 。 回到這次主題。 環境分成兩種 全域的方式 本地端的方式 全域的方式代表只要裝了一次，整台電腦都會有 sass，而本地端則是範圍只限於一個專案之中，個人偏好使用本地端的方式，儘管可能每次都要裝一次，但會比較清楚使用了什麼。 全域安裝 sass 環境第一步打開終端機。 第二步直接打指令。 安裝的指令： npm install -g sass解除安裝的指令： npm uninstall -g sass 在這過程中可能會直接錯誤，畫面上會給出報醋，這是十分正常的，爬文後發現有一些權限問題，這時候只要最前面加上sudo，以及之後打上密碼就 ok 了。 例如：安裝的指令 => sudo npm install -g sass解除安裝的指令 => sudo npm uninstall -g sass 而要怎麼檢查安裝有沒 ...

前端工程師在使用 vscode 這個編譯器進行切板剛開始時，通常開完一個叫做 index.html 的檔案後，就會開始在最初的頁面裡下一個驚嘆號。 這是預設的，所以完全不用做任何的設定，而當把這個驚嘆號給按下去之後，就會出現一套模板，包含了 html、head、body，這個模板節省了最初的撰寫時間，相信很多人沒有這個驚探號生成的模板可能剛開頭就不知道如何下手了。 而這個其實也能夠自己手動去做設定的，它是 vscode 其中的一個好用功能，叫做 User Snippets，也稱之為使用者自訂程式碼片段。 接下來就會教如何從零設定自己想要的使用者片段。 步驟一首先 vscode 頁面從最上面那一排找到一個叫做喜好設定的選項當中，會看到裡面有一個叫做==使用者程式碼片段==的區塊，點下去。 步驟二會出現一個視窗的選項在中央供選擇，這此請按新增==全域程式碼片段檔案==。 這個選項的意思是此檔案設定的使用者片段會讓你的所有檔案都可以使用，所以假如只由讓特定檔案使用而已的話，就不適合全域的方式，可以選擇只 fo ...

這三個常常會搞混，用一個簡單的範例超快速搞懂這三個概念！ 12345function add(a, b) { console.log(a + b);}add(1, 2); // 3 這時候 add 這個函式裡面的 a 跟 b 就是參數。而下方呼叫函式裡面的 1 跟 2 就是引數。 那現在如何把變數的概念也加進去 => 1234567const c = 2;function add(a, b) { console.log(a + b);}add(1, c); 剛剛的那個例子中就會多了一個叫做 c 的變數，這個 c 的變數就會在呼叫 add 這個函式的時候把變數帶入這個引數，這個時候變數就成為了引數，然後這個引數會在帶回這個參數，最後把結果給算出來。

創建完.html 的檔案後，在開始把版面切出來之前，通常會使用!的方式把內建的範本給建立出來，使用內建範本會把一些基本的東西都先呈現出來，像是 html、head、body 的 tag。 雖然十分的理所當然，但也因為方便所以有時會忽略掉那些內建的東西是什麼，在內建範本之中，我覺得最容易被忽略掉，跟最容易經過時間遺忘的是其中的三個 meta tag，所以在此做個筆記讓之後遺忘可以複習。 <meta charset="UTF-8">這一段是跟編碼有所關聯，可以用來指定說這個網頁內容需要用什麼編碼。 一般來說會使用”UTF-8”來做編碼，HTML5 的規範也推薦所有開發人員都使用 UTF-8 字符集，因為它幾乎涵蓋了世界上所有的字符跟符號。 詳細可以參考這一篇文章，我覺得還不錯：[HTML][新手] 04. 中文編碼表示 meta charset <meta http-equiv="X-UA-Compatible" content="IE=edge">這一段主要是用到控制 IE 相容模式，可以用此 ...

大家好，我是 Vic，目前已經寫到鐵人賽的最後一天，過程中受到很多好人的幫助指點，讓我獲得了不放棄的勇氣，今年的鐵人賽無論結果如何，我覺得至少我自己已經做到了堅持，而這不是單單靠我一個人就辦得到，是遇到了一堆好人後最終產生的結果，所以在開頭想感謝所有幫助過我的人事物。 感謝好想工作室的這個環境，感謝給我建議跟指點的每個朋友，也感謝團體賽中每個夥伴的互相包容，因為雖然當了團長，但我其實連自己都顧不太來，所以很多時候沒時間去關心其他人的進度，能夠順利平安結束真的是太好了。 這次的鐵人賽文章會同步發佈於: 我的部落格 接著就進入最後一次的序言時間。 預想與實際我是一個不囤稿派的。 我的想法是鐵人的精神就是要藉由每天迫使自己的產出，排除萬難來達成挑戰，藉此來磨練自身意志力，培養出持之以恆的習慣，若是通通都先寫好了，不過就只是一個無情的發文機器人，每天時間到就發，發完就去做其他事情，磨練在哪裡，鐵人精神又在哪裡，所以我都沒有準備文章。 只有一個念頭是，我應該從困難的開始寫，我有注意到之前鐵人賽其他參加者的狀況，很多半途而廢的人，蠻多有一個共同點，都是從簡單的開始寫，寫到後面開始越寫越難，最終很多 ...

解構賦值是 es6 之後出來的一個新語法，我的理解它是一種語法糖，語法糖意思也就是說它可以用更簡單的方式達到相同的效果。 至於它究竟解構了什麼？其實就是陣列或是物件裡面的值，原本我們假如要取出陣列跟物件裡面的值，可能會這樣來寫： 123456789101112// 陣列的情況const goodNum = [10, 20, 30, 40];// 我想要取出裡面的數字，各個分別取出來const one = goodNum[0];const two = goodNum[1];const three = goodNum[2];const four = goodNum[3];console.log(one, two, three, four); // 10 20 30 40 123456789101112// 物件的情況const goodFruit = { name: "西瓜", color: "green",};// 我希望把個別key內中的value給取出來const name = goodFruit.name;const ...