以往我們要依據寬度為容器做改變時，我們通常只能用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 基本型別陣列的更新問題以前需透過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 | ❌ | ❌ | ❌ |
以檔名啟動程式$ pm2 start 檔名 --name app_name
以指令啟動程式$ pm2 start '指令' --name app_name
指令因為有空白，要用引號包起來，或者也可以把指令做成sh檔，就可以以檔名啟動的方式來做。
善用 display: grid 來處理排版真的非常方便，不但可以簡化html巢狀結構，在處理RWD的時候，也增加了更多排版的彈性跟可能性。例如可以用 grid-template-areas 來隨意調整排版的位置順序等等。
說到 colspan 的話，上述提到的 grid-template-areas 也可以輕鬆達到這個需求，例如以下範例：
閱讀全文 在CSS GRID Layout實現colspan, rowspan關於權重的計算，在W3C的網頁上的介紹是：
