作者: Boggy

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 基本型別陣列的更新問題

實測各語言學習平台

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

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

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

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

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

自訂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 到底在幹嘛

在CSS GRID Layout實現colspan, rowspan

善用 display: grid 來處理排版真的非常方便，不但可以簡化html巢狀結構，在處理RWD的時候，也增加了更多排版的彈性跟可能性。例如可以用 grid-template-areas 來隨意調整排版的位置順序等等。

說到 colspan 的話，上述提到的 grid-template-areas 也可以輕鬆達到這個需求，例如以下範例：

閱讀全文 在CSS GRID Layout實現colspan, rowspan

關於CSS權重的筆記

關於權重的計算，在W3C的網頁上的介紹是：

A selector’s specificity is calculated as follows

  • count the number of ID selectors in the selector (= a)
  • count the number of class selectors, attributes selectors, and pseudo-classes in the selector (= b)
  • count the number of type selectors and pseudo-elements in the selector (= c)
  • ignore the universal selector

翻譯一下

  • id的數量為a（ex. #main #sidebar {…} 這樣是2）
  • class, attr, 偽類別的數量為b
  • tag跟偽元素的數量為c（ li:hover:before {…} 這樣是3）
  • 星號直接無視
閱讀全文 關於CSS權重的筆記

CSS :is, :where Selector

:is() 跟 :where() 是什麼？

常常在一些情況之下，css selector有可能會需要寫很長，尤其是剛開始在寫sass, scss時，巢狀寫的很開心，結果compile出來的東西有可能會像下面這樣：

而 :is() 跟 :where() 就是用來解決這個問題。在is:() or :where() 中可以帶入逗點分格的selector，讓原本多行且重複的結構簡化為一行：

閱讀全文 CSS :is, :where Selector

Nuxt asyncData與fetch的不同

首先是關於this的使用，fetch 中的 this 指的就是component本身，asyncData 的this則是undefined。且fetch可以被component本身用 this.$fetch() 再次呼叫，而asyncData不行。

再來是顯示的效果。server-side render時感覺不出來，不過在client side render時，就有明顯差異。兩者分別運作的流程如下：

使用 asyncData 會經過的流程

點擊連結 -> asyncData() -> 組件建立完成 -> render畫面（換頁）

使用 fetch 會經過的流程

點擊連結 -> 組件建立完成 -> render畫面（換頁） -> fetch()

使用asyncData的話，會先取資料，取完資料才換頁。使用fetch的話，取資料前就會先換頁，等到資料取完後，才會填入資料。

閱讀全文 Nuxt asyncData與fetch的不同

Nuxt Server-Middleware

前陣子需要利用server middleware做fb oauth功能，於是我就在middleware資料夾新增了fbauth.js，內容：

結果build完之後，發現clientSecret竟然也一起打包進client端的js裡！！

於是我查了關於如何不將code打包進client side的資料後，就在外面包了一層 if (process.env.VUE_ENV === ‘server’) 如下：

閱讀全文 Nuxt Server-Middleware