pCloud Partner Program

bs_grid動態給定filter rule

程式技術/Javascript 2019/09/19 11:30
views: 33586 times
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 方法來進行動態更新介面, 程式如下:


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

有趣的iOS上Safari播放mp4問題

程式技術 2019/08/14 17:46
views: 67933 times
今天在測試一個 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/

top

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

程式技術/Database 2019/06/25 10:42
views: 117936 times
這篇文章很棒, 仔細地介紹了資料庫的種類與特性, 給在選擇應用資料庫的朋友們, 有個較為完整的概念與取捨:

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

簡單整理一下重點:

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

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

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

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

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

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

Atomicity: 原子性, 在一個交易內的異動是不會被分割的.
Consistency: 一致性.
Isolation: 獨立性, 在各交易操作的狀況下, 是不會互相影響的.
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/
top

holder.js圖片佔位器

程式技術/Javascript 2019/04/30 17:33
views: 107133 times
之前介紹過 fakeimg 利用圖片來進行假圖佔位:

https://diary.tw/tim/1029

這裡介紹另一種方式來進行圖片佔位, 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
top

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

程式技術/Javascript 2019/04/11 18:35
views: 84951 times
在製作一些 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
top
TAG AJAX, Codepen, CORS

於指定table下第n個列後的內容隱藏

程式技術/Javascript 2019/03/07 10:52
views: 76935 times
使用 jQuery + 指定的 selector 達成, 其實很容易, 原則上只是要把第 n列後的內容先隱藏, 於需要時再顯示的概念.

當然, 若是從後端也是很容易實現, 不過目前是打算從前端做的話, 方式如下:


就這樣? 對, 就是這樣, 指定第 4筆 tr 起(含, 與之後), 會被選出來進行 toggle, 這樣一來就可以容易地在前端進行 table 內, 指定行之後的內容隱藏與顯示.

可以參考範例:

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

另外可以參考有用的選擇器方式:

https://css-tricks.com/useful-nth-child-recipies/
top
TAG rows, table, toggle, TR

文章首字大寫之CSS寫法

程式技術 2018/11/30 17:47
views: 69146 times
報紙或雜誌的編排上, 有時會有首字放大或特別編排的效果, 如何能達成這樣的編排呢? 可以使用 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/
top

iOS設備上傳相片檔案型態與圖片方向問題

程式技術 2018/11/27 13:08
views: 49054 times
相片副檔名

之前在實作上傳圖檔活動時, 使用副檔名為 .jpg 的約束條件, 但發現在 iOS 設備選擇相片後, 無法成功通過驗證, 經實測後, 發現存在 iOS 相簿裡的 jpg 相片都是以 .jpeg 為副檔名, 所以在上傳時, 會無法通過副檔名驗證.

即使將 .jpg 圖檔存下在 iOS 設備裡的相簿, 也會被轉換檔名為 .jpeg 的副檔名, 這個狀況需要在實作上傳圖檔時需要特別留意.

相片方向

使用 iOS 設備拍照時, 存放檔案方式, 會以橫放方式存放 ( w > h ), 但直拍時, 一樣使用橫放方式存檔, 但是會有個 orientation 為轉向, 方向為 right-top (6), 也就會變成直向, 詳情可參考這裡的圖片與說明:

https://www.impulseadventure.com/photo/exif-orientation.html

所以若是 6 就可以利用順時鐘轉 90度回來正確的檢視.

相片方向在網頁上

另外有趣的現象是, 該圖在 PC / Mac 桌機, Android 手機時, 直接放在 web 連接, 會是正常的轉向出來, 但放在 html 裡使用 img src 的方式, 則會無法轉向, 不過 iOS 設備在 html img src 引用時, 仍能正常轉向.

測試與重製

使用一張 iOS 拍照, 但縮小保留 EXIF 轉向資訊圖片供測試參考:

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

在 iOS 設備上可以正常轉向, 但其他不然, 但又是直接連結也是可以成功轉向的, 第三個部分則是使用了 images.weserv.nl 服務, 它會將原來的圖檔轉正, 並將轉向改為正向方向, 也就能解決這個問題. 這個服務的介紹可以參考: https://diary.tw/tim/1186
top
TAG android, iOS, MacOS, pc

我不贊成學寫程式

程式技術 2018/10/25 12:26
views: 41308 times
讀到這篇: https://gfamily.cwgv.com.tw/content/index/12938

雖然之前美國總統歐巴馬也做了 - https://www.ithome.com.tw/news/92882

也鼓勵了- https://www.bnext.com.tw/article/38622/BN-2016-02-01-070820-81

但學寫程式這件事並不是重點.

重點在於學會邏輯, 推理, 演繹, 科學, 至於寫程式, 也不過在於組合這些東西.

之前常在說, 未來是不需要人類來寫程式的, 寫程式的人, 是在寫"寫程式的機器人"的程式, 所以除非你對程式有高度熱忱, 有高度喜好, 否則這不是件好工作或好技術, 反而, 學會程式能做些什麼, 能幫助什麼, 能解決什麼才是重要的.

回到本質, 科學, 人文, 持續學習, 這才是重點, 寫程式是其中一種技能, 一種輔助, 未來你只需要指揮電腦, 只需要了解操作電腦, 寫程式, 其實沒那麼重要.

不過若你想學, 還是歡迎, 因為只要從中能讓你學得那怕是一點點的邏輯, 一點點的推理, 都是很棒的, 更能讓你知道, 寫程式不是萬能, 不是什麼都做得到, 我們需要的是累積經驗與傳承, 人類的學習與探索的精神與態度才是最重要的.

繼續閱讀:
新課綱「程式設計」,學邏輯解問題 - https://epaper.naer.edu.tw/index.php?edm_no=134&content_no=2672
國中必修,但國小資訊課卻消失於科技領綱的擔憂 - https://flipedu.parenting.com.tw/article/3850
不過就是寫程式嘛 https://diary.tw/tim/177



top

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

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

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

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


top

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



Patriot美商博帝 BURST 960G 2.5吋 SSD固態硬碟
TEAM十銓 L5 Lite 3D 1TB 2.5吋 SSD固態硬碟
統一 番茄汁(6入/組)
UNITEK TYPE-C 轉VGA/HDMI/PD充電/HUB 鋁合金多功能轉接器
亞果元素 CASA Hub VH1 Type-C 轉 VGA - HDMI二合一顯示轉接器


 Waiting...