Options 勾選 Faster Screen Updates
Connection List
vnc options 勾選Scale Remote Screen
解析度會降低，因ｉｐｈｏｎｅ預設的解析度都很高，所以在錄前就要決定要不要開這個模式，
否則之後開圖片會抓不到Q_Q
星期一, 7月 26, 2021
星期日, 7月 25, 2021
[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/
星期日, 7月 18, 2021
[Eggplant] 有效提升搜尋的準確度與速度
減少搜尋整個畫面是可以提升Eggplant Functional在搜尋目標（Text/Search）的速度，
可動態的去改變SearchRectangle的範圍即可。
以下記錄常用的方式
星期六, 7月 17, 2021
[Eggplant] Functional | 基本指令記錄－常處理商業邏輯會用到的
記錄每次錄製都會再查一下的指令集
List 操作
取list某個值
put ["cheddar","provolone","brie","muenster","mozzarella"] into CheeseListput item 1 of CheeseList // displays "cheddar"
如果要插入值進list
insert testScript after failTestScripts
[Eggplant] Functional常見問題 | 連線裝置解析大小不一致的問題？
在透過連線受測裝置iphone裝置時，常會有解析度不一樣的尺寸發生？會造成以下問題：
1. 有辦法強制設定解析度大小？或
2. 解析度是不會影響錄製？目前覺得錄製大解析度擷圖與電腦會比較花費效能
1125X2436
307X460
星期一, 7月 12, 2021
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
星期日, 7月 11, 2021
PageSpeed調校: core web vitals
記錄一下調校Pagespeed的一些現像
處理掉破圖的連線圖片，避免畫面loading等待
Google Fonts載入優化
用Cloudflare Business CDN載入速度比用cdnjs.cloudflare.com的慢一些
Cloudflare Business CDN 80ms
cdnjs.cloudflare.com CDN 58ms
第三方函式庫只在行動裝置被掃到扣分
星期四, 7月 08, 2021
[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
星期三, 7月 07, 2021
各種所見即所的的開源編輯器蒐集 WYSIWYG HTML editor
做解決方案的case常需要找編輯器來套用。
畢竟做一個編輯器大到可以是一整間公司來開發產品，
蒐集一下一些免費的開源編輯器工具。
https://summernote.org/
個人最愛，但目前缺點是表格的支援度不夠好(有找到外掛，但目前遇到升級有bug)，https://grapesjs.com/
web builder framework 可以做整個網頁等級的編輯器XD
線上電商平台類似的網頁編輯器，有大量元件可以使用
https://editorjs.io/
Next generation block styled editor.Free. Use for pleasure.
新潮的區塊編輯器，將編輯器的結果存成json格式，這樣後端就很好存到ｄｂ
星期一, 6月 14, 2021
星期四, 6月 10, 2021
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();
}
});
}
星期六, 5月 29, 2021
有效清除沒有使用的CSS
避免套用樣版時，大多的css沒有用到造成不必要的運算與檔案大小
Cleaning unused CSS with Purgecss and Laravel Mix - TalvBansal.me
星期三, 5月 26, 2021
用excel做簡單的資料庫，來幫自已跟客戶節省時間
有的時候想要做簡單的功能給沒有預算做後台預算的客戶，
這時候就會用excel格式請客戶填，來當假的資料庫（量小的話）
步驟一：Exceo to JSON (https://beautifytools.com/excel-to-json-converter.php)
接著再上傳的excel的網站拿到一串字串
步驟二：用php decode
phtp 去讀這串變數，就可以不用每次再幫客戶貼code
星期二, 4月 06, 2021
讓網頁生動起來的動畫套件大蒐集，讓你的案子可以多收一點錢錢 （誤）
老牌的wow.js (可搭配animate.css v3/v4都可)
AOS NEW!!!
Stellar幾年前流行的視差滾動套件
Scroll me (支援translate)
Tilt.js （不需要用css）
星期五, 12月 18, 2020
[CSS] backdrop-filter 濾鏡背景效果-
backdrop-filter背景濾鏡與濾鏡屬性具有相同的效果，
只不過濾鏡效果僅應用於背景，
而不應用於元素的內容。
*不支援IE
只不過濾鏡效果僅應用於背景，
而不應用於元素的內容。
*不支援IE
https://css-tricks.com/almanac/properties/b/backdrop-filter/
[AngularJS] 1.x 表單驗證記錄
久久要加新的表單都會忘了(可能也沒有人用這麼舊的ng版本Orz)，多開一個筆記記錄一下：
表單model
在控制器觸發每一個欄位做驗證
客戶希望都能按按鈕觸發未填寫的欄位驗證，原本都是沒填完整就是無法按按鈕（可能有些用戶無法明確發現哪些欄位沒填）
//submit後觸發驗證
function validateByManual(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();
}
});
}
$scope.setContactUsEmail = function (contact) {
logger.debug('setContactUsEmail');
// alert($scope.contactUsEmailForm.$invalid);
// $scope.contactUsEmailForm.$setSubmitted();
if ($scope.contactUsEmailForm.$invalid) {
// alert('invalid form');
// $scope.contactUsEmailForm.$setDirty();
// $scope.contactUsEmailForm.$setPristine();
validateByManual($scope.contactUsEmailForm);
}else{
//成功的話就送api
}
}
https://steelkiwi.com/blog/validation-error-handling-angularjs-applicatios/
星期三, 12月 16, 2020
[ga] cookie隱私權關掉GA的方法
如果要為了一些cookie歐洲的隱私權政策，可以透過以下方法停用GA
analytics.js 库包含一个 window 属性，您只要将其设为 true，就可以禁止 analytics.js 向 Google Analytics（分析）发送数据。当 Google Analytics（分析）要设置 Cookie 或将数据发回到 Google Analytics（分析）服务器时，会首先检查此属性是否已设置为 true。如果已设置为 true，则不采取任何操作。
要停用衡量功能，请将以下 window 属性设置为 true：
https://developers.google.com/analytics/devguides/collection/analyticsjs/user-opt-out
星期二, 12月 15, 2020
訂閱：
意見 (Atom)
其他你感興趣的文章
