Download EBNFer from WordPress.org

The EBNF parser and renderer is built off of the one created by Vincent Tscherter.

Example usage:

[ebnf title="JSON RR Diagram"]
"JSON" {
object = "{" [ ( string ':' value ) { ',' string ':' value }  ] "}".
array = '['  [ value { ',' value } ] ']'.
}
[/ebnf]

Shortcode attributes:

• title – Image title tag
• alt    - Image alt tag
• link – Set to, “no” if you don’t want the image tag to link to the image

Description

PluGeSHin is a WordPress plugin by Peter Ajtai that lets you use the syntax highlighting of  GeSHi through WordPress shortcodes.

You can download PluGeSHin and read about it over at WordPress.org.

This page has samples of PluGeSHin in action.

Highlighting with the default language (JS in my case) and default setting for line numbers showing:

[geshi]CODE[/geshi]

var toggle = function(theId) {
    var ellie = document.getElementById(theId);
    (ellie.style.display   !== 'none' ?
         ellie.style.display = 'none' :
         ellie.style.display = 'block'  );
}

Highlighting PHP without line numbers:

[geshi lang="php" nums="0"]CODE[/geshi]

<?php
class SumOfPower {
    function __construct () {
        // Start Timer
        $Timer1 = new CalcTimer;
        $Timer1 -> StartTimer();
        $number = sprintf( number_format(pow(2,1000), 0));
        for ($count=0; $count < strlen($number); $count++) {
            $digit+=$number[$count];
        }
        echo "The sum is $digit.<br/>";
        // Stop Timer
        $Timer1 -> StopTimer();
    }
}
?>

Highlighting C++ with line numbers, starting at line 37 and drawing attention to the fourth and 13th lines:

[geshi lang="cpp" start="37" nums="1" highlight="4,13"]CODE[/geshi]

#include <iostream>
#include <string>
#include <sstream>
#include <algorithm>
#include <iterator>
 
int main() {
    using namespace std;
    string sentence = "où chante une rivière";
    istringstream iss(sentence);
    copy(istream_iterator<string>(iss),
             istream_iterator<string>(),
             ostream_iterator<string>(cout, "\n"));
}

Opening documentation links in a new tab:

[geshi lang="php" target="_blank"]CODE[/geshi]

<?php
    $string =
        "July 1, 2000 is on a " .
        date("l", mktime(0, 0, 0, 7, 1, 2000));
?>

I’ll show you how to toggle the visibility on a group of selected elements. I’ll build up from a simple case to the more complicated ultimate goal.

First, whenever you’re working with jQuery and Javascript, you should probably get your references ready. For online references there’s the jQuery documentation (which is easier to search with Google than with the site search, I find) and the Mozilla Development Center Javascript reference among others. A very nice site to test, store, and share your jQuery snippets is jsFiddle.

Ok, let’s get started. First let’s toggle the visibility of an element with jQuery using .toggle(). Since we’re talking about user interfaces, we’ll probably trigger the toggle with an action, let’s say a .click():

$(document).ready(function(){
    // Toggle the visibility of all divs when one is clicked.
    $("input").click(function() {
        $("div").toggle();
    });
});

jsFiddle example

The code above will toggle the visibility of all the divs on a page if an input button is pressed.  The way this works is that after the document is ready, an event handler is bound to all the <input> elements. The handler waits for the user to click it. If clicked jQuery selects all the divs on the page and reverses their visibility. If they were invisible they become visible and vica versa.

Well, this was just to give you a tast of .toggle(), since the above example is pretty crude. Usually you want more control over which divs appear and disappear. In fact, an often trick part of visibility toggling in jQuery is to make sure each toggling button is linked uniquely to one block of content. You also want to ensure that when a block of content appears, all the other similar blocks of content disappears.

I’ll show you two methods of making sure that each time only one block of content appears, while all the other blocks of content disappears. The first method will only work if all the content blocks are siblings in the DOM. This will often be the case, since we’ll usually be dealing with semantically related chunks of content. The second way will be a little trickier but more flexible.

But before we start discussing siblings, let’s make sure we can toggle one specific div with one particular button. There’s many ways of doing this. I’ll show you how to use individual but related ids for the buttons and the content divs. Each button will have a name like, “block-x” where “x” is a number, and it’ll have a corresponding content block with the id “block-x-content”. Now if we have 3 content blocks, we could write one functions to control each block, for a total of 3 functions, but it’s more convenient and maintainable to generalize. We’re going to use input buttons with class “.toggler” to toggle the divs. You, of course, don’t have to use buttons, you can use other divs, or images, or whatever your little heart desires. So, so far we have:

$(document).ready(function(){
      // Toggle the visibility of all divs when one is clicked.
    $("input.toggler").click(function() {
        $( "#" + $(this).attr("id") + "-content" ).toggle();
    });
});

jsFiddle example

The most complex part is the line with the toggle. The previous line simply binds an click event handler to all input elements with a “toggler” class. The function that is triggered in case of a click is an anonymous function that toggles one div. To see witch div gets toggled we’ll look more closely at “$(“#” + $(this).attr(“id”) + “-content” )” . The part inside the parentheses is simply a jQuery selector string. The string starts with a literal “#”, so we know that an element with a certain ID is getting toggled. The “#” is followed by the “ID” attribute of the element that was clicked. So far we have something like $(“#block-x”). This by itself would make the buttons disappear. But we know that each button has a corresponding content block. This block is selected by concatenating “-content” to the previous to give us a toggling of $(“#block-x-content”). Where is the number in the ID attribute of the INPUT button we clicked. Notice how the visibility of each DIV is kept track of separately. .toggle() is doing all the hard work for us.

Well, we’re approaching what we want. The previous example is okay, in that it let’s us toggle things, but it doesn’t really feel like we’re concentrating the attention of the user to one pertinent block of information. To achieve that end, we must make all the other divs invisible when we make one div visible.

We only have to change one line to achieve this. We’ll go from:

$( "#" + $(this).attr("id") + "-content" ).toggle();

to:

$( "#" + $(this).attr("id") + "-content" ).toggle().siblings().hide();

Notice how I chained the methods .siblings() and .hide() onto the previous line. This means that after toggling our content block, we’ll select the DOM siblings of that block and make them invisible. This means you have to make sure you’ve thought through your HTML. The easy way to do this is to nest all the content divs into a parent div, or if it makes sense, maybe to have content LIs in a parent UL or OL.

One final change is that you may not want the content to disappear if a button is pressed twice, so we’ll switch out .toggle() with .show() to give:​

$(document).ready(function(){
      // Toggle the visibility of all divs when one is clicked.
    $("input.toggler").click(function() {
        $( "#" + $(this).attr("id") + "-content" ).show().siblings().hide();
    });
});
​

jsFiddle example

But what if our content DIVs aren’t siblings? They usually should be, just because of the way information is structured on an HTML page, but we really don’t want to count on that. We want the flexibility to toggle any set of elements we want.

To toggle any set of elements we want, all we have to do is create jQuery set of the elements and use .not() in combination with that. I’ll show you how.

First, let’s say that we have 3 content divs. Let’s select all of them with jQuery:

var theDivs = $("#block-1-content, #block-2-content, #block-3-content);

So, now theDivs is a jQuery selection of out content DIVs, let’s use that in combination with our click handler and .not() to toggle the appropriate content divs. Except, now I’m going to use an unordered list, so our content will be in LIs. If we’re dealing with unordered lists, we could easy have a situation where all the individual content LIs are not siblings of each other.

To show the corresponding content LI of a button, we’ll still use:

$( "#" + $(this).attr("id") + "-content" ).show();

But now we can’t simply make the siblings disappear. Instead we’ll make everything from our jQuery slection “theDivs” that isn’t the corresponding content LI vanish. Like this:

theDivs.not( $( "#" + $(this).attr("id") + "-content" ) ).hide();

And that’s it! You can of course replace the .show() and .hide() methods with fancier animations like .slideDown() and .slideUp(), but overall we have a relatively simple to implement, generalizable way of toggling the visibility of a group of content divs. The full code will look something like this:

$(document).ready(function(){
      // Create a selection of the content divs of interest
    var theDivs = $("#block-1-content, #block-2-content, #block-3-content");
      // Toggle the visibility of all divs when one is clicked.
    $("input.toggler").click(function() {
        $( "#" + $(this).attr("id") + "-content" ).show();
        theDivs.not( $( "#" + $(this).attr("id") + "-content" ) ).hide();
    });
});​

jsFiddle example

Well, the first impression one gets is that I sleep as much as a brown bat (19.9 hours per day apparently). The red area is much larger than half the clock, so it looks like I sleep the whole day away.

Of course the clock only has 12 hours on it, so while it looks like I sleep 2/3 of the day, I actually only sleep half of that, or 1/3 of the day, according to Sleeping Time.

So, if the visualization doesn’t give you a quick visual idea of what portion of a day you spend sleeping, what is it good for? It tells you what portion of half a day you spend sleeping, but that’s not really a metric that’s ingrained in any of our brains.

This is the problem with data visualization. A graph often looks clear cut and simple, but it is often simply not showing you an answer to the question your are asking.

If you found this post even mildly interesting, then you should know that a great book about graphs, charts, and other ways of showing data is The Visual Display of Quantitative Information.

Here are links to a few of them:

<h1>Hello World!</h1>

Well, that’s nice, but there’s certain information missing. We should add a doctype to let the browser know what flavor of HTML, XHTML, etc we’re using. This declares the document type definition (DTD) in use for the document.

We should also add things like the HTML elements, a HEAD element for specifying more information about the page, a BODY for the contents.

We should also let the browser know our character encoding with a meta tag.

So now we have:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/\\xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <title>Greetings World</title>
    </head>
    <body>
        <h1>Hello World!</h1>
    </body>
</html>

What about the look of the page? Let’s add some CSS:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/\\xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <title>Greetings World</title>
        <style type="text/css">
            body {
                background-color:#BDC4D4;
            }
        </style>
    </head>
    <body>
        <h1>Hello World!</h1>
    </body>
</html>

Of course we should throw that into an external style sheet:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- sample.html -->
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <title>Greetings World</title>
        <link rel="stylesheet" href="styles.css" type="text/css" media="screen" />
    </head>
    <body>
        <h1>Hello World!</h1>
    </body>
</html>

and:

/* styles.css */
body {
    background-color:#BDC4D4;
}

Let’s add two images:

<p>
    An Image ==>
    <img src="images/one.png" alt="image 1" />
</p>
<p>
    Another Image ==>
    <img src="images/two.png" alt="image 2" />
</p>

Hmmm… but we’re making two requests to the server for these two images. We can pass the same amount of information to the user with only one request to the server using sprites.

Sprites are often used in divs or other elements as background images. We’ll use sprites as background images, but they’ll be the background to an IMG element. “null.png” is simply a transparent pixel:

The HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- sample.html -->
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <title>Greetings World</title>
        <link rel="stylesheet" href="styles.css" type="text/css" media="screen" />
    </head>
    <body>
        <h1>Hello World!</h1>
        <p>
            An Image ==>
            <img src="images/null.png" class="sprite image1" alt="image 1" />
        </p>
        <p>
            Another Image ==>
            <img src="images/null.png" class="sprite image2" alt="image 2" />
        </p>
    </body>
</html>

The CSS:

/* styles.css */
body {
    background-color:#BDC4D4;
}
.sprite {
    width:80px;
    height:80px;
    background:url('images/sprite.png')
}
.image2 {
    background-position:-80px;
}

Well, ok, but our sight isn’t going to change much over time, so once a visitor see our site, they should cache it in their browser for future use. This’ll make the page load faster for everyone, since it reduces server load, and it speeds up the loading of pages by repeat visitors.

We can accomplich this using HTTP headers. This is not the HTML HEADER tag. HTTP headers are lines that the server sends to the browser before the contents of the page… this means we can’t put the HTTP headers into the HTML file. We’ll have to use something server side for this. PHP has a header() function, which makes things really easy:

<?php
// Expires one year from now
$expires = mktime(0, 0, 0, date("m"),   date("d"),   date("Y")+1);
// Format date
$date =  date('D, d M Y H:i:s', $expires);
// Send HTTP header
header("Expires: $date GMT");
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- sample.html -->
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <title>Greetings World</title>
        <link rel="stylesheet" href="styles.css" type="text/css" media="screen" />
    </head>
    <body>
        <h1>Hello World!</h1>
        <p>
            An Image ==>
            <img src="images/null.png" class="sprite image1" alt="image 1" />
        </p>
        <p>
            Another Image ==>
            <img src="images/null.png" class="sprite image2" alt="image 2" />
        </p>
    </body>
</html>

We could have done the above with Apache or whatever server itself we’re using. PHP is nice for illustration, since we can keep all the code in the HTML file. Since the HTTP header comes before the HTML content, you cannot put any HTML before the PHP header() function.

Ok, now we’re getting somewhere, but we’ve still got all this text and stuff on our web page…. ok we don’t, but we could have all this stuff, if we had a big web page, or it may look like a lot of stuff to someone with a limping dial up in East Timor. Well, why don’t we compress all our stuff. Let’s GZIP it.

<?php
// Expires one year from now
$expires = mktime(0, 0, 0, date("m"),   date("d"),   date("Y")+1);
// Format date
$date =  date('D, d M Y H:i:s', $expires);
// Send HTTP header
header("Expires: $date GMT");
if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip'))
    ob_start("ob_gzhandler");
else
    ob_start();
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- sample.html -->
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <title>Greetings World</title>
        <link rel="stylesheet" href="styles.css" type="text/css" media="screen" />
    </head>
    <body>
        <h1>Hello World!</h1>
        <p>
            An Image ==>
            <img src="images/null.png" class="sprite image1" alt="image 1" />
        </p>
        <p>
            Another Image ==>
            <img src="images/null.png" class="sprite image2" alt="image 2" />
        </p>
    </body>
</html>

You can confirm that you’re properly GZIPPED.

Ok. With PHP we can also flush the buffer early:

</head>
    <?php flush(); ?>
<body>

It’s great that our CSS is in its own file, but it still has a bunch of whitespace. Why don’t we minify it.

I used the YUI compressor with this command:

java -jar yuicompressor-2.4.2.jar styles.css -o styles.min.css --type css

To get this CSS file:

body{background-color:#BDC4D4;}.sprite{width:80px;height:80px;background:url('images/sprite.png');}.image2{background-position:-80px;}

We can do the same minification with our Javascript if we have any, and remember to include your Javascript as far to the bottom of the page as you can.

Take a look at the final page.

Ah, speaking of downloading JQuery, you just might want to understand how JQuery works if you use it. The first time I tried to do this, I simply clicked on my JQuery src file link:

<script type="text/javascript" src="http://peter-ajtai.com/jquery/jquery-1.4.2.min.js"></script>

… and this is what I saw:

Fun reading, huh? Well, when your browser loads Javascript, it has to load each charachter, so the less whitespace there is, and the shorter the variable names are, the faster it will load.

This means you should be using this, the minified, version of JQuery on your site, but if you want some pleasant and relaxing reading… you should look at the uncompressed version. JQuery shows you both versions very clearly on their download page, but for some reason, it took me a while to realize that there is an uncompressed version. The uncompressed version of the latest version is here. The uncompressed version is actually very readable:

Not too long ago, the members of Planet Money pitched in, pooled their money, and bought their own $1,000′s worth of real estate based toxic assets. You can hear about how they picked their asset, bought it, and how it’s doing. You can also hear about the types of things that affect whether the Planet Money team will get a good return on their investment…. It turns out, that having people not pay their monthly mortgage is ok, since the person who gave out the mortgage is then responsible for paying the money into the toxic asset coffers… whoever, if the home owners refinance, then the amount of money they have to pay decreases, and so the pay out to the toxic asset decreases. There’s also all sorts of other stories about the history of their specific toxic asset including an eye opening animated graphic showing the rate that the loans in the asset are going into delinquency. (I do have to say that one of the downfalls of the graphic is that the number of loans in each state is not immediately apparent, even though these numbers vary from one to several thousand… so make sure you hover over the states you think are interesting to check the sample size).

It’s a great series of stories, and it lets you understand about toxic assets, and even makes you feel bad for Toxy…. Yes, Toxy is the name of the toxic asset. But seriously, this is some reporting that takes a subject that is often presented as dead boring and overly complicated, and Planet Money makes the subject personal, interesting, and entertaining. Just wanted to share.

Step 1:

Load JQuery and your custom JS onto your page with wp_enqueue_script(). It’s better to use wp_enqueue_script than hard coding it into your page. This is because WordPress comes with JQuery, so you won’t have to worry about updating JQuery as new versions come out. WordPress will do the work for you.  Make sure wp_enqueue script is before wp_head(), or it won’t work.

Here’s a snippet from my template file (let’s say index.php). I’ve created my custom JQuery functions in my themes “scripts” directory with the file name “custom-js.js”. You also have to make up a handle or name for your collection of custom JQuery functions. I called mine custom:

<?php
    wp_enqueue_script('jquery');
    wp_enqueue_script('custom', get_bloginfo('stylesheet_directory') . '/scripts/custom-js.js');
    wp_head(); // WP API Hook
?>

get_bloginfo is your friend. If you hard code your themes directory into your code anywhere, you won’t be able to share it with others, and you’ll break everything if you ever move hosts or just directories.

Here’s another example. Let’s say you want to use Google Maps on your page. Here is the line of WP code that makes that possible:

<?php
    wp_enqueue_script('googleMaps', 'http://maps.google.com/maps/api/js?sensor=false');
?>

Finally, if you just want plain JS with no JQuery, you can simply leave out the line that calls JQuery but leave in the line that enqueues your custom functions. WordPress comes with a lot of other JS goodies besides JQuery. Scroll down to the bottom of this page to look at all the other stuff included with WordPress.

Step 2:
Write your JQuery. The only thing you have to look out for is that wp_enqueue_script() calls JQuery in no conflict mode. This means that $ will not work as a shortcut for JQuery functions. There are two simple solutions.

1. Define another shortcut for JQuery functions.
2. Use a wrapper around your JQuery code.

Here is how to define a new shortcut for JQuery functions, $j in this case. The script shown is a very effective test to see if you’ve got JQuery working in your theme. It’s a little blunt, but it’s effects are hard to miss.

var $j = jQuery.noConflict();
$j(document).ready(function(){
 $j("body").html("Your page is belong to us... just kidding, but you can use JQuery now.");
});

Here is how to use a wrapper in order to use the default JQuery shortcut:

jQuery(document).ready(function($) {
    $("body").html("Your page is belong to us... just kidding, but you can use JQuery now.");
});

Make sure you pay attention to all the curly brackets and parentheses. If the long and multiple parenthetical expressions annoy you, go check out Lisp.

Anyway, the second method is nice, since it let’s you use previously written code easily.

Step 3:

Enjoy!