[Eggplant] 降低解析度來增加vnc的傳輸速度

提昇vnc畫面的傳輸速度

iOS Gateway

Options 勾選 Faster Screen Updates

Connection List

vnc options 勾選Scale Remote Screen

解析度會降低，因ｉｐｈｏｎｅ預設的解析度都很高，所以在錄前就要決定要不要開這個模式，

否則之後開圖片會抓不到Q_Q

[CSS] 實作不對稱設計（Asymmetrical Designs）

透過ｃｓｓ的語法可以實作各式的不對稱DIV區塊，

使用Pseudo-Elements或Clip-Path都可以達成

可以讓網站的設計不用特別請設計師輸出圖片。

最後透過 CSS clip-path maker 這個網站工具就更操作直覺了

https://www.viget.com/articles/angled-edges-with-css-masks-and-transforms/

https://medium.com/@RoseLGauthier/how-to-use-css3-pseudo-elements-to-create-asymmetrical-designs-f610f2a481ed

http://jsfiddle.net/948ud6f7/

４０種以上常見圖形

https://css-tricks.com/the-shapes-of-css/

[Eggplant] 有效提升搜尋的準確度與速度

減少搜尋整個畫面是可以提升Eggplant Functional在搜尋目標（Text/Search）的速度，

可動態的去改變SearchRectangle的範圍即可。

以下記錄常用的方式

[Eggplant] Functional | 基本指令記錄－常處理商業邏輯會用到的

 記錄每次錄製都會再查一下的指令集

List 操作

取list某個值

put ["cheddar","provolone","brie","muenster","mozzarella"] into CheeseList

put item 1 of CheeseList // displays "cheddar"

如果要插入值進list

insert testScript after failTestScripts

[Eggplant] Functional常見問題 | 連線裝置解析大小不一致的問題？

 在透過連線受測裝置iphone裝置時，常會有解析度不一樣的尺寸發生？會造成以下問題：

1. 有辦法強制設定解析度大小？或

2. 解析度是不會影響錄製？目前覺得錄製大解析度擷圖與電腦會比較花費效能

1125X2436

307X460

GA4 自訂事件｜ga.js / gtag.js

REF

https://support.google.com/analytics/answer/10106774?hl=zh-Hant&ref_topic=10737980

https://support.google.com/analytics/answer/9234069

Gtag.js教學

https://developers.google.com/analytics/devguides/collection/gtagjs/events

PageSpeed調校: core web vitals

 記錄一下調校Pagespeed的一些現像

處理掉破圖的連線圖片，避免畫面loading等待

Google Fonts載入優化

用Cloudflare Business CDN載入速度比用cdnjs.cloudflare.com的慢一些

Cloudflare Business CDN  80ms

cdnjs.cloudflare.com CDN 58ms

第三方函式庫只在行動裝置被掃到扣分

[Eggplant] Functional 關閉預設的執行錯誤alert視窗

如果想要在執行eggplant functional錯誤提示訊息框，避免中斷測試，可以至偏好關閉(Prefermance )

Alert user when script execution fails: Selected by default. Select this checkbox to see an alert dialog box when a script fails. (This option does not apply to scripts that are run as part of a schedule.)

REF:

http://docs.eggplantsoftware.com/ePF/using/epf-general-preferences.htm

WebFont使用方式： 包含font-weight/swap

如何透過WebFont加載字型

WebFont.load({

            timeout: 2000,

            google: {

                families: ['Noto Sans TC:100,300,500,700,900&display=swap', 'Roboto&display=swap']

            }

        });

再加上以下優化CVS效能

<link rel="dns-prefetch" href="//fonts.googleapis.com">

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

如果你想用引用的方式也可以使用下面的語法

<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500&display=swap"   rel="stylesheet">

Ref:

https://github.com/typekit/fvd

https://github.com/typekit/webfontloader/issues/429

各種所見即所的的開源編輯器蒐集 WYSIWYG HTML editor

做解決方案的case常需要找編輯器來套用。

畢竟做一個編輯器大到可以是一整間公司來開發產品，

蒐集一下一些免費的開源編輯器工具。

https://summernote.org/

個人最愛，但目前缺點是表格的支援度不夠好(有找到外掛，但目前遇到升級有bug)，

https://github.com/ksy11/summernote-ext-table

https://grapesjs.com/

web builder framework 可以做整個網頁等級的編輯器XD

線上電商平台類似的網頁編輯器，有大量元件可以使用

https://editorjs.io/

Next generation block styled editor.
Free. Use for pleasure.

新潮的區塊編輯器，將編輯器的結果存成json格式，這樣後端就很好存到ｄｂ

https://quilljs.com/

類editorjs等級的，但github的觀注度比editor.js多很多