When I moved this blog, I kept it updated, so I don't think it is vulnerable, but I completely forgot to remove the old one. I just changed the links to refer to the new one. Stupid! And now I've paid the price.

Well, we got just about everything restored from backups (missing some old announcements that I don't think anyone will miss), and I think I've removed any vulnerable code. I also am now the proud owner of some cool-looking hacking software that was installed on the site that I want to try to take apart and experiment with. Just more tuition paid to the school of hard knocks.

askApache is my new best friend

There are lots of mod_rewrite tutorials out there on the web, but once you get past the simple stuff, nothing is obvious. askApache digs deeper and explains more of the hack-y stuff that you need to know in order to actually use your .htaccess file, especially his Crazy Advanced Mod_Rewrite Tutorial, Highly recommended.

Know the difference between Redirect and Rewrite

Both of these involve changing a URL to a different one. Redirecting, however, tells the browser that it changed (generally by sending a 301 status code) while rewriting (or "internally redirecting") keeps it a secret. Thus if I internally use URL's like //example.com/index.php?main=foo&part=bar but publicly I want them to look like //example.com/foo/bar I'll rewrite:

RewriteRule ^([^/\.]+)/([^/\.]+)$ index.php?main=$1&part=$2 [QSA,L]

But to publicly change a URL, say from //example.com/oldname.html to //example.com/newname.html I'll redirect:

Redirect Permanent /oldname.html /newname.html
# or
RewriteRule ^oldname.html$ newname.html [R]

Note that it's usually easier to use Redirect or RedirectMatch rather than RewriteRule with the [R] flag. Note also that the Redirect pattern starts with the / (or whatever the per-directory prefix is) while RewriteRule patterns strip the / out. I've been burned by this! (this is true for .htaccess only; the per-server configuration file httpd.conf uses the entire URL. But I'm on a cheap shared server; I can't touch httpd.conf).

Use Redirect to append a slash to directories

Generally, if you use a URL like //example.com/foo you really want //example.com/foo/. Apache does this automatically for real directories. But if you're doing the /foo/bar to /index.php?main=foo&part=bar and /foo to /index.php?main=foo, you really want /foo to be redirected to /foo/, then /foo/ rewritten to /index.php?main=foo. If you don't, then relative URL's won't work. If the file returned by /foo contains a link <a href="bar"> you want the browser to interpret that href as /foo/bar. But it won't. It thinks the file has the URL /foo, so its directory is / and the relative URL bar refers to /bar. Redirecting /foo to /foo/ lets the browser know that foo is to be treated as a directory, so bar refers to /foo/bar. Example:

RedirectMatch Permanent ^/([^/\.]+)$ /$1/
RewriteRule ^([^/\.]+)/$ index.php?main=$1 [QSA,L]
RewriteRule ^([^/\.]+)/([^/\.]+)$ index.php?main=$1&part=$2 [QSA,L]

ErrorDocument should rewrite, not redirect

It's incredibly annoying to type in //example.com/long/complicated/urk.html (note the typo!) and have the address bar turn into //example.com/404.html. I want the address bar to stay the same so I can edit what I wrote! The ErrorDocument directive uses redirection if a complete URL is specified. This is bad. Just start the URL with a slash and it will use internal redirection (what I'm calling rewriting) and the browser's address bar will remain untouched.

ErrorDocument 404 /404.php
#NOT ErrorDocument 404 http://example.com/404.php

1&1 gets it wrong

I use the cheapest shared-server plan from 1&1 and I've been pretty happy with it: no frills, straight classic LAMP stack, reliable enough for me. But they "hijack" the ErrorDocument for active pages (.php, .cgi, .pl and I assume others) to their own advertising-laden page. That I can understand (again, it's a cheap plan) but they redirect so you can't correct the URL. So I need to do an end run around them by catching nonexistent files first:

RewriteCond %{REQUEST_FILENAME} \.php$
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule . /404.php [L]

RewriteCond -f is case sensitive

This burned me badly before I figured it out. The -f test for RewriteCond uses the underlying operating system to find the file, which means that on a Linux system, it's case-sensitive. No way around it; the [NC] flag doesn't help. So when I create gif's on my Windows machine in Paint and save it, it automatically names the file whatever.GIF and remains that way when I copy it to the Linux server. Now Apache will do fine finding the file if I request it with <img src="whatever.gif"/>, but if my .htaccess has a line RewriteCond %{REQUEST_FILENAME} !-f it will return true since whatever.gif doesn't exist; whatever.GIF does.

Hope this saves someone some time (and hair).

I needed a date/time picker and spend a couple of hours making a simple one:

Obviously, I didn't spend a couple of hours putting this together. I wrote it quickly, then spend the hours getting it to work even remotely correctly in Internet Explorer.

Download the code and the HTML template.

But I wasn't fond of the user interface (edit time by typing, then click on date) or the design, so I decided to search for something better and found, via John Resig, Maxime Haineault's timepickr.

$('#timepickr').timepickr({convention: 12, resetOnBlur: false});

Which I like a lot more (I'll have to separate the date from the time-picking, but I think that's the right approach anyway). This should teach me that Google Is My Friend. No need to invent everything from scratch!

1. Create the new folder, bililite.com/blog/
2. Create a new mySQL database on bililite.com
3. Copy all of youngisrael-stl.org/wordpress/ into bililite.com/blog/
4. Edit the wp-config.php file to reflect the new database name/user/password
5. Backup the youngisrael-stl.org database into an SQL file with phpMyAdmin or some other tool
6. In a text editor, change all the "http://youngisrael-stl.org/wordpress" to "http://bililite.com/blog" and "/wordpress" to "/blog". note that there are both absolute and relative URL's in there, and I was changing both the domain and the subdirectory, so I had to do two replacements. I couldn't just change "http://youngisrael-stl.org" because I didn't want to change links to the actual site.
7. Run the edited SQL file on the bililite.com database
8. In the youngisrael-stl.org/.htaccess , add the line "Redirect permanent /wordpress http://bililite.com/blog" to let browsers know I've moved
9. Actually announce the change on mailing lists of people who actually read the site

So I had to write my own backup, going through each database on a server then each table in the database, writing the appropriate INSERT INTO commands (thank goodness the SHOW CREATE DATABASE and SHOW CREATE TABLE commands work correctly). It wasn't terribly miserable (not nearly as miserable it was trying to use someone else's tool that doesn't work), and now I get my  אריאל מאיר יעקב בן דוד אברהם just fine, and the backup works. I import the generated file into my local copy of mySQL and it regenerates the databases.

// if this file is called directly from the web, run the backup on the requested databases
if (realpath(__FILE__) == realpath($_SERVER['SCRIPT_FILENAME'])) db_backup($_REQUEST['database']);

function db_backup($databases){
	if (!is_array($databases)) $databases = array($databases);
	$dir = '/backup'; // change this as desired
	if( !is_dir( $dir ) && !mkdir( $dir )) die('<h1>Could not create backup directory</h1>'); 
	foreach ($databases as $database){
		list($host, $name, $user, $password) = explode('/', $database);
		$now = date('Y-m-d'); // change this as desired
		@mysql_connect($host, $user, $password) or die ("<h1>Could not connect to $host</h1>");
		file_put_contents("$dir/$name-$now.sql", dump_dbs());
	}
}

// based on http://davidwalsh.name/backup-mysql-database-php
function dump_dbs(){
	$ret = '';
	$dbs = mysql_list_dbs();
	while ($db_row = mysql_fetch_object($dbs)) {
		$db = $db_row->Database;
		if ($db == 'information_schema') continue;
		mysql_select_db ($db);
		mysql_query("SET NAMES 'utf8'");  // magic command to make mySQL output UTF8 to PHP
		$ret = "DROP DATABASE IF EXISTS `$db`;\n";
		$createdb = mysql_fetch_row(mysql_query("SHOW CREATE DATABASE `$db`"));
		$ret .= $createdb[1].";\nUSE `$db`;\n";
		$tables = mysql_query('SHOW TABLES');
		while($table = mysql_fetch_row($tables)){
			$ret .= dump_table($table[0]);
		}
	} // while
	return $ret;
}

function dump_table($table){
	$ret = "\nDROP TABLE IF EXISTS `$table`;\n";
	$createtable = mysql_fetch_row(mysql_query("SHOW CREATE TABLE `$table`"));
	$ret .= $createtable[1].";\n";
	$dbresult = mysql_query ("SELECT * FROM `$table`");
	while($row = mysql_fetch_assoc($dbresult)) {
		$keys = fixkeys(array_keys($row));
		$values = fixvalues(array_values($row));
		$ret .= "\tINSERT INTO `$table` (".join(',', $keys).') VALUES ('.join(',',$values).");\n";
	}
	return $ret;
}
function fixkeys ($arr){
	foreach ($arr as &$i){
		$i = "`$i`";
	}
	return $arr;
}
function fixvalues($arr){
	foreach ($arr as &$i){
		$i = is_null($i) ? 'NULL' : "'".preg_replace("/\r\n|\n|\r/",'\n',addslashes($i))."'";
	}
	return $arr;
}

The main function db_backup takes a string or an array of strings that describe the databases to be backed up, of the form 'host/name/user/password'. For the databases that my host provides it would look like 'db12345.perfora.net/descriptivename/dbo45678/password', where descriptivename is whatever you want prepended to the backup file, which is named 'descriptivename-2009-02-09.sql' or whatever the date is.

If it is called directly as a web page, the database strings are taken from the query string with key "database". If you want to pass more than one database, don't forget to use database[]= to make it into a PHP array. Thus,

http://example.com/db_backup.php?database=db12345.perfora.net/serverdata/dbo45678/password

or

http://example.com/db_backup.php?database[]=db12345.perfora.net/serverdata/dbo45678/password&database[]=localhost/localdata

I hope this saves someone a whole lot of agony!

Now all I need is for the UI team to officially release 1.6 so I can load it from googleapis rather than the jquery svn!

Every time I create or use a jQuery plugin, I realize that the assigning of behaviors to elements on the page is a design decision, not a programming one, and one that should be made by the guy in charge of the CSS, not the guy in charge of the javascript. Even when I'm the same guy, I want to wear each hat separately. But these presentational enhancements are written in javascript and applied in javascript. So my "presentational" code is in two different files:

style.css

.gallery a { border: 1px solid green }

style.js

$('.gallery a').lightbox({overlayBgColor: '#ddd'});

I could put the presentational javascript in the HTML with $.metadata but while that's fine for quick-and-dirty pages, it's evil in production since it completely violates the separation of data/structure/presentation/behavior.

As I and others have noted before, the application of these plugins belongs in the stylesheet, and I finally got it to work:

style.css

.gallery a {
  border: 1px solid green;
  -jquery-lightbox: {overlayBgColor: '#ddd'};
}

and a single call to start it off: $().parsecss($.parsecss.jquery) .

Download the code.

See the demo.

Use

$(selector).parsecss(callback) scans all <style> and <link type="text/css"> elements in $(selector) or its descendents, parses each one and passes an object (details below) to the callback function. It uses a callback because external stylesheets and @import statements need to use AJAX, asynchronously. The parser is smart enough to understand media attributes and statements.

The supplied callback is the $.parsecss.jquery function. That function finds properties that start with -jquery and applies them to the matching elements. Generally, you would want to parse all the stylesheets in the document, $(document), which in jQuery is abbreviated $(), so the simple call is: $().parsecss($.parsecss.jquery).

The CSS

Some jargon: in the stylesheet

foo {
  bar: quux;
  -bar-foo: quux-2;
}

foo > foo {
  bar: quux 2;
}

foo { bar: quux; -bar-foo: quux-2} is a statement, foo is a selector, {bar: quux; -bar-foo: quux-2} is its CSStext, -bar-foo: quux-2 is a declaration, -bar-foo is its property and quux-2 is its value.

$.parsecss.jquery

$.parsecss.jquery is the callback function that implements the custom-jQuery code. It looks for properties that start with -jquery. If the property is -jquery alone, then it executes the value as a javascript statement for each matched element, $(selector).each(Function(value)). For example:

span.important {
  -jquery: $(this).append('<span>I am important</span>')
}

executes

$('span.important').each(function() {$(this).append('<span>I am important!</span>')})

If the property is -jquery-show or -jquery-hide, then the normal show() and hide() are overridden for the matched elements to use the value as the arguments. It will recognize plugins and jQuery UI effects. Examples (see below how it parses the arguments):

a {
  -jquery-show: fast; /* $('a').show() does $('a').show('fast') */
  -jquery-show: fadeIn 2000 /* $('a').show() does $('a').fadeIn(2000) */
  -jquery-show: fold {size: 5} slow /* $('a').show() does $('a').show('fold', {size: 5}, 'slow') */
  -jquery-hide: explode fast /* $('a').hide() does $('a').hide('explode', {}, 'fast') It's smart enough to know that jQuery UI effects need an options object inserted */
}

Using hide() or show() with any arguments overrides the CSS-imposed functions.

Otherwise, if the property matches the regular expression /-jquery-(.*)/ then the (.*) is taken as a plugin name and the value is used for the arguments (see below how it parses the arguments):

.gallery a {
  -jquery-lightbox: {overlayBgColor: '#ddd'}
}

executes

$('.gallery a').lightbox({overlayBgColor: '#ddd'});

Valid CSS?

Does including the -jquery properties make the CSS invalid? Sort of. The easy answer is "Who cares?" The CSS syntax specifies that

User agents must handle unexpected tokens encountered while parsing a declaration by reading until the end of the declaration, while observing the rules for matching pairs of (), [], {}, "", and ''

Keywords and property names beginning with -' or '_' are reserved for vendor-specific extensions.

But, some people want CSS that passes the validator. I adopted a solution similar to Microsoft's conditional comments. Text surrounded by /*@ and */ will be parsed by the parser despite being ignored by the browser.

span.important {
      font-weight: bold;
/*@   -jquery-after: '<span>!!!</span>'; */ /* "hide" the jQuery CSS in the comments */
}

$.livequery

What makes the combination of CSS and javascript so powerful is that CSS is "live": changes in the DOM are immediately rendered on the page (this is why Microsoft, when they invented it, called it DHTML—Dynamic HTML). If the stylesheet says .important { font-weight: bold; color: red } then running $('#x').addClass('important') changes the text to red and bold. In addition, $('#x').removeClass('important') changes the text back. The browser keeps track of all the elements and the selector in the CSS, and when an element starts to match the CSS is applied, and when it no longer matches, the browser knows how to "undo" the styling.

jQuery plugins can't do this. The javascript is run at $(document).ready, applied if the elements match at that moment, and that's it. This makes it much less useful, especially for AJAX-y sites that are constantly changing their elements.

Enter Brandon Aaron's $.livequery plugin. It keeps track of the selectors used and overrides all the plugins that modify the DOM, and re-applies the javascript if need be. It also allows you to specify an "unmatched" function that will be run when the element no longer matches. Obviously, you or the plugin programmer has to provide the "undo" ability; there's no way for $.livequery to know how to do that.

If $.livequery is available, $.parsecss can use it. Separate the two parts (match code/unmatch code) with a ! (the exclamation point implies "not"):

.important {
  -jquery-css: font-weight bold ! font-weight normal ;
}
/* yes, in real life you'd do font-weight: bold;  and not rely on javascript */

You can leave either side of the ! blank:

.gallery a {
  -jquery-lightbox: {overlayBgColor: '#ddd'} ! ; /* the '!' means we'll use livequery */
  -jquery-unbind: ! click; /* remove the click handler when the element no longer matches
}

Some notes on $.livequery:

• If $.livequery is not available, the value after the ! is ignored and the code is applied only when $.parsecss is called.
• $.livequery checks every selector on every modification of the DOM. It can make complicated pages and script very slow. Be aware of the tradeoffs of using it.
• jQuery 1.3 includes a $.live plugin. This is not the same as $.livequery! It uses event delegation to keep event handlers on new elements, but does not re-apply javascript to new elements. You have to use $.livequery for that.

The parser

The parser turns CSS into a javascript object in the obvious way:

div div:first {
  font-weight: bold;
  -jquery: each(function() {alert(this.tagName);})
}

div > span {
  color: red;
}

is passed to the callback as:

{
  'div div:first' : {
    'font-weight' : 'bold',
    '-jquery': 'each(function() {alert(this.tagName);})'
  },
  'div > span' : {
    'color': 'red'
  }
}

The callback is called separately for each <style> and <link> element, and for every @rule that includes CSS text (@import and @media). There is no guarantee of any particular order in calling the callback. The parser (and $.parsecss.jquery)does not attempt to obey the priority rules of the CSS cascade; it will execute all the relevant code.

The parser is very simple; it uses regular expressions and String.remove to pull out comments, strings, brace-delimited blocks and @-rules, then parsing the grammar by using String.split on } to get each statement, splitting on { to get the selector and cssText, splitting the cssText on ; to get each declaration and on : to get the properties and values. It's not a sophisticated finite-state automaton but it serves.

$.parsecss.parseArguments

CSS values use space-delimited arguments, border: 1px solid black

a b c                                       =>  ['a', 'b', 'c']
1 2 c                                       =>  [1, 2, 'c']
[1,2] {a: 'b c'}                          =>  [[1,2], {a: 'b c'} ]
{a: b, c: d}                              =>  ["{a: b, c: d}"] // inside arrays, objects and functions, you have to use real javascript syntax
{a: 'b', c: 'd'}                            =>  [{a:"b", c:"d"}] // the automagic quoting is only at the top level
1+2                                         =>  [3]
'1+2'                                        =>  ['1+2']
10 fast function() {$(this).hide}   =>  [10, "fast", (function () {$(this).hide;})]

$.parsecss.isValidSelector

$.parsecss.isValidSelector(selector {String}) is a function I wrote for Any Kent's JSS, which is sort of the opposite of $.parsecss.jquery: it goes through the stylesheets and finds valid CSS selectors that the browser cannot handle, and uses jQuery to implement them. Eric Meyer recently had a similar idea. $.parsecss.isValidSelector takes a string and returns true if the browser recognizes it as a CSS selector. Thus in IE6, $.parsecss.isValidSelector('div p') returns true and $.parsecss.isValidSelector('div > p') returns false. In Firefox 3, $.parsecss.isValidSelector('div > p') returns true and $.parsecss.isValidSelector('div:visible') returns false.

A simple (though very inefficient) version of JSS would be:

$().parsecss(function(css){
  for (var selector in css){
    if (! $.parsecss.isValidSelector(selector)) $(selector).css(css[selector]);
  }
});

It works by creating a new stylesheet and creating a rule with that selector and seeing if the browser recognized it.

$.parsecss.mediumApplies

$.parsecss.mediumApplies(medium {String}) is similar to $.parsecss.isValidSelector, but it returns true if the argument is a valid media attribute on a <link> element or @media rule. Thus, for a regular computer, $.parsecss.mediumApplies('screen') returns true, $.parsecss.mediumApplies('all') returns true, $.parsecss.mediumApplies('print') returns false, and $.parsecss.mediumApplies('') returns true.

The second argument to $.fn.parsecss

parsecss accepts a second argument, parseAttributes {Boolean}. If it is true, the parser will attempt to parse the style attribute of each element and pass it to the callback.

This is problematic on many levels. The first is how to identify the relevant element. If the element is <div id="test" style="-jquery-show: fast">a div</div> we want the object {'#test' : {'-jquery-show': 'fast'} }. If the element has an id attribute, then it's easy. Otherwise, it counts the tags in the page and uses :eq(): thus if <div style="-jquery-show: fast">a div</div> is the fifth div element, the object generated includes {'div:eq(4)' : {'-jquery-show': 'fast'} }.

The real problem is that there is no way to get the actual style attributes for elements in the DOM. The source code is parsed and interpreted by the browser and any declarations that the browser does not understand are discarded. There's no way to get the style="-jquery-show: fast" using any of the tools available. What I've done is used AJAX to get the source code back again: $.get(location.pathname+location.search, 'text', function(html){/*code that scans the html for style attributes*/). This assumes that getting the file again will get the same code (which might not be true if the real page was retrieved with a POST request) and that the DOM has not been changed. Otherwise 'div:eq(4)' will not refer to the correct element. You can obviate this problem by using id's which should not change. Still, the approach is problematic and you might want to use $.metadata to add information to the HTML itself.

If anyone knows how to get the actual text of the "style" attribute, please let me know!

  <div style="background: purple; margin: 2px">This is a test</div>

And more testing:

  <div style="background: #080; margin: 2px">This is a test</div>