# 前言 因為公司有使用部分的 firebase 服務
那就順便用一下前一陣子推出的 app check 的服務(雖然我覺得這服務還沒到完善的地步)
這服務主要是要協助驗證來自 client 的請求是否合法
不只單純是 firebase 的服務可以用
一般 API 也可以使用
# 使用 目前 SDK 只支持 Node.js
Verify App Check tokens from a custom backend
因為原本的後端不是 Node 的環境
所以使用 Node.js 建立起一個 middleware 以便讓原有的 API server 來串接
# 流程 # 所需作業 app 需要使用相關對應的 SDK
在 firebase console 把 app check 選單中建立的 app 做註冊
因為是改為單獨建立 Node.js 的服務
所以會針對文件範例做調整
const http = require('http'); const url = require('url'); var admin = require('firebase-admin'); var serviceAccount = require(__dirname + '/serviceAccountKey.
...
Sometimes a dynamic link is accidentally archived.
But doesn’t have any option show archived dynamic link list.
BTW
You have a way to unarchived this dynamic link.
# Use POST API update this dynamic link Find your filebase console auth data You can edit dynamic link data and then catch request when save it.
Find this request https://firebasedurablelinks-pa.clients6.google.com/v1/updateDurableLink?alt=json&key=<YOUR KEY> and copy header
Build POST data curl --location --request POST 'https://firebasedurablelinks-pa.clients6.google.com/v1/updateDurableLink?alt=json&key=<YOUR KEY>' \ --header 'Authorization: <YOUR Authorization>' \ --header 'Origin: https://console.
...
最近因為需求要接手 Windows Server 進行維護與開發
因為只有在很久以前幫別人處理 IIS Server 一點經驗
時間也非常久了
所以筆記一下這次的處理過程
這次處理的 server 版本是 Windows Server 2019
# SSH on GCP Compute Engine 如果是建置在 Google Cloud 的 Compute Engine 上的話
就參考文件 Getting started with OpenSSH on Windows Compute Engine instances 就可以了
# 前置作業 之前似乎是採用 remote desktop 的方式
這對習慣命令列操作的人來說會有點不習慣
而且交接程式碼和檔案都放在那台機器上
所以為了之後方便操作, 首先就要安裝 OpenSSH
## 安裝 OpenSSH server 因為 SSH 會有 server 和 client 的部分
因為是需要連進去 Windows Server
所以只需要處理 OpenSSH server 的部分
Refer - 安裝 OpenSSH
...
# Intro 在 JavaScript 中的日期時間是個當初沒有定義出良好設計的東西
這裡先舉幾個常見的問題
日期格式問題 日期呈現的語系問題 時區問題 12 小時 24 小時問題 … 以原生的 API 在處理日期時間大多得自己額外做許多事情或是套用一些第三方 libary 來協助達成目的
# 時區問題 這次主要是討論關於時區的問題
在早期只能用 getTimezoneOffset() 的方法搭配時區表去換算各地時區
現在倒是可以使用 Intl.DateTimeFormat
refer - Date.prototype.getTimezoneOffset()
refer - Intl.DateTimeFormat
其實上述的問題, 在使用 Intl.DateTimeFormat 基本上都可以解決掉
詳細方式可以參以下文件
refer - Intl.DateTimeFormat() constructor
在時區中又有一個常常被忽視的的問題就是夏令時間(daylight savings time) 這個在夏季時就得把時間提前一小時的問題
如果自己處理時區就得記得處理這問題
使用 Intl.DateTimeFormat 的話系統已經自動處理了
# Intl.DateTimeFormat 這邊簡單介紹一下 Intl.DateTimeFormat 的一些用法與注意事項
new Intl.DateTimeFormat(navigator.language, { timeZone: 'America/Los_Angeles', dateStyle: 'full', timeStyle: 'full' }).format(new Date()) 這個範例就表示了當前洛杉磯的時間
第一個參數是語系, 採用 BCP 47 標準, 基本上建議使用 navigator.
...
# 前言 距離上次使用 YouTube Player API 已經是 2014 年的事了
不知不覺也過了超久了
剛好最近公司有相關的需求需要在 App 中能夠播放 YouTube 的影片
原本想說 App 應該和我沒關係了
所以這次準備躺平(誤
結果還是被牽扯進來了…
# 2022 年當前如何使用 YouTube player SDK 沒想到不看還好, 一看就準備 GG
一開始把文件丟給 Android 和 iOS
Android 那邊說無法用
我當下????
文件都寫得好好的, 為何說無法用
和 Android 一起討論了一下, 才確認了一件事
原來 Android 為了統一 libary, 在 2018 年開始推行 Androidx 要取代 android.support
最大的改變是 namespace 的變動, 雖然官方有工具可以對第三方 lib 做轉換, 但也會是一個大換血, 而且對比較老舊的套件還會需要處理 activity 和 fragment 的處理, 因為現今大多的 Android 都以 fragment 實作 UI 了
...
最近添加了一個小功能要來測試成效
就是因為 PM 有看到一些服務的連結在 iOS Messages 上呈現並非常見的圖片而是影片
PM 說好像是 iOS 15 以上支援(我自己是沒找到相關的資料證明這件事)
不過應該沒支援的話就呈現圖片
查了一下文件, 其實也不難
基本上就是定義 open graph
多定義
<meta property="og:video" content="http://www.example.com/sample.mp4" /> <meta property="og:video:type" content="video/mp4" /> <meta property="og:video:width" content="1280" /> <meta property="og:video:height" content="720" /> 這邊有個要注意的點是
原來是產出 1:1 的影片, 但發現會上下截掉
所以最後採用 16:9 的比例
# demo Your browser does not support the video tag. Refer - Best Practices for Link Previews in Messages
...
mobile web 會在點擊 a link 的時候 highlight 那個部分
原意是為了讓使用者更能夠直觀地知道是否有點擊了那個東西
但是有時這個樣式會和整體 web 的設計不合
所以會想辦法改變或關掉這個 highlight
那就得使用一個 CSS 屬性 -webkit-tap-highlight-color
如果要關掉, 那就改成透明的
-webkit-tap-highlight-color: transparent; 如果要改成別的顏色就設定顏色即可
-webkit-tap-highlight-color: red; -webkit-tap-highlight-color MDN
...
# 前言 現在在開發與線上環境常常會遇到不同 CPU 架構的問題
不同 CPU 架構底層的指令集也不一樣
最常見的影響就是在其中一個平台編譯出來的程式會無法在另一個平台執行
這情況尤其是會在接近底層的程式上見到
現在普遍來說會發現在 ARM 架構底下有些程式執行起來效率更高
所以有部分公司的服務也會在線上環境的機器選用 ARM 架構的機器
# 情境 雖然以前公司的情況是開發在 x86-64 上
線上是 ARM 的情況
但現在自己在試驗的情況是反過來的 XD
現在 Macbook 是 M1 晶片了, M 系列是 ARM 架構
我在 GCP 開的機器是 x86-64 架構
所以在 Mac 上面 build 的 docker image 是沒法在 GCP 開的機器運行
只要執行 docker run 就會出現錯誤提示說架構不同無法執行
# 解決方案 docker 有提供可以建構不同平台的 image 的指令
只要多一個 buildx 和 --platform 的指令與參數
docker buildx build --platform=linux/amd64,linux/arm64 .
...
# 前言 最近注意到 Safari 設定 100vh
在未滿內容的情況還是出現滑動的卷軸
這導致了體驗不佳
研究了一下發現是因為在 Safari 上有 url bar 的關係(iOS 15 以下還有 function bar)
100vh 的大小其實是這些 bar 隱藏時的大小(iOS Safari 滑動時這些 bar 會隱藏起來)
這邊試了幾種方式
# 改成 100% 可以改成用 100% 來取代 100vh
不過這得依情況來使用
# 使用 -webkit-fill-available -webkit-fill-available 目前只有 iOS 支援
所以可以用 useragent 來處理樣式來對應使用這個 CSS 屬性
範例
# 結論 我自己測試了一下會偏好使用 100%
個人會希望能夠簡單處理方式就用簡單的方式處理
...
# Usage docker hub
In Apple M1
no-official image
amd64/mysql
MySQL 5.7
docker pull amd64/mysql:5.7 # Run docker in local Sample for M1(different of image name)
docker run --name mysql -p 3306:3306 -e MYSQL_ROOT_PASSWORD=password -d amd64/mysql:latest Container run in 0.0.0.0
mysql --default-character-set=utf8mb4 -u root -h 0.0.0.0 -P 3306 -p -A
...