Category: 技術文章

技術文章, 無用知識, 資訊科技

javasacript-i18n-core vA.1

2022 年 02 月 11 日

i18n, javascript

過年期間有人詢問「javascript-i18-core」怎麼不見了，是因為之前將「程式試煉所」換了底層框架，所以舊網頁都先下架，需要找時間再「慢慢地」弄回來，也因此順手就先將 javascript-i18n-core 更新版本。新版本 A.1 最主要是多了 pass object 替換變數和 auto translate 功能。 https://code.essoduke.org/i18n https://github.com/essoduke/javascript-i18n-core Quick start import i18n from './i18n.js'; i18n.set({ 'resource': '/i18n.json', 'locale': 'en' }).init(function () { // do something }); Usage // general let foo = i18n._("key"); // pass by object const user = { 'name': 'John', 'age': 10 }; let foo = […]

技術文章, 資訊科技

jQuery tinyMap v3.2 release

2015 年 06 月 17 日

google maps, javascript, jquery, plugin

前一陣子釋出了 v3.2 版本，也順便更新了套件網站，除了讓網站讀取更為順暢，也將使用文件做了大幅度更動。 GitHub jQuery tinyMap v3.2 最主要的更新有：不再需要手動引入 Google Maps API 以及 markerclusterer 函式庫了。可自訂路徑規劃各中繼點的圖示。支援原生 directions 參數。支援原生 kml 參數。支援原生 markerCluster 參數。支援 Places API。更有彈性的 clear 清除方法。全新的 get 方法，讓獲取圖層更彈性及簡單。(v3.2.3) 修正錯誤。 get 方法使用範例 // 取得所有圖層 var layers = $(selector).tinyMap('get'); // 取得指定圖層 var layer = $(selector).tinyMap('get', 'marker'); // 取得多個圖層 var layer = […]

jQuery tinyMap 進階應用

2014 年 08 月 05 日

google maps, jquery, tinymap

五年來，jQuery tinyMap 已邁入 v2.8.4，期間也是因為有許多網友們的建議，才能有逐漸成型的今日，就連 Facebook 分享數都突破了 300 大關，真是深感意外。所以我整理了幾個比較特殊的問題並整理成範例讓更多人可以參考。找出距離最近的標記可以利用 Google Maps API 提供的幾何圖形程式庫來計算各點與目前的直線距離。要使用該程式庫，在引入 API 時需加上 libraries=geometry 參數： <script src="//maps.google.com/maps/api/js?sensor=false&libraries=geometry"></script> 在 Map Idle 事件內用迴圈逐一比對各標記與某點之間的距離，並將所得結果（公尺）存入陣列，再找出陣列最小值的索引值即可。

技術文章, 電玩人生

架設 Starbound Linux 伺服器

2014 年 04 月 09 日

linux, starbound, steam, terraria

前陣子一直在玩 Starbound（雖然目前已荒廢），當時為了想推坑所以就想架個伺服器試試，於是找到了這篇入門文章，經由作者同意後我就翻譯貼上來了。原文連結: Daniel Sokolowski’s Blog: Starbound Dedicated Server Setup Thanks to Daniel Sokolowski. Starbound 專用伺服器架設使用 Debian 架設全天候的 Starbound 伺服器 Starbound 是一款類 Terraria 的外太空生存 / 建造遊戲。在觀看一些影片並且實際試玩了一下後，我只能說這款遊戲內的豐富生態和可掠奪的星球設定很對我胃口。因此除了原有的 minecraft.danols.com 之外，我決定再為 Starbound 架設一個全年無休的專用主機 starbound.danols.com，以下就是架設教學。取得 Debian linux 伺服器如果你尚未擁有 Linux 伺服器，我推薦 Linode Xen VPS 提供的主機服務 – 最基本的方案就行了。至今我使用他們的服務超過五年，覺得無可挑剔。雖然坊間還有其他更便宜的主機商，但是一分錢一分貨是不變的真理；況且最基本的方案就足以讓我架設 FreeSWITCH VOIP、Minecraft、電子郵件以及跑一些網站了。

javascript-i18n-core v1.1 released.

2014 年 04 月 03 日

i18n, javascript, 多國語言, 本地化

javascript-i18n-core 可以輕鬆在專案內加入 javascript 的本地化。 v1.1 版更新了語系檔嵌套的支援。舊語法只能使用一對一的字串，對於管理維護不太方便： { "hello world": "你好，世界。" } 新版本則支援嵌套方式。 { "hello": { "world": "世界", "%1 kitty ", "%1 的凱蒂" } } 使用上如同以往，除了嵌套需以 . 來呼叫（也就是語系檔的 KEY 除了嵌套之外不能使用）。 i18n._('hello.world'); i18n._('hello.%1 kitty', 'my');

PHP fullurl function

2014 年 04 月 03 日

fullurl 是一個可以取得或產生子網域的小函數，好像很難說明… 假設網站使用下列三個包括使用 https 和不同埠號子網域、以及兩組主網域（開發 test.com、上線 test.tw）： http://www.test.com, http://www.test.tw http://user.test.com:5678, http://user.test.tw:5678 https://ec.test.com, https://ec.test.tw 若在開發環境內需要產生連結至 https://ec.test.tw 的網址，以往的方式可能就是 parse_url 和 $_SERVER 來組合，甚至是將主網域寫死等到上線再改一次，依照懶人哲學這實在是浪費生命又不環保，於是 fullurl 就出現了。以上述為例，我只需要呼叫 fullurl('ec', true); 在開發環境能產生 https://ec.test.com，而上線後則會自動產出 https://ec.test.tw。至於埠號也是能經由參數任意控制，例如 fullurl('user', false, 5678); 就能產出 http://user.test.com:5678；或是帶入 0 消除埠號，例如在 http://user.test.com:5678 的環境下使用 fullurl('www', false, 0); 能產出 http://www.test.com。更多例子、沙盒及原始碼： http://app.essoduke.org/sandbox/fullurl.php echo fullurl(); // Get the current URI. // output: http://app.essoduke.org […]

技術文章, 軟體分享

jQuery tinyMap – 輕鬆建立 Google Maps 的 jQuery Plugin

2013 年 07 月 30 日

api, google, javascript, jquery, map, plugin

jQuery tinyMap 是一款可以輕鬆在網頁上建立 Google Map 的 Plugin。最新版本: 2.7.0 (2014-05-22) jQuery tinyMap – 輕鬆建立 Google Maps 的 jQuery Plugin GitHub – jQuery tinyMap

jQuery TWzipcode32: 3+2 郵遞區號 Plugin 測試

2013 年 07 月 19 日

jquery, plugin, 郵遞區號

雖然這個 plugin 似乎沒什麼需求，畢竟可以查詢的資源太多，不過還是口嫌體正直地試著實做了。實做難度在於把資料正規化，以及為了異步讀取必須把資料檔縮小，這部份對照之前的 1.0 版倒是足足縮減成 1/6。正規化方面最麻煩，雖然測試過幾個地址都正確無誤，但是我對於查詢結果實在是沒什麼信心 XD（希望有人能提點一下查詢網站怎麼做的）最後就是希望操作流程能更方便，因此捨棄之前很蠢的地址下拉方式，改為直接讓使用者輸入地址（惟縣市和鄉鎮市區暫時採用清單）會更為直觀。這個 beta 用到的所有檔案都能夠下載，若發現有任何錯誤或能改進的地方，請務必鞭策！

HTML5 WebStorage API snippet

2013 年 02 月 08 日

api, html5, webstorage

這個簡單的程式可以讓你稍微少打幾個字就能存取 WebStorage，除此之外沒什麼幫助 :p 前言 HTML5 WebStorage API 可以讓開發者以 key-value pairs 格式的 DOMString 資料儲存在用戶端瀏覽器內，和 cookie 很像，最大的差別就在於 WebStorage API 並不會隨著 HTTP request 傳送，對於節省流量能有些許幫助。除此之外，cookie 可以設定 expires 調整存活時間，而 WebStorage API 就只有 localStorage（永久或手動清除）及 sessionStorage（視窗或分頁關閉）。

Twitter Bootstrap Modal Controller

2013 年 02 月 06 日

bootstrap, twitter

今天又來幫 Twitter Bootstrap 的 Modal 做個易用改造。可傳入 message, header 可綁定兩個 button 事件及顯示字串 /** * Modal HTML must be setting first, default ID is 'alert'.... * Reference: http://twitter.github.com/bootstrap/javascript.html#modals */ // Modal setting var opt = { 'message': '', // Message context {string} (Must have) 'header': '', // Header title {string} (Must have) 'submit': { // […]

ThinkPHP 3.1 內建分頁類 patch

2013 年 02 月 05 日

ThinkPHP 3.1 內建的分頁類（Page）在樣板設置上出了個小問題，如果分頁數大於 5 就會出現寫死在程式碼內的「上5頁、下5頁」等簡體字串，所以著手修改以配合多語系的專案。開啟「ThinkPHP/Extend/Library/ORG/Util/Page.class.php 尋找第 34 行並修改如下 protected $config = array('prevroll'=>'上 %n 页', 'nextroll'=>'下 %n 页', 'header'=>'条记录','prev'=>'上一页','next'=>'下一页','first'=>'第一页','last'=>'最后一页','theme'=>' %totalRow% %header% %nowPage%/%totalPage% 页 %upPage% %downPage% %first% %prePage% %linkPage% %nextPage% %end%'); 尋找第 119, 120 行並修改如下 $prePage = "<a href='".str_replace('__PAGE__',$preRow,$url)."' >".str_replace('%n', $this->rollPage, $this->config['prevroll'])."</a>"; $nextPage = "<a href='".str_replace('__PAGE__',$nextRow,$url)."' >".str_replace('%n', $this->rollPage, $this->config['nextroll'])."</a>"; 存檔收工！

Twitter Bootstrap Alert Controller v2

2013 年 02 月 05 日

bootstrap, twitter

改良了一下，讓傳遞參數較為方便及精簡程式碼。 var param = { message: '', // 訊息 {string} 必要 header: '', // 標題 {string}（選填） style: '', // 樣式名稱 {string} e.g. info, success, error, block（選填） hidden: 0, // 顯示秒數 {int} N 毫秒後隱藏（選填） scroll: false // 顯示後是否移到頂端 }; message.show(param);

Twitter Bootstrap Alert Controller

2013 年 02 月 04 日

bootstrap, twitter

※ 已發布 v2 版本！將 bootstrap alert 稍微改造一下，使之更易於呼叫使用。範例: http://jsfiddle.net/essoduke/kXLv5/ 可顯示多個 alert 提供 ms 參數可設置 n 毫秒後自動隱藏使用 clear 方法可一次隱藏所有 alert

ThinkPHP 3.1 模板嵌套語法內的空格被消除的問題

2013 年 02 月 04 日

這標題有點難以說明，看範例比較準。 <p <eq name="var" value="1">class="selected">TEST</p> <p <eq name="var" value="1"> class="selected">TEST</p> 若上例 (1) 的 var 並非為 “1” 以及上例 (2) 的 var 為 “1”，則引擎解析後的 HTML 會變成: <p 　>TEST</p>  <pclass ="selected">TEST </pclass> 看了是不是就倒彈？所以手動修改 ThinkPHP/Lib/Template/ThinkTemplate.class.php: 尋找第 429 行並將 trim 去掉: $content = trim($content); 改完後上述例子就能更賞心悅目了 <p>TEST</p> <p class="selected">TEST</p> 收工！

Google Maps 座標工具 1.2 Beta

2012 年 05 月 21 日

google, javascript, maps

有網友來信要求輸出清單增加可複製單項的功能，不過考慮到跨瀏覽器的問題，所以用了偷吃步的方式達成；一方面可以少掛幾個檔案，另一方面程式就不用配合修改。再來，考量到這個工具年久失修，當時也只是手邊工作需要而試作，索性這次整個用 Google Maps API V3 重新改寫並釋出為 Beta 服務。這次更新了：介面採用全畫面地圖操作、隱藏式座標清單輸出 JSON、CSV 及 QueryString 格式支援 W3C Geolocation API 支援 IE8+, Google Chrome, Safari, Opera

技術文章, 電玩人生

Mac OS X Error: steam needs to be online to update.

2011 年 11 月 11 日

如果想要在 Mac OS 玩玩 Steam，卻不幸在安裝時出現「steam needs to be online to update」的錯誤，而且明明網路就沒問題，怎麼辦？

技術文章, 資訊科技

jQuery pasttimes: 計算已經消逝的時間

2011 年 10 月 29 日

facebook, jquery, 臉書

仿製 Facebook 塗鴉牆上各個訊息的貼文經過時間，例如 3 分鐘前、1 小時前或 4 天前的自動計算功能。完整範例參考: jQuery pasttime: 計算已經消逝的時間圖例

技術文章, 資訊科技

jQuery checkbox 全選+變色: 挑戰最簡寫法

2011 年 10 月 28 日

checkbox, jquery

前言以往寫這種功能似乎都要寫好幾行，儘管有了 jQuery 加持，也是會把事件都綁定到主控的 checkbox 再做處理，結構上略顯混亂及累贅，所以這次來挑戰看看是不是有比較直覺、結構清楚又兼顧效能的寫法。 jsFiddle Online Test

技術文章, 資訊科技

[更新] jQuery 台灣郵遞區號套件 1.4.1

2011 年 10 月 12 日

jquery, plugin, twzipcode

1.4.1 (Oct 12, 2011) 新增參數 detect 可偵測用戶位置 (需載入 Google Maps API, 僅適用 IE9/Firefox 3.x/Chrome/Opera 10.5/Safari 4) Demo: 台灣郵遞區號外掛 / Taiwan Zip Code Plugin of jQuery 要使用新功能必須先載入 Google Maps API <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 然後加入 detect 參數並設為 true 即可 $(function () { $(selector).twzipcode({ detect: true }); }); 當瀏覽器偵測到地理位置請求時會在上方出現: 確認後再重整一次網頁即可看到偵測結果。附註說明 Geolocation API 屬於 HTML5 的規格，所以瀏覽器僅支援 IE9/Google Chrome/Safari […]

技術文章, 網站日誌

Linode 512 設定筆記

2011 年 08 月 04 日

linode, mysql, nginx, php, vps

OS: Ubuntu 11.04 64bit Nginx + PHP5-FPM + APC + ZendGuard Wordpress + Hypercache

技術文章, 網站日誌

網誌轉移至 Linode VPS 試運轉

2011 年 07 月 28 日

上個禮拜買了 Linode 512，打算往後整個網站都搬到 VPS 運作，雖然 HostMonster 租約還有一年多，不過先試著調整看看也不賴。目前僅暫時將 essoduke.org 指向新主機，其餘都還留在 HostMonster，所以除了網誌可能爆炸以外，其他暫時都不受影響。這次使用 Ubuntu + Nginx + PHP5-FPM 搭建 Web server，效能果然很讚，但是記憶體佔用實在是個大問題，而且也遇到 Fastcgi 逾時的問題，可能還要再調校一下… 我也針對 Apache 和 Nginx 做了 ab -n 50 測試，結果是不相上下，不過一加碼到 -n 50 -c 10，Apache 就大爆炸了，這也得歸功於 Linode 強大的控制台，彈指之間就可以佈署 Distribution。總之，還是先觀察幾天看看是不是會爆炸了！ — 另外也將網誌換了一套更精簡的主題，不過還在調整就是…

技術文章, 資訊科技

javascript Internationalization (i18n) v1.0

2011 年 06 月 15 日

i18n, javascript

將上次試作的版本做了修改，主要是將字串從核心程式檔案中依照語系獨立出來；語系檔則使用 XMLHttpRequest 非同步方式（async）讀取，所以第一次呼叫時會稍微延遲，這部份再想辦法改善。 View the Demo 已知問題： IE9 的自訂日期「i18n.datetime(date)」會產生 undefined 的錯誤。轉換的來源格式必須是 YYYY/MM/DD 測試平台: Google Chrome 10, IE8, Firefox 4

jQuery Fancybox with Sortable click event prevent

2011 年 06 月 03 日

fancybox, jquery

使用 lightbox 時，預設都是點擊就開啟效果，如果需搭配 draggable, droppable 或 sortable 等需要點擊拖曳的效果時，就會發生拖曳卻一直開 lightbox 的窘境。參考了 An Awesome CSS3 Lightbox Gallery With jQuery 後，發現簡易解法（以 jQuery UI Sortable 為例）：建立 preventClick 變數決定是否需遮蔽事件在開始拖曳時的 start 事件將此變數設為 true（遮蔽）拖曳停止時變數設為 false（不遮蔽） var preventClick = false; //覆寫 fancybox Click event jQuery('a.fancybox').bind('click', function(e){ if (preventClick) { e.stopImmediatePropagation(); e.preventDefault(); } }); //建立 sortable jQuery('#sortable').sortable({ start: function () […]

jQuery Plugin Weather

2011 年 05 月 18 日

javascript, jquery, 程式設計

測試上一版的 deferred object，搭配 worldweatheronline.com API。 $('#weather').weather({ key: 'API key', //worldweatheronline.com API Key query: 'kaohsiung,taipei', //英文城市名稱，使用半形逗號可列出多個位置 html: true/false, //是否輸出 html，預設 true unit: 'C/F', //溫度單位 C 攝氏, F 華氏，預設 'C' lang: 'en/tw', //語系 en 英文, tw 中文，預設 'tw' success: function (resp) {} //回傳氣象物件 }); Demo

[更新] jQuery 台灣郵遞區號套件 1.4

2011 年 04 月 27 日

javascript, jquery, twzipcode, zipcode, 郵遞區號

jQuery 台灣郵遞區號套件更新至 1.4：修改原始碼以符合 jslint.com 驗證修改參數名稱 areaName => districtName, zipName => zipcodeName, areaSel => districtSel, zipSel => zipcodeSel, zipReadonly => readonly 修正當指定元素名稱時，若名稱內包含 [] 會發生錯誤的情形。加入 destroy, reset, serialize 等方法更新 Creative Commons License 至 3.0 $(function(){ $('#zipcode-1').twzipcode(); $('#zipcode-2').twzipcode({ zipcodeSel: 830, readonly: false }); $('button').click(function(){ var result = $('#' + $(this).val()).twzipcode($(this).text()); if ('serialize' === $(this).text()) […]

[修正] Google Maps API v3 畫圓參數修正

2011 年 04 月 22 日

自從發表了 Google Maps API v3 畫圓文章至今，Google Maps API 已更新至 3.4 版。目前發現從 3.3 開始，Circle options 中的 fillColor, strokeColor 必須填寫完整的 Hex Code 而不能使用簡短寫法，例如：#369 就必須寫成 #336699。所以就順手修正了 Google Maps API v3 畫圓 Demo。

Clone object using jQuery.extend() in javascript

2011 年 03 月 08 日

javascript, jquery

在 Javascript 中，如何複製物件？一般情況下都會想使用 = 的方式來複製，不過可能會得到以下結果： var obj = {'a': 1, 'b': 2}; var new_obj = obj; new_obj.c = 3; //result obj = {'a': 1, 'b': 2, 'c': 3};

JSLint: Missing ‘new’ prefix when invoking a constructor

2011 年 01 月 19 日

javascript, jslint

這個錯誤或許能說是 JSLint 的 Bug 吧？ var TestCode = function () { return false; }; alert(TestCode()); /* * Problem at line 5 character 8: Missing 'new' prefix when invoking a constructor. */ LINT 基本上是預期所有函式名稱的首字是大寫字母，這也是正規的程式設計風格所建議的。但不知道為什麼，若是檢測的程式碼片段中有呼叫首字母為大寫的函數名稱，就會出現 Missing ‘new’ prefix when invoking a constructor 這個錯誤。既然設計風格是提倡首字母大寫的習慣，但是卻會檢測出錯誤，所以我懷疑這是 JSLint 的 Bug。不過使用小寫也不是什麼錯誤，所以只要將函式名稱的首字母改為小寫就能修正 :p

SimplePage Class for ThinkPHP 2.0

2011 年 01 月 18 日

原始 ThinkPHP 的分頁類比較陽春，也不支援靜態分頁，所以著手改寫了一個… 特色類似 Google 的分頁方式支援動、靜態分頁（PATH_INFO）圖例

Google Maps API v3 畫圓

2010 年 09 月 28 日

api, google, javascript, map

Google Maps API 之前的畫圓方式通常需要自己根據座標去計算每一個點的位置再劃線串接，不過在 v3 之後直接提供一個 Circle 類別可以很輕鬆地就畫出： var circle = new google.maps.Circle({ center: Latlng clickable: true/false, radius: number, map: map, strokeColor: string, strokeWidth: number, strokeOpacity: number, fillColor: string, fillOpacity: number }); DEMO: http://app.essoduke.org/yt/