Effect we want: show a placeholder in unmodified inputs, hide (delete) it when field gains focus, and restore it on blur if left empty. Preferably, don’t submit it.

Before HTML5 this trick was popular:

<input type="text" onfocus="if(this.value=='Message')this.value='';" onblur="if(this.value=='')this.value='Message';" name="foo">

Context

1. In Contact Forms 7 (CF7), form fields are defined using shortcodes, not HTML, so can’t add the onfocus/onblur attributes. Unless we mess with CF7′s code, of course:

   $html = '<input type="text" name="'.$name.'" value="'.esc_attr($value).'" '.$atts.' onblur="if(this.value==\'\')this.value=\''.esc_attr($value).'\';" onfocus="if(this.value==\''.esc_attr($value).'\')this.value=\'\';">';

   And correspondingly for textarea, mutatis mutandis. But this is, obviously, unmaintainable.

2. Unobtrusive JavaScript? Anyway, it would be more efficient (think many fields) to have jQuery do it instead.
3. Using input’s default value as a placeholder doesn’t seem semantically correct.
4. WAI?

Investigating…

1. Using Arras 1.5.1.2, with a few tweaks, so at first suspected hacked templates.
2. Specific difficulty is common with CSS layouts using floats, but…
3. Weird, this only happens when “paged”… no, actually, only on the second page!?
4. Let’s look at the DOM. The CSS path to the “Older Entries” link is html body.rtl div#wrapper div#main.clearfix div#container.clearfix div#content.section div.navigation div.floatleft a, in all but the second page, where instead it’s html body.rtl div#wrapper div#main.clearfix div#container.clearfix div.navigation div.floatleft a, outside #content.
5. That’s it then: all three divs #container, #primary, and #secondary should have been inside #main, but on this page the last two aren’t, thus breaking the layout.
6. … Found it: a spurious </div>, right before an embedded video iframe, in post 39: html body.rtl div#wrapper div#main.clearfix div#container.clearfix div#content.section div#archive-posts div.traditional div.post-39 div.entry-content p iframe. That last p should’ve been inside an additional div[dir=rtl]. (Divitis! And what’s with the redundant dir attribute?)
7. Can’t see it in TinyMCE, only in Firebug, but anyway the editor inserts an img into the post, which is later converted into an iframe, presumably.
8. Anyway, un-publishing that post fixes the layout.
9. Who’s fault? [Ultimate] TinyMCE? Or the user inserted it manually? No, removed it, and this post’s layout is still broken, only now a closing </div> seems missing, somewhere before <a name=”comments”>.
10. Tracing the execution to find which PHP templates rendered this mess is so painful!
11. The correct DOM of a “single” view (in HAML-like notation ;o):

    #main
       #container
          #content-top
          #content
             #post-156
                h3.entry-title
                .entry-content
                .about-author
                .written-by
             a[name="comments"]
          #content-bottom
       #primary

12. The broken DOM implicates the WYSIWYG editor:

    #post-39
       h3.entry-title
       .entry-content
          div[data-mce-style]
          .about-author
          .written-by
       a[name="comments"]

13. Paragraphs in the correct .entry-content are (needlessly) wrapped in div[style="direction:rtl"], whereas the broken entry uses semantic p elements (and tables for embedded images). Nu. Anyway, the last p contains an img.mceItemIframe, and I’m guessing is right (near?) where things went south.

Requirements

1. Hierarchical menu
2. Only leaves are links
3. Link to pages, categories, or anything?
4. jQuery (WP’s?)

Searching for a WP plugin…

1. Super Slider: MooTools based.
2. BySlideMenu:  MooTools, horizontal, images.
3. Accordion Image Menu: MooTools, images, with “lightbox” effect.
4. Tabbed Widgets: jQuery UI. Messed with it for quite a while — unintuitive. Makes “tabs” of other widgets in the widget area, but…

… Nevermind

Can’t find a simple, usable plugin.I mean, there’s Accordion Menu, which only works with the Pages widget (hardcoded to li.widget_pages), limited to three levels, and the code looks convoluted. Foo?

But this ought to be trivial to hack with jQuery:

1. Add a listener on clicks to list items;
2. Collapse everything initially (ie, on document ready);
3. Toggle visibility when clicked;
4. Use WP’s jQuery; make sure it’s inserted when the menu is rendered.

Implementation

The DOM we expect:

li#nav_menu-3.widget_nav_menu
   .menu-navigation-container
      ul#menu-navigation.menu
         li#menu-item-14.menu-item
            a "Foo"
            ul.sub-menu
               li#menu-item-10.menu-item
                  a "Bar"

Algorithm for the event handler is now apparent: if the clicked anchor is followed by an unordered list sibling, toggle that UL’s visibility:

function() {
	var sub = jQuery(this).next("ul");
	if (!sub.length)
		return true; //??? Is it necessary?
	if (sub.is(":hidden"))
		sub.slideDown();
	else
		sub.slideUp();
	return false;
}

Now apply this handler to anchors in the menu:

jQuery('ul#menu-navigation > li.menu-item > a').click(…);

and run all this on document ready.

Oh, and collapse them initially:

jQuery('ul#menu-navigation > li.menu-item > ul.sub-menu').hide();

Trying to set up a dynamic page in WordPress. Need to capture requests of the form /dir/foo/bar/baz, where {foo,bar,baz} are optional. “dir” would be the slug of a page whose template generates dynamic content based on the… URI? Or query string?

Intuition didn’t seem to work, so debugging with phpinfo() (or Python’s cgi.test):

RewriteEngine On
RewriteBase /tests/
RewriteRule ^dir/(.*)$ echo.php?$1 [QSA,L]
RewriteRule . echo.php [L]

And echo.php:

<?
phpinfo(INFO_VARIABLES);

results in:

1. _SERVER["REQUEST_URI"]: /tests/foo?bar
2. _SERVER["REQUEST_URI"]: /tests/dir/foo/bar
1. _SERVER["QUERY_STRING"]: foo/bar
2. _GET["foo/bar"]: no value
3. _SERVER["REQUEST_URI"]: /tests/dir/foo/bar?may=be
1. _SERVER["QUERY_STRING"]: foo/bar&may=be
2. _GET["foo/bar"]: no value
3. _GET["may"]: be

And

RewriteRule ^dir/(.*)$ echo.php?p=$1 [QSA,L]

makes it easier to extract the path, ie: $_GET["p"] => “foo/bar”.

But, WordPress?

Letting it fall-through with

RewriteRule ^dir/(.*)$ dir/?p=$1 [QSA]

or rewriting to index.php, still gives “/tests/dir/foo/bar”, which I guess confuses WP.

Bah. Been going at it wrong: WP now has a built-in mechanism for URL rewriting. Inserting:

add_rewrite_rule("^dir/(.*)/$", "index.php?p=123&bar=$matches[1]", "top");

into theme’s functions.php does the trick. Except…

Issues

1. Page’s ID, or slug?
2. Parse query string myself, or with WP’s “rewrite tags“?
3. URL prefix hardcoded. Would be nice if WP could manage it, ie, redirect if page’s slug changed.

We’ll use it to record a corpus (hence the ugly name) for the 1,000 Tables event (1KT).

Issues

1. Extract how? IMAP, for efficiency, because we’ll want to scrape the mailbox repeatedly as 1KT unfolds. IMAP lets us download just the index and track which emails we’ve already read. Many will be accessing that mailbox, so can’t delete processed emails nor rely on Gmail’s POP3, I guess?
2. Avoid polling? To improve efficiency and reduce latency, we can use IMAP IDLE.

Resources

Googling produces lots:

1. Bruno Renié wrote an excellent tutorial.
2. Piers Lauder’s imaplib2 (src) encapsulates a threaded connection. Mostly compatible with Python’s standard library imaplib. Many methods optionally accept callbacks so can be non-blocking. The implementations below use this library.
3. Tim posted an example script using threading based on offlineimap‘s code. Chris Kirkham’s IMAPPush.py is a  more complete client.
4. IMAPClient‘s API is so much nicer than imaplib’s. Its idle_check method blocks (with a timeout)! No threading headaches.
5. Michael Goerz explains how Gmail uses labels. What a mess.
6. Lots more. I’ll add links later…

Solutions

1. Extract stuff (plain text, headers, etc) going over entire local mailbox, and outputting to single text file and CSV. Scrub the data while at it. Run this periodically, or ad lib.
2. Listen to new messages using IMAP IDLE. (Cheap and keeps us up-to-date.)
3. Clone Gmail mailbox in Maildir format, I guess, assuming this’ll avoid concurrency problems? (Expensive, so run once.) goerz-gmailbkp isn’t std Maildir. drewbuschhorn-gmail_imap and ProcImap all seem usable. Ended up using Ryan Tucker’s imap2maildir v1.10.2 r20101018 (GitHub): seems ready-to-use; uses Sqlite?

mailbox module

1. Testing imap2maildir: edited example config file and saved as imap2maildir.conf to local directory.
2. First attempt:

   $ ./imap2maildir --verbose
   ...
   imap2maildir: error: Directory '/home/head/Desktop/J14/1,000 Tables/tmp/rtucker-imap2maildir-02a0c05/test-maildir' exists, but it isn't a maildir.

   because sub-directories new, cur, and tmp didn’t exist, and needed to distinguish from an mbox (lines 418, 248).

3. And merging another mailbox into the same directory? Works. How?

Gmail quirks?

1. OK, rmdir, and again:

   $ ./imap2maildir --verbose --create
   ...
   Exception: folder [Gmail]/All Mail: [NONEXISTENT] Unknown Mailbox: [Gmail]/All Mail (Failure)

2. Foo? Again:

   $ ./imap2maildir --verbose --create --remote-folder="[Google Mail]/All Mail"
   ...
    NEW: {'uid': 1, 'envfrom': 'gmail-noreply@google.com', 'msgid': '<6a78310c0978541290ffb9673b@mail.gmail.com>', 'envdate': 'Sun, 6 Mar 2005 08:59:18 -0800', 'date': '06-Mar-2005 16:59:18 +0000', 'size': 4303}
   ...

Incremental scraping

1. imap2maildir’s README says “incremental”, possibly because defaults to using SEARCH SEEN. So I guess I don’t need an IDLE script? At least not urgently?

Completeness

Gmail says some 4,000 messages in mailbox, but downloaded only about 1,800? Ah, imap2maildir defaults to using SEARCH SEEN (by whom? check RFC); use --search=all instead.

Scrubbing data

…

Notes towards…

One group wrote a funny mobile Web app from scratch, complete with CSS3 animations, JavaScript, using interesting Web development and collaboration tools… all that jazz, and deployed it publicly!

My group (Nir, Oz, Uzi, Dima, Itay, Uri…) planned a study of jQuery related topics. Fascinating discussions, about everything, and, as usual, lots of buzzwords: jQTouch, Zepto.js, XUI…

Tasks

Now, how do we proceed?

1. Community development
2. Study projects

Resources

1. Event
   1. Conference conclusion
   2. Conference organization “Wiki” on Google Docs
2. jQuery & mobile Web
   1. Search for Delicious bookmarks: ~2,500 results.

I’ve a hunch these guys can maybe answer, at last, questions that are haunting me about evolution and adoption of software technologies — the human and especially social factors. I promised a presentation about Web frameworks for next month…

Stormy arguments about a mind boggling torrent of buzzwords: eco-systems, Django, WordPress, migrations, South, Flask, Dancer, Rails, Ruby, DSLs, Pylons, concurrency, Twisted, Node.js, ExtJS, jQuery, DOM manipulation vs UI platform, (py)bidi, mobile, canvas, Bespin, Wave, Haskell vs PHP, phpBB, PostNuke, git, Fabric, Buildout, deployment, provisioning, WebFaction, VPS, Open Wonderland, semantic Web, HAML vs client-side templating, nonrel vs SQL, MongoDB, CouchDB, persistence, stored procedures, Delphi.., Sencha Touch.

My latest obsession: how come WordPress is so insanely successful and based on such a rotten foundation?