(待寫完)

‘Real Time’, this conception is widely used on the web.If it combine with Nodejs, they will load more users and get higher performance.

So I introduce this module “socket.io” on Node.js.

First situation, you sent a message, people receive .

Second situation, you sent a message,people receive except yourself.

Compare these two situations,there are lots of discuss on the forum. However,I think that second situation is more logical than first.Because I think

Let’s talk about its frame.

socket.io divid into two parts, the Client and the Server. In the Server,there are three main js(manager.js,socket.io.js,socket.js,namespace.js) to build server service.Now, I will analyze the relationship between them.

“socket.io.js” is the closet to the Client.In line 40~79,all of the Client requests will through this entering Server.From the point of view of the Server,it listens Client requests and go to execute this code.

exports.listen = function (server, options, fn) {
    ...
    return new exports.Manager(server, options);
};

One thing to be noted the end of this code,it means call “manager.js”(we can see line 87 “exports.Manager = require(‘./manager’);”to understand)

Before “manager.js”,we see follow code :

io.sockets.on('connection', function (socket){
               ^^^^^^^^^^
...
})

Above code is exuted in Client,“io” means call a manager object,after “io” texts mean call a manager event ,and we see follow code on manager.js:

(call a manger object)
function Manager (server, options) {
  this.server = server;
  this.namespaces = {};
  this.sockets = this.of('');
  this.settings = {
    ...
  };

(call a manager event)
this.sockets.on('connection', function (conn) {
    self.emit('connection', conn);
});

From above code,we can understand all of connections will be managed by a null string(named namespaces)

ddd

s

manager.js socket.io.js socket.js

本篇想來探討關於issue的workflow，記錄解決issue的流程必須非常清楚，這有許多好處：

1.方便後人閱讀,維護
2.對於程式設計師來說，這是一個很好的記錄
3.讓團隊工作系統更有條理

這是我目前”記錄issue”主要的五個項目：

1.Observation:（觀察） 觀察問題，描述問題
2.Analysis & Design: （分析）  想想可能得解決辦法，或者是可能的狀況
3.Scope:（記錄）  施工，並且在這個項目記下有更改過的檔案路徑
4.Done:（完成） 完成，並寫下完成的路徑以及最主要更改過的檔案
5.Bottleneck:（瓶頸）這部份記錄關於此次issue所遇到的瓶頸和解決心得。

以下是範例 Issue name:

Set up footer div and eanable footer page.
footer page's content on google drive "WhatsWorthy User Agreement & Privacy Policy".

—

Author:Blue Chen Created: 11/31 Start: 11/15 08:47 End: 11/15 16:30 Duration: 1d

—

Observation:

Most of Our pages have the functionality of receiving data from external sites, it have resulted in some of the dynamic height .
According to web architecture,css and html will be read before javascript,we can't receive correct page's height to make footer div.So, we should build a way to solve this problem.

Analysis & Design:

1.Design footer layout
2.set regular footer style of css
3.Relate to dynamic height,we should set special javascript on every page.

Scope:(記錄更改過的檔案)

1./theme/2/css/main_layout.css
2./theme/2/layout/default.ctp

Done:

1./theme/2/css/main_layout.css
2./theme/2/layout/default.ctp

Bottleneck:

1. Setting regular footer style of css

The major difference between Html5 and xHTML is Html5 add more tag element,such as ‘<header>’ , ‘<nav>’….and so on.

We use these tag elements ,we also notice these tag element whether use in old browser at the same time. There I have one way to solve this problem.

First, we can use javascript to create element. Second,use css make this element become a “block” element(In other words,they can display on the web page)

As follows：

[javascript]

<!--[if IE]-->  
<script type="text/javascript">
document.createElement("header");
document.createElement("footer");
document.createElement("section");
document.createElement("aside");
document.createElement("nav");
document.createElement("article");
document.createElement("hgroup");
document.createElement("time");
</script>
<!--[endif]-->

[css]

section,header,footer,section,aside,nav,article,hgroup,time{
display:block
}

For javascript language ,anything must become JSON from Object!We can see following code:

Demo:

Before select one friend:

After select one friend,and …AJAX ! (catch his occasions)

Before show my code , I assume some variable.

1.SITE_URL: is our website's URL

[Html]:

<select class="select_fr_box" tabindex="1" onchange="getOccasion(this,'100000882157254,100002707491356&','GroupGiftProjectFacebookFriends');" id="GroupGiftProjectFacebookFriends">
    <option value="">Select friends</option>
    <option value="">blabla...</option>
</select>

[Javascript & jQuery]:

function getOccasion(ctrl,fb_user_friends,id){
    $.ajax({
        type: 'POST'
        ,url: SITE_URL+'/groupgiftprojects/getOccasion'
        ,data: {fb_id:ctrl.value}
        ,success:
            function(data) {
                var myObject = eval('(' + data + ')');
                console.log(myObject);
                var string ='<option value="">Select One</option>';

                (jQuery).each(myObject, function(i,value){
                    string+="<option value='"+(value.id).toString()+"'>"+(value.name).toString()+"</option>";
                });
                string+='<option value="Other">Other</option>';
                $('#GroupGiftProjectOccasionId').html(string);
                document.getElementById('id_other_text').style.display = 'none';
                document.getElementById('app_user').style.display = 'block';
                }
            })
}   

值得注意的一點，關於line5 的data部分是要輸入和種格式？為此我去查找jQuery Lib，這是輸入JSON格式. 講到JSON其實有很多可以去討論的，先來講幾個基本的東西

首先，在javscript中轉變成JSON之前，他必須是個物件

var a ={};
a.username="blue";
console.log(a.username) //blue
JSON.stringify(a);// 這時候就是個JSON格式'{"username":"blue"}'

但要怎麼從JSON轉回javscript可用的物件呢？

var a ='{"username":"blue"}';// 假設有個JSON
var b = JSON.parse(a); //把JSON轉成物件
這時候就可以像obj一樣導用JSON的函式
console.log(b.username); //"blue"

繼續[javascript部分]：line6的success函式function(data)，這時候的data指的是回傳的JSON(從controller回傳的）再用你喜歡的方法去抓想要的JSON內部值.

此外，補充一些在用facebook api的JSON心得，關於facebook graph的GET與POST中,jQuery 的AJAX只可有POST and GET,那麼DELETE要如何去傳送呢？ 其實不只有jQuery的AJAX無法直接傳送，連browser也需最近幾年的才有DELETE協定，不過這部份不列入我目前想探討的部份，用jQuery AJAX傳送DELETE可以先透過POST外加method方法，如下： （比方說做個”取消likes”的功能）

$.ajax({
    type: 'POST',
    url: 'https://graph.facebook.com/' + post_id + '/likes?method=delete',
    data: {
        "access_token": access_token,
        "_method": "delete"
    }
});

[php]（controller)：

public function getOccasion(){
    $fb_id =$_POST['fb_id'];
    $today_date = gmdate('Y-m-d',mktime(gmdate("H")+$this->me['timezone']));
    $occasion_list = $this->Occasion->query("SELECT  * FROM occasions as Occasion WHERE (Occasion.fb_id=".$fb_id." AND Occasion.recurs_annually =1) OR (Occasion.fb_id=".$fb_id." AND Occasion.recurs_annually=0 AND Occasion.starting_date >='".$today_date."' )");
    $occasion_arr =array();
    foreach( $occasion_list as $list){
        $temp =array();
        $occasion_name = $list['Occasion']['name'];
        $occasion_date = $list['Occasion']['starting_date'];
        $temp['fb_id']=$list['Occasion']['fb_id'];
        $temp['id']=$list['Occasion']['id'];
        $temp['name']=$occasion_name." - ".gmdate('F d, Y',strtotime($occasion_date));
        $occasion_arr[]=$temp;
    }
    echo json_encode($occasion_arr);
    exit;
} 

這段php，對於AJAX來說，最重要的是line2部分:$_POST[‘’]

這是負責抓取JSON給controller端的php函式，而最後第二行是從php轉成JSON代碼傳回給前端.

最後，來談談關於嚴謹的程式架構，我記得之前在研討會上，就有如此的疑問：

AJAX在controller端直接讀取json這個行為，究竟有沒有違反MVC架構? 我找了許多資料，嚴格的MVC架構中的C唯一的出口就是view，而這個行為就是只有從Controller順向過去View端（在呈現data時的流程）這是不可逆的，，因此證明這個答案是違反的！

但是這部份因為一樣都可以跑出結果，因此沒有受到廣泛注意，也有一些人都把此行為定義可彈性化的MVC架構，對於我來說這是有點雞肋，如果每個規範都彈性化，那規範真的就不較規範了!而這部份該如何去改善，其實現今各大主流的MVC框架都有相關作法，有空多讀讀核心原始碼即可知道!

舉例來說，以cakephp為例：

我們會在controller端把值傳到某個AJAX套用的ctp中，controller端會多以下function:

$this->set('cookieValue', $cookieValue);
$this->layout = 'ajax';
(就跟平常傳值到某ctp方法一樣)

而view端會在鄉對應的ctp中去echo出值，而AJAX就直接到這ctp裡面抓值，這就完成嚴謹的MVC架構的AJAX!

現今mobile系統越來越多，web應用在mobile系統上的技術也越來越多元，因此寫下此篇來專心探討這部份

首先，想必各位都會有個問題，如果是用web寫程式，那麼手機瀏覽器要如何去感應手機方向呢?

談到此議題之前，我想先來提viewport概念

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

viewport即是手機browser把web page放在一個虛擬window之中，而這個window就是viewport，你可以想像他是web page的最外圍frame。

不過此code需注意，只需要注意width部分即可，我曾經試過在加上height=device-height，不過這樣會造成瀏覽器判定你要針對此width和此height去做等比變化，因此會造成你在Portrait(直立)轉向Landscape（橫向）操作時，畫面右邊會出現一大片黑背景，而不會針對各種操作方向螢幕做變化。

面對Web在行動系統或者是五花八門的螢幕時，都會需要針對特定螢幕呈現 ，那麼如何去針對個螢幕調整css呢？

在css中，最常見使用的方式就是利用＠Media query，用法有兩種：

1.在Html中：

<link rel="stylesheet" media="screen and (min-width: 400px) and (max-width: 700px)" href="yourcssfile.css" />

2.在CSS中嵌入：

@media screen and (min-width: 400px) and (max-width: 700px) {
your code....
}

以上嵌入code的意思是說在螢幕視窗寬度介在400px~700px之間時，就套用這些css

這個方法好處，在於可以在瀏覽器的外框隨意調整視窗大小，他所對應的視窗大小的css也會有所呈現， 這樣就可以隨意來模擬各種mobile系統螢幕長寬所看到的模擬畫面 下面有幾個常見的mobile系統的視窗大小：

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

除了上述使用寬度來判別之外，在new pad推出時因為帶來更高的解析度，因此也有人使用解析度來判別：

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) 

當然，要如何排放這些特殊系統的css也是有一門學問，如果你想了解詳情，可以參考此篇文章：

http://blog.hinablue.me/entry/css-media-query-tips

我也來分享一下我目前的經驗，我建議一開始（沒有media query包住的css）請以smartphone為優先設定

假設你的css是設定：

在Desktop螢幕中設定是能看到一個大div(id:a)裡面包住四個小div
在smartphone螢幕中設定是能看到一個大div(id:a)裡面包住四個小div

那麼你在沒有包media query部分的css如果是以Desktop為設定時，你在smartphone上因為下載速度較慢，他優先套用Desktop的設定，所以螢幕所看到的會先是”一個大div有四個div”轉變成smartphone真正要看到的樣子，這對於美觀來說並不好看。

再來，如果是用此方法在mobile系統上會有個問題必須解決，那就是效能。mobile在使用行動網路時，有時候讀取速度會非常緩慢，這時候front-end developer必須要針對code進行一些清潔，最常見的方法就是減少mobile系統讀取display:none的div，對於這個議題，這篇blog文章有詳細分析各種方法在瀏覽器上讀取的情況。

請參考：

http://www.qianduan.net/media-query-and-http-requests.html

觀察他的測試，可以得到一些結論

1.如果在圖片的div(最好是用background-image方法呈現圖片)的父親div設置display:none
2.利用media query針對各螢幕大小去區分圖片呈現

第2點我認為是觀念最簡單且最容易上手的方式，但有個缺點，在早期的瀏覽器（IE8是無法支援media query方式）不過這是可以利用條件注釋來解決

when we are coworking on github,there maybe have some conflict problems between partner occasionally.

I assume some reason previously, and find some solutions.

1.Between Master and Branches problem

Because our project was small previously, we was coding on Master. However,If we have more developer on this Master or project become more complex (For example, there are two developer on this Master at the same time),we will face conflict status.

Now, we must use git’s “branch” feature. As the name suggests,it means coder do his project in his own branch.When his project will be done, he can push it from branch to Master.

This way has advantages as follows:

1.We can use branch to build website's plugin.We can change plugin easily.

2.The follow-up project tracking can use branch to distinguish all projects.

Hint! When we use it previously, we must understand it steps.

In Master, it step is :

commit -> pull ->push

In Branch , it step will be more complex.As follows:

Part I：

commit

Part II:（先從github的主幹上面下載別人做的東西，跟在dev做的pull即是一樣的道理）

1) switch to Local/dev: git checkout dev
2) pull: git pull
3)switch to Local/[topic] branch: git checkout [topic]
4) merge Local/dev branch into currently checked out branch (topic): git merge dev

Part III:（把自己的branch與主幹merge並丟上github跟push道理是一樣的)

1)switch to Local/dev branch: git checkout dev
2)pull: git pull
3)merge topic branch into currently checked out branch (Local/dev): git merge [topic]
4)push (if ready to share): git push
5)switch back to Local/topic branch to continue development: git checkout [topic]

We can make a bash to combine PartII and PartIII.As follows:

PART II:

function setWorkingBranch {
  br=`git branch | grep "*"`
  workingBranch=${br/* /}
}
setWorkingBranch
echo 'Currently on '$workingBranch
echo 'Checking out dev...'
git checkout dev
echo 'Pulling...'
git pull
echo 'Checking out '$workingBranch'...'
git checkout $workingBranch
echo 'Merging dev into '$workingBranch'...'
git merge dev

Part III:

function setWorkingBranch {
  br=`git branch | grep "*"`
  workingBranch=${br/* /}
}
setWorkingBranch
echo 'Currently on '$workingBranch
echo 'Checking out dev...'
git checkout dev
echo 'Pulling...'
git pull
echo 'Merging '$workingBranch' into dev...'
git merge $workingBranch
echo 'Pushing to origin...'
git push
echo 'Checking out '$workingBranch'...'
git checkout $workingBranch

github on Mac