MacLochlainns Weblog

Several years ago, I decided hosting my own blogs made sense because WordPress didn’t allow me to leverage plug-ins to format code blocks with GeSHi formatting. That was fine to a point. Although, the GeSHi formatting plug-in had some limits that I didn’t like and didn’t want to take the time to fix. The future was moving reusable code artifacts to a GitHub Gist repository.

I created this https://gist.github.com/maclochlainn Gist repository for the blog and implemented in this Common Lookup post from yesterday. As time allows, I’ll start shifting the reusable artifacts to the Gist repository from my blog. The change will be virtually unnoticeable because I’m leveraging a sweet piece of JQuery written by my son Joseph that lets you embed Gists in a web page.

There was just a little housekeeping to get Joseph’s JQuery to work smoothly with my WP-Syntax (contributed by Ryan McGeary – kudos for great work). More or less, beyond Jospeh’s instructions, I needed to add these into the WordPress theme’s style.css file when it was a relative reference. The JSON no longer requires this CSS modification, and it’s here in case somebody wants to do something different on their own.

/* Added for Gist code highlighting */
.gist{color:#000; font-size:13px}
.gist .gist-file{border:1px solid #dedede;font-family:"Menlo", Consolas, "Liberation Mono", Courier, monospace;margin-bottom:1em}
.gist .gist-file .gist-data{overflow:auto;word-wrap:normal;background-color:#f8f8ff;border-bottom:1px solid #ddd;font-size:100%}
.gist .gist-file .gist-data .line_data{padding:.5em !important}
.gist .gist-file .gist-data pre{font-family:Consolas, "Liberation Mono", Courier, monospace;background:transparent !important;border:none !important;margin:0 !important;padding:0 !important}
.gist .gist-file .gist-data .gist-highlight{background:transparent !important}
.gist .gist-file .gist-data .line_numbers{background-color:#ececec;color:#aaa;border-right:1px solid #ddd;text-align:right;padding:.5em}
.gist .gist-file .gist-data .line_numbers span{clear:right;display:block}
.gist .gist-file .gist-data .gist-line-numbers span{clear:right;display:block}
.gist-syntax{background:#ffffff}
.gist-syntax .c{color:#999988;font-style:italic}
.gist-syntax .err{color:#a61717;background-color:#e3d2d2}
.gist-syntax .k{color:#000000;font-weight:bold}
.gist-syntax .o{color:#000000;font-weight:bold}
.gist-syntax .cm{color:#999988;font-style:italic}
.gist-syntax .cp{color:#999999;font-weight:bold}
.gist-syntax .c1{color:#999988;font-style:italic}
.gist-syntax .cs{color:#999999;font-weight:bold;font-style:italic}
.gist-syntax .gd{color:#000000;background-color:#ffdddd}
.gist-syntax .gd .x{color:#000000;background-color:#ffaaaa}
.gist-syntax .ge{color:#000000;font-style:italic}
.gist-syntax .gr{color:#aa0000}
.gist-syntax .gh{color:#999999}
.gist-syntax .gi{color:#000000;background-color:#ddffdd}
.gist-syntax .gi .x{color:#000000;background-color:#aaffaa}
.gist-syntax .go{color:#888888}
.gist-syntax .gp{color:#555555}
.gist-syntax .gs{font-weight:bold}
.gist-syntax .gu{color:#aaaaaa}
.gist-syntax .gt{color:#aa0000}
.gist-syntax .kc{color:#000000;font-weight:bold}
.gist-syntax .kd{color:#000000;font-weight:bold}
.gist-syntax .kp{color:#000000;font-weight:bold}
.gist-syntax .kr{color:#000000;font-weight:bold}
.gist-syntax .kt{color:#445588;font-weight:bold}
.gist-syntax .m{color:#009999}
.gist-syntax .s{color:#d14}
.gist-syntax .na{color:#008080}
.gist-syntax .nb{color:#0086B3}
.gist-syntax .nc{color:#445588;font-weight:bold}
.gist-syntax .no{color:#008080}
.gist-syntax .ni{color:#800080}
.gist-syntax .ne{color:#990000;font-weight:bold}
.gist-syntax .nf{color:#990000;font-weight:bold}
.gist-syntax .nn{color:#555555}
.gist-syntax .nt{color:#000080}
.gist-syntax .nv{color:#008080}
.gist-syntax .ow{color:#000000;font-weight:bold}
.gist-syntax .w{color:#bbbbbb}
.gist-syntax .mf{color:#009999}
.gist-syntax .mh{color:#009999}
.gist-syntax .mi{color:#009999}
.gist-syntax .mo{color:#009999}
.gist-syntax .sb{color:#d14}
.gist-syntax .sc{color:#d14}
.gist-syntax .sd{color:#d14}
.gist-syntax .s2{color:#d14}
.gist-syntax .se{color:#d14}
.gist-syntax .sh{color:#d14}
.gist-syntax .si{color:#d14}
.gist-syntax .sx{color:#d14}
.gist-syntax .sr{color:#009926}
.gist-syntax .s1{color:#d14}
.gist-syntax .ss{color:#990073}
.gist-syntax .bp{color:#999999}
.gist-syntax .vc{color:#008080}
.gist-syntax .vg{color:#008080}
.gist-syntax .vi{color:#008080}
.gist-syntax .il{color:#009999}
/* End gist highlighting */
 
/* To resolve Geshi plug-in conflict. */
td.line-numbers {background:rgb(236,236,236)!important; border-right: 1px solid rgb(170,170,170)!important;text-align:right!important;padding:6px!important;color:rgb(170,170,170)!important;}
td.line-data {padding:6px!important;}

Also, Joseph and I discovered that there was a problem with changing style sheets on the github.com site. Joseph added the following but may not update his blog right away, so here’s the JavaScript for your WordPress header:

After completing this, I noticed that there’s a WordPress Plugin for embedding gists. Naturally, it’s probably simple to use it but I like the control and performance of this solution. I hope this make the pages load a bit faster, and readers use code that they’d like to test.

I put up a contact page (@Contact Me) for two reasons. Too many folks wanted to ask something and could only do so through a comment. I would review the comment, email them, et cetera. Reason two is simpler, I should have done it from the outset.

There were a few gotchas beyond installing and securing your public and private keys. I figured that it might be helpful to note them here, especially if I have to troubleshoot it later. 😉

1. You need create a template, like contact.php script, which should include your contact form. You’ll also embed some reCAPTCHA PHP inside this file.

<?php
<form action="/wp-content/themes/<theme name>/contact_code.php" class="contact" method="post">
?>

<?php
  // Include the reCAPTCHA library, this assumes a relative directory.
  require_once('recaptchalib.php');
 
  // Get a key from http://recaptcha.net/api/getkey
  $publickey = "<your public key value goes here>";
 
  // The response from reCAPTCHA
  $resp = null;
  // The error code from reCAPTCHA, if any
  $error = null;
 
  echo recaptcha_get_html($publickey, $error);
?>

2. You need to put the following WordPress template stub at the beginning of your contact.php page.

<?php
  /*
    Template Name: contact
  */
?>

3. After you create and position the contact.php file in the /wp-content/themes/<theme_name>/ within the document root, you should create a new blog page. You don’t put any text in the page, rather you simply choose the contact.php from your list of templates. You also need a title for the page, I used @contact-me (the @ won’t be used in any reference in the URL), which is an alias to the page

4. You need to put the balance of your PHP code in a separate file, like contact_code.php and put the URL re-write and reCAPTCHA calls here.

<?php
  // Include the library for reCAPTCHA at the theme level in the file hierarchy.
  require_once('recaptchalib.php');
 
  // Put any form PHP here.
 
  // Declare your private key.
  $privatekey = "<put your private key here>";
 
  // Check whether there a reCAPTCHA response?
  if ($_POST["recaptcha_response_field"]) {
    $resp = recaptcha_check_answer($privatekey
                                  ,$_SERVER["REMOTE_ADDR"]
                                  ,$_POST["recaptcha_challenge_field"]
                                  ,$_POST["recaptcha_response_field"]);
    // Check for valid response.
    if ($resp->is_valid) {
      if(!$errors) {
        $to = '<email here>@<domain here>';
        $subject = $subject;
        $message = "From: ".$name."\nMessage: ".$message;
        $from = 'From:'.$email;
        mail($to,$subject,$message,$from);
 
        // Set the header to the document root when successful.
        header("Location: /");
      }
    }
    else {
      // Set the header to the virtual path for the contact page.
      header("Location: /contact-me/");
      $error = $resp->error;
    }
  }
?>

That’s about it. If I forgot something, you’ll let me know.

There’s so much energy that goes into blogging with big blog pages, I figured it was time to setup WordPress on my MacBook Pro MAMP (Mac, Apache, MySQL, and PHP) installation. That way, the world doesn’t need to know when I mess up a <div> tag.

The biggest benefit of creating a local blog becomes obvious when you start building your own plugins, templates, and themes. You also have the benefit of a built in backup if you post your work locally before moving it to your blog. Likewise, you can work on your blog when not connected to the network. By the way, thanks to Joel for pointing out that I forgot to say why this was important.

Here are the setup instructions for those interested in doing it too.

1. Download the software from WordPress.org by clicking their button or this one. If you need the tar.gz, click on the web site link.

2. When you download it, you’ll be prompted to open it. Choose to save it.

3. You’ll find it in your downloads folder, where you can double click it to launch the unzip process into a file folder. Mine happens on the desktop because it’s convenient.

4. After you’ve unzipped it into a folder. You drag it into your MAMP htdocs folder. You can check where the htdocs folder is by launching the MAMP application, and choosing Preferences.

In the preferences dialog, click the Apache tab, you’ll see where the htdocs folder location is. Mine is set to the default location.

5. After you drag the wordpress folder into the htdocs folder, you return to the MAMP application and click the Open start page button.

6. Click the phpMyAdmin link and create a database, like the screen shot.

After a moment, you should see that you’ve created a new database named WordPress.

7. Go to your /Applications/MAMP/htdocs/wordpress folder, and open up wp-config-sample.php file in a text editor. You should see the same lines 19, 22, and 25. The editor screen capture is from the TextMate editor.

Edit those lines to reflect your database name, and the root password. Naturally, if you’re concerned that your local host isn’t secure, you’ll need to purchase MAMP Pro to change your root password. You can’t change it in the free version.

// ** MySQL settings - You can get this info from your web host ** //
/** The name of the database for WordPress */
define('DB_NAME', 'WordPress');
 
/** MySQL database username */
define('DB_USER', 'root');
 
/** MySQL database password */
define('DB_PASSWORD', 'root');

After these changes, save the wp-config-sample.php file as wp-config.php in the same folder.

8. Enter the following in URL in your browser, and press the enter key.

http://localhost:8888/wordpress/wp-admin/install.php

9. On the Welcome web page, enter your blog name and email (mine is omitted for obvious reasons). Click the Install WordPress button to proceed.

10. You’ll then be prompted with the admin user and a password. You should print it or copy it to your buffer because you’ll need it when you first login. Then, click the Log In button to proceed. You should probably change your password to something that you’ll remember before you do anything else.

11. You now have a complete localhost WordPress installation. Now, you can go to your real web accessible WordPress install and export your blog from the Tools menu. Then, on your localhost blog, you can import from the export file of your blog. If you’re using plugins (like anybody doesn’t), then copy the contents from the wp-content/plugins folder from your online blog to your local one; and then, activate them. You can snag your Akismet key from your online site too, but it is unlikely anybody will see your localhost blog.

Violà, c’est fine.

You can now access WordPress on your local machine by typing in the following URL:

http://localhost:8888/wordpress/

I’m trying to eliminate the textbook from my database class, and wrote a data normalization blog page for my students; however, it is only done through 3NF so far. The post tries to remove the discrete math and provide clear examples. The students are checking it out for opportunities to make it clearer, if you’ve thoughts let me know.

Also, I’ve substantially update my initial blog page on SQL joins, and will put one out on set operators probably this Monday. If you’ve time to review it, I would appreciate suggestions for improvement.

The length of these blog pages has compelled me to move to a more friendly editor. I’ve opted for Blogo as my Mac blog editor. It comes from Brainjuice. My son’s experience with their customer service and product convinced me. You can find his blog post discussing customer service here.

Blogo prompts you, but beat the rush. Go to your Site Admin, select Writing under Settings in WordPress, and enable the remote XML-RPC publishing protocol. More or less like this prompt.

I wanted to have scrolling on my iPhone for code segments. It appeared simple. Change the style.css file by adding .code { overflow-x:scroll; }. I first tested it in Safari by setting User Agent to Mobile Safari 1.1.3 – iPhone, where it worked. Alas, it doesn’t work on my iPhone. A quick look at the iPhone simulator taught me it doesn’t work there either. It appears that horizontal scrolling is disabled on the iPhone.

That style sheet is found in the /public_html/blog/wp-content/plugins/wptouch/themes/default directory. I’d love to have missed something. If there’s a trick to do it, let me know.

After migrating the blog from WordPress.com, I reflected on how you can organize and access blogs. Internet searches land you on a list of sites. Site selection places you on a page. Once on a page, the page can include a blog search feature, but it is limiting. Blog searches simply return all potentially related blog posts and pages in a ranked order. They don’t organize data into information, and they don’t cross reference data to create information.

Blog searches by themself didn’t seem to address good design patterns. Popular web site design patterns (1) limit the depth of navigational steps and (2) consolidate information into singular locations. At first blush, it seems blogs are ill suited to anything like that. They seem more like rambling brain dumps of what we’re working on at the moment. Things that you perceive have high value get placed in blog pages, while low value information is tossed out as blog posts.

Blog pages are not natively organized and can proliferate too quickly, making your site overwhelming to visitors. Overwhelming because they don’t know where to start. You can organize blog pages into topical trees, like the illustration from my updated blog (shown on the left). Unfortunately, this only addresses blog pages, and excludes blog posts.

Any cross reference between the information is limited to current other blog entries. After all, future blog entries are unknown. This can lead to disconnected pieces of data in a blog. I decided to stop this insanity in my blog because it was taking me too long to find something already written. It was becoming like some of the forums, rich with data but time consuming to navigate. My solution is to create subject summary pages, like Oracle Configuration and Oracle PL/SQL Programming. My summary pages include organized references to blog pages and posts. The second change is to consolidate information by updating older blogs, which makes them more complete. I was doing that to blog pages but now I’m including blog posts.

As Confucius did or didn’t say, a picture is worth many words …

I attempted to have a forward from the old WordPress.com site. That was a painful mistake! It took down both blogs with a circular referencing that was humorous I suppose. The DNS entries appear to all be corrected and forwarding straightened out. I apologize for any inconvenience.

As I update or expand entries, I’m entering a note in the old blog posts. I think the code segments are much improved, you can find SQL, PL/SQL, PHP, and Java examples in the following blog entries that are now perfect for cutting and pasting. Also, as noted the iPhone view is GREAT!

1. SQL example
2. PL/SQL example
3. PHP example
4. Java example
5. Shell example, DOS and Bash

Here are some of the plugin reasons for migrating my blog from being hosted on WordPress.com. You may find them useful in your own blogs.

1. The iPhone plugin isn’t available (may be later) on WordPress.com. As you can see in the last post it makes it easy for those on an iPhone to read your blog. A BIG THANK YOU to Brave New Code, Incorporated.

2. The GeSHi programming code formatter plugin likewise wasn’t there, and it’s provided by Ryan McGeary. A BIG THANK YOU to Ryan. GeSHi (Generic Syntax Highlighter) started for a PHP bulletin board.

3. A Google stats plugin looks interesting, and I’ll let you know more when I play with it. A BIG THANK YOU to Wilfred van der Deijl for the Google stats plug in.