發表於 更新於 分類於 ，

我的工作開發框架是使用Angular1，在串接API的時候$http讓我們方便許多。

首先原生的Ajax使用可以參考這篇MDN，那這篇紀錄一下怎麼用$http上傳formdata的東西：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var dataObj = someObj;
console.log(dataObj); //要上傳的東西，上傳前看一下是好習慣。
var formdata = new FormData();
angular.forEach(dataObj, function (value, key) {
    formdata.append(key, value);
});

$http({
    method: "POST",
    url: "URL",
    data: formdata,
    headers: { "Content-Type": undefined }
}).then(function (response) {console.log(response)})
  .catch(function (response) {console.log(response)});

其實最需要注意的是headers : { "Content-Type": undefined }這裡的設定，查到很多舊資料是設定false，但問過一些人之後似乎是有一次angular的改版要變設定為undefined。

第二個設定是有人把data: formdata使用一個$parse過濾要上傳的東西，變成data: $parse(formdata)，但我沒有成功過，那似乎是翻譯angular的語法，已經有點不相干了。

以正常的物件post基本formdata的時候就使用上面那些設定就好囉！有特殊的使用就要再去了解了headers要如何設定。

發表於 更新於 分類於 ，

我的工作是以Angular1框架做開發，遇到了需要上傳檔案的問題。

基本的方法查詢後想說以：
<input type="file" ng-change="upload(this)">
這行程式碼做開發，但發現ng-change並不會被觸發，只能用比較特別的方法。

使用原生onchange代替ng-change

那怎麼用原生的onchange呼叫到angular的controller裡的function呢？
直接看範例：

1
2
3
<div ng-controller="uploadController">
    <input type="file" onchange="angular.element(this).scope().upload(this)" >
</div>

這樣就可以觸發囉！
再來怎麼抓上傳檔案的內容呢？在controller裡的function裡下：

1
2
3
function upload (element) {
    console.log(element.files[0]);
}

就可以開始對他進行操作了。

如何呼喚在controller as Ctrl的function?

有參考過John papa的規範一定很熟悉為了程式碼的乾淨會在html下：

1
2
3
<div ng-controller="uploadController as upload">
    <div ng-click="upload.someFn()">click me!</div>
</div>

這樣可以馬上知道someFn()這個function是誰家的controller，那融合剛剛說的用原生的onchange怎麼做到冠上Controller名稱的function呢？
直接看範例：

1
2
3
<div ng-controller="uploadController as uploadCtrl">
    <input type="file" onchange="angular.element(this).scope().uploadCtrl.upload(this)" >
</div>

這樣controller裡的程式碼就能繼續照著規範走保持整潔囉！

底層怎麼走的還不太清楚，小小的工作心得分享！

發表於 更新於 分類於 ，

最近在重整公司專案一個controller一個頁面吃到完的hard code，網路上找了許多規範，大家都很推johnpapa的angular規範，但在父子關係的controller之間的通訊是如何呢？

在這邊紀錄一下我直接用實測的方式做出來，還不是很清楚底層發生了什麼事情。

父子都注入$scope的話

在這邊我就不多贅述創造module的部分，只針對controller寫範例：

1
2
3
4
5
6
<div ng-controller="parentCtrl">
    {{ father }}
    <div ng-controller="childCtrl">
        {{ son }}
    </div>
</div>

這是我公司最一開始html的寫法，我想也是大家剛接觸angular的寫法，我來看看JS的部分(參照johnpapa的規範寫兩個JS檔案)：

parentCtrl.js
1
2
3
4
5
6
7
8
9
10
angular
    .module('app')
    .controller('parentCtrl', parentCtrl)

    parentCtrl.$inject = ['$scope'];

   function parentCtrl ($scope) {
        $scope.father = "hasFather";
        $scope.son = "hasSon";
   }

接下來創造childCtrl，裡面沒有任何的程式碼，純粹console.log變數出來看：

childCtrl.js
1
2
3
4
5
6
7
8
9
10
angular
    .module('app')
    .controller('childCtrl', childCtrl)

    childCtrl.$inject = ['$scope'];

   function childCtrl ($scope) {
        console.log($scope.father);//hasFather
        console.log($scope.son);//hasSon
   }

發現在childCtrl其實就跟parentCtrl共用$scope了！
更明顯的是可以直接在html裡面看到結果，這讓我迷思的一點是大家都說每一個controller都有屬於自己的$scope，但在父子關係的controller似乎不是這樣子。

##父子使用this去注入$scope的話
在剛剛的例子之後，接下來我們親愛的johnpapa說不要這樣寫，因為html和變數一多會很難以維護，意思就是不要一直用$scope宣告變數，那該怎麼讓變數跟自己的controller綁定？

有一版的angular新增了controller as ctrl的這個功能，現在我們可以很直覺的直接在html裡面看得出這個變數是屬於哪個controller的。

來看看html做了哪些更新：

1
2
3
4
5
6
<div ng-controller="parentCtrl as parent">
    {{ parent.father }}
    <div ng-controller="childCtrl as child">
        {{ child.son }}
    </div>
</div>

使用controller as之後表達式一定要這樣寫才行喔！！
這樣就很清楚知道這個表達式的變數是哪個controller裡面的。

那麼controller怎麼使用johnpapa所說的this呢？

parentCtrl.js
1
2
3
4
5
6
7
8
9
10
angular
    .module('app')
    .controller('parentCtrl', parentCtrl)

    parentCtrl.$inject = ['$scope'];

   function parentCtrl ($scope) {
        var self = this;
        this.father = "hasFather";
   }

childCtrl也要有自己的變數囉！但是我們依然可以測試一下childCtrl到底吃不吃得到parentCtrl的變數，我們用console.log來查查：

childCtrl.js
1
2
3
4
5
6
7
8
9
10
11
angular
    .module('app')
    .controller('childCtrl', childCtrl)

    childCtrl.$inject = ['$scope'];

   function childCtrl ($scope) {
        var self = this;
        this.son = "hasSon";
        console.log(self.father);//undefiend
   }

此時html都可以正常顯示的，因為parent.father有正確的在parentCtrl裡宣告，而child.son有正確的在childCtrl裡宣告，但是在childCtrl裡已經找不到self.father的變數囉！

這邊還蠻直覺的，因為畢竟在兩個controller裡面都宣告自己的this，我們也可以在兩個環境都下console.log(this);就會看出他們確實指向不同的物件(有不同的變數環境)。

接下來最有趣的東西來了

如果我們在childCtrl把var self = this;拿走呢？猜猜看會發生什麼事？

childCtrl.js
1
2
3
4
5
6
7
8
9
10
angular
    .module('app')
    .controller('childCtrl', childCtrl)

    childCtrl.$inject = ['$scope'];

   function childCtrl ($scope) {
        this.son = "hasSon";
        console.log(self);//會發生什麼事情！？
   }

我在下console.log(self);以前會認為因為在childCtrl找不到self所以向外看到了parentCtrl有self，所以應該會指向他，但是…..BAAAANG!!!

如果沒有宣告self的話他竟然指向了window！！！
ＷＴＦ？？
self不是被我宣告是指向parentCtrl這個物件裡嗎XD？

總之測試告一段落，因為我本來一直苦惱著要怎麼讓兩個controller溝通，網路上查就有三大種方法，第一個自己創service，第二個是使用$broadcast的事件，再來第三個是直接使用$rootScope，在這裡就不在贅述囉！

這是我自己測試出來的，如果大家有什麼好心得可以交流一下囉！

發表於 更新於 分類於 ，

HTTP協定到底是什麼？

在網路的世界我們看到的網頁進行的任何操作到底發生了什麼事情呢？我們先簡單的介紹兩個動作和三個端點。

三個端點分別為客戶端(Client)，服務端(Server，也可以說是伺服器)與資料庫(DB)，而兩個動作分別為請求(Request)和回應(Response)。

再來客戶端所有的操作都會發出請求給服務端，而服務端向資料庫拿取剛剛客戶端想請求的東西後在回應給客戶端。

其實講白一點就很像我們在電購東西，今天客人(客戶端)想買一台電視，所以他拿起電話打給店家(服務端)說要下訂一台液晶螢幕，這個動作就叫做請求。

再來店家(服務端)收到訂單之後會去倉庫(資料庫)看看剛剛接到的訂單(請求)還有沒有庫存，有的話就會回電話(成功的回應)給客人說下訂成功，即使沒有庫存的還是會回電話給客人說因為沒有庫存的所以沒有下訂成功(失敗的回應)。

而這種互動方式在網路上面就稱為HTTP協定，那我們什麼時候會發送請求這個動作呢？

一般最簡單的就是註冊會員送出的表單就是了，但其實我們打開瀏覽器後輸入的每個網址都是一個請求喔！接下來順勢看看什麼是CRUD與RESTful吧！

CRUD與RESTful

剛剛說的HTTP協定他其實有很多種請求的動作，例如HEAD、GET、
POST、PUT等等還有很多，這些網路上就找得到不用特地背起來，而最常用的動作分別是GET、POST、PUT、PATCH和DELETE，這些也不用背，因為會常用到然而然背起來。

在以前我們如何對服務端(server)敘述請求的動作？最原始的方法就是直接在網址裡面敘述：

1
2
3
4
獲取所有使用者資料/getAllUsers
獲取使用者資料/getUser/1
更新使用者資料/update/user/1
刪除使用者資料/delete/user/1

但在Ruby on Rails他發明了更直覺的敘述方法，這種敘述方法就稱為RESTful API：

1
2
3
4
獲取所有使用者資料/GET/users
獲取使用者資料/GET/user/1
新增使用者資料/POST/user
刪除使用者資料/DELETE/user/1

RESTful API最主要的是我們可以直接看到什麼樣的請求動作已經在大寫清楚地述敘在上面。

這樣的規範我們得到了兩個最棒的優點：
1.直觀簡潔的resource URI
2.善用HTTP的動詞

老師在這邊有提到一個很特別的事情，就是HTML5只能用GET和POST！！
這樣講起來好像又很弔詭，那到底能不能用呢？

如果是用Rails當服務端是完全沒有問題的！ROR服務端是可以了解這種敘述方法的，事實上RESTful API就是ROR發明出來的！

什麼是MVC架構？

ROR天生就是照著MVC的架構做出專案

先敘述一下在rails的世界裡Router像是總機小姐，可以決定什麼樣的請求會導向哪裡，或者呼叫什麼資源過來。

接下來老師直接用一個例子示範Live show。
例子：使用者新增一篇Orid文章就給他50點經驗值

首先我們先建立Model，先去Routers定義resource，再到終端間下指令新增:
rails g model experience user_id:intege orid_id:integer point:integer

別忘了繼續下rake db:migrate更新資料庫。

之後我們在主要的controller檔案裡面做一個controller：
if @orid.save
do something
end

現在如果新增一篇文章的話，其實資料庫裡已經有點數了，只是我們沒有把View更新出來所以看不到。
測試資料庫有沒有更新成功的方法可以在終端機下rails c，在這個環境把最後一筆資料叫出來看看。

剛剛發生的事情是我們新增文章後呼叫了Router(總機小姐)，他了對應的controller(資源)過來幫忙做事情，然後這件事情有更新了倉庫(資料庫)。

剛剛因為在主要controller直接寫邏輯大家會看不懂，所以我們通常會把剛剛做的controller放入另一隻檔案，然後再善用變數命名去讓主要controller更為清楚精簡語意化，像剛剛的controller命名就是可以是@orid.generate_point。

小補充：如果把@(at)拿掉的話只有在此定義的方法裡面使用。

最後要顯示點數給客戶端，所以要在網頁(view)上面開始新增點數的HTML程式碼。

首先可以在最下面可以先拿出資料：
def total_point
experiences.sum(:point)
end

然後在最上面開始寫下這些東西的關聯：
has_many….

最後在畫面上要呈現的地方寫上程式碼 <p> <%= current_user.total_point %> </p>，這個就完全是View的事情了！

小補充：可以在controller寫下程式碼byebug去找出bug，此時網頁的任何操作不會有反應，因為操作的過程和結果都會顯示在終端機開著rails的server的地方。

回顧流程：
Model:資料庫管理人
Controller:機械手臂
View:根據機械手臂顯現出畫面

Q&A
1.現在市場上以手機市場為主，之後會有APP課程嗎？
其實MVC架構是一樣的，所以rails學好觀念再去學APP是很有幫助的，領域完全不同所以比較有可能開相關課程而已。

2.Model有問題就執行刪除數據嗎？
先找出問題再去新增新的再刪除破損的比較乾淨。

3.ROR可以開發遊戲嗎？
效能不會這麼好，也不是這麼齊全。

4.byebug需要安裝嗎？
可以在gemfile安裝。

今天真的是太濃縮了XD，跟本來不及做筆記，大多事情是我自己敘述的，有錯誤再麻煩指點囉！

發表於 更新於 分類於 ，

Git是什麼？

Git是一種工具(可以譬喻為時光機)。

以履歷為例子，如果我們每次更新履歷，但是又要把每次的版本留下來，我們的作法就是複製一份履歷當作備份，再對新的履歷進行修改，這樣兩個版本的履歷就要有兩個檔案。

但我們的專案檔案大小很大，也非常快的一直在更新，我們不可能一直不斷的複製備份我們的專案，所以Git這個工具可以把專案維持在一份就好，因為要做新的變動可以一直切分支出去，做好再合併回來，不斷創造節點(就像遊戲的記錄點)，想要看哪個節點可以隨時跳回去看。

Github又是什麼？

Github是代碼托管的倉庫

現在其實有很多種的倉庫，但github是目前最熱門的，在這邊先簡單介紹Github最重要的Fork、Clone和PullRequest是什麼東西。

Fork和Clone的迷思

Fork(叉子)，就像是把東西(專案)叉進(複製)到自己的盤子(自己的Github)裡處理。
Clone是把Github上的專案複製下載到本地端，所有的更新紀錄也都會一並下載。

Github是一個可以開放code讓世界各地的人協作的地方，我們希望可以讓每個人不斷的把專案更新得更完整，畢竟每個人也許會有每個人的盲點或想不到的功能甚至Bug，所以Github是一個很強大的協作開發工具。

玩過Github的人都知道，其實別人的專案就算沒有Fork到自己的Giuhub裡也是可以Clone下來的，為什麼要多此一舉呢？

在哪裡Clone下來的專案，專案的地址就會指向那個專案位置，也就是說今天沒有先Fork到自己的倉庫(Github)就Clone，在我們push的時候會遵照著地址push到別人的倉庫，但是你沒有別人倉庫的鑰匙是不能push上去的！

如何查看自己地址？git remote -v

當然我們也可以再下指令去更改地址到我們自己的倉庫，但是直接按一下Fork再Clone下來就好何必要這麼麻煩多此一舉呢？

Pull Request請求

Pull Request是發送請求給原作者說可不可以合併我新增的東西。

剛剛說Github是很強的協作工具，那你Fork加Clone專案下來並且更新好之後想要原作者合併(merge)上你的更新就必須發Pull Request請求給原作者，原作者自己按接受後才算是完整的完成這次的合併(merge)囉！

Git flow(工作流程)

外面最正常的團隊開發流程：
1.master是穩定的prodution
2.develop是用來當作開發的分支
3.其他開發都是從develop切出去，最後再合併回來

單人的話：
1.master是穩定的prodution也可以用來當作開發的主要分支
2.其他開發都是從develop切出去，最後再合併回來

合併回master的隱藏好處是會不斷增加自己Github上的Commit數(小綠格)，那它代表著下面幾個重點：
1.Github是實力展現的地方
2.預設的branch(master)才會被計算
3.繽紛的色彩看起來很厲害

後面老師有介紹小工具source tree (圖形化的Git工具)，在網路上即可免費下載。

安裝後打開新增一個倉庫，把專案加進去，圖形化的介面可以把專案的更新紀錄和流程看得更清楚，裡面也可以有按鈕直接下一些指令(例如commit, push等等)。

最後Nic老師有示範一下的日常開發流程：

實作功能：Job-listing首頁加入使用者人數計算

先創造這次的分支要做什麼功能(這次功能為顯示使用者人數)：
git checkout -b users-count切換到這個分支去，如果沒有的話就開啟新分支。

更新完這次的功能後做最後檢查：
git status看更動了哪些檔案。
git diff看檔案裡實際更動了什麼東西。

檢查完後開始下記錄點並更新專案：
git add .追蹤所有檔案。
git commit -m "Add count"下紀錄點。
git checkout master切回主幹Branch。
git merge user-count合併剛剛的分支。
git push推上去Github更新專案。

這裡有一個主宗是希望主幹永遠保持最乾淨。

Q&A:

1.Boostrap的格線問題
不好回答，去看文件就有

2.初期抄別人代碼但不夠理解不能變自己的怎麼辦？
一開始不要理解到底，只要能掌握怎麼使用和效果就夠了。
像走路一樣不可能理解到左腳右腳重心放在哪才肯走路，一定是走路不斷跌倒才會學最快的。

3.Git checkout . 有新增檔案會不會也被回朔？
因為新增檔案沒被追蹤過所以不會被回朔，可以用git stash清掉。

4.我的branch切太多還要全部合併嗎？
主要開發一個就好了，其他砍掉吧！

5.table跟柵格系統不一樣在哪？自適應怎麼做？網上有很多做法但不到哪一個才是正確的？
用％數或Bootstrap上的套件就可以使用，table跟柵格系統其實蠻不一樣的可以多看文件，問題太籠統很難回答。

6.我已經切八個分支了怎麼辦？只要合併最新的嗎？
沒錯，專心開發最新最完整的一個分支就好，其他都刪了吧！

7.index和show有什麼不一樣？
index像是農場內的一群羊，show是抓一隻羊出來看。

小結論：

這個基本的工作流程和版本控管真的很重要，但是他雖然很簡單，會遇到的狀況卻是非常多，所以真的還是得上了戰場錯了幾次才會真正體會到Git和Github的精髓啊！

發表於 更新於 分類於

##將換行符號翻譯成分號

養成開頭大括號跟要做的事情擺在同一行的習慣

不管在哪種編譯器或者可以打字的地方，其實當我們換行的時候電腦是會key上一個我們看不見得符號(這邊用↓當代表)。

但要小心有時候JS會把換行符號↓自動轉變成;，所以我們自己先養成一個好習慣避免這種很難debug的錯誤。

直接看例子：

1
2
3
4
5
6
7
8
9
var a = true;
if (a) {
    console.log('Run without ↓');
}

if (a)
{
    console.log('Run with ↓');
}

你能猜到哪個會執行嗎？其實兩個都會XD，那換一個呢？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function noChange () {
    return {
        status: "I don't have ↓"
    }
}

function hasChange () {
    return
    {
        status: "I have ↓"
    }
}

console.log(noChange());
console.log(hasChange());

我們會發現第一個return正確的物件，第二個卻return undefined，這是因為retrun後面接上換行符號JS的引擎會自動補上;的關係，所以剛剛的hasChange其實會被翻譯成這樣：

1
2
3
4
5
6
function hasChange () {
    return;
    {
        status: "I have ↓"
    }
}

但在大多數的情況下是沒關係的，例如function、迴圈、甚至在物件或陣列裡面等等，但為了避免這種小又難以解決的錯誤，我們就養成開頭大括號跟要做的事情擺在同一行的習慣吧！

##忽略空白字元
JS會忽略空白字元，或使用tab產生出來的空白，但全形的空白不會忽略(不過這個只有在中文輸入法才比較會碰到)。

其實下面的程式碼是可以正常執行的：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var a,
    b,

    //this is a pen

    pen;

a = 1;
b = 2;
pen = // I give it a color
    'green';

console.log(a);
console.log(b);
console.log(pen);

其實這是會正常執行的哦！！所以看到別人的專案註解或換行一大堆不用慌，也是看準關鍵字然後保持這個原則就ok了！

發表於 更新於 分類於 ，

今天是一次兩個講師直撥，那背景音樂我聽出來是let it go很好聽。

xdite教你克服情緒

首先老師先介紹了一本書『腦能量整理術』是一位日本的腦神經權威著作，老師的網站上也有自己整理的筆記，這本書主要在講如何用科學方式控制情緒起伏，讓自己保持正面樂觀提高記憶力。

首先我們最常遇到『學習上』最崩潰的問題就是為什麼學習時間差不多的人做出來的東西會比我牛逼這麼多？

先來想想有沒有辦法讓自己沒有情緒，答案是不可能的，所以再來探討為什麼我們會有這個崩潰感？

大部分的原因是因為自己的大腦跑太快了開始爆衝了，腦袋想了一堆事情卻沒有辦法去實現，這時候焦慮感會直線的上升。

那以科學的角度來看是因為血液裡的血清素降低，血清素在晚上也會比較低所以人在晚上才會多愁善感，這時候要讓自己的大腦慢下來才能降低焦慮感拉回血清素，所以常常會聽人家說去走走路跑跑步去散散心，因為我們在做這種運動的時候大腦是需要專心的，專心才可以把四處暴衝的大腦給停下來。

那如何在寫代碼的時候讓自己的大腦慢下來？我們有時候不會隨時站起來運動，這時候還是要利用其他身體元件部分去執行，既然我們不能用腳站起來運動就用手去『寫』下來，記住一定要寫而不是用電腦打字，當專心做這件事情的時候大腦就會慢下來了。

老師給的建議

先拿出一張紙。

  • 『寫』下自己的最終目標
  • 把這個目標轉變成有實際數字的數據目標

首先第一個『寫』下自己的最終目標不難解釋，就是像上面講的讓自己大腦慢下來。

那把目標轉變成有實際數字的數據目標是什麼意思呢？

像這次的魔改大賽，寫下的目標可能是我要拿到前三名，但是這個目標很籠統又模糊，因為自己的大腦開始想我要css寫得很漂亮，我要js做哪幾個很不錯的功能，然後好了，看了一下別人的牛逼網站崩潰感直接衝進來，大腦又開始爆衝了。

所以停一下，想一下怎麼拿到前三名，最重要的是拿到『票數』，但票數跟程式碼是沒有直接關係的，那怎麼拿到更多票數呢？

思考一下VIP會員一張是10票，非VIP會員一張只等於1票，所以當然我們要主攻VIP會員，那也許我們不是真正做一個很屌的網站去吸引他們(別用自己的短處打別人長處)，而是上社群網站分享一些技術文或心得去跟他們做交換。

再不行取得VIP的票，我們也可以放在自己的公眾號去拉票，怎麼樣都是往自己最清楚的小任務去前進達，成任務，而不是望著自己模糊的大目標讓自己的大腦高速空轉。

再來以自己網站為出發點的話，不要一直想著要坐著比別人牛逼的功能，因為自己實力不到就是不可能做出來的，再者其實功能牛逼並不一定可以讓別人喜歡，最重要的是看重使用者的體驗和操作。

什麼意思呢？

體驗上或許你可以針對整個網站的style和配色做調整，讓別人一進入這個網站就感覺到很舒服，也都可以快速清楚知道怎麼要使用這個網站。

操作上自己做的功能可不可以真的解決掉使用者的問題，譬如說做了一個查詢系統，但是資料庫裡面只有十筆資料給使用者查詢，這時候這個功能做得再漂亮或在牛逼都只是沒什麼用的東西而已。

這就是把模糊的大目標(想進入前三名)，切成許多細小又清楚的小任務，我們一直不斷的做前進這個動作，不要一直讓自己的大腦處在高速空轉的暴衝狀態。

Nic 教你克服 DB

在rails101裡面我們很常下db migration這個指令，那到底這個指令是什麼東西呢？

其實就是在操作資料庫裡面的資料

第一如果我們不這樣去下達指令，而是直接去資料庫裡面篡改資料，一筆兩筆或許真的沒什麼，但如果今天有一千筆資料我們會改到崩潰，加上這樣的錯誤率會大幅提升，最後搞得非常麻煩。

第二我們這樣子下指令都會有紀錄，是誰新增了什麼，大幅提升專案的穩定性。

第三我們可以做到遠端許多裝置去協作一個專案，像是db:migrate就可以把自己本地端的專案同步為雲端最新的狀態。

常用指令：
1.rake
db:drop
db:create
db:migrate
db:reset
db:seed
db:migrate
db:rollback

rake是什麼？？
我們可以直接收尋 rails rake 是什麼，老師說Google的能力是很重要的。

Schema綱要

1.改了沒有用(改他也沒意義)
2.記錄DB的版本號(像是DB的Git)
3.目前欄位狀況(像是log一樣可以列出來)

老師推薦一個gem是annotate，他可以直接在model裡面註解schema的東西。

我們直接在專案底下下rake db:migrate:status可以看到目前數據庫的進度和狀態。
up是執行到這一步down是還沒執行或者是退後過

譬如老師先新增了一個資料庫(model) 名稱是post title:string，此時執行rake db:migrate:status會出現down是因為數據庫並還沒有新增(更新)，此時可以開atom去看自己的db文件看變化，我們下rake db:migrate後他會新增東西，然後再下rake db:migrate:status剛剛的down就變成up了，這時候如果又下rake db:rollback文件會有東西被刪除(最後一次新增的)，而下rake db:migrate:status又會看到剛剛的up變為down了。

migrate可以操作資料庫，而schema是可以把資料庫git化，查看版本大綱，那我們不用去動schema，因為他是自動在記錄的，所以rake db:migrate:status才看得到變化。

剛剛講的annotate套件是什麼？
在Github上直接查詢他就有許多資訊。

先安裝後bundle install，最好是下只幫model生成的指令(他的Github上面有)，這樣資料庫會直接生成註解，我們不用一直出來看schema的大綱。

觀念

讓數據庫保持在前進的狀態
除非不得已才退一步

退一步之後修改完馬上進一步，盡量不要退太多，如果是很久以前的錯誤不如前進一步去修改錯誤(修補的概念)，例如到第十步的時候第二步有錯可以去使用rename功能，那如何使用老師叫我們上網查就有很多了！

關鍵字示範：rails migration rename

Q&A:

1.如何實現管理員權限，分高低級？
google can can can有套件

2.聽不懂

3.如何複製別人網站的JS效果？
JS不太能直接抄，很難debug，還要考慮到他們用什麼套件，再來不要求好先了解簡單的就好，現階段多使用小套件就好。

4.有沒有推薦css或html的教程？不然很容易遇到挫折
收尋 w3c html就很多了。

5.heroku更新數據會有問題？
heroku不給執行drop，要去找一下在上面的執行方法。

6.如何不同的電腦做同一個專案？
下載dropbox或者是雲端的東西直接把整包專案的資料夾丟進去。

發表於 更新於 分類於

在JS的其中一個重要觀念是當創造一個變數var a;他會佔據一個記憶體位置，而當賦予給他值的時候a = 1;會把a的記憶體位置拷貝並且指向這個純質(1)。

這觀念或許很抽象，白話來講創造變數的時候他會是一個空白的記憶體，當你賦予它值var a = 1;的時候他會去拷貝1這個純質。

那什麼是by value和by reference呢？我們先來看最簡單的by value。

by value

只要給變數純質(primitive)，例如數值、字串、布林值等非物件的東西會產生by value這個動作。

我們直接看看例子：

1
2
3
4
5
var a = 1;
var b = a;
a = 2;
console.log(a);  //print 2
console.log(b);  //print 1

答案非常的直覺，但底下發生了什麼事情？

首先我們的程式碼會先產生Hoisting(創造與提升)這個動作，讓a和b各自有一個記憶體空間，賦予a等於純質1，記憶體拷貝並指向了這個純質。

再來b = a;的時候因為a的記憶體剛剛拷貝和指向了一個純質，所以b的記憶體也拷貝並指向了相同的純質，這時候！！雖然a和b的記憶體指向完全一模一樣的純質，但由於by value的行為其實a和b的記憶體位置是不一樣的！！！

白話譬喻的話就是a買了一棟信義區的房子，此時b說要買跟a一樣的房子，所以他們都有一模一樣在信義區的房子，但是地址是不一樣的，這就是by value的行為，非常好懂，再來我們看看by reference。

by reference

只要給物件(function算是物件)的東西會產生by reference這個動作。

再來直接參考下面的例子：

1
2
3
4
5
var a = { greeting: 'Hi'};
var b = a;
a.greeting = 'Bye';
console.log(a);  //print Object { greeting: "Bye" }
console.log(b);  //print Object { greeting: "Bye" }

直接看結果我們發現b竟然跟a直接同化了！！發生了什麼事情？

比照剛剛by value的行為即使讓b直接等於a取得一模一樣的純質，但是b的記憶體位置是一個新的位置！

相反的by reference的行為並不會給b一個新的記憶體位置，所以直接變動a或者是b物件裡面的東西它們都會一起受影響，因為他們就是住在同一個屋簷底下。

想同的規則即使是在function裡面的參數(parameter)也是一樣

直接看例子：

1
2
3
4
5
6
7
8
9
10
11
var a = { greeting: 'Hi'};
var b = a;
a.greeting = 'Bye';
console.log(a);  //print Object { greeting: "Bye" }
console.log(b);  //print Object { greeting: "Bye" }
function changeName (obj) {
  obj.greeting = 'morning';
}
changeName(b);
console.log(a);  //print Object { greeting: "morning" }
console.log(b);  //print Object { greeting: "morning" }

傳入changeName的參數會改動參數裡greeting的值變為morning，由於by reference的行為a也被我同步了！

如果是用物件實體(object literal)的方式指定物件的值，那麼會是by value

直接看例子：

1
2
3
4
5
var a = { greeting: 'Hi'};
var b = a;
b = { greeting:'Bye' };
console.log(a);  //print Object { greeting: "Hi" }
console.log(b);  //print Object { greeting: "Bye" }

結果不會同步！！

因為b = { greeting:'Bye' };這行等同於b自己創造了一了新的物件，所以b和a已經不是共用同一個記憶體位置了，簡單的說b已經不和a住在同一個屋簷下，b自己買了新房子了！

如果是用b.greeting = 'Bye';這種方法是更改物件裡面的內容，也就是還在同一個屋簷下但是做了裝潢，當然兩個同居的人就會享有一樣的效果，這就是by value和by reference的行為。

了解了這個在規劃的時候要盡量避免踩上這些地雷，所以在操縱變數的時候要注意一下這些觀念，不然這算是非常難degug的東西，尤其在angular的$scope運用會死得很慘XD。

發表於 更新於 分類於 ，

什麼是Boostrap?

快速開發，不用寫太多css和html
目前最火熱的套件之一
更詳細的介紹可以直接在網上收尋bootstrap component即可，有中文版，但是不能複製代碼所以不好使用。
版本建議使用bootstrap3，4還不穩定而2又太舊。

如何測試

Nic老師今天使用panels做介紹，建議直接先複製官方網站的代碼到自己的程式碼上面看看效果是不是跟官方網站和自己想要的效果一樣，再把自己的程式碼帶進去。

而在一開始複製官方網站測試結果的時候希望不要被自己之前的code干擾，可以先把所有code進行註解，方法：
command + a先全選自己的程式碼 >>>> command + /可以進行全部註解 >>>> 找個地方把剛剛複製的程式碼貼上 >>>> command + s存擋 >>>> 到遊覽器commad + r刷新頁面看結果。

開發貼心小技巧：

  • command + x為剪下，這樣就不用複製代碼貼上後再回去刪除舊的代碼。
  • 在atom裡面只要打上div後按下tab會直接幫你做好一個div的tag。

示範的經過：

套上去之後上下左右沒有白邊，所以要自己改一下nav bar的css，讓他留下白邊，可是可能會造成另一個頁面有多餘的空白，可以使用margin-top: -20px;試試看效果如何，在調整上下的話負數的px是把區塊往上調，正數的px則為往下。

按鈕也有的元件可以套，收尋buttom或者是簡寫的btn都找得到，示範如下：
<% f.submit "Submit", class: 'btn btn-danger' %>

想要讓左右邊空白大一點或者是要呈現的區塊窄一點可以套上Bootstrap的格線系統col-lg-8並且自己做一個讓他置中的屬性，Nic老師做了一個centered的class並且給他margin: 0 auto;，要記得使用Bootstrap的格線系統一定要拿一個container去包住他：

index.html
1
2
3
4
5
6
7
<div class="container">
	<div class="row">
		<div class="col-lg-8 centered">
			something...
		</div>
	</div>
</div>
style.css
1
2
3
.centered {
    margin: 0 auto;
}

開發貼心小技巧：

  • 做好一個區塊就刪除舊的，隨時看結果和更新程式碼，一步一步來才不會亂。

格線系統：

可以快速的做出自適應網頁

一開始Nic老師建議我們把這四大常用尺寸記下來：

  • XS超小螢幕-最常使用在手機
  • SM小螢幕-最常使用在平板
  • MD正常螢幕-最常使用在筆電
  • LG最大螢幕-最常使用在桌機那種正常螢幕

直接試試看如何使用：

index.html
1
2
3
4
5
6
7
<div class="container">
	<div class="row">
		<div class="col-xs-12 col-md-3 col-lg-8 borderBox">
			something...
		</div>
	</div>
</div>

style.css
1
2
3
4
.borderBox {
    border: 1px solid;
    height: 50px;
}

直接對著遊覽器拉縮左右的寬度應該就會呈現效果。

格線系統一行分為12格，所以一行可以有2個6並排，或者3個4並排，或者2個3再加上1個6並排，以此類推最多一行有12格，高過則會被往下擠做換行動作，當然也可以像一開始的範例讓他一行只要用到8格再搭配置中。

開發貼心小技巧：

  • 打開chrom的開發者工具，拉縮遊覽器時右上角會顯示現在寬高有多少px。
  • 開發者工具可以直接對CSS做測試不會影響到原來的程式碼，調整好之後直接把東西複製到自己的code裡面，就不用一直做存擋刷新的動作了。

課程最後補充：
chrome的擴充套件Full Page Screenshot可以截網站全畫面，直接在收尋欄上照著打Full Page Screenshot就找得到。

Q&A:

這邊老師講很快我只憑印象和我的理解記錄下來，只能當作參考唷！

1.雖然不用背Boostrap和一些html的code，但有沒有更快速上手開發的方法？
多練習。

2.為什麼Boostrap有很多在CSS沒看過的代碼？
那是Boostrap框架自己的代碼。

3.不知道怎麼對應html和css，寫到後面很容易亂掉，有什麼辦法可以解決？
CSS的命名很重要。

4.很難實現自己網頁想要的style，不然就要花很多時間，尤其是收尋功能，怎麼辦？
收尋功能多上討論區看別人怎麼做，很多學長姐都有分享，在一開始想要做出自己想要的畫面花很多時間是很正常的事情。

5.寫code寫到很煩怎麼辦？
真的很煩就出去走走，讓自己散心一下吧。

6.git branch搞砸了怎麼辦？
分支要針對性大一點的開，不然一亂掉很麻煩，還有要開新的分支一定要回master開，不然從分支直接新開分之會是從那個分支再開分支出去，這樣很難管理。

7.排版是怎麼做的？
不明確的問題，建議熟悉Boostrap元件，多使用，甚至手畫出想做的網站再慢慢做出來。

8.放大縮小網頁怎麼做？
command + + = 放大
command + - = 縮小

9.分隔系統圖片會爆炸怎麼辦？
給圖片下一個class給他Boostrap的img-responsive屬性可以讓他有自適應。

10.想要Boostrap的動態功能有沒有辦法簡單做出來？
比較沒有，也比較不可能只針對一個功能做一個框架，比較小和特別的東西一定要自己做出來。

11.開發者模式怎麼讓他自己一個視窗？
在開發者模式的視窗有選項，可以點分離的圖示就會變成獨立視窗。

12.怎麼用兩台電腦同時開發一個專案？
可以使用google雲端dropbox之類的工具。

13.jumptron和box有什麼差別？
jumptron是Boostrap的套件，而box是老師自己寫的CSS

感謝Nic老師讓我們快速認識了Boostrap這個框架，果然線上閱讀文件的能力很重要嗄XD，今天老師也是帥帥der!

發表於 更新於 分類於

JSON是什麼？

今天剛好看到之前買的線上教學影片克服JS奇怪的部分介紹到JSON，所以說要真正認識JSON就一定要認識Javascript了！
尤其JSON又是真的受Javascript而啟發，他的全名也就是(JavaScript Object Notation)。

因JS的物件實體用法而生

物件實體(Object literal)是什麼呢？
稍微認識JS的人都知道要創造一個物件最基本的程式碼是：

1
2
3
var person = new Object();
person.name = "Kurt";
person.age = 18;

JS的引擎有物件實體的功能可以用下面這種方法直接做到跟上面一模一樣的事情：

1
2
3
4
var person = {
    name: "Kurt",
    age: 18
}

那這跟JSON有什麼關係呢？

以前傳送物件很浪費效率

以XML為例子，如果我們做資料傳輸直接傳送person這個物件電腦會幫我們傳類似下面這種東西：

1
2
3
4
<object>
    <name>Kurt</name>
    <age>18</age>
</object>

但如果轉為JSON格式，電腦就只會傳送原本我們所打的JSON格式：

1
2
3
4
'{
    "name": "Kurt",
    "age": 18
}'

傳送過去再使用JS原生的function做簡單的處理(JSON.stringify)就變回於本的物件了。
比對一下傳送的字元幾乎少了一半以上！！所以JSON格式才會這個的熱門運用！

用這個例子第一次這麼的清楚知道JSON的由來，真有趣ＸＤ！