【JS】Fetch 使用方式
前陣子，同事需要做一個能在Url判斷是否能連上或是存在的網址，才進行轉頁面。因此我們直接來實作有幾種方式可以知道已存在網址或是不存在。
遠端資料方法JavaScript 中可以使用 XMLHttpRequest 的方法。
XMLHttpRequestJavaScript 沒有jquery 使用，會如同下方處理方式。 針對[url]變數舉得網址，load中會取得status方式，算是很久的寫法。
備註 : (這部分可以寫成 ajax 方式，如果遇到 CORS 之後章節會在細說。)
123456789let url = 'https://randomuser.me/api/';var req = new XMLHttpRequest();req.open('get', url, false);req.onload = function () { let $div = document.querySelector('#response-result'); $div.textContent += 'DONE ...
Github Pages (一) - SEO 搜尋引擎
Blog 目前已經經營快要過完半年，近期發現Google 搜尋引擎找不到我的Blog，原本以為Github Pages 會加入在搜尋引擎當中，測試下來結論是沒有出現。目前想到原因是 SEO 無法辨認出網站，於是，目前得知每個Browser會有搜尋引擎運算，如果沒有出現可能要留意了。
Google Search ConsoleGoogle Search Console 是 Google 提供監控、維持網站在 Google 搜尋結果中的排名，並排解相關問題。網站上未申請 Search Console 還是有機會在Google 排名當中，如果要改善SEO 就需要使用。
hexo-generator-sitemap這個Plugin 是為了產生 Sitemap.xml 使用，需要加入在_config.yml設定檔。
123sitemap path: - sitemap.xml
sitemap 網站地圖Google Search 搜尋引擎有兩種模式。第一種搜尋引擎自己抓取、第二種使用Sitemap 讓搜尋引擎提早發現哪些頁面是被收錄。Sitemap 主要用意是收錄、存取Google引擎當 ...
Github Pages (二) - Google Search Console
使用 Google Search ConsoleGoogle Search Console 近期有新增[網域]資源類型，因為我們是使用 Github Pages 所以要使用 [網址前置字元] 來設定 。
驗證擁有權部分只需要將它提供的載點放入網在中即可。
Sitemap上一篇有簡單帶過 Sitemap 使用方式。這邊初始使用時候會使用上 XML Sitemap Online，可以快速鍵至到 Github 到上面。接下來，放置root底下路徑並等待Github Pages 上去到頁面當中。
以上準備完成就只要加入剛才的 sitemap.xml 即可。
網址審查網址審查功能主要是單頁驗證，意思是sitemap 是讓所有網站可以被 Google 搜尋得到，如果沒有編入索引內容當中是沒辦法查詢到這個內容，這裡可以使用[網址審查]排除這問題。
網址審查部分比較特別地方，需要由 Google 判定這個網址是否符合網址規範才會加入成功，第一次驗證可能需要等到明天才會達到效果。
結論Google Search Console 有這兩種功能可以快速加入到Google Search 裡面，如果使用[網址 ...
【JS】 JS 中 .min.js 和.js 檔案的區別
JS 中 .min.js 和.js 檔案的區別一、.js和.min.js檔案分別是什麼.js是JavaScript 原始碼檔案， .min.js是壓縮版的js檔案。.min.js檔案經過壓縮，相對編譯前的js檔案體積較小，傳輸效率快。 防止窺視和竊取原始碼 經過編碼將變數和函式原命名改為毫無意義的命名，以防止他人窺視和竊取 js 原始碼
二、 .js 和.min.js檔案的優缺點
TYPE
優點
缺點
.js
可讀性較好，易於debug和更改
體積較大，傳輸時間長
.min.js
體積較小傳輸快, 原始碼防竊
可讀性差
三、 壓縮原理壓縮：刪除 js 程式碼中所有註釋、跳格符號、換行符號及無用的空格，從而壓縮 JS 檔案大小。混淆：經過編碼將變數和函式原命名改為毫無意義的命名，刪除無用程式碼，行內函數，等價語句替換等(以防止他人窺視和竊取原始碼)
【HTML】套件-簡易操作 IntroJs、DriverJs
前言近期整理一些文章，看到還有指引套件部分忘記處理，這邊大概簡述兩個比較常見的套件。以兩種套件來說各有好壞，使用指引套件必須要留意Css可能遇到z-index順序問題，如果是DriverJs部分可能需要注意css方面比較多一些…。
github 範例
[前端軍火庫]Intro.js - 把建好的UI直接變成說明文件
IntroJsIntroJs 是用在 html mark當中，設定上相當簡單、快速 。IntroJs 如果是商業用途可能要索取費用。
安裝
Github : git clone https://github.com/usablica/intro.js.git
npm : npm install intro.js --save
yarn : yarn add intro.js
使用方式依據IntroJs 使用方式，需要設定幾點。
順序 : data-step
內容 : data-intro
提示 : data-hint (必須要配合 introJs().addHints();處理。)
此套件會依據 step 順序呈現下一步提示，如果要使用”提示點”表示，可以使用 ...
【HTML】-何謂 robots.txt
前言許多前端工程師都有相關rebots使用經驗，為了增加 SEO 通常會使用robots，讓使用者可以快速查自己的網站，robots.txt 可以從各樣的網站可以看到。本篇會簡述rebots ，若需要細項說明可以請至下方點選查詢。
robots 簡介robots 是主要功用哪個頁面可以檢索、索引。使用方面會直接影響 SEO 。
何謂 SEO 搜尋引擎最佳化SEO(Search Engine Optimization)，透過搜尋引擎運作規則調整網站，提高網站相關搜尋引擎排名。搜尋引擎針對檢索(Crawl)、索引(Index)的網站資訊，進行演算法排序提供使用者查詢。
robots 使用方式robots 只需要使用 txt 撰寫，必須要留意要使用UTF-8編碼的文字檔。設定方式預設允許所有搜尋引擎檢索所有內容，有兩種做法。
不填入disallow內容12User-agent: *Disallow:
allow 使用 /符號/ : root 根目錄，在這可以解釋從root開始都允許檢索所有檔案。
12User-agent: *Allow: /
檢測方式如果你要查詢網站是 ...
【HTML】-滾動條 Scrollbar
前言近期遇到很多UI介面 scrollbar 都不同樣式或是將 scrollbar 用消失減少版面佔住的機會。可以參考下方滾動條樣式，我再慢慢展示出效果來。
如何讓scrollbar出現第一次用網頁常常遇到 scrollbar 不知道怎樣叫出來，反而不斷跑版。網頁有分父(容器)層跟子(容器)層，當子層超過父層時候，可以使用 overflow。
以下範例 :
123456<body> <div class="container"> <div class="block-1"></div> <div class="block-2"></div> </div></body>
1234567891011121314151617.container{ width: 400px; height: 200px; margin-left: auto; margin-right: ...
【HTML】-Enter Key Hint
前言最近看到有一篇有關EnterKeyHint文章，整個手癢跑去玩玩看，官方說明這方式是針對虛擬鍵盤才會出現的效果，如下面表格:
Keyword
Description
enter
The user agent should present a cue for the operation ‘enter’, typically inserting a new line.
done
The user agent should present a cue for the operation ‘done’, typically meaning there is nothing more to input and the input method editor (IME) will be closed.
go
The user agent should present a cue for the operation ‘go’, typically meaning to take the user to the target of the text they typed.
...
![[Github Pages] 如何建立多個專案網站](/image/20250315_20-53-42.png)
![[Benchmarks] Database Connect 效能差異](/image/20250318_23-37-06.png)