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

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.

Media Query Management

Responsive web design is arguably the de facto standard in web design today. One of the major principles of RWD is implementing media queries into designs to make them more flexible and more adaptive to the media that renders them. There are many wonderful examples on the web that showcase the power of media queries and how they can facilitate more adaptive designs. The examples are often only a few lines of code. This is great for learning, but those examples do not scale well in a real world project. It’s not always obvious how to organize and maintain your style sheet that includes lots of media quries. Especially if you are relatively new to the field.

An issue that I feel is not discussed enough is how quickly a style sheet can spiral out of control in a real world project. Using large blocks of media queries for the design’s breakpoints will rapidly bloat your CSS and make it increasingly difficult to navigate. Especially after you’ve left the project for awhile and come back to it later.

The following is a scenario that developers often fall into when honing their responsive web design best practices. Especially when learning how to manage media query statements. I hope this article provides you with some insight and prevents you from some of the pitfalls I have fallen into previously.

Continue reading

Media Query Snippet for Sublime Text

Declaring CSS Media Query rules has become standard practice during my recent responsive design projects. But declaring those rules has stunted my coding flow because I can never remember the correct syntax for a media query.

Even though I’ve written out the media query declaration hundreds of times, for some reason I haven’t committed the syntax to memory. I’m always looking back at a previous media query rule and pasting it to a new spot in my CSS file to declare a new breakpoint. This has become tedious because I have to stop my current flow and sift through my CSS document to find a previous media query, copy that rule, scroll back to where I was, and then paste the rule. And I’m still not done. I then need to edit the rule accordingly to change the ems or pixel breakpoint, or change the rule from max-width to min-width, or vice versa. First world problems, I know.

Since I primarily use Sublime Text 2 for editing, I decided to create a snippet that would help with whatever brain damage prevents me from memorizing the media query syntax. Now, all I have to do to create a min-width or a max-width media query is simply type ‘mq’ into Sublime and a contextual menu pops up that allows me to select the snippet (or I can press Tab). Once I’ve selected the snippet, the code is pasted into the editor, and I can type ‘min’ or ‘max’ to create the corresponding rule. I can then tab once more to add a value to my media query. Then tab again to place my cursor inside the newly created rule and start adding CSS rules.

Here is the snippet I have been using regularly. It handles min-width or max-width:

Media Query Snippet

@media screen and (${1: max or min}-width: ${2: enter value here}) {
  <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
  <!-- Optional: Set a scope to limit where the snippet will trigger -->
	<!-- <scope>source.python</scope> -->

Please give the snippet a try and let me know what you think. I hope someone else finds this snippets useful.

You can find this snippet as a Gist as well:

For more information on how to add a snippet to Sublime text, please see the following link:

Prepros: Preprocessing Made Easy

Prepros is a tool I’ve been using in my development workflow for awhile now and I wanted to give the developer ( Subash Pathak), the praise he deserves. It’s one of the best tools in my developer toolkit.

Prepros makes it super simple to setup your project with the preprocessing juice it needs. It can do all the heavy lifting for you to preprocess javascript, css, and even images. It compiles LESS, Sass, Stylus, Jade, Slim, Coffeescript, LiveScript, Haml and Markdown. It also handles JS Concatenation. And it does this on the fly while developing in real time.

Error and success notifications instantly notify you if there is a problem with your latest save when the file is processed. If the is an error, the notification windows tells you the exact line number where the error has occurred. Very handy!

There are also a bunch of features that I haven’t tried yet that look really great. Such as Live Refresh,   Multi Device Refresh, and the built-in Web Server.

All you have to do to get started is drag your project folder onto the Prepros window. The app automagically detects the type of each file in your project. It also lets you toggle the preprocessor settings for each file to allow for maximum customization. You can add as many projects as you like and Prepros will keep track of them for you.

I highly recommend trying it out on your next development project. It is super easy to setup and there are versions for Windows, OSX, and a Chrome Extension.

It is also great for those who aren’t always comfortable using the command line or don’t want to fuss with all the manual setup. Myself included.