2020年8月27日 星期四
2020年8月20日 星期四
Text in a flex container doesn't wrap in IE11
https://stackoverflow.com/questions/35111090/text-in-a-flex-container-doesnt-wrap-in-ie11
I had the same issue and the point is that the element was not adapting its width to the container.
Instead of using width:100%, be consistent (don't mix the floating model and the flex model) and use flex by adding this:
.child { align-self: stretch; }Or:
.parent { align-items: stretch; }This worked for me.
2020年8月9日 星期日
nuxt
nuxt相關的一些較需注意的情況:https://nuxtjs.org/faq/window-document-undefined
- Why a CSS flash appears
- Async data in components?
asyncData is called every time before loading the page component - Duplicated Meta Tags?
- iOS and phone numbers
- Using Nuxt with Cloudflare
2020年8月8日 星期六
vue-meta, nuxt本身就有了: metaInfo->head, vid->hid
ssr seo 必須添加在asyncData，如果用到router-view轉頁用router immediate
https://kakadodo.github.io/2019/05/20/vue-vue-meta/
https://github.com/nuxt/vue-meta/tree/master/examples/vuex-async 這個例子未看
https://nuxtjs.org/api/pages-head
Altough we talk about the keyname asmetaInfo variable on Vue by default, please note that the keyName is configurable and could be different in your case. E.g. Nuxt.js uses head as keyName.
If you want to avoid concatenate metadata, then give it a vmid.
If a child returns null as content value then the parent metaInfo property with the same vmid will be ignored. 這裡的content value指的是 :
- the value of a key for
objecttypes ashtmlAttrs - the value of
[contentKeyName]orinnerHTMLkeys forcollectiontypes asmeta
就像
{
metaInfo: {
htmlAttrs: {
lang: 'en',
amp: true
},
bodyAttrs: {
class: ['dark-mode', 'mobile']
}
}
}或
metaInfo: {
style: [{
vmid: 'page-load-overlay',
innerHTML: `
body div.loading {
z-index: 999;
background-color: #0f0f0f;
opacity: 0.9;
}
`,
}]
}If you wish to use a child property conditionally and use the parents' property as default value, make sure the child returns undefined as content value.
It is possible to use cross app vmid's with a caveat:
The value of the last updated app is used.
To keep track of which tag has been added by which Vue app, VueMeta stores an unique appId in the data-vue-meta attribute.
To optimize performance, VueMeta will only initialize for a Vue app when it finds a metaInfo property on any of the loaded components. That means if you render all your components by passing the component instance directly to the render function, Vue will only know of these components once the app gets mounted (see snippet below). And this means VueMeta is unable to find any metaInfo when it looks if its need to initialize in the beforeCreate hook and the appId will not be changed to the ssrAppId.
This will result in all the metaInfo properties of your ssr app to be rendered twice, once with ssrAppId and once with appId 1.
To prevent this, either make sure there is any metaInfo configured (on any component) when the beforeCreate hook runs. Alternative (but not recommended) you could set ssrAppId to 1 as well.
大概是說要避免渲染兩次，要在 beforeCreate (或 Created )時設定VueMeta (或是相反，不確定有機會再實作一下)
https://github.com/muwoo/vue-meta-info
SSR
如果您使用了Vue SSR 来渲染页面，那么您需要注意的是：
由于没有动态更新，所有的生命周期钩子函数中，只有 beforeCreate 和 created 会在服务器端渲染(SSR)过程中被调用。这就是说任何其他生命周期钩子函数中的代码（例如 beforeMount 或 mounted），只会在客户端执行。 此外还需要注意的是，你应该避免在 beforeCreate 和 created 生命周期时产生全局副作用的代码，例如在其中使用 setInterval 设置 timer。在纯客户端(client-side only)的代码中，我们可以设置一个 timer，然后在 beforeDestroy 或 destroyed 生命周期时将其销毁。但是，由于在 SSR 期间并不会调用销毁钩子函数，所以 timer 将永远保留下来。为了避免这种情况，请将副作用代码移动到 beforeMount 或 mounted 生命周期中。
基于以上约束，我们目前可以使用静态的数据来渲染我们的metaInfo，下面给出一个使用示例：
<template>
...
</template>
<script>
export default {
metaInfo: {
title: 'My Example App', // set a title
meta: [{ // set meta
name: 'keyWords',
content: 'My Example App'
}]
link: [{ // set link
rel: 'asstes',
href: 'https://assets-cdn.github.com/'
}]
}
}
</script>此时vueMetaInfo会帮我们在ssr的context中挂载出一个title变量和一个render对象。类似于这样：
context = {
...
title: 'My Example App',
render: {
meta: function () { ... },
link: function () { ... }
}
}至此，我们可以改造我们的模板：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>{{title}}</title>
{{{render.meta && render.meta()}}}
{{{render.link && render.link()}}}
</head>
<body>
<!--vue-ssr-outlet-->
</body>
</html>这样便可以渲染出需要的数据。值得注意的是：虽然我们可以使用
<template>
...
</template>
<script>
export default {
name: 'async',
metaInfo () {
return {
title: this.pageName
}
},
data () {
return {
pageName: 'loading'
}
},
mounted () {
setTimeout(() => {
this.pageName = 'async'
}, 2000)
}
}
</script>这种形式来定义数据，但是最终渲染出来的title 依然是 loading，因为服务端渲染除了created 和 beforeCreate并没有mounted钩子。
On the client, vue-meta batches DOM updates using requestAnimationFrame. 但這func其實不太懂，請見:https://vue-meta.nuxtjs.org/faq/performance.html
英文單詞:
resolve 解析 (verb)
recursively 遞歸地 (adv)
prerequisite 先決條件(noun)
recognised 公認的 (adj)
specify 定義 (verb)
concatenate 串聯 (verb)
far-fetched 牽強(adj)
caveat 警告 (noun)
retrieve 找回(verb)
considerations 注意事項 (noun)
repaint 刷新,重畫 (noun, verb)
quene 排隊 (noun, verb)
interoperability 互通性(norn)
verbose 冗長的(adj)
extraneous 無關的(adj)
downside 缺點 (noun)
unusable 無法使用 (adj)
unchecked 未被制止的(adj)
2020年8月7日 星期五
ssr
ssr的官方好處是...
1. 更快的内容到达时间 (time-to-content)，特别是对于缓慢的网络情况或运行缓慢的设备
2. 更好的 SEO(次要目的，也可以用prerender達成，而且配置上更簡單)
優點的部分(大眾好像都把主次要倒著說...)
- 主打 SEO，因為 CSR 不管輸入什麼，網頁一開始都是空的，很多搜尋引擎會不曉得你的網站裡面有什麼，就無法讓使用者透過關鍵字找到。但 SSR 在第一次載入時就會有內容在了，搜尋引擎表示非常滿意。
- 使用者看到第一個畫面的時間會比 CSR 快，效能也會更好，因為不需要再等 bundle.js 載入才開始 Render，而且第一次 Render 的所有事情（包含 call API）都是 Server 做的，Client 端就比較沒有負擔。
缺點的部分
- 學習門檻是要稍微了解 NodeJS，畢竟在 SSR 中 Server 是絕對必要的。如果還不會也沒關係，文章中會簡單的解釋如何實作。
- 因為第一次的 Render 是在 Server 上運行，所以如果有在 Component 或是其他運行到的地方使用到
window的話就會出錯，這裡可以參考 這個 issue 的討論內容作為解決方案 - browser的API不可用，延伸出isomorphic javascript這個詞
例如: window.innerWidth不可用