Blogs

Google Maps JavaScript API – 設定Marker

Hank Chen 的照片

Google MAP API 裡面有不少的功能,我們常見的就是 Marker 的應用,例如:
我們上網查詢某個店家,往往下面都會附上店家的 google map 的店址與 Marker,點擊後還會出現店家資訊,這次就以設定單個或多個 Marker 來簡單的介紹

單一 Marker

範例程式碼如下,內含程式碼說明
參考網址: https://developers.google.com/maps/documentation/javascript/examples/map-rtl?hl=zh-tw

<!DOCTYPEhtml>
<html>
<head>
<title>單一Marker</title>
<metacharset="utf-8">
<style>
html,body,#map-canvas {
height: 100%;
margin: 0px;
padding: 0px
      } 閱讀全文  

Docker

David Lee 的照片

Google 資深工程師 Eric Brewer 近來大力推薦開源技術 Docker,認為這是自 Ruby on Rails 之後影響力最大的開發技術。Docker 就好像收納網路服務的容器,可以在單一伺服器上提供多種不同的服務,彼此間不會互相干擾。更重要的是,這個容器可以很容易的搬移到不同的伺服器,將服務佈置到其他伺服器上運行。

雲端運算服務的開發者們有一個願景:整個網際網路應該可以被當成一部超級電腦,各種網路服務可以從網際網路中汲取源源不絕的運算資源。然而實際情況並非如此,同一套服務很難運行在不同平台或機器上。Virtual Machine是一個解,但是 VM 需要搬移整個作業系統映像檔。 相較之下,Docker的訴求是極端輕量化,能更快且更方便的佈署與移動。

閱讀全文

ExtJS 5 的改變

Ulia Lin 的照片

Sencha 在四月初發佈了 ExtJS 5 beta 版本,這版本多了一些新功能:

1. 支持平板:支持觸控螢幕輸入,包括平板和觸控螢幕筆電。

2. 新的 MVVM 應用程序架構:加入了 Model-View-ViewModel 架構,新增了 Ext.app.ViewModel,最大的優點為 data binding,將 model 連接到 view,view 被修改時,會更新 model,同樣的,model 被修改時,也會更新 view。

3. ViewController:加入了新型控制器 Ext.app.ViewController,改善了許多部分。例如,利用 reference 和 lookupReference 輕鬆抓取元件,不必像過去使用 id 或 itemId 來抓取,增加效率; listeners 若沒指定 scope,將會作用在所屬的 ViewController;生命週期會跟著 view,達到自動管理釋放資源...等。

閱讀全文

SCSS

Juyun Wang 的照片

Sass (Syntactically Awesome Stylesheets) 是一種 CSS3 的擴充語言,它包含兩種語法,Sass (Syntactically Awesome Stylesheets) 和 SCSS (Sassy CSS) 。前者又可被稱為縮進語法,不用加上任何括號和分號,用縮進取代括號。後者和原本的 CSS3 類似,需要加上括號和分號。兩者在功能上並無差異,選擇哪一種語法完全看個人喜好,但是部分功能的語法不太一樣,撰寫前可以參考官方文件。

Sass 添加了巢狀規則、變數、混合、選擇器繼承等等功能,下面統一用 SCSS 範例為幾個功能做簡單的介紹。

1. 變數 (Variables)

SCSS 可以自行定義變數,我們可以將顏色、字型或長寬等等設定存成變數。以往如果某一個顏色要修改,要用搜尋一個一個的做修改,現在只要修改變數的值即可。

閱讀全文

Cluster in Node.JS cloud

Red Hung 的照片

由於 Node.JS 為 single thread 的程式語言,一個 process 最多佔用一個 core 的資源,為了能夠讓使用者在 multi-core 的系統環境下建立多個 child processes, Joyent 官方1)提供 cluster 的 lib 。

現有一個簡單的 server:

var http = require('http');
http.createServer(function(req, res) {
  res.writeHead(200);
  res.end('hello world\r\n');
}).listen(8000);

若在 multi-core 的系統環境下執行上面的範例,此 process 最多使用一個 core 的資源,若想要多加善用系統資源,就是建立多個 process,也就是建立多個 worker。

閱讀全文