程式學習: 9月 2020

2020年9月30日星期三

觀念css(未完)

what is global in css : https://www.gatsbyjs.com/docs/global-css/ 看到Adding global styles without a layout component

should i use css modules: https://medium.com/@gajus/stop-using-css-in-javascript-for-web-development-fa32fb873dcc 未看

從Chrome源碼看瀏覽器如何計算CSS (不小心找到的東西，可以看看，未看)

https://codertw.com/%E7%A8%8B%E5%BC%8F%E8%AA%9E%E8%A8%80/744434/#outline__2_3

2020年9月29日星期二

CSS-Modules(好像跟現在的專案還有關係呢), PostCSS (未完)

http://www.ruanyifeng.com/blog/2016/06/css_modules.html

https://github.com/postcss/autoprefixer

https://github.com/postcss/postcss

https://cythilya.github.io/2018/08/10/postcss/

未看

https://github.com/postcss/autoprefixer

https://github.com/postcss/postcss

https://cythilya.github.io/2018/08/10/postcss/

定制哈希类名：

CSS Modules: localIdentName=[path][name]---[local]---[hash:base64:5]

呈現: <h1 class="demo03-components-App---title---XSDrm">Hello World</h1>

意思是: 資料夾位置 /demo03/components 下的App.vue---local css name 為title---hash取5個字

v.s.

現行專案: localIdentName: "[name]__[local]__[hash:base64:5]"

呈現: <div class="HeaderSearchDropDownMenu__headerSearchDropDownMenu__TfL4d>Hello World</div>

意思是: HeaderSearchDropDownMenu.vue__local css name 為headerSearchDropDownMenu__hash取5個字

學習概要：

CSS-Modules
哈希字符串
composes
:global
:local
PostCSS -- 後處理器
step1: npm install postcss postcss-loader autoprefixer precss --save-dev
step2: 在 Webpack 設定檔加入 postcss-loader

step3: 在 PostCSS 設定檔（postcss.config.js）加入需要用到的套件 precss 和 autoprefixer。小提醒，擴充功能都要列在 PostCSS 設定檔中才能使用噢。

其功能由所掛的擴充而定，可加入的plugin功能有：

autoprefixer : 加入各家瀏覽器的前綴詞（prefix），例如：-webkit-、-moz-。
將先進的功能轉為目前主流瀏覽器所能支援的語法。
語法檢查和報錯。
支援 Grid System。
precss : 使用類似 SASS 的功能，例如：變數。
postcss-modules：產生 CSS Modules / Scoped CSS

因為plugin體積小，所以處理速度較預處理器(SASS，LESS等)快。而缺點就是必須自己研究和測試，找出符合需求、仍在維護的 plugin，這是比較花時間的。

6. Precss
https://www.jianshu.com/p/cc2386eb9a33

7. stylelint
https://stylelint.io/
https://dotblogs.com.tw/explooosion/2018/09/30/141005

GIT本地删除除master以外所有分支

主要命令

git branch | grep -v "master" | xargs git branch -D


注意点


 执行前需要切换到master分支执行
当前分支未做修改

增强命令

git stash && git checkout master && git branch | grep -v "master" | xargs git branch -D

reference: http://www.huuinn.com/archives/234

報錯: grep: 無法辨識

原因: vscode沒辦法使用Linux指令

解法: 開Cygwin再輸入指令

2020年9月24日星期四

gitlens: git vscode extension

https://medium.com/@aar0nTw/%E5%BC%B7%E5%A4%A7%E7%9A%84-git-extension-gitlens-vs-code-extension-how-to-editor-%E7%B7%A8%E8%BC%AF%E8%80%85-5-e1800d9d87bc

2020年9月23日星期三

nuxt-i18n 的 numberFormat 寫在另一支檔案，在import或require進去都會報錯-- Cannot find module './locale-settings.js' (未解)

3|nuxt-stage | FATAL Cannot find module './locale-settings.js'

3|nuxt-stage  | Require stack:
3|nuxt-stage  | - /data/wwwroot/officalsite_nuxt/nuxt.config.js
3|nuxt-stage  | - /data/wwwroot/officalsite_nuxt/node_modules/@nuxt/config/dist/config.js
3|nuxt-stage  | - /data/wwwroot/officalsite_nuxt/node_modules/@nuxt/cli/dist/cli-index.js
3|nuxt-stage  | - /data/wwwroot/officalsite_nuxt/node_modules/@nuxt/cli/dist/cli.js
3|nuxt-stage  | - /data/wwwroot/officalsite_nuxt/node_modules/nuxt/bin/nuxt.js
3|nuxt-stage  |   Error: Cannot find module './locale-settings.js'
3|nuxt-stage  |   Require stack:
3|nuxt-stage  |   - nuxt.config.js
3|nuxt-stage  |   - node_modules/@nuxt/config/dist/config.js
3|nuxt-stage  |   - node_modules/@nuxt/cli/dist/cli-index.js
3|nuxt-stage  |   - node_modules/@nuxt/cli/dist/cli.js
3|nuxt-stage  |   - node_modules/nuxt/bin/nuxt.js
3|nuxt-stage  |   at Object.<anonymous> (nuxt.config.js:1)
3|nuxt-stage  |   at Generator.next (<anonymous>)
3|nuxt-stage  |    ╭───────────────────────────────────────────────────────────────────────────────╮
3|nuxt-stage  |    │                                                                               │
3|nuxt-stage  |    │   ✖ Nuxt Fatal Error                                                          │
3|nuxt-stage  |    │                                                                               │
3|nuxt-stage  |    │   Error: Cannot find module './locale-settings.js'                            │
3|nuxt-stage  |    │   Require stack:                                                              │
3|nuxt-stage  |    │   - /data/wwwroot/officalsite_nuxt/nuxt.config.js                             │
3|nuxt-stage  |    │   - /data/wwwroot/officalsite_nuxt/node_modules/@nuxt/config/dist/config.js   │
3|nuxt-stage  |    │   - /data/wwwroot/officalsite_nuxt/node_modules/@nuxt/cli/dist/cli-index.js   │
3|nuxt-stage  |    │   - /data/wwwroot/officalsite_nuxt/node_modules/@nuxt/cli/dist/cli.js         │
3|nuxt-stage  |    │   - /data/wwwroot/officalsite_nuxt/node_modules/nuxt/bin/nuxt.js              │
3|nuxt-stage  |    │                                                                               │
3|nuxt-stage  |    ╰───────────────────────────────────────────────────────────────────────────────╯
3|nuxt-stage  | npm ERR! code ELIFECYCLE
3|nuxt-stage  | npm ERR! errno 1
3|nuxt-stage  | npm
3|nuxt-stage  |  ERR! officalsite@1.0.0 stage: `PORT=3333 node ./node_modules/nuxt/bin/nuxt.js start`
3|nuxt-stage  | npm ERR! Exit status 1
3|nuxt-stage  | npm
3|nuxt-stage  |  ERR! 
3|nuxt-stage  | npm ERR! Failed at the officalsite@1.0.0 stage script.
3|nuxt-stage  | npm ERR!
3|nuxt-stage  |  This is probably not a problem with npm. There is likely additional logging output above.

2020年9月22日星期二

declare module

npm install vue-click-outside

但要用在typescript裡會有紅線，如下：

確定它沒有@types/的檔案，須自己建一個.d.ts的檔案並且宣告，如下

https://www.npmjs.com/package/vue-click-outside

(maybe: 可以思考下 -- https://juejin.im/post/6844903882309500942 )

2020年9月18日星期五

data URIs or data URL

https://css-tricks.com/data-uris/

裡的

Use this online conversion tool.

https://websemantics.uk/tools/image-to-data-uri-converter/

裡的

If you’re converting SVG to data-URI to embed into a style sheet or HTML please consider this method instead: Cross browser SVG URI background-images.

https://websemantics.uk/articles/embedding-svg-cross-browser/

看到 The current solution is svg4everybody

2020年9月16日星期三

vue-country-flag, currency symbol

country-flag (from i18n):

https://www.npmjs.com/package/vue-country-flag

currency symbol:

https://kazupon.github.io/vue-i18n/guide/number.html

https://phrase.com/blog/posts/nuxt-js-tutorial-i18n/#Number_localization

https://stackoverflow.com/questions/55443835/nuxt-i18n-number-localization

https://i18n.nuxtjs.org/options-reference

http://kazupon.github.io/vue-i18n/guide/number.html#custom-formatting

2020年9月15日星期二

google map (還有未看)

https://developers.google.com/maps/documentation/javascript/overview

https://console.cloud.google.com/billing/01FB5A-6622F4-46197A?project=practice01-289607 (不小心開在alice那個帳戶)

https://medium.com/front-end-augustus-study-notes/google-map-api-1-a4e794b0162f

https://developers.google.com/maps/documentation/javascript/using-typescript 官網使用的

進度

https://developers.google.com/maps/documentation/javascript/adding-a-google-map 看到Tips and troubleshooting，延伸下面連結

https://developers.google.com/maps/solutions/store-locator 未看

新知識點：

Google Maps
quirks mode
script.defer:
http://n.sfs.tw/content/index/10323
LatLng:
https://developers.google.com/maps/documentation/javascript/reference/coordinates
Mercator projection
JSONP:
全称是 "JSON With Padding"，词面意思上理解就是 "填充式的JSON"。它不是一个新鲜的东西，隶属于 JSON 的一种使用方法，或者说是一种使用模式，可以解决一些常见的浏览器端网页跨域问题。

型式: url?callback=xxx xxx

簡單的說就是: 回调函数+数据，至于这个数据是怎么产生的，说粗鲁点无非就是字符串拼接了。
ex: <script src="http://server2.example.com/RetrieveUser?UserId=1823&callback=parseResponse"></script>
注意：JSONP只支持get的用法，並且对于两个不同域之间两个页面的互相调用也是无能为力。

2020年9月4日星期五

vue touch

https://lisilinhart.info/posts/touch-interaction-vue/

訂閱：文章 (Atom)

文章加密

2020年9月30日 星期三

2020年9月29日 星期二

定制哈希类名：

主要命令

注意点

增强命令

2020年9月24日 星期四

2020年9月23日 星期三

2020年9月22日 星期二

2020年9月18日 星期五

2020年9月16日 星期三

2020年9月15日 星期二

2020年9月4日 星期五