防止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 常用數字與日期顯示格式

CSS Container Query 搭配Grid打造原始碼好維護的靈活排版

以往我們要依據寬度為容器做改變時,我們通常只能用css media query。但media query中帶入的min-width或max-width寬度條件只限用於整個視窗,因此media query常常不能直覺地在Layout需求上實作。

比如說,有一個component,會被應用在主要內容區以及比較窄的sidebar時,我們通常也只能給他一個modifier class name來讓他在sidebar中不會破版。

閱讀全文 CSS Container Query 搭配Grid打造原始碼好維護的靈活排版

把音樂中的人聲跟樂器都分離出來的超強軟體Spleeter

在查有沒有command line可以分離歌聲跟伴奏的工具時,發現了這個強大的程式。雖然跟一般專業處理聲音的軟體比起來,處理出來的結果沒有太大差別,失真也沒有比較少,不過他強大的地方在於除了人聲以外,他還可以分離出鋼琴、鼓聲、Bass等等樂器。對於想玩重新編曲的或DJ的人來說,應該是一個蠻實用的工具。

閱讀全文 把音樂中的人聲跟樂器都分離出來的超強軟體Spleeter

Photoshop, After Effects 匯出webp動態圖

工作的關係,稍微研究了一下關於產動態webp的方式。本來想說Photoshop已經支援webp了,應該也有匯出webp動畫的功能吧。但事與願違。看了一下以前要做gif動畫都會用的「儲存為網頁用」功能,沒有存為webp的檔案類型選項。再看一下「演算視訊」裡面也沒有webp的格式選項。

閱讀全文 Photoshop, After Effects 匯出webp動態圖

CSS 超好懂的@Layer教學

乍看layer這個字,還以為是像Photoshop的圖層概念之類的東西,亦或是針對z-index之類的selector。結果竟是用來解決selector權重用的(對於CSS權重不是很了解的話,可以快速看一下這篇筆記。)依照layer宣告的順序,來決定樣式優先順序,後宣告的即使權重較小,也會覆寫。

閱讀全文 CSS 超好懂的@Layer教學

Chrome載入CSS問題

印象中看過「css的link標籤不論放在哪(head or body)都會先載入」的這個說法,不過今天卻發現當Chrome在某些情況時,結果似乎會有點非預期。

首先我在head與body最後都各放一個link標籤,並且在onload時跳出alert

在這個case,第一次alert時瀏覽器還是空白畫面,而第二次alert時,畫面上的row, col已被正確render了。看起來link不論放在哪都會先載的這個說法是成立的。

但奇怪的事情來了。當我把head裡的link拿掉時,chrome會呈現一個不穩定的結果。

閱讀全文 Chrome載入CSS問題

Vue2 基本型別陣列的更新問題

當我們在Vue2中使用陣列時,若陣列中的內容是基本型別,也就是非物件的情況下,如果只更新陣列中的某一筆資料,會發現Vue並不知道資料已更新,導致畫面不會重繪。

在Vue2中的data區塊內所宣告的屬性,都被轉換成getter setter,因此當你重新賦值時,Vue就可以知道你更新了資料,然後就執行重繪畫面的工作。在data內所宣告的物件,如果一開始就有先宣告其屬性,屬性們也會被轉換成getter setter,但後來才加進去的屬性就無法被轉換,除非整個物件重新賦值,才有辦法轉換新的屬性。

閱讀全文 Vue2 基本型別陣列的更新問題

自訂checkbox, radio button的css

以前需透過label標籤配合css “+” selector來自訂checkbox與radio button的樣式,但現在已可透過將input設定 appearance: none 來將input視為一個普通的容器,更直覺地自訂radio button與checbox的外觀。以下是我們要完成的樣子:

看看實際的結果
閱讀全文 自訂checkbox, radio button的css

搞懂 JavaScript的Object.freeze, Object.seal, Object.preventExtensions 到底在幹嘛

簡單來說,這三個Object的methods都是用來「鎖定」物件,讓物件無法被修改或刪除屬性(props),但各自有不同的影響範疇:

可新增屬性可刪除屬性可修改屬性
preventExtensions
seal
freeze
閱讀全文 搞懂 JavaScript的Object.freeze, Object.seal, Object.preventExtensions 到底在幹嘛