1) I’m learning object-oriented design, design patterns, object-oriented PHP, and object-oriented JavaScript right now. I wanted to do some experimenting with building systems using these concepts, so I came up with the idea of doing a series of “Web Experiments” where I take an idea for some kind of web application and make a demo of it, for fun and learning.

2) I think ajax is the future of the web. Somebody somewhere wrote “full page refreshes are so last year”, or something to that effect. I sometimes find myself clicking a link or a tab somewhere out there on the web, mentally crossing my fingers in hopes that it won’t send me to a new page. I think more and more people are going to expect slicker interfaces in web sites and web applications, and ajax is the way to get that accomplished.

3) I really like the comment/reply interface on Facebook. There’s a series of boxes, each with a comment, and the last box is minimized and says “Write a comment…”. When you click on it, it expands to look exactly like the other comments, with your picture there, just like it will look once it’s posted. You type your brilliant quip, and when you click the button, the comment “melts” right into the page, and the next would-be comment appears below.. I think it’s lovely.

With these three things in mind, I started building my own little “comment thread” app.

Features:

• Add, edit, and remove comments from the “thread”.
• No page refreshes – all done with ajax (jQuery)
• Comments are stored in a tab-separated text file.
• Shift-enter for a line break within a comment.

I’ve also built a class structure that I believe will help me expand the project going forward.  The planned additions/expansions are:

• MySQL Database support (will be able to switch between text file and MySQL with a single setting)
• Rewrite the JavaScript without using jQuery just for fun and practice, and to prove that I can.
• Multiple “threads” of comments
• Only load the latest 10 comments or so, and load more twitter-style.
• More to each message, like time/date of post, “last edited at…”, etc.
• Maybe a simple user system. I loathe to make people “sign up” for things though.

If you’re interested, you can download the files here.

The Problem

There’s no reason to re-invent the wheel, and there are already several tabs implementations written as jQuery plugins, including the jQuery UI tabs widget. The problem with these is that most (if not all) of them require the markup to be set up in a different way than we have available with our WordPress-outputted sidebar markup.

To illustrate, WordPress by default outputs the sidebar with markup that is structured something like this:

1
2
3
4
5
6
7
8
9
10
11
12

<div id="sidebar-1">
  <ul class="sidebar-list">
    <li id="widget-1" class="widget widget-class-1">
      <h2>Widget 1 Title</h2>
      <p>...content...</p>
    </li>
    <li id="widget-2" class="widget widget-class-2">
      <h2>Widget 2 Title</h2>
      <p>...content2...</p>
    </li>
  </ul>
</div>

The various jQuery tabs plugins all require the markup to be strutured like this (notice the titles moved to the additional list at the top, with anchor tags corresponding to the ids of the respective widgets:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<div id="sidebar-1">
  <ul>
    <li><a href="#widget-1">Widget 1 Title</a></li>
    <li><a href="#widget-2">Widget 2 Title</a></li>
  </ul>
  <ul class="sidebar-list">
    <li id="widget-1" class="widget widget-class-1">
      <p>...content...</p>
    </li>
    <li id="widget-2" class="widget widget-class-2">
      <p>...content2...</p>
    </li>
  </ul>
</div>

The Solution

While it would be possible to alter the PHP code to output the list above the widgets (although, I looked into this solution and was not able to find a hook that would allow it without altering the core), we can just use some custom jQuery to dynamically add the list before invoking the tabs plugin.  This method also has the advantage that it makes our tabs more unobtrusive.  If javascript is disabled, the page will look exactly as it would with the standard sidebar widgets, but if javascript is available, we’ll fix the markup and add the tabs all at once with our jQuery code.

The Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

$(document).ready(function() {
   // first, we select the sidebar
   $('#sidebar-1 .sidebar-list').each(function() {
      // each child of the sidebar element will be a widget, and will become a tab
      var widgets = $(this).children();
 
      // we'll build the list of titles, starting with the opening tag
      var titleList = '<ul>';
 
      //for each widget in the sidebar:
      widgets.each(function() {
 
         // save the title of the widget
         var widgetTitle = $(this).children('h2').text();
         // then hide it since it will be displayed in the tab
         $(this).children('h2').hide();
 
         // create a new list item for the tab, linking to this widget's id
         var listItem = '<li><a href="#'+$(this).attr('id')+'">'+widgetTitle+'</a></li>';
         // add the list item to the list we're building
         titleList += listItem;
      });
      // close the list now that we're done going through each widget
      titleList += '</ul>';
 
      // add the title list to the beginning of the sidebar
      $(this).before(titleList);
   });
 
   // apply the tabs plugin
   $('#sidebar-1').tabs();
});

Explanation

The comments in the code should make the solution pretty self-explanatory.  This will take all the widgets in the selected sidebar and create tabs for them.

There are some things you’ll have to be careful about if you use this code.  First, you’ll have to change the selection for the sidebar div (line 3 above, as well as in the second-to-last line) to match yours.  This assumes you have your sidebar list wrapped in a div (required by the tabs plugin), so if you don’t, you will need to add that, either in the theme itself or with jQuery( using .wrap() ). Also, in the two places you see ‘h2′, this is assuming that the titles of the widgets are in <h2> tags.  You may need to select a different tag if your theme displays the widget titles differently.

Also note that this will create tabs for all the widgets in the sidebar.  Making it only apply to specific widgets is possible, but a bit more complicated.  Luckily, with WordPress 2.8, the sidebars/widgets interface is much improved.  One solution would be to create multiple ‘sidebars’ that stacked on top of each other in the sidebar area of your theme, and apply the above tab-ifying code to one or more of them individually.

I did find this book interesting and informative as well, but I say that with caveats, which I’ll explain.

First, I’m not sure that I was exactly the intended audience for the book.  I am pretty well-versed in programming concepts in general, and what I was looking for was an introduction to the language of javascript and when and how to use it effectively in my web sites.  In contrast, this book seemed to be geared a little more towards pure designers who are scared of programming. A few times during my reading I had to roll my eyes at another “If this is making your head hurt, just type it in and know that it works.”  Personally, I want to know how everything works and I’m not interested in blindly typing in code to “make it work.”  I can do that by searching google and cutting and pasting.  I bought a book because I wanted to get deep, to learn the ins and outs of how it all works behind the scenes.  I wanted a book because I’m on my way to becoming a full-on pro, and this book at times seemed more geared towards hobbyists, or designers who just wanted to dip their toes into javascript.

Second, this is really a book on jQuery.  I don’t have a problem with that, but it needs to be said.  The first section of the book goes over the syntax of plain old javascript, including function declarations, string manipulation with built-in functions and regular expressions, math functions and operators, variable typing, etc.  Then the author quickly moves on to the use of libraries to speed development, and specifically to jQuery.  I’ll say here that I have very ambiguous feelings regarding the need to learn the “hard way” of doing things when using a library to do it for you will normally suffice.  That’s a debate in itself, and I don’t want to get into all the pros and cons, but again, it should be said that you won’t be learning the traditional way of working with the DOM here, you’ll be learning to use jQuery selectors.

Now for the good parts.  Like the CSS book in the series, I found the information to be explained in a very readable and understandable tone.  The book is well-paced — several times I would have an “aha – that’s cool how that works!” moment, followed by a “but wait, what if you wanted to do it this way?”, and without fail the next paragraph would address my question.  Sometimes it would answer right there, and sometimes it would say “we’ll show you how to do this with more flexibility in the next section…” so I’d know it was coming.  This ability to anticipate the reader’s thinking is probably the best part of these books.

Also, the tutorials were again very helpful and well laid-out.  Another thing I’d like to point out is that the tutorials are not just re-hashes of the information in the preceding chapter.  There is additional learning value in the tutorials that build on what you learn by reading the chapter.  So you get the explanations of how things are designed to work, and then you get to play with a real-world example and the book shows you how to solve the additional problems that inevitably come up.  Code examples are thoroughly explained (sometimes too thoroughly — I found myself skipping sections saying to myself, “yeah, I get it already” — but that’s definitely better than the opposite).

After going through all the basic functionality of jQuery itself, the book unfortunately devolves into several chapters showing how to use specific jQuery plugins for specific purposes: image gallery, slideshow, tabs, etc.  While these are certainly useful, no additional concepts or ideas were presented, just lists of the specific variables and possible values for customizing the plugins.  This part of the book seemed like fluff to me and could have been condensed into a few short pages of charts.  It’s not that the information wasn’t useful, just that after learning so many interesting and, to me, revolutionary concepts, reading paragraphs about using “slow” if you want it to move slow, and “fast” if you want it to move fast seemed like a step backwards.

The last section of the book is dedicated to AJAX.  Here the quality of information improves again, but again with caveats.  You won’t learn the details of setting up the XMLHTTPRequest object, but you’ll learn what is and then how jQuery saves you the trouble of knowing.

In one way this final section about AJAX serves as a microcosm to the whole book.  It’s a great introduction, it gets you familiar with the general concepts and shows you how to get started right away, but it left me hungry for more, deeper knowledge.  And perhaps that’s the way it should be.

Javascript

Javascript is a programming language.  It comes standard with most modern web browsers.  It is also the same language that is used in Flash (where it’s called ActionScript), and can be used to write scripts in Photoshop, Illustrator, etc.  In the context of a web browser, it is often used to manipulate the DOM (see below).

jQuery

jQuery is a Javascript library, meaning that it is essentially a collection of functions written in Javascript that can be used to make the programmer’s job easier.  Common tasks that take more lines of code with traditional Javascript can be executed with calls to the jQuery functions.  There are several other Javascript libraries out there that fill the same need.  For one reason or another, jQuery seems to be the most popular library of the day.

The DOM

The Document Object Model (DOM), is just that – a model for representing and interacting with an XML, XHTML, or HTML document.  Our HTML documents are created by typing tags in plain text, and the DOM is a way to access the tags and the structure of the “tag tree”.  For example, instead of using regular expressions to find the text that represents a tag with a specific ID attribute, we can ask the DOM which of its tags has that ID.  Javascript is not part of the DOM or vice-versa, but Javascript in the browser does include some intelligence about the DOM – for example, the getElementById() function.  One of the main advantages of jQuery is the extra intelligence it has regarding the DOM.  With it, you access and create DOM elements (tags) by using the many selectors and traversing operations it offers.