Web Component

web component

  1. custom element
    可以建立自己的客製化元素。
    由CustomElementRegistry來產生自己客製的元件。

    註冊新元件
    1
    2
    3
    4
    5
    // CustomElementRegistry.define('component-name', class, [extend property])

    CustomElementRegistry.define('word-count', WordCount, {
        extends: 'p'
    })

    參數1
    元件名稱（必須使用 kebab-case）
    參數2
    封裝元件行為的 class
    參數3option
    繼承的 property，可以繼承內置的元素

    Life Cycle

    custom element 有自己的 life cycle。包含 connectedCallback、attributeChangedCallback

    connectedCallback
    再每一次 custom element append 進有 document-connected 的 element 時觸發。會在 element 的 content 尚未完全 parsed 的時候觸發。

    只要 element 不是 connect 狀態，connectedCallback 就會在觸發。可以用 Node.isConnected 確認。

    disconnectedCallback
    相對於 connectCallback

    adoptedCallback
    custom element 每次移到新的 document 時觸發。
    attributeChangedCallback

概述

custom element 通常有 2 種形式。

  • Autonomous custom elements。完全獨立的 element
    不繼承任何其他元素。

    1
    2
    <pop-info>
    document.createElement('popup-info')

  • Customized built-in elements。繼承已存在的 html element

    1
    2
    <p is="word-count">
    document.createElement('p', { is: 'word-count' })

    1. shadow DOM
      shadow DOM 是 web component 封裝 style, html structure.. 的關鍵。

      所謂的 DOM(Document Object Model)。一種樹狀的節點結構。在標記語言中，代表各種不同的元素與文字。

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      <html>
        <head>
          <meta charset="utf-8">
          <title>Simple DOM example</title>
        </head>
        <body>
            <section>
              <img src="dinosaur.png" alt="A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth.">
              <p>Here we will add a link to the <a href="https://www.mozilla.org/">Mozilla homepage</a></p>
            </section>
        </body>
      </html>

      下面是 shadow DOM 的相關術語

      1. shadow host: 一般的 DOM，shadow DOM is attach to
      2. shadow tree: 在shadow DOM 裡的 DOM Tree
      3. shadow boundary: shadow DOM 的結束，DOM 的開始
      4. shadow root: shadow tree 的根節點

      shadow DOM 的優點就是，在 shadow DOM 裡的樣式，不會影響外面的 DOM。但可以在外面是直接影響裡面的 shadow DOM（也可以不）

      其實 shadow DOM 並不是很新的技術，html 5 的 video 就是 shadow DOM 的實作。你會發現影片有很多的元件，播放控制項拉等等，可是無法從外部控制。

MODE
如果設定 `{ mode: 'closed' }`，即表示沒辦法透過 js 取得 `myCustomElem.shadowRoot`。表示沒有辦法透過外層直接改變 shadow DOM 的內容。
  1. html template
使用 web component 可以解決的缺點
  1. 假設要使用別人的 library 可能需要先載入對方套件裡用的 jQuery、css…
  2. css 的 scope 問題。
  3. 相容性：各 framework 的 component 無法共用。如果要把舊專案移植到 React 的話，也是要花一些時間調整。
其他

React 的主旨在於 state 跟 view 的管理方式。
而 web components 在於整理元件的封裝，包含 scoped css 等。

並不是每一個 elemebt 都有 attachShadow 可以使用。

問題
  1. shadow DOM 解決了 css 的問題，也把所有功能都封裝起來。可是，要如何更好寫 html。
    Ans: html Template

REF

https://blog.techbridge.cc/2017/01/06/web-components/

shadow DOM

https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM
https://blog.revillweb.com/open-vs-closed-shadow-dom-9f3d7427d1af

html tempalte

https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_templates_and_slots

http://www.ruanyifeng.com/blog/2019/08/web_components.html

Git

GIT 學習（持續更新）

git fetch

把遠端code拉到本機端

git reset <版本號>^

^ 代表還原到版本號的前一個commit

git stash list

列出所有目前儲藏的項目

git stash save {message}

客製儲存的訊息

git stash apply stash@{index}

將某個儲藏調出來

git stash drop stash@{index}

將某個儲藏刪掉

git commit

1. 撰寫方式

1
2
3
主旨
// 空一行
說明

2. 7種type

  • feat：新功能（feature）
  • fix：修补bug
  • docs：文档（documentation）
  • style： 格式（不影响代码运行的变动）
  • refactor：重构（即不是新增功能，也不是修改bug的代码变动）
  • test：增加测试
  • chore：构建过程或辅助工具的变动

tag

  • 推送單一tag至遠端
    git push {upstream} {tagname}

git merge –squash

遠端操作

添加一個遠端數據庫

1
git remote add <name> <url>

顯示遠端數據庫清單

1
git remote

遠端退版

先在本地端git rest 回你要的版本號後，

1
git push -f

遠端刪除分支

1
git push origin :{你要刪除的分支}

origin 表示遠端的哪個倉庫

rebase 相關

最常出現的情境是，開發都一半，有人把 code 先 push 上去。
當 local 開發完之後，要 push 上去，
才發現本機的 code 已經不是最新版本。
這樣會出現一個 merge commit。

要解決這個問題就是用

1
git pull --rebase

git@2.9.0 開始預設行為不允許合併沒有共同祖先的分支

要的話，可以加 git pull … –allow-unrelated-histories

還原工作目錄與索引，會跟最後一次 commit 保持一樣
git reset –hard
（使用 hard 的話，會拋棄當前工作區的修改）

退回到之前的版本，並且保留當前工作區的修改
git reset –soft <版本號>
 
全部檔案取消索引
git reset HEAD
 
單一檔案取消索引
git reset HEAD 檔案名稱 
 
恢復單一檔案到最新 commit 狀態
git checkout 檔案名稱 
 
刪除最近一次 commit
git reset –hard “HEAD^” 
 
上面語法如果刪除錯了可以再用此語法還原
git reset –hard ORIG_HEAD
 
刪除最近一次 commit，但保留異動內容
git reset –soft “HEAD^” 
 
commit 後發現有幾個檔案忘了加入進去，想要補內容進去時
git commit –amend

對於已經提交的內容，希望 git 能夠忽略，但同時並不會刪除本地文件，要在 terminal 下

1
git rm -r --cached $file_path

合併 commit

如果要合併 commit
可以下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
git rebase -i {要合併 commit 的再前 1 個}

// 接著會出現過去的 commit 紀錄（由舊到新）

pick 2bab3e7 更新 01
pick ca40fc9 更新 02
pick 1de2076 更新 03
pick cd82f29 更新 04

// 把要壓縮的 commit 改為 sqaush

pick 2bab3e7 更新 01
squash ca40fc9 更新 02
pick 1de2076 更新 03
squash cd82f29 更新 04

//
這樣 cd82f29 就會被壓進 1de2076
這樣 ca40fc9 就會被壓進 2bab3e7

GSAP ScrollTrigger

ScrollTrigger 學習

scrollTrigger 設定值

toggleActions
1
toggleActions: 'play none none none'  // default

param1

物件進入視區時，從 scroll-end -> start

param2

如果完全超過被 trigger 物件 endpoint 時

param3

如果物件又反向，回到視區時 scroll-end -> end (反向)

param4

如果物件又反向 完全超過 start 線時 scroll-start -> start(反向)

action 可帶入的值
  • play
  • pause
  • resume
  • reverse
  • restart
  • reset
  • complete
  • none
start
1
start: top center

param1

trigger 物件的觸發設定

param2

視區的觸發設定

scrub
1
scrub: true

物件會隨著 scroll 的比例移動。原本的動畫，只要一 trigger，就會開始執行。可是設定 scrub 之後，動畫就會依 scroll 的比例，跑到相對應的進程。

scrub 也可以給定數字，例如

1
scrub: 1

數字越大表示有越久的時間緩衝到相對應的動畫。

pin
1
2
pin: true
pin: {element}

pin 的意思是指，設定為 pin 的這個物件，會被固定在 trigger 的 scroller-start這條線上，直到 end。

預設 scrolltrigger 會在 pin element 的下方加上 padding。

snap
onEnter

當 scroller-start 從正向經過 start 時

onLeave

當 scroller-end 從正向經過 end 時

id

可以讓 marker 顯示該 scrollTrigger 的名稱。方便有多個 markers 的時候。

也可以透過

1
ScrollTrigger.getById()

取得該 trigger 物件

scroller

預設 scroller 是 window。如果要更改，也可以設定此值。

建議

使用 scrollTrigger 最好的方式是在外層時間軸或是獨立的時間軸

LIFF app 初體驗

LIFF APP 初體驗

LIFF 是一個可以在 LINE 中打開 web 的平台。透過這種方式打開的 web，可以直接拿到使用者允許提供的個人資料。這可以幫助整個流程，不因為外連網頁而中斷。例如說可以在 Chat Bot 中，已經跟使用者進行了一些互動，而接下來的行為較為複雜，可能是抽獎或是其他活動，需要在 web 裡操作更方便。此時透過 LIFF apps，便能更順暢的繼續完成整個流程。

註：應用在 LIFF 的 web，被稱為 LIFF app

所以好處看起來是

  1. 可以無縫串接整個流程，不會因為要外連網頁而中斷使用者體驗。

那要如何開始呢？

首先使用 line 帳號創一個 business 帳號

要創一個 provider，

並在底下建一個 channel，

目前 line 規定必須要增加的是 line login

接著可以照著 line 官方提供的流程

https://github.com/line/line-liff-v2-starter/blob/master/README.md#what-youll-need

我是照 Customize the app and deploy it on Heroku via the terminal 這個流程走的，
透過 heroku 作為伺服器。

首先確定你已準備好幾樣東西

  1. 確定電腦有安裝 git、node.js 和 heroku
  2. 並以建立好 line 的 channel

確定好後，先把 line 官方的 demo code 抓下來

1
git clone https://github.com/line/line-liff-v2-starter

然後在 npm i 安裝其套件

另外也先準備好 heroku 的環境

1
2
3
heroku login
heroku create {Heroku app name}
heroku git:remote -a {Heroku app name}  // 把 heroku 跟 git 專案連起來

接著在回到 line 的官方介面，在你剛剛建好的 channel 新增一個 LIFF

這時候會有一些可以設定的參數

  1. LIFF app name
  2. Size(可以決定 app 打開時有多高)
  3. Endpoint URL(在這邊就是{Heroku app name}.herokuapp.com)

    …等

更詳細的說明在這裏，

https://developers.line.biz/en/docs/liff/registering-liff-apps/

新增完畢之後，記得把 ID 記下來，

然後把 ID 放在 heroku 的環境裡，

你可以透過 

1
heroku config:set MY_LIFF_ID={liffId}

也可以直接透過 heroku 的後台介面新增。

最後再把專案推上去。

1
2
3
git add .
git commit -m "My first commit"
git push heroku master

之後在 line 中點擊網址（https://{Heroku app name}.herokuapp.com），你就可以開啟你的 LIFF APP。




ref


https://github.com/line/line-liff-v2-starter/blob/master/README.md#Customize-the-app-and-deploy-it-on-Heroku-via-the-terminal


https://medium.com/aiii-ai/line-liff-%E5%8F%AF%E4%BB%A5%E5%81%9A%E4%BB%80%E9%BA%BC-eb2ca40147ac