How to show your idea with web

Arvin Huang

NTOU CS, BS
NCKU CS, MS
Oath, Yahoo! Taiwan, F2E
Yahoo TV/Esports
Techbridge newsletter/blog

More than 1,000 employees

Oath APAC Dominator

Multinational software corporation in Taiwan

Yahoo Homepage

Yahoo News

Yahoo Sports

Yahoo Esports

Yahoo TV/Live

Y! Auction/Mall/Shop

Yahoo App/Mweb

Yahoo Open Source

React-i13n
React-Intl (i18n)
Fluxible
Atomic CSS
AppDevKit
YangMingShan
TensorFlowOnSpark
...

Slash

https://bit.ly/2BXCMFz

You can have a slash career easily

Web Apps

Mobile Apps

Desktop Apps

React + Redux

Web VR

IoT

Blockchain/ML

Img source: https://bit.ly/2H1Ey7Y

What's the power of web?

A better/easier way to show ideas

Easy to access

Not much burden

Spreading Fast

No app store, just browser.

One link, one click.

Never eat up the storage.

Easy to learn

Gradual learning curve.

But...there are tons of web tools and directions

What to do?

How to do?

Let me help you with that

Content

Productivity

Trending

User experience

Content

Productivity

Trending

PWA

(Progressive Web App)

AMP

(Accelerated Mobile Pages)

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

Service Worker

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

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

Browser support...

2017/05

2018/03

Instant access to Twitter
Fast to install, space- and data-friendly
One-tap access from your home screen
Push Notifications
Offline access
Safe browsing
20% decrease in bounce rate
Loads in under 3 seconds for repeat visits even on slow networks

How they build Twitter Lite PWA

Results

Page loading time from 11.91s -> 4.69s
90% smaller than native Android app

A Tinder Progressive Web App Performance Case Study

Results

Increased engagement led to a 97% increase in clickouts to hotel offers.
Users who go offline while browsing can continue to access the site and 67% continue to browse the site when they come back online.

Google I/O 2016 Progressive Web App

Google I/O 2018
May 8 - 10

PWA stats

PWA.rocks

PWA resources

Is service-worker ready?

sw-webpack-plugin

Offline Web Applications (udacity)

more tech details:

http://slides.com/arvinh/progressive-web-app

https://blog.techbridge.cc/2016/07/23/progressive-web-app/

WorkBox

create-react-app (built-in support)

Accelerated Mobile Pages

What AMP want to do?

Improve user engagement with fast, compelling experiences.

What's AMP

non-AMP

AMP

slow 3G

How AMP works

Cached by Google
- https://www.google.com/amp/s/tw.esports.yahoo.com/amphtml/karsa-首個-lpl-冠軍！rng-讓一追三逆轉勝-edg-114940207.html
All AMP js run asynchronously
Can't run 3rd party javascript
CSS inline & size-bound (50kb)

Normal site

AMP site

What AMP looks like


<ul id="amplist">
</ul>

<script>
var ampcomponent = new Array();
ampcomponent[0] = "amp-carousel";
ampcomponent[1] = "amp-img";
ampcomponent[2] = "amp-ad";
ampcomponent[3] = "amp-accordion";
$(document).ready(function(){
    var list = "";
    for(i=0; i<ampcomponent.length; i++){
        list +="<li>"+ampcomponent[i]+"</li>";
    }
    $("#amplist").append(list);
});
</script>

<amp-list width="auto"
  height="100"
  layout="fixed-height"
  src="https://ampexample.com/test.json"
  class="m1">
  <template type="amp-mustache"
    id="amp-template-id">
    <div>
      <a href="{{url}}">{{title}}</a>
    </div>
  </template>
</amp-list>

result:

Combine with lots of web components

AMP project

Case study: WIRED

Case study: Washington Post

Case study: Yahoo TW Auction

AMP stories

AMP resources

AMP project

AMP example

AMP Validator

AMP Validator extension

AMP Playground
AMP Start

AMP experiments

Better content for user

Content

Productivity

Trending

Data collection

Data visualization

Pure CSS Image

Data collection

Open Data

Data.gov.tw

Open Data

World Bank Open Data

Data Bank

Get your own data

I mport.io

Get your own data

listly

Get your own data

by your own parser

Manipulate DOM

Headless Browsing

PhantomJS

SlimerJS

source

Headless Chrome

Get your own data

API service

Get your own data

API service

Data visualization

Why Data Visualization is important?

It's all about insight

Why Data Visualization is important?

And it's appealing

Google Data Studio

Tableau

Vega-Lite

Plotly

Recharts

Vitory

HighCharts

Ant.design - G2

D3.js

Data-Driven Documents

another project by the same author:

Observable

D3-based reusable chart library

NVD3.js

C3.js

D4.js

geojson .io

geojson-topojson

There are more...

source: https://goo.gl/Ax5M82

It seems all about "chart"...

How to build a story like this?

Parallax Scrolling

scrollorama.js

skrollr.js

parallax.js

W3C

react-parallax

React

How TO - Parallax Scrolling

Story Maps

Example: 用數據看台灣

Example: 媒礦

Example: 颱風動態圖

Example: unfiltered.news

Example: Timeless NBA player

Could also be used for teaching

Or, just subscribe Techbridge Weekly

Some website you can follow

Pure CSS Image

Manipulating CSS is like...

No, CSS is awesome

You can draw everything you want with pure CSS.

Why would I do that?

Have a better control of CSS layout and style.
Training your ability to deconstruct modules.
Increase the ability of problem-solving.

Few tips

Template, Pre-processor

(Pug, SCSS, autoprefix)

// prefix
a {
    -webkit-border-radius: 5px;
            border-radius: 5px;
}

Few tips

Arrowplease & border

.shirt {
    border-bottom-right-radius: 100%;
    border-right: 3px solid #666;
    top: 25px;
    left: 0;
    position: absolute;
    background-color: white;
    width: 10px;
    height: 40px;
}