分類
數學

[數學]絕對值特性

由於 x<-1 與 x>7, 所以先找出中點 5/2, 然後用絕對值來減中點得外部的定值, 之後化簡得求出a, b的值.

 

分類
Javascript

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/

分類
好用軟體

Google Data Studio篩選器中文欄位問題

這個問題很有趣, 在引用 mysql database connection 下的 datasource 時, 文字欄位要下篩選器, 來過濾資料, 發現中文字會篩選不出符合的結果, 英數字是沒問題的.

另外測了使用文字檔上傳的 csv 做 datasource 時, 則沒有這樣的問題.

於是查了一下資料, 有篇文章提到了這個問題與他的解法:

https://www.en.advertisercommunity.com/t5/Data-Studio/Filtering-with-utf-characters/td-p/1198985

居然是使用了 REGEXP_REPLACE 方式來新建立一個 computed field 進行使用, 是可行的, 不過想說用輕量一點的文字函數來試, 如 REPLACE, TRIM 居然都不行, 真是太奇妙了。

詳細的 function 可以參考:

https://support.google.com/datastudio/table/6379764?hl=en

[2020/2/25]
網友 Fion:
https://www.en.advertisercommunity.com/t5/Data-Studio/Filtering-with-utf-characters/td-p/1198985
這篇文章已經找不到了，請問用REGEXP_REPLACE 的方式來解決篩選器問題時，參數應該怎麼下？

[2020/3/2]
回覆:
Hi, 你好, 該連結的確已失效, 這裡簡單說明一下作法, 就是在 [資料來源]這裡, 新增一個欄位, 以原欄位為 name 為例, 新建一個 new_name 的欄位, 把公式設為: REGEXP_REPLACE(name, ‘A’, ‘A’) 即可, 在設定篩選器時, 就可以使用 new_name 這個欄位來應用, 即可順利進行篩選.

分類
Database

選擇適合的資料庫-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/

分類
Wordpress

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

分類
懶得分類

有趣的1752年9月

昨天朋友提到有趣的月曆, 其中 1752年 9月短少了一些日子, 9/3~9/13 少了這幾天.

利用 linux 下的指令 cal 1752 進行查找, 果然得到有趣的結果:

這個鄉野傳說, 不, 原因是這樣的:

https://zh.wikipedia.org/wiki/1752%E5%B9%B4
https://en.wikipedia.org/wiki/1752
https://people.cs.nctu.edu.tw/~tsaiwn/introcs/03_Labs/Lab08/

所以就有這麼有趣的現象了.

但是 browser 就沒辦法做到了…
https://codepen.io/timhuang/pen/QRNWxY

分類
Javascript

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

分類
懶得分類

中文字平均筆劃數

如何計算呢? 查了一下, 有全字庫的資料可用:

https://www.cns11643.gov.tw/search.jsp?ID=11

取得資料如下:

閱讀全文 “中文字平均筆劃數”
分類
Javascript

Ajax透過cors-anywhere服務取得跨網域內容

在製作一些 demo 效果於 codepen (或其他網站), 要取得非同源(cross-domain)資料, 可以透過 cors-anywhere 服務來達成, 說明如下:

https://cors-anywhere.herokuapp.com/

這對於在實作測試時, 有很大的幫助, 例如在 codepen 上取得空氣盒子的一個盒子資訊:

https://airbox.edimaxcloud.com/query_history?id=74DA38EBF830&token=2cf933ee-4d2f-4a87-b146-6ef4ac344769

於 codepen 上, 直接透過 Ajax 方式配合 cors-anywhere 即可順利取得資料, 進行應用輸出, 如 demo :

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

工作原理為透過 cors-anywhere 服務, 可以多增加上

Access-Control-Allow-Origin: *

這個 response header 供跨網域存取而不受同源政策限制.

繼續閱讀:
https://developer.mozilla.org/zh-TW/docs/Web/HTTP/CORS