Category Archives: Web Stuff

I Love the Internet!

I know I’ve said it before and I’ll probably say it again, but I love the internet.

Yesterday someone posted on my Legos post saying he was from Wild Planet Toys based in San Francisco and that he’d love for Eli to try out a few of their toys.

My first thought was, “This is spam, I should delete it.” But then I thought about it some more and decided to give Devin a call. He was very excited to send Eli their game called Hyper Dash. So we’ll be getting a copy in the mail sometime in the near future. Eli and I are going to give it a workout and possibly let the other playgroup kids see what it can do and then we will be reviewing it here.

This all entertains me for a variety of reasons. I like that when I posted about a specific toy I had people coming out and saying, “Hey, we do this too. Have you tried this? How about this with that same toy?” I like that we are getting some free toys. I mean really, what’s not to like about that? I also like that Eli is following in Stephen’s footsteps already to be a game reviewer. What is it with Granades making swag out of thin air?

My next thought is I should say that Liza really wants to review something too. Maybe cool baby stuff like Baby Legs, which she has been eyeing from her perch on my lap but I am too cheap to purchase. She’s also really been wanting to try out the Robeez shoes, preferably the black Mary Janes.

Big Step

Live Granades has been invited to join an ad network. I have no idea how we got onto these people’s radar or why they thought we had the readership (outside of the LOLTrek juggernaut) to support ads, but there it is, we’ve been approached. It creates a dilemma for me that I had no idea we’d ever be faced with: whether or not to make this site more commercial.

Stephen is to blame for whatever traffic we get, what with the aforementioned LOL addictions, the toilet disassembly and the flash video instruction guide. I’m just here for the kid commentary. And the photos, the shiny, shiny photos. So on one hand, I’m sorta flattered that someone thinks we have what it takes to rake in some dough and on the other hand, I think, what the…? ads on a blog? that’s crazy talk. I know people do it. And I’m happy for them if that’s what they want and double, extra happy if they can make a living doing it. I’m just not sure that it’s right for us.

I’d love to be able to recoup some costs associated with the site (thanks to Geof the rates are low, low, low) but don’t want to have flashing, blinking things up all over our page. I’d love to have a wider readership, but that’s an ego thing talking. I guess the real ego here is thinking that they didn’t just send that email specially tailored to make a blog feel special to thousands, or tens of thousands, of other “selected” blogs. Or maybe it’s that ol’ fear of failure rearing its head. The voice in my head that whispers, “No one reads this drivel. Why bother to put ads on a page that no one looks at?” And beyond that, what would we advertise here? Breastfeeding Support Services? Guitar Hero Merchandise? Craft Supplies? Scott Westerfeld novels? Actually, that one isn’t a bad idea. I mean, I’ve read them and love them so I could be a spokesreader of sorts.

So Stephen and I have talked about it. He’s looked at some figures and we have an idea of what it means to put ads on the site in terms of redesign and also what sort of money we’re talking about here. It ain’t much, let me tell you, but all big things start small. We’ve made our decision but wondered what others think and if some of you have been approached in the same way. Maybe this is just the latest in spamming techniques and I’m slow to catch on. Regardless, we’d like to hear what you guys think.

Faking Knowledge Using Google and Wikipedia

Maybe you were participating in a discussion on a blog when someone made a joke about Rowling’s latest book, Harry Partch and the Order of the Hobos. Ha! ha! everyone else said while you stewed in a broth of incomprehension. Maybe someone said, “Hey, you’re a physicist, right? Can they really get enough energy out of 3He from the Moon’s regolith to make it worth doing?” Or maybe you want to write a blog post about the US health care system, but you don’t know anything about the subject.

That’s the problem with living in the age of information. There’s too much to know, and the amount of stuff to know keeps growing. Pop culture, internet culture, cultures other than your own, scientific discoveries, political events, historical events — it’s like trying to take a sip of water by standing under Niagara Falls. There’s only one thing to do: fake it. Learn enough to bluff your way through conversations and to figure out where to go to fill in gaps in your knowledge.

Thankfully, the Internet has given us charlatans two wonderful tools. With Google and Wikipedia, we can fake knowledge about many subjects. It’s as if we are all Thomas Friedman, only without the giant moustache. The trick is to know how best to use these tools, especially if we later want to learn enough not to have to fake knowledge.

Google

“Google?” you’re asking yourself. “Is he kidding me?” I am not. For one thing, not everyone uses Google when they should. For another thing, there’s more you can do with Google besides just typing in some words and looking at the results on the first page. The first-page approach is fine for easy searches, but to fake knowledge of more obscure topics, you may have to go farther.

One way of going farther is to tweak what you’re searching for. If you’re searching for a phrase, like part of a quotation or a snippet of lyrics, put quote marks around it. That makes Google look for pages that use the words as a phrase, instead of having the individual words scattered like shotgun pellets throughout the text. Exclude words from your search by putting a minus sign in front of them. For instance, a search on “kitchenaid mixer” returns very different results than one on “kitchenaid mixer -buy”. Change the order of words in your search or use different tenses and see what new results you get. People have a tendency to type near-sentences into Google, like “good science fair project for fifth grader”. Mix it up: “fifth grade science fair project”. Replace “fifth” with “5th”. Throw in synonyms or related words. Give the Google algorithm a shake and see what falls out.

What if you’ve got some results you like and want additional similar results? Google has anticipated your needs. For each result, Google gives a “Similar pages” link that lists other pages that Google thinks are similar to the one you’ve chosen. Google will also let you restrict your search to one website using the “site:” syntax. Let’s say you were looking for information about how accurate the TV show Jericho was about nuclear fallout and Google gave you a result from tvsciencesucks.com. You could see what else the site had to say about Jericho by doing a Google search for “Jericho site:tvsciencesucks.com”.

Eventually you’ll need to move beyond Google in your quest for more knowledge. The easiest way is by browsing sites that Google has uncovered. Follow those site’s links. Wander through other sites and see what turns up. You can even leave the web entirely and ask individual people for help. Look for people who seem knowledgeable and email or even call them. Asking experts for help is an art of its own. Instead of talking about how you should find and approach people, I’ll point you to Cherie Priest’s excellent How to Talk to Strangers.

Wikipedia

“Wikipedia?” you’re asking yourself. “What’s to know? Type something into their search box and you’re done!” Well, not quite. Wikipedia’s search is so-so, though you can overcome that with judicious application of Google’s site: search, and you can find related information by clicking an article’s hyperlinks and seeing where that leads you. But the big concern is how much you should trust an article’s information.

That’s a problem no matter where you get information from on the web, or even off of it, but the “pedia” part of Wikipedia’s name can trump common sense and make you treat Wikipedia’s information as if it had been blessed by Calliope herself. The good news is that Wikipedia gives you hints about how good an article’s information is: the discussion and history pages.

At the top of every article are tabs that lead to to the discussion and history pages. The discussion, or talk, page is where people who’ve been editing the article discuss additions to, deletions from, and contentious parts of the article. If you want to see this in action, take a look at Al Gore’s talk page. An article’s talk page may list things that aren’t in the current version of the article because people have been arguing over them. You can go back to Google and do more research about those disputed facts and form your own opinion.

The history page lets you see every version of the article and compare any two versions. Using that, you can see evidence of edit wars, where different people keep adding and deleting parts of the article. You can recover information that might be useful but that was too divisive to be left in.

All of this emphasizes that Wikipedia is no more a final destination than Google is. Wikipedia is great for giving you an overview of a topic and helping you figure out what questions you should be asking, but you’ll need to go elsewhere for verification. Use the external links at the bottom of articles to go to other sites and continue your research.

Even though Google and Wikipedia won’t answer all of your questions, they’ll get you over the hump of abject ignorance. And in some cases, what you learn from them will be enough for your immediate needs: faking knowledge.

Somewhere, Juan Valdez Stands, A Single Tear Running Down His Face

In Wednesday’s post about me giving up caffeine, I mentioned the word “coffee” once. Since then we’ve had a number of coffee-related spam comments, many of them of the “HERE IS WHERE TO GET YOUR SWEET SWEET JAVA” variety. Only a few have slipped through, thankfully. I’m amused that one use of the word has led to such an increase in targeted spam.

Yes, I realize that me bringing it up again guarantees another round or three of such spam. Enh, what’re you going to do?

Oh, and I’m headache free today. Thanks for asking.

[tags]spam, coffee, juan valdez, the sad sad lives of spammers[/tags]

Comments Have Gone Missing

Something hinky happened to our comments overnight, and we have lost a chunk of comments from about June 20th through 10:00 CDT today. We’re working to restore them from backup.

UPDATE: We figured out the problem. For those who care about technical details: Spam Karma 2 went crazy and manually spanked a bunch of comments.

LOLCODE

Amy was the first to bring this to my attention, so she gets the public blame. I, of course, cannot resist sharing it with you.

LOLCODE.

HAI
CAN HAS STDIO?
PLZ OPEN FILE "LOLCATS.TXT"?
	AWSUM THX
		VISIBLE FILE
	O NOES
		INVISIBLE "ERROR!"
KTHXBYE

Befunge and brainf*ck, A CHALLENGER APPEARS!

Adding Quicktags to WordPress and to the TinyMCE Editor for WP Plugin Authors in Many Easy Steps

A while back I wrote a WordPress plugin that adds popup images to the blog. The way the plugin works is that you add in fake HTML-ish <popim> tags and the plugin filters those and changes them to the actual HTML required to create the popup image.

That wasn’t the hard part. The hard part was when I decided to add a UI that automatically generated thumbnails for the plugin. Moreover, I decided to add a button to the WordPress editor as part of that UI. Surely that would be no problem. After all, there should be documentation for adding editor buttons, right?

Ha! I say to you, and ha! again. Clearly you are new to computers.

It took a lot of digging for me to figure out what all I needed to do. I decided to collate the information I found and present it here for other WordPress plugin authors. If you’re in a real hurry, at the end of the article you can grab files with all of the code that is shown in this article.

What the Hey Are You Talking About?

Open up your WordPress admin panel and go to the Write tab. See the part where you write your post? That’s the editor. WordPress has two different editors. One is the visual rich editor, which is a modified version of the javascript-based TinyMCE editor. It hides all of that nasty HTML markup from you and formats your posts nicely. The other is the regular editor, which shows you all of the HTML markup you could ever want and is the editor that real blog writers use. To switch between the two, go to the Users tab and look at the bottom of your profile, in the Personal Options section. The checkbox there toggles whether or not you use the visual rich editor.

If you’re using the regular editor, above the edit panel is a row of buttons. Those are called the Quicktags. They’re a fast way to add HTML tags to your post, similar in spirit to the tag buttons a lot of bulletin board systems have. The TinyMCE editor has a row of pretty graphical buttons that do similar things.

Before We Begin, a Brief Note on Coding Standards

If you’re writing a plugin and you’re not encapsulating your code in an object, you should preface your function names and global variables with a prefix that’s specific to your plugin. That makes it less likely that your function names will be the same as those of another plugin or WordPress itself, since PHP doesn’t have proper namespace support. In this post, I’ll use the prefix “pluggy”.

Adding a Quicktag

Adding a button to the Quicktag bar requires a bit of javascript. What we’re going to do is add some code to the bottom of every page that contains the editor. The javascript code will create the button element and append it to the Quicktags.

First of all, let’s write a function that will (eventually) add our specialized javascript to all editor pages. In your plugin’s .php file, add the following:


// Add javascript to generate a quicktag button. If the quicktag bar
// isn't available, instead put a link below the posting field entry.
function pluggy_quicktag_like_button() {
  // Only add the javascript to post.php, post-new.php, page-new.php, or
  // bookmarklet.php pages
  if (strpos($_SERVER['REQUEST_URI'], 'post.php') ||
      strpos($_SERVER['REQUEST_URI'], 'post-new.php') ||
      strpos($_SERVER['REQUEST_URI'], 'page-new.php') ||
      strpos($_SERVER['REQUEST_URI'], 'bookmarklet.php')) {
    // Print out the HTML/Javascript to add the button
?>


Now we need to add the javascript to create our button. Quicktags' javascript code come from the file wp-includes/js/quicktags.js. If you look in that file, you'll discover that the <div> element that holds the Quicktags has an HTML ID of "ed_toolbar" and that each button has a class of "ed_button". So we need some javascript to create a button of class "ed_button" and append it to the "ed_toolbar" div. This next bit of code replaces the "JAVASCRIPT WILL GO HERE" comment above.


var pluggy_toolbar = document.getElementById("ed_toolbar");

if (pluggy_toolbar) {
  var theButton = document.createElement('input');
  theButton.type = 'button';
  theButton.value = 'Pluggy';
  theButton.onclick = pluggy_button;
  theButton.className = 'ed_button';
  theButton.title = 'Pluggy!';
  theButton.id = 'ed_Pluggy';
  pluggy_toolbar.appendChild(theButton);
}

If you add all of that code to your plugin and then visit the Write Post page, you'll see a button called "Pluggy!", assuming that you're using the regular editor. Success! Except that the button doesn't do anything yet. Thanks to the onclick value it wants to call the function pluggy_button(), but that doesn't exist. We need to write that function. Add this snippet of javascript after the above bit:


function pluggy_button(querystr) {
  alert("Pluggy button pressed!");
  return false;
}

and that will make the button pop up an alertbox when you push it. If this were a more complicated plugin, we could use the pluggy_button() javascript function to pop open a new window or insert code into the editor window. I'll leave those as an exercise for the reader, though you can see an example of popping open a UI window in my Simple Popup Images plugin.

Adding a Button to the Visual Rich Editor

The visual rich editor has pretty graphical buttons for you to push. You really don't want to add a new one of those.

I mean it. For full functionality, you'll have to write a TinyMCE plugin, and that's a process that's even more sketchily documented than that of writing WP plugins, plus you have to write your plugin in javascript.

If you're determined to write a TinyMCE plugin, all I can do is point you to the TinyMCE documentation; mention the tinymce_before_init, tinymce_plugins, and tinymce_buttons filters that WordPress has made available; show you other TinyMCE plugins, and wish you the best.

There are other, easier options than creating a graphical button and writing a new plugin. WordPress 2.1 introduced the Code tab in the visual rich editor. If you open the Code tab, you'll see the usual array of Quicktags...including our new one. But what if you want to support the WP 2.0 branch? You can't easily add a button, but you can add a nice link just below the editor that will do the same thing as the button. We'll add an invisible <div> to every post page and, if the Quicktags aren't available, make that div visible and move it into position.

Above the <script type="text/javascript"> in your code, add the following:



(Note that, for code-posting reasons, I have changed the <a> in the code snippet to [a]. Change the []s to angle brackets for it to work.) After the "if {}" block of javascript code that creates the Quicktag button, add:


else {
  var pluggyLink = document.getElementById("pluggy_link");
  var pingBack = document.getElementById("pingback");
  if (pingBack == null)
    var pingBack = document.getElementById("post_pingback");
  if (pingBack == null) {
    var pingBack = document.getElementById("savepage");
    pingBack = pingBack.parentNode;
  }
  pingBack.parentNode.insertBefore(pluggyLink, pingBack);
  pluggyLink.style.display = 'block';
}

That bit of javascript makes the <div> with our link visible and moves it to just before the secret hidden pingback input elements that come right after the editor. Tah-dah!

Bonus Topic 1: Inserting Text in the Editor

Your plugin, like mine, may pop up a window, do some processing, and return, inserting some text into the editor window. You can do that with two javascript functions:


// Insert myValue into an editor window
function insertHtml(myValue) {
        if(window.tinyMCE)
                window.opener.tinyMCE.execCommand("mceInsertContent",true,myVal\
ue);
        else
                insertAtCursor(window.opener.document.post.content, myValue);
        window.close();
}

// Insert text into the WP regular editor window
function insertAtCursor(myField, myValue) {
        //IE support
        if (document.selection && !window.opera) {
                myField.focus();
                sel = window.opener.document.selection.createRange();
                sel.text = myValue;
        }
        //MOZILLA/NETSCAPE/OPERA support
        else if (myField.selectionStart || myField.selectionStart == '0') {
                var startPos = myField.selectionStart;
                var endPos = myField.selectionEnd;
                myField.value = myField.value.substring(0, startPos)
                + myValue
                + myField.value.substring(endPos, myField.value.length);
        } else {
                myField.value += myValue;
        }
}

Calling insertHtml('some text') will paste that text in the editor window.

Bonus Topic 2: Adding HTML-Like Tags to the Visual Rich Editor

For your plugin, you may end up inventing an HTML-like tag to be filtered later. For example, the WP-FLV plugin adds an <flv> tag that, when a post is displayed, is converted to a flash-embedded object.

TinyMCE won't like that. It strips out tags it doesn't know anything about. To make TinyMCE like your new tag, you need to add it to TinyMCE's list of valid elements. WordPress gives you a filter for doing that: mce_valid_elements. Define your tag using the TinyMCE format for valid elements and then add it to the valid elements list using the mce_valid_elements filter.

You know what? Let me show you an example. Let's say you've defined a new <pluggy> tag for your plugin. It can have two attributes called "width" and "height". To get the visual rich editor to leave your tag alone, do the following:


add_filter('mce_valid_elements', 'pluggy_mce_valid_elements', 0);

function pluggy_mce_valid_elements($valid_elements) {
  $valid_elements .= 'pluggy[width|height]';
  return $valid_elements;
}

The "pluggy[width|height]" is the TinyMCE valid element string. Now TinyMCE won't get rid of any <pluggy> tags when your users are writing their posts.

One other note. When I used this trick, I used a single self-closing tag, like <pluggy />. TinyMCE automatically turns this into <pluggy></pluggy>, and there's nothing you can do short of hacking the editor's javascript. Just a word of advice.

Conclusion and Downloads

That's it. I hope you found this article helpful. If you'd rather not type in all of the code above, you can get two files that have the code already entered for you.