程式學習

2020年10月6日星期二

WebKit是一種用來讓网页浏览器繪製網頁的排版(未詳細了解)

WebKit是一種用來讓网页浏览器繪製網頁的排版引擎。它被用於Apple Safari。其分支Blink被用於基於Chromium的網頁瀏覽器，如：Opera與Google Chrome。

MDN Browser Compatibility Report 2020(未完)

https://mdn-web-dna.s3-us-west-2.amazonaws.com/MDN-Browser-Compatibility-Report-2020.pdf

進度:

我從interview transript開始看，目前看到第一個訪談者完。
再從最開始看起，看到summary完。

學習新單詞:

Interview Transcript (n)訪談逐字稿
appendix (n)附錄
transcribe (v)錄製/抄寫
verbatim (adv)一致不差地
cater (v)迎合
savvy (n)某專業知識, like business savvy, tech savvy
safari 重音在fa
analytics 重音在an
consensus (n)共同的認知
frustration (n)(因不能滿足需求而）沮喪；令人感覺沮喪
product advisory board (n)產品顧問委員會
Needs Assessment (n)(學術名詞)需求評估
(n)關於
商業書信中經常用到的片語: with regard to = in regard to (儘管 with regards to 自 1990 年代以來有越來越多人使用的趨勢，但仍應被視為錯誤)
同義但較簡潔的用法: about = concerning = regarding
更正式的同義詞: as regards (像是官方在回覆投訴信時使用)
preemptively (adv)搶先地 pre-emptive-ly
concrete (adj)具體的
Commitment (n)奉獻
roll out (v)推出(新產品)
legacy (n)遺產
surface (v)公開資訊。另外還有一種意思是浮現露出資訊。

議題:

訪談者一提到safari在ios的page bottom會有slide和scroll的行為問題，似乎是和apple的bottom有干擾(因為我看的順序不是一開始下來，所以不確定解決與否，再看看)

2020年10月5日星期一

enable 反白和右鍵

javascript: (function () {
    function R(a) {
        ona = "on" + a;
        if (window.addEventListener) window.addEventListener(a, function (e) {
            for (var n = e.originalTarget; n; n = n.parentNode) n[ona] = null;
        }, true);
        window[ona] = null;
        document[ona] = null;
        if (document.body) document.body[ona] = null;
    }
    R("contextmenu");
    R("click");
    R("mousedown");
    R("mouseup");
    R("selectstart");
})()

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年10月6日 星期二

2020年10月5日 星期一

2020年9月30日 星期三

2020年9月29日 星期二

定制哈希类名：

主要命令

注意点

增强命令

2020年10月6日星期二

2020年10月5日星期一

2020年9月30日星期三

2020年9月29日星期二