Summer。桑莫。夏天

Hubot x Slack，製作自動回話與工作的機器人 Hubot x Slack 串接紀錄。 安裝 Hubot 按照 官方文件 的指示一步步安裝。安裝完後，便可用command line與robot互動。使用 bin/hubot 啟動robot。可以使用 hubot help 看看預設有什麼功能可以使用。 安裝 Hubot 的 Slack Adapter 按照 hubot-slack 安裝 Hubot 的 Slack Adapter。安裝完後，要到Slack的Hubot App設定。這邊因為找了滿久的，所以截圖詳細記錄一下。 Slack的Hubot App設定 先從「Apps & integrations」到「App Directory」，然後搜尋「hubot」。 Apps & integrations App Directory，搜尋「hubot」 新增app 這邊因為我已經新增好了，所以只能截圖設定完畢的樣子。 取得token 啟動robot時必須附上token。

DNS Prefetching - 預先做DNS解析，幫助網頁載入速度更快 前陣子看見 Addy Osmani 大大在Facebook上發表了一張圖片( 原文 )。

結構化資料之「商品」範例 - 使用JSON-LD 假設想在搜尋結果頁(SERPs)上對 單一商品 呈現更為吸引人的Rich Snippet效果，例如出現星等、評論數(如下圖)，就需要利用結構化資料(Structured Data)來達成。

jQuery的陣列操作：$.map()與$.grep() 這陣子在整理系統內的程式碼，發現自己曾經使用一些過時的方法(例如：native javascript操作陣列)，而非使用jQuery提供的API來撰寫。以下整理並比較這兩種方法的差異。

三天內學會CSS3 Animation 一直以來我對CSS3 Animation這件事情並沒有特別專注研究(如果需要也是用javascript完成XD)，直到最近因為工作需要才開始練習。以下紀錄一些我在這三天內看的資料和做的小練習(不是教學文)。 如果你和我一樣，平常很少使用特效，需要在短時間內熟悉而有即戰力，這篇文章也許可以給你一些方向。

JavaScript Object Oriented Programming 關於JavaScript Object Oriented Programming，會寫這一系列的文章是因為希望自己的JavaScript程式碼能更物件導向、更模組化。這一系列的文章有以下的內容...

JavaScript Object Oriented Programming - Early and Late Binding JavaScript在呼叫的時候設定this的值，而這個this的值有可能不是我們預期的結果。下面有幾個範例。 this的值並非預期的狀況 以下都會由Menu這個建構子作為範例。 function Menu(elem){ //... }; var menu = new Menu(document.createElement('div'));

JavaScript Object Oriented Programming - Exceptions 「例外(Exceptions)」是一個特別且重要的處理錯誤的方法。

JavaScript Object Oriented Programming - Factory Constructor Pattern 「Factory Constructor Pattern」不使用new來宣告新物件，新物件用function call來建立，如下： var animal = Animal('fox'); var rabbit = Rabbit('rab');

JavaScript Object Oriented Programming - All-in-one Constructor Pattern 所有的method和property都放在consctructor中，而不使用prototype。 Declaration function Animal(name){ this.name = name; this.run = function(){ console.log('running '+ this.name); } }; var animal = new Animal('Foxie'); animal.run();

JavaScript Object Oriented Programming - Pseudo-Classical Pattern Pseudo-class declaration 在pseudo-classical pattern中，物件是由「建構子」(constructor)這個函式所建立，並把method放到建構子的prototype中。

JavaScript Object Oriented Programming - The "instanceof" operator The instanceof operator instanceof 允許檢查物件是否為給定的constructor所產生的。 function Rabbit(){}; var rabbit = new Rabbit(); console.log(rabbit instanceof Rabbit); //ture rabbit的constructor的確是Rabbit。

constructor 物件有內建的屬性「constructor」，意即「參考建立此物件的function」。 範例 我們來建立一個簡單的constructor，然後看看新的物件是否有正確的constructor的值。 function Rabbit(){}; var rabbit = new Rabbit(); console.log(rabbit.constructor == Rabbit); //true

Object Oriented Programming - Extending Natives Native JavaScript物件將method存在prototype中。例如：當一個新的物件被建立，內容為空，但為何可以使用toString這個method？(參考下面的程式碼) var obj = { }; console.log( obj.toString() ); 這是因為 var obj = {}; ( 即 var obj = new Object(); )。而Object是Native JavaScript的建構式，obj由Object所產生，因此 obj.__proto__ == Object.prototype; 。所以，所有在Object.prototype中的屬性，obj皆可使用(包含 Object.prototype.toString )。這就是為什麼obj可以使用 toString 這個method了。對於Array、Function和其他物件也是相同的道理，而它們的method即在Array.prototype、Function.prototype等。

prototypal-inheritance 對大多數的語言來說，它們擁有「Class」和「Object」，而Class繼承其它的Class。對於JavaScript來說，繼承是使用prototype來實作的，意即沒有Class，而是由物件繼承其它的物件來達成繼承。

Plugin的撰寫 又重新看了 jQuery: Novice to Ninja ，所以做了些關於Plugin的筆記。以下使用 jQuery Newsticker Plugin 作為說明範例。

常見的Google搜尋演算法 (Search Algorithms) 這幾天在準備SEO Basics的slides，所以也順手整理了一下Google常見的搜尋演算法。 常見的Google搜尋演算法 蜂鳥 Hummingbird：用於語意搜尋。 PageRank：一個頁面若有愈多高品質的連結連到，這個頁面的排名就愈高。類似投票的概念，但不是票票等值。 熊貓 Panda：對抗Spam，主要負責 網站 內容品質 - 內容重複、低流量、高跳離率、與內容無關的廣告過多的網站 企鵝 Penguim：對抗Spam，負責掌管 網站 內與網站外的連結品質，主要是外部連結。 PayDay Loan：對抗Spam Sites/Queries。 鴿子 Pigeon：改善本地搜尋(Local Search)，依地理位給予最適合的排名。 Top Heavy：降等過多廣告的頁面。 搜尋引擎友善 Mobile Friendly：提升對行動裝置友善的頁面。 Pirate：移除侵害版權的頁面或網站。 RankBrain：用於語意搜尋。

語意網 - HTML5文件的段落和綱要 (Semantic Web - Sections and Outlines of an HTML5 Document) 最近有個朋友做了網站優化，才調整HTML5 Outline就讓該網站被Index的頁面快速增加。一個好懂的網頁能讓搜尋引擎有效爬完讀懂，而且優化成本相對不大。如果要開始做SEO，從頁面HTML結構開始做起，是較簡單、CP值又高的好選擇。

Angular.js Form Example 表單練習 這個表單會展示常用表單元件、基本Directive和Controller的功能運作。由於網路上有很多大大的教學文章，因此在這裡只記錄一些我在學習/實作上遇到的重要觀念。

Node - 從MongoDB取得資料到套版 經歷了前面關於Node基本安裝設定、模板引擎的熟悉，與一些基本的語法和操作，接著來到MongoDB的建置和使用，終於要把假資料換掉，使用真實世界的內容展現在畫面上啦。