分類
好用軟體

Cloudflare提供免費新功能Turnstile (若已是Cloudflare CDN可以直接使用Firewall的Managed Challenge功能達成)

Turnstile是一個無形且更聰明的Captcha替代品,該解決方案可從輪替的一系列瀏覽器挑戰中自動選擇,它在背景尋找來自人類使用者的訊號。

也就是用來做人類檢核功能, 而降低被機器訪問的存取驗證, 就像是之前 Google 的 reCaptcha – https://www.google.com/recaptcha/about/

這個服務免費提供給 Cloudflare用戶, 應用在非 Cloudflare CDN網路環境場景使用, 若已是在 Cloudflare提供的網路連接狀況下, 就可以直接利用 Managed Challenge 的防火牆設置(免費用戶可以有 5個 firewall rule), 更容易來實現這個功能.

防火牆設定方式請參考: https://blog.cloudflare.com/end-cloudflare-captcha/ 其中的這個部分:

All Cloudflare customers can now choose Managed Challenge as a response option to any Firewall rule instead of CAPTCHA. We’ve also updated our dashboard to encourage all Cloudflare customers to make this choice.

(圖片引用自: https://blog.cloudflare.com/end-cloudflare-captcha/)

而新建防火牆規則可以參考: https://developers.cloudflare.com/firewall/cf-dashboard/create-edit-delete-rules/

Turnstile 實作的方式可以參考這裡的文件:

https://developers.cloudflare.com/turnstile/

繼續閱讀:

https://www.ithome.com.tw/news/153361

分類
好用軟體

好用雲端下載工具Offcloud Lifetime Subscription – Stacksocial

下載檔案慢吞吞嗎? 又要守在電腦旁等待, 有個方便好用的工具 Offcloud 在 Stacksocial 上有終身訂閱服務, 價格十分優惠, 來到了 USD $39.99.

功能有哪些呢? 它是一個純 web 介面的下載管理工具, 可以

  1. 直接下載許多免費空間的檔案(但速度不太快, 介面上的功能表是 instant)
  2. 可以存入它提供的雲端空間(然後再進行下載, 介面上的功能表是 cloud)
  3. 更方便的是可以存入自己的 dropbox, google drive, one drive 等雲端空間(讓下載免費空間的檔案直接存入你的雲端空間, 一次下載速度快很多呢, 好處是下載不需要在電腦旁等待, 只需要將連結設定好即可, 還可以設定下載完成的email通知, 介面上的功能表是 remote)
  4. 支援了 BT 與 magnet link 等 P2P 下載(一樣可以存入你的雲端空間)

AWS要來台灣設立本地區域了(Local Zone)

從這裡看來的:

AWS 宣布在台部署全新 AWS 本地區域,擴充本地基礎設施

https://aws.amazon.com/tw/events/taiwan/news/aws-local-zone-in-taiwan/

Amazon Web Services(AWS)宣布將在台灣推出全新 AWS Local Zone(本地區域)。AWS 本地區域為一種新型的基礎設施部署類型,將 AWS 運算、儲存、資料庫及其他服務部署在緊鄰人口密集、產業集中,或資訊科技中心的雲端邊緣,讓企業及機構客戶更近距離地為終端用戶或本地端資料中心部署毫秒級延遲的應用。

什麼是 Local Zone? 可以參考官方的資料:

https://aws.amazon.com/tw/about-aws/global-infrastructure/localzones/features/

雖然並不是全功能的 AZ (可用區域) 也沒有 S3, 不過繼之前來台的邊緣網路後, 再來提供了本地區域, 也算是有更進一步了呢.

不過沒有提供布署的地點與俱體上時間就是了.

相關新聞:

分類
好用軟體

好用方便又免費的影像處理與CDN服務-imgix

CDN 可以用來加速網站的存取速度, 是很重要的工具, 而對於需要加速的內容, 其實大多為影音素材或是圖片素材, 尤其圖片的使用量是相對多的.

圖文並茂的網站的確引人入勝, 但是如何能加速圖片等素材存取, 其實已有許多資料可以參考, 尤其像是著名的 cloudflare CDN服務, 不僅免費, 效能也非常好, 不過需要將 DNS 放在 cloudflare 上進行代管. 若不方便將 DNS 放到 cloudflare, 有什麼其他方式呢? 可以利用其他非 DNS 方式來取得內容的圖片CDN服務囉.

今天要介紹服務, 是類似之前介紹的 images.weserv.nl: https://diary.tw/archives/221 可以進行縮圖與快取外, 還有更多功能, 這個服務是 imgix: https://imgix.com/

除了提供 CDN 外, 還有大量的 API 可供應用, 更重要的也是有免費的版本, 免費版本與付費版本功能可以參考連結如下:

https://imgix.com/pricing

分類
程式技術

iframe RWD化的方法(CSS only)

基本上, iframe 的 RWD 方法有很多種, 不過都需要在外層有個 div 來包裝出比例的尺寸, 才能達成 RWD化, 可以參考:

若只有 iframe tag 本身的話, 不在外層加裝 div 時, 如何達成呢? 可以利用這個 css 屬性: aspect-ratio

以 Youtube 的 embed code 為例:

<iframe width="560" height="315" src="https://www.youtube.com/embed/JtFI8dtPvxI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

我們將 iframe 設定以下屬性:

iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

即可順利在不外加 div tag 的條件下, 將 iframe 本身保持指定比例(如 16:9)的 RWD化.

來看看範例吧:

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

至於這個 CSS 屬性 aspect-ratio 的支援性如何呢? 可以看一下 can i use 網站的資料囉:

https://caniuse.com/mdn-css_properties_aspect-ratio

看起來除了 IE 外, 其他主流瀏覽器都有支援呢.

分類
好用軟體

如何自動化更新Google Data Studio報表的資料來源為CSV的檔案?

先回答文章標題, 無法達成, 不過我們可以利用其他方式來實際這個需求, 就是利用另外的 Data Connector, 讓我們繼續看下去吧:

之前的COVID-19 Taiwan統計-使用Google Data Studio (https://diary.tw/archives/2207)介紹了使用Google Data Studio來展示每日的COVID-19的個案數量, 十分方便好用, 由於是一次性上傳CSV檔案, 但這個資料是每日更新的, 所以若是有需要自動化這個更新, 要如何進行呢?

在Google Data Studio中, 資料的連接器共有以下這些:

https://datastudio.google.com/data

之前使用的是 File Upload (Connect to CSV files), 由於是自行上傳的檔案, 更新也得再次上傳才能達成, 所以資料是無法自動化更新(當然也和這個File Upload連接器沒有API所以無法進行).

然而要如何達成這個自動化更新的資料來源呢? 上面連結的連結器有許多是資料庫的, 如: MySQL, PostgreSQL, Microsoft SQL Server 等, 還有許多 Google 自己的資料來源, 其中有一項可以利用的是 Google Sheets (也就是 Google Drive 中的像 Excel 的表格資料檔案).

這樣一來, 只需要更新 Google Sheets 的內容, 就可以順利更新 Google Data Studio 中的報表資料了, 所以這次我們就選用這個資料連接器來進行操作囉.

一樣從前一篇的資料來源開始:

分類
好用軟體

COVID-19 Taiwan統計-使用Google Data Studio

這個是利用 Google Data Studio 進行展示的功能:

https://diary.tw/s/cov19tw (COVID-19/新冠肺炎/武漢肺炎台灣地區確診統計資料, 每日下午3~4點更新, 預設日期區間為一個月, 本土個案; 報表可依縣市、鄉鎮、是否境外移入、性別、年齡層區分, 可自訂日期區間為2020/1起至今的資料統計)

利用資料來源-地區年齡性別統計表-嚴重特殊傳染性肺炎-依個案研判日統計:

https://data.gov.tw/dataset/120711

這個資料集來產生的.

Google Data Studio 是個很方便的資料展示報表工具, 我們可以很容易地利用這個工具來實現大量資料的互動式報表展示, 並且方便與其他使用者共用.

這裡介紹如何進行這個報表的建立, 首先至上面的資料集下來對應的 csv 檔, 連結為:

https://od.cdc.gov.tw/eic/Day_Confirmation_Age_County_Gender_19CoV.csv

再到 Google Data Studio 建立一個新的資料來源, 如下圖:

從 Google Connectors 中找到最後一個[上傳檔案],

分類
好用軟體

WordPress的網站縮圖API-mShots

這個是依附在 akismet 下的透過網址可以成生網站的縮圖, API的語法如下:

https://s0.wp.com/mshots/v1/https%3A%2F%2Fdiary.tw%2F?w=800

其中有兩個部分, API為: https://s0.wp.com/mshots/v1/ 後面直接加上 urlencode 後的網址, 另外有個參數是 w 為指定寬度.

以上面的網址來看, 就是本站的首頁 https://diary.tw/ , 而 urlencode 後就是 https%3A%2F%2Fdiary.tw%2F , 並加上 ?w=800 來產出圖檔囉.

像是

這個專案的 GitHub 連結: https://github.com/Automattic/mShots/

PS: 在 WordPress後台留言管理介面會用到這組 API, 若要停用可以參考這篇: https://wordpress.org/support/topic/how-to-disable-mshots-service/

繼續閱讀:

https://shkspr.mobi/blog/2018/12/using-the-wordpress-mshots-screenshot-api/

分類
好用軟體

看看2000年時的Apple網站-從web.archive.org

這個是 2000/2/26 時的 apple.com 網站:

當時的重點商品是 Power Mac G4, 下方還有 iBook 與 PowerBook 耶, 而 EarthLink 則是上網服務的公司.

這個畫面是利用 https://web.archive.org/ 這個網站服務來取得, 上面的畫面可以由這裡查看:

http://web.archive.org/web/20000226101337/http://apple.com/

這個服務忠實地記錄著各個網站的歷史(其實就是當時, 現在看是歷史)畫面, 有興趣了解的朋友們, 可以自行使用看看.

利用Cloudflare worker來進行客戶端IP查找

Cloudflare 有個功能, 就是在 edge 端的 worker, 可以參考:

https://developers.cloudflare.com/workers/

我們可以利用這個 worker 來做許多功能, 把它想成小型的在邊緣的處理器, 先來看一些 example 好了:

https://developers.cloudflare.com/workers/examples/

理解可以在這個 worker 處理不少事情後, 接下來實做一個簡單的功能, 像是這種取客戶端 IP 的功能:

早期也有利用 PHP 寫過取 IP 功能的小程式, 可以參考:

不過這裡要介紹的是利用 cloudflare 的 worker 來進行.