My Program ::

pCloud Partner Program

Google Analytics新舊語法對照

程式技術/Javascript 2018/07/02 14:08
views: 81327 times
舊版本的自訂 ga() 與新版的 gtag() 語法對照, 可以參考官方文件:

ga(): https://developers.google.com/analytics/devguides/collection/analyticsjs/command-queue-reference#send

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

舉例來說, 原本在 ga 中, 自訂事件, 原語法為:

ga:


換成 gtag 時, 如下:

其中, gtag 後第一個參數為 event (自訂事件), 第二參數為原來 ga 的 event_action, 之後的參數因為為 optional, 所以 event_category, event_label 都再用 json 包起來放在後面了.

請參考上面的官方文件說明.
top

Azure也有Jupyter Notebooks線上跑Python

程式技術 2018/06/19 10:03
views: 70861 times
之前使用 google colab 的 python 線上環境後, 現在 M$ Azure 也有對應的環境了:

https://notebooks.azure.com/

一樣免費線上使用, 把之前的 factorial 程式放上去做個小範例:

https://notebooks.azure.com/timhuang/libraries/myprojects

請自行執行 factorial.ipynb 即可. 這樣在 Google 與 Azure 上都有方便好用的 notebooks 可用了.

用戶插入圖片

之前在 Google Colab 上的 factorial 程式參考: http://diary.tw/tim/1204
top

Google Chrome連結底線破裂調整

程式技術 2018/06/06 14:11
views: 92315 times
話說 Google Chrome 有個底線在有下區間英文字, 如 p, g, q 等會出現斷裂的狀況, 經查原因為 Google Chrome 於 64 版本起, 開始支援 text-decoration-skip-ink 為 auto 了, 所以發生這個狀況:

用戶插入圖片


如何解決呢, 當然就是將其屬性設定為 none 即可. 如下:

.noskipink{
  text-decoration-skip-ink: none;
}

由於預設連結也會有用到底線, 所以一勞永逸的方式就是把 a 元素的該屬性設定起來即可. 這個在 firefox 與 IE 沒有問題.

看起來也不是 chrome 問題. 而是在 css 4 版本起有這個 tag (draft), 而 chrome 64 起支援了, 所以就發生破裂的狀況, 而其他瀏覽器不支援所以不會有這個破裂的現象.

範例與測試請連結: https://codepen.io/timhuang/pen/XYKaNO

參考資料:
https://superuser.com/questions/1293529/when-did-chrome-start-underlining-links-differently
https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/47BHtmz0jVY
https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-skip-ink


top

[HTML5]data attributes大小寫問題

程式技術 2018/05/30 16:07
views: 64928 times
今天在實作 data-attributes 時, 發現僅能用小寫存取. 一般我們對於較長的變數名, 會使用駝峰命名法 (camel naming), 不過在 data-attributes 會發生問題.

因為在 data-attributes 這樣的結構下, 都是以小寫方式來進行存取, 所以即使是使用 data-numberOfData 也會使用 data("numberofdata") 的方式來存取, 否則會 undefined.

若希望能用駝峰式名稱來存取, 則需要使用 data-number-of-data 的方式來寫 tag, 就可以使用 data("numberOfData") 來存取.

可以參考以下程式:



上面的執行結果, 第二組會是 undefined, 其他可以正常輸出 data-attributes 內容.

可以參考 codepen 上的執行結果:
https://codepen.io/timhuang/pen/ZRYzOR

繼續閱讀:
https://stackoverflow.com/questions/20985204/does-jquery-internally-convert-html5-data-attribute-keys-to-lowercase

top

[Javascript]實作表單送出後的換頁提醒

程式技術/Javascript 2018/05/23 10:28
views: 77563 times
一般在表單送出後, 若非本頁更新的方式, 而是走 AJAX 方式送出時, 需要一定處理時間等待 server 回應的作業, 若是使用者未能完成執行完成, 而進行更換頁面時, 造成之前表單送出異常或失敗, 此時可以考慮使用這個功能來防止使用者不小心重載(reload), 或是離開頁面. 另一個狀況則是目前表單還未送出時, 但已修改, 如部落格文章編輯時, 已進行修改但未送出, 也是可以使用這個功能來達成.

這個功能是對 window 綁定一個 beforeunload 的事件(其實也就是 addEventListener 或是使用 onbeforeunload 皆可), 不過實測因各家瀏覽器工作方式不同, 無法成功設定自定訊息, 只能由瀏覽器的預設訊息提醒, 在一般狀況使用下, 沒太大問題. 使用方式如下:


其中的訊息請忽略, 因為實際上會出現的訊息與各瀏覽器有關, 但特別要注意的地方是若是已知可以 reload 或送出成功後, 記得要取消, 才不會因為真的成功後, 要重導頁面時, 又出現需要使用者確認的訊息.

以下為在 codepen 的範例:
https://codepen.io/timhuang/pen/YLgvXJ

測試方式為, 先點 bind 後, 成功綁定事件, 再點下方 codepen 連結離開, 此時會出現確認訊息, 來防止或確認離開, unbind 則是在 bind 之後, 再 unbind 就不會觸發這個 beforeunload 確認.

繼續閱讀:
https://sinaad.github.io/xfe/2016/06/29/beforeunlod-vs-unload/
https://developer.mozilla.org/en-US/docs/Web/Events/beforeunload


top

解決停用TLS1.0加密協議更新CURL問題

程式技術/PHP 2018/05/09 14:59
views: 44767 times
今天在解一個已停用 TLS 1.0 加密通訊協定問題時, 發現舊的 web server 上的 php curl 無法正常連線, 在 command line 下使用 curl https://xxx.xxx 時, 也會出現:

curl: (35) TCP connection reset by peer

研判為 curl 的原因造成, 由於需要使用 php 中的 curl_xxxx 系列指令與其他 server 的 api 溝通, 所以必須更新對應的模組來解決, 指令如下:

yum update nss curl openssl

更新完成後, 重起 apache 即完成正常呼叫其他 server api 停用 TLS1.0 的加密通訊協議問題.

參考資料:
https://stackoverflow.com/questions/30145089/tls-1-2-not-working-in-curl

top
TAG curl, nss, openssl, php

[jQuery]檢查HTML元素是否秀在畫面上

程式技術/Javascript 2018/04/03 17:40
views: 70693 times
一般在操作與檢查瀏覽器畫面上的元件, 是否可以看得到, 使用 css, display 等方法進行檢查, 不過實際上只是檢查是否能在瀏覽器上出現, 但因為瀏覽器只能出現目前可視的區域, 所以實際上元素是否有捲到可以出現的地方是無法透過原本的檢查方法進行檢查, 需要做一些運算.

這個 jQuery plugin: jquery-visible 就是用來檢查這樣的狀況:

https://github.com/customd/jquery-visible/

引用了這個 jQuery Plugin 後, 就能利用 visible() 方法來檢查是否目前的畫面是看得到這個元素. 另外也可以透過 'partial' 參數來檢查是否部分可以看到, 範例程式如:

https://codepen.io/timhuang/pen/rdKbyY

利用 $("#xxx").visible() 檢查是否全部可見或是使用 $("#xxx").visible('partial') 檢查是否部分可見, 十分方便好用.
top

[FUN]知道720p, 1080p, 1080i, 4k有什麼不同嗎?

程式技術/Javascript 2018/03/23 12:16
views: 73959 times
這張梗圖很有趣:




但利用 javascript 如何實作呢? 是個實用的小題目, 來看看程式吧:


執行結果:
https://codepen.io/timhuang/pen/MVoOdK
top

SQLite線上玩-sqliteonline

程式技術/Database 2018/03/09 17:42
views: 70052 times
這個網站提供了線上執行 SQLite 的功能, 對於初學者, 或想要了解 SQL 語法的人有很大的幫助.

https://sqliteonline.com

除了可以學習 SQLite 功能外, 其實在一般的應用, 有時想要快速的建立幾個簡單的 table 與輸入一些資料後存出來, 使用這個網站也能很快速容易地達成, 舉例來說, 建立一個 table:

CREATE TABLE t_product (f_id INTEGER PRIMARY KEY, f_name VARCHAR, f_cat VARCHAR, f_desc VARCHAR)


輸入一些資料:

INSERT INTO t_product VALUES (1, '哈利波特', '書', '有趣的魔法故事書'),
(2, '波西傑克森', '書', '半神半人的希臘混血人故事'),
(3, '充電線', '3c', 'usb 充電線'),
(4, 'iphone x', '3c', 'apple最新手機')


進行查詢:

select * from t_product WHERE f_cat = '3c'




select f_cat, Count(*) from t_product group by f_cat


而且可以方便地使用 link 分享, 上面的結果連結為:

https://sqliteonline.com/#fiddle-5aa25641295bd9gdjejr1mc0

另外也可以下載對應的 SQLite 資料檔, 真是太方便了呢.

若是希望使用應用程式來讀取, 可以使用 DB Browser for SQLite 這個軟體:

http://sqlitebrowser.org/

同時有 Windows 與 MAC 的版本可供使用.

top

使用Google Drive API讀取文件內容供前端應用

程式技術 2017/12/28 16:09
views: 98346 times
有時在做一些小型的前端介面, 需要 CMS (內容管理系統) 的上稿功能, 來進行內容管理, 不過實做上稿系統需要相當的時間與設計, 若能使用更簡便的方式, 將能大量節省維護的成本, 例如使用 Wordpress 或今天要介紹的 Google Drive API.

使用共用文件的方式來管理內容, 除了介面不用再實做外, 也可以透過權限管理來做一些設限, 方便存取與更新. 這次介紹的 API 是讀取 Google Docuemnt 的內容來供應前端應用, 所以就是讓程式讀取內容, 而使用者則是使用 Google Document 來更新內容.

會使用到的 API 為 Google Drive API 中的 file export, 目前已是 v3 的版本了, 可以參考:

https://developers.google.com/drive/v3/reference/files/export

如何使用呢, 首先在 Google Drive 新增一個 Google文件(Document)檔案, 並開放為擁有連結的人都可以檢視, 並取得該檔案的 fileId, fileId 就是在 URL 上會看到或是 share link 上會看到的一串英數, 有區分大小寫, 如:

https://docs.google.com/document/d/18De5jl4VhDP8XU7g_UOO2PcZ5qiCCBg4S2B5FOzgLFA/edit?usp=sharing

其中的 18De5jl4VhDP8XU7g_UOO2PcZ5qiCCBg4S2B5FOzgLFA 即為 fileId.

接下來在 google developer console 新增一個專案, 啟用 Google Drive API 功能, 並建立 API key 即可透過以下 API 進行檔案內容存取:

https://www.googleapis.com/drive/v3/files/18De5jl4VhDP8XU7g_UOO2PcZ5qiCCBg4S2B5FOzgLFA/export?mimeType=text/plain&key=[your api key]

其中 fileId 即為該文檔的 fileId, 而 export 為讀取, 後面的 mimeType 可以有以下幾種:

用戶插入圖片

(更多可以參考: https://developers.google.com/drive/v3/web/manage-downloads#downloading_google_documents)

而最後的 API key 則為在 Google Developer Console 專案內建立的 API Key, 就可以順利讀取內容, 以下則為一個簡單的範例:

http://sample.diary.tw/43/readdoc.php

程式碼如下:



如此一來可以方便使用者上稿又能快速更新到前台, 十分方便.

Quota 的部分如下:

用戶插入圖片

每日 10億次, 每 100秒每使用者 1000次, 每 100秒 1萬次, 三個計算基礎以下為免費.


top

PREV : [1] : [2] : [3] : [4] : [5] : ... [20] : NEXT



DJI Tello 小米萬能遙控器 手機App操控
Microsoft Office 365 中文家用版PKC (無光碟) ASUS華碩 AC1900 雙頻無線路由器 RT-AC68U
美國 VORNADO 533 渦流空氣循環機 (黑色) 御茶園 每朝健康綠茶(650mlx24入)
每朝健康 雙纖綠茶(650mlx24入)


 Waiting...