iT邦幫忙

鐵人檔案

2014 iT 邦幫忙鐵人賽
回列表

你不能不知道的Polymer開發實戰 系列

Web 開發元件化有其優勢與應用場景。Polymer 是 Google 推出支援Web Compoent標準的框架,雖然 AngularJS 有 directive,但在這點上Polymer其實更為全面且出色,而且今年率先支援 Material Design元件,就讓筆者做中學來分享開發實戰吧~

鐵人鍊成 | 共 30 篇文章 | 8 人訂閱 訂閱系列文 RSS系列文
DAY 11

使用Polymer也要顧門面 (Layout)

今日目標: 學習 Polymer Layout各種使用方式 Polymer提供了聲明式的佈局宣告,是基於 CSS Flexbox 建構而成,透過Polymer加...

2014-10-01 ‧ 由 martyshu 分享
DAY 12

來點實際應用 - 出英文考題

今日目標: 學習拿Polymer做實際應用 先來看看實際應用的小範例 (翻譯練習) [線上試玩] 自訂HTML標簽 <x-word>...<...

2014-10-02 ‧ 由 martyshu 分享
DAY 13

來點實際應用 - 出英文考題 (電腦請評分)

今日目標: 學習拿Polymer做實際應用 [線上試玩] <x-sentence> 這標籤可以用來輸入英文整句句子,並即時與正確答案進行比對,而且...

2014-10-03 ‧ 由 martyshu 分享
DAY 14

鐵人賽分享徽章又不見了? 沒關係,有產生器

今日目標: 打造鐵人賽挑戰徽章產生器 鐵人賽寫了14天,習慣每次寫完後,得到當天的挑戰徽章,就分享到FB。可是不知道是不是我的Chrome相容性不好,好幾次鐵人...

2014-10-04 ‧ 由 martyshu 分享
DAY 15

自己的英文自己救~結合VoiceTube

今日目標: 開發練習英文聽力的Web應用 線上試玩 今天我們進一步整合google-youtube元件,以及voicetube網站提供的字幕,使用Polyme...

2014-10-05 ‧ 由 martyshu 分享
DAY 16

VoiceTube元件解析 - 了解組裝元件的開發方式

今日目標: 了解源代碼與組裝元件的開發方式 一、元件結構 目前使用的元件清單如下 <voice-tube> 負責整合抓取字幕、youtube影片...

2014-10-06 ‧ 由 martyshu 分享
DAY 17

用 JavaScript 實現人臉追蹤

今日目標: 學習如何使用強大的電腦視覺元件 [線上試玩] 用顏色物體控制企業號前進 (粉紅色、青綠色、黃色) 一、tracking.js 網站介紹 t...

2014-10-07 ‧ 由 martyshu 分享
DAY 18

我所知道的元件聖殿、傳教士、軍火庫

今日目標: 了解元件大本營和各地軍火庫、威力強大的武器 包裝成WebComponent,polymer不是第一家,但在Google加持下,的確有可能成為最大的一...

2014-10-08 ‧ 由 martyshu 分享
DAY 19

AngularJS 的後宮佳麗 (上)

今日目標: 在 AngularJS 中使用 Polymer 元件 本來題目想寫AngularJS與PolymerJS聯姻,但說聯姻好像不大對,Polymer比較...

2014-10-09 ‧ 由 martyshu 分享
DAY 20

AngularJS 的後宮佳麗 (下)

今日目標: 了解Polymer 元件和AngularJS Directive元件的差異 昨天的說明在AngujarJS裏面可以直接使用Polymer元件,取代...

2014-10-10 ‧ 由 martyshu 分享