分類
數學

25×25乘法表

九九乘法是小學生在數學領域上需要學習的一個基本乘法準則, 主要是基於個位數乘個位數的用途, 若行有餘力, 可以再試看看二五乘二五乘法表, 能更加速一般的簡單乘法計算.

寫個小程式整理二五乘二五乘法表: http://sample.diary.tw/25×25/

PS. 原本因為要計算補足位數的函數, 使用了 Math.log10(x) 的方式來進行, 但 IE 不直援 Math.log10(), 所以修改了一下, 將其改為 Math.log(x) / Math.log(10) 即可.

分類
WebTrend

線上轉檔服務-bitcodin

線上影音轉檔服務 bitcodin, 強調快速, 而且支援 MPEG-DASH, 當然也支援 HLS.

之前有介紹過 AWS 上的 Amazon Elastic Transcode 服務(link), 現在這家 bitcodin 來了, 速度很快, 利用他的 sample video 測試, 約是 17倍快的時間可以轉檔完成. 很厲害.

網站在這裡: https://www.bitcodin.com/

而且價格不算貴, 一樣是有 free tier 而且可以選擇多種計價, 依使用量來選擇方案: https://www.bitcodin.com/pricing/

Input 的方式可以用 HTTP、FTP、Dropbox, Output 的方式可以用 FTP、Amazon S3、Dropbox 都有各三種的方式可供選擇, 配合他的 REST API 可以應用的情境就十分廣泛了, 自建的影音庫, 線上隨訊視訊等.

這麼快的轉檔效率, 看起來真的還蠻有競爭力的.

分類
好用軟體

再調整flickrset小工具

針對 flickrset 小工具, 已經有多次的調整並強化了. 這次針對產生的圖片結果進行連結分享與討論(利用 facebook comments).

大家可以試用看看, 希望對於使用更便利.

工具連結: http://sample.diary.tw/flickrset/

產生的連結範例: http://sample.diary.tw/flickrset/?setid=72157600079438372

分類
系統技術

HDD/SSD的IOPS成本概算

今天看到一篇資料, 有關於系統上的 IOPS 成本議題, IT在設計基礎建設時, 在使用量大時, 往往會面臨效率的問題, 首當其衝的, 除了 CPU是一個關鍵外, 更多會發生的問題會在儲存的效率.

這篇資料提供了一些參加, 於取得 IOPS 的成本比較上, 不過只是參考, 因為實際上還有儲存空間的議題與系統設計架構的議題等需要考量.

請參考: http://www.dellenterprisesolution.com.tw/pc/index.html

(圖片引用自: http://www.dellenterprisesolution.com.tw/pc/index.html)

分類
程式技術

fakeimg的https存取問題

今天在拉一個網頁畫面, 使用 fakeimg 進行測試, 想說網站都用 https 所以圖片也用 https 來進行連接, 結果還是發生安全性提醒.

原因不是 fakeimg 不支援 https, 而是用錯了. 像這樣: https://fakeimg.pl/100×100 少了最後的 /.

也就使用原來的連結被重導至 http://fakeimg.pl/100×100/ 這樣, 使得網頁上的圖片被改成使用 http 連接, 而出現的安全性警告.

所以記得使用 fakeimg 時, 若要使用 https, 則要把相關的網址打對, 也就是

https://fakeimg.pl/100×100/

才不會發生這個問題.

之前介紹 fakeimg 的文章在這裡: https://diary.tw/archives/1266, 可以參考看看.

分類
程式技術

Google Maps Style

Google Maps 大家很常用吧. 在做一些結合 Google Maps 的應用時, 有時會希望能把上面的圖示簡化, 或是一些圖示的顏色改變, 要如何進行呢?

可以使用 Google Maps API Styled Map Wizard: http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html

這個 Wizard 可以快速的開關與調整圖示的顯示與否與改變顏色, 設定好後, 再產生出 JSON 格式的描述檔, 就可以自訂 Sytle 的 Google Maps.

例如要所有的水都消失:

[ { “featureType”: “water”, “stylers”: [ { “visibility”: “off” } ] } ]

以此類推, 一方面預覽一方面快速產出對應的描述檔, 很快速地建立自訂的 Google Maps.

不過若是想要找一些現成的, 可以利用這個服務:
https://snazzymaps.com/

上面已經有現成的許多格式可供套出, 一樣是產生 JSON 格式的描述檔供應用.

需要更詳細的自訂Google Maps Style可以參考Google 的官方文件:
https://developers.google.com/maps/documentation/javascript/styling

分類
Javascript

CSS寬度問題

今天在修正一個瀏覽器相容性問題時, 在使用 css 中的 calc(100%- 10px) 這樣的語法時, 由於 ie8 不支援, 所以改用 jQuery 的 obj.parent().width() 來進行設置.

測試後發現有一點落差, 起用 browser 的 box model 來檢查, 發現其中 parent 有設定左右的 padding, 導致 parent width 和原來的 css calc(100% -10px) 的 100% 會有落差, 所以查了一下 jQuery 語法, 使用 obj.parent().outerWidth() 就能順利取得和原來 css calc(100% -10px) 的 100% 寬度相同了.

如此一來就解決了在 ie8 下寬度使用 calc(100% -10px) 語法的問題.

分類
Database

MySQL資料表不存在的資料就新增-存在就忽略(或異動)的語法

在新增資料於資料表時, 有個需求, 是不存在的資料就新增, 存在的資料就不動作(或是要處理一些異動), 這樣的需求如何操作呢?

可以使用 INSERT IGNORE INTO [table] ….. 的語法,

若是要異動則使用

INSERT INTO [table]….. ON DUPLICATE KEY UPDATE col=expr …..

可以參考以下語法:
http://cain19811028.blogspot.tw/2015/01/mysql-insert-ignore-replace-on.html
https://mariadb.com/kb/en/mariadb/insert-on-duplicate-key-update/

分類
程式技術

bootstrap的datetime picker

在 bootstrap 下使用的 datetime picker 有不少, 不過簡單一點的可以參考這個:

http://www.malot.fr/bootstrap-datetimepicker/

主要是代碼短小, 使用起來也十分容易, 操作也很順手, 是個方便好用的 datetime picker.

若有在查找 bootstrap 的 datetime picker 這個會是一個不錯的選擇. (同時支援 bootstrap 2 與 bootstrap 3)

github: https://github.com/smalot/bootstrap-datetimepicker

分類
Javascript

可愛的ClockPicker-用時鐘方式來選取時間

這個專案組件很可愛, 是一個時間選取器, 呈現的介面就是一個時鐘, 操作起來還蠻方便的, 另外也在手機上測試操作看看, 也是一樣方便順手, 蠻有意思的.

有需要使用到 timepicker 的場合, 可以試看看這組 clockpicker , 很不錯.

有 bootstrap版本: http://weareoutman.github.io/clockpicker/
還有 jQuery 版本: http://weareoutman.github.io/clockpicker/jquery.html