分類
Javascript

[HTML]滿版介面

在 web 上做滿版不要出捲軸的設計要如何進行? 主要是要配合 100vh 來操作. 不過由於實務上, 在行動設備下, 會遭遇瀏覽器在計算上方網址列的狀況不同, 如下:

1. iOS Safari 不含網址列
2. iOS Chrome 含網址列 (也就是全高)
3. Android Chrome 不含網址列

這樣的狀況, 所以若是使用 100vh 操作, 仍會有對應不良的困難, 所以建議改用 window.innerHeight 來取得實際的版高, 再來進行套用.

需要監聽的事件為 document ready, window resize, window orientationchange 三個地方, 而套用方式建議使用 css cssText 語法, 能較為準確的套用, 不會有指定高度時, 無法實現的狀況.

參考範例: https://codepen.io/timhuang/pen/pxbwLp

手機版直接測試: https://codepen.io/timhuang/full/pxbwLp/

另外簡單說明如下:

jq 取得 body margin-top 與 margin-bottom 會是 ?px 的文字, 使用 parseInt 可以轉回數字. 而 innerHeight 取得本來就已是數字. 而在原 css 中的 height: 100px!important, 是用來測試在 resizeFull function 中, 使用 css 套用, 亦可蓋過原 css 中的 height important.

分類
程式技術

[CSS]Menu寫法

我們在寫 Menu 時, 會利用 li tag 來進行, 如下:

<ul>  
  <li>HOME</li>  
  <li>NEWS</li>  
  <li>CATEGORY</li>  
  <li>CONTACT</li>  
  <li>ABOUT US</li>  
</ul>

一般來說, 會需要將原來的 li 前面的符號點去除, 會使用 CSS:

ul {  
  list-style-type: none;  
}

然後在 li 本身的原來預設 display: block 要改為 inline:

li{  
  display: inline;  
}

接下來是需要在每個 menu 中間放個分隔符號如: |

li + li:before  
{  
  content: '| ';  
}

達成效果: https://codepen.io/timhuang/pen/vzaYXo

有趣的是最後這個 li + li:before 語法, 可以不用到排列子元素的方式, 而是用緊鄰的方式來選擇, 如此一來, 第一個 li 就不會滿足這個條件, 只有第二個到最後一個可以滿足, 而達成在每個 menu 間下分隔符號.

其他解法尚有:

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

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

分類
FreeBSD/Linux

[nginx]Reverse Proxy with Cache SSL fails

一般我們在實作 Nginx 的 Reverse Proxy with Cache 時, 可以參考這篇:

https://www.nginx.com/resources/wiki/start/topics/examples/reverseproxycachingexample/

不過若是 proxy_pass 的 upstream 是 https://example.com/ 時, 會發生以下錯誤:

SSL_do_handshake() failed (SSL: error:14077410:SSL routines:SSL23_GET_SERVER_HELLO:sslv3 alert handshake failure) while SSL handshaking to upstream

從 log 來看, 其實原因很單純, 因為預設往 upstream 的 web request 會使用 ip 的方式連接, 而導致錯誤 (前端收到為 502 bad gateway), 解決方式只需要新增一個值:

proxy_ssl_server_name on;

如此即可, 請參閱:

分類
好用軟體

Cloudflare新功能Access

Cloudflare 的強大功能再出新服務 Access, 之前在 Beta 後, 最近上線正式版本了, 而且非常棒的是同時 5人以下是免費的(不過仍需要註冊信用卡或 Paypal, 不過不用擔心, 因為人數是自訂, 超過5人時, 第6人是無法使用的).

Cloudflare Access 服務提供了強化存取權限的功能, 不僅能有效降低管理端的負擔, 也能方便存取敏感性資料的後端, 舉例來說, 以往可能是走 VPN 的方式, 使用特定內部 IP 來存取特定服務的地方, 可以直接不用 VPN 改走外部 IP (當然必須是固定的, 或一個 Range), 以白名單方式存取外, 還能更容易用 email 驗證方式, 或是第三方像是 facebook / google 等登入授權方式進行.

如此一來, 可以更容易, 更彈性地管理敏感性資料的後端, 即使不在白名單的 IP 內也可以透過 Email 驗證(使用 email 收 token 方式), 或第三方登入方式進行驗證.

最基本的設定方式如下:

特定 URL, 於 policy 1 設定一個白名單群的 ip, 使用 bypass 方式, 而另一個 policy 2 則是設定特定 email 允許存取 (allow), 如此一來, 在存取特定 URL 時, 若在白名單 IP 就直接進入, 而在外部 IP 時, 則會出現 Cloudflare 的登入畫面如下:

輸入 email 後, 若是在名單內的 email , 則會寄出認證碼, 若不是則不會寄出哦, 用戶是等不到任何通知與錯誤訊息的(但 cloudflare 會有記錄可以查 login pass 與 login denied), 輸入認證碼後, 即可順利進入指定 url 進行操作:

存取記錄如下:

如此一來, 在白名單 IP 內, 或是不在白名單 IP 內的用戶都可以透過更安全更快速的存取方式來進行特定 URL 的存取了.

真的很方便好用, 快去試看看.

官方文件: https://blog.cloudflare.com/cloudflare-access-now-teams-of-any-size-can-turn-off-their-vpn/

分類
手機大未來

支付工具、點數、手機APP電子票證服務整理

台灣現行營運中支付工具與電子票證、點數、手機APP錢包放電子票證與信用卡服務整理.

  1. 支付 APP, 通常為綁定信用卡或銀行帳戶, 使用一維條碼或QR Code或掃碼進行支付:
    1. opay 歐付寶: https://www.opay.tw/
    2. jkos 街口支付: https://www.jkos.com/
    3. ezPay 台灣支付: https://www.ezpay.com.tw/ (藍新科技)
    4. 台灣Pay: https://www.taiwanpay.com.tw/ (這家是財金公司, 僅有銀行帳戶)
    5. My FamiPay: http://www.family.com.tw/marketing/fami_member/famipay.html (全家便利商店支付)
    6. Line Pay: https://line.me/zh-hant/pay (Line)
  2. 電子票證支付:
    1. 悠遊卡: https://www.easycard.com.tw/
    2. 一卡通: https://www.i-pass.com.tw/
    3. 愛金卡(iCash): https://www.icash.com.tw/
    4. 有錢卡(HappyCash): https://www.happycashcard.com.tw/ (遠鑫電子票證)
  3. 紅利點數
    1. Openpoint: 統一超商的點數 https://www.openpoint.com.tw/ (結合 iCash)
    2. UUPon: https://uupon.tw/ (結合悠遊卡)
    3. Happy Go: https://www.happygocard.com.tw/ (結合 Happy Cash, 與多家通路累點)
    4. 得易Ponda: https://www.ponta.com.tw/ (東森, 森森與部分通路累點)
  4. 手機APP結合電子票證, 主要為電信公司營運, 需要 sim卡支援, 可綁定電子票證或信用卡來支付):
    1. Hami Wallet: http://hamiwallet.emome.net/ (中華電信)
    2. WALI智慧錢包: https://www.wali.tw/ (台灣大哥大)
    3. friDay錢包: https://wallet.friday.tw/ (遠傳電信)

由以上各式支付工具, 電子票證, 電子錢包等工具, 再加上原來信用卡, 真的多通路, 多支付工具, 多優惠, 大家可以多利用呢.

[2018/8/21 10:49]
繼續閱讀:
【圖解】台灣行動支付大比拼：line-pay、街口支付、apple-pay https://dahetalk.com/2018/08/19/%E3%80%90%E5%9C%96%E8%A7%A3%E3%80%91%E5%8F%B0%E7%81%A3%E8%A1%8C%E5%8B%95%E6%94%AF%E4%BB%98%E5%A4%A7%E6%AF%94%E6%8B%BC%EF%BC%9Aline-pay%E3%80%81%E8%A1%97%E5%8F%A3%E6%94%AF%E4%BB%98%E3%80%81apple-pay/

[2018/9/5 9:58]
最近 Linepay 結合一卡通帳戶, 可以進行帳戶轉帳了, 為什麼要結合一卡通才能做這件事呢? 先來了解一下相關法規: 電子支付, 電子票證, 第三方支付, 所屬主管機關不同, 也有不同的功能.

第三方支付: 只能做代收付, 不可以轉帳、儲值 (經濟部)
電子票證: 可以儲值, 不可以轉帳 (金管會)
電子支付: 除代收付功能外, 還可儲值、轉帳 (金管會)

第三方支付廠商可以參考 open data: https://data.gov.tw/dataset/22184 (目前為止有 7048家)

電子票證: 永豐商業銀行, 悠遊卡股份有限公司, 一卡通票證股份有限公司, 愛金卡股份有限公司, 遠鑫電子票證股份有限公司, 目前共五家, 可以參考 open data: https://data.gov.tw/dataset/10557

電子支付分為專營、銀行兼營、中華郵政兼營、電子票證兼營, 其中電子支付專營(即非銀行的): 國際連股份有限公司、橘子支行動支付股份有限公司、台灣電子支付股份有限公司、街口電子支付股份有限公司、歐付寶電子支付(股)公司、簡單行動支付股份有限公司, 目前共六家, 可以參考: https://www.banking.gov.tw/ch/home.jsp?id=60&parentpath=0,4&mcustomize=FscSearch_BankType.jsp&type=H1&display=false

那和一卡通在哪? 它是電子票證兼營電子支付的公司, 在這裡: https://www.banking.gov.tw/ch/home.jsp?id=60&parentpath=0,4&mcustomize=FscSearch_BankType.jsp&type=H3&display=false

所以 Linepay 會需要電子支付的一卡通來實施儲值轉帳功能.

所有電子支付機構可以參考: https://www.banking.gov.tw/ch/home.jsp?id=60&parentpath=0,4&mcustomize=FscSearch_BankType.jsp&type=H&display=false

繼續閱讀:
電子支付 VS 第三方支付：別再說這是同個東西，關鍵在能不能「轉帳」啊！https://buzzorange.com/techorange/2016/12/07/e-payment-and-third-party-payment/
【行動支付】電子支付和第三方支付？你真的分得清楚？│Cloud西城 http://playlifecloud.com/20180514-payments/

[2018/9/11 11:38]
相關法規:

  1. 第三方支付服務定型化契約應記載及不得記載事項: https://gcis.nat.gov.tw/elaw/lawDtlAction.do?method=viewLaw&pk=209
  2. 電子票證發行管理條例: https://law.moj.gov.tw/Hot/AddHotLaw.ashx?pcode=G0380207&cur=Ln&kw=%e9%9b%bb%e5%ad%90%e7%a5%a8%e8%ad%89%e7%99%bc%e8%a1%8c%e7%ae%a1%e7%90%86%e6%a2%9d%e4%be%8b
  3. 電子支付機構管理條例: https://law.moj.gov.tw/Hot/AddHotLaw.ashx?pcode=G0380237&cur=Ln&kw=%e9%9b%bb%e5%ad%90%e6%94%af%e4%bb%98%e6%a9%9f%e6%a7%8b%e7%ae%a1%e7%90%86%e6%a2%9d%e4%be%8b

[2018/10/11 19:24]
繼續閱讀:
http://www.worklifeinjapan.net/2018/10/japan-mobile-payment-war.html

[2018/11/2 16:36]
LINE Pay一卡通開通1個月　使用人數快「打趴」街口支付
https://www.ettoday.net/news/20181101/1296025.htm

[2018/12/14 10:31]
台灣的行動支付玩具們 您玩過了嗎?
https://speakerdeck.com/jiimmysu/tai-wan-de-xing-dong-zhi-fu-wan-ju-men-nin-wan-guo-liao-ma

[2019/2/13 16:10]
悠遊卡獲准兼營電支 打造開放參與 平台聯盟
https://www.easycard.com.tw/new?cls=1&id=1549960128

[2019/11/6 9:54]
補充兩份電子發票載具, 由財政部南區國稅局製作, 包含了行動支付說明介紹, 雖然有點舊, 但十分值得參考:

附檔5：行動支付結合雲端發票懶人包.pdf

附檔6：行動支付結合雲端發票大補帖.pdf

還有 108年9月份的兩份統計:

10809電子支付機構業務統計表:

10809電子票證發行資料統計表:

也十分值得參考.

 

分類
Javascript

Google Analytics新舊語法對照

舊版本的自訂 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:

// Sends an event hit for the tracker named "myTracker" with the
// following category, action, and label, and sets the nonInteraction
// field value to true.
ga('send', 'event', 'link', 'click', 'http://example.com', {
  nonInteraction: true
});

換成 gtag 時, 如下:

gtag('event', 'click', {
  'event_category' : 'link',
  'event_label' : 'http://example.com'
});

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

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

分類
系統技術

太棒的DNS-TWNIC的101.101.101.101

之前介紹過 1.1.1.1, 8.8.8.8, 9.9.9.9 (https://diary.tw/archives/185), 現在有個台灣的 101.101.101.101, 雖然長, 不過也十分好記, 因為台灣有個 101高樓啊.

官方網站說明: http://101.101.101.101/

這個 DNS 的重點在官網上說明的:

隱私優先

我們絕不會出售您的資料，或是用來定位廣告。

我們絕不會記錄您的 IP 位址 。
而且我們委由 PwC Taiwan 每年審核我們的系統，確保我們說到做到。

這樣真的很棒呢, 而且也有提供 ipv6 版本的: 2001:de4::101 / 2001:de4::102 呢.

101.102.103.104 是他的備份 DNS 是不是也十分好記呢?

另外參考看看 mobile01 上的網友測試:
https://www.mobile01.com/topicdetail.php?f=507&t=5496792

繼續閱讀:
https://free.com.tw/quad101/

 

分類
WebTrend

無SSL的不安全警告

Google search console 來信通知 2018/7 起的 google chrome 68 版本以上將會對無 https (ssl) 的網站發出不安全警告, 所以只能著手來調整一下網站.

啟用了 SSL 之後, 訪問本站也就會直上 https , 當然也一併解決安全性議題, 不過網站是否安全, 從 SSL 只是在傳輸上加密, 確認 endpoint 安全, 不過內容是否安全又是另外的議題, 無論如何, Google 的安全強化是值得肯定的.

 

分類
Python

Azure也有Jupyter Notebooks線上跑Python

之前使用 google colab 的 python 線上環境後, 現在 M$ Azure 也有對應的環境了:

https://notebooks.azure.com/

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

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

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

分類
程式技術

Google Chrome連結底線破裂調整

話說 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

參考資料: