Using YUI components in a templated environment

If you develop sites anything like I do, you’ll end up setting up a site wide layout and theme before you start coding any individual pages. I like to add YUI components where they are useful, but I’ve come across a couple little quirks that were annoying me. Here are my observations and what I did to get around them.

Templating Quirks with YUI

The root of my annoyance is that I don’t need all the components I want to use on all my pages. I do however need some components on more than one page as well as sometimes needing a few components on one page. Somewhere along the line, I gained a believe that doing things more than once was not good. Copying and pasting header files and setup code between pages is on my list of less desirable behavior. This led me down the path of adding all the YUI header files to my master template for my site.

Advantage: All my pages have the header files already and I don’t need to worry about that on each page I’m working on.
Disadvantage: Pages with no need for a YUI component still use up bandwidth/time downloading the headers.

If you weight the disadvantages of putting the header files on every page higher than the advantages like I did, you might go the opposite route and try adding them only to the pages where you need the components.

Advantage: Only pages with the components are now loading the dependencies.
Disadvantage: You’re back to redoing setup work and/or copying and pasting a lot.

Dynamically Loading YUI Components

Well, I wasn’t entirely happy with either solution so I came up with a hybrid. I’ve watched the YUI-Loader with some interest since it was introduced a couple versions ago. It is now no longer marked as “Beta” and I figured it was worth looking at for my current project. The basics are this:

  1. Include the loader script.
  2. Create a loader with a list of objects you’ll be using.
  3. Use the loader to grab all the required resources.
  4. Use the resources you need.

Sounds like a good idea to me but I didn’t want to copy/paste loader initialization code in my template pages any more than I wanted to copy/paste header files. My solution is to create a generic loader in my master template and then override the required resources at the page level.

Here is part of my master template

<script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script src="http://yui.yahooapis.com/2.5.1/build/yuiloader/yuiloader-beta-min.js"></script>
<script type="text/javascript">
var yuiLoaderRequires=[];
var myOnLoad=function() {}
function init() {
var yuiLoader = new YAHOO.util.YUILoader({
require: yuiLoaderRequires,
onSuccess: myOnLoad
});
yuiLoader.insert();
}
</script>
<!-- Using your template language, insert the child template javascript here -->
<script type="text/javascript">
YAHOO.util.Event.onDOMReady(init);
</script>

Then, just override yuiLoaderRequires and myOnLoad in the subpages:


<script type="text/javascript">
yuiLoaderRequires=['treeview','colorpicker'];
myOnLoad=function() { doSomething....; }
</script>

I find that a lot less annoying than looking up requirements for each component on each page. Also, running the loader in the onDOMReady function causes the requirements to be loaded after the HTML has been rendered, this ought to give the appearance of a faster page load for most users. It might not work for every case though, so use with care. Hope you enjoy.

Serving JavaScript Fast

I found this excellent writeup on serving JavaScript files posted on Digg.com. I think I’ll convert some of those ideas to Python but I thought it worth posting here in the mean time with the link to the story.

The next generation of web apps make heavy use of JavaScript and CSS. We’ll show you how to make those apps responsive and quick.

read more | digg story

Image Upload with YUI Editor 2.5.0

The YUI team has been making further enhancements to the YUI library. I decided to stick together in one post all the previous resources I’ve added for the YUI Image Uploader and make sure the uploader was compatible with the latest version of the YUI Rich Text Editor.

Continue reading “Image Upload with YUI Editor 2.5.0”

How to fix the Digg Tools JavaScript for WordPress

If you have a wordpress blog and you’ve ever had a popular enough post to have it posted to Digg.com, you might be tempted to paste the digg tools javascript into your post to integrate your site with the digg post. The first thing you noticed after you got the post edited is that your new Digg.com widget didn’t work properly. It reflects the accurate Digg count on the post page but the home page has an incorrect or 0 count.

The following default Digg.com integration JavaScript works on the post page but not on your blogs front page. Here is a quick explanation of the problem. Notice in the original JavaScript code below, the WEBSITE_URL parameter is enclosed in single quotes. WordPress interprets single quotes when your post is displayed and prints a pretty curved quote instead. This results in pretty apostrophes and broken JavaScript. The reason the Digg count works on the post page is that the digg_url parameter, if not set, is defaulted to the referring URL. If the referring URL, in this case, the post page, is the same as an existing digg article, the Digg count is correctly accessed.

<script type="text/javascript">
digg_url = 'WEBSITE_URL';
</script>
<script src="http://digg.com/tools/diggthis.js" type="text/javascript"></script>

Well, the fix for this is so simple that I almost didn’t blog about it. Only after helping fix a post for ExtraLife, Scott said that I ought to write all this down and make a post.

The fix is simply to change the single quotes to double quotes. WordPress doesn’t send interpreted double quotes and your Digg widget renders properly in both locations. Since that was such a simple tweak, I’ve also included a div with a style that displays the widget on the right side of the text with the text wrapping around the bottom when the widget ends.

Here is my modified and corrected JavaScript. Enjoy. I’m also pasting it at the top of this page so you can see a working example. I don’t usually Digg my own articles but oh well.

<div style="position: relative; float: right; width: 52px; margin: 0px 10px 0px">
<script type="text/javascript">
digg_url = "WEBSITE_URL";
</script><script src="http://digg.com/tools/diggthis.js" type="text/javascript"></script>
</div>

An Example Rich Text Editor Image Upload with PHP

After my previous image uploader and turbogears image uploader posts, the overwhelmingly most requested information has been a PHP implementation of the upload script. I’m not much of a PHP guru. Luckily, a few users have posted possible solutions for this. I’ve added an editor to this post that uses a PHP script to process the image on the server. The original image uploader script is compatible with the newer 2.4 version of the editor.

Whithout further delay, here is the editor. Just click on the “insert image” link under “Insert Item” to test the upload functionality. Continue reading “An Example Rich Text Editor Image Upload with PHP”

Creating Image Preview Tooltips with the YUI Overlay Widget

The Yahoo UI Library provides a nifty helper for creating tooltips. I started playing around with it when I wanted to add the same tooltip to a large number of elements on a page. What got me interested in this implementation, is the ability to use the same tooltip on a number of elements, rather than having each element have it’s own tooltip div, or implementation.

The tooltip library creates a div element for each tooltip when the document loads. I wanted to use the tooltip to display a larger version of an image when a user hovered their mouse over a thumbnail. I did not however want to load all the full sized images when the page loads.

I decided the best way to handle this task was to implement my own tooltip function and create my own panel. Continue reading “Creating Image Preview Tooltips with the YUI Overlay Widget”