Adsense廣告單元設定

ADSENSE提供新式的自動廣告協助網站快速插入廣告，

但有的網頁的版面自動插入的廣告有可能不是我們預期的大小。

所以可以再透過廣告單元的設定，來維持乾淨的版面

szimek / signature_pad 實作網頁簽名

愈來愈多透過網頁實作簽名的系統，因為不用再開發ａｐｐ成本比較低。

找了signature_pad這個元件，有機會要來整合看看。

之後undo/變字體顏色/另存圖檔(png/jpg/svg，可以回傳自已的server做記錄)

 https://github.com/szimek/signature_pad

Face book轉換api串接

fb轉換api

標準事件列表

伺服器參數說明

user_data欄位說明

[Eggplant Functional] SenseTalk: 將Excel透過Database的方式來操作

除了透過檔案的方式來操作Excel，也可以將Excel透過Database的形式來操作。

個人更覺得更好操作。

以下範別就是想要把測試案例的結果另外存到一份Excel，這樣long testing就可以比較好撈資料

//連線Excel，開啟唯讀模式 

set myExcelDB to {type:"excel", file:excelPath, writable: Yes}

//sheet name當table name

put table worksheet of myExcelDB into sheetTable

//建立要寫入的物件

put the date into currentDateObj

put {TEST_CASE:testcase, DATA_JSON:valueWithJSONString,DATE:currentDateObj} into testresult

//寫入一列

add record testresult to table worksheet of myExcelDB 

Working with Excel as a Database

GA4-差異心得

如何選擇GA4?

如果業務範圍沒有要APP的應用，就不需要了。

但GA4的智慧功能比較多，例如一些智慧分析報表(有ai就會節省一些操作)

ps: GA3暫時不會有下線的消息，有可能未來也改為行號

可以同時安裝GA3與GA4

官方建議

07: gtag('config', '<特定資源 ID GA3>');

09: gtag('config', '<特定資源 ID GA4>');

資源 ID 可用來代表針對不同 Google 產品收集到的評估資料，包括

1. 通用 Analytics (分析) 資源 (「UA-XXXXXXXX」)、
2. Google Analytics (分析) 4 資源 (「G-XXXXXXXX」)、
3. Google Ads (「AW-XXXXXXXX」) 及
4.  Floodlight (「DC-XXXXXXXX」)。

gtag.js程式說明 

https://support.google.com/analytics/answer/9310895?hl=zh-Hant#zippy=%2C%E6%9C%AC%E6%96%87%E5%85%A7%E5%AE%B9

[Eggplant] SenseTalk JSON資料操作

JSON已經是普遍的資料交換標準，可以簡單跟不同程式間作為溝通的橋樑。

SenseTalk提供JSONFormat/JSONValue二個方法來讓用戶使用

JSONValue

將json string轉換到json object於sensetalk使用

PS:要注意json字串要有雙引號，否則會解析錯誤

MockDataFromExcel "PM","ETS_PM_0008"

put the result into mockTicket

log mockTicket

put JSONValue(mockTicket) into ticketInfoWithJSON

log ticketInfoWithJSON's reserveNo

2021/8/8, 2:36:12 PM Log {"carType":"標準車廂", "count":"1", "date":"2021/07/30", "depature":"14:46", "end":"台中", "full":1, "fullSubTotal":"700", "no":"651", "reserveNo":"06264014", "seat":"window", "start":"台北", "subTotal":"TWD 700", "trainTimeType":">60", "type":"單程"}

2021/8/8, 2:36:12 PM Log 06264014

JSONFormat

put JSONFormat(ticketInfoWithJSON) into ticketInfoWithJSONString

log ticketInfoWithJSONString

當然也可以在把json object轉回string回存，中文也可以正常編碼

2021/8/8, 2:36:17 PM Log {

  "carType": "\u6a19\u6e96\u8eca\u5ec2",

  "count": "1",

  "date": "2021/07/30",

  "depature": "14:46",

  "end": "\u53f0\u4e2d",

  "full": 1,

  "fullSubTotal": "700",

  "no": "651",

  "reserveNo": "06264014",

  "seat": "window",

  "start": "\u53f0\u5317",

  "subTotal": "TWD 700",

  "trainTimeType": ">60",

  "type": "\u55ae\u7a0b"

}

[Angular] FB CAPI 轉換API串接

REF:

https://fixel.ai/blog/creating-a-simple-conversions-api-for-your-facebook-pixel-events/

https://github.com/facebook/facebook-php-business-sdk?fbclid=IwAR3668-yTjcGQ_wr3Ewd1O3o7tWmW1rvwBM68O2uZ-4hWR-EAfX9IQN99Mk

https://developers.facebook.com/docs/marketing-api/conversions-api

[CSS] 純CSS- 背景漸變效果linear-gradient實做表格中的對角線（diagonal）效果

最後用最簡單的方法，在td內放入一個元素

並使用linear-gradient語法

<div class="diagonal"></div>

/*模擬對角線*/

div.diagonal{

display: block;

position: absolute;

width: 100%;

height: 100%;

top: 0;

left: 0;

z-index: 1;

content: '';

width: 100%;

background: linear-gradient(to top right,rgb(235, 218, 203) calc(50% - 1px), #fff , rgb(235, 218, 203) calc(50% + 1px) )

}

How to Draw Diagonal Line with CSS
Naveno Cendikiawan

 https://codepen.io/navenoc13/pen/YzpXrOg

[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多很多

localstorage 子網域共用的可能性？

https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy

Angular 1.5 觸發表單驗證

常用的方法，簡單的表單驗證由控制器觸發

//submit後觸發驗證

$scope.validateByManual = function(form) {

logger.debug('validate');

angular.forEach(form, function (control, name) {

// Excludes internal angular properties

if (typeof name === 'string' && name.charAt(0) !== '$') {

logger.debug('field name:' + name);

// To display ngMessages

control.$setTouched();

control.$setDirty();

// Runs each of the registered validators

control.$validate();

}

});

}

有效清除沒有使用的CSS

避免套用樣版時，大多的css沒有用到造成不必要的運算與檔案大小

 Cleaning unused CSS with Purgecss and Laravel Mix - TalvBansal.me

複製word常見的語法

class="MsoNormal"
class="MsoListParagraph"

用excel做簡單的資料庫，來幫自已跟客戶節省時間

有的時候想要做簡單的功能給沒有預算做後台預算的客戶，

這時候就會用excel格式請客戶填，來當假的資料庫（量小的話）

步驟一：Exceo to JSON (https://beautifytools.com/excel-to-json-converter.php)

接著再上傳的excel的網站拿到一串字串

步驟二：用php decode

phtp 去讀這串變數，就可以不用每次再幫客戶貼code

備註:如果要用array物件的話，只要json_decode第二個參數下true即可

讓網頁生動起來的動畫套件大蒐集，讓你的案子可以多收一點錢錢 （誤）

老牌的wow.js (可搭配animate.css v3/v4都可) 

https://wowjs.uk/ 

AOS NEW!!! 

https://github.com/michalsnik/aos#animations

Stellar幾年前流行的視差滾動套件

https://github.com/markdalgleish/stellar.js

Scroll me (支援translate)

http://scrollme.nckprsn.com/

Tilt.js （不需要用css）

https://micku7zu.github.io/vanilla-tilt.js/