VulgarisOverIP

Using Multiple Templates With DokuWiki

Time for that biennial blog post, right?

Anyways, DokuWiki is a PHP based wiki that’s powerful enough to run your entire site or integrate with whatever you already have. Setting up a different look for the wiki is simple, just a matter of changing templates. But what if you want more than one look (template)?

Let me answer that question by asking another question: Why would you possibly want to two different templates for the same wiki? Well the main reason would be if you had separate administration (intranet) and public sections of your site, each with their own custom look. It would just be weird to log into your admin site, start reading a page with one theme, click a link and then view a related page in a totally different way. Not to mention that all your admin links are now gone and just as you click the back button your remember you had previously submitted a form that sent an email to all 5000 of your clients. Well, maybe they won’t even notice…

So, where do we start?

  1. Google “multiple dokuwiki templates”
  2. Check the first few links
  3. Ooh! Multitemplate plugin for Dokuwiki
  4. Hmm, last version is from 1/1/07 (that’s older than MY posts). Also won’t let us view the same page using two different templates. No good.
  5. Give up on Google, no one can code better than me!
  6. Begin randomly coding

My first attempt at a solution was a simple extension of xbr plug-in. I think it originally was supposed to convert new-lines to ’s or something crazy like that. I modified it to check the current URL and if it contained certain magic properties (“&theme=public”, for example) it would rewrite all the links on the page to also include some magic. Then I modified my one template to check for magic as well, which loaded one of two template options boot-strap style.

This solution was ugly. A waste of a good 32 minutes. At least. Also, it didn’t work. Links like “Edit this page” and “Admin” weren’t affected and it turned out that DokuWiki is so smart that it caches all the HTML it produces and then “freezes” your links after the first page visit.

Second attempt. This time, using the old noodle! Here’s the correct way to do it:

  1. Separate the original boot-strapping template into two separate templates
  2. Make a symbolic link to the /wiki directory (contains DokuWiki code) in another directory (/intranet/wiki maybe?)
  3. Modify the local.protected.conf file to check the URL for the alternate directory and then load appropriate template

Here’s an example of the only code you need:

if (isset($_SERVER['REQUEST_URI']) && strstr($_SERVER['REQUEST_URI'], '/intranet/') !== false) { $conf['template'] = 'intranet'; }

That’s it! You only need one copy of the [DokuWiki] code, one copy of the [DokuWiki] data, a symbolic link and 2-3 lines of extra code. No caching problems, no extra plug-ins and a good excuse to blog.

jquery.suggest 1.1

It’s been a while since my last post, and I’ve got a lot of great ideas to get down on blog, but first I’d like to announce a new version of jquery.suggest. Some new features include:

  • Improved cross-browser compatibility (tested to work the same across Firefox/Safari/IE6/IE7)
  • Cache bug has been fixed that caused suggestions to “forget” to hide
  • Moved some stylings from JavaScript to CSS
  • Cleaned up code, started heavy commenting
  • Not exactly a new feature, but jquery.suggest will soon be on jQuery’s plugin page

For more information, please see this previous post. While the plugin works in Opera, it’s not perfect (which is why I didn’t mention it above) and I’m still working on it.

Download it here (example CSS here) and give me some feedback.

Updated Minify Library for PHP 4

I’ve updated my PHP 4 version of minify which you can download here. This new version now supports external linking to minified JavaScript and CSS through the use of and tags. You can find instructions on implementing this method here, it’s the same as standard minify.

jquery.suggest, an Alternative jQuery Based Autocomplete Library

Update 2: After reading Peter-Paul Koch’s amazing book on Javascript, I’ve come to realize that the offset problem with the drop down in IE is probably caused by the use of em’s on padding/margins of autocomplete’s offsetParents.

Update 1: I realize the drop down is slightly off in IE 6&7, I think it has something to do with WordPress or K2′s stylesheets. Also, I’m in the process of updating the script to work better when the window is resized. Keep checking back here for more updates.

Try it:

jquery.suggest is my attempt at a jQuery autocompleter that functions much like Google Suggest. I used code and techniques from two popular jQuery autocompleters:

Originally, I used the first library in all my code but found that it just didn’t have the flexibility I needed and it had not been maintained in a long time. The biggest missing feature is the ability to run a function upon selecting something from the drop down.

While the Interface autocompleter seems to be rather up to date, there’s still a lot of problems with it. It’s tied to the Interface 1 library (which looks dead), the code with is supposed to help cover forms in IE doesn’t work over HTTPS and the caching system is so screwed up I ended up having to manually disabling it.

I also found that the two implementations acted differently in different browsers including IE 6&7, Firefox and Safari. Sometimes tab would select an item, sometimes it would move to the next element. Sometimes typing in something (which I didn’t want to match) and hitting enter would submit the form as usual, sometimes it would force me to select the first match.

Anyways, enough complaining, here’s the feature list:

  • Smart cache system that takes a maximum cache size in bytes and uses MRU list to discard items. Oh, and the caching works correcly.
  • Doesn’t assume that you have to choose an item from the drop down list. If an item is selected and you hit enter or tab, that item is copied to the element. Otherwise, hitting enter or tab works just like a normal element.
  • Event handler for selecting a drop down item.
  • Works the same in Firefox, Safari, IE 6&7.

It’s really easy to use, here’s the code for the suggest box above:

jQuery(function() { jQuery("#suggest").suggest("files/search.php",{ onSelect: function() {alert("You selected: " this.value)}}); });

Here’s the stylesheet and the source for the PHP file (blatantly stolen from autocomplete) which returns the items. And finally, download the source to the suggest library here. You can find more information about possible options at the bottom of the source.

The only requirement is jQuery itself and the dimensions plugin, although the script will try to use the bgiframe plugin if possible (to fix IE 6).

Execute JavaScript Injected Using innerHTML Attribute, Even With Safari

A common AJAX technique is to return straight HTML and use the innerHTML element attribute to insert it into the DOM. Unfortunately, JavaScript inserted into the DOM this way (inside a tag) will not execute in all browsers.

I found this out when trying to implement a dynamically changing PlotKit graph on my companies intranet site. It worked in Firefox (of course) and IE was coaxed into working be using the DEFER attribute. But the best Safari could do was leave a big blank space where my beautiful graph should be. Even though there was probably only one other employee that used Safari, I knew there was no way this was going to stand. There must be a solution, right?

Some googling turned up this posting, where the problem was solved using a combination of cloneNode(), innerHTML and appendChild(). Fancy. It works with Opera and IE, but not with Safari.

Then, my eureka moment came. I replaced the tag in the RPC with a tag, still keeping all the script inside the . Next, I added .javascript { display: none; } to the style sheet and did some jQuery magic:

$('#ajaxLoading').ajaxStop(function() { $('.javascript').each(function() { eval($(this).text()); }); });

This simple function runs every time an AJAX call is completed and uses eval() to manually run the JavaScript. It’s ugly, it’s probably violating some sort of standard, but guess what? It works in Safari.

“Minify” Your External JavaScript and CSS With PHP

First off, I have to say that most of the work that went into this project was already done for me by someone named rgrove. You can find the original (PHP 5) version of Minify here. All I’ve done is convert the code to run on servers still using PHP 4 (download here). This article presents a justification for using Minify over other techniques, and the results of converting www.appelrouthtutoring.com to use the library.

Most modern web sites today are seperated into the three main parts: semantic HTML, presentational CSS and functional JavaScript. Any HTML page you visit can be supported by multiple CSS and JavaScript files, each one requiring it’s own HTTP connection and download. When a website starts using multiple style sheets and the latest fancy JavaScript libraries (I’m looking at you jQuery, Prototype, MochiKit, YUI, Ext, Dojo Toolkit…) mixed with their own personal scripts, things can start getting pretty slow even on the fastest connections.

One solution is caching these files, but this still requires an HTTP connection every time the browser has to check for the latest versions. You could use an expiration time far off in the future, but you better make sure your code works perfectly the first time a user downloads it. Another problem with this technique is that pages served over HTTPS will never be cached; obviously for security reasons.

A second solution used by many major sites like Google and by libraries like jQuery, is to pre-compress any JavaScript so that file downloads are quicker. Dean Edward’s packer is an excellent tool in this regard. While this is a big help to anyone stuck with dial-up, users with fast connections will not notice a remarkable difference due to the identical latency for downloading an uncompressed or compressed JavaScript file. This also adds another step to the building, testing and deployment process because you definitely don’t want to be developing a site while debugging obfuscated code.

Minify is a PHP library that automates the process of concatenating and compressing multiple CSS and JavaScript files. This is a “free” way to improve the experience for anyone visiting your site; everything just loads faster. How much faster? Before I deployed the minified version of www.appelrouthtutoring.com, I tested the average download time of the homepage with Fasterfox, a Firefox extension. I reloaded the homepage 10 times, clearing the cache every time, and found the average load time to be 3.343 seconds.

That would be a good average time for a content heavy site like www.cnn.com, but not for the super simple mostly text web site I tested. After uploading the site using my modified Minify library, the average load time dropped to 1.228 seconds. Again, that’s an average after 10 reloads with no caching. That’s a speedup of 272%(!), with absolutely no effect on the development process for the site.

I found a similar speedup on the intranet part of the site. Load time fell from an average of 4.994 seconds to 2.329 seconds (214% speedup!). While this doesn’t exactly double the productivity of employees using the intranet, it sure makes life a lot easier.

It’s code time (the exact code I use on the homepage):

[do this before writing any HTML]

require_once('minify_php4/minify.php');

// Create new Minify objects. $minifyCSS = new Minify(TYPE_CSS); $minifyJS = new Minify(TYPE_JS);

// Specify the files to be minified. // Full URLs are allowed as long as they point // to the same server running Minify. $minifyCSS->addFile(array( '/styles/fonts.css', '/styles/nifty.css', '/styles/public.css', '/styles/calendar.css', '/styles/navigation.css' ));

$minifyJS->addFile(array( '/scripts/jquery.js', '/scripts/nifty.js', '/scripts/public.js' ));

[do this in ]

It’s so easy, it should be a crime to load multiple external files the old-fashioned way. Let’s all make the web a better place and start cutting down those load times!

Get the source here.

jQuery Focus Plugin Available

Update (June 21, 2007): I’ve deleted the links to the jQuery.focus() plugin and jQuery page (for now). You’ll find BlockUI to be a MUCH better and MORE complete jQuery solution. I’ve removed jQuery.focus() out of humility.

If you look in the new jQuery tab you’ll see my first released plugin for jQuery: jQuery.focus(). I know, jQuery already has a .focus() method. But that only works on ’s, now it works for everything! It creates a nice fade effect that blocks out everything on site EXCEPT for the element you .focus(). Click here to see a demonstration and please let me know if you find this useful.

Scripting With jQuery or: How I Learned to Stop Worrying and Love the DOM

To understand my new found infatuation with jQuery, I’d like to begin with a story about the problem that led to this posting.

The :hover pseudo-selector is one of the most powerful tools when working with a CSS compliant browser. With it, you can create rollovers, menus and other visual tricks without resorting to the “messiness” of Javascript. Tiny pieces of interactive logic describing complicated visual states can be included as snippets of text that even your designer can understand and use. If only it were that easy.

Because of IE’s limits, an entire generation of web developers have learned to use anchors (’s) for everything from menu items to blocks of text. Clearly, these are not the applications this element was semantically design for. Up until version 7, Internet Explorer never allowed you (the highly competent web developer that you are!) to use :hover selectors for anything except anchors. Of course you could always just use javascript to manually attach effects to a particular element, but that seems ridiculous when you end up having to write dozens of lines of code just to get 4 list items (’s) to change classes on mouse over. A List Apart is a site that I look to for direction when simplifying a design, but even their solutions to this problem makes me cringe.

Me: Now that I’ve laid out the problem, can you guess the solution?

You: jQuery, of course!!!

Me: Nope, what the heck is jQuery? Anyways, I’m going to write a super awesome script that just plugs into any project, re-downloads all the CSS files using bleeding edge AJAX code, parses that CSS using only the tightest regular expresssions, and then shoves all those :hover’s down IE’s throat.

Here it is. I even had the temerity to name it “fixCSS” because I thought that a couple pages of Javascript code would unify every browser on the market and allow anyone to use use compliant CSS blissfully unaware that there was any sort of scripting on the site.

It works too, go ahead. Download it, add Prototype.js, put some :hover’s in your CSS, fire up IE in your favorite virtual machine (you aren’t running IE locally are you?!?!) and wait for the page to load. It just works.

But there’s a problem. If you created a simple test with one small CSS file and one small HTML file and ran it on your local development server you probably didn’t notice it. But if you are running on a busy server with multiple CSS files and another 100k of html and images, you are definately going to notice something is wrong with IE. For about 2-3 seconds nothing seems to work. You can move the mouse and click, but rollovers don’t work, clicking doesn’t work and hell, the mouse cursor doesn’t even change over links. Then suddenly, after a couple of seconds of violently swinging your mouse back and forth across the screen, menus start dropping down and you can safely navigate to another page. And when you do, guess what happens…

You see, before writing this script I forgot the cardinal rule of web programming: implementation doesn’t matter, speed does. Visitors to your site don’t care if your CSS is the pinnacle of seperation of presentation and content, they care if they care about using your site. And compared to loading for 2 seconds, loading for 5 seconds is an eternity.

I learned this the hard way after 1 day of visitors using this script. My site needed a rewrite, fast, and I thought it would be a good opportunity to put into use a very interesting library: jQuery.

I had come across jQuery when I began planning phase 2 of fixCSS: more selectors! I was going to fix >, , [], and any other symbol I could find on my keyboard that IE didn’t respond to in CSS files. By this time I realized that simple parsing of the CSS files wasn’t going to be powerful enough, I needed a CSS interpreter in Javascript. Prototype, another popular and powerful Javascript library, at the time had a function called $$(). In theory, you supply this function with a CSS selector and get back a nice array of elements. In practice, I supplied it with CSS selectors and got back hours of frustration.

I then began to scour the net for a single function that could do what I required. I don’t remember how I first came across jQuery, but I do remember the initially feelings I had when I wrote this:

$('ul .menu_item').hover(function() { $(this).addClass('hover'); }, function() { $(this).removeClass('hover'); })

If you’ve ever programmed anything in your life, you can guess what this does. Upon seeing code like this and thinking about the days I had wasted on fixCSS, I almost became depressed. I immediately deleted fixCSS.js (just to get you guys a copy I had to look through my old CVS repos) and Prototype, rewrote all my Javascript into a few small snippets of code and ended up cutting 50kb(!) from the average page I was working on.

It’s all so clear to me now. There’s no reason (and no possible way) to implement a real-time CSS file interpreter for web sites. The ability to decode CSS selectors in Javascript provides a common language for those designing a site and those developing it. By incorporating style selectors with powerfully augmented DOM elements and lot’s of functions mapping onto arrays, jQuery has boiled down site scripting to it’s core: select some nodes, select the event you want to capture (optional!) and do some logic. I’ve learned that it’s alright to use Javascript to make up for the inadequecies of Microsoft, Apple and all those other bastards. Learn to forget about which browser you’re using, try jQuery on your next site and you’ll see that scripting can be fun again.

[tags]jquery, hover, selectors, css, javascript, dom, prototype[/tags]

UPDATE: Send Email With PHP and GMail Hosted for Your Domain

Due to the amount of requests emailed to me for working source code I have now posted the modified PHPMailer I use in my own projects. Click here to download the library. Here’s an example of how to use the code:

require_once('/phpgmailer/class.phpgmailer.php');
$mail = new PHPGMailer();
$mail->Username = 'user@domain.com';
$mail->Password = 'password';
$mail->From = 'user@domain.com';
$mail->FromName = 'User Name';
$mail->Subject = 'Subject';
$mail->AddAddress('myfriend@domain.com');
$mail->Body = 'Hey buddy, here's an email!';
$mail->Send();

This will work for any GMail or Google Hosted email account. Just make sure to include the @domain.com part for the username, even if it’s for standard GMail. Hope this saves people some hastle.

[tags]gmail, php, google, phpmailer[/tags]