Install Composer with Puppet and Vagrant

I started a personal project to update my WordPress theme so that it would match the design on my portfolio site. In the process; I decided it would be a good time to use Vagrant, and in particular, a project called VagrantPress to quickly setup a WordPress development environment. The advantage I wanted to capitalize on was the convenience of throwing away the environment once the project was finished. I didn’t want to leave any remnants of PHP or custom path variables on my laptop after the project was done. It would also be easy to develop on multiple machines since the vagrant instance would be the same across all devices.

After I checked out the VagrantPress project from github, I was ready to roll (commence finger tent gesture). Ran vagrant up. But sadly, errors were thrown about plugins not able to install due to an issue with PEAR. What?? PEAR has been around for a long time and I’ve used it on many, probably every PHP, project. Why is it failing? After some digging around the internets, I came across an  end of life message from the folks that develop/maintain PEAR and PHPUnit. Sad days. The people involved with that project deserve major recognition for their efforts and service through the years. Thousands of PHP projects still rely on PEAR and will have to transition to Composer (or other dependencies managers) if they haven’t already.

Install Composer with Puppet

Alas, new methods to install PHP plugins have emerged in the past few years, and Composer has become the de facto dependency manager for PHP.

This shouldn’t be a big deal to fix, I thought. VagrantPress is using Puppet to provision Vagrant. In other words, puppet handles automated tasks for installing infrastructure dependencies and configurations. I’ll use a puppet project that installs Composer to modify the way VagrantPress installs the PHP Quality Tools. Long story short, it wasn’t easy and I went another route. I still used puppet, but created my own puppet manifest for installing Composer based off an example I found. Here is what I ended up with:

Continue reading

Building Responsive Layouts: Redux

tl:dr version

  • new Demo
  • new CodePen
  • GitHub Repo
  • Adjusted codebase to use relative positioning and left floats. No longer using absolute positioning for fixed columns

Thank You for Your Feedback!

I wrote an article about building responsive layouts in December 2013. It has received a lot of traffic and great feedback. But there is a problem with the codebase, and I have a few commenters to thank for noticing the issue. If it wasn’t for the community using the code in their projects and providing feedback, I wouldn’t have noticed the problem. Thank you, readers!

The Problem

A few people responded that they experienced issues with the header and footer not rendering correctly above and below the content area. I looked into it and discovered that that the solution I crafted had a document flow problem; which caused some unforeseen problems in the responsive layout. By using absolute positioning on the fixed column, the element was effectively taken out of the document flow. That means that the HTML document is unaware of the height, width, and any content in that section. Which is why the footer will overlap with the column that is absolute positioned (if that column is taller than the fluid column). See the figure below:

Continue reading

Use jQuery to Mimic nth-child Behavior in IE8

Nth-child pseudo-selectors are a cool way to supercharge your CSS. They do a great job of styling a group of elements that need slight changes based on their order. A popular example of this is a grid system, or any similar list of items.

This works great in modern browsers, but if you are developing sites that need to be compatible with IE8 and below, you’ll find that :nth-child does not work.

You can use an alternate method to :nth-child by explicitly chaining elements together with the ‘+’ selector. This will select adjacent siblings. However, this method does not scale well and will likely break if your list is dynamic. Below is an example:

 ul > li:first-child + li + li { color: red; } /* find the 3rd list item and color it red */ 


Instead, use conditional comments in your HTML and leverage jQuery to add IE specific selectors in your CSS to recreate nth-child rules.


<!--[if lt IE 9]>
    <link rel="stylesheet" type="text/css" href="css/ie-style.css">
    <script src="scripts/vendor/jquery.min.js"></script>
    <script src="scripts/nth-child-fixer.js"></script>

Continue reading

Lessons from my Uncle Joe

A couple months ago my uncle passed away from a sudden heart attack. Regrettably, I hadn’t seen him or talked to him since Christmas last year. Not surprisingly, his death hit the entire Johnston family incredibly hard.

As soon as I heard the news, I started thinking of what a wonderful uncle he had been. Memories I hadn’t thought about in a long time came flooding back.  I began to reflect on how much he, and the entire Johnston family, helped shape me as an adult; much more of an influence than I had realized.  The following are some of my memories and lessons I learned from my Uncle Joe.

When I was in my teens, my cousin had a small dirt bike, and Joe let my brother and I give it a try. It was the first time I’d ever been on a motorcycle. On my first go, I rode it around his yard in small circles. After I got the hang of the basics, I did a lap around the backyard; all by  myself. During that lap I dumped the bike and tore up his backyard by trying to pull the bike up while continuing to hold down the throttle (rookie mistake). The bike did a couple spins in the yard with me running next to it, tearing up the grass and leaving a big circular patch of dirt. The patience and kindness Joe showed me after I came back around to the front yard (with clumps of dirt and grass littered on the handlebars of the bike and embarrassment on my face) was something I always kept with me. I expected him to be upset about potentially damaging the bike and messing up his yard. He just teased me a bit (in typical Joe fashion), but was ultimately concerned that I hadn’t been hurt.  Still, I haven’t been fond of motorbikes since.

Continue reading