使用embeddedfolderview把google drive雲端硬碟的資料夾嵌入網頁內

如果單純只是要用iframe把google的雲端硬碟嵌入網頁內，可以使用以下語法
語法中的{GoogleFolderShareId}指的就是分享google drive取得的網址內的參數
網址後方接上#grid那麼網頁上瀏覽時就會是以預覽小圖的方式呈現，如果把#grid拿掉那麼就會是以列表的方式呈現

<iframe src="https://drive.google.com/embeddedfolderview?id={GoogleFolderShareId}#grid" style="min-height:100vh;" height="100%" width="100%" frameborder="0" marginheight="0" marginwidth="0">載入中…</iframe>

另外一個可以使用object，好處是當假設目錄是公開的，則任何登入 Google 的人都會看到該目錄的資料夾視圖。否則，就會看到替代的文字鏈接「點擊此連結查看目錄內容」：

<object data="https://drive.google.com/embeddedfolderview?id={GoogleFolderShareId}#grid" width="100%" style="height:100vh" >點擊<a href= "https://drive.google.com/drive/folders/{GoogleFolderShareId}">此連結</a>查看目錄內容</object>

再Chrome上關閉單獨input欄位的autocomplete

在chorme上 html內的input加上autocomplete=off並不能禁止該欄位不自動輸入， google後得到可解決的方案如下： 只需將自動完成設置為獨特的即可。如："autocomplete="new-user-email"

<input class="textInput" id="useremail" name="useremail" autocomplete="new-user-email" type="text"/>

google chrome team的回覆如下：
autocomplete=off 禁用自動完成，但保持自動填充啟用。
autocomplete=garbage 禁用自動填充，但保持自動完成啟用。
自動填充嘗試根據您在 chrome://settings/autofill 中保存的數據填寫表單。
自動完成嘗試根據先前在字段中輸入的值來填充字段。 參考此篇：https://bugs.chromium.org/p/chromium/issues/detail?id=1434624

【PHP】關於$_SERVER['HTTP_HOST']在crontab上會失效的問題 Cron Job $_SERVER issue

在使用crontab排程時，因為程式內使用到了$_SERVER['HTTP_HOST']來擷取網址段，因而發生錯誤。

當時既透過網址執行時 $_SERVER['HTTP_HOST'] 可以正確取得域名，但是當相同一段程式透過crontab排程運行時，$_SERVER['HTTP_HOST']就無法成功讀取且會判斷為空值。

搜尋網路似乎還是有其他方法取代，先行紀錄之後再做研究。

參考網址

【css】使用display flex時圖片高度會拉高的問題

當某容器(.container)使用display:flex屬性且容器高度為100%時，發現內部的<img>標籤圖檔高度也會自動延伸拉高為100%，只要在.container上加上下面標註的兩個屬性就可修正

.container{ 
width: 970px;
height: 100%;
display: flex;
align-items:flex-start;
align-content:flex-start;
}

css使用flexbox處理垂直居中的版面

使用flexbox處理垂直居中，最快速簡便的模式只要在上層使用display:flex，要置中的子項目加上margin:auto即可

css部分

html,body{
	margin: 0;
	padding: 0;
	width:100%;
	height:100%;
}
.wrapper{
	width:100%;
	height:100%;
	display: flex; // 在上層使用flex
	background: pink;
}

.child{
	width: 300px;
	height: 300px;
	background: blue;
	margin: auto; // 要置中的子項目樣式加上margin:auto即可
	display: flex; // 在上層使用flex
}

.child p{
	color: #fff;
	margin: auto; // 要置中的子項目樣式加上margin:auto即可
}

html部分

<div class="wrapper">
	<div class="child">
		<p>上下左右置中的內容</p>
	</div>
</div>

呈現的結果

解決新版google chrome 影片或聲音無法自動播放的問題 (Fix google chrome Autoplay policy)

google chrome在76版後把chrome://flags內的autoplay policy移除了
這樣對做單機版或是需要特定網址能執行影片或聲音autoplay的開發者影響很大

經過一番搜尋研究，目前可解決的方式如下：

A.經由Chrome的設定

1. 開啟chrome的設定
   (chrome / setting)
2. 點擊左側的「進階」內的「隱私權和安全性」
   (Advanced / Privacy and Security )
3. 點擊右側視窗的「網站設定」內的「音訊」
   (Site Settings / Sound)
4. 開啟「允許網站播放音訊」的選項
   (Enable Allow Sites to Play Sound)
5. 新增允許自動播放的網址，如果檔案放在本機播放的話可輸入如下：
   localhost:8080  <-- 後面的port號視自己開放的port而定
   * 無法直接設定檔案位置 如：file://users/xxx/www/index.html 
   (Add the URL (localhost, etc) to the Allow area)
6. 關閉並重新啟動chrome，在網址列輸入localhost:8080 即可
   (Close and re-open chrome)

B.經由Command line加上參數執行chrome這一個方法，據說是google官方開發人員表明會保留的語法，那就是以command line的方式執行

MacOS :

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --autoplay-policy=no-user-gesture-required

Windows :
可以新增一個chrome的執行捷徑，在捷徑icon上點擊滑鼠右鍵選「內容」，在「目標」欄位內"C:\Program Files\Google\Chrome\Application\chrome.exe"的後方加上

--autoplay-policy=no-user-gesture-required

整句如下：(注意chrome.exe後方的空格)

"C:\Program Files\Google\Chrome\Application\chrome.exe" --autoplay-policy=no-user-gesture-required

或是撰寫一個.bat檔案把執行語法加上然後丟進windows的啟動資料夾，那麼開機後就會自動執行，bat上的語法如下

@echo off
start chrome.exe http://localhost:5438/ --kiosk --autoplay-policy=no-user-gesture-required

分享到Line的連結，點擊後用預設瀏覽器開啟 line link open in default browser

在Line上面分享的連結，用手機瀏覽點擊後會開啟Line app內的瀏覽器in-app-bbrowser，
以這種UIWebView方式開啟網頁會導致一些javascript語法或功能失效
解決方式：
在分享到line的連結後面加上一段 ?openExternalBrowser=1 就可以了。

譬如：https://yahoo.com.tw/?openExternalBrowser=1

加上該參數的網址分享到line上面，收到訊息的那一方點擊後就會跳出用手機預設的瀏覽器開啟了。

另外也不一定要每段分享的連結都加，如果只是網頁內的某個連結希望點擊後是用手機預設瀏覽器開啟，那網頁內寫那段連結時只要在連結後面加上?openExternalBrowser=1 即可

這樣使用者用app內瀏覽器瀏覽網頁時只要點到那個連結，就會開啟手機預設的瀏覽器去瀏覽連結頁面。

ajax 送出form資料時以javascript語法console.log出FormData用來檢查表單資料的方法

以form方式用ajax送出表單時，用以下javascript語法可以console.log要送出的資料，方便做檢查使用：

var formid=$('#myForm'); //#myForm是表單的ID
var formData = new FormData(formid[0]); 
for (var pair of formData.entries()){ 
   console.log(pair[0]+ ' ----> ' + pair[1]); 
}

修改並自定義 mac coding軟體sublime text 及 coda 2的emmet外掛

emmet for coda版本的外掛能夠自己定義預設的一些文字
 譬如輸入!按下Ctrl+e 通常會出現:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>

</body>
</html>

雖然很方便 但是有些地方還要自己修改，譬如上面的en
希望能夠ctrl+e後可以自動變成慣用或常用的語言(如：tw)

這時候可以透過修改emmet的snippets.json檔案來達成

原本coda內的emmet這個snippets.json是存在如下圖的位置



但是emmet的設定內可以自己在自訂的位置新增一個snippets.json檔案，
並且在裡面自己定義一些內容，步驟如下：

Step 1.
以lang舉例：
寫了lang的自定義如下，把原本的"lang":"en"改為"lang":"tw"(寫法可以參考上方原檔案內的方式)，寫好後存成snippets.json放在自己想要的資料夾內。



Step 2.
在coda軟體上方選單列點選Emmet/Preferences，進入Emmet的設定



Step 3.
點擊Browser選取自己剛剛存的snippets.json所在的資料夾位置，
然後關閉這個設定視窗




之後只要重新啟動coda，新開一個檔案輸入! 然後按下ctrl+e
接者就會看到新的設定生效囉！！




PS. sublime text 基本上也是一樣的做法
在Package Settings內把emmet的Settings - Default所有內容copy一份
然後貼到Settings - Users內，
然後把裡面的"extensions_path": "~/emmet" 這一行
後面的emmet是預設的路徑，
把它改到snippets.json的存放資料夾即可

用photoshop 壓縮優化png圖檔，減少圖檔大小 避免造成網頁loading過重

做網頁儲存png圖檔時，常常檔案很大會造成網頁loading較重
可使用photohsop內的 影像/調整/色調分離 來降低圖檔內的色階
然後再轉存，進而減少檔案的大小。

jquery 算出隨機整數字

var randomNum = Math.floor(Math.random() * customVal);
//customVal 可以是自訂的參數，譬如以視窗或指定div的高或寬