Running WordPress on Nginx

Hopefully, this is old-hat to many of you by now, but trying to figure out how to get my Apache configs to play nicely with my Nginx configs on my local dev machine has proven – shall we say – challenging. I had a need to spin up my WordPress instance locally for some theme and plugin development a couple months ago and decided to bite the bullet and just get it running on Nginx so that I didn’t have to switch server contexts between my PHP and Node.js projects.

It took me a little time to work out all the nuances, but when everything was said and done, it really wasn’t very hard. For me, I generally set up a dev.* subdomain on my local box for whatever site I’m currently working on. So, if I’m actively developing my site here, I usually start with simply verifying my /etc/hosts entry (sorry PC users, I’m working Mac all the way here):

Once you’ve registered your hosts, requests to the specified domain will be routed to that IP address (localhost). So, now, we need to be sure that we have something able to listen on port 80 to resolve those requests. In my case, I like to create a new server conf file for any new projects I’m wanting to run locally. In this case, I’ll create a new file here:

The following config is pretty self-explanatory, but we will look at it in a little depth:

The first section to call out is where we tell Nginx the order in which to look for index files in our directories. Immediately after, we include a conf file we have created explicitly for PHP handling:

The php-fpm file essentially tells Nginx how and where to process PHP requests via FastCGI:

This config assumes you’re running FastCGI on the default port 9000, obviously. Once this is set up, you can restart Nginx, and requests to your host will begin flowing.

In order to get the WordPress piece working well, I just needed to reflect some of my Apache mod_rewrite rules here in Nginx. That is what the following lines are doing:

With this redirect in place, all routes will be passed through to the WordPress query parser at index.php.

That’s really all there is to it! With your configuration set up and Nginx restarted, WordPress will be served locally mirrored to the previous Apache behavior.

Testing Hapi Plugins

Recently, I have found myself needing to build out some authorization modules for both Hapi and Express applications. Hapi has become my server of choice, and building some fully testable plugins has been a priority. In the process, I have learned several techniques that have really streamlined my testing.

There are a few tools I’ve settled on for the baseline structure of my testing:

Test runner and base framework
Chai (Chai.expect)
Assertion library
Mocks, Stubs, Spies and many other useful helpers
Simplifies assertions against explicit routes in our server
Mocks Node’s HTTP request library for injection of responses

Continue reading →

PHP Routing Library

For the past few years, I have been working more and more with Node.js and proportionally less frequently with PHP. As might be expected, though the underpinnings of web behavior is platform agnostic, the architecture for the web application layer changes to suite the technology stack in which you are building. In fact, one of the marks of a savvy engineer is the ability to leverage the best parts of a technology in the way they build their software. However, I found myself spending far too much time trying to relearn techniques in PHP for projects as I came back to them, so I decided to see if I could build a lightweight routing system in PHP that would mirror some of the patterns I use in my Node.js work every day.

Anyone who has worked with Express, Hapi, Django, Rails or even Grails can understand the ease of route declaration with something like this:

Continue reading →

Triggering True onChange Event for Text Fields

Something I’ve run into on multiple occasions is the desire to be able to trap the change event of text fields and textareas – not just on blur but when their value actually changes. I will assume some basic understanding of how DOM elements behave and that, while the input and textarea nodes have change events, they don’t actually fire in all browsers until you move away from them. This led me to thinking that there has to be a somewhat optimal way to trigger an event on those fields only when their value changes. If you’ve ever tried something like this before, you may have settled for a combination of listening to keypress and keyup events to get your desired behavior across all browsers, but once again, you have to attach this to all. elements on which you wish it to behave. jQuery once again allows us to develop a very simplistic solution in a relatively tiny bit of code:
Continue reading →

WordPress Plugin: Ajax and WYSIWYG Comments

I spent a good bit of time on Google and the WordPress Codex trying to figure out the best way to customize comments to use Ajax for posting. I finally decided to write my own plugin to solve the issue, since there are a lot of ideas but no real concise nor comprehensive solutions that worked across the board. Additionally, I wanted to offer the capability of using a custom version of the built-in WYSIWYG editor (TinyMCE) to users for comment modification as well. If you have some time to check it out and leave me some feedback, I would appreciate the input!

Custom Google Voice Widget Creation

If you use Google Voice, you may be familiar with the option of creating widgets that you can place on your website which allow people to enter their phone number and request to be connected to your Google Voice number. There are several benefits to this type of behavior, but the best of these is that you can offer people the opportunity to call you without ever publicly displaying your phone number. What’s more, each new widget creates a unique buttonId associated with it that allows you to record a custom voicemail response for users of that widget.

Of course, the downside to use of the widget system is that it is not customizable at all, and it is only available in the form of a rather large Flash button to place on your site. After some digging and research, I finally figured out how to post requests to your unique buttonId via standard HTML forms. Taking this to the next level (and much more usable, I might add) lets us create a manual Ajax handler that will make our request to connect the user without ever leaving our page.
Continue reading →

BackboneJS: Dynamic Override of sync() Method

As with any good solution, there needs to be a valid problem you’re trying to solve. In this case, I ran into a challenge at work and wanted to share the concepts of what I needed to accomplish in case anyone else has run into similar troubles.

I was assigned the task of integrating a new UI with a preexisting backend API, which is really not that big of a deal in and of itself. However, as I wanted to use BackboneJS as our client MVC framework and the API was by no means RESTful nor consistent, I quickly became aware that I would need to manually override the sync() method of nearly every one of my models in order to have things function properly. Again, in and of itself, this is not a problem, but working in an environment where maintenance and change are the rule, I wanted to figure out a way to extract the customization in such a way as to be extremely easy to manage.
Continue reading →

Custom Event Management in JavaScript

If you have used any JavaScript libraries before, you are most likely quite familiar with the concept of binding functions to specific events within an object, but have you ever considered creating your own custom events for your JavaScript classes to allow users even more flexibility in implementing your code? Binding listeners to user events (such as click or mouseover) is a necessity for robust coding, but what happens when I want to allow developers to execute a specific bit of logic only when my library element has been rendered to the page? I need to build my code in such a way as to give “hooks” to the coder in the form of events for which they can listen.
Continue reading →

HTML5 Canvas Layering

I have recently begun to study a couple different ideas to ease the pain of more complex animations using the HTML5 canvas element. Primarily, I have been focusing on layering – stacking individual transparent canvas elements – to achieve a robust effect and help manage individual objects without having to redraw the entire pane with every refresh. In the orbit example above, the center sphere and background are drawn statically on the bottommost layer, while the animation of the satellites is calculated and drawn on a second layer. By clicking on the demo, you can toggle the visibility of the animation layer. If you cannot see the animation at all, you may want to consider picking up a real web browser: Firefox or Chrome are always good options.
Continue reading →

Debug Logging in JavaScript

So, one of the repeat topics I’ve heard in JavaScript discussions both internal and external to work is that of tracing and logging JavaScript activities. What is the best way? How do you know in what order your code is actually completing? These are all valid concerns, and thankfully, there is a fairly easy way to help yourself out. There are back-end libraries to assist with this type of logging such as Apache’s log4j – which has been ported to other popular languages like PHP and C++, but what about seeing under the hood of your browser run scripts?
Continue reading →