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

老牌的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/

[CSS] backdrop-filter 濾鏡背景效果-

backdrop-filter背景濾鏡與濾鏡屬性具有相同的效果，
只不過濾鏡效果僅應用於背景，
而不應用於元素的內容。
*不支援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/

[ga] cookie隱私權關掉GA的方法

如果要為了一些cookie歐洲的隱私權政策，可以透過以下方法停用GA

analytics.js 库包含一个 window 属性，您只要将其设为 true，就可以禁止 analytics.js 向 Google Analytics（分析）发送数据。当 Google Analytics（分析）要设置 Cookie 或将数据发回到 Google Analytics（分析）服务器时，会首先检查此属性是否已设置为 true。如果已设置为 true，则不采取任何操作。

要停用衡量功能，请将以下 window 属性设置为 true：

window['ga-disable-UA-XXXXX-Y'] = true;




https://developers.google.com/analytics/devguides/collection/analyticsjs/user-opt-out

[page speed] CLS

 https://web.dev/cls/#how-to-improve-cls

https://web.dev/optimize-cls/

[cloudflare] Service Worker

參考 

https://blog.cloudflare.com/cloudflare-workers-unleashed/

https://github.com/cloudflare/worker-examples

https://github.com/cloudflare/worker-examples/tree/master/examples/edge-cache-html

https://levelup.gitconnected.com/use-cloudflare-javascript-workers-to-deploy-you-static-generated-site-ssg-1c518e078646

[mysql] /var/log/mysql/error.log 權限錯誤無法寫入 could not open file

因為ｖｍ容量不足清了ｌｏｇ，直接把/var/log／下面的東西砍光。

結果ｖｍ就炸開了(Apache2/Mysql都壞掉)。

在啟動ｍｙｓｑｌ時會有噴錯誤訊息，如下

依次把權限照以下的指令打一打就正常了

# chown mysql:adm /var/log/mysql/error.log
# chown mysql:adm /var/log/mysql
# chown root:syslog /var/log
# chown root:root /var
# chmod 0640 /var/log/mysql/error.log
# chmod 0750 /var/log/mysql
# chmod 0775 /var/log
# chmod 0755 /var

eggplant BDD相關

BDD

https://ithelp.ithome.com.tw/articles/10226615

https://cucumber.io/docs/gherkin/reference/

https://tw.alphacamp.co/blog/bdd-tdd-cucumber-behaviour-driven-development

http://docs.eggplantsoftware.com/ePF/using/epf-running-gherkin-tests.htm

https://github.com/perkss/eggplant

TDD

https://medium.com/@onejar99/tdd%E4%BA%94%E6%AD%A5%E9%A9%9F-%E6%89%8B%E6%8A%8A%E6%89%8B%E5%B8%B6%E4%BD%A0%E5%AF%A6%E6%88%B0-test-driven-development-%E7%AF%84%E4%BE%8B-42e6ef63a718

bootstrap3 網站RWD斷點規畫

 /*========== Mobile First Method ==========*/

/* Custom, iPhone Retina */ 
@media only screen and (min-width : 320px) {

}

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) {

}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {

}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {

}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {

}



/*==========  Non-Mobile First Method  ==========*/

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {

}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {

}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {

}

/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 480px) {

}

/* Custom, iPhone Retina */ 
@media only screen and (max-width : 320px) {

}

Ref:
https://stackoverflow.com/questions/19592968/bootstrap-3-breakpoints-and-media-queries

[jQuery外掛] owlcarousel2支援垂直的應用

利用Owlcarousel2做出垂直的效果，

可以透過ｃｓｓ動畫改變滑動的方向

https://owlcarousel2.github.io/OwlCarousel2/demos/animate.html

https://codepen.io/thirdender/pen/aOYyGb

另外有一個貼近客戶需求的外掛RoyalSlider

https://lowercolumbia.edu/_resources/plugins/royal-slider/templates/video-gallery/

[eggplant] 客戶問題: 無法透過RDP連線處理

方法一

To enable RDP connection debug logs:
1.    Create an environment variable in Windows on the EPF machine - WLOG_LEVEL and give it a value DEBUG.
2.    Create a script in EPF that connects to a SUT using its name in the Connection List:
Connect “WIN-DS-EGGPLANT-SC”
Log ConnectionInfo()
Log “Waiting for 30 seconds…”
Wait 30
Disconnect
3.    Run the script in cmd using runscript:
 runscript.bat --commandlineoutput yes C:\CodeRepository\Suite-1.suite\Scripts\ConnectSmartCardTest.script

4.    Copy the cmd output to a text file.


方法二

The RDP DLLs that come with the newer versions of Eggplant Functional are different from the ones that come with version 18. There are some security restrictions on the SUT machines that do not allow the connection from EPF.
To try to overcome this, please try the following:

Try entering the hostname of the SUT instead of its IP address and see if it makes a difference. If not, try the following:
1. Quit Eggplant Functional.
2. Open a cmd prompt and go to the EPF installation directory.
3. Enter the following command:
defaults write Eggplant -rdpNlaSecurity NO
4. Open EPF again and try to connect.
5. If that doesn't help, quit EPF again and try the following command:
defaults write Eggplant rdpRdpSecurity NO

[Eggplant] Eggplant AI新手教學系列 (1)

本系列將快速介紹Eggplant AI的安裝過程。

1. 測試環境為Win10
2. AI的版本的4.0b版

[Flickr] 圖片網址無法讀取410錯誤

今天發現Flickr的圖片連結在Blog的圖片顯示異常，

最後查了一下原來是先前相本的權限有變更私人瀏覽，

如下圖所示

導致先前的圖片網址最後一段的secret碼會變動

（先前有試過剛發佈文章在關相本權限是可以正常瀏覽的），

所以就要透過flickr flickr.photos.getInfo的API來查詢相片的相關資訊，

在回傳ｊｓｏｎ裡面有secret，把它取代回去失效的網址即可回覆正常。

所以還是不要亂動相本的權限，每次變動secret碼會變動的。

有興趣的可以看以下flickr的技術文件。差不多十年以上沒變更了。

不知什麼時候會倒～誤

相片來源 URL

知道相片的 ID、伺服器 ID、農場 ID 和密鑰（如許多 API 方法返回的那樣）後，你便可構建連結至相片的來源 URL。

URL 會採用以下格式：

https://farm{farm-id}.staticflickr.com/{server-id}/{id}_{secret}.jpg
 or
https://farm{farm-id}.staticflickr.com/{server-id}/{id}_{secret}_[mstzb].jpg
 or
https://farm{farm-id}.staticflickr.com/{server-id}/{id}_{o-secret}_o.(jpg|gif|png)

* 2011 年 11 月 18 日前，API 傳回的圖片 URL 帶有以下主機名稱： 「farm{farm-id}.static.flickr.com」。 目前仍支援這些 URL。

後綴分類

字母後綴如下：

s	小正方形 75x75
q	large square 150x150
t	縮圖，最長邊為 100
m	小，最長邊為 240
n	small, 320 on longest side
-	中等，最長邊為 500
z	中等尺寸 640，最長邊為 640
c	中等尺寸 800，最長邊為 800†
b	大尺寸，最長邊為 1024*
h	大型 1600，長邊 1600†
k	大型 2048，長邊 2048†
o	原始圖片, 根據來源格式可以是 jpg、gif 或 png

*2010 年 5 月 25 日之前，大相片僅適用於特別大的原始圖片。

† 中型 800、大型 1600 和大型 2048 相片僅存在於 2012 年 3 月 1 日之後。

注意︰原始相片會有些許不同。他們有自己的密鑰（在回覆中稱為 originalsecret）和變數副檔名（在回覆中稱為 originalformat）。僅當呼叫程式具有檢視原始尺寸的權限（取決於使用者偏好和其他各種標準）時，透過 API 傳回這些值。這些值由 flickr.photos.getInfo 方法和諸如 flickr.photos.search 等可傳回相片清單並允許 extras 參數（具有值 original_format）的所有方法來傳回。flickr.photos.getSizes 方法總是會傳回允許權限的完整的原始 URL。

範例

https://farm1.staticflickr.com/2/1418878_1e92283336_m.jpg

farm-id: 1
server-id: 2
photo-id: 1418878
secret: 1e92283336
size: m

[eggplant] IE webdrive無法連線

IE webdrive第一次連線失敗發生以下訊息

Protected Mode settings are not the same for all zones. Enable Protected Mode must be set to the same value (enabled or disabled) for all zones. (WARNING: The server did not provide any stacktrace information).

修正安全性設定即可修正問題

將每一個選項內的啟用受保護程式的checkbox打勾

IE網際網路選項

接著再重新連接一次裝置即可正常

直接開啟Xcode的模擬器

很多時候需要開模擬器來測試客戶用不同裝置的瀏覽狀況，
這時候可以從cmdline直接下以下指令比較方便

open -a Simulator.app

[Eggplant] 透過命令行的runscript指令來執行suite的測試

在透過EPF撰寫完相關的suite後，在不同主機上執行suite，就不用再開EPF了。
只要透過runscript指令即可呼叫。

首先先安裝runscript指令（這樣就免除需要執行完整的路徑）

Important: For Mac installations of Eggplant Functional version 18.0 and later, the path to call the runscript command has changed to /Applications/Eggplant.app/Contents/MacOS/runscript. 

Eggplat->Perference->Run，接著按install runscript in /usr/local/bin即可

[Eggplant] 使用shell指令執行Java Jar

測試如何shell執行java包出的jar檔應用，並把執行結果取出。

測試一般jar檔執行

MacBook-Pro-8:eggplant_cmd bigd$ java -cp JarDemo.jar com.test.jardemo.TestJar "Hello World" "Ken"

輸入參數0:Hello World

輸入參數1:Ken

//存放shell輸出的東西

set destinationFile to "/Users/bigd/Downloads/shellOutput.txt"

//Users/bigd/Downloads/eggplant_cmd

shell "java -cp /Users/bigd/Downloads/eggplant_cmd/JarDemo.jar com.test.jardemo.TestJar 'Hello World' 'Ken' >"  & destinationFile

put file destinationFile into shellOutput

//LogSuccess file destinationFile

log shellOutput

//砍掉檔案

delete file destinationFile

參考

https://sites.google.com/site/waue0920/Home/java/java-de-da-bao-chengjar-fang-fa

[Vscode] Beautify 如何自訂快捷鍵

剛裝了vscode，寫前端立馬找了Beautify套件。
但為了設快捷鍵找了一會，順便筆記一下

我用的是mac的vscode，以下記錄一下自訂流程

[Eggplant] shell cmd 執行window batch

簡單的呼叫bat檔的測試案例，並可將bat的執行結果輸出在txt檔上

(*

http://docs.testplant.com/ePF/SenseTalk/stk-system-interaction.htm#shell

*)

//set the shellCommand to "ShellExecute"

//run bat 

shell "c:\windows\system32\cmd.exe", <

> ">C:\Users\bigd\Downloads\ShellOutpoutFile.txt"

//read bat result from output file

put file "C:\Users\bigd\Downloads\ShellOutpoutFile.txt" into ShellLog

//print outputfile info

log "Shell content from TxtFile"

log ShellLog

http://docs.testplant.com/ePF/SenseTalk/stk-system-interaction.htm

[Eggplant] 【進階範例】SUT斷線重新連結