brock whitten goto @sintaxi may 2, 2017 chicago...$ cat ~/.netrc machine api.heroku.com login...

Brock Whitten @sintaxi

GOTO May 2, 2017 Chicago

NPM@3.3.3

WANTED:

FOCUS

SURGE.SH

PUBLISH to the

browser

abandon the

browser

Content Stream 1.

Content Stream Session MANAGEMENT

1. 2.

Content Stream Session MANAGEMENT Payments

1. 2. 3.

Content Stream Session MANAGEMENT Payments User Interface

1. 2. 3. 4.

Content Stream Session MANAGEMENT Payments User Interface Gotchas

1. 2. 3. 4. 5.

CONTENT STREAMS

GOTO IN

“”

DEMO TIME

Session Management

GOTO IN

$ localstorage

$ localstorage

localstorage: command not found

$ cat ~/.netrc

$ cat ~/.netrc

machine api.heroku.com login brock@surge.sh password abcd1ab1–1234–12ab-a1ab-1abc1234a123

machine surge.sh login brock@surge.sh password 11ab1ab1–11ab-1234-b1ab-1abc0123b123

$ cat ~/.netrc

machine api.heroku.com login brock@surge.sh password abcd1ab1–1234–12ab-a1ab-1abc1234a123

machine surge.sh login brock@surge.sh password 11ab1ab1–11ab-1234-b1ab-1abc0123b123

$ npm install --save netrc

TakinG PAYMENTS!

GOTO IN

PLAN B

var open = require('opn')

opn('http://token:abcd@surge.sh')

var open = require('opn')

opn('http://token:abcd@surge.sh')

// Not supported in Chrome or IE

PLAN A

ABANDONING THE BROWSER

$?

server

server

payment form

server

payment form

server

credit card info

payment form

server

credit card info

token

payment form

server

credit card info

token

token

payment form

server

credit card info

token

token

charge

payment form

server

credit card info

token

token

charge

payment form

GOTO IN

USE EXISTING TOOLS

COMMANDER TJ/COMMANDER.JS

YARGS BCOE/YARGS

OPTIMIST SUBSTACK/OPTMIST

MINIMIST SUBSTACK/MINIMIST

FORMS?

WHAT’S WEIRD?

“GOTCHA!”GOTO IN

SECURITY

IT’S ON THE BROWSER

IT’S ON THE DEVELOPER

CONSTRAINTS

$ npm install --save chalk

var chalk = require('chalk')

var chalk = require('chalk')

console.log(chalk.grey('Run'))

var chalk = require('chalk')

console.log(chalk.grey('Run ') + chalk.green('surge'))

var chalk = require('chalk')

console.log(chalk.grey('Run ') + chalk.green('surge'))

var chalk = require('chalk')

console.log(chalk.dim('Run ') + chalk.green('surge'))

MAKE CONSTRAINTS AN ADVANTAGE

STATUS CODES

$ npm install

npm info it worked if it ends with OK

yourcli@0.1.0 ├── parseurl@1.3.0 ├── envy-json@0.2.1 ├── commander@2.0.0 └── mime@1.2.11

npm info OK

PLATFORMS

var path = require('path')

exports.willAllow = function (project) { var projectPath = path.resolve(project) if (projectPath.split('/')) { return true } }

var path = require('path')

exports.willAllow = function (project) { var projectPath = path.resolve(project) if (projectPath.split('/')) { return true } }

var path = require('path')

exports.willAllow = function (project) { var projectPath = path.resolve(project) if (projectPath.split('/')) { return true } }

var path = require('path')

exports.willAllow = function (project) { var projectPath = path.resolve(project) if (projectPath.split('/')) { return true } }

var path = require('path')

exports.willAllow = function (project) { var projectPath = path.resolve(project) if (projectPath.split(path.sep)) { return true } }

var path = require('path')

exports.willAllow = function (project) { var projectPath = path.resolve(project) if (projectPath.split(path.sep)) { // ! return true } }

DESIGNERS & DEVELOPERS

WANTED:

FOCUS

$ npm install -g surge

Brock Whitten @sintaxi

GOTO May 2, 2017 Chicago