I found this to be an entertaining ~30 minute video over front-end web security. While I’d heard of XSS and CSRF, I was not aware of a few of the hacks, especially those that include CSS.
Development
a8cgm automattic bowen island cloudfest dallasmatticians development do_action git github harley davidson hero instagram javascript jetpack kareless karelessfamily latergram lonestardrift meetup mercury officetoday photo101 photos php phptek pistol pokemongo Programming react rome scm ted travelmattic vancouver video wapuu wcbos wcdfw wcokc wcus whistler wichita falls wooconf wordcamp WordPress
-
Hack Day: WebdriverIO and Mocha
June 23rd was the second hack day that has occurred since I joined Automattic in July 2014, and the first hack day that I participated in.
For this hack day, I chose to figure out something for functional testing since it’s 1) so far been a bit over my head and 2) could prove useful in my work at Automattic.
What is a hack day?
In the hack day announcement post, one of my coworkers described the hack day as:
The Hack Day is an opportunity to work on anything and everything around Automattic’s services and/or WordPress.
Personally, I looked at the hack day as an opportunity to learn a new technology that I’d been interested in but hadn’t had the chance to learn yet.
A new functional testing framework
A few weeks ago, I spent a full day trying to figure out why a functional test was no longer working on WordPress. Long story short, I was able to narrow down the issue to a conflict with PhantomJS and React, the latter of which now powers a large part of WordPress.com.
After figuring this out, I began to look into different testing frameworks that would allow us to test React, and eventually settled on WebdriverIO for the browser automation. This seemed to be a fairly easy choice because WebdriverIO:
- supports multiple browsers (including Chrome which works with React)
- is built with JavaScript
- is able to be deployed on hosted testing services like SauceLabs or Browserstack
- has a plugin for visual regression testing
The end result
While I’m not sure I can call what I ended up with a “framework”, I am happy with what I was able to do in just one day.
I was able to get tests written for logging in and out of WordPress.com as well as testing deactivation/activation plugins through Jetpack Manage functioned as expected.
You can find the source code at: https://github.com/ebinnion/WordPress.com-Functional-Tests
-
Blank Web Page with PhantomJS and CasperJS
Today, I was attempting to debug an issue where some of our functional tests were not running with the new React powered parts of WordPress.com.
As part of the debugging process, I decided to see if the tests would pass when run from my local machine instead of our test server. But, any time I ran a test, the test would fail.

An Example Test
Here is part of the test that we use to test the log-in/log-out functionality on WordPress.com
[javascript]
casper.test.begin( ‘Can log in to WordPress’, function suite( test ) {
casper.start( ‘https://wordpress.com/’, function() {
test.assertExists( ‘.click-wpcom-login’, ‘Login link exists on front page when logged out’ );
} );casper.run ( function() {
test.done();
} );
} );
[/javascript]But, when I run this test, this is the output that I get:
[code]
# Can log in to WordPress
FAIL Login link exists on front page when logged out
# type: assertExists
# file: logging-in-out.js:3
# code: test.assertExists( ‘.click-wpcom-login’, ‘Login link exists on front page when logged out’ );
# subject: false
# selector: ".click-wpcom-login"
[/code]To debug this test, I dumped the HTML to my terminal and got this:
<html><head></head><body></body></html>The Fix?
After searching a bit, I found this answer.
It seems that there was a mismatch between the version of TLS that WordPress.com uses and the version that PhantomJS uses.
I was able to get my test to work by changing the command to:
casperjs test --ssl-protocol=any logging-in-out.js -
Perceived Speed and Optimization
I was lucky enough to speak at WordCamp Orlando last December.
My presentation, titled Perceived Speed and Optimization, discussed some examples of improving user experience through optimistic interfaces.
Looking back, I probably should’ve waited a few more months so that I could have come up with more examples and I could’ve talked more in-depth about the subject.
You’ll notice that my talk ends at about 12:30 and the video is over 27 minutes long. My presentation ended up being much quicker than I expected. I was so nervous during this presentation due to the size of the theater as well as the caliber of the audience.
I consider this presentation a learning experience and a push to prepare better next time.
For a better explanation of optimistic interfaces see The Need for Speed: Optimistic Web Interfaces.
-
Anatomy Of A WordPress Hack - Brennen Byrne
This WordCamp presentation by Brennen Byrne is a great introduction to common hacks such as XSS, SQL injection, and Clickjacking.
The biggest takewaway for me was that security exploits are usually found in the small details.
For example, the XSS vulnerability that Brennen discussed was caused because a single tag out of 5 or 6 was not escaped.
-
9 truths that computer programmers know that most people don’t.
Macleod Sawyer recently wrote a blog post titled “9 truths that computer programmers know that most people don’t.”
While I believe there was truth in each fact, there were a few quotes that stood out.
“Under the hood, most critical software you use every day (like Mac OS X, or Facebook) contains a terrifying number of hacks and shortcuts that happen to barely fit together into a working whole. It would be like taking apart a brand-new 747 and discovering that the fuel line is held in place by a coat-hanger and the landing gear is attached with duct tape.” – Ben Cherry
“Programming is thinking, not typing.” – Casey Patton
For the other truths, visit the full article which is linked below.
Source: 9 truths that computer programmers know that most people don’t.
-
Modernizing The WordPress Toolbox – Aaron Jorbin
Aaron Jorbin, WordPress committer and developer at Condè Nast, recently spoke at PHP UK Conference 2015 about Modernizing the WordPress toolbox.
While I am a WordPress core contributor, I was not aware of all of the steps that went into updating the WordPress contribution and build process over the past few years. It was interesting to get that information from Aaron in this video.
One of my favorite sections was at 37:54 when Aaron Jorbin says:
It’s important to learn from yourself. If you are a solo developer on a project, you might think, “Well, this experience works for me.” But, you have to ask yourself, “Does it really work for you?”
Take a look at your bash history. How many times are you repeating the same commands over and over again. That you’re doing 3 steps in sequence every day, multiple times a day. If you’re doing that, you should automate it. You should not have to do three steps in a row to complete a task. You should be able to do just one.
— Aaron Jorbin
Also, Aaron mentioned theme days for his personal projects. at about 39:06.
Every Monday Aaron tries to add in new metrics or find a new way to analyze metrics.
Every Tuesday Aaron focuses on tools; focusing on making it easier to write code.
-
JavaScript Masterclass | JSConfUS 2013
This past Friday night, a coworker on Mercury, Enej Bajgoric, shared this video of Angelina Fabbro speaking at JSConfUS 2013.
Based on the title of the video, I was certain that I would come away with a more advanced understanding of closures or some other JavaScript topic.
But, I was pleasantly surprised that the video was non-technical. Instead, Angelina talked about topics such as:
- What makes a good programmer?
- What level programmer am I?
- Are there natural programmers?
- How to get from intermediate programmer to expert programmer.
The video is just over 22 minutes and, in my opinion, well worth the time it takes to watch.
-
The Need for Speed: Optimistic Web Interfaces
Shortly after starting at Automattic, I became interested in optimistic interfaces after Beau critiqued some work I had done on O2.
One of the best videos I found to introduce and demonstrate optimistic web interfaces was this one of Guillermo Rauch, who happens to be a coworker at Automattic, speaking at dotJS 2013.
-
Visualizing Sorts
It’s one thing to know which sort to use given a situation, but it’s much more interesting to see a sort in action.
Here are a couple of videos that will show sorts at work.
-
React.js Conf Round-up 2015
The React.js conference was held last month, but tickets were not easy to come by.Never fear though, because the React.js team recently came out with a Round-up post of some of the best content from the React.js conference.
Being new to React.js myself, I’m looking forward to taking away a few nuggets that I can apply to WordPress.com.
-
Mouse: A Language for Microcomputers
The only class that I’ve ever truly worried about passing was my compiler design class with Mr. Richard Simpson at Midwestern State University.
While the material was interesting at times, it was almost always several levels over my head and I had a hard time keeping up.
Even though I constantly worried about passing that class, I did have quite a bit of fun with at least one project in that class — Converting the C based interpreter for Mouse into any language of our choice. You can probably guess that I decided to go with PHP 🙂
I’m not sure why I was fond of that language. It was esoteric, hard as hell to understand, and there was almost no chance that I would ever use it for any practical situation.
After all, looking at this sample program below, do you have any idea what’s going on?
[code]
"Enter a positive number that you would like fibonacci numbers up to."A0=
B1=
C1=D?="You entered: "D.!"!"
"Fibonacci Sequence: "(D.C.-^ A.!" "AB.=BC.= CA.B.+=)
A.!" "B.!
"!"
$$
[/code]But something about it was enjoyable. Which is why I geeked out so hard the other day when I came across an old copy of the Mouse: A Language for Microcomputers.
Now that I’ve got the book, I’m considering creating a JavaScript based interpreter for Mouse.
Until then, here’s a link to the PHP based interpreter of Mouse that I came up with about a year ago.
https://github.com/ebinnion/Mouse-Playground/blob/master/translations/mouse79.php
At this point, the interpreter doesn’t include macros, but should run all of the sample programs in my Mouse repository.
-
How to Squash Commits with Git
Part of my Git workflow at Automattic includes getting a pull request going as soon as possible.
I find this workflow useful as I am learning the code base for the latest version of WordPress.com, which is completely different from any codebase I have touched before. Because of this, I try to commit often so that I can get feedback and collaborate with my coworkers.
And while committing often is great to get feedback in a pull request, I tend to like to squash all of the commits into one before I merge my pull request into master.
How I Squash Commits with Git
The first few times I squashed commits with Git were very nerve wracking as I was worried about nuking my changeset. But, as I have worked more with Git in a team setting, I have become very comfortable with these following steps:
- Get merge base
git merge-base my-branch-name master - Rebase
git rebase --interactive {hash from merge base} - Change
picktosquashfor all but first commit
Although I have grown comfortable with the above commands, I find that I sometimes still refer to this awesome article from edX about rebasing pull requests.
If you find you need a bit more explanation for how to squash commits with Git, I’d recommend giving that article a read.
- Get merge base
-
Working with React joinClasses
Note: joinClasses is now deprecated and you should use classnames. There is an explanation of how to use classnames at the end of the article.
React has slowly been coming together for me over the past few weeks as I have slowly moved from “how do I get this thing to work?” to “how can I factor this out?” mindset.
As I’ve slowly ventured into composition with React, one of the pain points that I’ve had was elegantly concatenating classes.
After a tip from Beau and some searching, my first try at concatenating classes in React was done using the
classSetutility. And while I was able to useclassSetto concatenate classes in a React component, I didn’t find it to be a very elegant or easily readable solution.A bit more searching led me to a utility named
joinClasses.Using React joinClasses to Concatenate Class Names
Here is an example of how I am using
joinClassesto concatenate CSS classes in a React component.[javascript]
var React = require( ‘react’ ),
joinClasses = require( ‘react/lib/joinClasses’ );module.exports = React.createClass( {
render: function() {
var selected = ( this.props.selected === this.props.className ? ‘selected’ : ” );return (
<li className={ joinClasses( this.props.className, selected ) } >
<a href={ this.props.href }> { this.props.label }</a>
</li>
);
}
} );
[/javascript]this.props.selectedabove is a string that represents which sidebar link should be selected andthis.props.classNameis the class of the current sidebar link.If the two match, then we want to add a class of
selectedto the sidebar item along with any classes that were passed inthis.props.className.If there were more classes to be conditionally added based on
propsthat were passed in, I would look into combining theclassSetutility along with thejoinClassesutility.Using classnames instead of joinClasses
React has deprecated joinClasses and has suggested that developers use the
classnamesnode module instead.So, first things first, you’ll want to install
classnames. You can usually do this in the root of your project, and you’ll use this command:npm install classnames. Note, you might want to usenpm install --save-dev classnamesin order to update yourpackage.jsonfile.Once you have installed
classnames, you will then need to require it in your JSX file.[javascript]
var classNames = require( ‘classnames’ );
[/javascript]Once we have required
classnames, we should be able to simply swap outjoinClasseswithclassNames. Here’s an updated example:[javascript]
var React = require( ‘react’ ),
classNames = require( ‘classnames’ );module.exports = React.createClass( {
render: function() {
var selected = ( this.props.selected === this.props.className ? ‘selected’ : ” );return (
<li className={ classNames( this.props.className, selected ) } >
<a href={ this.props.href }> { this.props.label }</a>
</li>
);
}
} );
[/javascript]Also, because
classnamesis so robust and will allow us to send an object to it, we can simplify the code a bit:[javascript]
var React = require( ‘react’ ),
classNames = require( ‘classnames’ );module.exports = React.createClass( {
render: function() {
var classes = classNames( this.props.classNames, {
‘selected’: this.props.selected === this.props.className
} );return (
<li className={ classNames( this.props.className, selected ) } >
<a href={ this.props.href }> { this.props.label }</a>
</li>
);
}
} );
[/javascript] -
Dynamically Add Classes with React classSet
Note: React.addons.classSet is now deprecated and you should use classnames. There is an explanation of how to use classnames at the end of the article.
Earlier today, I needed to add some classes to a link. One class was passed in through a prop, but the other class would be added based on a boolean condition.
It’s simple to access props within a React component, so my first crack at setting the classes looked something like this:
[code]
<li className={ this.props.className }>
<a
href={ this.props.href }
onClick={ this.setLayoutFocus }
className={ this.props.selected === this.props.className ? ‘selected ‘ + this.props.className : this.props.className } >
<span className="menu-link-text">{ this.props.label }</span>
</a>
</li>
[/code]Eww… check out that nasty looking ternary.
Good thing for pull requests, because that one was denied pretty quickly. In the pull request feedback, Beau Lebens mentioned that there was a CSS utility included with React called classSet.
He mentioned that the React classSet utility would be helpful because I’d be able to build my classes string without having to have a bunch of conditional statements and string concatenation. #winning
So, I went Googling and figured out how to use the React classSet utility. Here’s the relevant documentation for using React’s classSet for class name manipulation.
Here’s an example of how the React classSet utility works from the documentation linked above.
[javascript]
render: function() {
var cx = React.addons.classSet;
var classes = cx({
‘message’: true,
‘message-important’: this.props.isImportant,
‘message-read’: this.props.isRead
});
// same final string, but much cleaner
return <div className={classes}>Great, I’ll be there.</div>;
}[/javascript]
This is a simple example, but what about the case where the class is passed in via a prop as opposed to just being switched on or off by a boolean?
Second Try with React classSet
This try at adding classes via the React classSet utility allows us to add a class that is passed in via a prop.
[javascript]
render: function() {
var classes = React.addons.classSet({
‘selected’: ( this.props.selected === this.props.className )
});/*
* Since the className changes from sidebar item to item,
* we dynamically add this sidebar item’s class as a key.
*/
classes[ this.props.className ] = true;return (
<li className={ classes }>
<a href={ this.props.href } onClick={ this.setLayoutFocus } >
<span className="menu-link-text">{ this.props.label }</span>
</a>
</li>
);
}
[/javascript]Note that in this second try that we are dynamically appending our class that was passed in via the
classNameprop to the classes object.Then, when we call
className={ classes }our string of classes is created.Using classnames instead of classSet
React has deprecated
React.addons.classSetand has suggested that developers use theclassnamesnode module instead.So, first things first, you’ll want to install
classnames. You can usually do this in the root of your project, and you’ll use this command:npm install classnames.Once you have installed
classnames, you will then need to require it in your JSX file.[javascript]
var classNames = require( ‘classnames’ );
[/javascript]Once we have required
classnames, we should be able to simply swap outReact.addons.classSetwithclassNames. Even better though, sinceclassnamesis so robust, we can just pass inthis.props.classNameas an argument.[javascript]
render: function() {
var classes = classNames( this.props.className, {
‘selected’: ( this.props.selected === this.props.className )
} );return (
<li className={ classes }>
<a href={ this.props.href } onClick={ this.setLayoutFocus } >
<span className="menu-link-text">{ this.props.label }</span>
</a>
</li>
);
}
[/javascript] -
Increase GoDaddy max_execution_time
I recently moved a couple of my sites from Dreamhost to GoDaddy’s managed WordPress hosting.
While one of the websites migrated perfectly fine, the other website had issues with the WordPress importer failing. :/
My best guess of what was happening is that the GoDaddy max_execution_time was set quite low, which was causing the importer to fail. I confirmed this by downloading the phpinfo plugin which showed the following:

Let’s Increase the GoDaddy max_execution_time
It took a bit for me to figure out how to increase the max_execution on GoDaddy’s managed WordPress hosting, but after quite a bit of search I found an article on GoDaddy’s support portal that describes where to put the PHP initialization files for the varying GoDaddy hosting products.
Easily enough, the PHP initialization file for GoDaddy’s managed WordPress hosting is located at
html, which is the initial directory upon logging in to SFTP.So, to increase GoDaddy max_execution_time, all I had to do was:
- Open an SFTP connection
- In the same directory as
wp-config.php, create a.user.inifile. Note the leading. - Lastly, in this
.user.inifile, I added the following:
[code lang=text]
max_execution_time = 180
[/code]The above will increase the GoDaddy max_execution_time to 3 minutes, which you can verify yourself by using the phpinfo plugin mentioned above.

Unfortunately for me, increasing the GoDaddy max_execution_time didn’t fix my issue of the WordPress importer failing. I ended up moving my site to WP Engine which worked like a charm.
-
jQuery.inArray() Fooled Me
A couple of months ago, I found myself wanting to check if a value was in an array in JavaScript. Since I come from a PHP background, I was super excited to see that jQuery has an
inArray()function.So, I popped
$.inArray()into the program, did a few tests to make sure it works, and then committed it. The next day I got a bug report…
Turns out that I forgot an edge case. What happens when the value I’m searching for is at the front of the array?
jQuery.inArray() Does Not Return a Boolean
Coming from a PHP background, I expected
jQuery.inArray()to return atrueif the value was found in the array and afalseif the value wasn’t found in the array.My mistake here is that I didn’t read the documentation well enough, or I would have seen that
jQuery.inArray()is equivalent to using.indexOf().So, instead of returning true when the value is found in the array,
jQuery.inArray()was returning the index within the array where the value was found. If the value is not found,-1is returned.:facepalm:
So, instead of having my conditional look something like this:
[javascript]
var numbers = [ 1, 2, 3, 4, 5 ];
if ( jQuery.inArray( 2, numbers) ) {
// do something
}
[/javascript]I decided to use this:
[javascript]
var numbers = [ 1, 2, 3, 4, 5 ];
if ( jQuery.inArray( 2, numbers ) >= 0 ) {
// do something
}
[/javascript]Lesson Learned
RTFM and Slow Down…
We all require looking at the manual at some point when we program. Sure, there’s a few choice functions you use on a day-to-day basis for which you remember the parameters, order of the parameters, etc.
But, so much of a developer’s job is searching — Whether that’s on StackOverflow or Google. 30 more seconds would’ve been all it took for me to get it right.
-
So, You Want to Learn to Program?

An old friend of mine got in touch with me today and asked:
Hey man… Best idea for beginning to learn programming?
I was actually very excited when my friend reached out because, in my opinion, learning to program is something that can only enhance one’s possibility of advancement in many careers.
But, Before You Get Started…
I don’t doubt for a second that you could learn to program. But, that doesn’t mean it’s easy.
Sure, in some cases it is fairly simple. For example, let’s write a program that just says “Hello World”.
[code lang=javascript]
console.log( "Hello World" );
[/code]Now, let’s print out every number up to 1,000 that is odd in Javascript
[code lang=javascript]
for ( var i = 1; i < 1000; i++ ) {
if ( i % 2 == 1 ) {
console.log( i + ' is odd' );
}
}
[/code]For funsies, here’s a video that shows you how to run both of these little snippets in your browser.
That being said, while basic programming and writing code itself is fairly simple, being a good developer is much more complex. I’ll defer to Beau Lebens on this subject and link you to his post, “Why Web Development is Complex.”
If you’re still here and are still interested in learning to program – Hell yes! Let’s get on with it then 🙂
Where to Get Started
My absolute favorite place for beginner tutorials on programming, including everything from iOS and Android to web development, is Treehouse. This is a paid website, starting at $25, but is well worth it for how well organized the videos are.
I was very lucky to get a free account for two years when Treehouse had a giveaway for students. That being said, I would gladly pay the $25 per month if I were just starting to learn.

Once signing up and logging in, you will be presented with many tracks that you can learn from. These tracks start you off at a very basic level and bit-by-bit teach you the many thing you need to become a beginner developer.

You want to build the next badass iOS app. Great, do the “iOS Development with Objective-C” track.
Do you want to learn web development? Awesome. Take the “Front End Web Development” track.
Here is an example of the quality of the interface and videos that you will get within each lesson.

And Start a Damned WordPress Site
My passion for development all started with me creating a WordPress site. Sure, I supplemented along the way with my BA in Computer Science, but nearly all of web development skills are self-taught by actually building stuff.
So, go get a cheap hosting account. Figure out how to install WordPress. Install some plugins and a theme. Then, when you want to add something cool to your site? Figure out how to program it.
Here’s the thing… The WordPress community is amazing. There is no shortage of tutorials, code snippets, and amazing people to help you learn to program.
-
Users Do the Damnedest Things
https://twitter.com/sempf/status/514473420277694465
I had a good laugh over this tweet yesterday when I read
-1 beers. After all, who the hell orders negative beers?But as I thought more about the tweet, it struck a chord with me.
While the tweet was meant as a joke, it pointed out the fact that we, as developers, have to ruthlessly test our software and assume that users:
- Have no idea how to use our software
- Are intentionally trying to melt our servers

Example: Uploading 1700+ Images at Once
As a developer, I would seriously doubt that anyone would ever want to upload 1700+ images at once through a web interface.
But, as a user, I found myself doing exactly that today after I found out that cloud drive has unlimited free photo storage for prime users!

Takeaway
For me, this Tweet served as a reminder that I should test my code not only how it should be used, but how it might be used.
-
Print PHP Stack Trace
I was having a bit of trouble tracking down exactly where a method was getting called from today.
Usually a search in my project directory will turn up the result very quickly, but I wasn’t having luck with PHPStorm for some reason.
So, the next best thing was to get a stack trace so that I could get the last few functions that had been run. I don’t do stack traces much in PHP, so I had to track down the code to use.
Of the few options to use, this seemed to be the easiest to use and remember.
$e = new Exception; // Output the stack trace to the browser echo $e->getTraceAsString(); // Send stack trace to error log error_log( $e->getTraceAsString() );And if you’re wanting more verbose output, including the arguments that were passed to each function, try this.
$e = new \Exception; // Recursively print the stack trace print_r( $e->getTrace() ); // Log the stack trace object error_log( print_r( $e->getTrace(), true ) );