The Eclectic Quill

Website of Joshua McGee

By

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

By

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:

badass-programmers

  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.

By

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.

WPide

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.

slick_social_share_1

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:

slick_social_share_2

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

slick_social_share_3

… 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!

By

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 pjsho.ws 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.

ss-pjshows-lg-520

The dynamic content was structured like this:

<ul>
  <li><a href="http://example.com/a">Link A</a></li>
  <li><a href="http://example.com/b">Link B</a></li>
  <li><a href="http://example.com/c"><b>Link C</b></a></li>
  <li><a href="http://example.com/d"><b>Link D</b></a></li>
</ul>

One's first guess might be the following:

$('#dialog-box li a').click(function(e){
  console.log($(e['srcElement']).attr('href'));
});

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){
  console.log($(e['srcElement']).attr('href'));
});

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="http://example.com/c"><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:

<ul>
  <li><a href="http://example.com/a">Link A</a></li>
  <li><a href="http://example.com/b">Link B</a></li>
  <li><b><a href="http://example.com/c">Link C</a></b></li>
  <li><b><a href="http://example.com/d">Link D</a></b></li>
</ul>

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:

<ul>
  <li><a href="http://example.com/a">Link A</a></li>
  <li><a href="http://example.com/b">Link B</a></li>
  <li><a class="strong" href="http://example.com/c">Link C</a></li>
  <li><a class="strong" href="http://example.com/d">Link D</a></li>
</ul>

By

Twenty Years of Magic: The Gathering

Twenty years ago tonight – Halloween of 1993 – I opened my first Magic: The Gathering cards and played for the first time.

A few weeks before, I had made my regular trip to Game Towne at Parkway Plaza in El Cajon, California, to check whether they had any new GURPS books in stock.  On the  black dry-erase board dedicated to new releases, in neon pink marker, read "Magic: The Gathering".  I had never heard of the game, but the name resonated with me, triggering feelings of mystery and portent and importance.  I asked Lyle, the clerk, what he knew about this game.  He said "It debuted at a festival over the summer.  It's a game that you play with trading cards.  The art is awesome – and I hear the game is fun to play, too."

Magic: The Gathering art from Beta

I placed my preorder for a "starter deck" of the game, and urged my best friends Rob and Chris to pre-order as well.  Game Towne received their shipment, from the set that would later be called "Beta", on Halloween, and my friends picked up all three of our decks on their way to my house for the little Halloween party we had planned.  Much to my frustration, they had already opened their decks in the car and had begun trading with each other before they even got to my place.  We had plans for that evening: movies and music and food, none of which materialized.  We just played Magic all night.

Magic was a new type of game: players accumulate the cards as they would baseball cards, then assemble them into decks to battle other players.  You never know what deck you will be facing when you meet an opponent: with over ten thousand cards printed over the last two decades, you can see, in casual play, an effectively infinite number of variations.

The game has come a long way.  On Halloween night of 1993, there were only 290 distinct cards that had been released.  There was no organized play.  There was no "netdecking" – copying successful decks card-for-card from Web listings – because there was effectively no Web to post the lists to.

Magic: The Gathering card back

Magic has been hugely influential in my education.  The game's mechanics taught me important concepts of computer science, early and well.  Learning to trade was a better immersion in economic theory than any Intro to Econ class ever created.  Group play taught me lessons in game theory that I still mentally refer to.  Selling a binder of cards bought me the computer on which I taught myself to program, and that led to a successful career as a software engineer.

And, of course, influential in my life in general: the draw to play the game got me out of my bedroom and forced a socially-awkward and introverted young man out into the world.

It's been twenty years.  I still play, though not as much as I used to.  I have a son now who just turned ten.  Now we play, as father and son, and it's teaching him many of the same lessons I myself learned.  The game has spurred numerous side projects of mine, including designing the "Shadow Magic" variant that became popular on AOL for a time in the mid-90s, to the SetMaker shareware program for expansion set design (the QuickBasic source code is now lost to history), to the popular and profitable ManabaseCrafter, darling of reddit and go-to source for people playing the Commander variant of the game.

ManabaseCrafter

So, here's to Magic: The Gathering.  Thank you, Wizards of the Coast for publishing the game, and thank you, Richard Garfield, for designing such a wonderful tool and toy for nerds worldwide.  Best of luck for the next two decades.