How to install a WordPress development environment

WordPress 4.0 has forced me to update the plugins I created a long time ago to explicitly state that they are still compatible. I understand the rationale, so, eventually and reluctantly, I “decided” to comply.

To feel modern myself, I’ve been playing with Varying Vagrant Vagrants. It’s fantastic: It downloads and installs tons of stuff all by itself. It was a real pleasure to see it work… when eventually did.

First issue: (host) brew was outdated

In fact the installation for me wasn’t completely effortless, which should be VVV’s target. To be able to “4. Install the vagrant-hostsupdater” I needed to force brew to update. I did it like this:

$ cd `brew --prefix`
$ git fetch origin
$ git reset --hard origin/master
$ brew cleanup --force
$ brew update

$ 

That allowed me to complete the steps from “1. Start” all the way up to “7. …change into the new directory…” without a glitch.

Second issue: (guest) SSH was not working

But as soon as I tried to ´vagrant up´

...
==> default: Waiting for machine to boot. This may take a few minutes...
    default: SSH address: 127.0.0.1:2222
    default: SSH username: vagrant
    default: SSH auth method: private key
    default: Warning: Connection refused. Retrying...
    default: Warning: Connection refused. Retrying...
    ...

I got lots of retries. Eventually they ended, but the new virtual machine was broken, BADLY broken. In fact I could not connect to it using ´vagrant ssh´ even if according to ´vagrant status´ it was peacefully running. Neither ´vagrant destroy´ worked of course.

My only option was to kill the virtual machine from VirtualBox and look into the Vagrantfile and see if I could tweak it somehow here and there. I tried really hard but the result never changed.

So I tried one last thing: Get rid of the virtual box and repeat ´vagrant up´ once more. VirtualBox virtual machines on OSX are stored into folders like ´vvv_default_1412029772978_15676´ usually into ´~/VirtualBox VMs´.

If there were many such subfolders, the right one is obtained first by finding out the id of the virtual machine at hand and then looking for it into the list of installed virtual machines.

$ cat .vagrant/machines/default/virtualbox/id
f21d5710-66f9-4179-8f37-6421447183a3

$ VBoxManage list vms
"vvv_default_1412003846637_15289" {ef88b2f4-6de3-41e6-9e59-f2a780c6d952}
"vvv_default_1412029772978_15676" {f21d5710-66f9-4179-8f37-6421447183a3}

$

After unregistering the virtual machine, removing the folder and issuing ´vagrant up´ again… magic… SSH was working and the install script could complete. Why not before? No idea. But here was the pleasure I referred to earlier. It went on and on for many minutes, printing thousands of green lines until it gracefully ended.

$ vagrant up
Bringing machine 'default' up with 'virtualbox' provider...
==> default: Checking if box 'ubuntu/trusty64' is up to date...
==> default: Booting VM...
==> default: Waiting for machine to boot. This may take a few minutes...
    default: SSH address: 127.0.0.1:2222
    default: SSH username: vagrant
    default: SSH auth method: private key
    default: Warning: Connection refused. Retrying...
==> default: Machine booted and ready!
==> default: Checking for host entries

$ 

Third issue: (outgoing) mail was not delivered

Then I could work on everything I wanted. Connect to the databases with Sequel Pro. Open all the WordPress instances in Chrome. Install my plugins. Everything perfect. And the synced folders… awesome, they were allowing me to comfortably develop in my beloved IDE on my Mac.

I knew there was something wrong, though. I still hadn’t received any welcome emails from the WordPress instances. Well, I thought, that’s understandable. The install script never asked for my email… there must be some bogus one configured. I checked and I was right.

After entering my real email address in a WordPress instance, I triggered an email notification and waited. And waited. And waited. Nothing. Ever. Delivered. Then I checked the log.

$ vagrant ssh
Welcome to Ubuntu 14.04.1 LTS (GNU/Linux 3.13.0-36-generic x86_64)

 * Documentation:  https://help.ubuntu.com/

  System information as of Wed Oct  1 13:44:18 UTC 2014

  System load:  0.0               Processes:           86
  Usage of /:   3.9% of 39.34GB   Users logged in:     0
  Memory usage: 29%               IP address for eth0: 10.0.2.15
  Swap usage:   0%                IP address for eth1: 192.168.50.4

  Graph this data and manage this system at:
    https://landscape.canonical.com/

  Get cloud support with Ubuntu Advantage Cloud Guest:
    http://www.ubuntu.com/business/services/cloud

0 packages can be updated.
0 updates are security updates.


You have new mail.
Last login: Tue Sep 30 15:09:43 2014 from 10.0.2.2

vagrant@vvv:~$

Don’t get fooled by the message “You have new mail.” Those use to be internal notifications, like bounces.

vagrant@vvv:~$ sudo cat /var/log/mail.log
Sep 29 22:35:41 vagrant-ubuntu-trusty-64 postfix/master[14922]: daemon started -- version 2.11.0, configuration /etc/postfix
Sep 29 22:45:43 vagrant-ubuntu-trusty-64 postfix/pickup[14923]: 4FEF361088: uid=1000 from=<vagrant>
Sep 29 22:45:43 vagrant-ubuntu-trusty-64 postfix/cleanup[20405]: 4FEF361088: message-id=<e90320a1a7a9362895f309dccbb64fc6@local.wordpress.dev>
Sep 29 22:45:43 vagrant-ubuntu-trusty-64 postfix/qmgr[14924]: 4FEF361088: from=<vagrant@vvv>, size=870, nrcpt=1 (queue active)
Sep 29 22:45:43 vagrant-ubuntu-trusty-64 postfix/smtp[20407]: 4FEF361088: to=<admin@local.dev>, relay=none, delay=0.26, delays=0.14/0.07/0.05/0, dsn=5.4.4, status=bounced (Host or domain name not found. Name service error for name=local.dev type=AAAA: Host not found)
...

That must be the previous problem: ´Host or domain name not found. Name service error for name=local.dev type=AAAA: Host not found´.

vagrant@vvv:~$ sudo cat /var/log/mail.log
...
Sep 30 15:04:22 vagrant-ubuntu-trusty-64 postfix/smtp[22397]: connect to gmail.com[173.194.116.246]:25: Connection timed out
Sep 30 15:04:22 vagrant-ubuntu-trusty-64 postfix/smtp[22400]: connect to gmail.com[173.194.116.245]:25: Connection timed out
Sep 30 15:04:22 vagrant-ubuntu-trusty-64 postfix/smtp[22397]: 447AD610CE: to=<noteslog@gmail.com>, relay=none, delay=60, delays=0.13/0.09/60/0, dsn=4.4.1, status=deferred (connect to gmail.com[173.194.116.246]:25: Connection timed out)
Sep 30 15:04:22 vagrant-ubuntu-trusty-64 postfix/smtp[22400]: 5DCE3610E8: to=<noteslog@gmail.com>, relay=none, delay=60, delays=0.02/0.16/60/0, dsn=4.4.1, status=deferred (connect to gmail.com[173.194.116.245]:25: Connection timed out)
Sep 30 15:04:22 vagrant-ubuntu-trusty-64 postfix/smtp[22402]: connect to gmail.com[173.194.116.246]:25: Connection timed out
Sep 30 15:04:23 vagrant-ubuntu-trusty-64 postfix/smtp[22402]: 81BF9610EB: to=<noteslog@gmail.com>, relay=none, delay=60, delays=0.07/0.07/60/0, dsn=4.4.1, status=deferred (connect to gmail.com[173.194.116.246]:25: Connection timed out)
...

That must be the current problem: ´connect to gmail.com[173.194.116.246]:25: Connection timed out´.

As much as I could understand, somewhere internally the port 25 might be closed, basically according to the answer given by kasperd here. Then I found this article from 2014 (which is really this article from 2008) and tried it out with sendmail.

vagrant@vvv:~$ sendmail cappuccino.e.cornetto@gmail.com
From: vagrant@vvv
Subject: Sending another test

This time using gmail as a relay host.
.

vagrant@vvv:~$

Which again didn’t deliver anything but added these lines to the mail log.

vagrant@vvv:~$ sudo tail -n 10 /var/log/mail.log
...
Sep 30 21:46:40 vagrant-ubuntu-trusty-64 postfix/smtp[25034]: 8C41D610F3: SASL authentication failed; server smtp.gmail.com[74.125.136.108] said: 534-5.7.14 <https://accounts.google.com/ContinueSignIn?sarp=1&scc=1&plt=AKgnsbtg3?534-5.7.14 Fwi6Jr0mcg6q4gIav2_rBFcbwY6mbvoWrpXT8rqrpvRUX9fI5CfDKeWco86fNiV9hRbcIK?534-5.7.14 n6uBILTrjelowBHvoU2eKxkMQ3YuRrjq8bHKUgUGhvMMawvPwOCwwLyN2nIGi9dXo4rYj2?534-5.7.14 o-7jqO9pUSLXUkVyX8cjWIttVWzTQ1j1eWIfz_Zlg9xqmJ5LDNZsmryFh7ziPr_FOslmkH?534-5.7.14 61hwqlw> Please log in via your web browser and then try again.?534-5.7.14 Learn more at?534 5.7.14 https://support.google.com/mail/bin/answer.py?answer=78754 dc9sm16499591wib.5 - gsmtp
Sep 30 21:46:41 vagrant-ubuntu-trusty-64 postfix/smtp[25034]: 8C41D610F3: to=<cappuccino.e.cornetto@gmail.com>, relay=smtp.gmail.com[74.125.136.109]:587, delay=3581, delays=3578/0.1/2.8/0, dsn=4.7.14, status=deferred (SASL authentication failed; server smtp.gmail.com[74.125.136.109] said: 534-5.7.14 <https://accounts.google.com/ContinueSignIn?sarp=1&scc=1&plt=AKgnsbsgn?534-5.7.14 zH1dVVETuLiIMdK9asAblRM5tFMX31XlPYnDSO0VzMZKB_hgHIcgL7LtL5i2FteBdqcYi7?534-5.7.14 BsEXS475i9pY37jCXPHO2uijKMn-rsNl-1nK7Yy1eVklYehWcC2SSiiQ2rsCMObs1h_34f?534-5.7.14 9pzw1CwW7Wt0dw4V-1P3D8avTQyeWoLx_nH1Tmdgme4jQIyfY_kSBz3SmHTFUyiMG-8Wgr?534-5.7.14 Fimy2Bw> Please log in via your web browser and then try again.?534-5.7.14 Learn more at?534 5.7.14 https://support.google.com/mail/bin/answer.py?answer=78754 mx5sm16509114wic.0 - gsmtp)
...

Then the problem became: ´SASL authentication failed´. This one was pretty hard. I tried many different configurations. In the end I had to give up and read what Google advised right in the error message. That in turn made me follow (very reluctantly) the steps for Allowing less secure apps to access your account.

Notice that you are supposed to Allow less secure apps from the specific gmail account that you want to use for authenticating (through the server) when trying to relay, i.e. the one you set up into ´/etc/postfix/sasl_passwd´. For me that meant I had to open the link from the Chrome user associated to that account.

And as soon as I completed that LAST step, I started receiving all the messages that Ubuntu had been queueing after I had sent them. Then we both went to sleep.

vagrant@vvv:~$ exit
logout
Connection to 127.0.0.1 closed.

$ vagrant suspend
==> default: Running triggers before suspend...
==> default: Executing command "vagrant ssh -c 'vagrant_suspend'"...
==> default: Command output:
==> default: ---------------
==> default: Database wordpress_default backed up...
==> default: Database wordpress_develop backed up...
==> default: Database wordpress_trunk backed up...
==> default:
==> default: ---------------
==> default: Saving VM state and suspending execution...
==> default: Removing hosts on suspend disabled

$ 

How to kill an unresponsive Vagrant instance

I just tried to follow the instructions on VVV to install a WordPress development environment, but was not lucky. The ssh couldn’t connect and so even $ vagrant destroy could not complete.

It turns out you can kill an instance from VirtualBox like this:

– ~/dev/wp/vvv (master branch)
$ VBoxManage list vms
"vvv_default_1412003846637_15289" {ef88b2f4-6de3-41e6-9e59-f2a780c6d952}

– ~/dev/wp/vvv (master branch)
$ VBoxManage controlvm vvv_default_1412003846637_15289 poweroff
0%...10%...20%...30%...40%...50%...60%...70%...80%...90%...100%

How to know whether two values are equal or not

JavaScript’s abstract (==) and strict (===) equality operators work fine for scalars like 1, 2, and ‘2’:

1 == 2     || false
2 == '2'   && true
2 === '2'  || false

Objects are another story. Two distinct objects are never equal for either strictly or abstract comparisons. An expression comparing objects is only true if the operands reference the same object. In other words, JavaScript’s equality operators applied to objects only compare their references. That is not very useful.

So I wrote a jQuery plugin to fix that issue.

{[ .equals | 1.hilite(=javascript=) ]}

Here are some simple use cases

{[ .simple-use | 1.hilite(=javascript=) ]}

whose console output is

--
 Case 1: two undefined values
true
--
 Case 2: two null values
true
--
 Case 3: undefined and null values
 ($.equals) comparing( undefined ,  null )
 ($.equals)     found different types undefined != null
false
--
 Case 4: undefined and null values -- abstract comparison
true
--
 Case 5: two NaN values
false
--
 Case 6: two different true values
 ($.equals) comparing( 1 ,  true )
 ($.equals)     found different types number != boolean
false
--
 Case 7: two different false values -- abstract comparison
true
--
 Case 8: same integer 123, 123
true
--
 Case 9: same number 123, Number(123)
true
--
 Case 10: same numeric value 123, 123.0
true
--
 Case 11: same numeric value 123, "123"
 ($.equals) comparing( 123 ,  123 )
 ($.equals)     found different types number != string
false
--
 Case 12: same numeric value 123, "123" -- abstract comparison
true
--
 Case 13: two different strings
false
--
 Case 14: two variables referencing the same object
true
--
 Case 15: an object copy and pasted from another one
 ($.equals) comparing( Object {a: 1, b: 2} ,  Object {a: 1, b: 2} )
 ($.equals)     found different values
true
--
 Case 16: two objects with the same keys and values, but in a different order
 ($.equals) comparing( Object {a: 1, b: 2} ,  Object {b: 2, a: 1} )
 ($.equals)     found different values
true
--
 Case 17: two objects with the same keys and values, but one different value
 ($.equals) comparing( Object {a: 1, b: 2} ,  Object {b: 2, a: "1"} )
 ($.equals)     found different values at key "a" 1 != 1
 ($.equals)   comparing( 1 ,  1 )
 ($.equals)       found different types number != string
false
--
 Case 18: two objects with the same keys and values, but one different value -- abstract comparison
 ($.equals) comparing( Object {a: 1, b: 2} ,  Object {b: 2, a: "1"} )
 ($.equals)     found different values
true

Advanced usage

That’s all well and fun, but comparing non-plain objects is where $.equals shines.

With that in mind, I wrote two symmetrical operations for jQuery: scatter and gather. In Maths multiplication distributes over addition, allowing you to scatter a x (b + c) to a x b + a x c, and gather back a x b + a x c to a x (b + c). Likewise with these two operations, you can scatter jQuery over its elements: $:[ e1, e2 ] to [ $:e1, $:e2 ] and gather back [ $:e1, $:e2 ] to $:[ e1, e2 ].

{[ .scatter-gather | 1.hilite(=javascript=) ]}

Here are some advanced use cases

{[ .advanced-use | 1.hilite(=javascript=) ]}

whose console output is

--
 Case 19: object_$, $(object_$.toArray())
 ($.equals) comparing( 
[html, head, meta, title, script, link, style, script, body, p, div, span, prevObject: jQuery.fn.init[1], context: document, selector: "*", jquery: "1.11.2-pre ... ]
 ,  
[html, head, meta, title, script, link, style, script, body, p, div, span, jquery: "1.11.2-pre ... ]
 )
 ($.equals)     found different lengths 163 != 161
false
--
 Case 20: object_$, $(object_$.toArray()) -- DOM Elements only
 ($.equals) comparing( 
[html, head, meta, title, script, link, style, script, body, p, div, span, prevObject: jQuery.fn.init[1], context: document, selector: "*", jquery: "1.11.2-pre ... ]
 ,  
[html, head, meta, title, script, link, style, script, body, p, div, span, jquery: "1.11.2-pre ... ]
 )
 ($.equals)     found different values
true
--
 Case 21: object_$, $.gather(object_$.scatter())
 ($.equals) comparing( 
[html, head, meta, title, script, link, style, script, body, p, div, span, prevObject: jQuery.fn.init[1], context: document, selector: "*", jquery: "1.11.2-pre ... ]
 ,  
[html, head, meta, title, script, link, style, script, body, p, div, span, jquery: "1.11.2-pre ... ]
 )
 ($.equals)     found different lengths 163 != 161
false
--
 Case 22: object_$, $.gather(object_$.scatter()) -- DOM Elements only
 ($.equals) comparing( 
[html, head, meta, title, script, link, style, script, body, p, div, span, prevObject: jQuery.fn.init[1], context: document, selector: "*", jquery: "1.11.2-pre ... ]
 ,  
[html, head, meta, title, script, link, style, script, body, p, div, span, jquery: "1.11.2-pre ... ]
 )
 ($.equals)     found different values
true
--
 Case 23: $(object_$.toArray()), $.gather(object_$.scatter())
 ($.equals) comparing( 
[html, head, meta, title, script, link, style, script, body, p, div, span, jquery: "1.11.2-pre ... ]
 ,  
[html, head, meta, title, script, link, style, script, body, p, div, span, jquery: "1.11.2-pre ... ]
 )
 ($.equals)     found different values
true
--
 Case 24: $("body"), $("head") -- DOM Elements only
 ($.equals) comparing( 
[body, prevObject: jQuery.fn.init[1], context: document, selector: "body", jquery: "1.11.2-pre ... ]
 ,  
[head, prevObject: jQuery.fn.init[1], context: document, selector: "head", jquery: "1.11.2-pre ... ]
 )
 ($.equals)     found different values at key "0" <body>​…​</body>​ != <head>​…​</head>​
 ($.equals)   comparing( <body>​…​</body>​ ,  <head>​…​</head>​ )
 ($.equals)       found different values at key "lastElementChild" <div>​…​</div>​ != <script type=​"text/​javascript">​…​</script>​
 ($.equals)   comparing( <div>​…​</div>​ ,  <script type=​"text/​javascript">​…​</script>​ )
 ($.equals)       found different lengths 6 != 3
false

As you see, even if by looking at the console you can easily spot outstanding differences thanks to the great object inspection offered by the browser, my plugin is dumber by design, and in general it finds different differences. The important thing is that you get a false or a true when you really expect a false or a true, respectively.

In particular,

  • case 19 and 20 tell us that object_$ and $(object_$.toArray()) are not identical but they contain the same DOM elements
  • case 21 and 22 tell us that object_$ and $.gather(object_$.scatter()) are not identical but they contain the same DOM elements
  • case 23 tells us that $(object_$.toArray()) and $.gather(object_$.scatter()) are identical (but still different objects)
  • case 24 tells us that $(“body”) and $(“head”) are different… as expected 🙂
    • please notice that they are both jQuery objects containing only one DOM element, but given the way the filter is written, $.equals tries to compare also lastElementChild. We could have taken the key into consideration like filter: function(value, key) { … }

Here is a jsFiddle if you want to play around.