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，但後來才加進去的屬性就無法被轉換，除非整個物件重新賦值，才有辦法轉換新的屬性。

宣告過的物件屬性可以觸發更新：

data () {
  return {
    myObj: { a: 0 }
  }
}

mounted () {
  this.myObj.a = 10
}

沒宣告過的不會觸發更新：

this.myObj.b = 10

這樣才能讓b也被轉換，並且觸發更新：

this.myObj = { a: 10, b: 10 }

但陣列中的基本型別因為不是物件，所以即是宣告時已存在，但還是無法轉換為響應式（設getter, setter），所以以下面這種方式改變時不會更新：

this.myArray[0] = 1

下面這幾種情況才會觸發更新：

this.myArray = […this.myArray]
this.myArray = Object.assign([], this.myArray)
this.myArray = this.myArray.splice(0, this.myArray.length)

就是immutable的概念吧

但當我們使用push, pop, shift… 這些array的method來操作這個基本型別的陣列時，會發現畫面竟然就乖乖更新了。這是因為vue把data中宣告過的陣列的method都覆寫了。這些是被覆寫過的methods：push, pop, shift, unshift, splice, sort, reverse。

當你執行這些methods的時候，其實並非直接執行native code，而是會執行vue覆寫的function。這隻function做的事情就是先跑完原始native code要做的事情，再發出通知讓vue重繪畫面。有興趣的可以看一下vue.runtime.esm.js，搜尋methodsToPatch。

也就是說，如果有個被覆寫的native function，可以在執行之後不會對目前陣列產生什麼影響的話，我們就可以利用他來當作陣列更新後對vue通知重繪畫面的媒介。這裡面有 push 跟 splice 這兩個methods，如果不帶任何參數的情況下，可以不影響陣列內容。因此我們可以這樣修改並觸發更新：

this.myArray[0] = 10
this.myArray.push()
// or
this.myArray.splice()

Vue3的話因為改用Proxy來監聽改變，所以不需要這樣告知更新。但老實說，我到現在還是不太喜歡Vue3的Reactivity API。尤其是基本型別的ref()的設計。Vue2還是直覺得多，寫起來也比較漂亮。我應該暫時還會是Vue2的愛用者XD

實測各語言學習平台

在語言學習的道路上不斷折返跑のMe，應該也最適合來幫大家走看看有沒有冤枉路。

不知道大家有沒有過這種經驗 —— 明明已經考過JLPT N4，但卻在準備N3時，覺得某個文法好眼熟，卻又怎麼都想不起來它是誰。一查之下，竟然是已經練過好幾次的N4文法！！當下實在會有種「之前的付出的努力到底算什麼」的感覺。

有看過動畫腦筋急轉彎的人應該都知道人的記憶，有分成短期記憶與長期記憶。在語言學習的過程中，一段時間不使用的東西會忘記很正常。這是因為新學習的東西，通常會先處在短期記憶中。一直不斷使用之下才有機會成為長期記憶。因此最理想的方式，就是創造機會，讓自己能持續使用（必須要有輸入與輸出）學習到的東西。

一般來說，很多人都會推薦語言交換。因為通常是互惠行為，所以除了找人需要時間以外，幾乎零成本。如果不想總是面對同一個家教，這也是很好的方式。因為你在一週內，可以跟很多不一樣的人進行語言交換。

閱讀全文 實測各語言學習平台