最近隨著LiveTRA的MAU越來越高，怕Firebase RealtimeDatabase會產生一些額外的支出，開始萌生想把他拔掉的想法。RealtimeDatabase主要是負責傳遞顯示於時刻表最上方的警示訊息，平常不會顯示，但當台鐵發生什麼突發事件時，可以做到立即告知使用者的效果。總覺得拔掉有點可惜，又不想單純只用傳統API去撈，這樣就失去即時性。所以索性最後自己用socket.io刻一個socket server。
我的構想是，把socket server寫在跟前台同一個nuxt專案中，且當nuxt啟動（npm start）時，最好socket也能一起被啟動，這樣我就不用再另外去起socket server。
閱讀全文 在nuxt裡起一個socket.io server與後續Apache的Proxy設定這篇主要是筆記一下幾個常用，卻又容易忘記的處理數字與日期格式的方式。
以往（查了一下caniuse應該是2017, 2018，瀏覽器還不支援Intl以前）要在數字上加上分隔用的逗點（如：19,890,604）只能自己手工處理。例如下面這樣的方式：
閱讀全文 Javascript 常用數字與日期顯示格式以往我們要依據寬度為容器做改變時，我們通常只能用css media query。但media query中帶入的min-width或max-width寬度條件只限用於整個視窗，因此media query常常不能直覺地在Layout需求上實作。
比如說，有一個component，會被應用在主要內容區以及比較窄的sidebar時，我們通常也只能給他一個modifier class name來讓他在sidebar中不會破版。
閱讀全文 CSS Container Query 搭配Grid打造原始碼好維護的靈活排版最近有個需求是要爬公司部落格的文章到官網顯示。搜尋一下，知道WordPress有Rest API，非常簡單就可以達成需求。
閱讀全文 WordPress REST API v2抓取特定標籤或類別文章在查有沒有command line可以分離歌聲跟伴奏的工具時，發現了這個強大的程式。雖然跟一般專業處理聲音的軟體比起來，處理出來的結果沒有太大差別，失真也沒有比較少，不過他強大的地方在於除了人聲以外，他還可以分離出鋼琴、鼓聲、Bass等等樂器。對於想玩重新編曲的或DJ的人來說，應該是一個蠻實用的工具。
閱讀全文 把音樂中的人聲跟樂器都分離出來的超強軟體Spleeter工作的關係，稍微研究了一下關於產動態webp的方式。本來想說Photoshop已經支援webp了，應該也有匯出webp動畫的功能吧。但事與願違。看了一下以前要做gif動畫都會用的「儲存為網頁用」功能，沒有存為webp的檔案類型選項。再看一下「演算視訊」裡面也沒有webp的格式選項。
閱讀全文 Photoshop, After Effects 匯出webp動態圖乍看layer這個字，還以為是像Photoshop的圖層概念之類的東西，亦或是針對z-index之類的selector。結果竟是用來解決selector權重用的（對於CSS權重不是很了解的話，可以快速看一下這篇筆記。）依照layer宣告的順序，來決定樣式優先順序，後宣告的即使權重較小，也會覆寫。
閱讀全文 CSS 超好懂的@Layer教學使用情境：當有多個欲選取的相同字串時可使用。
使用方式：先選取一個或一段要選取的字串，然後按下command+d多次，直到所有相同字串都被選取即可。
閱讀全文 sublime 快速鍵筆記印象中看過「css的link標籤不論放在哪（head or body）都會先載入」的這個說法，不過今天卻發現當Chrome在某些情況時，結果似乎會有點非預期。
首先我在head與body最後都各放一個link標籤，並且在onload時跳出alert
在這個case，第一次alert時瀏覽器還是空白畫面，而第二次alert時，畫面上的row, col已被正確render了。看起來link不論放在哪都會先載的這個說法是成立的。
但奇怪的事情來了。當我把head裡的link拿掉時，chrome會呈現一個不穩定的結果。
閱讀全文 Chrome載入CSS問題當我們在Vue2中使用陣列時，若陣列中的內容是基本型別，也就是非物件的情況下，如果只更新陣列中的某一筆資料，會發現Vue並不知道資料已更新，導致畫面不會重繪。
在Vue2中的data區塊內所宣告的屬性，都被轉換成getter setter，因此當你重新賦值時，Vue就可以知道你更新了資料，然後就執行重繪畫面的工作。在data內所宣告的物件，如果一開始就有先宣告其屬性，屬性們也會被轉換成getter setter，但後來才加進去的屬性就無法被轉換，除非整個物件重新賦值，才有辦法轉換新的屬性。
閱讀全文 Vue2 基本型別陣列的更新問題在語言學習的道路上不斷折返跑のMe，應該也最適合來幫大家走看看有沒有冤枉路。
不知道大家有沒有過這種經驗 —— 明明已經考過JLPT N4，但卻在準備N3時，覺得某個文法好眼熟，卻又怎麼都想不起來它是誰。一查之下，竟然是已經練過好幾次的N4文法！！當下實在會有種「之前的付出的努力到底算什麼」的感覺。
有看過動畫腦筋急轉彎的人應該都知道人的記憶，有分成短期記憶與長期記憶。在語言學習的過程中，一段時間不使用的東西會忘記很正常。這是因為新學習的東西，通常會先處在短期記憶中。一直不斷使用之下才有機會成為長期記憶。因此最理想的方式，就是創造機會，讓自己能持續使用（必須要有輸入與輸出）學習到的東西。
一般來說，很多人都會推薦語言交換。因為通常是互惠行為，所以除了找人需要時間以外，幾乎零成本。如果不想總是面對同一個家教，這也是很好的方式。因為你在一週內，可以跟很多不一樣的人進行語言交換。
閱讀全文 實測各語言學習平台以前需透過label標籤配合css “+” selector來自訂checkbox與radio button的樣式，但現在已可透過將input設定 appearance: none 來將input視為一個普通的容器，更直覺地自訂radio button與checbox的外觀。以下是我們要完成的樣子：
Gist可以用來在文章中漂亮地展示一些程式碼片段以外，還可以透過以下兩個Host服務，直接展示成網頁。算是一個除了codepen以外的選項吧，雖然以功能面來說是差蠻多的，不過只是要展示簡單的東西時，也還蠻方便。
閱讀全文 Gist的Host服務無意間翻到好久之前在CodePen上用CSS寫的幾個Loading動畫。需要一個載入動態icon又不想自己重刻、不想用icon font + css、不想用gif的話，可以參考一下。
閱讀全文 CSS Loading 動態 icon簡單來說，這三個Object的methods都是用來「鎖定」物件，讓物件無法被修改或刪除屬性（props），但各自有不同的影響範疇：
| 可新增屬性 | 可刪除屬性 | 可修改屬性 | |
| preventExtensions | ❌ | ✅ | ✅ |
| seal | ❌ | ❌ | ✅ |
| freeze | ❌ | ❌ | ❌ |
