利用PhantomJS為SPA做SEO
隨著前端技術的不斷更新，使用前端框架(React、Vue等)來建構網站是普遍現象。但目前搜尋引擎無法有效讀取使用JavaScript render出來的頁面，且使用AJAX Crawling的解法只適用於Google又此法已被廢棄，因此另一解法就是使用PhantomJS。
Node.js 中使用 Promise Q
假設我們今天要執行一項工作task 3，但執行task 3之前要先依序完成工作task 2與task 1。 如果沒有使用promise，而用callback的方式完成，程式碼大概會是這樣...
加速行動版網頁(AMP, Accelerated Mobile Pages)
加速行動版網頁(AMP, Accelerated Mobile Pages)是Google推出的一套框架，用來使行動裝置網頁能快速載入。 在Search Console上會看到提示建議Webmaster使用與提交這樣的頁面。
Gulp筆記：安裝、撰寫Task、監看、例外錯誤處理和套件使用
Gulp是一套任務管理工具，讓前端的工作能自動化處理，例如：js/css最小化、瀏覽器檢視、通知、檔名變更、加入版號等等。這裡做一些簡單筆記。
T3 - 構建大型網站的JavaScript框架
T3是一個JavaScript UI Framework，主要的功能是讓程式碼更結構化。如果網站內的程式碼很雜亂的話，很適合用來整理散落在各處的程式碼(尤其是針對年紀大需要翻新的大型網站)。而整理方式就是將程式碼分成幾個部份：Application、Module、Serveice、Behavior等來處理。頁面UI整理成Module，Module彼此共用的方法或事件整理成Behavior，而非UI邏輯且多個Module會共用的部份(例如：與Server端溝通取資料)則抽出來成為Service。
DNS Prefetching - 預先做DNS解析，幫助網頁載入速度更快
在研究淘寶SEO策略時有略略看到頁面上出現這樣的設定，但對於網站效能提升這一塊比較陌生的我，並沒有做太多的研究(只知道是做什麼用的)，剛好藉這次機會來看看相關資料並做整理。
結構化資料之「商品」範例 - 使用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程式碼能更物件導向、更模組化。這一系列的文章有以下的內容...
JavaScript Object Oriented Programming - Early and Late Binding
JavaScript在呼叫的時候設定this的值，而這個this的值有可能不是我們預期的結果。
JavaScript Object Oriented Programming - Factory Constructor Pattern
「Factory Constructor Pattern」不使用new來宣告新物件，新物件用function call來建立。
JavaScript Object Oriented Programming - All-in-one Constructor Pattern
所有的method和property都放在consctructor中，而不使用prototype。
JavaScript Object Oriented Programming - Pseudo-Classical Pattern
在pseudo-classical pattern中，物件是由「建構子」(constructor)這個函式所建立，並把method放到建構子的prototype中。
JavaScript Object Oriented Programming - The instanceof operator
instanceof 允許檢查物件是否為給定的constructor所產生的。
JavaScript Object Oriented Programming - The constructor property
物件有內建的屬性「constructor」，意即「參考建立此物件的function」。
JavaScript Object Oriented Programming - Extending Natives
Native JavaScript物件將method存在prototype中。例如：當一個新的物件被建立，內容為空，但為何可以使用toString這個method？
JavaScript Object Oriented Programming - Prototypal Inheritance
對大多數的語言來說，它們擁有「Class」和「Object」，而Class繼承其它的Class。對於JavaScript來說，繼承是使用prototype來實作的，意即沒有Class，而是由物件繼承其它的物件來達成繼承。
語意網 - 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的建置和使用，終於要把假資料換掉，使用真實世界的內容展現在畫面上啦。
活動咖手機版網站上線了 - 活動平台行動裝置網站或App設計的現狀探討與改進
這陣子剛好在幫我們家的活動平台網站 活動咖 EventPal 設計+製作行動裝置版網頁，因此參考了不少前輩的作品 - Accupass、KKTIX、Pinkoi、friDay等。在這裡記錄一些我對這些網站的想法，還有我們家產品所遇到的問題和設計的功能、解法。
Node - 表單處理與檔案上傳 (Form Handling and File Uploads)
Node - 表單處理與檔案上傳 (Form Handling and File Uploads)。
結構化資料之「活動」範例 (Part 2) - 使用Microdata與JSON-LD
在上一個範例 結構化資料之「活動」範例 (Part 1) 中使用的規範是 Data-Vocabulary.org，這次改用Microdata與JSON-LD，並記錄更多實作上的疑難雜症。
結構化資料之「活動」範例 (Part 1)
「Promote Your Content with Structured Data Markup」，搜尋引擎愈來愈人性化，提供愈來愈多實用的資料給使用者做決策。因此，前端工程師的切版不再只是依照設計稿呈現美麗的畫面和特效而已，還要能利用結構化資料，讓網站內容在SERPs上顯示更多資訊。
JavaScript - Module Pattern
Module Pattern 利用函數的「閉包(closure)」特性來避免汙染全域的問題 - 使用閉包(closure)來提供封裝的功能，將方法和變數限制在一個範圍內存取與使用。這樣的好處除了避免汙染全域外，也將實作隱藏起來，只提供公開的介面(public API)供其他地方使用，簡單易懂。
Modern Web 2015：電子商務與活動平台的SEO到底要做哪些事？
SEO到底要做什麼？搜尋引擎對於一般人來說像是個黑盒子，網路上的文件所述影響搜尋引擎的因子又非常多，到底要從哪裡開始優化？
JavaScript - Call and Apply
call與apply兩者皆是執行某個function，並將這個function的context(即物件)替換成第一個代入的參數。其差異在於call必須將參數一一代入，而apply除了第一個參數代入context外，其餘的參數只要包在一個陣列裡面即可。註：第二個參數不是必須的(optional)。
JavaScript - Closure與Hoisting
分散var來宣告變數並沒有太大的意義，因為就JavaScript程式語言的特性來說，函數(Function)中未宣告而先用到的變數會被提升至區塊的第一行做宣告。先來看基本觀念Closure，再來看Hoisting。
Responsive Patterns - Layout
Responsive Patterns 是一個蒐集響應式設計與實作的元件庫，舉凡Layout、Navigation、Forms、Carousel、Tabs、Accordion和Lightbox等皆有，很適合當成學習教材。先來玩玩Layout吧。我們分成幾大類：Reflowing、Equal Width、Off Canvas、Source-Order Shift、Lists、Grid Block。
利用Bootstrap Grid System排版的學習筆記
利用Bootstrap Grid System來排版真是一個方便的方法，最簡單的例子就是如果一個頁面上有許多小方格會隨著Device/解析度而有不同的排列方式，就很適合用Grid System來排版。
赤柱 (Stanley) - 悠閒愜意的異國風情小鎮
如果準備搭飛機離港前剛好有一小段時間不知道要幹嘛的話，可以考慮到 赤柱(Stanley) 逛逛。赤柱像是沒有商業化又比較乾淨的淡水，跟西貢比起來更有異國風情味。
YHA美荷樓青年旅舍 (YHA Mei Ho House Youth Hostel)
藉UXHK 2015之便，我們在香港多待了幾天。而來去香港好幾次，每次我爸都習慣訂YMCA，但無奈改建成高級酒店，像我們這樣的小資女孩是無法負擔的。同行夥伴小奎找到一間「YHA美荷樓青年旅舍 (YHA Mei Ho House Youth Hostel)」，看起來交通方便(近港鐵深水埗站)、環境漂亮又安全、價格便宜，就訂了下來。
使用Bootstrap建立一個RWD Template (Twitter Bootstrap in Responsive Web Design)
使用Bootstrap建立一個RWD Template的筆記。
Facebook Login Review筆記 Day 2 - Policies and Best Practices
Facebook Login Review筆記 Day 2 - Policies and Best Practices
Facebook Login Review筆記 Day 1 - Overview
由於今年的4月30日Facebook Graph API 1.0即將退休，取而代之的是2.0+，因此從年初開始，一直收到Facebook的Alert。為了避免App被break，我開始對使用1.0的App做修改來提交Review。以下是一些筆記。
吃什麼，どっち - 讓朋友幫你決定吃什麼 (ALPHA Hackathon 2015)
使用者藉由輸入簡單的字詞，例如：「台北市中山區 火鍋」，按下「尋找餐廳」後就能從列表中找到符合項目的推薦餐廳，或按下「看看朋友吃什麼」，經由Facebook授權登入後，看看朋友去過哪些地方、評價。而我們也會爬回Facebook上的資訊做處理並排序，推薦適合的餐廳給使用者。
電子商務網站SEO實例探討
大部份會做SEO的網站不外乎是電子商務、活動網站、內容/服務平台(例如：新聞、旅遊)。而極端如Campaign Site這樣類型的網站由於存活時間短，便不需要做SEO，只要放置簡單的Meta Tag或Social Meta Tag即可。
App Store Optimization (ASO) Guideline
App Store Optimization (ASO) is the process of improving a mobile app’s visibility within mobile app stores (such as the iOS App Store and Google Play Store) by optimizing the content of the app’s store page for popular, targeted keyword phrases.
談如何利用標籤(Tag)加強網站的近似辭彙(Relevant Terms)
2014年的Ranking Factor中，Relevant Terms是一個重要因子，它代表了這個網站對於特定主題的近似字詞。而一個頁面是否能針對特定主題被搜尋到，除了佈署特定關鍵字外，搜尋引擎也會觀察這個頁面是否有其他語意接近的關鍵字。
D3.js - Bar Chart
D3是Data-Driven Documents，是將資料視覺化呈現的library，甚至可與使用者互動。舉凡Bar Chart、Pie Chart、Bubble Chart、Tag Cloud或更複雜有趣的圖表，都可以以之呈現。
使用Graph API上傳圖片到Facebook相簿、並設定為使用者大頭照
有不少活動都會引導使用者上傳圖片並設定為封面或是檔案頭像，例如 遮打革命 Umbrella Revolution - Support Campaign | Twibbon。
RWD(Responsive Web Design) 實作筆記
RWD(Responsive Web Design)是一種設計概念，希望能讓網頁適用在不同的平台上。 而距離上一次專做RWD大約是一年前，公司最近想對產品大改版，於是又來練練RWD摟！
CKEditor Addons - 簡易上傳圖片、檔案(SimpleUploads)、Youtube影片搜尋(CKEditor Youtube + search feature)
CKEditor是一款「所見即所得」(WYSIWYG) 的 HTML網頁編輯器，免費、功能強大、周邊資源多。下載後經過簡單安裝便能作為前台或後台編輯工具。
2014 SEO Ranking Factors - 點閱率CTR成為最重要的因子、利用標籤競爭SERPs排名
2013年的SEO Rankgin Factors著重於頁面優化、如何呈現好的內容與社群平台的散播。與2013相較，2014年最大的不同在於CTR變成SERPs排行中最重要的因子，並強調了使用者的動向(User Signals)，除了CTR還有使用者停留時間(Time on Site)、跳出率(Bounse Rate)、更全面性的評估，例如相關詞彙(Relevant Terms)、網站速度(Site Speed)。
Facebook Product Introduction 產品總整理與功能說明
Facebook產品總整理與功能說明(Social Plugins、Sharing、其他UI功能應用、Graph API功能應用、og相關、權限相關、成效衡量)。
Facebook Graph API - Taggable Friends
有鑑於IKEA做了一個好玩的活動網站來IKEA睡一晚，其中含有邀請朋友並標記、分享到Facebook上，因此也做了一個範例來玩玩。
Ember.js & SEO - 測試搜尋引擎對JavaScript的剖析能力
Google Webmaster Central Blog在今年五月宣布 ，Google 搜尋能夠執行網頁上的 Javascript (見Understanding web pages better)。而過去已知Crawler只會剖析網頁上的HTML Code，而不會(或少量)執行JavaScript。。又由於開發品質與速度的要求，使得Single Page Application (SPA) frameworks盛行(例如：Angular.js、Ember.js等)，於是了解搜尋引擎是否能夠執行並解讀JavaScript與解讀的程度便成為網站開發的其中一項需求。
Facebook Graph API & Demo Example
Graph API是Facebook所推出的一種技術標準，它的核心概念是「物件與連結」。 為什麼稱為「Graph API」呢？ 因為整個Facebook就是透過這些物件與連結建立而成的Social Graph。 Facebook所提供存取的介面，就稱為「Graph API」。
搜尋引擎優化指南(SEO Guideline) - 如何有系統的優化網站、評估與持續改進？
搜尋引擎優化指南(SEO Guideline)是一套有系統的優化網站的執行準則，每個崗位執行特定的工作項目即可讓網站(或專案)有一定品質以上的效果，並且這樣的優化效果是可以被評估、回饋與持續改進的。而系統化的實行也有助於在有限資源下做最大的利用，以得到最好的效果(例如：點閱率、排名)。
粉多任務 x 一品禪 - 使用Microdata標記的網頁實例
什麼是Microdata？標記符號的用途在於讓搜尋引擎有效讀懂網頁的內容，進而達到搜尋時呈現我們所提供的資料的方法。 畢竟直接告訴搜尋引擎重點在哪裡－－告訴它這是一篇文章的標題、內文、圖片和圖片說明，或告訴它這是商品區塊、這些文字是商品名稱或廠商名稱、告訴它這些數字是價錢(而非無意義的數字)，是比較有效率和精準的。而文中也說明標記如何使用和測試。
Author Rank
Author Rank是評估作者影響力的指標，過去尚未被證實是否會影響搜尋結果的排名，但Matt Cutts的一則Tweet似乎證實在某些地方確實會用到，例如專門領域文章的分析。
從搜尋到社群 - Semantics、Rich Snippets、Social Meta Tags
搜尋引擎提供使用者想要的資訊，而社群平台提供這些資訊更多露出的機會。我們希望將優質的內容提供給使用者，並利用社群的力量推廣出去。
SEO：重複內容(Duplicate Content)
網站中或網站間存在許多重複內容，而搜尋引擎為了提供使用者最佳的搜尋結果，便會對這些內容作區別，將最原始的資料或最佳的內容排在搜尋結果的最前面。 在某些情況下，重複內容是無法避免的，而這些重複內容損害了網站或網頁的排名。 因此，我們可以對這些重複內容做處理，修正搜尋引擎對它們的解讀。 這裡的搜尋引擎是以Google為主。
IA for SEO：使用IA增進從搜尋引擎來的流量
在達到高的「有機搜尋引擎最佳化排行」(Organic Search Engine Optimization Ranking)中，IA(Information Architecture，資訊架構)是很重要的部份。
