Promise 已經被ES6及新的瀏覽器支援，是一個強大的異步執行流程語法結構 Promise 可以讓我們確保某件事情做完之後，才進行後續動作 本質上都是使用callback(回呼函式)，並且都是async(異步執行) 當我們實際執行一個 promise，他會先將狀態切換為 pending(等待中)，並且依照 resolve 或reject 來返回結果 then..catch 連鎖處理 我們可以透過 Promise 來進行 then..catch 連續的連鎖流程處理 Promise.all 方法 promise.all 可以用陣列的方式一次帶入多個promise， 執行到最後會再回傳一個 Promise 物件 有幾點特色: 一項被reject或發生錯誤，就會返回 reject 全部執行都完成 resolve ，才會返回成功resolve 返回的resolve promise順序會跟傳入陣列中的順序一致 promise.

ES6 Arrows Function 和 Normal Function 差別 Arrow Function 主要有以下優勢: 語法簡單。少打很多字元。 可以讓程式碼的可閱讀性提高。 會參照當時環境中的 this ( bind(this) ) 好處 在使用內部函式時，內部函式有自己的this，通常會指向最外部 windows 物件， 因此，通常要先用變數指定this，傳到內部函式使用， 而 Arrow function 則不必再透過變數就能直接使用外部函式的this作為自己的this 注意情況 在物件裡的屬性，必須使用function，而不能使用 Arrows function

當我們宣告且呼叫一個函式時，函式本身會形成一個 scope，scope 裡面會包含 Closure

特性

Closure 原則就是，是一個可以用 by Reference 的方式紀錄函式建立時的環境，包括了:

Closure 內部所建立的變數，限定於內部使用，

在Closure 裡也可以存取到 Scope chain 中的所有變數，

Javascript 最難理解的源頭，始於 function

First Class Functions

https://pjchender.blogspot.tw/2016/03/javascriptfunctionobjects.html First Class Functions（一級函式）的概念，是指其他類型（Objects, String, Boolean, Numbers）做的事， Function都能做，包括將Function指定成一個變數等等 (assign them to variables, pass them around, create them on the fly)。

• 函式只是物件的一種
• 可以將 function 儲存成變數
• 可以將 function 當成參數代入另一個 function 中
• 可以在一個 function 中回傳另一個 function
• function 跟物件一樣有屬性（property）

function只是一種特殊的物件，它可以被當作物件來使用

所有函式都是物件中的"方法"

function 本身有幾個scope(作用域):

1. 函式本身
2. 外部函式內容(如果是函式中的函式，可存取外部函式內容)
3. 全域

React 是一個 View 框架，主要的用途有幾個:

• 將UI物件化
• 運用 props 來傳輸數據
• 依照 state 變化來調整 view
• 使用虛擬 DOM 提升效能

在開始之前，請預先安裝 webpack + babel + react依賴環境

接下來，會一步步來說明:

Webpack 是一個 module 整合工具，用來將javascript 打包成一支讓瀏覽器能夠運行的 bundle.js。

看似簡單，但其實功能非常強大

webpack 的功能:

• 和 Browserify一樣，可以整合 ES Modules, CommonJS 及 AMD modules，減少依賴進而加速了運行的時間
• 可以將js打包成單一個 bundle.js 或者多個可以非同步載入的模塊(需搭配plugin，可減少初期載入時間)
• 可結合babel等編譯器，進行文件預編譯功能。例如，將 JSX、ES6、Typescript…轉javascript，Handlebar 字串({{expression}}) 編譯，images 轉 Base64等

此外，還有一些 plugin 可以使用

例如 common-chunks-webpack-plugin - 可以將一些要再多地方共享的模組拆分成獨立的 bundle extract-text-webpack-plugin - 可以將 bundle 中的 CSS 另外存成一支 app.bundle.css html-webpack-plugin - 可用來動態產生HTML內容，並且會自動將打包過的js整合再一起 i18n-webpack-plugin - 可製作多國語系 compression-webpack-plugin - 壓縮內容

本文是依據 Babel 官網及網路參考資料逐步學習記錄的內容

Babel 這個壞男孩(發音似 Bad boy) 喜歡追求新潮的東西，同時內心是個文青，熱愛老東西。所以，當他接觸到新的內容，就會想盡辦法與舊事物融合~ 只能說個性實在完美

每當有新的javascript語法(例如ES2015-ECMAScript 6)出現，都只能靜待瀏覽器支援才能決定是否採取行動。 為了解決這樣的痛點，Babel就出現了。

本文是依據 Browserify 官網及網路參考資料逐步學習記錄的內容

Browserify 讓我們可以在瀏覽器中使用Node.js 風格的模組，不管是 AMD / CMD / ES6 …..風格的模塊化，它都能認識，並且編譯成瀏覽器認識的JS。

Browserify 運作的方式，會先在代碼中以靜態分析(static analysis)搜尋有調用 require()的內容，彙整出調用依賴關係圖(dependency graph)，並且將關鍵字解析成路徑，然後根據路徑找到檔案， 接著，檔案會被打包(bundle)成單一獨立的 javascript 檔案，讓你可以直接在網頁中直接使用。 並且，打包的檔案預設都會使用嚴格模式 ```use

接下來，開始介紹 Browserify 安裝方式及用法說明:

在使用 nodejs ，時常遇到版本無法支援的狀況，導致會出現找不到相關模組的情況

例如: Cannot find module ‘github-url-from-git’

處理的方式分別有以下幾種

最新推薦給設計師30個高質感免費字型，適用於大標題、Logo、T恤、標籤、海報、徽章等用途。每一個字型都是經過精挑細選，讓你可以用來創造更具有個人風格的設計專案，並且這些字型都能免費提供個人或商業用途，非常值得蒐藏。

在一頁式網頁架設登入系統通常是一件非常麻煩棘手的事情，

在一開始要思考的是該挑選哪個主流框架 Angular、React或Vue…

然後開始建立一個前後端分離的架構，只透過RESTful API來進行溝通，

在這樣的架構下，搭建CMS相當容易，前端通常只需要取得資料後，進行render出來即可，

##SESSION BASE 無用武之地 如果要建設會員或管理者權限功能，傳統 session-based 的權限登入方式相當簡單，

但是在透過 RESTful API 應用的框架中，session-based的方式則行不通，

此外，單純使用SESSION的情況，也必須解決資料跨 Server 的問題

Token

Token是一串加密字串，並儲存在前端， 當使用者再次操作時，就能在後端從資料庫中比對token， 檢查是否為有效的使用者， 但是這樣的查詢也會產生伺服器的負擔

Language of the browser: zh-TW var x = "Language of the browser: " + navigator.language; var txt = ""; txt += "<p>Browser CodeName: " + navigator.appCodeName + "</p>"; txt += "<p>Browser Name: " + navigator.

目前有很多客製化form element的套件， 但是這次專案只需要客製checkbox及radio， 由於這樣的類子很常用到，就直接在這裡就做個紀錄，方便之後查詢 如何透過CSS來客製化HTML checlbox 及radio buttons

安裝typescript

npm install -g typescript

接著測試看看是否能正常運作 先建立一個 helloworld.ts 內容寫入

let hi: string = "helloworld";

接著在下指令

tsc helloworld.ts

如果有產生一個對應的helloworld.js 那就代表能正常運作

var hi = "helloworld";

#Basic Types 紀錄一些Typescipt基本型態用法，主要參考自Typescript官網 Basic Types https://www.typescriptlang.org/docs/handbook/basic-types.html

##Boolean

let isDone: boolean = false;

##Number 在typescirpt中，所有numbers都是以符點數來表示，因此可以支援十六進位、十進位、八進位、二進位數值格式。

let decimal: number = 6;
let hex: number = 0xf00d;
let binary: number = 0b1010;
let octal: number = 0o744;

https://www.smashingmagazine.com/2016/09/content-security-policy-your-future-best-friend/ http://www.ruanyifeng.com/blog/2016/09/csp.html Content Security Policy - 簡稱 CSP，是一個瀏覽器安全保護使用者的策略。 主要用於降低 cross-site scripting (XSS) 的風險。 網站傳送Header時﹑夾帶 CSP header 告訴瀏覽器哪些是合法的內容，哪些是不合法的。 在基本的規則中，Header meta name 命名為 Content-Security-Policy 接下來就可以定義規則 定義的方式可以依照你使用的環境及語法而定 首先可以直接使用HTML meta的方式來定義 例如: <meta http-equiv="Content-Security-Policy" content="script-src 'self'; object-src 'none'; style-src cdn.

AMP 簡介 根據Google統計報告指出，載入網頁時間如果大於三秒，流失用戶的可能性就會大增， 因此，在 Google 在 2016 年正式推出了"加速行動版網頁"(Accelerated Mobile Page, AMP)，以下簡稱 AMP， AMP 能讓跨裝置的使用者都能更快速的載入網頁，讓網頁能有更好的體驗， 只要根據官方的HTML結構進行設定，調整 html、js、css 設定， 再將頁面提交給Google DNS，Google就會將AMP頁面進行快取緩存， 當使用者搜尋你的網頁時，Google會先將快取裡的資料顯示給使用者， 依據官方資料顯示，經過AMP優化的頁面可以提高四倍的載入速度! 接下來就開始來了解 AMP 的原理~ AMP 結構說明 AMP可以分成三個部分 AMP HTML - AMP HTML基本上是使用定制AMP屬性擴展的HTML AMP JS - AMP JS 庫，主要是處理AMP HTML頁面的快速渲染 AMP Cache - 用於提供緩存的AMP HTML頁面 SEO 目前官方說明僅透露 AMP 設定不會影響SEO，

當網站上線之後，接下來就是想辦法讓網站的流量增加及增加產品的曝光度，因此思考如何有效率的進行內容佈署及塑造完美形象的過程，對於公司、獨立品牌或個人都非常重要。

通常，在這個階段正式啟動之前，都會先仔細思考幾個重點，包含:了解目前的網路設計趨勢、決定要將內容放在哪些流行的社群平台(例如 Facebook、Pinterest、Instagram、Twitter…)，如何精準的讓內容呈現在社群平台，以及適當的挑選出重點內容、流行字體、製作成圖片、裁切設計等工作。

由於網路發展速度相當快，新生代的流行社群不斷浮出檯面的情況下，我們也必須督促自己，讓自己跟進社群經營發展的標準。

對於一般網頁設計師而言，對CSS的刻板印象只在於樣式設計方面，能讓你更容易設計出具有吸引力的網頁，但事實上，他的能力比你想像中還來得複雜，用CSS一樣可以做出豔麗的效果，例如純動畫及互動元件，當然，如果搭配HTML、Javascript，又能激發更多的創意變化。

瀏覽器就像是一個空白的畫布，最重要的還是你能不能運用靈感，在這張畫布上發揮你的創意，在這裡，將介紹18個使用CSS來打造的創意作品，從最簡單的字體到動畫 ，相信都能讓你對CSS有所改觀。

Apple App Store裡有130萬的app，而Google Play則託管了140萬的app。在競爭如此激烈的移動應用環境中如何確保我們製作的app能獲得大量的下載量呢？廣受用戶歡迎，並創下了上百萬的下載量是每一個移動app開發人員的終極夢想。但是，這談何容易呢！在最近的一次研討會上，Rahui Nischal，Nucleus Software Exports公司的高級產品經理，就談到了開發人員要想創建有吸引力的移動app，所需要關注的幾個關鍵方面。 圖片來源: http://d.ibtimes.co.uk 理念是根本 一個移動app的成功取決於它是建立在什麼樣的核心理念上的。對於開發人員而言，第一步要做的是像目標用戶那樣思考，用他們的眼光去看待問題，並在此基礎上構建移動app，構建可以讓他們的生活更簡單的app。步步為營，不斷地檢查app與最終用戶的相關性，積極調整產品以滿足用戶的需求。 單一的服務 單一的服務目標一個移動app只需要具備單一的功能。確定你app的主要目的，然後鑽研能否只通過一到兩次點擊就可以訪問進入。 保持簡單 保持簡單保持一切簡單化其實是最難的。如果移動開發人員可以成功地將復雜的技術隱藏在簡單界面的後面，那麼他就越靠近成功。 圖片來源:http://www.asianscientist.com 保持輕量級 三年前，Facebook的應用程式重達35-40M。現在，它只有大約10M。之所以會產生如此大的變化，是因為Facebook認識到，在印度和非洲——甚至連3G還尚未普及的區域，下載重量級的移動應用程式往往需要一段又長又難捱的時間。由於現在的移動app都是面向全球的，所以開發人員最好能夠創建輕量級的應用程式以便適應不同地域。 乾淨和簡單的UI UI很重要 WhatsApp在推出之前從來不做廣告。雖然現在網上提供了許多的聊天應用程序，但是WhatsApp的用戶使用量還是達到了成倍的增長。它成功的秘訣就是乾淨和簡單的UI。為了確保界面友好，我們在創造移動應用的時候需要關註三件事——愉悅性、實用性和功能性。 傾聽用戶的聲音 傾聽用戶的聲音應用程式在發布之後，開發人員應該時刻關注用戶的反饋，更新進步，努力提供更新更好的功能。 了解用戶行為 遊戲“憤怒的小鳥”的開發人員發現，Android用戶不喜歡為下載應用程式付費，而iOS用戶，大多數則願意購買app，但卻討厭在免費app上面看到任何廣告。了解不同的用戶行為，有助於移動開發人員為不同類型的用戶創建令人滿意的消費體驗。 文章來源: http://goo.gl/KscvW4 翻譯來源: http://www.codeceo.com/article/7-things-mobile-app-developers-should-focus-on.html

圖片來源: dudamobile

響應式網頁設計(Responsive Web Design)在這幾年越來越火紅，剛好，這次要開發項目的程式面會比較單純，所以想說，之前沒畫過RWD的畫面，就來試著畫一下，因此，就開始陷入Photoshop Guid這塊。不知道大家在使用 Photoshop設計時，都會怎麼處裡?

在製作過程，我使用的是 Photoshop 中的網格的擴充套件，由於，公司跟家裡使用的Photoshop CS版本不一樣，並且安裝的方法也不同。因此，在本篇主要以如何在Photoshop CS5裡面安裝Grid 網格擴充功能: