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>
<![endif]-->

Continue reading

Removing Unnecessary CSS with Grunt and UnCSS

tl;dr version


While working on my portfolio I made myself a mental note to go back through the CSS and remove un-used CSS blocks. Since I was using Font Awesome (which is a really great icon font project), I knew I needed to manually remove a ton of styles that weren’t being used in the design. Things like the CSS animation section and all the icons I was not using from the library. As the project kept growing, I started to dread the day I would need to sift through the code and manually delete styles. It was turning into a daunting task.

Then I stumbled upon Addy Osmani’s article about grunt-uncss. The plugin uses PhantomJS to load your webpage and remove un-used CSS. Open Source FTW!

The biggest reduction in file size came from the Font Awesome library and the un-needed sections in the normalize.css file. All of those and a few others are concatenated into my master stylesheet using grunt.

After running the service, the results were a 53% (38kb -> 18kb) reduction in file size and an 18.5% (76ms -> 62ms) faster load time!

Caveats: the service removes CSS that may be needed conditionally. Like form validation styles for IE, or styles added using JavaScript; such as using responsive nav.

To prevent this, I ran uncss and created a new file titled styles-uncss.css. I then ran a diff against the original CSS file and the uncss version. This method allowed me to easily see what was removed. I then added bits back into the master CSS file which were needed that the plugin was not aware were needed.

Building a Responsive Two Column Layout

UPDATE #3: A new article has been added that addresses the layout issue with this solution. Please read about the new version of the codebase if you want to avoid the document flow issues found in this tutorial.

UPDATE #2: Added navigation/menu section to the demos. The GitHub repo and CodePen example has been updated.

UPDATE: Based on numerous comments about how to include a footer in the layout, I have added a footer to all examples with accompanying styles. Thank you everyone for your feedback! The GitHub repo and CodePen example have been updated as well.

tl;dr version

  • Demo
  • CodePen
  • Github Repo
  • Use min-width media queries to progressively enhance the layout of the design.
  • Use “box-sizing: border-box” to calculate borders as part of the total width of an element.
  • Use Scott Jehl’s Respond.js polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more).
  • All wireframes were created using Balsamiq Mockups. I highly recommend this tool for making quick wireframes.

Introduction

This tutorial will explain how to create a two column layout with one fixed column and one fluid column. The example is basic, but it can be expanded to have multiple columns, even fluid nested columns. We will start with a mobile first view that consists of the columns stacked on top of each other. We will later add media queries to make the columns sit side by side as screen size allows.

I created this tutorial because there are many examples on how to use a grid framework for responsive layouts, but not enough examples on how to create a custom layout that doesn’t need a full blown grid framework. Those frameworks are wonderful and very educational, but typically I don’t need an entire grid framework. I just need a simple flexible layout. I don’t need the overhead of styles that I won’t use and I have no use for a 12 column grid system.

Let’s imagine a layout that has a fixed right column of 300 pixels wide (or 18.75ems, if you are using 16 pixels as your baseline) and a left column that will be fluid. The left column will be for main content. The right column will be used for sidebar content. A place for ads, links, or other ancillary content.

Continue reading