Vic's blog

瀏覽器本身是可以儲存資料的，方法不只一種，目前我知道有以下這些方法： Cookies localStorage, sessionStorage indexedDB 其中indexedDB沒有去詳細理解內部實作細節，因為使用到的情境似乎很少見，我自己從來沒用到過，可能需要有龐大暫存的需求情境才有機會碰到，這個部分我只紀錄幾篇有關的技術文章： IndexedDB 前端如何緩存大筆資料：IndexedDB 介紹/應用 | Yass Tsai 【瀏覽器資料存取】IndexedDB 暫存機制的存在意義為什麼不把資料都存在伺服器端就好，資料為什麼得放在瀏覽器本身的儲存區？ 其實是有它的必要性，會有情境是把東西放在瀏覽器中比較好的狀況，而且放在瀏覽器的本地也有許多的好處。 首先，第一個比較直觀的好處是假如可以直接把資料就存在本地端，那就代表可以減少瀏覽器跟伺服器之間的數據運輸量，這樣可以減少從伺服器載入資源的速度，換句話說，這樣可以提升網站的載入速度，減少網站的等待時間。 然後存在本地端的話，也可以拿來做記錄用戶的行為，比如說登入了一個網站，要是沒有登出的話，下一次再進到這個...

之前用的主題沒有很喜歡，所以想要試試看其他的主題。 這次選擇的是 butterfly。 jerryc127/hexo-theme-butterfly: 🦋 A Hexo Theme: Butterfly 這個主題也是屬於比較熱門的，所以比較不用擔心發生一些沒人發現的錯誤，基本上越多人使用的話，會踩的雷，其他人已經都幫我踩過了。 會選擇這主題除了是熱門的之外，它整體的特效外觀也是我比較喜歡的，名字也聽著順耳(蝴蝶)，選擇好主題之後，就開始研究如何無痛轉換過去。 紀錄一些比較印象深的點。 使用 hexo g -d 失敗，沒辦法成功部署使用新的主題重新部署之後，專門部署的那個 github repo 就被重新清空重新開始，這是一開始我沒遇想到的，會這麼做主要是我想看看網站資料會不會繼承，結果看起來是不會的。 然後就部署時遇到了問題，如圖下： 後來去網路上找到這篇：(7 条消息) hexo d 命令报错 ERROR Deployer not found: git_蓝蓝 223 的博客-CSDN 博客 下這一串指令就好了 1npm install hexo-deployer-...

這篇主要是紀錄我是怎麼理解這些名詞的。 因為關於程式語言的部分，我目前只有寫過 JavaScript，所以對於其他程式語言比較沒辦法體悟，這篇會從我使用 JavaScript 的角度來去理解！ 在都還沒研究時，我其實就已經知道 JavaScript 分別是哪幾種，但還不明白差異： JavaScript => 動態語言 弱型別 靜態作用域 動態語言、靜態語言用一句話來解釋就是在執行的時候可以改變結構的是動態語言，如果不能的話那就是靜態語言了。 這塊需要釐清以及容易卡住的地方我覺得是「執行」和「編譯」的名詞。 假如今天是在 vscode 寫 code，使用的程式語言是動態語言，像是 JavaScript，執行的話我會理解成，我印出了一個值，比如說 console.log(x)，那要看到這個 x 是多少的話，就得對它做「執行」的動作，我才能知道我到底印出了多少，不管是在瀏覽器上，還是在 node.js 上，而我在寫 console.log(x)的時候，就是同時在做「編譯」這件事情，我在 vscode 寫程式碼的過程就是編譯時的過程。 理解了這塊之後，再來回頭看動態語...

mac 的內建截圖方式是按 shift+command+3 或是+4。 而在截圖的時候正常來說在右下都會有一個截完圖後的浮動視窗，可以在這個視窗再去做操作跟編輯，不喜歡可以直接刪掉。 而有一天截圖的時候就突然直接截完直接儲存在桌面，對我來說很不方便，我通常是截完圖後直接複製貼到 hackmd，如果沒有右下浮動視窗的功能，我就還得回到桌面去找哪一張截圖，實在是麻煩。 最後是研究要怎麼改變回來，雖然自己找花了一些時間，但其實蠻簡單的，在這邊紀錄一下： 按下 shift+command+5 看到這個框框就代表沒錯 點擊這個框框裡面「選項」 選擇裡面的“顯示浮動縮覽圖” 你會發現你截完圖後的浮動視窗回來了

這個部分算是網路的基礎，關於網路之間是如何傳遞資料的，背後的邏輯，我覺得很重要所以花了一些時間去研究，主要在這邊整理我理解的結果。 研究網頁前端的過程中，讓我發現一些盲點的事情，像是當我們輸入網址的時候按下了 enter 後，究竟是發生了什麼事情？ 當時我的腦袋覺得，只是我在客戶端發送了一個請求，然後在伺服器端接收了這個請求後，發送了回應回來，渲染出一個新的話，所以我這邊可以看到一個全新的畫面。 但是傳輸的過程沒有這麼簡單。 網路的層級 - OSI過去有一群人有發現說網路在傳送的過程中實在是做了太多的事情了，沒有整理起來的話其實大家都不太好懂，雜亂不堪是很難持續進步的，所以他們就一起把這些東西，也就是網路的部分做了標準化。 這些人把網路標準化後的部分，分成了七個層級，每一層都是負責不同的事情，包括了硬體和軟體在內的七個標準。 也就是所謂的 OSI，它是一個模型。全名是 System Interconnection Model。 有哪七個呢？ 如下圖 最上面是軟體，最下面是硬體的部分，而詳細這七層每一層在做什麼事情，我個人沒有去背，我覺得只要知道說最詳細嚴謹的層數有七層，然後它叫...

會學習 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 版本的方式就只能是用volt...

剛開始學習時常常搞混的地方，關於什麼時候屬於「回傳」什麼時候得「印出」常常傻傻搞不清楚，在這裡做個筆記紀錄一下，我自己研究完後的理解。 這部分要先知道所謂的「回傳」在 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 123456789...

在好想工作室中參與其他案子累積經驗時，過程中剛好碰到這個案主挑戰賽的活動，主要是給一些在好想工作室一些還在學習的學員讓他們有接案的經驗，可以參考這一篇：練功活動: 模擬案主!! - 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 而要怎麼檢查安...