The Eclectic Quill

Website of Joshua McGee


Just when you thought you had mastered cross-browser testing…

Just when you thought you had mastered cross-browser testing, emoji come along

Just when you thought you had mastered cross-browser testing, emoji come along


Badass programmers

I strongly recommend everyone (especially non-techies) read the discussion "Who are/were some of the most badass computer programmers?" at Quora.  It's too easy for non-programmers – even for programmers – to forget that all software, at its foundation, is written by human beings.  Everything is somebody's baby.  Just turns out that some mommies and daddies are WAY more badass than others.

My list of utter badasses would include the following:


  1. Ada Lovelace
  2. Alan Turing
  3. Dennis Ritchie
  4. Donald Knuth
  5. Jeff Dean
  6. Linus Torvalds
  7. Richard Stallman
  8. Steve Wozniak
  9. Tim Berners-Lee

Check out the Wikipedia pages I linked to, and realize just how much they shaped the world we live in.


9 Free WordPress Plugins You Should Be Using

One of the best features of the WordPress blogging and content management system is how extensible it is via a system of plugins.  There are thousands and thousands available.  Here are nine of the best free WordPress plugins that you should be using.


This plugin by Simon @ WPsites is a cannot-live-without for a developer, and I would not be surprised if it were incorporated into the default WordPress installation at some point.  It provides a multi-tab code editor for PHP, HTML, text, Javascript, and other files in your WordPress installation.  It provides keyboard shortcuts for common tasks such as indentation, commenting, and search-and-replace.  It performs code validation, and refuses to save a malformed file (no more messing up the footer and having your entire site fail to load).  Saving happens through an AJAX call, so you do not need to reload your browser to see your changes take effect (placing it parsecs beyond the built-in editor for WordPress).

One weird behavior frustrates me.  The user gets a modal warning about leaving the page whether or not the content has changed.  I think this should only display if there is unsaved content.  But aside from this minor quibble, this plugin is extraordinary, and you need it on every one of your WordPress installations.

HTML Import 2

WordPress, and the WordPress community, has always been excellent about providing importers from other blogging platforms, so that you can ease the transition from, say, Blogger, to your shiny new WordPress installation.  But what if you have an old-fashioned Web 1.0 website with the data stored in a bunch of static files: no content management system at all?  Enter HTML Import 2.

This plugin by Stephanie Leary, which humbly inserts itself under the "Settings" tab, provides extensive configuration options so that you can specify the default directory file (that fun index.html vs. default.htm issue); lets you import the whole file or just the contents of an HTML tag; offers the ability to add images and documents to your media library; can clean up bad HTML and do special-character conversion; and even populate custom fields.  And that's just a sampling of its functionality.

The code is really solid: I've used it extensively and never run into a problem.  My confidence in this plugin is so high that, when I've needed to scrape another site for data, I've sometimes just coded the scraper to create well-formed static files and let HTML Import 2 import the information into the WordPress database, rather than risk damaging a WordPress database externally with my own code.

Check this one out if you have a bunch of static content to convert, or if you're scraping other sites' content and want a well-tested avenue into WordPress internals.

Google XML Sitemaps

A dirty little secret of web publishing is the degree to which Googlebot — the crawler that indexes the web for the Google search engine — taxes a website.  Googlebot is aggressive and fast and visits very frequently, and each of the visits costs server resources.  But you can't exclude Googlebot in your robots.txt file because that would sound the death knell for your site.

Fortunately Google documents a preferred format of an XML file that a webmaster can use to direct Googlebot to the important areas of the site and — crucially — to give hints to how frequently Googlebot should visit each page on the site.  Your front page?  By all means, have Googlebot visit it every day!  Your "About" or "Contact" pages that you've carefully crafted and you don't intend changing any time in the near future?  Tell Googlebot that it never changes (or, better, that it changes only once a month) and you can make a polite suggestion to Googlebot that it does not visit the page a couple times per day.

This plugin by Arne Brachhold automates the creation of this XML file from your WordPress installation's content.  You can set the frequency that Googlebot should visit different pages (again, they are just polite suggestions) and the plugin will generate compressed and uncompressed versions of the XML file that web crawlers see.  You can make sure that all your content (even the content that you are not sure is linked anywhere) is visible to Googlebot; you can configure it to regenerate the sitemap in the background every time you change content; and you can ping the major search engines to notify them of a new sitemap every time this happens.

Slick Social Share Buttons

It seems that there are more social sharing plugins than any other category.  I've probably tried twenty of them, and I'm happiest with this one, Slick Social Share Buttons.  This plugin by Lee Chestnutt provides an unobtrusive, attractive presentation of sharing buttons to a variety of social networking sites.  They are all loaded when the page loads, which will slow things down and drive Ghostery crazy, but neat functions like optional floating, configurable positioning, custom skinning, and targeting by WordPress page category make this very useful.

I have found one edge-casey little bug.  If you have a Facebook account linked to a page you administer, you're logged in as the page, and you visit a site with this plugin enabled, everything goes to hell.


This is (mostly) the fault of Facebook, with the weird way that Facebook presents its "switch profiles" modal.  But with this plugin installed, you (as of this writing) render the whole page unusable for the first thirty-or-so seconds.

There's an easy CSS patch for the visual issues that I hope the plugin authors will consider.  Add the following to your custom CSS:

#nav-dcssb li#dcssb-facebook.size-box {
  overflow: hidden;

This will change the appearance to the following:


After the thirty seconds, the modal will disappear and the "Like" button will simply be missing


… but at least you won't have messed up your page presentation in the process.

PHP Code for posts

Sometimes you need to execute PHP code within a specific post, or within a few posts.  Do you really want to go in and edit functions.php, especially when a coding mistake can cause a 500 error on every page of your site?  Do you really want to write your own plug-in for little tasks like this?  PHP Code for posts provides an alternative.  Code a block of HTML and PHP code, store it in the WordPress database (not filesystem), and you get a shortcode you can use in a post or a page.  Have a mistake in your code?  No problem!  You just get blank output from the shortcode.

I use this plugin by The Missing Code extensively for performing reporting on my sites.  I write the code I need to generate a report in PHP Code for posts, insert the shortcode in the draft of a post, and preview it.  Voila: a report.

The editor leaves a lot to be desired.  There is no rollback if you break something.  Also, editing happens via a standard HTML text field, and every time you save it, it returns you to the listing page.  Fortunately the save button is just an HTML link, so you can command-click it to save it and open the listing page in another tab, so you don't have to navigate back.  This is a really silly oversight, and I hope the plugin author will make the easy fix at some point.  But in terms of usefulness of being able to insert arbitrary PHP code into a WordPress page without the risk of a server error, this plugin is certainly worth your time.

WordPress SEO by Yoast

WordPress SEO by Yoast reaches for the stars, successfully reaches the planets, and lets you disable the star-aspirations.  It provides a large expanse of options and features, including previewing the way your site will look in Google; setting OpenGraph images; generating XML sitemaps (disable this and use the Google XML sitemaps plugin instead); providing breadcrumb functionality; customizing your RSS feed; fiddling with permalinks; a whole bunch of SEO features that I have not gotten around to using; and a range of options that arguably shouldn't have been included in an SEO plugin to begin with.

The author is clearly very ambitious and competent, but the plugin has the general feeling of being written by someone who thinks he can do everything better than you can.  Maybe that's true most of the time — but it's nice to be able to disable features when you disagree with that.

WordPress Console

So, you're a developer.  Maybe you're writing a plugin.  Maybe you come from a language such as Perl or Ruby that has a command-line console to test your code interactively.  And you've been stuck with basically writing trace statements in HTML on rendered pages to see what's going on inside your code.

You don't have to worry about that any longer with WordPress Console.  This plugin by Jerod Santo provides a (usually) well-behaved interactive console for your WordPress installation with access to all of WordPress's built-in functions as well as any custom functions you've added.  You can step through your code; print and print_r variables; and otherwise get closer to a real coding platform for your WordPress install.

Compared to some of the other plugins listed here, WordPress Console can be a bit frustrating.  You will likely find yourself reloading the page and beginnning your execution from the top a number of times.  I'm not sure this was avoidable — these could be WordPress quirks, not errors on the part of the plugin author — but be ready for some frustration.

MailPoet Newsletters

MailPoet Newletters is not exactly a free plugin, falling more into the category of "freemium".  The authors want you to sign up for a subscription plan that will likely be chump change to a big site and prohibitively expensive to a small site.

But I am recommending this plugin by Wysija ("What You See Is Just Awesome") enthusiastically because the free features it provides are better than the pay features of many other services.  Seriously, this is an impressive plugin for sending newsletters to your subscribers.  In addition to a wide range of templates, it provides a full-featured drag-and-drop editor; tracks the subscribers who have opened and the subset of those who have clicked on links in your emails; offers excellent subscriber management and automated unsubscribe functionality; has a great stats presentation for each newsletter; and automatically generates a browser version that can serve as a permanent hosted version of the newsletters you've sent.

A feature I'd like would be a way to incrementally add new subscribers to an existing mailing.  Currently, if you want to send an old newsletter to a few new subscribers, you have to duplicate the old newsletter, create a custom subscriber segment, and send the new version to those subscribers.  Quite a pain.  And maybe some of you run sites successful enough that a premium subscription would be worth the $99 to $399 (depending on your purposes) per year, which allows you to send emails to more than 2000 subscribers, see what was clicked, and more.

Contact Form 7

Another contact form?  Snore...

Wait, though.  How about a contact form plugin that allows addition of CAPTCHA or text challenges; allows you to specify required fields; provides front-end validation; allows (get this) uploading of file attachments; and allows full configuration of your notification emails.  Configure your form; get a shortcode; put the shortcode on your "Contact Us" page — and you're done.

Contact Form 7 by Takayuki Miyoshi is really powerful.  It's one of the class of plugins that you might have to be a dev to get the most use out of — it's not especially user-friendly, and requires you to write stuff that seems a lot like code — and some stuff I thought would be easy to do (such as hidden fields that I could populate with Javascript) were impossible without adding additional custom templates.  But this is what I use everywhere now for contact forms.

WordPress is awesome; these plugins make it even better.  If you liked this article, subscribe from the sidebar on this page and you will be notified about a planned post of more plugins you'll want to be using.  Enjoy!


Adding click handlers to dynamic content (and why you shouldn’t style inside your links)

Ran into this stumper while programming my Global List of Local Pearl Jam Groups for my site.  I have a global map with clickable countries.  When the user clicks a country, I populate a hidden modal dialog box with Javascript and display it.  And I wanted click events to fire for every link in the dialog box.


The dynamic content was structured like this:

  <li><a href="">Link A</a></li>
  <li><a href="">Link B</a></li>
  <li><a href=""><b>Link C</b></a></li>
  <li><a href=""><b>Link D</b></a></li>

One's first guess might be the following:

$('#dialog-box li a').click(function(e){

But this won't work, because the links don't exist when the DOM is loaded.  Thanks to this helpful answer by Blender on StackOverflow, I learned to use .live instead of .click:

$('#dialog-box li a').live('click', function(e){

Bingo!  The links get click handlers assigned as they're loaded.

Well, links A and B do, anyway.  Links C and D keep logging undefined.

In retrospect, this should have been really obvious, but this is due to a quirk/feature in jQuery: when a click event is fired on <a href=""><b>Link C</b></a>, e (the event) has its srcElement set to b, not a.  That is, when you try to read the href attribute of the event, it tries to read the href of a bold tag, not a link tag.

This is why you should program in a far less lazy fashion.  If you absolutely must use a bold tag, you have to structure like this for the link handler to work:

  <li><a href="">Link A</a></li>
  <li><a href="">Link B</a></li>
  <li><b><a href="">Link C</a></b></li>
  <li><b><a href="">Link D</a></b></li>

But far better would be to use CSS like this:

a.strong {
  font-weight: bold;

... or even better ...

a.strong {
  font-weight: 700;

... and structure your HTML like this:

  <li><a href="">Link A</a></li>
  <li><a href="">Link B</a></li>
  <li><a class="strong" href="">Link C</a></li>
  <li><a class="strong" href="">Link D</a></li>


Create a favicon with ImageMagick

This script, which will run on UNIX, Linux, and Mac OS X systems, will take any input image file that ImageMagick can handle and convert it into a .ico file with resolutions of 256x256, 128x128, 64x64, 32x32, and 16x16 pixels.  The image will be resized, and if the starting image is not square, the image will be centered and padded with transparency.

Copy this and paste it into a file called favicon-maker:

SEC=`date +"%s"`
`cp "$1" favicon"$SEC".png`
`convert favicon"$SEC".png -resize 256x256 -bordercolor transparent -border 128x128 -gravity center -crop 256x256+0+0 +repage favicon-256"$SEC".png`
`convert favicon-256"$SEC".png -resize 128x128 favicon-128"$SEC".png`
`convert favicon-256"$SEC".png -resize 64x64 favicon-64"$SEC".png`
`convert favicon-256"$SEC".png -resize 32x32 favicon-32"$SEC".png`
`convert favicon-256"$SEC".png -resize 16x16 favicon-16"$SEC".png`
`convert favicon-16"$SEC".png favicon-32"$SEC".png favicon-64"$SEC".png favicon-128"$SEC".png favicon-256"$SEC".png favicon.ico`
`rm favicon"$SEC".png favicon-16"$SEC".png favicon-32"$SEC".png favicon-64"$SEC".png favicon-128"$SEC".png favicon-256"$SEC".png`

You will need to make it executable, so type the following in the same directory:

chmod +x ./favicon-maker

To convert an image called my_cat.jpeg to a favicon, type the following and a favicon.ico file will be created in the current directory:

./favicon-maker my_cat.jpeg

If you want it accessible from everywhere, go to the directory where you saved the file and type the following:

sudo cp favicon-maker /usr/local/bin/favicon-maker

Then when you want to run it, you can type the command without the leading './':

favicon-maker my_cat.jpeg

If you don't want a favicon to appear in your visitors' browser, and you are tired of seeing 404s on favicon.ico in your logs, download this transparent .ico file, rename it to 'favicon.ico', and move it into your root directory.