分類: works

在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出來的東西有可能會像下面這樣：

.container .class1 article,
.container .class2 article,
.container .class3 article,
.container .class4 article {
color: #f00;
}
view raw css_selector_without_is_or_where.css hosted with ❤ by GitHub

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

閱讀全文 CSS :is, :where Selector

Nuxt asyncData與fetch的不同

首先是關於this的使用，fetch 中的 this 指的就是component本身，asyncData 的this則是undefined。且fetch可以被component本身用

this.$fetch()
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，內容：

export default async function (req, res, next) {
var querystring = require('querystring')
var axios = require('axios')
var query = querystring.parse(req._parsedOriginalUrl.query)
var appId = query.appId
var redirectUri = query.redirectUri.replace('#_=_', '')
var code = query.code
if (!appId || !redirectUri || !code) {
// response fail
res.writeHead(404, { 'Content-Type': 'application/json' })
res.end(JSON.stringify({ msg: 'Login Failed' }))
return false
}
try {
// get access token
var clientSecret = process.env.FB_APP_SECRET
var url = `https://graph.facebook.com/v6.0/oauth/access_token?client_id=${appId}&redirect_uri=${redirectUri}&client_secret=${clientSecret}&code=${code}`
var result = await axios.get(url)
var token = result.data.access_token
// get userid
var useridUrl = `https://graph.facebook.com/me?&access_token=${token}`
var uinfo = await axios.get(useridUrl)
var uid = uinfo.data.id
// response success
res.writeHead(200, { 'Content-Type': 'application/json' })
res.end(JSON.stringify({ token: token, uid: uid }))
} catch (e) {
// response fail
res.writeHead(404, { 'Content-Type': 'application/json' })
res.end(JSON.stringify({ msg: 'Auth Failed' }))
}
}
view raw fbauth.js hosted with ❤ by GitHub

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

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

閱讀全文 Nuxt Server-Middleware