關於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

上班時間的瀏覽器分頁名稱隱身術

這是個讓你一秒換瀏覽器分頁ICON跟標題的教學。可以讓你在不須關閉分頁的情況之下,分頁列上的內容不至於被發現你在看不該看的東西。步驟如下:

把這個連結-> 收件夾 – nihao78@gmail.com拉到工具列上

閱讀全文 上班時間的瀏覽器分頁名稱隱身術

無用設計發想 – 骰子鬧鐘

這是一個造型非常簡單的鬧鐘,方方正正的造型,僅黑白的顏色,只有上方有一凹陷。

天亮鬧鐘一響,非得在凹槽中擲下鬧鐘所附的骰子,並且符合鬧鐘右下角的隨機組合,鬧種才肯罷休。

時鐘的各項設定功能,也只需要用骰子,觸碰凹槽的感應裝置,即可完成時間與鬧鐘設定。

假天花板

因為公司同事生日,想別於以往溫和的整人方式,於是別出心裁的製作了可以放碎紙花在裡面的假天花板

材料:
1.全開壁報紙一張
2.厚紙板,只需要可以繞成一圈寬三公分作框的大小即可
3.粗細不同麥克筆數支,一隻也是可以啦只是手很酸
4.魚線
5.碎紙花,或你想放些別的也可以

閱讀全文 假天花板