I built the [Vendia command-line interface](https://www.npmjs.com/package/@vendia/share-cli).

You can view the [source code here](https://www.npmjs.com/package/@vendia/share-cli/v/0.12.4?activeTab=code).

## About

- Automatic API documentation via source code
- Extendable CLI commands
- Cognito authentication
- Telemetry
- Binary packaging

## API

Interact with [Vendia](https://www.vendia.com/) from the comfort of your CLI.

See the [command line reference](https://www.vendia.com/docs/share/cli) to get started and the docs on using [Vendia](https://www.vendia.com/docs/share/).

## Table of Contents


<details>
<summary>Click to expand</summary>

- [Install](#install)
- [Top level commands](#top-level-commands)
- [All commands](#all-commands)
  - [share auth](#share-auth)
  - [share client](#share-client)
  - [share file](#share-file)
  - [share login](#share-login)
  - [share logout](#share-logout)
  - [share node](#share-node)
  - [share org](#share-org)
  - [share uni](#share-uni)

</details>


## Install

Install the CLI globally

```bash
npm install @vendia/share-cli -g
```

Or install locally without the `-g` global flag

```bash
npm install @vendia/share-cli
```

After installation the `share` binary will be available to use on the machine. 

Run `share --help` to display a list of available commands

```bash
share --help
```

## Top level commands

| Command | description  |
|:--------------------------- |:-----|
| [share auth](#share-auth) | Manage authorization & set current Vendia user  |
| [share client](#share-client) | Manage your local Vendia client  |
| [share file](#share-file) | Manage files in a Uni  |
| [share login](#share-login) | Login to Vendia user account  |
| [share logout](#share-logout) | Logout of Vendia user account  |
| [share node](#share-node) | Manage nodes in a Uni  |
| [share org](#share-org) | Manage your Organization (Enterprise only)  |
| [share uni](#share-uni) | Manage Uni operations  |

---

## All commands

### [share auth](https://docs.vendia.com/share/cli/commands/auth)

Manage authorization & set current Vendia user

| Sub command | description  |
|:--------------------------- |:-----|
| [`auth login`](https://docs.vendia.com/share/cli/commands/auth#auth-login) | Login to Vendia user account  |
| [`auth logout`](https://docs.vendia.com/share/cli/commands/auth#auth-logout) | Logout of Vendia user account  |
| [`auth role`](https://docs.vendia.com/share/cli/commands/auth#auth-role) | Manage roles for users  |
| [`auth role delete`](https://docs.vendia.com/share/cli/commands/auth#auth-role-delete) | Delete roles for users  |
| [`auth role get`](https://docs.vendia.com/share/cli/commands/auth#auth-role-get) | Get role information  |
| [`auth role list`](https://docs.vendia.com/share/cli/commands/auth#auth-role-list) | List roles for user  |
| [`auth role set`](https://docs.vendia.com/share/cli/commands/auth#auth-role-set) | Set Roles for user  |
| [`auth switch`](https://docs.vendia.com/share/cli/commands/auth#auth-switch) | Switch active Vendia account  |
| [`auth whoami`](https://docs.vendia.com/share/cli/commands/auth#auth-whoami) | Display active Vendia account  |


### [share client](https://docs.vendia.com/share/cli/commands/client)

Manage your local Vendia client

| Sub command | description  |
|:--------------------------- |:-----|
| [`client generate`](https://docs.vendia.com/share/cli/commands/client#client-generate) | Generate a custom client for your accessing your Uni's API.  |
| [`client pull`](https://docs.vendia.com/share/cli/commands/client#client-pull) | Writes your Uni's schema files to a local directory - needed in order to generate a custom client for your accessing your Uni's API.  |


### [share file](https://docs.vendia.com/share/cli/commands/file)

Manage files in a Uni

| Sub command | description  |
|:--------------------------- |:-----|
| [`file add`](https://docs.vendia.com/share/cli/commands/file#file-add) | Add a file  |
| [`file get`](https://docs.vendia.com/share/cli/commands/file#file-get) | Get a file  |
| [`file list`](https://docs.vendia.com/share/cli/commands/file#file-list) | List current files  |
| [`file remove`](https://docs.vendia.com/share/cli/commands/file#file-remove) | Remove a file  |
| [`file update`](https://docs.vendia.com/share/cli/commands/file#file-update) | Update a file  |


### [share login](https://docs.vendia.com/share/cli/commands/login)

Login to Vendia user account

### [share logout](https://docs.vendia.com/share/cli/commands/logout)

Logout of Vendia user account

### [share node](https://docs.vendia.com/share/cli/commands/node)

Manage nodes in a Uni

| Sub command | description  |
|:--------------------------- |:-----|
| [`node add-api-key`](https://docs.vendia.com/share/cli/commands/node#node-add-api-key) | Add an API Key  |
| [`node add-jwt-auth`](https://docs.vendia.com/share/cli/commands/node#node-add-jwt-auth) | Add a custom JWT Authentication Provider to a Node  |
| [`node get`](https://docs.vendia.com/share/cli/commands/node#node-get) | Get node configuration  |
| [`node grant-access`](https://docs.vendia.com/share/cli/commands/node#node-grant-access) | Grant user access to a Node  |
| [`node remove-jwt-auth`](https://docs.vendia.com/share/cli/commands/node#node-remove-jwt-auth) | Remove a custom JWT Authentication Provider from a Node  |
| [`node revoke-access`](https://docs.vendia.com/share/cli/commands/node#node-revoke-access) | Revoke a user's access to a Node  |
| [`node schema`](https://docs.vendia.com/share/cli/commands/node#node-schema) | Fetch a Node's GraphQL Schema  |
| [`node sharing-policy`](https://docs.vendia.com/share/cli/commands/node#node-sharing-policy) | Manage sharing policies for a node  |
| [`node update`](https://docs.vendia.com/share/cli/commands/node#node-update) | Update node configuration  |


### [share org](https://docs.vendia.com/share/cli/commands/org)

Manage your Organization (Enterprise only)

| Sub command | description  |
|:--------------------------- |:-----|
| [`org get`](https://docs.vendia.com/share/cli/commands/org#org-get) | Get your Organization (Enterprise only)  |
| [`org list-users`](https://docs.vendia.com/share/cli/commands/org#org-list-users) | List Org Users (Enterprise only)  |


### [share uni](https://docs.vendia.com/share/cli/commands/uni)

Manage Uni operations

| Sub command | description  |
|:--------------------------- |:-----|
| [`uni create`](https://docs.vendia.com/share/cli/commands/uni#uni-create) | Create a new uni  |
| [`uni delete`](https://docs.vendia.com/share/cli/commands/uni#uni-delete) | Permanently delete a uni  |
| [`uni evolve`](https://docs.vendia.com/share/cli/commands/uni#uni-evolve) | Evolve the schema for a Uni  |
| [`uni get`](https://docs.vendia.com/share/cli/commands/uni#uni-get) | Get information about a given uni  |
| [`uni invite`](https://docs.vendia.com/share/cli/commands/uni#uni-invite) | Invite a new node to join the Uni  |
| [`uni join`](https://docs.vendia.com/share/cli/commands/uni#uni-join) | Join an existing Uni  |
| [`uni list`](https://docs.vendia.com/share/cli/commands/uni#uni-list) | Lists all unis in your account  |
| [`uni open`](https://docs.vendia.com/share/cli/commands/uni#uni-open) | Open a Uni in the vendia dev console  |
| [`uni reset`](https://docs.vendia.com/share/cli/commands/uni#uni-reset) | Resets Uni to it's original state  |

Vendia CLI

[share auth](https://docs.vendia.com/share/cli/commands/auth)

[share client](https://docs.vendia.com/share/cli/commands/client)

[share file](https://docs.vendia.com/share/cli/commands/file)

[share login](https://docs.vendia.com/share/cli/commands/login)

[share logout](https://docs.vendia.com/share/cli/commands/logout)

[share node](https://docs.vendia.com/share/cli/commands/node)

[share org](https://docs.vendia.com/share/cli/commands/org)

[share uni](https://docs.vendia.com/share/cli/commands/uni)


Vendia's website next.js site

## Demo links

- v-alpha https://vendia-site-demo-v-alpha.netlify.app 😅 
- v0 https://vendia-site-demo-v0.netlify.app
- v1 https://vendia-site-demo-v1.netlify.app
- v2 https://vendia-site-demo-v2.netlify.app

## About

Over the course of several years I rebuilt Vendia's site.

It was a next.js site and was super fast. See [demo links](https://vendia-site-demo-v2.netlify.app).

Some features it included

- Markdown driven content backed by git version control
- CMS editing experience with live previews
- Full text search with serverless setup
- Auto generated product docs from source code
- Custom Landing pages wired up to HubSpot
- Automatic image optimization pipeline

Vendia Site


[Netlify Build Plugins](https://github.com/netlify/build/) are a layer on top of Netlify's CI pipeline that adds a pluggable programmatic interface for users to extend to fit any use case.

- [Background & vision](#project-background)
- [Build Plugin Spec](#netlify-build-plugins-spec)
- [Build Plugin API Design](#plugin-api-design)

## Launch video

<iframe width="720" height="315" src="https://www.youtube.com/embed/4m6Hi4_qEVE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

---

## Project background

Users of Netlify's build system, including myself, have the following questions:

1. [How can I make things faster?](#1-how-can-i-make-things-faster)
2. [How can I save on cost?](#2-how-can-i-save-on-cost)
3. [How can I streamline workflows, developer productivity & time to market?](#3-how-can-i-streamline-workflows-developer-productivity--time-to-market)
4. [How can we improve product quality?](#4-how-can-we-improve-product-quality)
5. [How can we ensure compliance?](#5-how-can-we-ensure-compliance)

At Netlify, we are striving to answer these questions & provide a superior developer experience around the solutions we bring to the market. Netlify build plugins are no exception and a core component of the overall product experience we provide to our users.

Let's explore these key questions in our customer's minds & see how build plugins can be used to address these critical areas.


### 1. How can I make things faster?

Making builds faster is top of mind.

Using a smart build plugin, you could avoid expensive time-consuming build processes such as optimizing the same images every build, avoiding long-running builds if relevant files haven't changed, or running incremental builds.

**Some plugin examples:**

- **Gatsby cache plugin** - speed up gatsby builds via intelligent caching
- **Cypress cache plugin** - Only running cypress tests if src/route hashes change
- **Ignore site build scripts** - if only serverless functions change
- Ignore site build if source files we change about, e.g., markdown/src directory's haven't changed
- **Short circuit** build process if external content from third-party CMS hasn't changed
- Optimize only new images not found in the previous build cache.
- Only build relevant subdirectories that have changed & restore the rest of the site from the last build cache.
- Aggressively cache dependencies for faster boot-up times.

### 2. How can I save on cost?

As we begin to package & charge for build minutes, the cost is at the forefront of the developer's consideration when choosing a platform.

Any tools we can provide to allow users to glean insights on usage & optimize costs are going to be a big win for transparency and the overall developer experience.

Cost optimization examples are very similar to the `How can I make things faster?` section.

**Some plugin examples:**

- NoOp component library/storybook builds if component src files haven't changed. Save on build minutes
- Automatically disable builds during specific times of the day.

### 3. How can I streamline workflows, developer productivity & time to market?

Setting up new projects & build tools is no easy feat. The amount of complexity that comes with setting up a production build environment is non-trivial & typically replicated over and over again for projects.

How can we streamline this flow & make it easy for companies to standardize their projects & CI flows without recreating the wheel each time?

How can we scale processes across a growing organization?

Build plugins are one way.

By design, build plugins are meant to be shared. This means a couple of things.

First, we can begin abstracting common build tasks up the stack out of specific static site generator tools. This allows for plugins to be used in any type of project regardless of the frontend framework or static site generator used.

Second, because these are dependencies that can be shared across projects from a centralized location, this allows organizations to begin standardizing their deployment flows.

**Benefits that fall out of standardizing these flows include:**

1. Better security practices
- Increased compliance & accessibility
- Enforcing performance budgets
- Less time onboarding new developers
- Lower project maintenance
- Easier project scaffolding
- and ultimately a faster time to market

**Some plugin examples:**

- **Company XYZ standards plugin** - For example, Unilever creates a plugin that encompasses performance, accessibility & security requirements for all their web properties. This plugin uses various performance + accessibility regression testing tools and scans dependencies for critical vulnerabilities. This plugin also sends back build metrics to a centralized logging tool for further BI processing. This plugin can be installed as a one-liner in all Netlify projects for the org.
- **A component tracking plugin** -  This plugin scans the src code for components used from a component library & tracks which products are using which components, their versions, & other metadata. This helps inform the component library team what teams they need to coordinate with to test & release changes across the organization safely.
- **"Analytics assurance plugin"** - This plugin scans built output and verifies that every page on the site includes their google analytics tracking code & that the code is not malformed.
- **"SEO audit" plugin.**  - This plugin scans built a site to ensure all pages have required meta tags, properly formatted schema tags & social open graph tags. It also verifies the validity of the sitemap and submits the new sitemap to google webmaster tools when a new page is added to ensure a hasty indexation time.

### 4. How can we improve product quality?

Whether a bug in the code, an issue with an older browser, a missing dependency in a serverless function, or performance degradation, shipping regressions is never a good time.

How can we improve & help users ensure the quality of their projects to guard against these regressions?

**Some plugin examples:**

- **404 no more plugin.** - guards against pages being removed & not having a proper redirect setup, eliminating accidental 404s.
- **Lighthouse performance** testing to guard against performance degradation.
- **A text linting plugin** - This plugin would scan the built output of the site for common misspellings & brand keywords that need to be consistent across the product & cancel build or report these.
- **A sauce labs plugin** - Automatically run deploy previews their every known browser to verify your app works consistently across all browsers you support
- **"Self-healing" deploy plugins.** These plugins would detect a regression in a postDeployment hook and automatically report the issue & rollback the regression to a previously verified deployment.
-  **"Canary deployments" plugin** - These plugins can use the A/B routing tool to gradually route traffic to the newly deployed version while "retiring" the previously deployed app if no error threshold is passed

### 5. How can we ensure compliance?

Compliance is often overlooked at the offset of smaller projects but becomes increasingly important as a company matures until it becomes non-negotiable in larger enterprises.

How can we provide our larger enterprise customers the security features they need to fall within compliance standards?

**Some plugin examples:**

- "CSP (Content security policy) audit plugin". This plugin checks the content security policy of the site & warns + enforces a security policy to prevent cross script scripting attacks
- "Third-party script + GDPR auditor plugin". This plugin scans the site for any third party script tags included, loads the page & reports the find output of scripts loaded on the page, the cookies/storage they produce & report + track them for the user. These values are increasingly crucial with GPDR & cookie consent laws.
- As previously mentioned a dependency scanner plugin to ensure no compromised dependencies are present.
- "Ingress / Egress Rules" plugin - This plugin ensures that any HTTP calls during the build process are to approved endpoints & not to malicious third-parties leaking secrets etc.
- **"XSS payload injection plugin".** - This plugin runs post-deployment & hammers form inputs with common XSS payloads to verify inputs & requests are properly sanitized.

[Additional plugin use cases and examples can be found here](https://github.com/netlify/build/issues/709)

---

## Netlify Build plugins spec

Below is the original spec of build plugins.

### Design principles

- Stellar DX is paramount
- Lightweight core
- Extensible
- Sane defaults that are configurable

### Plugins

Plugins are a way for users to extend the functionality of the Netlify Platform.

**Plugins have the ability to:**

- Alter the behavior of the flow of logic in the Netlify Build. This includes running custom functionality before, after, and during a given point in the build lifecycle.
- Override default behavior of the build lifecycle.
- Provision third party resources.
- Extend the build lifecycle with their own hooks.

### Plugins Must

- Be able to hook into the various stages of the build lifecycle
- Be able to create their own lifecycle stages or "hooks"
- Be able to add CLI commands
- Be able to provision (create/update/delete) resources
- Be able to return output data for other plugins to use
- Provide utilities via core API to allow for easy manipulation of common build activities

### Lifecycle

Plugins can listen to core lifecycle events that happen during different Netlify activities, for example during the build, while Netlify dev is running, or during a Netlify deployment.

### Extensibility

The lifecycle is extendable; plugins can define their own lifecycle events that other plugins and listen to and react to. For example, the `mongoDb` plugin can expose an `afterDatabaseCreated` hook that other plugins can run functionality from.

### Logging

All plugin logs should flow through a structured logging system.

Every console.log/warn/etc. should be grouped for the UI + plugins to consume.

Logging should be as secure as possible without sacrificing performance. This means automatically redacting known `env` variables from plugins trying to console.log them out. Plugins installed should be vetted by users to ensure they are not installing malware.

### Outputs & Manifest

Plugins can return outputs that other plugins may leverage.

This means a mongoDB provisioning plugin might pass a connection string back as an output that a "mongo crud function" plugin can reference  

This means the order is essential in how plugins are defined in the configuration, and a dependency graph of outputs is required to ensure things run in the correct order.

#### Manifest

The manifest is the aggregated list of all outputs returned from the build.

This includes things like `liveSiteUrl`, deployId, plugin outputs, function names, function URLs, etc.

This manifest file is written to `.netlify/manifest.json`

### CLI commands

Plugins can expose additional commands to the Netlify CLI.

For example the `mongoDb` plugin could expose a `netlify mongo:delete` command that tears down the given resource.

---

## Plugin API design

Below is the original plugin API design.

1. Plugins are simple objects that expose hooks into lifecycle methods
2. Each lifecycle method gets a standard `pluginApi` input.
3. Plugins get included in `netlify.yml`

**Example build plugin:**

```js
module.exports = function myBuildPlugin(pluginConfig) {
  return {
    onInit: (pluginApi) => { /* do stuff on onInit */ },
    onPreBuild: (pluginApi) => { /* do stuff on onPreBuild */ },
    onPostBuild: (pluginApi) => { /* do stuff on onPostBuild*/ },
    onPostDeploy: (pluginApi) => { /* do stuff on onPostDeploy */ },
    onSuccess: (pluginApi) => { /* do stuff on onSuccess */ },
    onError: (pluginApi) => { /* do stuff on onError*/ },
  }
}
```

**The `pluginApi` definition** is listed below

```js
module.exports = function myBuildPlugin(pluginConfig) {
  return {
    /**
     * Plugin API
     * @param  {object} netlifyConfig   - Resolved value of Netlify configuration file
     * @param  {object} pluginConfig    - Initial plugin configuration
     * @param  {object} utils           - set of utility functions for working with Netlify
     * @param  {object} utils.cache     - Helper functions for dealing with build cache
     * @param  {object} utils.git       - Helper functions for dealing with git
     * @param  {object} utils.run       - Helper functions for dealing with executables
     * @param  {object} utils.functions - Helper functions for dealing with Netlify functions
     * @param  {object} utils.redirects - Helper functions for dealing with Netlify redirects
     * @param  {object} utils.headers   - Helper functions for dealing with Netlify headers
     * @param  {object} constants       - constant values referencing various env paths
     * @param  {string} constants.CONFIG_PATH     - path to netlify config file
     * @param  {string} constants.BUILD_DIR       - path to site build directory
     * @param  {string} constants.CACHE_DIR       - path to cache directory
     * @param  {string} constants.FUNCTIONS_SRC   - path to functions source code directory
     * @param  {string} constants.FUNCTIONS_DIST  - path to functions build directory
     * @param  {object} api             - scoped API instance of Netlify sdk
     * @return {object} outputs - output values from call
     */
    onPreBuild: ({ netlifyConfig, pluginConfig, utils, constants, api }) => {
      // do the thing
    },
  }
}
```

Attaching a plugin to your build would be done in `netlify.yml`

```yml
# Build settings
build:
  functions: functions
  publish: build
  # Inline lifecycle hooks
  lifecycle:
    onInit:
      - echo "starting the build"
    onPostBuild:
      - echo "build complete the build"

# Build plugins
plugins:
  pluginOne:
    # Local plugin definition
    package: ./plugins/one
    # plugin inputs
    inputs:
      foo: bar
  sitemapPlugin:
    # Remote plugin from NPM
    package: netlify-sitemap-plugin
```

### Available event handlers

The events that build plugins can hook into are as follows

| Event                                     | Description                        |
| :---------------------------------------- | :--------------------------------- |
| **onInit** ‏‏‎ ‏‏‎ ‏‏‎      | Runs before anything else          |
| **onPreBuild** ‏‏‎ ‏‏‎ ‏‏‎  | Before build commands are executed |
| **onBuild** ‏‏‎ ‏‏‎ ‏‏‎     | Build commands are executed        |
| **onPostBuild** ‏‏‎ ‏‏‎ ‏‏‎ | After Build commands are executed  |
| **onSuccess** ‏‏‎ ‏‏‎ ‏‏‎   | Runs on build success              |
| **onError** ‏‏‎ ‏‏‎ ‏‏‎     | Runs on build error                |
| **onEnd** ‏‏‎ ‏‏‎ ‏‏‎       | Runs on build error or success     |

### Inputs & Outputs

[Read the full input/output spec here](https://gist.github.com/DavidWells/1e05977a9a4aaf184f53f456fac2889c)

Plugin outputs are a way for values to be passed between plugins.

These outputs will allow for more advances use cases of plugins that depend on values from each other.

For example, a `mongodb-atlas-plugin` might pass a connection string back as an output that a custom-rest-api-function-plugin might use to automatically scaffold a serverless function with said connection string.

To achieve a feature like this, Netlify Build requires additional configuration from the plugin author so outputs and build order can be correctly executed.

Programmable interface for Netlify CI/CD pipeline

Netlify Build Plugins

3. How can I streamline workflows, developer productivity & time to market?


A lightweight, extendable analytics library designed to work with **any** third party analytics provider to track page views, custom events, & identify users.

[Docs site](https://getanalytics.io) | [Github Repo](https://github.com/davidwells/analytics)

<a href="https://getanalytics.io">
  <img src="https://user-images.githubusercontent.com/532272/61419845-ab1e9a80-a8b4-11e9-8fd1-18b9e743bb6f.png" width="450" />
</a>

This is the 4th iteration of an analytics library I've rebuilt over the years.

See the [API docs](https://getanalytics.io/api/) for everything it can do 🌈

```
npm install analytics
```

![how analytics works](https://user-images.githubusercontent.com/532272/68093602-42036880-fe4c-11e9-8bb9-008045da8a32.gif)

Example usage:

```js
import Analytics from 'analytics'
import googleAnalyticsPlugin from '@analytics/google-analytics'
import customerIOPlugin from '@analytics/customerio'

/* Initialize analytics */
const analytics = Analytics({
  app: 'my-app-name',
  version: 100,
  plugins: [
    googleAnalyticsPlugin({
      trackingId: 'UA-121991291',
    }),
    customerIOPlugin({
      siteId: '123-xyz'
    })
  ]
})

/* Track a page view */
analytics.page()

/* Track a custom event */
analytics.track('userPurchase', {
  price: 20
  item: 'pink socks'
})

/* Identify a visitor */
analytics.identify('user-id-xyz', {
  firstName: 'bill',
  lastName: 'murray',
  email: 'da-coolest@aol.com'
})
```

Lightweight analytics library for tracking events, page views, & identifying users

Analytics


Allow users to subscribe & unsubscribe from specific types of emails from Netlify.

<img src="https://s3-us-west-2.amazonaws.com/assets.davidwells.io/work/netlify-email-preferences-form.jpg" />

arch diagram here

Service for users to manage email subscriptions

Netlify Email Preference Center


# Netlify VGS add-on

https://twitter.com/_oliverjam/status/1136970429699174401

Netlify VGS


[Deploy codesandbox projects into Netlify](https://www.netlify.com/blog/2019/03/26/deploy-codesandbox-to-netlify/).

This was an integration project with the wonderful folks over at [codesandbox](https://codesandbox.io ).

We wanted to add a way for codesandbox users to be able to one-click deploy from their CodeSandbox project.

The integration deploys an anonymous Netlify site that is later claimed by the user into their own Netlify account.

## Demo

<iframe width="700" height="315" src="https://www.youtube.com/embed/S4Nshf2IGmM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Deploy via your sandbox!

<img src="https://s3-us-west-2.amazonaws.com/assets.davidwells.io/work/csb-deploy.jpg" />

Claim your site after it deploys.

<img src="https://s3-us-west-2.amazonaws.com/assets.davidwells.io/work/csb-claim-deploy.jpg" />

## Tweets

- https://twitter.com/CompuIves/status/1110633418704986113
- https://twitter.com/kentcdodds/status/1143505484864872449

Netlify + CodeSandbox Deploys


I rebuilt the [Netlify command-line interface](https://github.com/netlify/cli/).

This project was a revamp of the Go-based Netlify CLI.

The work involved designing the CLI API & interface, managing the project, and building out the [cli docs site](https://cli.netlify.com/).

## Repo

<a href="https://github.com/netlify/cli/">
  <img src='https://s3-us-west-2.amazonaws.com/assets.davidwells.io/work/netlify-cli-repo.jpg' />
</a>

## CLI reference site

<a href="https://cli.netlify.com/">
  <img src="https://s3-us-west-2.amazonaws.com/assets.davidwells.io/work/netlify-cli-docs-site.jpg" />
</a>

## Commands

See the latest commands in the [docs](https://cli.netlify.com/)

```bash
➜  netlify-cli-dir git:(master) netlify

⬥ Netlify CLI
Read the docs: https://www.netlify.com/docs/cli
Support and bugs: https://github.com/netlify/cli/issues

Netlify command-line tool

VERSION
  netlify-cli/2.11.19 darwin-x64 node-v10.4.1

USAGE
  $ netlify [COMMAND]

COMMANDS
  deploy     Create a new deploy from the contents of a folder
  dev        Local dev server
  functions  Manage netlify functions
  help       display help for netlify
  init       Configure continuous deployment for a new or existing site
  link       Link a local repo or project folder to an existing site on Netlify
  login      Login to your Netlify account
  open       Open settings for the site linked to the current folder
  plugins    list installed plugins
  sites      Handle various site operations
  status     Print status information
  unlink     Unlink a local folder from a Netlify site
  watch      Watch for site deploy to finish
```

Netlify CLI


Deploy Netlify sites as part of serverless, SAM, or raw AWS cloudformation stacks.

This project lets you define your site as infrastructure as code.

- [Post](https://www.netlify.com/blog/2018/11/29/deploying-netlify-sites-with-aws-cloudformation/)
- [Example](https://github.com/DavidWells/netlify-site-as-aws-custom-resource-example)

##  Demo

<iframe width="720" height="315" src="https://www.youtube.com/embed/AQ-f-U8Pncc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

## How to use it?

Declare one or many Netlify sites in your AWS CloudFormation template by adding the following to your [`Resources` section](https://docs.aws.amazon.com/AWSCloudFormation/latest/UserGuide/resources-section-structure.html) of your CF template.

```yml
# Logical ID
myNetlifySite:
  # Resource type
  Type: Custom::NetlifySite
  # Resource properties
  Properties:
    # AWS ARN of provisioning function uses to create Netlify site
    ServiceToken: {
      "Fn::Join": ["",
        ["arn:aws:lambda:",{"Ref":"AWS::Region"},":453208706738:function:custom-resource-netlify-site"]
      ]
    }
    # Settings required for provisioning Netlify site
    netlifyToken: xyz-123-netlify-token
    githubToken:  xyz-123-github-token
    name: new-new-new-site-new-name
    custom_domain: lol-wow-cool.com
    build_settings:
      repo_url: https://github.com/DavidWells/test-site
      repo_branch: master
      dir: build
      cmd: npm run build
      allowed_branches:
        - master
      env:
        MY_ENV_KEY: hello
        MY_OTHER_KEY: there
```

### Raw CloudFormation Example

Below is an example of using the custom resource using [AWS CloudFormation](https://docs.aws.amazon.com/cloudformation/index.html#lang/en_us)

```yml
---
AWSTemplateFormatVersion: '2010-09-09'
Description: The AWS CloudFormation template with Netlify Site
Resources:
  myNetlifySite:
    Type: Custom::NetlifySite
    Properties:
      ServiceToken: {
        "Fn::Join": ["",
          ["arn:aws:lambda:",{"Ref":"AWS::Region"},":453208706738:function:custom-resource-netlify-site"]
        ]
      }
      netlifyToken: your-netlify-token
      githubToken: your-github-token
      name: your-netlify-site-name
      # custom_domain: site.com
      build_settings:
        repo_url: https://github.com/username/site-repo
        repo_branch: master
        dir: build
        cmd: npm run build
        allowed_branches:
          - master
        env:
          MY_ENV_KEY: hello
          MY_OTHER_KEY: there
```

### AWS SAM example

Below is an example of using the custom resource using [AWS SAM](https://docs.aws.amazon.com/serverless-application-model/latest/developerguide/what-is-sam.html)

```yml
AWSTemplateFormatVersion: '2010-09-09'
Transform: 'AWS::Serverless-2016-10-31'
Description: 'SAM template for Serverless framework service: '
Resources:
  myNetlifySite:
    Type: Custom::NetlifySite
    Properties:
      ServiceToken: {
        "Fn::Join": ["",
          ["arn:aws:lambda:",{"Ref":"AWS::Region"},":453208706738:function:custom-resource-netlify-site"]
        ]
      }
      netlifyToken: your-netlify-token
      githubToken: your-github-token
      name: your-netlify-site-name
      # custom_domain: site.com
      build_settings:
        repo_url: https://github.com/username/site-repo
        repo_branch: master
        dir: build
        cmd: npm run build
        allowed_branches:
          - master
        env:
          MY_ENV_KEY: hello
          MY_OTHER_KEY: there
```

### Serverless Framework example

Below is an example of using the custom resource using the [serverless framework](https://github.com/serverless/serverless/)

Contents of the `serverless.yml` config file:

```yml
service: my-service-with-netlify-site

provider:
  name: aws
  runtime: nodejs8.10

resources:
  Resources:
    myNetlifySite:
      Type: Custom::NetlifySite
      Properties:
        ServiceToken: {
          "Fn::Join": ["",
            ["arn:aws:lambda:",{"Ref":"AWS::Region"},":453208706738:function:custom-resource-netlify-site"]
          ]
        }
        netlifyToken: your-netlify-token
        githubToken: your-github-token
        name: your-netlify-site-name
        # custom_domain: site.com
        build_settings:
          repo_url: https://github.com/username/site-repo
          repo_branch: master
          dir: build
          cmd: npm run build
          allowed_branches:
            - master
          env:
            MY_ENV_KEY: hello
            MY_OTHER_KEY: there
```

Deploy netlify sites as part of CloudFormation stack

Netlify + AWS CloudFormation


Everything you ever wanted to know about Netlify Functions ⚡️

- [Site](https://functions.netlify.com)
- [Repo](https://github.com/netlify-labs/functions-site)

images here

arch diagram here about github submission

Resource for learning about Netlify Serverless functions

Netlify Functions


Collect and manage form data using serverless technology.

[Demo](https://serverless-forms.netlify.com) | [Repo](https://github.com/serverless/forms-service)

## Frontend

- React Application
- Using react router 4
- State management via Redux
- Talks to API Gateway via axios
- Auth via Auth0
- Hosted on Netlify

## Backend

- Node backend running in AWS Lambda Functions
- DynamoDB NoSQL for database
- Authorization via API Gateway Custom Authorizer Function

<img src="https://s3-us-west-2.amazonaws.com/assets.davidwells.io/work/serverless-form-service-backend.png" />

## Auth flow for protected API endpoints

<img src="https://s3-us-west-2.amazonaws.com/assets.davidwells.io/work/serverless-forms-service-custom-auth-flow.jpg" />

## UI

<img src="https://s3-us-west-2.amazonaws.com/assets.davidwells.io/work/serverless-forms-service-dashboard.jpg" />

<img src="https://s3-us-west-2.amazonaws.com/assets.davidwells.io/work/serverless-forms-service-form-view.jpg" />

Serverless forms service to collect & view form data

Serverless Forms Service


Onboarding wizard for new [serverless.com](https://serverless.com) users.

This React app was the onboarding flow in serverless.com and inside the product.

The app itself was built to be used as embeddable third party JavaScript. This means it can be included on any page without altering the hosting app/site. This architecture made it **much** easier to alter/edit without blocking dependencies or waiting for full application deployments.

**Features:**

- Embeddable anywhere
- Saves the user's progress as they step through wizard
- Support any number of steps/content

## Version 1

[v1 demo](https://s3-us-west-2.amazonaws.com/assets.davidwells.io/demos/serverless/onboarding/v1/index.html#get-started)

<img src="https://s3-us-west-2.amazonaws.com/assets.davidwells.io/work/serverless-onboarding-v1-start.jpg
" />

<img src="https://s3-us-west-2.amazonaws.com/assets.davidwells.io/work/serverless-onboarding-v1-progress.jpg
" />

<img src="https://s3-us-west-2.amazonaws.com/assets.davidwells.io/work/serverless-onboarding-v1-end.jpg
" />

## Version 2

[v2 demo](http://serverless-onboarding.surge.sh/)

<img src="https://s3-us-west-2.amazonaws.com/assets.davidwells.io/work/serverless-onboarding-v2-start.jpg
" />

<img src="https://s3-us-west-2.amazonaws.com/assets.davidwells.io/work/serverless-onboarding-v2-start-menu.jpg
" />

<img src="https://s3-us-west-2.amazonaws.com/assets.davidwells.io/work/serverless-onboarding-v2-progress.jpg
" />

<img src="https://s3-us-west-2.amazonaws.com/assets.davidwells.io/work/serverless-onboarding-v2-end.jpg
" />

Serverless user onboarding


The post scheduler is a [serverless](https://github.com/serverless/serverless) project that gives static site owners the ability to schedule posts (or other site content).

It works with any static site setup (Jekyll, Hugo, Phenomic, Gatsby, etc.)

[Video demo](https://www.youtube.com/watch?v=YETxuhexZY4&index=1&list=PLIIjEI2fYC-BubklemD4D51vrXHOcUOpc&t=31s) | [Repo](https://github.com/serverless/post-scheduler)

## How does it work?

1. A GitHub webhook fires when pull requests (aka new posts) are updated.

2. If the pull request comment has a comment matching `schedule(MM/DD/YYYY H:MM pm)` and the person is a collaborator on the project, the post gets scheduled for you.

3. A serverless cron job runs every hour to check if a post is ready to be published

4. When the post is ready to be published, the cron function automatically merges the branch into `master`, and your site, if you have CI/CD built-in, will redeploy itself.

To cancel scheduled posts, delete the scheduled comment, and it will unschedule the branch.

<img width="600" height="360" src="https://cloud.githubusercontent.com/assets/532272/23643861/250f2ca0-02b9-11e7-9a1b-94676043f2aa.gif">

### Github Webhook Architecture Overview

![cloudcraft - post scheduler webhook](https://cloud.githubusercontent.com/assets/532272/23387076/2e7960b2-fd0f-11e6-88da-49517b27d8ae.png)

### Cron Job Architecture Overview

![cloudcraft - post scheduler cron setup](https://cloud.githubusercontent.com/assets/532272/23388042/e129772e-fd14-11e6-96ca-ff23a019a51e.png)

schedule content & updates for static sites

Static Site Post Scheduler


Revamp of original [serverless site](https://davidwells.io/work/serverless-site/)

Built using react, redux and [phenomic](https://github.com/MoOx/phenomic) this site is statically built using react serverside rendering on build

It's hosted on the [netlify](https://www.netlify.com/) CDN for 🔥blazingly fast performance and scale.

This site is 100% serverless! [Repo](https://github.com/serverless/site)

The [site content](https://github.com/serverless/site/tree/master/content), [docs](https://github.com/serverless/serverless/tree/master/docs), and [blog](https://github.com/serverless/blog) are hosted on github, so if you see a typo or error feel free to contribute back!

API calls are made with the [serverless framework](https://github.com/serverless/serverless/tree/master/docs) pinging AWS lambda functions.

User Authentication is handled via [Auth0](https://auth0.com).

Site search handled by [Algolia](https://community.algolia.com/docsearch/).

- [See the site](https://serverless.com/) > [View the SRC Luke](https://github.com/serverless/site/tree/master/src)
- [Check out the blog](https://serverless.com/blog) > [Contribute to the blog](https://github.com/serverless/blog)
- [Read the docs](https://serverless.com/framework/docs) > [Contribute to the docs](https://github.com/serverless/serverless)

More info on the site build can be [seen here](https://youtu.be/M-JQSUb71rQ?t=1h41m18s)

<img src="https://s3-us-west-2.amazonaws.com/assets.davidwells.io/work/serverless-site-v2-homepage.jpg" />

<img src="https://s3-us-west-2.amazonaws.com/assets.davidwells.io/work/serverless-site-v2-docs.jpg" />

<img src="https://s3-us-west-2.amazonaws.com/assets.davidwells.io/work/serverless-site-v2-blog.jpg" />

<img src="https://s3-us-west-2.amazonaws.com/assets.davidwells.io/work/serverless-site-v2-blog-post.jpg" />

<img src="https://s3-us-west-2.amazonaws.com/assets.davidwells.io/work/serverless-site-v2-github-status.jpg" />

<img src="https://s3-us-west-2.amazonaws.com/assets.davidwells.io/work/serverless-site-v2-champions-page.jpg" />

Static site powered by React, markdown and serverless APIs

Serverless Website v2


Scope is a customizable bird's eye view of your Github project.

[Repo](http://github.com/serverless/scope)

It automatically pulls in issues & Pull requests and sorts them into columns you define. Think GitHub projects on steroids.

Scope was built using event-driven serverless tech; the application can be cloned down, configured, & deployed for your project in minutes.

Deploy it as a stand-alone application or embed it directly into your project's site.

## Features

<img align="right" width="391" height="218" src="https://cloud.githubusercontent.com/assets/532272/22727459/cad63336-ed8d-11e6-8924-fce36f239a84.gif">

- Customize the labels/columns to fit your project
- Customizable styles 💁
- Driven by push-based Github webhooks
- Run as a standalone app or Embed on your project's site
- Look mom! No servers!

Data automatically updates when activity happens in your repository, and your status board will reflect the latest state of your project.

## Why we built it

We built this tool for our community to help keep people up to speed with what is happening with the serverless project & to highlight places where we actively want feedback + collaboration.

- Quickly sort and see high priority issues & Pull requests
- Call out which issues need attention from your community
- Zoom into an important aspect of your open source project

Featured on Github's [Tools for Open Source](https://github.com/showcases/tools-for-open-source)

<img src="https://s3-us-west-2.amazonaws.com/assets.davidwells.io/work/serverless-scope-demo.jpg"/>

## How it works

![cloudcraft - status board webhook listener 1](https://cloud.githubusercontent.com/assets/532272/22728277/ead7cb00-ed91-11e6-98b4-98fdb36c58c2.png)

![cloudcraft - status board ui 2](https://cloud.githubusercontent.com/assets/532272/22728295/01f11e72-ed92-11e6-9db8-473874b3a713.png)

Scope


The serverless desktop is a cross-platform GUI that wraps the serverless CLI with a GUI.

[Repo](https://github.com/serverless/dashboard)

<img width="350" src="https://s3-us-west-2.amazonaws.com/assets.davidwells.io/work/serverless-desktop-gif.gif">

## About

- A cross-platform app built with Electron
- React for UI
- Instrumented with user analytics

## Goals of the Serverless Desktop app
- Bring in more users to the serverless framework
- Educate new users about CLI + Serverless applications
- Provide streamlined workflow for devs working locally
- Collect real feedback from users on needed functionality

<img src="https://s3-us-west-2.amazonaws.com/assets.davidwells.io/work/serverless-desktop-service-list.jpg">

<img src="https://s3-us-west-2.amazonaws.com/assets.davidwells.io/work/serverless-desktop-service-view.jpg">

<img src="https://s3-us-west-2.amazonaws.com/assets.davidwells.io/work/serverless-desktop-feedback.jpg">

<img src="https://s3-us-west-2.amazonaws.com/assets.davidwells.io/work/serverless-desktop-aws-profiles.jpg">

<img src="https://s3-us-west-2.amazonaws.com/assets.davidwells.io/work/serverless-desktop-aws-profile-manager.jpg">

Desktop GUI for managing serverless services

Serverless Desktop


Built using react, redux and [phenomic](https://github.com/MoOx/phenomic) this site is statically built using react serverside rendering on build

It is hosted on the [Netlify](https://www.netlify.com/) CDN for 🔥blazingly fast performance and scale.

This site is 100% serverless! [Repo](https://github.com/serverless/site)

The [site content](https://github.com/serverless/site/tree/master/content), [docs](https://github.com/serverless/serverless/tree/master/docs), and [blog](https://github.com/serverless/blog) are hosted on github, so if you see a typo or error feel free to contribute back!

API calls are made with the [serverless framework](https://github.com/serverless/serverless/tree/master/docs) pinging AWS lambda functions.

User Authentication is handled via [Auth0](https://auth0.com).

Site search handled by [Algolia](https://community.algolia.com/docsearch/).

- [See the site](https://serverless.com/) > [View the SRC Luke](https://github.com/serverless/site/tree/master/src)
- [Check out the blog](https://serverless.com/blog) > [Contribute to the blog](https://github.com/serverless/blog)
- [Read the docs](https://serverless.com/framework/docs) > [Contribute to the docs](https://github.com/serverless/serverless)

More info on the site build can be [seen here](https://youtu.be/M-JQSUb71rQ?t=1h41m18s)

<img src="https://s3-us-west-2.amazonaws.com/assets.davidwells.io/work/serverless-site-homepage.jpg" />

Offline first, static site powered by React & markdown

Serverless Website v1


✨ Add a little magic to your markdown ✨

[Video demo](http://www.youtube.com/watch?v=4V2utrvxwJ8) | [Repo](https://github.com/davidwells/markdown-magic) | [Example Repo](https://github.com/DavidWells/repo-using-markdown-magic)

## About

<img align="right" width="200" height="183" src="https://cloud.githubusercontent.com/assets/532272/21507867/3376e9fe-cc4a-11e6-9350-7ec4f680da36.gif">Markdown magic uses comment blocks in markdown files to automatically sync or transform it's contents.

- Automatically keep markdown files up to date from local or remote code sources
- Transform markdown content with custom transform functions
- Render markdown with any template engine
- Automatically generate a table of contents
- ... etc

The comments markdown magic uses are hidden in markdown and when viewed as HTML.

This `README.md` is generated with `markdown-magic` [view the raw file](https://raw.githubusercontent.com/DavidWells/markdown-magic/master/README.md) to see how.

## Install

```bash
npm install markdown-magic
```

Markdown Magic


Built the main dashboard for [Mulesoft's enterprise platform](https://www.mulesoft.com/).

It's built using react & redux and the [UX component library](http://davidwells.io/work/mulesoft-component-library/). The component library was consumed by 8+ dev teams across the organization.

![](https://s3-us-west-2.amazonaws.com/assets.davidwells.io/work/mulesoft-anypoint-dashboard.jpg)

![](https://s3-us-west-2.amazonaws.com/assets.davidwells.io/work/mulesoft-site.jpg)

Dashboard for Mulesoft's Anypoint Plafform

Mulesoft Anypoint Platform UI


**Demo Link:** <a href="https://anypoint-platform-ui.netlify.app/">https://anypoint-platform-ui.netlify.app/</a>

**Live URL:** <a href="http://ux.mulesoft.com/">http://ux.mulesoft.com/</a>

**Date:** 2016

[Mulesoft](https://mulesoft.com) needed to port over some legacy angular one applications into a more modern centralized stack.

I worked with the UX team to create a scalable component library for all internal product teams to use.

This was an interesting project because the components we built need to work in new greenfield projects as well as inside legacy angular one applications.

For more information, see this video [Best Practices on building a UI component library for your company ](https://www.youtube.com/watch?v=j8eBXGPl_5E)

## Component Library

![](https://s3-us-west-2.amazonaws.com/assets.davidwells.io/work/mulesoft-component-library.jpg)

### UI layouts

![](https://s3-us-west-2.amazonaws.com/assets.davidwells.io/work/mulesoft-component-library-layout-view.jpg)

### UI Icons

![](https://s3-us-west-2.amazonaws.com/assets.davidwells.io/work/mulesoft-component-library-icons-view.jpg)

### Automatic documentation

![](https://s3-us-west-2.amazonaws.com/assets.davidwells.io/work/mulesoft-component-library-docs-view.jpg)

### UI Colors

![](https://s3-us-west-2.amazonaws.com/assets.davidwells.io/work/mulesoft-component-library-colors-view.jpg)

### Mulesoft Login

![](https://s3-us-west-2.amazonaws.com/assets.davidwells.io/work/mulesoft-anypoint-login-1.jpg)

![](https://s3-us-west-2.amazonaws.com/assets.davidwells.io/work/mulesoft-anypoint-login-2.jpg)

### Anypoint Dashboard

![](https://s3-us-west-2.amazonaws.com/assets.davidwells.io/work/mulesoft-anypoint-dashboard.jpg)

React component library for Mulesoft product teams

Mulesoft Component Library


**Date:** 2016

**Demo Link:** <a href="http://davidwells.io/blog/easy-markdown/">http://davidwells.io/blog/easy-markdown/</a>

**Source Code:** [https://github.com/DavidWells/easy-markdown](https://github.com/DavidWells/easy-markdown)

> Write GitHub flavored markdown in WordPress without the hassle

Blogging about code in WordPress has historically been a **HUGE** pain in the ass.

TinyMCE and the WordPress visual editor garble your code like it's their job.

I've tried every single syntax highlighter plugin in existence.

They all fell short in one way or another.

So like any good developer. I rolled my own.

<iframe src="https://www.youtube.com/embed/dRMow19g0VU?ecver=2" width="480" height="360" frameborder="0" allowfullscreen></iframe>

Write GitHub flavored markdown in WordPress without the hassle

Easy Markdown WordPress Plugin


**Contributors:** David Wells, Hudson Atwell

**Date:** 2013 - ongoing

I founded [Inbound Now](https://www.inboundnow.com/) the company in 2013.

The goal of the project was to help small businesses grow their inbound lead flow.

Along the way, We built:

- a complete A/B testing suite for [landing pages](https://wordpress.org/plugins/landing-pages/) and [calls to action](https://wordpress.org/plugins/cta/)
- a [lead tracking framework](http://davidwells.io/portfolio/inbound-analytics/) - a [lead management system](https://wordpress.org/plugins/leads/)
- and integrated a huge amount of [third party tools and APIs](https://www.inboundnow.com/marketplace/)

We surpassed 1 million downloads, and there are currently 40,000 active sites using Inbound Now tools. (as of March 2016)

## About the plugins

* Free to implement on any WordPress Site
* Built with Inbound Marketing Best Practices
* Developer and Designer Friendly
* Powered by [WordPress](http://wordpress.org/)
* Licensed under the [GPL license.](http://en.wikipedia.org/wiki/GNU_General_Public_License)

## Inbound Now's philosophy

We firmly believe in creating tools that solve real business problems and grant a marketing advantage. We create beautiful, user, friendly marketing products.

> Our mission is to democratize the inbound marketing space and give powerful marketing tools to anyone that is trying to improve the marketing potential.

WordPress Landing Pages, WordPress Calls to Action, and WordPress Leads are all free to use and work together to create a powerful lead conversion and management system.

We play nicely with other marketing/CRM systems, and our tools are fully extendable to meet your specific needs. [Read the Dev docs.](http://docs.inboundnow.com/landing-pages)

These plugins are open source, and If you'd like to get involved with the project, **[please drop us a line](https://davidwells.io/contact/)**.

Inbound Now


**Date:** 2015

**Demo Link:** [Demo](https://s3-us-west-2.amazonaws.com/assets.davidwells.io/demos/responsible/index.html)

Give Users the choice of what mobile experience they want. Adds Toggle for mobile to desktop switching without page reloads

[https://github.com/DavidWells/responsible](https://github.com/DavidWells/responsible)

### [Responsible.js](id:anchor_1)

![](https://s3-us-west-2.amazonaws.com/assets.davidwells.io/work/responsible-media_1427246900777.jpg "media_1427246900777.jpg")

### [Mobile Toggle](id:anchor_2)

![](https://s3-us-west-2.amazonaws.com/assets.davidwells.io/work/responsible-media_1427246994189.jpg "media_1427246994189.jpg")

Let users choose the mobile experience they want

Responsible.js


**Date:** 2014

Read the [docs](http://inbound-analytic-docs.surge.sh/)

Inbound Analytics, is a vanilla JavaScript library with zero dependencies for tracking various user activities on a site.

The library is a part of the WordPress Landing Pages, Leads, and Calls to action plugin for [Inbound Now](https://davidwells.io/work/inbound-now)

### Inbound Analytics API Docs

![](https://s3-us-west-2.amazonaws.com/assets.davidwells.io/work/inbound-analytics-media_1428442899855.jpg "media_1428442899855.jpg")

![](https://s3-us-west-2.amazonaws.com/assets.davidwells.io/work/inbound-analytics-media_1428443146802.jpg "media_1428443146802.jpg")

Vanilla JavaScript Analytics library with zero dependancies

Inbound Analytics


**Date:** 2015

**Code: **[Download from Github](https://github.com/DavidWells/share-wordpress-drafts-with-non-users)

**Tags:** React, JavaScript, PHP, WordPress, Plugin

This WordPress plugin gives you the ability to share drafted content with your friends without them logging into WordPress.

The drafts are visible for a transient amount of time; then, they revert to private drafts that require a login to view.

This was a WordPress plugin built with React. The entire user interface is JavaScript-driven.

PHP runs in the background to fetch the required data from WordPress.

![drafts-for-friends-2](https://s3-us-west-2.amazonaws.com/assets.davidwells.io/legacy/2015/08/drafts-for-friends-2-1024x557.png)

![drafts-for-friends](https://s3-us-west-2.amazonaws.com/assets.davidwells.io/legacy/2015/03/drafts-for-friends-1024x593.png)

Share WordPress drafts with no login required to view. Built with React

Drafts for friends


**Client:** Exygy, Intuit

**Date:** 2014

**Demo Link:** [https://wordpress.org/plugins/duplicate-and-merge-posts/](https://wordpress.org/plugins/duplicate-and-merge-posts/)

This was a WordPress plugin that was requested by Intuit.

They needed to give the ability to duplicate existing WordPress posts and allow users to edit them without disrupting the original content.

Once the duplicated post was ready, they have a submission process that allows administrators to merge the post back into the original document.

This was a fun project to work and drastically increased the speed of creating new WordPress content. Should be merged into WP core in my opinion =)

<iframe width="640" height="480" src="https://www.youtube.com/embed/5ngkWcIcpsE?feature=oembed" frameborder="0" allowfullscreen=""></iframe>

### Duplicate and edit the existing post

![](https://s3-us-west-2.amazonaws.com/assets.davidwells.io/work/dam-Duplicate_and_edit_the_existing_post.jpg "Duplicate_and_edit_the_existing_post.jpg")

### Duplicate from the admin bar

![](https://s3-us-west-2.amazonaws.com/assets.davidwells.io/work/dam-Duplicate_from_the_admin_bar.jpg "Duplicate_from_the_admin_bar.jpg")

### Merge Options

![](https://s3-us-west-2.amazonaws.com/assets.davidwells.io/work/dam-Merge_Options.jpg "Merge_Options.jpg")

Submit updated copy for review, Merge back to the original Post, View Side by side differences, or save as a new post altogether

### View Side by Side differences

![](https://s3-us-west-2.amazonaws.com/assets.davidwells.io/work/dam-View_Side_by_Side_differences.jpg "View_Side_by_Side_differences.jpg")

Duplicate existing pages & posts, edit them, then merge them back into the original

Duplicate and Merge Posts


**Client:** Launch Conference Hackathon

**Date:** 2015

**Demo Link:** [https://www.youtube.com/watch?v=PwFmi6Bknc4](https://www.youtube.com/watch?v=PwFmi6Bknc4)

Point, Click Save. NodeJS and Chrome Browser Extension for Launch Hackathon.

Stash is a way to track the prices of items and get notified when the price drops to the desired threshold.

<iframe src="https://www.youtube.com/embed/PwFmi6Bknc4?ecver=2" width="640" height="360" frameborder="0" allowfullscreen></iframe>

### Chrome Extension UI
![](https://s3-us-west-2.amazonaws.com/assets.davidwells.io/work/stash-Chrome_Extension_UI.jpg "Chrome_Extension_UI.jpg")

### Chrome Extension UI (cont)

![](https://s3-us-west-2.amazonaws.com/assets.davidwells.io/work/stash-Chrome_Extension_UI__cont_.jpg "Chrome_Extension_UI__cont_.jpg")

### Chrome Extension UI (cont)

![](https://s3-us-west-2.amazonaws.com/assets.davidwells.io/work/stash-Chrome_Extension_UI__cont__1.jpg "Chrome_Extension_UI__cont__1.jpg")

### Homepage

![](https://s3-us-west-2.amazonaws.com/assets.davidwells.io/work/stash-Homepage.jpg "Homepage.jpg")

Point, Click Save. NodeJS and Chrome Browser Extension for Launch Hackathon

Stash


**Date:** 2015

**Demo Link:** [Demo](https://s3-us-west-2.amazonaws.com/assets.davidwells.io/demos/kill-writers-block/index.html)

Kill writer's block v2 is my second attempt to help people write engaging blog post titles and social media headlines.

This was also the project I used to wrap my head around Facebook's flux architecture with React.

![kill-writers-block](https://s3-us-west-2.amazonaws.com/assets.davidwells.io/legacy/2015/08/kill-writers-block.png)

Blog post title generator, to get ideas flowing

Kill Writers Block


**Client:** One Kings Lane

**Date:** 2014

One Kings Lane needed a new intranet for employees to see benefits and events happening in their location.

### Welcome Screen

![](https://s3-us-west-2.amazonaws.com/assets.davidwells.io/work/okl-media_1425005703730.jpg "media_1425005703730.jpg")

### HomePage

![](https://s3-us-west-2.amazonaws.com/assets.davidwells.io/work/okl-media_1425005907536.jpg "media_1425005907536.jpg")

### HR Page

![](https://s3-us-west-2.amazonaws.com/assets.davidwells.io/work/okl-media_1425006142700.jpg "media_1425006142700.jpg")

### Geolocation based pages

![](https://s3-us-west-2.amazonaws.com/assets.davidwells.io/work/okl-media_1425006207025.jpg "media_1425006207025.jpg")

![](https://s3-us-west-2.amazonaws.com/assets.davidwells.io/work/okl-media_1425006278431.jpg "media_1425006278431.jpg")

Custom intranet for employees to see benefits and events happening in their location

One Kings Lane Intranet


**Client:** NitroPDF

**Date:** 2013

**Demo Link:** [http://blog.nitropdf.com/](http://blog.nitropdf.com/)

NitroPDF needed a new marketing infused blog for their site.

### NitroPDF Blog

![](https://s3-us-west-2.amazonaws.com/assets.davidwells.io/work/nitro-PDF-Blog.jpg "Nitro_PDF_Blog.jpg")

NitroPDF needed a new marketing infused blog for their site

Nitro PDF


**Client:** FlatIron School

**Date:** 2015

**Demo Link:** [http://blog.flatironschool.com](http://blog.flatironschool.com)

WordPress site build for FlatIron Dev School.

### Homepage

![](https://s3-us-west-2.amazonaws.com/assets.davidwells.io/work/flat-iron-Homepage.jpg "Homepage.jpg")

### Homepage for Blog

![](https://s3-us-west-2.amazonaws.com/assets.davidwells.io/work/flat-iron-Homepage_for_Blog.jpg "Homepage_for_Blog.jpg")

### Single Post

![](https://s3-us-west-2.amazonaws.com/assets.davidwells.io/work/flat-iron-Single_Post.jpg "Single_Post.jpg")

WordPress site build for FlatIron Dev School

Flatiron School


**Client:** SecondLife via Exygy

**Date:** 2014

This was a WordPress site build for Exygy.

We used advanced custom fields in a pretty cool way to give the client 100%(ish) control over a page layout.

We also had to incorporate multi-language functionality into the site.

I was in charge of speccing out the site build and managing the build process. The design was from SecondLife.

![](https://s3-us-west-2.amazonaws.com/assets.davidwells.io/work/second-life-media_1428006526917.jpg "media_1428006526917.jpg")

### Modular Page Builds

![](https://s3-us-west-2.amazonaws.com/assets.davidwells.io/work/second-life-Modular_Page_Builds.jpg "Modular_Page_Builds.jpg")

Advanced custom fields flexible content areas gave the ability to modularly build out the site and allow for drag and dropping of areas for the client.

### ACF Flexible Sections

![](https://s3-us-west-2.amazonaws.com/assets.davidwells.io/work/second-life-ACF_Flexible_Sections.jpg "ACF_Flexible_Sections.jpg")

Each section can be a clone, reordered, or filled with different content. This means a huge, huge number of different page layouts with a single page template.

SecondLife


**Date:** 2010-2014

I produced a bunch of inbound marketing focused podcasts back in the day.

[Watch on Youtube](https://www.youtube.com/watch?v=PkhyrKtLHP8&list=PLrOKfeQHBOIwi7WVeBR72B_E9nHqsoQUD&index=36)

[Videos & transcripts][https://davidwells.io/tags/inbound-now/]

[All episodes](https://www.pinterest.com/davidwells/inbound-now-tv-social-media-inbound-marketing-podc/)

Love:

https://www.schneiderb.com/3-podcasts-you-should-be-listening-to-right-now/

Inbound Now TV - Social Media & Inbound Marketing Podcast

Inbound Now Podcast


**Client:** Teach Your Child To Swim for Exygy

**Date:** 2014

**Demo Link:** [https://teachyourchildtoswim.com](https://teachyourchildtoswim.com)

WordPress site build with an e-commerce component.

I decided to use Easy Digital Downloads plugin for the e-commerce part.

Design by cohere studio.

![](https://s3-us-west-2.amazonaws.com/assets.davidwells.io/work/teach-your-child-to-swim-media_1428113452441.jpg "media_1428113452441.jpg")

### Ecommerce Piece

![](https://s3-us-west-2.amazonaws.com/assets.davidwells.io/work/teach-your-child-to-swim-Ecommerce_Piece.jpg "Ecommerce_Piece.jpg")

Teach your child to swim


**Contributors:** David Wells, Hudson Atwell

**Date:** 2012

**Demo Link:** [http://www.inboundnow.com/collecting-advanced-lead-intelligence-wordpress-free/](http://www.inboundnow.com/collecting-advanced-lead-intelligence-wordpress-free/)

Track visitor activity, capture and manage incoming leads, and send collected emails to your email service provider. This plugin is part of [Inbound Now](https://davidwells.io/work/inbound-now)'s suite of marketing plugins.

It gives people free access to powerful marketing data that would otherwise cost hundreds (or thousands) of dollars a month with other solutions.

![](https://s3-us-west-2.amazonaws.com/assets.davidwells.io/work/inbound-now-leads.jpg "media_1428098543598.jpg")

<iframe width="640" height="360" src="https://www.youtube.com/embed/POnsoIVo9XM?feature=oembed" frameborder="0" allowfullscreen=""></iframe>

Track visitor activity, capture & manage incoming web leads

WordPress Leads


**Date:** 2013

**Demo Link:** [http://www.inboundnow.com](http://www.inboundnow.com)

WordPress e-commerce Build for Inbound Now

### Homepage

![](https://s3-us-west-2.amazonaws.com/assets.davidwells.io/work/inbound-now-site-v2-Homepage.jpg "Homepage.jpg")

### Marketplace

![](https://s3-us-west-2.amazonaws.com/assets.davidwells.io/work/inbound-now-site-v2-Marketplace.jpg "Marketplace.jpg")

### Blog Setup

![](https://s3-us-west-2.amazonaws.com/assets.davidwells.io/work/inbound-now-site-v2-Blog_Setup.jpg "Blog_Setup.jpg")

WordPress e-commerce build for Inbound Now

Inbound Now v2


**Date:** 2013

**Demo Link:** [https://github.com/davidwells/calm.js](https://github.com/davidwells/calm.js)

Check if person typing is calm or NOT.

![](https://s3-us-west-2.amazonaws.com/assets.davidwells.io/work/calmjs-media_1428115401568.jpg "media_1428115401568.jpg")

Calm.js


**Contributors:** David Wells, Hudson Atwell

**Date:** 2013

**Demo Link:** [https://wordpress.org/plugins/cta/](https://wordpress.org/plugins/cta/)

Create Calls to Action for your WordPress site. Monitor and improve conversion rates, run A/B split tests, customize your own CTA templates, and more. This plugin is part of [Inbound Now](https://davidwells.io/work/inbound-now)'s suite of marketing plugins.

![](https://s3-us-west-2.amazonaws.com/assets.davidwells.io/work/inbound-now-cta-media_1428099452256.jpg "media_1428099452256.jpg")

<iframe width="640" height="360" src="https://www.youtube.com/embed/-qaYgwV7p-8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Monitor and improve conversion rates, run A/B split tests, & customize your own CTA templates in WordPress

WordPress Calls to Action


**Contributors:** David Wells, Hudson Atwell

**Date:** 2013

**Demo Link:** [https://wordpress.org/plugins/landing-pages/](https://wordpress.org/plugins/landing-pages/)

Create landing pages for your WordPress site. Monitor and improve conversion rates, run A/B split tests, customize your own templates and more. This plugin is part of [Inbound Now](https://davidwells.io/work/inbound-now)'s suite of marketing plugins.

![](https://s3-us-west-2.amazonaws.com/assets.davidwells.io/work/inbound-now-landing-pages-media_1428099093133.jpg "media_1428099093133.jpg")

<iframe width="640" height="360" src="https://www.youtube.com/embed/flEd0sRTFUo?feature=oembed" frameborder="0" allowfullscreen=""></iframe>

Create landing pages for your WordPress site. Monitor and improve conversion rates, & run A/B split tests.

WordPress Landing Pages


**Client:** Marin Independent Journal

**Date:** 2013

**Demo Link:** [http://mediasuite.marinij.com/](http://mediasuite.marinij.com/)

Marin Independent Journal needed a new site to promote its advertising service offering as it transitioned into the digital marketing landscape.

This project was a WordPress site build. One of the specifics of the project is that the site needed to have an inbound marketing focus and have landing pages, calls to action, and lead tracking mechanisms that integrated into HubSpot.

### Home Page

![](https://s3-us-west-2.amazonaws.com/assets.davidwells.io/work/marin-journal-Home_Page.jpg "Home_Page.jpg")

### IJ Blog

![](https://s3-us-west-2.amazonaws.com/assets.davidwells.io/work/marin-journal-IJ_Blog.jpg "IJ_Blog.jpg")

### Landing Page

![](https://s3-us-west-2.amazonaws.com/assets.davidwells.io/work/marin-journal-Landing_Page.jpg "Landing_Page.jpg")

Wordpress site build for Marin Independent Journal

Marin Independent Journal


**Client:** Solairus Aviation

**Date:** 2013

**Demo Link:** [http://www.solairus.aero/](http://www.solairus.aero/)

## About the Project

Solarius Aviation needed a new WordPress site for its new corporate website.

*   WordPress Setup and Design
*   HubSpot marketing integration

### WordPress Site Build

![](https://s3-us-west-2.amazonaws.com/assets.davidwells.io/work/solarius-WordPress_Site_Build.jpg "WordPress_Site_Build.jpg")

### Solarius Blog

![](https://s3-us-west-2.amazonaws.com/assets.davidwells.io/work/solarius-Solarius_Blog.jpg "Solarius_Blog.jpg")

### Integrating Third-Party Private Jet System

![](https://s3-us-west-2.amazonaws.com/assets.davidwells.io/work/solarius-Integrating_Third_Party_Private_Jet_System.jpg "Integrating_Third_Party_Private_Jet_System.jpg")

Solarius Aviation needed a new WordPress site for its new corporate website

Solarius Aero

Integrating Third-Party Private Jet System


**Client:** Hamamatsu

**Date:** 2014

**Demo Link:** [http://thelivingimage.hamamatsu.com/](http://thelivingimage.hamamatsu.com/)

Hamamatsu needed a new consumer-facing site to educate people on the types of research they conduct.

The project was a site build with several complex layouts and content specifications.

### The Living Image

![](https://s3-us-west-2.amazonaws.com/assets.davidwells.io/work/hamamatsu-The_Living_Image.jpg "The_Living_Image.jpg")

### Resource Library

![](https://s3-us-west-2.amazonaws.com/assets.davidwells.io/work/hamamatsu-Resource_Library.jpg "Resource_Library.jpg")

### Research Case Studies

![](https://s3-us-west-2.amazonaws.com/assets.davidwells.io/work/hamamatsu-Research_Case_Studies.jpg "Research_Case_Studies.jpg")

### Research Case Studies (full page)

![](https://s3-us-west-2.amazonaws.com/assets.davidwells.io/work/hamamatsu-Research_Case_Studies__full_page_.jpg "Research_Case_Studies__full_page_.jpg")

Hamamatsu needed a new consumer-facing site to educate people on the types of research they conduct.

Hamamatsu


**Client:** Topline Leadership

**Date:** 2012

**Demo Link:** [http://www.toplineleadership.com/](http://www.toplineleadership.com/)

WordPress Site Build and inbound marketing implementation with landing pages, calls to actions, and lead tracking.

### Topline Home Page

![](https://s3-us-west-2.amazonaws.com/assets.davidwells.io/work/topline-leadership-Topline_Home_Page.jpg "Topline_Home_Page.jpg")

### Resource Library

![](https://s3-us-west-2.amazonaws.com/assets.davidwells.io/work/topline-leadership-Resource_Library.jpg "Resource_Library.jpg")

### Blog

![](https://s3-us-west-2.amazonaws.com/assets.davidwells.io/work/topline-leadership-Blog.jpg "Blog.jpg")

### Landing Pages

![](https://s3-us-west-2.amazonaws.com/assets.davidwells.io/work/topline-leadership-Landing_Pages.jpg "Landing_Pages.jpg")

Site build with inbound marketing implementation Landing pages, calls to actions, & lead tracking

Topline Leadership


**Client:** MedicalRecords.com

**Date:** 2011

**Demo Link:** [http://www.medicalrecords.com](http://www.medicalrecords.com)

WordPress site build

### Homepage

![](https://s3-us-west-2.amazonaws.com/assets.davidwells.io/work/medical-records-Homepage.jpg "Homepage.jpg")

MedicalRecords.com


**Client:** America for President

**Date:** 2011

**Demo Link:** [http://www.americaforpresident.com/](http://www.americaforpresident.com/)

WordPress Site Build

### America For President

![](https://s3-us-west-2.amazonaws.com/assets.davidwells.io/work/america-for-president.jpg "america_for_president.jpg")

David Wells

Builder of things

Serverless ArchitecturesUser Experience & Product