Real Developer Tools for WordPress by Stefan Didak

SHOW YOUR
DEVELOPER TOOLS
Stefan Didak
http://www.stefandidak.com
(“not a web developer”)
the “and the kitchen sink too” version
Saturday, June 15, 13

HOLD ONTOYOUR SEAT
This presentation will commence at Warp 11 speed
Due to time restraints I will not be going into how to install
things, how to conﬁgure things, or what best practices are best
applied when dealing with the things we’ll be covering today.
You’re encouraged to check the slides on the website, follow
the links and whatever you do... DOTRYTHIS AT HOME!

NOT A WEB DEVELOPER
The ﬁrst thing I did was SEARCH for the best tools!
Every job requires the right tool.
How do you ﬁnd the right tools?
What are the right tools?
Depends on WHO you ASK!

UHM... OK....
Something about “real developers” and those that call
themselves “developers”... and why I don’t do public speaking.

REALITY CHECK
Not being a “web developer” doesn’t mean we can’t teach “web
developers” a thing or two. Or three, or four, or ﬁve...
A “real” developer is
someone who...
...owns domains like arealdeveloper.com, like me! :-)
...develops the tools YOU USE and the software that
runs the servers YOU and YOUR CLIENTS run on.

ISTHISYOUR DEVTOOL?
Good for you!

OR IS IT MORE LIKETHIS?
Unfortunately this is what an awful lot of “developers” use!

THETOPICS
What we’ll be covering in this session today
How to develop LOCALLY... and WHY
Various LAMP stacks and Virtualization
Developing CODE
Tools, Editing, Debugging, Proﬁling, Managing,
Versioning, and more...
Doing it in STYLE
SCSS, SASS, LESS, Compass, etc.

FAVORITE FEATURES
But there are just too many to cover today

LIVE DEMO
Depending on what JetBrains will show
Great debugger integration
Refactoring tools for PHP
Automatically formatting code
File Watches to process ﬁles
Versioning integration & support
Unit Testing (if you’re into thatTDD crap :-)

BECAUSE LOCAL IS FAST!
Save yourself some time and work at lightning speed
How to develop
LOCALLY...
the WHY part!

BECAUSE LOCAL JUST RULES
Try to avoid working on LIVE sites, always!
Safer than messing with a live site
Faster than working on a remote server
Will work for you if your internet/host is down
Backups and local CONTROL
Full control over EVERYTHING
Resources are YOURS to deﬁne
Easier testing and faster to undo a screwup
And many more reasons...

WAYSTO DEVELOP LOCALLY
You decide how much time or money you wish to invest
A LAMP installation on your system
(local install or another system you’ve got)
Virtual Machine with a LAMP stack
(local install or another system you’ve got)
Dedicated or Virtual LOCAL HOSTING
(the ultimate freedom and power)

LAMP ONYOUR SYSTEM
Many solutions from free to moderately priced
MAMP
MAMP PRO
For Apple OSX
...and things like Homebrew
...or just installing things yourself
...or just compiling your own builds
...or all of those are just a PITA

LAMP ONYOUR SYSTEM
XAMPP
WAMP
For Windows
...and M$ Web Platform Installer
...or just installing things yourself
...or just compiling your own builds
...or all of those are just a PITA

LAMP ONYOUR SYSTEM
The GOOD:
You only need one computer to do it all...
...but could be tweaked to run on another.
Great to take along to do live demos.
All the other good stuff about doing it locally.
The BAD:
Smaller systems may get slow(...er).
The better local LAMP solutions aren’t free.

LAMPVIRTUAL MACHINE
Because virtualization is the best invention since sliced bread
“Virtualization for Dummies”
Run multiple OS’es...
...without crappy “dual boot” stuff

LAMPVIRTUAL MACHINE
Because you get to decide which solution works best for you
Microsoft Hyper-V (Windows),
VMware Workstation (Windows),
VMware ESX (Server based), VMware
Fusion (Apple OSX), VMware Server
(obsolete), Oracle VM, Sun xVM,
Virtuozzo Containers, OpenVZ,
Xen, KVM, VServer,
VirtualBox, ...and more.

LAMPVIRTUAL MACHINE
Run one or more OS’es as if they were “real”.

LAMPVIRTUAL MACHINE
Safely experiment, develop, and test, while you control the
environment that your stuff is running on, or in.
ISOLATION
Does not
interfere with
your actual OS
on the system

LAMPVIRTUAL MACHINE(S)
Why stop at just one when you can have as many as your
system resources will allow you to run?

LAMPVIRTUAL MACHINE(S)
VMware Workstation running several LAMP/Linux servers

LAMPVIRTUAL MACHINE
SANDBOXING IS NOTTHE SAME AS AVIRTUAL MACHINE

LAMPVIRTUAL MACHINE
A small LAMPVM can run on as little as 512MB of RAM.
The GOOD:
Isolated from your main system.
Control over your entire environment & conﬁg.
Snapshots and “undo”.
The BAD:
Smaller systems may not be capable.
Can get very resource hungry.
The betterVM solutions aren’t free.

LAMPVIRTUAL MACHINE
The mother of all UNDO functions
SNAPSHOTS
Imagine messing up your system
to the point of having a total loss...
... and then undoing it all with
one click

DEDICATED/VIRTUAL LOCAL
Whether you run on bare metal or virtualize it all
Step 1
Repurpose or buy a suitable computer
Step 2
Install a LAMP stack or VM solution
Step 3
Start using it.
How Big? How Small? How Much?

This Big? Well... if you want to, sure, why not! :-)
How Big?

Like 3 pizza boxes... my “mini” virtual server web-dev cluster
How Small?

Having your “development servers” in the cloud is not always
the most cost effective way to do things.
Three Quad Core Xeon’s each with
16GB RAM, 250GB SSD’s and 2TB
RAID1 storage.
Can host +/- 35-65
virtual machines for development
purposes. Low power consumption.
Costs +/- $4000 to OWN.
But +/- $800 to $1500 A MONTH (at aVM/VPS/VHost)

DEDICATEDTINY LOCAL
Small Atom’s with 4GB RAM and 120GB SSD’s.
Perfect for small LAMP servers. Runs about $300-400.
How Much?

VIRTUAL LOCAL
The advantages never stop and there’s too much to list!
Try NGINX instead of Apache to create yourself a
LEMP (not LAMP) server.
Install and experiment with PHP APC,
memcached, Varnish, and all the other cool
performance boosters.
Be able to MAKE PROPER USE of the many
great developer tools that are out there.

The learning curve for building and managingVM’s locally is
really not that bad. Really.Try it and be pleasantly surprised.
The GOOD:
Everything mentioned on slide 19.
Endless possibilities going virtual.
Highest speed and performance.
Online/hosted servers are no match for it.
The BAD:
Hardware isn’t free.You will have to invest.
There’s a learning curve.You will invest time also.

SETUP A LAMP SERVER
LAMP = Linux,Apache, MySQL, PHP
Unfortunately we will not have time for
that today so if there is enough interest
in the topic I might be persuaded to
come back and cover that topic.
It is not really that difﬁcult.
If you know how to copy and paste you can
get quite far!

A LOCAL SITE COPY
Whether you work on a local copy of a live site or develop
the site locally for later deployment to a live server
How to create a
LOCAL copy
of a LIVE site

METHOD ONE
Use the MySQL client command line or ensure you have
phpMyAdmin installed on your local server
Step 1
Get a copy of the MySQL DB
(command line, phpMyAdmin, etc.)
Step 2
Get a copy of all the ﬁles for the site
(through sFTP, FTP, etc.)
Step 3
Copy the ﬁles to your local server &
import the MySQL DB into your local
server’s MySQL instance

METHODTWO
I’ve done this also but still prefer the manual
control provided by method one.
Step 1
Install a Backup Plugin
(ithemes BackupBuddy works really well and is highly popular)
Step 2
Use the Backup Plugin
Step 3
Restore the backup to your local server

EDIT WP-CONGIF.PHP
For your local server you probably will need to edit the
wp-config.php file.
define('DB_NAME', 'myclientsite');
define('DB_USER', 'myclientsitedbuser');
define('DB_PASSWORD', 'magicpass');
define('DB_HOST', 'localhost');

BUTYOU’RE NOT DONEYET!
Just copying the site’s ﬁles and DB to a local server does
not make it magically work.
Your system/computer does not know
yet where to ﬁnd the local copy of the
site because DNS resolution will cause
your browser to see the actual remote
and live site.
Let’s take care of that...

EDITINGYOUR HOSTS FILE
You can find the hosts file in C:Windowssystem32driversetc
on Windows and /etc/hosts on OSX
10.0.2.80 my.supersite.com
Add a single line to your hosts file
containing the IP address of your local
development server and the FQDN of
your site.

ALLTHIS LOCAL STUFF WHY?
Local servers allow you to use the tools they were intended to!
XDEBUG
Debugging, Proﬁling, Tracing
Live demo using JetBrains PHPStorm
XHPROF
Really seeing what’s going on
Live demo on proﬁling with XHPROF

XDEBUG / ZEND DEBUGGER
Because your using a rock to hammer nails rather than a
hammer! Stop using a rock dammit!
THIS IS YOUR BRAIN... (we hope)

XDEBUG / ZEND DEBUGGER
Don’t get lost. Get debugging!
This is your brain WITHOUT XDEBUG

“WHY LOCAL” YOU ASKED?
Don’t try using XDEBUG on a remote server.
You’ll be sorry you tried.
XDEBUG is an Apache Module
and needs to be installed on the server
You will need full control on your server
Not possible on shared hosting
Not possible on managed hosting
Not feasible on VPS/Virtual hosting
Not sensible in a production environment

LIVE XDEBUG DEMO
Running off a 15” Mac Retina, 16GB RAM, 768GB SSD
with a 4GB RAM LAMP server onVMware Fusion
Debugging into a WordPress Plugin
Debugging into a WordPress Theme
Debugging is the same for any PHP code
and not WordPress speciﬁc. Debug stepping through
WordPress itself helps you learn, understand, and at
times makes you feel appalled at what you see!

PROFILING = PINPOINTING
I would still not want XHPROF running all the time
within a production environment
XHPROF is an Apache Module
(originally developed by Facebook to deal with PHP performance issues)
and needs to be installed on the server
You will need full control on your server
Not possible on shared hosting
Not possible on managed hosting
IS possible in a production environment

PROFILING LIVE DEMO
Still running off a 15” Mac Retina, 16GB RAM, 768GB SSD
with a 4GB RAM LAMP server onVMware Fusion
XHPROF
Pinpoint bottlenecks.
Pinpoint badly performing code.
Pinpoint site/page performance issues.
Pinpoint which developer to blame.
Pinpointing.
Get the point here?

VERSIONING
If you don’t use versioning of any kind...
...stop calling yourself a developer, please!

SCM, RCS,VCS,WHATEVER!
There are many version control systems out there, too many to
mention and too many to cover here.
Subversion (SVN), GIT, CVS, Mercurial,
Perforce, and many others...
Even if you’re not part of a team and working
alone, use versioning and use it religiously.
Plan your repository ahead of time to avoid a
nasty mess as development progresses over
time. You’ll thank me for it later.

YOUR CLIENT APP
Or go hard core and use the command line like
“real” developers do!
Tortoise SVN, Tortoise GIT,
Tortoise HG (for Mercurial),
CornerStone (OSX)
(personal recommendation for Subversion)
There are so many, both free or commercial there’s no
way I can even begin to mention the top 50.
Try some out and see what you like.

WHAT DO I NEED?
Personal preference dominates the versioning spectrum.
Use what you or your team are most comfortable with.
Step 1
Deploy a versioning server
Step 2
Setup your repositories
Step 3
Install a client for what you picked
Step 4
Always backup your repository!

WHY HOW WHAT HUH
Versioning is not a science (well, it might be!) but whatever you
do make sure you’re doing it.
There is no info on this slide because
this is such a BIG TOPIC to cover that I’m just
going to “wing it” live and not have any helpful hints
on this slide.
I HOPE that everyone already uses versioning of
some sort. If not, those folks can line up outside of the
venue here for mandatory execution and/or hot-
coal and/or ﬂogging “treatment” to deal with this
“ailment”. :-)

DOING IT IN STYLE!
CSS should be the end point that is generated,
not the “language” you should directly interact with.

SCSS, SASS, LESS
Lots of differences between SCSS/SASS and LESS
But also much of the same concept
All the things you MISS in CSS
Variables
Nested Rules
Mixins
Functions
Selector Inheritance
Control (i.e. if, for, while...)
Math (i.e. border-size * 2)

SCSS, SASS, LESS
High adoption rate!
Lots of support provided by the
editor you use.
Syntax highlighting
Intelligent editing support
“Transpilation” support in a growing
number of editors/IDE’s.

SCSS, SASS, LESS
Too much to tell and too little time since this could
easily ﬁll several meetups worth of time.
Personal Preference
SCSS/SASS
Command line...
...or through utility applications
...or through your editor/IDE

SCSS, SASS, LESS
VARIABLES
$red: #cc0000;
$margin: 20px;
.content-block {
border-color: $red;
color: darken($red, 15%);
}
.border {
padding: $margin / 2;
margin: $margin / 2;
border-color: $red;
}

SCSS, SASS, LESS
VARIABLES
$red: #cc0000
$margin: 20px
.content-block
border-color: $red
color: darken($red, 15%)
.border
padding: $margin / 2
margin: $margin / 2
border-color: $red

SCSS, SASS, LESS
VARIABLES
$red: #cc0000;
$litered: (@red + #222);
.content-block {
border-color: @red;
color: @litered;
}

SCSS VERSUS CSS
SELECTOR INHERITANCE
.content {
border: 1px #f00;
background: #fcc;
}
.thick-content {
@extend .content;
border-width: 5px;
}
.content,
.thick-content {
border: 1px #f00;
background: #fcc;
}
.thick-content {
border-width: 5px;
}

SCSS VERSUS CSS
NESTING - Efﬁcient and improves readability and maintenance
#navbar {
width: 80%;
height: 23px;
ul { list-style-type: none; }
li {
float: left;
a { font-weight: bold; }
}
}

SCSS VERSUS CSS
NESTING - Efﬁcient and improves readability and maintenance
#navbar {
width: 80%;
height: 23px;
}
#navbar ul {
list-style-type: none;
}
#navbar li {
float: left;
}
#navbar li a {
font-weight: bold;
}

SCSS, SASS, LESS
Using PHPStorm and FileWatchers to automatically
“transpile” SCSS, SASS, LESS, into CSS ﬁles.

BONUS DEVELOPERTOOL 1
Sennheiser HD800 - a must have if you’re serious!
THE FUN PART OF FINISHING THIS

BONUS DEVELOPERTOOLS 2
You’ll need many of these when you develop for real! :-)
Single Malt Scotch
Hi Stefan!
Tequila
Hi Kelly!
Bourbon
Hi Mitch!
Beer
Hi Andrei!

DOWNLOADTHE SLIDES
Because all of this must have gone way too fast for you!
http://eastbaywp.com/

LINKINGTOTHE END
BYE BYE! See y’all next month... unless you kill me...
THANKS FOR HAVING
ME BORE THE LIVING...
something OUT OF YOU!
LINKS AHEAD...

THINGS MENTIONED (1/2)
In case you want to go look stuff up for yourself
JetBrains PHPStorm
http://www.jetbrains.com/phpstorm/
MAMP and MAMP PRO
http://www.mamp.info
XAMPP
http://www.apachefriends.org/en/xampp.html
WAMP SERVER
http://www.wampserver.com/en/
Microsoft Web Platform Installer
http://www.microsoft.com/web/downloads/platform.aspx
VMware (VMware ESX, VMware Workstation, VMware Fusion)
http://www.vmware.com/
Parallels Desktop
http://www.parallels.com/products/desktop/
Virtualization Solutions
http://www.cyberciti.biz/tips/linux-virtualization-software.html
More on Virtualization and Sandboxing
http://goo.gl/PESjo
Varnish
https://www.varnish-cache.org/
Memcached
http://memcached.org/
PHP APC
http://php.net/manual/en/book.apc.php
XDEBUG
http://xdebug.org/
Zend Debugger, Zend Server, Zend Studio
http://www.zend.com
XHPROF
https://github.com/facebook/xhprof
XHGUI
https://github.com/preinheimer/xhprof
ithemes BackupBuddy
http://ithemes.com/purchase/backupbuddy/
anything I forgot to add here... simple... google it

THINGS MENTIONED (2/2)
In case you want to go look even more stuff up for yourself
Visual SVN (Windows)
http://www.visualsvn.com/
Subversion (SVN)
http://subversion.apache.org/
Tortoise SVN (Windows)
http://tortoisesvn.net/
Tortoise GIT (Windows)
https://code.google.com/p/tortoisegit/
CornerStone (OSX)
http://www.zennaware.com/cornerstone/index.php
GIT
http://git-scm.com/
CVS
http://cvs.nongnu.org/
Mercurial
http://mercurial.selenic.com/
Tortoise HG
http://mercurial.selenic.com/wiki/TortoiseHg
Perforce
http://www.perforce.com/
anything I forgot to add here... simple... google it
SCSS & Sass
http://sass-lang.com/
LESS
http://lesscss.org/
Compass
http://compass-style.org/
Compass App (OSX)
http://compass.handlino.com/
Atlassian
http://www.atlassian.com/
Altova
http://www.altova.com/
And finally, a “real developer’s” home office :-)
http://www.stefandidak.com/office/
http://www.flickr.com/photos/didak/sets/72157633152434208/

QUESTIONS
Because I’m sure there’ll be some!

Real Developer Tools for WordPress by Stefan Didak

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Real Developer Tools for WordPress by Stefan Didak (20)

More from East Bay WordPress Meetup (20)

Recently uploaded (20)

Real Developer Tools for WordPress by Stefan Didak