AVOID
BREAKING THE THINGS
how to develop safely
ALL
Slide 2
Slide 2 text
Alison Barrett
Senior Web Engineer at 10up
@alisothegeek
You betcha
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
HAVE A DEVELOPMENT SITE
01
Slide 7
Slide 7 text
Why?
Slide 8
Slide 8 text
Testing ground for changes
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
Local development environment =
web server on your computer
Slide 11
Slide 11 text
Vagrant/VirtualBox
Runs a virtual computer
on your computer
Slide 12
Slide 12 text
Varying Vagrant Vagrants
Slide 13
Slide 13 text
Varying Vagrant Vagrants
Slide 14
Slide 14 text
Comes with three WordPress installations:
!
wordpress-default (latest stable version)
wordpress-trunk (latest development version)
wordpress-develop (for working on WP core)
Slide 15
Slide 15 text
local.wordpress.dev
Slide 16
Slide 16 text
VVV Site Wizard
Slide 17
Slide 17 text
example.dev
Slide 18
Slide 18 text
1. Copy the files
2. Copy the database*
3. Profit
*Replace the live URL
with your local URL
Slide 19
Slide 19 text
Staging site =
copy of the site at a URL
the client can access
Slide 20
Slide 20 text
example.com
staging.example.com
Slide 21
Slide 21 text
example.com
example.mycompany.com
Slide 22
Slide 22 text
Restrict access to logged-in users:
!
• Search engines can't see it
• Random people can't find it
Slide 23
Slide 23 text
USE VERSION CONTROL
02
Slide 24
Slide 24 text
Why?
Slide 25
Slide 25 text
Never lose any work again
Slide 26
Slide 26 text
No content
Slide 27
Slide 27 text
Version control =
history of changes to files
Slide 28
Slide 28 text
No content
Slide 29
Slide 29 text
No content
Slide 30
Slide 30 text
Git Subversion
Slide 31
Slide 31 text
No content
Slide 32
Slide 32 text
Free online at
git-scm.com
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
Commit:
One change (or set of changes)
Slide 35
Slide 35 text
No content
Slide 36
Slide 36 text
Branch:
Pointer to a specific commit
Slide 37
Slide 37 text
Branch (concept):
Keeping complete versions of the
codebase separate from each other
Slide 38
Slide 38 text
master branch
first commit
Author: Vincent Driessen
Original blog post: http://nvie.com/archives/323
License: Creative Commons
Slide 39
Slide 39 text
master
Author: Vincent Driessen
Original blog post: http://nvie.com/archives/323
License: Creative Commons
Slide 40
Slide 40 text
master
Author: Vincent Driessen
Original blog post: http://nvie.com/archives/323
License: Creative Commons
Slide 41
Slide 41 text
master
Author: Vincent Driessen
Original blog post: http://nvie.com/archives/323
License: Creative Commons
Slide 42
Slide 42 text
master
Author: Vincent Driessen
Original blog post: http://nvie.com/archives/323
License: Creative Commons
Overwrote a change?
!
It's okay; that change
was recorded right there.
Slide 43
Slide 43 text
master
Author: Vincent Driessen
Original blog post: http://nvie.com/archives/323
License: Creative Commons
Slide 44
Slide 44 text
master
Author: Vincent Driessen
Original blog post: http://nvie.com/archives/323
License: Creative Commons
develop
live site
development site
Slide 45
Slide 45 text
Scenario:
A bug needs fixing on a live site
immediately
Slide 46
Slide 46 text
The fix needs to be in functions.php…
!
…but an unfinished feature has
changes in functions.php
Slide 47
Slide 47 text
master
Author: Vincent Driessen
Original blog post: http://nvie.com/archives/323
License: Creative Commons
develop
Slide 48
Slide 48 text
master
Author: Vincent Driessen
Original blog post: http://nvie.com/archives/323
License: Creative Commons
develop hotfixes
Slide 49
Slide 49 text
Git Flow
Slide 50
Slide 50 text
No content
Slide 51
Slide 51 text
Git Flow
!
Google it, look for
"A successful Git branching model"
Slide 52
Slide 52 text
03
PLUGIN: RESTRICTED SITE ACCESS
Slide 53
Slide 53 text
Why?
Slide 54
Slide 54 text
Controlled downtime
Slide 55
Slide 55 text
Logged-in users see the site,
visitors see something else
Slide 56
Slide 56 text
No content
Slide 57
Slide 57 text
Use this when the site is broken
but WordPress still functions
Slide 58
Slide 58 text
Example:
Broken plugin was installed
Slide 59
Slide 59 text
Example:
Menus got deleted
Slide 60
Slide 60 text
Example:
Site was hacked
Slide 61
Slide 61 text
You can fix the problem
without users seeing a broken site
Slide 62
Slide 62 text
04
CUSTOMIZE WP ERROR PAGES
Slide 63
Slide 63 text
Why?
Slide 64
Slide 64 text
More friendly to visitors
Slide 65
Slide 65 text
Briefly unavailable for scheduled maintenance. Check back
in a minute.
mail(
'alison@10up.com',
'example.com
is
down',
'Database
error!
Go
fix!'
);
Slide 73
Slide 73 text
mail(
'client@example.com',
"example.com
is
down,
but
I'm
on
the
case!",
"Howdy
Client,
Your
site
is
currently
down,
but
I'm
aware
of
the
problem
and
am
working
on
a
fix
right
now.
I'll
let
you
know
as
soon
as
it's
back
up.
!
-‐Alison
Barrett"
);
Slide 74
Slide 74 text
wp-content/
maintenance.php
db-error.php
Slide 75
Slide 75 text
Sorry,
We're
Getting
Tuned
Up
!
We
needed
a
tune-‐up.
We're
doing
a
bit
of
site
maintenance
that
should
only
last
a
few
minutes.
Go
grab
a
cup
of
coffee,
and
we
should
be
back
by
the
time
you
are!
!
Slide 76
Slide 76 text
Note: WordPress is broken,
so you can't use WordPress functions
Slide 77
Slide 77 text
wp_mail(…);
mail(…);
×
✓
Slide 78
Slide 78 text
05
HOPE FOR THE BEST,
PREPARE FOR REVERT
Slide 79
Slide 79 text
Why?
Slide 80
Slide 80 text
You can't predict everything
Slide 81
Slide 81 text
master
Author: Vincent Driessen
Original blog post: http://nvie.com/archives/323
License: Creative Commons
develop hotfixes
Slide 82
Slide 82 text
master
Author: Vincent Driessen
Original blog post: http://nvie.com/archives/323
License: Creative Commons
develop hotfixes
revert
work with the broken code
on your development site
Slide 83
Slide 83 text
No content
Slide 84
Slide 84 text
1. Make development & staging sites
2. Use git and Git Flow
3. Use the Restricted Site Access plugin
4. Customize error pages
5. Revert code in case of emergency