-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathagenda.html
More file actions
54 lines (49 loc) · 41.8 KB
/
Copy pathagenda.html
File metadata and controls
54 lines (49 loc) · 41.8 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html><html lang="zh-hant"><head><title>議程｜JSDC 2016</title><meta http-equiv="Content-type" content="text/html; charset=utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="author" content="JSDC Members"><meta name="copyright" content="JSDC Taiwan"><meta name="keywords" content="website,javascript,js,JSDC,Taiwan,2016"><meta itemprop="name" content="JSDC 2016"><meta itemprop="description" content="JavaScript 開發者年會 ( JavaScript Developers Conference，簡稱 JSDC ) 是台灣最⼤的 JavaScript 年度性技術研討會，旨在提供台灣中⾼階 JavaScript 技術人才與世界最新 JavaScript 相關技術討論與分享。"><meta itemprop="image" content="http://2016.jsdc.tw/dist/images/og-jsdc.jpg"><meta property="og:type" content="website"><meta property="og:title" content="JSDC 2016"><meta property="og:description" content="JavaScript 開發者年會 ( JavaScript Developers Conference，簡稱 JSDC ) 是台灣最⼤的 JavaScript 年度性技術研討會，旨在提供台灣中⾼階 JavaScript 技術人才與世界最新 JavaScript 相關技術討論與分享。"><meta property="og:image" content="http://2016.jsdc.tw/dist/images/og-jsdc.jpg"><meta property="og:url" content="http://2016.jsdc.tw/"><meta property="og:site_name" content="JSDC 2016"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:site" content="@jsdc_tw"><meta name="twitter:title" content="JSDC 2016"><meta name="twitter:description" content="JavaScript 開發者年會 ( JavaScript Developers Conference，簡稱 JSDC ) 是台灣最⼤的 JavaScript 年度性技術研討會，旨在提供台灣中⾼階 JavaScript 技術人才與世界最新 JavaScript 相關技術討論與分享。"><meta property="twitter:image" content="http://2016.jsdc.tw/dist/images/og-jsdc.jpg"><meta property="twitter:creator" content="@jsdc_tw"><link href="http://2016.jsdc.tw/dist/images/og-jsdc.jpg" rel="image_src" type="image/jpeg"><link rel="shortcut icon" href="http://2016.jsdc.tw/dist/favicons/favicon.ico"><link rel="stylesheet" href="./dist/css/bootstrap.css"><link rel="stylesheet" href="./dist/css/font-awesome/css/font-awesome.min.css"><link rel="stylesheet" href="./dist/css/owl.carousel.css"><link rel="stylesheet" href="./dist/css/animate.css"><link rel="stylesheet" href="./dist/css/balloon.css"><link rel="stylesheet" href="./dist/css/jquery-ui.css"><link href="http://fonts.googleapis.com/css?family=Montserrat:400,700|Source+Sans+Pro:400,700,400italic,700italic" rel="stylesheet" type="text/css"><link rel="stylesheet" href="./dist/css/headline.css"><link rel="stylesheet" href="./dist/css/hint.css"><link rel="stylesheet" href="./dist/css/main.css"><script src="./dist/js/jquery-1.11.2.min.js"></script><script src="./dist/js/bootstrap.min.js"></script><script src="./dist/js/jquery.backstretch.min.js"></script><script src="./dist/js/jquery.lazyload.min.js"></script><script src="./dist/js/jquery-ui.min.js"></script><script src="./dist/js/jquery.easing.min.min.js"></script><script src="./dist/js/skel.min.js"></script><script src="./dist/js/util.min.js"></script><script src="./dist/js/owl.carousel.min.js"></script><script src="./dist/js/headline.min.js"></script><script src="./dist/js/elevator.min.min.js"></script><script src="./dist/js/main.min.js"></script><!-- Google Analytics--><script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-76574910-1', 'auto');
ga('send', 'pageview');</script></head><body id="h5o-1"><nav class="navbar"><div class="container"><div class="navbar-header"><button type="button" data-toggle="collapse" data-target="#navbar-mobile" aria-expanded="false" class="navbar-toggle collapsed"><i class="fa fa-bars"></i></button><a href="./index.html" class="navbar-brand"><img itemprop="image" src="/dist/images/jsdc-logo-125-35.png" alt="JSDC 2016" class="image img-responsive lazy"></a></div><div id="navbar-mobile" class="collapse navbar-collapse"><ul class="nav navbar-nav"><li id="nav-about"><a href="./about.html">關於</a></li><li id="nav-venue"><a href="./venue.html">會場</a></li><li id="nav-speakers"><a href="./speakers.html">講者</a></li><li id="nav-agenda"><a href="./agenda.html">議程</a></li><li id="nav-sponsors"><a href="./sponsors.html">贊助夥伴</a></li><li id="nav-staffMember"><a href="./staffMember.html">工作人員</a></li><li id="nav-blog"><a href="http://blog.jsdc.tw/" target="_blank">部落格</a></li><li id="nav-fb-share"><div data-href="http://2016.jsdc.tw/" data-layout="button_count" class="fb-share-button"></div></li></ul><ul class="nav navbar-nav navbar-right"><li><a href="/en">English</a></li></ul></div></div></nav><div id="fb-root"></div><script>(function (d, s, id) {
var js,
fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id))
return;
js = d.createElement(s);
js.id = id;
js.src = "//connect.facebook.net/zh_TW/sdk.js#xfbml=1&version=v2.3&appId=715893795173476";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script><main class="agenda-page"><section id="sub-header"><div class="container"><div class="inner"><header class="major text-center"><h2>JSDC 2016 議程</h2></header></div></div></section><section id="agenda-list"><div class="container"><div class="agenda-container"><div id="tabs"><ul><li><a href="#day_1">Day 1 ( 10 / 22 )</a></li><li><a href="#day_2">Day 2 ( 10 / 23 )</a></li></ul><div id="day_1"><table class="table table-hover mobile-visible"><thead><tr><th style="width:10%; min-width:80px">時間</th><th style="width:45%">議程</th></tr></thead><tbody><tr><td>09:00<br>|<br>09:30</td><td class="break">報到</td></tr><tr><td>09:30<br>|<br>09:40</td><td class="break">大會開場</td></tr><tr><td>09:40<br>|<br>10:30</td><td class="colspan"><img style="display: block; margin: 0 auto;" src="/dist/images/speakers/blake-newman-render.png" alt="Blake Newman (Sainsbury's)" class="avatar"><h6 class="mobile-room"><i class="fa fa-map-marker"></i>全場聯播</h6><div class="speaker"><h6>How to adapt to change & exploring Vue.js</h6><p>by Blake Newman (Sainsbury's)</p><a href="http://slides.com/blakenewman/adapting-to-change-fughent#/" target="_blank" class="label label-info">Slide</a><a href="https://youtu.be/OWR-u5aYmwM" target="_blank" class="label label-danger">Youtube</a></div></td></tr><tr><td>10:30<br>|<br>10:50</td><td class="break">點心</td></tr><tr><td>10:50<br>|<br>11:30</td><td class="colspan"><div><img style="display: block; margin: 0 auto;" src="/dist/images/speakers/steven-su.jpg" alt="Steven Su" class="avatar"><h6 class="mobile-room"><i class="fa fa-map-marker"></i>國際會議廳 R0</h6><div class="speaker"><h6>GraphQL 經驗分享</h6><p>by Steven Su</p><a href="https://docs.google.com/presentation/d/1wGGTQHpUowrb6Bg2l9P_wb_2ThQmI0RgFzW8EcnPBxY/pub?start=false&loop=false&delayms=3000&slide=id.p" target="_blank" class="label label-info">Slide</a><a href="https://youtu.be/NTae12YhU9w?list=PL8dIIwCMF-SNmECoq8sF4onoxMqhRz9WT" target="_blank" class="label label-danger">Youtube</a></div></div><div class="dividing-line"></div><div><img style="display: block; margin: 0 auto;" src="/dist/images/speakers/jose-and-wildcat.png" alt="Jose & Wildcat" class="avatar"><h6 class="mobile-room"><i class="fa fa-map-marker"></i>第二會議廳 R2</h6><div class="speaker"><h6>JavaScript 的 SEO 奧義</h6><p>by Jose & Wildcat</p><a href="https://docs.google.com/presentation/d/11IFjDSN5fFxOnaTeecIQpYir7DXQrDd2U-fACfFs9Aw/edit?ts=58084af9#slide=id.p" target="_blank" class="label label-info">Slide</a><a href="https://youtu.be/YCMibkKtsSo?list=PL8dIIwCMF-SNmECoq8sF4onoxMqhRz9WT" target="_blank" class="label label-danger">Youtube</a></div></div></td></tr><tr><td>11:30<br>|<br>12:20</td><td class="break">午餐</td></tr><tr><td>12:20<br>|<br>13:10</td><td class="colspan"><img style="display: block; margin: 0 auto;" src="/dist/images/speakers/li-cheng-yin.png" alt="李成銀 (奇舞團)" class="avatar"><h6 class="mobile-room"><i class="fa fa-map-marker"></i>全場聯播</h6><div class="speaker"><h6>ThinkJS - 使用 ES2015+ 特性開發 Node.js 項目</h6><p>by 李成銀 (奇舞團)</p><a href="https://drive.google.com/file/d/0B74c3VQRcy2XU0lac09aYmRCV3M/view" target="_blank" class="label label-info">Slide</a><a href="https://youtu.be/0WuLZwUNSJY?list=PL8dIIwCMF-SNmECoq8sF4onoxMqhRz9WT" target="_blank" class="label label-danger">Youtube</a></div></td></tr><tr><td>13:10<br>|<br>13:30</td><td class="break">休息</td></tr><tr><td>13:30<br>|<br>14:10</td><td class="colspan"><div><img style="display: block; margin: 0 auto;" src="/dist/images/speakers/will.jpg" alt="Will 保哥" class="avatar"><h6 class="mobile-room"><i class="fa fa-map-marker"></i>國際會議廳 R0</h6><div class="speaker"><h6>使用 Angular 2 與 Firebase 實現 Serverless 網站架構</h6><p>by Will 保哥</p><a href="https://drive.google.com/file/d/0B0gjaMGkhBWHeFZjb2FSTW9NbDQ/view?usp=sharing" target="_blank" class="label label-info">Slide</a><a href="https://youtu.be/ztqRioJmdSM?list=PL8dIIwCMF-SNmECoq8sF4onoxMqhRz9WT" target="_blank" class="label label-danger">Youtube</a></div></div><div class="dividing-line"></div><div><img style="display: block; margin: 0 auto;" src="/dist/images/speakers/jong-shian-wu.jpg" alt="Jong-Shian Wu" class="avatar"><h6 class="mobile-room"><i class="fa fa-map-marker"></i>第二會議廳 R2</h6><div class="speaker"><h6>OTP 已死 U2F 永存：JavaScript U2F 兩步驟驗證實戰</h6><p>by Jong-Shian Wu</p><a href="https://docs.google.com/presentation/d/14hIW87kyoiMEvuJ-Fn7pdxmzbVMOxPhpFZkjYfx-Mfg/edit" target="_blank" class="label label-info">Slide</a><a href="https://youtu.be/rl_-Nw1UHfM?list=PL8dIIwCMF-SNmECoq8sF4onoxMqhRz9WT" target="_blank" class="label label-danger">Youtube</a></div></div></td></tr><tr><td>14:10<br>|<br>14:40</td><td class="break">下午茶</td></tr><tr><td>14:40<br>|<br>15:20</td><td class="colspan"><div><img style="display: block; margin: 0 auto;" src="/dist/images/speakers/alin.jpg" alt="劉艾霖" class="avatar"><h6 class="mobile-room"><i class="fa fa-map-marker"></i>國際會議廳 R0</h6><div class="speaker"><h6>淺談網站自動化測試 - 以 WebdriverIO 框架為例</h6><p>by 劉艾霖</p><a href="http://slides.com/alincode/jsdc2016_webdriverio/fullscreen#/" target="_blank" class="label label-info">Slide</a><a href="https://youtu.be/a8BbbQX7yzg?list=PL8dIIwCMF-SNmECoq8sF4onoxMqhRz9WT" target="_blank" class="label label-danger">Youtube</a></div></div><div class="dividing-line"></div><div><img style="display: block; margin: 0 auto;" src="/dist/images/speakers/vincent.png" alt="劉俊彥(Vincent)" class="avatar"><h6 class="mobile-room"><i class="fa fa-map-marker"></i>第二會議廳 R2</h6><div class="speaker"><h6>fbreactions.io - 用AWS Lambda 爬數據視覺化</h6><p>by 劉俊彥(Vincent)</p><a href="http://slides.com/chunyinvincentlau/fbreactionsio" target="_blank" class="label label-info">Slide</a><a href="https://youtu.be/xtj4myHbCks?list=PL8dIIwCMF-SNmECoq8sF4onoxMqhRz9WT" target="_blank" class="label label-danger">Youtube</a></div></div></td></tr><tr><td>15:20<br>|<br>15:40</td><td class="break">休息</td></tr><tr><td>15:40<br>|<br>16:20</td><td class="colspan"><div><img style="display: block; margin: 0 auto;" src="/dist/images/speakers/hong.jpg" alt="洪名辰" class="avatar"><h6 class="mobile-room"><i class="fa fa-map-marker"></i>國際會議廳 R0</h6><div class="speaker"><h6>Universal JavaScript?</h6><p>by 洪名辰</p><a href="https://speakerdeck.com/s6323859/universal-javascript" target="_blank" class="label label-info">Slide</a><a href="https://youtu.be/YoKuUNz5J2M?list=PL8dIIwCMF-SNmECoq8sF4onoxMqhRz9WT" target="_blank" class="label label-danger">Youtube</a></div></div><div class="dividing-line"></div><div><img style="display: block; margin: 0 auto;" src="/dist/images/speakers/tomas-lin.jpg" alt="Tomas Lin" class="avatar"><h6 class="mobile-room"><i class="fa fa-map-marker"></i>第二會議廳 R2</h6><div class="speaker"><h6>React Native - dispatch route like web uri</h6><p>by Tomas Lin</p><a href="http://slides.com/tomaslin/react-native-3#/" target="_blank" class="label label-info">Slide</a><a href="https://youtu.be/cE766ImrejY?list=PL8dIIwCMF-SNmECoq8sF4onoxMqhRz9WT" target="_blank" class="label label-danger">Youtube</a></div></div></td></tr><tr><td>16:20<br>|<br>16:40</td><td class="break">休息</td></tr><tr><td>16:40<br>|<br>17:30</td><td class="colspan"><img style="display: block; margin: 0 auto;" src="/dist/images/speakers/monica.png" alt="Monica Dinculescu (Google Inc.)" class="avatar"><h6 class="mobile-room"><i class="fa fa-map-marker"></i>全場聯播</h6><div class="speaker"><h6>How I learned to stop worrying and love the Polymer toolbox</h6><p>by Monica Dinculescu (Google Inc.)</p><a href="https://speakerdeck.com/notwaldorf/an-app-in-3-days-or-how-i-learned-to-stop-worrying-and-love-the-polymer-toolbox" target="_blank" class="label label-info">Slide</a><a href="https://youtu.be/VLQvt9jzEIo?list=PL8dIIwCMF-SNmECoq8sF4onoxMqhRz9WT" target="_blank" class="label label-danger">Youtube</a></div></td></tr><tr><td>17:30<br>|<br>18:00</td><td class="break">散場</td></tr></tbody></table><table class="table table-hover hidden-xs"><thead><tr><th style="width:10%; min-width:80px">時間</th><th style="width:45%">國際會議廳 R0</th><th style="width:45%">第二會議廳 R2</th></tr></thead><tbody><tr><td>09:00<br>|<br>09:30</td><td colspan="2" class="break">報到</td></tr><tr><td>09:30<br>|<br>09:40</td><td colspan="2" class="break">大會開場</td></tr><tr><td>09:40<br>|<br>10:30</td><td colspan="2" aria-label="這個新套件的出現是為了解決什麼問題？在 JavaScript 的迅速發展下，想要持續更上是不容易的，我們將尋找更好地做法，讓你能夠適應這些變化，以及了解 Vue.js 如何在現在幫助你甚至是未來！" class="colspan hint--top hint--large"><img src="/dist/images/speakers/blake-newman-render.png" alt="Blake Newman (Sainsbury's)" class="avatar"><div class="speaker"><h6>How to adapt to change & exploring Vue.js</h6><p>by Blake Newman (Sainsbury's)</p><a href="http://slides.com/blakenewman/adapting-to-change-fughent#/" target="_blank" class="label label-info">Slide</a><a href="https://youtu.be/OWR-u5aYmwM" target="_blank" class="label label-danger">Youtube</a></div></td></tr><tr><td>10:30<br>|<br>10:50</td><td colspan="2" class="break">點心</td></tr><tr><td>10:50<br>|<br>11:30</td><td aria-label="1. GraphQL 介紹 2. 為何會用幾乎沒什麼人在用的 GraphQL 3. GraphQL 使用者見證 4. GraphQL 安全性 5. GraphQL 快取" class="colspan hint--top hint--large"><img style="display: block; margin: 0 auto;" src="/dist/images/speakers/steven-su.jpg" alt="Steven Su" class="avatar"><div class="speaker"><h6>GraphQL 經驗分享</h6><p>by Steven Su</p><a href="https://docs.google.com/presentation/d/1wGGTQHpUowrb6Bg2l9P_wb_2ThQmI0RgFzW8EcnPBxY/pub?start=false&loop=false&delayms=3000&slide=id.p" target="_blank" class="label label-info">Slide</a><a href="https://youtu.be/NTae12YhU9w?list=PL8dIIwCMF-SNmECoq8sF4onoxMqhRz9WT" target="_blank" class="label label-danger">Youtube</a></div></td><td aria-label="1. GoogleBot 與 JavaScript、AJAX 2. JavaScript 與網站速度 3. JavaScript 對 SEO 的影響 4. 透過球來就打做 SEO" class="colspan hint--top hint--large aaa"><img style="display: block; margin: 0 auto;" src="/dist/images/speakers/jose-and-wildcat.png" alt="Jose & Wildcat" class="avatar"><div class="speaker"><h6>JavaScript 的 SEO 奧義</h6><p>by Jose & Wildcat</p><a href="https://docs.google.com/presentation/d/11IFjDSN5fFxOnaTeecIQpYir7DXQrDd2U-fACfFs9Aw/edit?ts=58084af9#slide=id.p" target="_blank" class="label label-info">Slide</a><a href="https://youtu.be/YCMibkKtsSo?list=PL8dIIwCMF-SNmECoq8sF4onoxMqhRz9WT" target="_blank" class="label label-danger">Youtube</a></div></td></tr><tr><td>11:30<br>|<br>12:20</td><td colspan="2" class="break">午餐</td></tr><tr><td>12:20<br>|<br>13:10</td><td colspan="2" aria-label="1.Node.js 對 ES2015+ 特性支持越来越好，使用新特性開發項目带来具大的便利 2.ThinkJS 特性：使用 ES2015+ 全部特性，自動編譯、自動更新 3.與Koa 簡單對比" class="colspan hint--top hint--large"><img src="/dist/images/speakers/li-cheng-yin.png" alt="李成銀 (奇舞團)" class="avatar"><div class="speaker"><h6>ThinkJS - 使用 ES2015+ 特性開發 Node.js 項目</h6><p>by 李成銀 (奇舞團)</p><a href="https://drive.google.com/file/d/0B74c3VQRcy2XU0lac09aYmRCV3M/view" target="_blank" class="label label-info">Slide</a><a href="https://youtu.be/0WuLZwUNSJY?list=PL8dIIwCMF-SNmECoq8sF4onoxMqhRz9WT" target="_blank" class="label label-danger">Youtube</a></div></td></tr><tr><td>13:10<br>|<br>13:30</td><td colspan="2" class="break">休息</td></tr><tr><td>13:30<br>|<br>14:10</td><td aria-label="前端工程師看似光鮮亮麗，可以做出任何想要的功能與介面，不過當碰到後端技術與各式資料庫，許多人就會立刻投降，乖乖等待後端工程師將 API 寫好才能繼續開發。否則，你就要開始研究另一個全新的後端開發世界，往全端工程師邁進。不過一個人的時間資源有限，你在一個地方獲得，就會在另一個地方失去。有鑑於最近正夯的 Serverless (無伺服器) 架構正在興起，本次演講我將示範如何利用 Angular 2 搭配 Google Firebase 打造一個無伺服器的網站開發架構，用純前端技術就能打造出完整又即時的網站。" class="colspan hint--top hint--large"><img style="display: block; margin: 0 auto;" src="/dist/images/speakers/will.jpg" alt="Will 保哥" class="avatar"><div class="speaker"><h6>使用 Angular 2 與 Firebase 實現 Serverless 網站架構</h6><p>by Will 保哥</p><a href="https://drive.google.com/file/d/0B0gjaMGkhBWHeFZjb2FSTW9NbDQ/view?usp=sharing" target="_blank" class="label label-info">Slide</a><a href="https://youtu.be/ztqRioJmdSM?list=PL8dIIwCMF-SNmECoq8sF4onoxMqhRz9WT" target="_blank" class="label label-danger">Youtube</a></div></td><td aria-label="使用傳統密碼的線上使用者身分認證有易用性與安全性之問題，近年來已經造成了人們巨大的損失。然而 App 或簡訊 OTP 等補救措施也未能徹底解決那些問題。此講題會介紹 U2F 這套兩步驟驗證標準。該標準提供了高安全性與優良使用者體驗的規範，目前已經被 Google、Dropbox、GitHub 等線上服務所部署。我會分享我開發一款伺服器端 U2F 函式庫的經驗，我也會分享我以 JavaScript 實作的一款 U2F 虛擬硬體，讓有興趣的玩家可以在自己的 Linux 電腦上進行各種實驗。" class="colspan hint--top hint--large aaa"><img style="display: block; margin: 0 auto;" src="/dist/images/speakers/jong-shian-wu.jpg" alt="Jong-Shian Wu" class="avatar"><div class="speaker"><h6>OTP 已死 U2F 永存：JavaScript U2F 兩步驟驗證實戰</h6><p>by Jong-Shian Wu</p><a href="https://docs.google.com/presentation/d/14hIW87kyoiMEvuJ-Fn7pdxmzbVMOxPhpFZkjYfx-Mfg/edit" target="_blank" class="label label-info">Slide</a><a href="https://youtu.be/rl_-Nw1UHfM?list=PL8dIIwCMF-SNmECoq8sF4onoxMqhRz9WT" target="_blank" class="label label-danger">Youtube</a></div></td></tr><tr><td>14:10<br>|<br>14:40</td><td colspan="2" class="break">下午茶</td></tr><tr><td>14:40<br>|<br>15:20</td><td aria-label="隨著前端工程逐漸被重視，前端測試當然也不會缺席，以 WebdriverIO 框架為例，但概念通用於所有前端測試框架，快速帶大家了解前端測試，及可以做到什麼樣的地步，透過現代化的前端測試框架、一些 Pattern 、工具，來建立易維護擴充的測試程式，及講者的經驗分享。" class="colspan hint--top hint--large"><img style="display: block; margin: 0 auto;" src="/dist/images/speakers/alin.jpg" alt="劉艾霖" class="avatar"><div class="speaker"><h6>淺談網站自動化測試 - 以 WebdriverIO 框架為例</h6><p>by 劉艾霖</p><a href="http://slides.com/alincode/jsdc2016_webdriverio/fullscreen#/" target="_blank" class="label label-info">Slide</a><a href="https://youtu.be/a8BbbQX7yzg?list=PL8dIIwCMF-SNmECoq8sF4onoxMqhRz9WT" target="_blank" class="label label-danger">Youtube</a></div></td><td aria-label="香港台灣每天的心情如何？這個開源項目把FB媒體專頁的「心情」(Reaction)數據用視覺化呈現，從爬資料到視覺化都是Javascript (NodeJs / React / D3.js)。這演講將會簡介該架構，從而重點介紹當中爬資料所運用的AWS Lambda (Serverless Architecture)，相關工具、使用的時機和優劣。" class="colspan hint--top hint--large aaa"><img style="display: block; margin: 0 auto;" src="/dist/images/speakers/vincent.png" alt="劉俊彥(Vincent)" class="avatar"><div class="speaker"><h6>fbreactions.io - 用AWS Lambda 爬數據視覺化</h6><p>by 劉俊彥(Vincent)</p><a href="http://slides.com/chunyinvincentlau/fbreactionsio" target="_blank" class="label label-info">Slide</a><a href="https://youtu.be/xtj4myHbCks?list=PL8dIIwCMF-SNmECoq8sF4onoxMqhRz9WT" target="_blank" class="label label-danger">Youtube</a></div></td></tr><tr><td>15:20<br>|<br>15:40</td><td colspan="2" class="break">休息</td></tr><tr><td>15:40<br>|<br>16:20</td><td aria-label="Universal(Isomorphic) JavaScript 大概是過去一年來最紅的技術名詞之一，但真的已經把這項技術用在產品上的公司少之又少，網路上的學習資源也不甚完整，導致多數的開發者其實對於 Universal JavaScript 停留在理論層面，很難對 Universal JavaScript 在實務上的開發一探究竟。 究竟 Universal JavaScript 是否有必要？採用 Universal JavaScript 對開發上有什麼實質的影響？在開發的過程中會遇到什麼問題？ 最後到底用了 Universal JavaScript 又有什麼優勢呢？" class="colspan hint--top hint--large"><img style="display: block; margin: 0 auto;" src="/dist/images/speakers/hong.jpg" alt="洪名辰" class="avatar"><div class="speaker"><h6>Universal JavaScript?</h6><p>by 洪名辰</p><a href="https://speakerdeck.com/s6323859/universal-javascript" target="_blank" class="label label-info">Slide</a><a href="https://youtu.be/YoKuUNz5J2M?list=PL8dIIwCMF-SNmECoq8sF4onoxMqhRz9WT" target="_blank" class="label label-danger">Youtube</a></div></td><td aria-label="在 React Native 中簡易的 Route system 讓 dispatch 就像 web url 一般的容易" class="colspan hint--top hint--large aaa"><img style="display: block; margin: 0 auto;" src="/dist/images/speakers/tomas-lin.jpg" alt="Tomas Lin" class="avatar"><div class="speaker"><h6>React Native - dispatch route like web uri</h6><p>by Tomas Lin</p><a href="http://slides.com/tomaslin/react-native-3#/" target="_blank" class="label label-info">Slide</a><a href="https://youtu.be/cE766ImrejY?list=PL8dIIwCMF-SNmECoq8sF4onoxMqhRz9WT" target="_blank" class="label label-danger">Youtube</a></div></td></tr><tr><td>16:20<br>|<br>16:40</td><td colspan="2" class="break">休息</td></tr><tr><td>16:40<br>|<br>17:30</td><td colspan="2" aria-label="Think of your favourite app. It's probably meowni.ca/emojillate (who can blame you), but if it isn't (and we need to talk) it probably has one, if not all, of these things: a database; a potential for disaster, with many users looking at and clicking on the same data; offline support, a responsive layout while preferably being faster than the average bear. Recreating this experience from scratch might sound like a terrifying experience, but I'm going to show you how the polymer toolbox and a few other already-built elements can help you go from zero to hero and build a PWA in no time." class="colspan hint--top hint--large"><img src="/dist/images/speakers/monica.png" alt="Monica Dinculescu (Google Inc.)" class="avatar"><div class="speaker"><h6>How I learned to stop worrying and love the Polymer toolbox</h6><p>by Monica Dinculescu (Google Inc.)</p><a href="https://speakerdeck.com/notwaldorf/an-app-in-3-days-or-how-i-learned-to-stop-worrying-and-love-the-polymer-toolbox" target="_blank" class="label label-info">Slide</a><a href="https://youtu.be/VLQvt9jzEIo?list=PL8dIIwCMF-SNmECoq8sF4onoxMqhRz9WT" target="_blank" class="label label-danger">Youtube</a></div></td></tr><tr><td>17:30<br>|<br>18:00</td><td colspan="2" class="break">散場</td></tr></tbody></table></div><div id="day_2"><table class="table table-hover mobile-visible"><thead><tr><th style="width:10%; min-width:80px">時間</th><th style="width:45%">議程</th></tr></thead><tbody><tr><td>09:00<br>|<br>09:30</td><td class="break">報到</td></tr><tr><td>09:30<br>|<br>09:40</td><td class="break">大會開場</td></tr><tr><td>09:40<br>|<br>10:30</td><td class="colspan"><img style="display: block; margin: 0 auto;" src="/dist/images/speakers/paul.jpg" alt="Paul Taylor(Graphistry, Inc.)" class="avatar"><h6 class="mobile-room"><i class="fa fa-map-marker"></i>全場聯播</h6><div class="speaker"><h6>Reactive Programming In Action with RxJS 5</h6><p>by Paul Taylor(Graphistry, Inc.)</p><a href="http://slides.com/ptaylor/reactive-programming-in-action-with-rxjs-5#/" target="_blank" class="label label-info">Slide</a><a href="https://youtu.be/SCoRVa9wwp4?list=PL8dIIwCMF-SNmECoq8sF4onoxMqhRz9WT" target="_blank" class="label label-danger">Youtube</a></div></td></tr><tr><td>10:30<br>|<br>10:50</td><td class="break">點心</td></tr><tr><td>10:50<br>|<br>11:30</td><td class="colspan"><div><img style="display: block; margin: 0 auto;" src="/dist/images/speakers/lee.jpg" alt="Lee" class="avatar"><h6 class="mobile-room"><i class="fa fa-map-marker"></i>國際會議廳 R0</h6><div class="speaker"><h6>NIME: 使用 nodejs 快快樂樂開發輸入法</h6><p>by Lee</p><a href="https://hackmd.io/p/BJ0xsY5A#/" target="_blank" class="label label-info">Slide</a><a href="https://youtu.be/h0SA9NVCsZY?list=PL8dIIwCMF-SNmECoq8sF4onoxMqhRz9WT" target="_blank" class="label label-danger">Youtube</a></div></div><div class="dividing-line"></div><div><img style="display: block; margin: 0 auto;" src="/dist/images/speakers/sam-lee.jpg" alt="李欣龍(山姆大叔)" class="avatar"><h6 class="mobile-room"><i class="fa fa-map-marker"></i>第二會議廳 R2</h6><div class="speaker"><h6>React Native + Redux 簡單也不簡單</h6><p>by 李欣龍(山姆大叔)</p><a href="https://drive.google.com/file/d/0ByWcXpjgDauxMjNYaGNjVUQtQm8/view" target="_blank" class="label label-info">Slide</a><a href="https://youtu.be/yDfs2NL8Oic?list=PL8dIIwCMF-SNmECoq8sF4onoxMqhRz9WT" target="_blank" class="label label-danger">Youtube</a></div></div></td></tr><tr><td>11:30<br>|<br>12:20</td><td class="break">午餐</td></tr><tr><td>12:20<br>|<br>13:10</td><td class="colspan"><img style="display: block; margin: 0 auto;" src="/dist/images/speakers/alex-liu.png" alt="Alex Liu (Netflix)" class="avatar"><h6 class="mobile-room"><i class="fa fa-map-marker"></i>全場聯播</h6><div class="speaker"><h6>CodexJS: a conditional module bundler</h6><p>by Alex Liu (Netflix)</p><a href="https://drive.google.com/file/d/0B0gjaMGkhBWHbWtldGNZTGljdGs/view?usp=sharing" target="_blank" class="label label-info">Slide</a><a href="https://youtu.be/C7YgzNJFagQ?list=PL8dIIwCMF-SNmECoq8sF4onoxMqhRz9WT" target="_blank" class="label label-danger">Youtube</a></div></td></tr><tr><td>13:10<br>|<br>13:30</td><td class="break">休息</td></tr><tr><td>13:30<br>|<br>14:10</td><td class="colspan"><div><img style="display: block; margin: 0 auto;" src="/dist/images/speakers/jim.JPG" alt="Jim Chang (吉姆)" class="avatar"><h6 class="mobile-room"><i class="fa fa-map-marker"></i>國際會議廳 R0</h6><div class="speaker"><h6>Data Visualization performance optimization</h6><p>by Jim Chang (吉姆)</p><a href="https://drive.google.com/file/d/0B0gjaMGkhBWHVjZqZ1VwdkRpdjA/view?usp=sharing" target="_blank" class="label label-info">Slide</a><a href="https://youtu.be/4Df5EqyTw-Y?list=PL8dIIwCMF-SNmECoq8sF4onoxMqhRz9WT" target="_blank" class="label label-danger">Youtube</a></div></div><div class="dividing-line"></div><div><img style="display: block; margin: 0 auto;" src="/dist/images/speakers/kidwm.jpeg" alt="kidwm" class="avatar"><h6 class="mobile-room"><i class="fa fa-map-marker"></i>第二會議廳 R2</h6><div class="speaker"><h6>Metaprogramming in ES2015</h6><p>by kidwm</p><a href="https://speakerdeck.com/kidwm/metaprogramming-in-es2015" target="_blank" class="label label-info">Slide</a><a href="https://youtu.be/ceH1EMHyE2o?list=PL8dIIwCMF-SNmECoq8sF4onoxMqhRz9WT" target="_blank" class="label label-danger">Youtube</a></div></div></td></tr><tr><td>14:10<br>|<br>14:40</td><td class="break">下午茶</td></tr><tr><td>14:40<br>|<br>15:20</td><td class="colspan"><div><img style="display: block; margin: 0 auto;" src="/dist/images/speakers/ct.png" alt="CT" class="avatar"><h6 class="mobile-room"><i class="fa fa-map-marker"></i>國際會議廳 R0</h6><div class="speaker"><h6>Dive into React Performance</h6><p>by CT</p><a href="https://speakerdeck.com/wuct/dive-into-react-performance" target="_blank" class="label label-info">Slide</a><a href="https://youtu.be/Wc41e94tqfo?list=PL8dIIwCMF-SNmECoq8sF4onoxMqhRz9WT" target="_blank" class="label label-danger">Youtube</a></div></div><div class="dividing-line"></div><div><img style="display: block; margin: 0 auto;" src="/dist/images/speakers/jason.jpg" alt=" Jason Cheng" class="avatar"><h6 class="mobile-room"><i class="fa fa-map-marker"></i>第二會議廳 R2</h6><div class="speaker"><h6>rabbitMQ 與 Node.js 實戰應用</h6><p>by Jason Cheng</p><a href="https://drive.google.com/file/d/0BxeWrPY43fUVQ0cyT1plWF85cGM/view?usp=sharing" target="_blank" class="label label-info">Slide</a><a href="https://youtu.be/9LLeZVCKf1c?list=PL8dIIwCMF-SNmECoq8sF4onoxMqhRz9WT" target="_blank" class="label label-danger">Youtube</a></div></div></td></tr><tr><td>15:20<br>|<br>15:40</td><td class="break">休息</td></tr><tr><td>15:40<br>|<br>16:20</td><td class="colspan"><div><img style="display: block; margin: 0 auto;" src="/dist/images/speakers/fred.jpg" alt="Fred Chien" class="avatar"><h6 class="mobile-room"><i class="fa fa-map-marker"></i>國際會議廳 R0</h6><div class="speaker"><h6>親愛的，我們來土炮一個 Google Docs 吧！</h6><p>by Fred Chien</p><a href="https://drive.google.com/a/jsdc.tw/file/d/0B0gjaMGkhBWHZWdLWC1ONHR4RGs/view?usp=sharing" target="_blank" class="label label-info">Slide</a><a href="https://youtu.be/xRezT4YZ6PU?list=PL8dIIwCMF-SNmECoq8sF4onoxMqhRz9WT" target="_blank" class="label label-danger">Youtube</a></div></div><div class="dividing-line"></div><div><img style="display: block; margin: 0 auto;" src="/dist/images/speakers/cyril.jpg" alt="Cyril Yu" class="avatar"><h6 class="mobile-room"><i class="fa fa-map-marker"></i>第二會議廳 R2</h6><div class="speaker"><h6>Vue.js 實戰分享 - 使用 Vue.js 打造產品服務的 dashboard</h6><p>by Cyril Yu</p><a href="http://slides.com/cyrilyu/jsdc2016#/" target="_blank" class="label label-info">Slide</a><a href="https://youtu.be/P0maNnU62mI?list=PL8dIIwCMF-SNmECoq8sF4onoxMqhRz9WT" target="_blank" class="label label-danger">Youtube</a></div></div></td></tr><tr><td>16:20<br>|<br>16:40</td><td class="break">休息</td></tr><tr><td>16:40<br>|<br>17:20</td><td class="colspan"><img style="display: block; margin: 0 auto;" src="/dist/images/jsdc-mascot-150.jpg" alt="" class="avatar"><h6 class="mobile-room"><i class="fa fa-map-marker"></i>全場聯播</h6><div class="speaker"><h6>Lightning Talk</h6><a href="https://youtu.be/9Lfl6MBGtwg?list=PL8dIIwCMF-SNmECoq8sF4onoxMqhRz9WT" target="_blank" class="label label-danger">Youtube</a></div></td></tr><tr><td>17:20<br>|<br>18:00</td><td class="break">散場</td></tr></tbody></table><table class="table table-hover hidden-xs"><thead><tr><th style="width:10%; min-width:80px">時間</th><th style="width:45%">國際會議廳 R0</th><th style="width:45%">第二會議廳 R2</th></tr></thead><tbody><tr><td>09:00<br>|<br>09:30</td><td colspan="2" class="break">報到</td></tr><tr><td>09:30<br>|<br>09:40</td><td colspan="2" class="break">大會開場</td></tr><tr><td>09:40<br>|<br>10:30</td><td colspan="2" aria-label="Reactive Extensions (Rx) 是一個為了建構非同步與基於事件程序的跨平台的套件，RxJS第五版是由 Google、Microsoft 和 Netflix 共同合作，套件的開發著重於效能與容易使用性，更是 Angular2 的核心套件之一。而這次的講題將會帶來清楚的核心介紹，也會展示 RxJS 可以解決各種在 Client 端和 Server 端開發經常遇到的非同步問題。" class="colspan hint--top hint--large"><img src="/dist/images/speakers/paul.jpg" alt="Paul Taylor(Graphistry, Inc.)" class="avatar"><div class="speaker"><h6>Reactive Programming In Action with RxJS 5</h6><p>by Paul Taylor(Graphistry, Inc.)</p><a href="http://slides.com/ptaylor/reactive-programming-in-action-with-rxjs-5#/" target="_blank" class="label label-info">Slide</a><a href="https://youtu.be/SCoRVa9wwp4?list=PL8dIIwCMF-SNmECoq8sF4onoxMqhRz9WT" target="_blank" class="label label-danger">Youtube</a></div></td></tr><tr><td>10:30<br>|<br>10:50</td><td colspan="2" class="break">點心</td></tr><tr><td>10:50<br>|<br>11:30</td><td aria-label="NIME 是把 PCMan 在 2015 年發佈的 PIME 輸入法平台移植到 nodejs 上，讓開發者可以使用 nodejs 來開發 windows 輸入法，本議程將會分享開發過程的心得與介紹如何使用 NIME 平台來開發 windows 輸入法。" class="colspan hint--top hint--large"><img style="display: block; margin: 0 auto;" src="/dist/images/speakers/lee.jpg" alt="Lee" class="avatar"><div class="speaker"><h6>NIME: 使用 nodejs 快快樂樂開發輸入法</h6><p>by Lee</p><a href="https://hackmd.io/p/BJ0xsY5A#/" target="_blank" class="label label-info">Slide</a><a href="https://youtu.be/h0SA9NVCsZY?list=PL8dIIwCMF-SNmECoq8sF4onoxMqhRz9WT" target="_blank" class="label label-danger">Youtube</a></div></td><td aria-label="React Native 大幅降低開發 Mobile 的成本，Redux 簡化了開發的架構，但實際上真的有那麼簡單嗎？" class="colspan hint--top hint--large aaa"><img style="display: block; margin: 0 auto;" src="/dist/images/speakers/sam-lee.jpg" alt="李欣龍(山姆大叔)" class="avatar"><div class="speaker"><h6>React Native + Redux 簡單也不簡單</h6><p>by 李欣龍(山姆大叔)</p><a href="https://drive.google.com/file/d/0ByWcXpjgDauxMjNYaGNjVUQtQm8/view" target="_blank" class="label label-info">Slide</a><a href="https://youtu.be/yDfs2NL8Oic?list=PL8dIIwCMF-SNmECoq8sF4onoxMqhRz9WT" target="_blank" class="label label-danger">Youtube</a></div></td></tr><tr><td>11:30<br>|<br>12:20</td><td colspan="2" class="break">午餐</td></tr><tr><td>12:20<br>|<br>13:10</td><td colspan="2" aria-label="Node.js 協助 Netflix 解決的什麼問題? 或是遇到了什麼問題?" class="colspan hint--top hint--large"><img src="/dist/images/speakers/alex-liu.png" alt="Alex Liu (Netflix)" class="avatar"><div class="speaker"><h6>CodexJS: a conditional module bundler</h6><p>by Alex Liu (Netflix)</p><a href="https://drive.google.com/file/d/0B0gjaMGkhBWHbWtldGNZTGljdGs/view?usp=sharing" target="_blank" class="label label-info">Slide</a><a href="https://youtu.be/C7YgzNJFagQ?list=PL8dIIwCMF-SNmECoq8sF4onoxMqhRz9WT" target="_blank" class="label label-danger">Youtube</a></div></td></tr><tr><td>13:10<br>|<br>13:30</td><td colspan="2" class="break">休息</td></tr><tr><td>13:30<br>|<br>14:10</td><td aria-label="Graph Visualization 的應用範圍從基因鏈，資訊安全至社交網絡層面相當廣泛。 而效能問題又是這類視覺化圖形常見的問題，如何量測？如何藉由前後端整合增進效能？是我們要解決的問題。" class="colspan hint--top hint--large"><img style="display: block; margin: 0 auto;" src="/dist/images/speakers/jim.JPG" alt="Jim Chang (吉姆)" class="avatar"><div class="speaker"><h6>Data Visualization performance optimization</h6><p>by Jim Chang (吉姆)</p><a href="https://drive.google.com/file/d/0B0gjaMGkhBWHVjZqZ1VwdkRpdjA/view?usp=sharing" target="_blank" class="label label-info">Slide</a><a href="https://youtu.be/4Df5EqyTw-Y?list=PL8dIIwCMF-SNmECoq8sF4onoxMqhRz9WT" target="_blank" class="label label-danger">Youtube</a></div></td><td aria-label="ES2015 提供了 Symbols, Reflect, Proxies 等各項與其他語言類近的底層 Metaprogramming 功能，讓 Class 與 Object 能有更多增強的變化。" class="colspan hint--top hint--large aaa"><img style="display: block; margin: 0 auto;" src="/dist/images/speakers/kidwm.jpeg" alt="kidwm" class="avatar"><div class="speaker"><h6>Metaprogramming in ES2015</h6><p>by kidwm</p><a href="https://speakerdeck.com/kidwm/metaprogramming-in-es2015" target="_blank" class="label label-info">Slide</a><a href="https://youtu.be/ceH1EMHyE2o?list=PL8dIIwCMF-SNmECoq8sF4onoxMqhRz9WT" target="_blank" class="label label-danger">Youtube</a></div></td></tr><tr><td>14:10<br>|<br>14:40</td><td colspan="2" class="break">下午茶</td></tr><tr><td>14:40<br>|<br>15:20</td><td aria-label="React 的設計理念是讓每次狀態更新時都像是 re-render 整個 app，所以開發者能夠用宣告式的方式組織程式碼、減少認知負荷，但開發者不留意的話，也會寫出真的 re-render 整個 app 的效能。我們會從 React 如何更新 app 開始，談到如何架構 React app 以及優化效能，最後會介紹 React 針對效能重新設計的新核心 Fiber。過程中我們會看到各種實際案例，以及分析技巧與工具。" class="colspan hint--top hint--large"><img style="display: block; margin: 0 auto;" src="/dist/images/speakers/ct.png" alt="CT" class="avatar"><div class="speaker"><h6>Dive into React Performance</h6><p>by CT</p><a href="https://speakerdeck.com/wuct/dive-into-react-performance" target="_blank" class="label label-info">Slide</a><a href="https://youtu.be/Wc41e94tqfo?list=PL8dIIwCMF-SNmECoq8sF4onoxMqhRz9WT" target="_blank" class="label label-danger">Youtube</a></div></td><td aria-label="" class="colspan hint--top hint--large aaa"><img style="display: block; margin: 0 auto;" src="/dist/images/speakers/jason.jpg" alt=" Jason Cheng" class="avatar"><div class="speaker"><h6>rabbitMQ 與 Node.js 實戰應用</h6><p>by Jason Cheng</p><a href="https://drive.google.com/file/d/0BxeWrPY43fUVQ0cyT1plWF85cGM/view?usp=sharing" target="_blank" class="label label-info">Slide</a><a href="https://youtu.be/9LLeZVCKf1c?list=PL8dIIwCMF-SNmECoq8sF4onoxMqhRz9WT" target="_blank" class="label label-danger">Youtube</a></div></td></tr><tr><td>15:20<br>|<br>15:40</td><td colspan="2" class="break">休息</td></tr><tr><td>15:40<br>|<br>16:20</td><td aria-label="你可能從來沒想過該怎麼自幹一個 Google Docs，更不敢想怎麼用 JavaScript 做一個跟 MS Office Word 一樣強大的 WYSIWYG 編輯器。明明 Google 和微軟證明了，瀏覽器裡的線上文件編輯器可以如此強大，但我們自己搞了半天的 ContentEditable，為什麼就不能更接近 Google Docs 的表現呢？親愛的，讓我們來一炮吧！解開世界前兩大線上文件編輯器的神秘三角地帶！" class="colspan hint--top hint--large"><img style="display: block; margin: 0 auto;" src="/dist/images/speakers/fred.jpg" alt="Fred Chien" class="avatar"><div class="speaker"><h6>親愛的，我們來土炮一個 Google Docs 吧！</h6><p>by Fred Chien</p><a href="https://drive.google.com/a/jsdc.tw/file/d/0B0gjaMGkhBWHZWdLWC1ONHR4RGs/view?usp=sharing" target="_blank" class="label label-info">Slide</a><a href="https://youtu.be/xRezT4YZ6PU?list=PL8dIIwCMF-SNmECoq8sF4onoxMqhRz9WT" target="_blank" class="label label-danger">Youtube</a></div></td><td aria-label="Vue.js因為其靈活開放的特性， 在今年受到了極大的矚目，然市面使用 Vue.js 開發的產品仍是少數。本次將分享如何使用 Vue.js + Vuex，並整合 Node.js，打造具資料視覺化功能的服務 dashboard" class="colspan hint--top hint--large aaa"><img style="display: block; margin: 0 auto;" src="/dist/images/speakers/cyril.jpg" alt="Cyril Yu" class="avatar"><div class="speaker"><h6>Vue.js 實戰分享 - 使用 Vue.js 打造產品服務的 dashboard</h6><p>by Cyril Yu</p><a href="http://slides.com/cyrilyu/jsdc2016#/" target="_blank" class="label label-info">Slide</a><a href="https://youtu.be/P0maNnU62mI?list=PL8dIIwCMF-SNmECoq8sF4onoxMqhRz9WT" target="_blank" class="label label-danger">Youtube</a></div></td></tr><tr><td>16:20<br>|<br>16:40</td><td colspan="2" class="break">休息</td></tr><tr><td>16:40<br>|<br>17:20</td><td colspan="2" aria-label="" class="colspan hint--top hint--large"><img src="/dist/images/jsdc-mascot-150.jpg" alt="" class="avatar"><div class="speaker"><h6>Lightning Talk</h6><a href="https://youtu.be/9Lfl6MBGtwg?list=PL8dIIwCMF-SNmECoq8sF4onoxMqhRz9WT" target="_blank" class="label label-danger">Youtube</a></div></td></tr><tr><td>17:20<br>|<br>18:00</td><td colspan="2" class="break">散場</td></tr></tbody></table></div></div></div></div></section><script>(function($) {
$('#nav-agenda').addClass('active');
if ($('#agenda-list').length){
$(document).scroll(function () {
var dist = $('#agenda-list').offset().top;
var y = $(this).scrollTop();
if (y > dist) {
$('.navbar').addClass('block');
} else {
$('.navbar').removeClass('block');
}
});
}
})(jQuery);</script></main><footer id="footer"><div class="container"><div class="row"><div class="col-xs-12 elevator-area"><div id="elevator-btn"><a href="#"><i class="fa fa-angle-up fa-2x"></i>Top</a></div></div><div class="col-xs-12"><p class="copyright text-center">© 2016<a href="http://jsdc.tw" target="_blank">JSDC.tw</a></p></div></div></div></footer><script>var qs, js, q, s, d = document,
gi = d.getElementById,
ce = d.createElement,
gt = d.getElementsByTagName,
id = 'type_form',
b = 'https://s3-eu-west-1.amazonaws.com/share.typeform.com/';
if (!gi.call(d, id)) {
js = ce.call(d, 'script');
js.id = id;
js.src = b + 'share.js';
q = gt.call(d, 'script')[0];
q.parentNode.insertBefore(js, q)
}
id = id + '_';
if (!gi.call(d, id)) {
qs = ce.call(d, 'link');
qs.rel = 'stylesheet';
qs.id = id;
qs.href = b + 'share-button.css';
s = gt.call(d, 'head')[0];
s.appendChild(qs, s)
}</script></body></html>