Yahoo Homepage

Yahoo News

Yahoo Sports

Y! Auction/Mall/Shop

Yahoo TV/Live

Yahoo Open Source

• React-Intl (i18n)

• Fluxible

• Atomic CSS

• AppDevKit

• YangMingShan

• TensorFlowOnSpark

• ...

But come with...

source: http://www.cna.com.tw/news/aipl/201611280152-1.aspx

Fake/Bad News

But come with...

Content farm

Your idea will be buried

We need a better solution to be outstanding

How to tell a great story

Data support

Can be understood in short time.

Great User Experience

台灣勞工大代誌

How to tell a great story

Data support

Can be understood in short time.

Great User Experience

with web tools

Data sourcing

Open Data

Data.gov.tw

Open Data

World Bank Open Data

Data Bank

Get your own data

reference: 無痛爬梳自己來，用 Google Spreadsheet 爬取網頁資料

Get your own data

Import.io

Get your own data

Data-Miner

Get your own data

Web Scraper

Get your own data

by your own parser

casperjs

cheerio

parse5

htmlparser2

jsdom

Headless Chromium

Manipulate DOM

Headless Browsing

PhantomJS

SlimerJS

Get your own data

by your own parser

Data Visualization

Why Data Visualization is important?

Google Data Studio

PlotDB

Tableau

CartoDB

geojson.io

geojson-topojson

Leaflet.js

HighCharts

D3.js

Data-Driven Documents

Demo

D3-based reusable chart library

NVD3.js

C3.js

D4.js

react-d3

There are more...

source: https://goo.gl/Ax5M82

Example: 用數據看台灣

Progressive Web App

What PWA want to do?

• Add to Home Screen
• App-like
• Offline support
• Push notification
• Splash Screen

Why we need PWA?

• Provide user a better experience on the web.
• Fast install.
• Reduce storage required
• More rapid updates.
• More users will come.
• It's a Win-win game.

source: https://www.youtube.com/watch?v=MyQ8mtR9WxI

Browser support...

Service Worker

• Javascript worker - can't manipulate DOM directly
• Intercept network request
• Promise
• IndexDB, Cache Storage

check your current service-worker:  chrome://serviceworker-internals

Google I/O 2016 Progressive Web App

GDG DevFest

TAIPEI 2016

Twitter Lite

• Instant access to Twitter

• Fast to install, space- and data-friendly

• One-tap access from your home screen

• Push Notifications

• Offline access

• Safe browsing

How they build Twitter Lite PWA

Voot 

(India's top video-on-demand products)

Results

• 80% reduction in page load time
• 39% increase in session time per user
• 19% reduction in bounce rate
• 77% increase in conversion from visitor to video viewer
• 15% increase in average daily video views per user

PWA.rocks

PWA resources

sw-precache

sw-toolbox

create-react-pwa

react-pwa-starterkit

Is service-worker ready?

sw-webpack-plugin

Offline Web Applications (udacity)