component v-model

 https://v3.vuejs.org/guide/migration/v-model.html#migration-strategy

<myComponent v-model:value="parentVariable">  // value是prop name

可以簡寫成 <myComponent v-model="parentVariable"> 

在child component裡用this.$emit("input", <data>)

CSS Color Chart

 https://www.somacon.com/p142.php

recaptcha

 https://www.npmjs.com/package/vue-recaptcha

這邊自己開通一下，很簡單，基本開發要把localhost 127.0.0.1加進網域

https://www.google.com/recaptcha/admin/site/470756736/setup

example: 

 <vue-recaptcha 

                    ref="recaptcha"

                    sitekey="{{sitekey上google recaptcha取}}" 

                    :loadRecaptchaScript="true" 

                    :class="$style.recaptcha"

                    @verify="onCaptchaVerifired"

                    @expired="onCaptchaExpired"

                ></vue-recaptcha>

get the user’s response token:

https://developers.google.com/recaptcha/docs/verify

注意

@verify="onCaptchaVerifired"   // 在template不用(parameter)

public onCaptchaVerifired(res): void // 在method有要帶argument

http://www.blog.tonyswierz.com/javascript/add-and-use-google-recaptcha-in-a-vuejs-laravel-project/

說明v2 Invisible:

https://z3388638.medium.com/recaptcha-v2-invisible-%E4%B8%8D%E7%94%A8%E5%86%8D%E6%8A%8A-%E6%88%91%E4%B8%8D%E6%98%AF%E6%A9%9F%E5%99%A8%E4%BA%BA-%E5%88%97%E5%85%A5%E9%A0%81%E9%9D%A2%E8%A8%AD%E8%A8%88%E8%80%83%E9%87%8F-2b83dbce03cb

nested checkbox

 https://codepen.io/96naveen/pen/PwVMJq

input 使用css屬性 :valid 和 html 屬性 requred

 https://developer.mozilla.org/en-US/docs/Web/CSS/:valid

https://codepen.io/ettzzi/pen/ZWgWKw

動態如下圖

切版兩個width都設定一樣，但看起來就有差，可能是因為兩個browser縮放比例不同

防止cache

1. ?數字 是為了防止cache 再去設定每次+1之類的

<link href="css/style.css?1000" rel="stylesheet">

2.

 webpack-manifest-plugin

因為 Windows 在執行政策上會有一定的安全性設置，Windows 的執行政策 (Set-ExecutionPolicy) 預設是 Restricted。vue : 因為這個系統上已停用指令碼執行，所以無法載入

 https://hsiangfeng.github.io/other/20200510/1067127387/

git-pre-commit-hook-consolelog

 https://gugod.org/2009/12/-git-pre-commit-hook-consolelog/

ADA, WCAG2.1, acsb

 acsb, accessiBe, CSS and JavaScript accessibility best practices

官網: https://www.w3.org/WAI/tutorials/menus/structure/

文件: https://northwestmediacollective.com/wp-content/uploads/2020/10/2020-10-05_21-06-16_alaskashipsupply.com_.pdf

文件: https://developers.google.com/web/fundamentals/accessibility/focus/using-tabindex?hl=zh-tw

aria-hidden: 

https://developer.mozilla.org/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-hidden_attribute

React and Material UI Course – Code a Dictionary

 https://www.freecodecamp.org/news/code-a-dictionary-with-react-and-material-ui/

EDM

 https://documentation.mjml.io/

https://www.htmlemailcheck.com/check/

注意事項

1.

https://blog.newsleopard.com/coding-html-emails/

2.

line-height在outlook不可以用數值，要有單位

lineheight數值轉單位: 數值 = (數值*font-size) px

3.hover行為

https://www.litmus.com/blog/interactive-email-for-beginners-6-interactive-elements-you-can-add-to-your-emails-today/

vue一些沒用過技術

 https://mini-ghost.dev/blog/dynamic-vue-layout/

韓語教室

 https://www.lingohut.com/zh/l64/%E5%AD%A6%E4%B9%A0%E9%9F%A9%E8%AF%AD