WordPress @ log

Development Workbench

We all love a quick start.

Virtualized Environment

Vagrant

vagrantup.com

Very little setup.

Almost everything you need is prepackaged.

Windows? OS X? Linux? It just works.

Everyone uses the same VM configuration.

Each VM has its set of memory resources.

VVV

github.com/Varying-Vagrant-Vagrants

Creates new local WordPress sites from configuration.

Provides database and cache management tools.

Provides debug and profiling tools.

$ vagrant up

It takes a while to start the first time.

$ vagrant provision

The provision phase will take time, exponential to the number of projects living in your vagrant projects folder.

VVV Dashboard

http://vvv/

Containerized Applications

Docker

docker.com

Very little setup.

Everything you need is prepackaged.

Windows? OS X? Linux? It just works.

Everyone uses the same containers.

Containers share the same memory resources.

Docker Compose

docs.docker.com/compose

Define and Run a multi-container Docker application.

$ docker-compose up

It don't take much time to start the first time.

Scaffolding

Starter Themes

Genesis Framework (studiopress.com)

Underscores (underscores.me)

Plugin Boilerplate

wppb.io

Plugin Generator

github.com/log-oscon/generator-log-wp-plugin

Avoid reinventing the wheel.

“A 1000-hour headstart.”

Provides structure and best practices.

Dependency Management

Composer

getcomposer.org

Need a PHP library?

$ composer require <library>

Need a WordPress plugin?

$ composer require wpackagist-plugin/<plugin>

NPM

npmjs.org

Need a JavaScript module?

$ npm install <module>

Don’t repeat yourself.

Don’t manage 3rd party code.

Just declare required components and versions.

Manages dependencies and conflicts.

Wait, isn’t NPM a Node.js thing?

How do I use these modules?

Browserify

browserify.org

Webpack

webpack.js.org

Browserify and Webpack lets you use NPM modules in the browser.

Designers — this one is for you.

Asset Building

Sass

sass-lang.com

Sass is a better way to write CSS.

CSS

.content h1,
.content h2,
.content h3,
.content p {
  color: black;
}

Sass/SCSS

$text-color: black;

.content {
  h1, h2, h3, p {
    color: $text-color;
  }
}

QA

Don’t be your own worst enemy.

Up to 75% of the lifetime cost of a software project goes to maintenance.

Code now, fix later does not work.

You should write clean code from the start.

Messy Code

Hard to read.

Hard to understand.

Hard to maintain.

Dangerous.

Messy code leads to developer frustration.

Messy code can hide serious defects.

Messy code costs you real money.

Linting

Ensures coding standards.

Detects common bugs.

Encourages best practices.

log Coding Standards

log-oscon.github.io/Standards

In 6 months…

Will you remember how the project works?

Will the new intern know?

Less of this.

Definitely less of this.

More of this.

Unit & Acceptance Testing

Minimizes bugs.

Prevents regressions.

Encourages best practices.

Validates functional specifications.

Okay, that’s a lot.

Am I supposed to build and test everything by hand?

Task Automation

Gulp

gulpjs.com

Webpack Hot Module Replacement

webpack.js.org

Leave one of those things running...

They watch your files for changes.

Then builds, optimizes and tests everything as needed.

Optimization

Combine JS and CSS into single files.

Automatically generate CSS for legacy browsers.

Generate image sprites.

Compress sources and images.

Good news for the lazy efficient.

It will even reload the browser for you.

BrowserSync

browsersync.io

Synchronizes changes and interactions
across all devices connected to your local site.

Debug & Profiling

Chrome DevTools

google.com/chrome

Xdebug

xdebug.org

Xdebug

VVV comes with Xdebug out of the box.

Our Docker image container comes with Xdebug as well.

Let’s try it out.

Turn Xdebug on Vagrant

$ vagrant ssh -c xdebug_on

Xdebug Profiler

Append ?XDEBUG_PROFILE to the local site’s address.

(e.g. http://local.wordpress.dev/?XDEBUG_PROFILE)

Now visit http://vvv/webgrind/ to profile the request.

Debug Bar

wordpress.org/plugins/debug-bar

Debug Bar

Installed as a WordPress plugin.

Extendable.

Plugin Performance Profiler

wordpress.org/plugins/p3-profiler

PageSpeed

developers.google.com/speed/pagespeed

YSlow

yslow.org

ab

httpd.apache.org/docs/current/programs/ab.html

Version Control

Git

git-scm.com

Bitbucket

bitbucket.com

Git workflow

Every project begins with a `master` branch.

Alice starts a new feature branch.

$ git branch feature/awesome

Alice develops and commits to her branch.

$ git commit -m 'My feature is awesome.'

Bob starts a new feature branch.

$ git branch feature/best

Bob publishes his code.

$ git commit -m 'Mine is best.'
$ git checkout master
$ git merge feature/best

Alice updates her branch with Bob’s code.

$ git merge master

Alice publishes her code.

$ git commit -m 'I am done here.'
$ git checkout master
$ git merge feature/awesome

Code Reviews

Preserve architectural integrity.

Prevent a wide variety of bugs.

Enforce best practices.

JUST DO IT.

Rewind

Bob publishes his code.

$ git commit -m 'Mine is best.'
$ git checkout master
$ git merge feature/best

STOP RIGHT THERE

Code Reviews

All code must be approved before it can go live.

“Pull Requests” on Bitbucket.

Code annotations on Bitbucket.

Bob merges nothing until Carol says so.

Let’s try that again

Bob creates a pull request on Bitbucket.

Carol reviews and comments his code.

Bob implements suggested changes.

Carol approves the request, merging it.

Continuous Integration

Codeship

codeship.com

Codeship

Codeship monitors our Git repositories.

Automatically builds the project and runs tests. (Remember Gulp?)

Notifies developers of broken builds.

Codeship ❤ Git

Every commit is built and tested.

Code in `staging` gets pushed for testing.

Code in `master` gets pushed to production.

But only if it passes all tests.

Help! It still broke the site!

One-click rollbacks.