Skip to main content

Tedshd's Dev note

中華電信設定固定 IP

# 中華電信設定固定 IP 中華可以申請一組固定 IP 來使用 有時候都忘記要怎麼處理 紀錄一下 去中華電信網站申請 HiNet非固定制固定IP申請 或是 Google 搜尋 中華固定ip申請 登入中華電信網站 -> 寬頻 -> HiNet非固定制固定IP申請 會顯示固定 IP router 設定 PPPOE 連線 ## 說明 中華電信有可能維護或是調整會導致固定 IP 變換, 但都會寄信通知, 留意信箱就可以了 中華電信設定 PPPOE 連線是 <用戶號碼>@hinet.net 設定固定 IP 的話是要用 <用戶號碼>@ip.hinet.net 因為家裡有兩台 wifi router 所以一台設定非固定 IP 設定 <用戶號碼>@hinet.net 固定 IP 設定 <用戶號碼>@ip.hinet.net ...

在 cloud functions 或是 firebase functions 處理 nodejs 使用 import 的方式

# Intro 現在在使用 nodejs 時可以使用副檔名 .mjs 的方式和 package.js 添加 "type": "module" 來使用 import 來取代 require 關於這件事也是因為有許多歷史因素無法完全取代掉 require 但是如果我們想要在 cloud functions 或是 firebase functions 使用時就沒那麼順利 因為光是要使用 .mjs 就是個問題 但是參考下面的文章後發現有取巧的方式 refer - ES6+ in Cloud Functions for Firebase #2 # Solution 先說結論 其實就是先用 babel build 完 code 最後把 build 完的 code 部署到 functions 上面 以 firebase functions 專案的例子 我自己的做法是 多建立一個 src 的目錄來當成再開發的 code 在部署前 build 到 functions 的目錄 package.json 添加 "scripts": { "build": "babel src --out-dir functions" } npm run build ...

MySQL export import 紀錄

# Intro 紀錄一下 MySQL 匯出與匯入資料的一些情況 # 匯出 mysqldump --column-statistics=0 -u <user> -h <host> -P 3306 -p <database> > output_file.sql --column-statistics=0 忽略掉一些匯出時的一些資訊, 節省容量 匯出資料庫中個別的 table mysqldump --column-statistics=0 -u <user> -h <host> -P 3306 -p <database> <table> > output_file.sql # 匯入 mysql -u <user> -h <host> -P 3306 -p <database> < ./file.sql 如果要忽略一些錯誤並強制執行可以添加 -f mysql -f -u <user> -h <host> -P 3306 -p <database> < ./file.sql # troubleshooting # 如果遇到有 table 的欄位是使用 binary 的形式像是 point 匯出時在匯入會出現格式錯誤 如果欄位中有以 point 的型態儲存經緯度數據 ...

使用 golang migrate 安裝紀錄

# Intro 在使用 golang 的情境下, 有一個很常用的 migration 工具 golang-migrate 但是在不同系統下安裝我覺得不太容易 所以記錄一下 # Install github 上有提供不同作業系統的安裝方式 cmd/migrate 目前測試 Mac / Ubuntu 有成功 Mac OS X 使用 homebrew 安裝 brew install golang-migrate 在 mac 上面安裝是蠻容易的 Ubuntu 20.04 在 ubuntu 遇到許多權限的問題 github 上面的 *.deb 安裝需要調整指令 curl -L https://packagecloud.io/golang-migrate/migrate/gpgkey | sudo apt-key add - sudo sh -c 'echo "deb https://packagecloud.io/golang-migrate/migrate/ubuntu/ $(lsb_release -sc) main" > /etc/apt/sources.list.d/migrate.list' sudo apt-get update sudo apt-get install -y migrate # Usage 要連接的 DB 的格式 ...

Firebase dynamic links 遷移轉換

# Intro 服務終有停止的一天 firebase 動態連結將於 2025 年 8 月 25 日關閉。 所以要提前做遷移轉換或是找其他替代方案 # Firebase 建議 可以參考 Firebase 文件的建議自己搞 從動態鏈接遷移到應用程式連結和應用程式鏈接通用連結 自己搞的好處是能搞成符合自己需求的東西 但是最大的麻煩點是要記錄的話就得自己搞數據 很多時候都會需要紀錄點擊轉換 這就得自己搞了 # 第三方服務 其實除了自己搞以外 還有很多第三方服務有在做這個東西 目前有找到的有 ## Branch io https://www.branch.io/what-is-deep-linking/ branch io 還有個教學文 How to migrate from Firebase Dynamic Links ## Appsflyer https://www.appsflyer.com/products/customer-experience-deep-linking/ ## kochava https://www.kochava.com/product/deep-linking/links/?int-link=menu-links 上面列出來的是比較常見的幾個 應該還有其他服務沒有列出來 這個就評估下要用哪個服務 ...

JavaScript 確認頁面有沒有縮放

# 前言 不管在 mobile 還是 desktop 都有個困擾就是要處理用戶縮放頁面的問題 如果只是資料類型的頁面, 縮放的話大多都只是畫面 UI 跑版 但如果是複合功能型的頁面, 縮放的話大概率會讓功能壞掉 就得找一些方法處理 # 確認可行性 JavaScript 有一個 api window.devicePixelRatio 是顯示畫面解析度比率的 早期可以用這個是不是 1 來判斷 但是螢幕的解析度其實會影響這個值 所以這個 api 沒有辦法當作判斷的基準 resize 事件可以在頁面縮放時會觸發 搭配 window.outerWidth/window.innerWidth 的值的變化可以知道有沒有縮放 但是這在 mobile device 的兩指縮放是不會觸發 所以也沒用… 但是針對 mobile 兩指縮放 可以使用 window.visualViewport window.visualViewport.scale 可以知道現在縮放比例 如果只是要判斷有沒有所放的話 可以使用 resize 事件 + mobile 判斷來拿取 window.visualViewport.scale 或是 let zoom = window.outerWidth/window.innerWidth; 的組合來處理 sample code let zoom = window.outerWidth / window.innerWidth; function isMobileDevice() { return /Mobi/i. ...

CSS 處理多行省略

.multiline-ellipsis { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; /* start showing ellipsis when 3rd line is reached */ white-space: pre-wrap; /* let the text wrap preserving spaces */ } refer - Easiest Way to Truncate Text With Ellipsis in CSS ...

Angular build custom element

# Intro 當使用 Angular 時, 有時會有需要自己建立一個自定義的元素 通常這個都是為了重複使用 這時會有兩種作法 自己建立一個元件, 再把這元件處理成 module, 這樣就可以有自定義元素了 使用 angular create lib 的方式(https://angular.io/guide/creating-libraries) 如果是在公司內部自己使用, 用 1 或是 2 都沒差 如果是要做成給外部或是別人使用, 甚至是開源出去, 那就是得用 2 順帶一提如果要使用自己定義的元素, 需要安裝 @angular/elements yarn add @angular/elements # 自己建立元件 這邊會用 custom-element 當成元件名字舉例 ng generate component custom-element 建立起一個 custom-element 元件 之後就是依照寫元件的方式開發 只是得自己手動處理一下在 custom-element/custom-element.module.ts 得添加和輸出與建立自定義元素的設定 import { createCustomElement } from '@angular/elements'; import { createCustomElement } from '@angular/elements'; import { NgModule, Injector } from '@angular/core'; import { CustomElementComponent } from '. ...

解決 Mac 外接硬碟讀不到 / 沒有顯示

# Intro 有時 Mac 會讀不到外接硬碟 可以試試以下方式解決問題 # 重新開機 可能一些未知的因素導致當下讀取不到 可以重新開機後再重新連接外接硬碟 # 啟用外接硬碟的可見性 如果你的電腦系統為在 macOS Big Sur 或 Catalina,那你就需要啟用外接硬碟的可見性。你可以根據以下步驟進行操作。 前往「Finder」>「偏好設定」>「一般」。 此時,你可以看到「在桌面上顯示這些項目」的欄位,勾選「硬碟」和「外接硬碟」的選項。 # 檢查系統資訊中的外部硬碟驅動程式 系統資訊 將會顯示所有連接至Mac的外部裝置、軟體、硬體和網路等所有訊息的地方。因此,你可以先在該位置進行檢測。 前往「應用程式」>「工具程式」>「系統資訊」。 在左側欄位點選「USB」,然後查看外接硬碟的資訊。 如果你可以看見相關資訊,Mac 卻無法顯示外接硬碟,那它可能正在被 macOS 修復。你可以前往「活動監視器」,以檢查是否有「fsck_hfs」或「fsck_exfat」的活動。 # 運行「Apple診斷」以檢測硬體問題 Mac 電腦擁有一套內建的診斷程式「Apple診斷」,以讓你查找故障的硬體問題。修復損壞的硬體也有可能解決Mac讀不到外接硬碟的情況。 拔除所有外接裝置,除了鍵盤、滑鼠等有用的裝置。 重啟Mac,並在電腦啟動時按住鍵盤的「D」鍵,直到看到選擇語言的視窗才放手。 接著,系統就會開始診斷動作,而你也會在介面看到進度列。 完成診斷後,你就會看到電腦所面對的硬體問題以及相對的解決方案。 # 重置 Mac 的 NVRAM 或 PRAM NVRAM 和 PRAM 是 Mac 電腦中的部分暫存。不管開機或關機,它都會保存特定數據。 如果你的Mac無法讀取外接硬碟是基於硬體受損,那你也可以嘗試使用這個方法解決。 重啟 Mac,然後在電腦啟動時同時按住「control + option + P + R」鍵。 按住這些按鍵長達大約 20 秒,直到你聽到電腦重啟的音效,或是看到蘋果標誌出現並消失後才放手。 # 重置 Mac SMC SMC(System Management Controller)負責演算 Mac 的低階功能,因此如果重置 NVRAM或 PRAM 仍無法解決 Mac 外接硬碟無法顯示的問題,那你也可以嘗試重置 SMC。 ...