pCloud Partner Program

微軟技術捷運-創新科技的線上課程

程式技術 2018/10/12 09:49
views: 3981 times
微軟技術捷運-創新科技的線上課程

https://www.microsoft.com/taiwan/mstechmrt/

這裡提供了許多線上影音課程, 可供技術人員學習研究, 方便又快速的學速方式, 讓技術學習更容易. 共有: 人工智慧、物聯網、IT系統架構、DevOps、企業生產力等五條學習軌道, 大家可以挑選自己感興趣的軌道來學習.


top

[HTML]滿版介面

程式技術/Javascript 2018/10/05 15:43
views: 10207 times
在 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.
top

[CSS]Menu寫法

程式技術 2018/09/14 16:08
views: 29370 times
我們在寫 Menu 時, 會利用 li tag 來進行, 如下:
一般來說, 會需要將原來的 li 前面的符號點去除, 會使用 CSS:
然後在 li 本身的原來預設 display: block 要改為 inline:
接下來是需要在每個 menu 中間放個分隔符號如: |
達成效果:https://codepen.io/timhuang/pen/vzaYXo
有趣的是最後這個 li + li:before 語法, 可以不用到排列子元素的方式, 而是用緊鄰的方式來選擇, 如此一來, 第一個 li 就不會滿足這個條件, 只有第二個到最後一個可以滿足, 而達成在每個 menu 間下分隔符號.
其他解法尚有:https://codepen.io/timhuang/pen/VGBwXw
https://codepen.io/timhuang/pen/MqBWPX
top

[nginx]Reverse Proxy with Cache SSL fails

系統技術/FreeBSD/Linux 2018/09/04 14:27
views: 39346 times
一般我們在實作 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;

如此即可, 請參閱:
http://nginx.org/en/docs/http/ngx_http_proxy_module.html#proxy_ssl_server_name
https://stackoverflow.com/questions/25329941/nginx-caching-proxy-fails-with-ssl23-get-server-hellosslv3-alert-handshake-fail
top

Cloudflare新功能Access

WebTrend 2018/07/27 11:17
views: 87855 times
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/


top

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



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


 Waiting...