2022年5月11日 星期三

[Chrome] input 輸入框自動填入時的背景顏色問題

webber0928 晚上7:47:00 , ,

 碰到的問題：

自動填入前


自動填入後


可以發現自動填入後背景變成白色。

解決方式：
input:-webkit-autofill {
    box-shadow: 0 0 0 1000px #373739 inset;
    -webkit-text-fill-color: #fff;
 }
繼續閱讀 >

2022年1月17日 星期一

自建論壇 - NodeBB 的安裝教學

webber0928 凌晨1:02:00 , , , ,

NodeBB 是一款由 Node.js 開發的、開源的、現代化的論壇程式，使用MongDB作為資料庫（也可以選擇 Redis，但不推薦）。

本教學將一步步演示，如何在Windows和Linux平台下，搭建 NodeBB 論壇程式。


Github: https://github.com/NodeBB/NodeBB/

安裝Node.js 和 MongoDB

因為NodeBB 使用Node.js開發，所以我們需要先安裝Node.js運行環境。

Node.js

Windows安裝
Node.js官網，下載 Windows 安裝包 (.msi)

Linux or Mac 安裝
這裡介紹使用nvm方式進行安裝，nvm 是 Node.js 版本管理工具，目的是方便對 Node.js 進行版本切換和升級

依次執行下面命令

# 下載並安裝nvm

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
source ~/.bashrc

# 通過nvm安裝最新版的Node.js

nvm install node 16.13.2

查詢Node版本，以驗證Node.js是否成功安裝。

node -v （輸出結果應該是：v16.13.2）

安裝MongoDB

NodeBB 默認選擇 MongoDB 作為資料庫。

Windows下安裝
MongoDB官網，下載Windows安裝包
詳細教學請看這邊

Linux - Ubuntu下安裝

wget -qO - https://www.mongodb.org/static/pgp/server-5.0.asc | sudo apt-key add -
echo "deb [ arch=amd64,arm64 ] https://repo.mongodb.org/apt/ubuntu focal/mongodb-org/5.0 multiverse" | sudo tee /etc/apt/sources.list.d/mongodb-org-5.0.list
sudo apt-get update
sudo apt-get install -y mongodb-org

查詢 MongoDB 版本，以驗證是否安裝成功

mongod --version
db version v5.0

安裝NodeBB

使用 git clone 下載 NodeBB 源碼

git clone -b v1.18.x https://github.com/NodeBB/NodeBB.git nodebb
cd nodebb

執行下面命令，開始安裝和配置。

./nodebb setup

安裝過程會要你輸入訪問地址，資料庫帳號密碼等配置，如果不清楚，使用默認的設置即可。之後會在項目根目錄生成名為 config.json 的配置文件，後續有變化你可以手動更改。

然後執行啟動

./nodebb start

最後用瀏覽器訪問 NodeBB，http://localhost:4567，看是否正常啟動。

線上的 Demo 網址
繼續閱讀 >

2022年1月6日 星期四

設定 S3 的 CORS 規則，並使用 FileSaver 取得圖片下載

webber0928 凌晨2:29:00 , ,

最近需要做一個功能，就是把上傳的圖片下載下來。

這簡單！我啪啪啪就寫好了，結果出現了....CORS 的問題，因為網址跟 s3 的網址是不同 Domain 的，上網搜尋一下，發現只要設定好 S3 的 CORS 就可以了。


主要設置為:

權限 -> 跨源资源共享(CORS)

[ { 
  "AllowedHeaders": [ "*" ], 
  "AllowedMethods": [ "GET", "HEAD" ], 
  "AllowedOrigins": [ "http://www.example.com" ], 
  "ExposeHeaders": [], 
  "MaxAgeSeconds": 3000 
} ]

因為我主要是取圖片，所以只要這樣設定便可以了。

另外推薦一個好的套件 「FileSaver」，使用程式碼如下

import { saveAs } from 'file-saver';
FileSaver.saveAs("https://httpbin.org/image", "image.jpg");

這個好處是，如果他碰到 CORS 問題，會另開新分頁顯示圖，最差就是讓使用者直接下載，也不用處理 CORS 問題。
繼續閱讀 >

2022年1月4日 星期二

在 M1 Mac pro 安裝 Windows 11 UTM 的虛擬機

webber0928 下午6:01:00 , , ,

最近朋友問我可不可以幫他在 M1 的電腦上面安裝 Windows，剛好我也很想聞看看新款的 M1，就二話不說地答應了！

搜尋了一下，發現大家都是用 Parallels Desktop 來安裝，但只有 15天試用期，想說就索性跟他申請一下經費來安裝安裝，然後我就又回去搜尋看看有沒有免費的辦法。(貪小便宜的人厚...)

後來找到一個叫 Keith 的安裝教學，也解決了我的困難，那就做個紀錄吧。

M1 Macbook Air 上執行的 Windows 11
M1 Macbook Air 上執行的 Windows 11

簡單步驟如下

  1. 下載 Windows 11 ARM Inside Preview
  2. 安裝 QEMU 
  3. 轉換 Window 11 為 qcow2 格式
  4. MacOS 安裝 UTM
  5. 設定 Windows 11 配置虛擬機
    1.  8 核 CPU ARM64
    2. 4GB RAM
    3. 80GB 類型 NVMe 的 HDD
  6. 啟動 Windows 11 VM
    1.  將 BIOS 中的顯示更改為 1074x768
    2. 安裝 Windows 11
    3. 安裝 Spice 工具 (網路連線用)
  7. 切換Windows 11介面語系為中文
  8. 停用Windows 11更新 (看個人)


詳細步驟說明

下載 ARM

您需要成為 Microsoft Insider Program 的成員，該計劃可以免費加入。

VHDX 文件。他只在 Hyper-V 上運行，但我們可以轉換此映像，讓 windows 可以在 UTM 上執行。

安裝 QEMU

使用 Homebrew安裝 QEMU — 需要安裝 QEMU 方便我們轉換 Windows 11 的映像格式。
如果您安裝了 Homebrew，則跳到最後一點，但如果沒有，則這些是您需要遵循的步驟：

1. 在終端運行中

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

2. 這將安裝 Homebrew 但你需要運行兩個額外的命令

echo 'eval $(/opt/homebrew/bin/brew shellenv)' >> /Users/$USER/.zprofile
eval $(/opt/homebrew/bin/brew shellenv)

3. 現在將安裝 Homebrew，您可以從終端安裝 QEMU

brew install qemu

轉換成 qcow2

為了使來自 Microsoft 的 VHDX 圖像與 UTM 兼容，我們需要轉換格式。我們使用之前安裝的 QEMU。從終端執行以下命令：

qemu-img convert -p -O qcow2 /Users/keith/Virtual\ Machines/Windows10_InsiderPreview_Client_ARM64_en-us_21354.VHDX /users/keith/Virtual\ Machines/Windows10_21354.qcow2

安裝 UTM

安裝 MTU從 https://mac.getutm.app/ 獲取最新版本的 MTU 。UTM 是一個基於開源平台 QEMU 的免費虛擬化平台。這基本上是一個基於 GUI 的 QEMU 版本。

UTM 驅動程序

我們需要在 Windows 11 中安裝 UTM 的驅動程序，以允許 Windows 11 訪問 Mac 網路連接器。

下載 Spice 工具：https://mac.getutm.app/support/

建立 Windows 11 虛擬機

在 UTM 中創建一個名為 Windows 11 的虛擬機並設定下面的設置。

System


架構：ARM64 (aarch64)
系統：QEMU 5.2 ARM Virtual Machine (virt-5.2)
內存：8192MB

勾選 Show Advanced Settings
CPU：默認
CPU Cores：8

勾選 Force Mutlicore

Drives


Import Drive → 選擇 Windows 11 qcow2 鏡像
interface：NVMe

New Drive → 勾選 Removable Drive

Information

CD 放入 Spice 的 iso 檔案

UTM小技巧

Control + Option 使您退出虛擬機

F2 進入 BISO


選擇Device Manager → OVMF Platform Configuration
更改為 1024x768，然後選擇 commit 並退出

按ESC退出BIOS

進入安裝流程


切換Windows 11介面語系為中文

1. 點選「開始」按鈕圖示 -> 「Settings」-> 「Time & Language」

將Time zone變更為「(UTC+08:00)Taipei」




2. 點選「開始」按鈕圖示 -> 「Settings」-> 「Date & time」

將 Country or region 設定為「Taiwan」
將 Regional Format 設定為「Chinese(Traditional, Taiwan)」



2. 點選「開始」按鈕圖示 -> 「Settings」-> 「Language」

在 Preferred languages 點選「Add a languages」


選擇「中文(台灣)」，接著點選「install」開始下載及安裝語系


調整優先的順位，點選「↑」方向按鈕

點選 Options 來 Download 語系的 Language pck


Windows display language 選項中，變更為「中文(台灣)」，並點選「No, sign out later」


重新開機後，再次登入就可以看到一個中文介面的Windows 11了。

停用Windows 11更新


  1. 按下「Win+R」鍵開啟執行視窗。
  2. 透過輸入services.msc並按下Enter鍵以開啟服務視窗。
  3. 在「服務」列表中找到並選擇「Windows Update」選項，然後點擊「停止」按鈕。
  4. 在「一般」選項卡，將「啟動類型」變更為「已停用」。

有任何疑問歡迎提問，以上是我的安裝紀錄，謝謝。
繼續閱讀 >

2021年12月16日 星期四

[Linux] Vue 部署流程

webber0928 凌晨12:19:00 , ,

最近要部署一台新的 Server, 想說這次把它做一個紀錄好了

Server: Ubuntu 20.04.3 LTS




就這樣。
繼續閱讀 >

2021年12月8日 星期三

[JS]注音輸入法要怎麼做自動完成呢！

webber0928 凌晨2:34:00 , , , , ,

如上圖，在輸入中文的時候，通常會需要透過注音之類的輸入法來做拼字。通常 autocomplete 的套件沒有去處理輸入法拼字的問題，畢竟他們打英文不需要多一個注音拼字的動作嘛！

那這個時候要怎麼樣才能做到像 Google 搜尋一樣呢？
其實就是在拼字的時候，就把打在輸入框上面的資料丟出去即可。

Composition Event (組成事件):

透過 Composition Events 我們可以觀察使用者在輸入框內開啟輸入法 (Input Method Editor, IME) 時，組字或選字的狀態。
  • compositionstart：輸入框內開啟輸入法，且正在拼字時觸發。
  • compositionend：輸入框內開啟輸入法，且正在拼字或選字時更改了內容時觸發。
  • compositionupdate：輸入框內開啟輸入法，拼字或選字完成，正要送出至輸入框時觸發。
所以要確認使用者輸入完成並送出文字時，就可以透過 compositionend 來做最後確認。

因為我是用 Vue 來寫，所以會用 Vue 的範例，如下
mounted() {
    let isInputZh = false
    const searchInput = this.$refs.Input.$el.children[0]

    searchInput.addEventListener('compositionstart', function(e) {
      isInputZh = true
    }, false)

    searchInput.addEventListener('compositionupdate', function(e) {
      isInputZh = false
    }, false)

    searchInput.addEventListener('compositionend', function(e) {
      isInputZh = false
    }, false)

    searchInput.addEventListener('input', function(e) {
      if (isInputZh) return
      remoteApiMethod(this.value)
    }, false)
}

用這種方式就可以在輸入法尚未結束的時候丟資料去 API 取資料嘍～
繼續閱讀 >

2021年12月1日 星期三

如何建立谷歌部落格(google blogger)

webber0928 晚上10:52:00 , ,
有自己的地方就是爽，我要當王！！

最近突然想要建立一個屬於自己的部落格，參考了一些網路文章以後，最後還是決定使用這個 google blogger。

為什麼要選擇Blogger呢？
  1. 免費
  2. 圖庫問題：可以串連Google相片
  3. 數據：有自帶數據統計的功能
  4. 賺錢：未來流量起來可以賺錢
  5. 手機：我覺得手機可以讓你想到什麼就加入草稿，畢竟靈感不是說來就來

基於以上的好處，我就決定是這裡了。
簡單地按完建立以後，重點是要怎麼改成自己喜歡的樣子呢？！

登愣～

Google Blogger Theme: https://gooyaabitemplates.com/

請根據以下步驟處理：
  1. 選擇一個你想要的外觀，並下載 Blogger 模板。
  2. 解壓縮並取出 xml 檔案
  3. 選擇左側列表中的 主題，並且按下還原，上傳你的 xml 檔案
搞定了！就像我現在的部落格這樣。

最後還有一個步驟要做，因為成果如下

你的網頁

你的網頁
他的網頁

他的網頁

....?

所以請去 版面配置 去調整細微的部分



希望大家都可以調整成喜歡的樣子！
繼續閱讀 >
訂閱： 文章 (Atom)

Coprights @ 2016, Blogger Templates Designed By Templateism | Distributed By Gooyaabi Templates