分類: 程式技術

分類
好用軟體

檢查網站用什麼CMS系統- whatcms.org

有時候看到一個不錯的網站, 想要了解使用的框架或架構, 或是什麼 CMS 系統, 可以簡單輸入網址到這個服務:

Detect which CMS a site is using – What CMS?

https://whatcms.org/

像是白宮 – https://whatcms.org/?s=www.whitehouse.gov 就是用有名的 CMS – wordpress.

另外像是行政院下的紓困 1988 與振興券服務網, 也是用 wordpress: https://whatcms.org/?s=1988.taiwan.gov.tw

雖然不見得所有的內容網都可以偵測出來, 因為有些是自行開發的, 或是未收納在 whatcms.org 下, 不過也可以了解執行環境與程式語言和 web server , 十分方便.

另外以 wordpress 架站軟體為例, 還有一些工具能測試是什麼佈景主題(theme)或有什麼 plugin等, 如:

https://www.wpthemedetector.com/
https://scanwp.net/
https://whatwpthemeisthat.com/
https://wpdetector.com/

對於架設 CMS 有與趣的朋友們可以參考.

分類
好用軟體

好用方便的虛擬主機管理器 – CyberPanel

這個管理工具, 是類似 cPanel、Plesk 這類的 hosting 服務的管理工具, 若是搭配 OpenLiteSpeed 版本的 web service 是完全免費的, 十分佛心.

而搭配 LiteSpeed 版本的 web service 的 CyberPanel Ent. 版, 在 1 domain 下, 2GB Ram 下也是每個月 0元, 可以參考價格說明:

https://cyberpanel.net/cyberpanel-enterprise/

而 OpenLiteSpeed 與 LiteSpeed Ent 版本有什麼差異, 可以參考這裡:

https://www.litespeedtech.com/products/litespeed-web-server/editions

安裝支援的系統有 Centos 7.x, Centos 8.x, Ubuntu 18.04, Ubuntu 20.04, 另外需要的條件有: Python 2.7, 1024MB or above Ram, 10GB Disk Space. 可以參考安裝說明:

https://cyberpanel.net/docs/installing-cyberpanel/

安裝完成後, 應用服務包含了 php (多版本), web, mysql, mail, ftp, dns, ssl 等, 十分方便, 另外管理介面使用 8090 port , 若希望管理介面也能用 let’s encrypt ssl 可以參考這篇的設定方式:

https://cyberpanel.net/docs/2-cyberpanel-on-ssl/

簡單說明, 也就是建立一個 website, 域名為你想用來管理的域名, 然後再到管理介面左側選單的 SSL, Hostname SSL, 選擇你想用的 website 域名後, 再按下 Issue SSL 即可.

他的 email service web 介面使用了 rainloop 也十分方便, 另外也支援了 DKIM 功能, 一樣能透過 SSL/TLS 加密 email 與使用 smtp / pop3 / imap 等方式來存取.

這個工具十分方便, 有在管理多虛擬主機的朋友們可以參考.

php上實作301 Redirect指示方式

在 php 中若需要重導客戶端, 可以使用 302 重導:

header("Location: http://newlocation");

在不指定 response status 時, 上述內容會使用 302 重導.

若需要使用 301 重導, 可以使用如下程式:

1. 先宣告重導指示, 再進行重導:

header("HTTP/1.1 301 Moved Permanently");
header("Location: http://newlocation");

2. 直接使用 header 中的 response status 參數:

header("Location: http://newlocation", TRUE, 301);

以上兩種方式皆可以重導客戶端至指定目標, 並且以 301 Moved Permanently 方式指示.

繼續閱讀:
https://blog.longwin.com.tw/2015/09/php-301-302-redirect-header-2015/
https://stackoverflow.com/questions/7324645/php-header-redirect-301-what-are-the-implications
https://www.php.net/manual/en/function.header.php

bs_grid動態給定filter rule

bs_grid 是一個很方便的 data grid 功能介面, 可惜沒有支援 bootstrap 4, 不過在 bootstrap 3 下, 非常方便好用. github 連結: https://github.com/pontikis/bs_grid

今天遇到的問題是需要動態下 filter rules, 但在官方資料上, 僅能做預設, 如: https://www.pontikis.net/labs/bs_grid/demo/set-rules/

於是研究一下 github 上的 source code, 其實可以透過動態設定 filter rules 並使用 init 方法來進行動態更新介面, 程式如下:

$("#mygrid").bs_grid('getOption', 'filterOptions').filter_rules.push({
    "condition": {
        "filterType": "text",
        "field": "dataid",
        "operator": "equal",
        "filterValue": [
            "2"
        ]
    },
    "logical_operator": "AND"
});
$("#mygrid").bs_grid('init');

 

如此一來便能進行在動態下新增過濾器功能, 達成所需.

 

分類
程式技術

有趣的iOS上Safari播放mp4問題

今天在測試一個 nginx reversed proxy 上, 代理 upstream server mp4 檔案時的播放問題.

之前沒特別有這個狀況, 但今天開始不能播放(感覺應該是在ios 12.4起發生), 十分有趣, 從 nginx server log 也看不出來原因, 只知道 nginx server 在 ios safari request 時, sent-byte 大小小於原始的 mp4 檔案, 所以也只能從 ios safari 的 developer mode 來著手.

先進行 ios safari developer mode, 可以參考:

https://unrealnavigation.com/blog/web-inspector-with-ios-simulator

然後發現原來 safari 會 request byte-range 0-1 這樣的狀況, 難怪都不會送出完整結果, 這樣一來原因就明確了, 實務上的狀況可以參考這篇:

https://www.stirtingale.com/guides/2018/10/mp4-not-working-cloudflare

若是原本的 server 沒有支援 byte-range 時, 會導致 status 200 而非 safari 預期的 206, 而導致失敗. 接下來就可以來找解決方案.

以 nginx proxy_pass 的反向代理結構來看, 可以利用這個方案:

https://stackoverflow.com/questions/22728016/nginx-is-not-accepting-range-of-bytes

使用 proxy_force_ranges on; 即可.

當然, 原本的 upstream 也需要有支援才能解決.

如此一來, 便能在 ios safari 於 request mp4 資源時, 下達的 byte-range 於快取或未快取內容皆可正常工作.

PS. 於查找過程找到一篇介紹 nginx revered proxy hash key 算法資料可供參考:
https://tomme.me/nginx-proxy-cache-server/

選擇適合的資料庫-Choosing The Right Database

這篇文章很棒, 仔細地介紹了資料庫的種類與特性, 給在選擇應用資料庫的朋友們, 有個較為完整的概念與取捨:

https://towardsdatascience.com/choosing-the-right-database-c45cd3a28f77

簡單整理一下重點:

CAP: https://zh.wikipedia.org/wiki/CAP%E5%AE%9A%E7%90%86

在分散式的系統架構下, 不能同時滿足這三個條件的 CAP定理:

  1. Consistency: 一致性, 所有分散的節點都能有一致的資料
  2. Availability: 可用性, 每次查詢皆可取得正確(但不一定最新)的結果.
  3. Partition tolerance: 分區容錯性, 部分節點異常或資料異常, 系統仍能保持運作.

(也請參考這篇: https://ithelp.ithome.com.tw/articles/10158554)

而傳統資料庫管統系統需要能滿足 ACID 的部分如下:

https://zh.wikipedia.org/wiki/ACID

  1. Atomicity: 原子性, 在一個交易內的異動是不會被分割的.
  2. Consistency: 一致性.
  3. Isolation: 獨立性, 在各交易操作的狀況下, 是不會互相影響的.
  4. Durability: 持續性, 在未異動的資料, 是能持續保持不變的.

傳統 ACID 在現代資料庫是無法同時滿足的, 所以在分散架構下的 CAP 是另一個檢視要件, 主要應用在 NoSQL 環境.

另外各式資料庫的特性如同原文介紹, 有 key-value, document, graph 不同的資料存放型態.

而其中最重要的部分是應用情境的問題:

  • How many relationships are in your data?
  • What is the level of complexity in your data?
  • How often do the data change?
  • How often does your application query the data?
  • How often does your application query the relationship underlying the data?
  • How often do your users update the data?
  • How often do your users update the logic in the data?
  • How critical is your Application in a disaster scenario?

若是能妥善理解與處理這些可能的問題, 就能找到適合的資料庫, 而實務上也是有可能互相混搭應用的, 區分為不同的資料庫應用方式, 但更重要的是適當的搭配與選擇.

繼續閱讀:
https://blog.longwin.com.tw/2013/03/nosql-db-choose-cap-theorem-2013/

分類
好用軟體

DemosWP好用免費線上wordpress測試與展示服務

之前介紹過 cloudaccess 的免費代管 wordpress 與 joomla:

https://diary.tw/archives/71

這次看到的服務商是這家:

https://demoswp.com/

目前只有提供 wordpress 功能, 對於建立 demo 與測試十分夠用, 而且有 https 與 ftp / mysql 管理等, 十分適合建立與學習測試 wordpress 的地方.

使用方便很容易, 註冊後, 即可於後台建立網站:

十分方便好用, 需要的朋友們可以試看看.

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

[2022/5/24] demoswp已停止服務了, 若需要相關類似服務, 請參考這篇: https://diary.tw/archives/1920

holder.js圖片佔位器

之前介紹過 fakeimg 利用圖片來進行假圖佔位:

https://diary.tw/archives/1266

這裡介紹另一種方式來進行圖片佔位, holder.js 工具:

http://holderjs.com/

使用方式十分容易簡便, 引用 holder.js 後, 直接下達參數即可順利使用, 也可以指定寬高與文字內容, 中文字也可以哦. 生成的方式是動態的 SVG 進行, demo 程式如下:

<img src="holder.js/300x200">
<img src="holder.js/300x200?theme=sky">
<img src="holder.js/300x200?bg=2a2025&text=Hello">
<img src="holder.js/300x200?bg=f3f2fe&fg=001100&text=中文字也可以哦!">

於 codepen.io 上的 demo 請參考:

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

分類
FreeBSD/Linux

於linux command line下進行主機網路測速

在有 GUI 的環境下, 可以使用 browser 訪問 https://www.speedtest.net/ 進行測速, 若在 linux 下沒有 GUI 與 browser 的狀況下, 進行測速, 一樣使用 speedtest 的服務來測試, 需要這個 speedtest-cli 工具.

這裡將介紹的工具是需要 python runtime 的, speedtest-cli 工具, github 連結:

https://github.com/sivel/speedtest-cli

操作方式有許多種, 最簡便的就是下載執行 (需注意執行安全性, 此列執行無須 root):

curl -s https://raw.githubusercontent.com/sivel/speedtest-cli/master/speedtest.py | python -

結果就是在主機下執行對應網路速度的速度, 範例結果如下:

很容易理解目前主機的網路速度概況.

其他參數, 例如列出所有測速主機, 使用 –list 如下:

curl -s https://raw.githubusercontent.com/sivel/speedtest-cli/master/speedtest.py | python - --list

就會列出許多對應測速主機, 還列出了距離(由近至遠).

Retrieving speedtest.net configuration…
17383) Windstream (Ashburn, VA, United States) [0.98 km]
5132) Shentel Service Company (Ashburn, VA, United States) [0.98 km]
3810) BroadAspect (Ashburn, VA, United States) [0.98 km]
….
9662) Foxtel Broadband (Perth, Australia) [18575.84 km]
2171) Internode (Perth, Australia) [18575.84 km]
3414) Optus (Perth, Australia) [18575.84 km]
17109) Pentanet (Perth, AU) [18575.84 km]
3254) Vodafone Hutchison Australia (PH) (Perth, Australia) [18575.84 km]
22904) Superloop (Perth, Australia) [18575.84 km]
1931) IX Australia (Perth, Australia) [18575.84 km]
10613) Optus (Rockingham, Australia) [18607.31 km]

十分有趣呢.

繼續閱讀:
https://blog.gtwang.org/linux/speedtest-cli-linux-command/
https://askubuntu.com/questions/104755/how-to-check-internet-speed-via-terminal

分類
程式技術

文章首字大寫之CSS寫法

報紙或雜誌的編排上, 有時會有首字放大或特別編排的效果, 如何能達成這樣的編排呢? 可以使用 CSS 中的 ::first-letter 的 psuedo element, 這個在 CSS1 起就可以使用了. 只是到了 CSS3 需要兩個 : (冒號), 之前僅有一個 : (冒號).

另外若是需要達成, 僅第一段落才需要首字大寫, 可以使用 :first-child 的 psuedo element 即可, 也就是以 p 為例, 選擇器可以使用:

p:first-child::first-letter

即可, 不過可以套用的屬性以文字為主, 另外還有一個有趣的地方, 就是一定是字才行, 標點符號會不當做字, 與第一字一起發生作用, 可以參考這個範例:

https://codepen.io/timhuang/full/dQwWxP/

以 article 來看, 就是僅第一個段落的第一個文字大寫, 而 article 2 來看, 則是每個段落開頭都大寫.

參考資料:
https://www.w3schools.com/cssref/sel_firstletter.asp
https://www.oxxostudio.tw/articles/201706/pseudo-element-4.html

補充資料:

若添加的<h2>xxx</h2>元素到 article 裡, 發生了有趣的效果, 就是 p:first-child, 會選擇不到元素, 原因為 p:first-child 是指該 p 的 parent 的 first child, 但第一個 child 是 h2, 所以就選擇不到了, 可以參考這個範例:

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

其中 article2 則是正常, 而且 h2 也不會首字大寫.

若要解決這個問題, 可以利用指定 type 的方式, 如 ::first-of-type 這個 psuedo class, 也就能指定元素了, 如 p::first-of-type 這樣, 參考這個範例:

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

補充資料[2018/12/5]

單冒號與雙冒號選擇器的差異, 單冒號(single colon)使用於偽類別(psuedo class), 而雙冒號(double colon)使用於偽元素(psuedo element), 可以參考這兩篇:

https://stackoverflow.com/questions/41867664/what-is-the-difference-between-pseudo-classes-and-pseudo-elements
https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Pseudo-classes_and_pseudo-elements
https://css-tricks.com/to-double-colon-or-not-do-double-colon/