[ Web Proxy ]

Viewing: https://raw.githubusercontent.com/ouyangcode/fe/master/index.html

[Back] [Original]

By Phodal (Follow Me: SegmentFault)

GitHub Issues

Pull Request

- JavaScript
- - jQuery,
  - Backbone.js
  - Angular
  - React
  - Vue.js
SEO
- URL
  - RESTful API URL
  - URL
  - URL
  - URL
  - URL
- - TTFB
- - API
- Web
- React Native
- NativeScript
- Weex
API
- API
- API
- API
  - API
  - API

Phodal Huang ThoughtWorks GitHub

GrowthSteppingLanEchoesworks Growth APP Store Android

GitHub Growth: GitHub

Packt Learning IoTSmart IoTAngular 2 SericesGetting started with Angular

hackinghttps://www.phodal.com/

http://weibo.com/phodal
GitHub https://github.com/phodal
https://www.zhihu.com/people/phodal
SegmentFaulthttps://segmentfault.com/u/phodal

GitHub Issues

Pull Request

:

phodal-weixin

[phodal-weixin]phodal-weixin

:

[]

2016 Angular 2

Angular Service Getting started with Angular - 2nd Edition

2015 Angular Angualr 2 Beta Angular @phodal Angular 2 2016

Angular 2 Beta RC 5 API Angular 2

2017 2017 Angular 4

2017

Phodals StuQ

[Phodals StuQ ]Phodals StuQ

SpringJSPjQueryAPIHTML / CSSCSSJavaScript

DOMjQueryDOM

AjaxJSONRESTfulFetch APIReactiveX

HTMLDIV / CSSSCSS / SASSNode.js

JavaScriptCoffeeScriptJavaScriptES6TypeScriptWebPackCSS3MVC / MVVM / MV* HTTP BasicJWT

gulpgruntnpmJSLintCSS LintTSLintCode ClimateBad Smell

IE6ChromeIEFirefoxSafariAndroidWindows PhoneIE

CSS3JavaScriptWebIconIconSVG SpriteCSS SpriteCSS Sprite

gitsvn 2016.07.31.zipWebpackBrowserifynpmbower

ConsoledebuggerAPIWiresharkCharlesChromeResponsive

UIMock

WebYahooYSlowGoogle PageSpeedGZipMinify JSNetWorkChromeTimelineProfile

UIFlexBoxWireframe

SEO

SitemapTitleDescriptionKeywordH2GoogleMicroData / MicroFormat

Bug GitHub

Phodal @PasteRight

18 Kernel Hacker C++

IDE Amazing Man

100 Web

PS

px px

15.4

F5 Command + R

FE Workflow

[FE Workflow]FE Workflow

px px

Web

Idea

A A B B B

[]

19

[]

ES6 TypeScript TypeScript

DSL

Mustache Java Mustache HTML Mustache.js HTML React JSX Node.js React JSX HTML

[]

CSSJavaScript HTML

Google Google Google App Engine

Django GAE

[Django GAE]Django GAE

CSS3

SAE SAE

Copy/Paste from Cookbook

Copy/Paste from StackOverflow Copy/Paste from Cookbook

CSS Cookbook
JavaScript Cookbook
jQuery Cookbook

Adobe DreamWeaver Chrome UI

DreamWeaver CSS

JavaScript DreamWeaver Aptana minify

Intellij IDEA WebStorm Vim Sublime text

Chrome IE Bug CSS3HTML 5 IE CSS Hack

Chrome ConsoleDevice Toolbar PostmanPageSpeed

jQuery

jQuery jQuery Google README

IE IE IETester

Node.jsBackboneReactAngular 3.0

2418 3-6

2016 JavaScript

JavaScript JavaScript

JavaScript

CoffeeScriptTypeScriptClojureScriptDartES6 JavaScript ES6 JavaScript JavaScript ES5 EcmaScritp 5

JavaScript

[JavaScript]JavaScript

JavaScript DOM API

Ajax JavaScript JavaScript Ajax

JavaScript

JavaScript Netscape Brendan Eich 10 Netscape Sun Java LiveScript JavaScript

JavaScript JScript IE 3.0 IE Windows Netscape JavaScript JavaScript ECMAScriptJavaScript ECMAScript

JavaScript ECMA TC391 DOMDocument Object Model DOM W3C XML DOM DOMAjax jQuery JavaScript

Web

JavaScript

klass
Require.js
tcomb
Promise callback hell Bluebird

ES6+

JavaScript ES 6

JavaScript ECMAScript 5.0 ECMAScript 6ECMA 2016 ECMAScript ECMAScript 2016 ES 6 ES 2015

option merge
`$ {NAME}` +
this
Promises
JavaScript

ChromeEdgeSafariFirefox ES6 90% ES6 Babel ES5

ES2016+ ES.next

TypeScript

TypeScript

TypeScript ES6 ES6 TypeScript TypeScript Angular 2 TypeScript TypeScript

TypeScript JavaScript JavaScript TypeScript JavaScript JavaScriptTypeScriptTypeScript 2012 10 2010

ES6 TypeScript Type + Script ES6 API interface

TypeScript ECMAScript

APP

package.json Ionic 2.0.0

SPA Angular 2ReactVue.jsEmber.js

A B B A

Java API Spring Boot Java

Python Web Django

JavaScript

Growth Web

[]

PRI

[PRI]PRI

Ruby On Rails Ruby On Rails Sinatra

A Z A Bug**Z A

jQuery,

jQuery HTML JavaScript $('elment').doSomething() jQuery API

jQuery 2017 jQuery jQuery jQuery

MV*

jQuery CMS

Web JavaScript jQuery

Backbone.js

Ajax Web APP jQuery Mobile BackboneAngular

Backbone.js MVC(models)(collections)(views)

Backbone Require.js jQuery DOM Mustache

Backbone.js Model View DOM

Angular

Backbone Angular MVC

Angular.js

Angular.js Ionic Angular.js Ionic

Angular.js DOM WebView

2016 Angular Angular 2 Zone.js

Angular 2 2

React

Backbone Angular.js DOM DOM DOM Virtual DOM React

DOM DOM DOM Virtual DOM DOM DIFF DOM Virtual DOM UI

DOM React UI HTML

React JSX JS ES 6 React View DOM web API React

React React NativeReact VR React React VR

Angular 2 React Vue.js

Vue.js

Vue.js MVVM ViewModel Vue.js

Vue.js HTML CSS Vue.js Virtual DOMReactive

Angular React Vue.js

Vue.js React Vuex VueRouter awesome-vue

Vue.js jQuery

React Vue.js Native Weex

ReactiveEmber.jsMithril.js Vue.js GitHub (https://github.com/phodal/fe) Pull Request

ReactJSXVirtual Dom React ReduxES6

MV**All in JS= +

Debug std::count console.log JavaScript

HTMLCSS JavaScript API iOS

Debug

Console IDE

Debug Debug IDE IDE IDE

printf SD SD SD SD

Web Intellij Idea evaluate expression

ChromeSafari

Web

Network
URL Nginx

Chrome

Windows / Linux Ctrl + Shift + I
Mac OS Comand + Option + I

[]

DOM DOM

CSS HTML
CSS HTML
1~3

DOM CSS Inspect Windows / Linux Shift + Ctrl + CMac OS Command + Shift + C

[]

Elements Elements Elements HTML

HTMLStylesComputedEvent Listeners CSS

!important

JavaScript Chrome

Chrome

[Chrome ]Chrome

Sources HTMLCSSJavaScript html

Console

Mobile First Bug

User Agent

Bug Android

media query 1024

User AgentCPU User Agent

Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Mobile Safari/537.36

Android iOS

Chrome

[Chrome ]Chrome

iPhone 4G2G

Device Inspect

Android Bug

UI Android Bug

Android

chrome://inspect/ Chrome

https://phodal.github.io/motree/

Inspect Devices

[Inspect Devices]Inspect Devices

Safari Safari Safari Bug

Safari Simulator

[Safari Simulator]Safari Simulator

Web

Chrome Network

Debug

[Debug]Debug

URL

[]

Chrome GitHub https://github.com/phodal/toolbox

Postman API

Postman

[Postman]Postman

Google Page Speed

PageSpeed

[PageSpeed ]PageSpeed

Chrome

Chrome ApplicationChrome Local StorageCookiesSession StorageIndexedDBWeb SQL Google PWA ManifestService Workers

SegmentFault

Kernel Hacker IE

JavaScriptHTMLCSS

Output is Input

Output is Input

Output is input

[Output is input]Output is input

A B

Idea GitHub TODO Lists

Todo Lists DEMO

API Roadmap Release

hello,world

Angular angular-seed React create-react-app

hello,world GitHub xxx starter kit React Starter Kit GitHub react-slingshot

[react-starter-kit.jpg]react-starter-kit.jpg

ReactReactd RouterReduxBabelJestWebPack hello,world

API Node.jsFlaskDjango BackboneAngular 1React APP Ionic 1 React Native

GET POST

API

React JSX ES6 Babel Webpack Redux React-Router React

JSX WebPack / Babel ES6 Redux React-Router

Web

starter kit starter kit

mocoMockServer

Idea
Idea

React

APP

JSON API Java JSP React Angular React

TDD (Test-driven development) TDD BDD (Behavior-driven development) BDD DDD (Domain-driven design) DDD HDDHype-driven Development

API APP API APP

LocalStorage
RESTful API
API

PHP Java ModelAndView

MVC View ifelseequal

Popup JavaScript jQuery

APP

Model Controller

[{
    "content": "",
    "date": "2017-03-04",
    "description": "\r\n\r\n React ",
    "id": 1,
    "slug": "iamafe-frontend-backend",
    "title": ":  ",
    "user": ""
}]

API HTML date 2017-03-04 2017 3 4 moment

SEO

URL RESTful RESTful API API URL

2011 Search Engine Optimization

GoogleBing Google

SEO

Lean

[Lean]Lean

Web

HTML TitleURLKeywordsDescription
Google
HTML H1 H1 Title
nofollow
rel=canonical
rel=next rel=preve Prefetch

SEO HTML TitleURLKeywordsDescription

URL

URL

URL URL URL

ID /blog/123
URL
blog/ruhe-sheji-yige-gaozhilang-de-url
ID blog/2017/02/123
URL blog/how-to-design-a-high-quality-url URL URL howto-design-hight-quality-url

URL RESTful

RESTful API URL

RESTful API API URL RESTful API

	URL
GET	/blog	PS
GET	/blog/:id
PUT	/blog/:id
POST	/blog
DELETE	/blog/:id

blog/123 blog/58c286d7ac502e0062d7c84e ID CRUDID where id="123"

``where slug=how-to-design-a-high-quality-url

URL

URL

URL ID https://read.douban.com/column/5945187/ https://zhuanlan.zhihu.com/beafe

URL https://www.phodal.com/blog/use-jenkinsfile-blue-ocean-visualization-pipeline/Jenkins 2.0 Jenkinsfile Pipeline URL

Google jenkins 2.0 pipeline

[Google jenkins 2.0 pipeline]Google jenkins 2.0 pipeline

use-jenkinsfile-blue-ocean-visualization-pipeline URL /blog/123 jenkinsfile pipline

wo-de-zhiye-shi-qianduan-gongchenshi URL

URL

URL

RESTful

	URL
GET	/blog/:id/:blog-slug

URL StackOverflow Google URL questions/:question-id/:question-slug id slug

questions/20381976/rest-api-design-getting-a-resource-through-rest-with-different-parameters-but

question/:question-id questions/20381976 slug

URL URL ID

RESTful URL

URL

RESTful

/markets/3c/sj/meizu/meizu-mx5

URL

SEO Page Rank Page Rank Rank Rank

Rank
Rank

URL

RESTful API URL

http://www.xxx.com/search/?q={keyword}&page={page}&size={size}

Link Header API

100~150 URL

search/?minPrice=100&maxPrice=150&product=powerbank&location=shenzhen&page=1

URL

product/powerbank/?minPrice=100&maxPrice=150&location=shenzhen&location=shenzhen

URL Rank powerbank +

SEO SEO

URL powerbank/range-100-150-city-shenzhen/page-1100~150 (\S+)-range-(\d+)-(\d+)-city-(\S+)

SEO URL

[SEO URL]SEO URL

[]

Google 2.0 - Phodal | Phodal - A Growth Engineer HTML title

Phodals COM SEO

[Phodals COM SEO]Phodals COM SEO

- | - SegmentFault - - 2.0 -

Title

Google

Google Heat Map

[Google Heat Map]Google Heat Map

- Title

jQuery MobieBackbone Angular 2ReactVue 2

jQuery jQuery jQuery jQuery Mobile

jQuery Mobile Web Web UI Web

PS

HTML data-role jQuery Mobile headercontentfooter id

<div data-role="page" id="foo">
...
</div>

HTML href ID

<a href="#foo">foo</a>

HTML ID HTML

URL hash

jQuery
jQuery Ajax
Backbone Model
Mustache
Require.js
LocalStorage

Angular React Vue.js Vue RouterReact RouterAngular 2 RouterModule Vue React React UI Vue.js

DNS IP
IP HTTP HTTP
HTML

Python Web Django URLConf

url(r'^articles/2003/$', views.special_case_2003),

Laravel

Route::get('posts/{post}/comments/{comment}', function ($postId, $commentId) {
    //
});

URL

React Router

 <Route path="blog" component={BlogList} />
 <Route path="blog/:id" component={BlogDetail} />

blog BlogList

blog/fasfasf-asdfsafd BlogDetail id BlogDetail

Angular 2

{ path: 'blog',      component: BlogListComponent },
{ path: 'blog/:id',      component: BlogDetailComponent },

BlogDetailComponent path id BlogDetailComponent

Hash # Hash Bang #! # ued.party/#/blog blog/12 URL ued.party/#/blog/12
HTML 5 history API URL URL history pushState blog/12 URL ued.party/blog/12 URL

Router history API

blog/12 ID 12 loading

XMLHttpRequest Ajax Promise Fetch API Fetch API Promise Ajax

fetch(url).then(response => response.json())
  .then(data => console.log(data))
  .catch(e => console.log("Oops, error", e))

RxJS Model

null 54% 0.54

Web

HTTPS

Token Token JSON Web Token Token Basic BASE64 Token

Header Token Token 401 Token

UI

UI

<my-sizer [(size)]="fontSizePx"></my-sizer>

A B isLogined setLogin

Redux service settergetter service

Service

Web

Web

Web JavaScript

EventStorming.Graph TypeScript Model DDD

EventStorming

[EventStorming]EventStorming

EventBusiness Observable Observer

EB
Sticky

ID ID

N ID ID

token localstorage
JavaScript

key value localStorge setItem getItem JSON.stringify localStorage JSON.parse

LocalStorage

[LocalStorage ]LocalStorage

IndexedDB

[]

localForgeIndexedDBWebSQLlocalStorage store.js

Token

Model Model toJSON JSON

A Full Name B mobile

A

Web

Web 256 M VPS

Web Amazon AWS

DNS

Web

AWS Chrome

Chrome Network Waterfall

Chrome

[Chrome ]Chrome

Waiting (TTFB)TTFBTime To First Byte
Content Download

TTFB TTFB

TTFB GZIP TTFB
New Relic

TTFB

DNS DNS

vs www.phodal.com

[ vs www.phodal.com] vs www.phodal.com

traceroute

traceroute

[traceroute ]traceroute

DNSPod DNS

APM NewRelic Python 2.6

NewRelic Result

[NewRelic Result]NewRelic Result

500+ ms 200ms+

PageSpeed YSlow Nginx JS CSS

CSSJavaScript
JPG WEBP
HTML HTML
HTML

CSS JS Nginx Pagespeed HTTP

Last-Modified / Etag / Expires / Cache-Control

HTML Squid Varnish

JavaScript LocalStorage

Web

Web

Web
Web

API

API

inline css Google AMP

~~

Web Backbone React

Web
APP

APP HTML + JavaScript Web

Android iOS JavaScript APP

[]

Web

Web

Web UI

Android/iOS

WebHTMLCSSJavaScriptiPhone()

PhoneGap/Cordova Web APP Web Ionic 400 Ionic Ionic

HTML + JavaScript Web App Native UI Ionic Ionic UI ngCordova

WebViewPS Android PSAndroid 4.4 SVG
JavaScript
DOM

WebView CrossWalk React Native NativeScript

Web Web Angular 2 Angular 2React + Cordova Cordova + Vue
Web React Native
iOS Android Android

Ionic Ionic Ionic Ionic UI Ionic ~~

APP Web PWA Web React Native

Full Platform

[Full Platform]Full Platform

React Native

React Native JavaScript :

write once, run anywhere

Cordova JavaScript WebView React Native JavaScriptCore JavaScript Android JS

Cordova WebView React Native Cordova WebView JavaScript

Webkit Architecture

[Webkit Architecture]Webkit Architecture

boilerplate

GET ES 6ReactJSX React.js

React Native

React Native js jsbundle base64 js ~~

NativeScript

Ionic 2 React Native NativeScript

UI React Native NativeScript

Weex

Weex

API

API API

A B

demo API API

API

API
API
API
API

API APIAPI API API API

API

API

Java Mobile First JavaScriptDevOps API

RePractise Mobile First API

REST API Model

API API

API

[ API ] API

API Web
API API

BFFbackend for frontend MODEL API

BFF

[BFF ]BFF

API JavaScript API

+ BFF

[ + BFF ] + BFF

RESTful API API API

API

API

[]

API API header

API

API

API

API UX

API API Unix Unix

API

API

API

API REST API

API

API Mock Mock Server

API
Mock Server

JavaDocJSDoc API

JSDoc

[JSDoc]JSDoc

API Swagger YAML RESTful API

swagger: "2.0"

info:
  version: 1.0.0
  title: Simple API
  description: A simple API to learn how to write OpenAPI Specification

schemes:
  - https
host: simple.api
basePath: /openapi101

paths: {}

API Mock Server Swagger API Spec

API API

API Mock Server Mock API

API

2011 Martin Folwer

[]

API API URL
Mock Server Moco
Mock Server

Moco Moscow API

[
    {
        "description": "should_response_text_foo",
        "request": {
          "method": "GET",
          "uri": "/property"
        },
        "response": {
            "status": 401,
            "json": {
                "message": "Full authentication is required to access this resource"
            }
        }
    }
]

UI Mock Server Selenium

[-]-

API

node-http-proxy

[]

if(response && response.data && response.data.length > 0){}

null React PropTypes TypeScript

DDM Redux Adapter

API API

API

[API ]API

API

hello, world

hello, world

GitHub
Demo Demo Push

Angular 4 React
Gulp Grunt NPM
Toggle

~

[]

hello, world package.jsonindex.html karma.js webpack.jstsconfig.json

CLI React create-react-app react

GitHub GitHub

workflow

Web RePractise Web

Web

[Web ]Web

GitHub 30

[]

PRI

[PRI]PRI

hello, world

AngularVueReact ES6TypeScript JavaScript webpackrolluptsc

Webpack

[Webpack ]Webpack

MockServer GulpGruntNpm

[]

API /

Stepping

[Stepping]Stepping

domain: 
  aggregate: 
    event: 
    event: 
    event: 
    event: 
    command:

[]

Swagger Mock API

UXUX

Tag

header footer content

Growth

[Growth ]Growth

content

CSSCSS

Mock Server Mockup

GET/POST/PUT RESTful

header token
URL https://www.phodal.com/blog/xx-slug

token URL

401 404

minify

Bug

bug

TC39 JavaScript TC39

Web Proxy Viewer | New URL | Original Page