用蘋果捷徑更新貓咪體重到Google試算表

以往在記錄家裡的貓咪體重時,都是打開Google試算表,切換到要記錄的貓咪的工作表,然後拉到整張表的最下面輸入當天日期跟體重。雖然步驟有點多,但因為不是經常性的在記錄,感覺上也沒那麼麻煩。不過自從家裡有腎貓,需要每天監控體重時,這個操作步驟實在有點繁雜。

今天要介紹一個我已經使用很久的方法——用蘋果的捷徑功能,搭配Google文件的Apps Script來記錄到Google試算表。

優點

好處是「不需安裝任何APP、完全免費、不怕個資外流」且蘋果捷徑在iPhone或MacOS上都可以執行,也很方便共享,不論手邊的裝置是什麼,都可以立刻執行。

Google文件的Apps Script就像是每一份Google文件的API。你可以自行編寫API的內容,就像寫JavaScript一樣,讓此API能根據你的程式碼來工作。

開工拉

首先先開一個新的Google試算表,因為我們要做的是可以支援多貓家庭的情況,所以我們先建立好每一隻貓名字的工作表

點選Menu上的擴充功能,選取Apps Script

閱讀全文 用蘋果捷徑更新貓咪體重到Google試算表

datetime-local Input 秒數問題

當使用datetime-local的input時,直接帶入「包含秒數」的value,例如:2022-12-23 11:49:22,表單可以送出,且資料包含秒數。但當value是透過JavaScript帶入,送出時就會發現表單顯示「請輸入有效值」的錯誤提示:

左側為html直接帶入value,右側為JavaScript帶入value

Chrome與Firefox皆為如此,在Safari中連左側透過html帶入value的也會出現提示。

到底為什麼沒辦法輸入秒呢?查了一下才知道原來是跟控制增減值的step參數有關。datetime-local的step最小單位是秒,而預設值是60,也就是預設會以一分鐘作為最小可調整的時間的意思。

因此,要解決這個問題,我們只要新增step參數,並設為1就可以囉!

<input type="datetime-local" step="1">

防止iOS Dark mode破壞信件版型

自從iOS有了Dark mode之後,因為系統會自動複寫背景、文字顏色等等,造成要寄給客戶的信件,整個變得亂七八糟。越單純的版型越不會受影響,但假設有設字體顏色等等,就很容易變得不協調,或是深色字直接看不到。如果版型複雜一點,要針對Dark mode去做兩種顏色的適配真的非常麻煩。

能不能不讓Dark mode影響版型呢?
一開始只是試著去對每個背景色或是文字顏色加上!important,但似乎還是會被複寫。那如果背景是一張圖呢?Bingo! 幫背景加上一張底圖後,容器內的樣式就不會被強制複寫了!因此,只要在最外層加上背景圖就沒問題了。

於是最終的方式,只要在樣式表中加上:

body {
      background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/x8AAwMCAO+ip1sAAAAASUVORK5CYII=');
}

base64中encode的是一個1px寬高的白色背景圖。也可以依照需求用這個網站做出不同顏色的背景圖。調整好顏色後,把Base64 Encoded Pixel下的亂碼複製起來,換掉下面誇胡的部分即可。

body {
background-image: url('data:image/png;base64,[換掉這裡]');
}

在nuxt裡起一個socket.io server與後續Apache的Proxy設定

最近隨著LiveTRA的MAU越來越高,怕Firebase RealtimeDatabase會產生一些額外的支出,開始萌生想把他拔掉的想法。RealtimeDatabase主要是負責傳遞顯示於時刻表最上方的警示訊息,平常不會顯示,但當台鐵發生什麼突發事件時,可以做到立即告知使用者的效果。總覺得拔掉有點可惜,又不想單純只用傳統API去撈,這樣就失去即時性。所以索性最後自己用socket.io刻一個socket server。

Nuxt Module

我的構想是,把socket server寫在跟前台同一個nuxt專案中,且當nuxt啟動(npm start)時,最好socket也能一起被啟動,這樣我就不用再另外去起socket server。

閱讀全文 在nuxt裡起一個socket.io server與後續Apache的Proxy設定

Javascript 常用數字與日期顯示格式

這篇主要是筆記一下幾個常用,卻又容易忘記的處理數字與日期格式的方式。

數字千位分隔符

以往(查了一下caniuse應該是2017, 2018,瀏覽器還不支援Intl以前)要在數字上加上分隔用的逗點(如:19,890,604)只能自己手工處理。例如下面這樣的方式:

閱讀全文 Javascript 常用數字與日期顯示格式