Saving changes made in Chrome’s Web Inspector

It is wonderful to be able to use Chrome’s Web Inspector development tools to tweak the CSS of a web page to get elements just right. However, what is the best way to apply these changes to the actual stylesheet? One could, of course, just move these changes by recreating the tweaks to the CSS document manually. There is a way, though, to actually save out the modified CSS file right from the Web Inspector. To do this, simply click on the CSS link at the right-hand side of the Styles palette:

CSS link

 

Clicking on the link will open up the modified CSS file in the Web Inspector’s Sources tab:

sources

 

Right-clicking on the opened CSS file will allow you to view the changes made to the CSS file via the Elements tool (Local Modifications) as well as save out the changed CSS file which you can use to replace the old CSS.

Right click

Using MailCatcher for local mail testing

When developing web applications on your local machine, you will often want to test e-mails. For the longest time, I would use an environmental switch in PHP depending on the domain (for example, I would set different values if the domain was stirrell.second-cup-of-coffee or www.second-cup-of-coffee.com) and include values for email addresses. I had my local MAMP really sending out emails and this worked fine. Of course, there is always the chance you’re going to miss an email somewhere and inadvertently send out a real email when you just want to test.

A good solution to this problem is to use a “fake” SMTP server – a program that simulates sending an email and allows you to see what would have been sent – but only exists on your local machine. I had been using one on the Macintosh – MockSMTP which is available on the Mac App Store. It had been working fine for me. I set it up according to the instructions here and it all worked swimmingly… until I upgraded to the newest Mac OS X, Mavericks. I did not receive any errors but I also never received any test emails. Bummer. I sent a tweet to the folks who make MockSMTP but never got a response – the app itself has not been updated since 2011 so I fear that an update might not be coming.

I searched around for an alternative to MockSMTP. Many of the ones I saw were Java-based multi-platform solutions which did not appeal to me. I finally decided to give the free MailCatcher a try. MailCatcher is a Ruby Gem so is installed via the command line and called through the command line. I followed the instructions at their site and it worked straight away.

To get MailCatcher working with PHP, I edited the php.ini configuration files to use catchmail for the sendmail path. In MAMP, you simply go to File > Edit Template > PHP and then choose the version of PHP you are using. You can tell what version of PHP you are using with MAMP by going to the “Server” tab:

PHP version

I added the following line to my configuration file:

sendmail_path = /usr/bin/env catchmail

Once that is set, all email sent by PHP will go to MailCatcher. You can view mail sent to MailCatcher using a browser to connect to your local machine on port 1080 (http://127.0.0.1:1080/). You will get a simple web interface for viewing the mails that have come in. From then on, simply type “mailcatcher” in the Terminal to start up MailCatcher. This will give you a simple way of testing emails on your local machine without worry of emails getting sent to the client.

Passing PHP variables to JavaScript

I was recently working on a project in CodeIgniter and I was setting numeric variables with constants for things like locations (1 = Maine, 2 = New Hampshire, etc.). This all worked fine but when it came to doing some JavaScript AJAX work I didn’t have access to these constants. One of the advantages to using these constants is that I did not want to have to change the value in more than one place if a value changed or I wanted to add a new location, for example. My way to solve this was to pass my PHP variables through to JavaScript using json_encode.

In my CodeIgniter controller, I set the variables I wanted to use in JavaScript:

$footerData['javascriptVariables'] = array(
'sheetID' => $sheetID
);

Then, in the footer, I checked for the existence of $javascriptVariables and, if it is not empty, I echoed out the json_encoded value:

// Were there any variables set via PHP for use in the JavaScript?
if (!empty($javascriptVariables)) {
echo "<script type='text/javascript'>\n";
echo "var php_variables = " . json_encode($javascriptVariables) . "\n";
echo "</script>\n";
}

This results in something like:

<script type='text/javascript'>
var php_variables = {"sheetID":"8"}
</script>

Then, in my JavaScript, I can easily get access to the sheetID set in PHP:

php_variables.sheetID

I suspect that I could also automate the process of making all my PHP constants available in JavaScript by using get_defined_constants.

Sublime Text’s Extend Selection to Word in TextMate 2

One of the coolest features of Sublime Text 2, in my opinion, is the ability to use the command, “Extend Selection to Word” with Sublime Text’s multiple cursors. Using this command, one can highlight a word they want to change, select the command (or the key command equivalent) which selects the next instance of the word with multiple cursors and then you can replace both words (or as many words as you select) by typing once. I thought that TextMate 2 was missing this feature and that I would have to replace words one at a time or rely on replacing all within a selection. It turns out, though, that TextMate has this feature as part of the Text Bundle.

By default, the “Extend Selection to Include Next” command is bound to the Control-w keys and is available in the Text bundle under Menu Actions > Selecting.

Extend Selection to Include Next

You can, of course, change the key binding (I made it the same as I have it in Sublime Text 2 – Command-D). I absolutely love this feature and am glad to see that it is available in TextMate 2.

Changing Posts per Page in WordPress admin

Here’s a quick WordPress tip. One thing that always bugged me about the admin interface is that WordPress shows just 20 posts per page in the admin list leading to a lot of clicking the paging navigation. Well, WordPress allows you to change the number of posts shown per page. Go to the Screen Options dropdown at the top of the page. One of the options is the number of posts. Change it to a larger number and deal less with clicking through pages. I never knew about this handy feature until a coworker of mine pointed it out.

Post per post WordPress

Display the caption of a featured image in WordPress

Have you ever wanted to display the caption of a Featured Image in WordPress? I recently had need to do this and figured out a way to accomplish this.

When you set the Featured Image for a post in WordPress, you can add additional information for the image: Title, Caption, Alt Text and Description.

Set caption for featured image

It makes sense to me that you might want to display the caption for a Featured Image, if entered. My solution to this was to add a function to my functions file to use to display the caption. My function looks like this:

 function my_display_featured_image( ) {
global $post;

$thumbnail_id = get_post_thumbnail_id($post->ID);
$thumbnail_details = get_posts(array('p' => $thumbnail_id, 'post_type' => 'attachment'));
$thumbnail_src = wp_get_attachment_image_src( $thumbnail_id, 'full' );
$thumbnail_width = $thumbnail_src[1];

if ($thumbnail_src && isset($thumbnail_src[0])) {
echo '<div class="featured-image';
if ( !empty( $thumbnail_details[0]->post_excerpt ) ) echo ' wp-caption';
echo '" style="max-width: ' . $thumbnail_width . 'px;">';
if ( !empty( $thumbnail_details[0]->post_excerpt ) ) {
echo '<p class="featured-image-caption">';
echo $thumbnail_details[0]->post_excerpt;
echo '</p>';
}
the_post_thumbnail( $post->ID );
echo '</div>';
}
}

First, we get the information for the post we’re on. We do this by making the $post global. This will give us access to the id of the post we’re on. From there, we can call get_post_thumbnail_id to get the id of the Featured Image. Once we have the id of the Featured Image, or attachment, that we want, we can then use WordPress’s get_posts to grab the record of the Featured Image. The details of the Featured Image are stored in the variable $thumbnail_details using the call:

$thumbnail_details = get_posts(array('p' => $thumbnail_id, 'post_type' => 'attachment'));

get_posts accepts the arguments of WP_Query so, in our example, ‘p’ is the post id (the id of the Featured Image) which we were able to get using get_post_thumbnail_id. This query returns an object which includes the Featured Image’s caption in the ‘post_excerpt’ value and the description is available in the ‘post_content.’

I am also grabbing the source of the attachment image and using the width of the image to set some inline CSS (in my particular case I wanted to float the image so I wanted to set the width). wp_get_attachment_image_src gets the url and image dimensions and returns the values in an array.

So, now I have the image’s URL, dimensions and caption. With this information, we can display the image. To check if there is a caption present, I just need to check the value of the post_excerpt returned by my get_posts call.

if ( !empty( $thumbnail_details[0]->post_excerpt ) ) {
echo '<p class="featured-image-caption">';

Finally, I use the_post_thumbnail to display the featured image. In my template file, if the post has a Featured Image, I call my function to display the Featured Image.

<?php if ( has_post_thumbnail() ) :
my_display_featured_image();
endif; ?>

That is how I display a Featured Image’s caption.

Inspecting rollover elements in Chrome and Firefox

For some reason, this was never apparent to me but it is actually pretty straightforward. I used to use tricks to inspect rollover elements like changing the CSS display: none to display: block inline with Firebug. But there is actually a much easier way to test these elements.

In Chrome’s Web Inspector, simply use the Elements panel and click on the element, when hovered over, triggers a drop down menu. On the right-hand side of the Inspector, where the element’s CSS information is shown, there is an icon of a mouse pointer hovering over a dashed box. Click that, and you will be given options to change the state of the element. You can change the element’s state for active, hover, focus, and visited.

Changing the hover state in Chrome

In Firefox, using Firefox, doing this is just as easy. Inspect an element with Firebug and choose the item in the HTML panel. On the right-hand side, you will see the Style information for the selected element. The tab for the Style panel has a little down arrow to the right of the label. Click that and among the options are hover, active and focus. Click on hover and you can style the item that is hidden until triggered by a rollover.

Hover in Firebug

Again, this is probably something most people probably figured out long before I did but finding these features made my development much easier.

Responsive testing in Firefox

In my last post, I discussed testing a responsive design in Google’s Chrome using the Web Inspector. Well, Firefox also has a way to test responsive designs. Simply go to Tools > Web Developer > Responsive Design View:

Responsive design view in Firefox

Firefox then gives a simple interface, which I actually find cleaner than Chrome’s, to see sites in a variety of breakpoints selectable from a dropdown list of pre-defined resolutions. You can also add your own set of resolutions to the dropdown as well as “rotate” the device. Unlike Google Chrome, there is no easy way to set the User Agent to emulate iOS, Android, and other devices. There are extensions to do this, though.

Firefox responsive interface

Getting to the responsive tester in Firefox is easier than in Chrome. I also don’t like that, in Chrome, the Web Inspector needs to remain open to continue responsive testing. I have found that as soon as the Web Inspector is closed, the viewport reverts back to normal. To revert back to the normal view in Firefox, one must unclick “Responsive Design View.”

Responsive testing in Chrome

I recently read about a really handy feature in Chrome’s Web Inspector that makes it easy to test responsive designs with different viewport sizes and user agents. To emulate a viewport, first open up the Web Inspector (Option-Command-I on the Mac) and click on the little gear icon in the bottom-right of the inspector:

gear in Chrome's Web Inspector

This will show a panel with many advanced options for the Web Inspector. On the left-hand side of the panel, choose “Overrides” under “Settings.”

overrides

The Overrides section will allow you to choose a User Agent from a drop-down menu including Android and iOS mobile devices and you can set the emulated screen dimensions of the device. There is also a little handy button to flip your entered dimensions to easily emulate switching from landscape to portrait.

testing-responsive

I have found this feature to be incredibly handy for responsive testing and a feature, from what I can tell, to be missing from Safari.

Adding a Prefixr command to TextMate 2

I was recently looking into how to add a Prefixr command to TextMate 2. For those of you not familiar, Prefixr is a way (created by Jeffrey Way of NetTuts) to take a new-ish CSS property like box-shadow or transform and add all the vendor-specific prefixes automatically. So:

transform: rotate(-7deg);

becomes:

-webkit-transform: rotate(-7deg);
-moz-transform: rotate(-7deg);
-o-transform: rotate(-7deg);
-ms-transform: rotate(-7deg);
transform: rotate(-7deg);

to accomodate the prefixes for Webkit browsers (Safari and Chrome), Firefox, Opera and Internet Explorer. These prefixes are used by the different browser vendors to experiment with newer CSS properties before the standard has been finalized. So, ideally, these prefixes would eventually go away as the these properties become standardized across browsers.

Jeffrey actually has an example of how to add a command to TextMate 1 in his introduction article to Prefixr and this works perfectly in TextMate 2. I simply went to “Bundles > Edit Bundles” and chose the CSS bundle. I then clicked “New” and chose “Command.” In my new command, I pasted in the command from Jeffrey’s article:

curl -sSd "css=$TM_SELECTED_TEXT" "http://prefixr.com/api/index.php"

I chose Selection for the Input so that my highlighted text would be acted on. I also entered “source.css” for the scope and… it worked great! But, I tested it in a SASS document (.SCSS) and, because of the scope… nada. It wasn’t available as an option when searching all my commands. Well, one can add more than one scope by separating them with commas. So I changed the scope to:

source.css,source.scss

And the command is now available to me in both CSS and SASS.