All My Brain Where stuff from my brain lands

April 11, 2008

Using YUI components in a templated environment

Filed under: Programming — Tags: , , , , — Dennis @ 3:40 pm

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.

April 2, 2008

Serving JavaScript Fast

Filed under: Programming — Tags: , , — Dennis @ 2:55 pm

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

November 8, 2007

Making WP-Super-Cache gzip compression work

Filed under: Web — Tags: , , , , , , , — Dennis @ 11:41 am

I was pretty excited to see an update to WP-Cache. The first thing I noticed is that when I enabled the new super cache compression option, I started getting a file save as dialog instead of my pages. As of the current version of WP-Super-Cache, the readme.txt file states that if you get this, you need to disable the super cache compression option.

Not being satisfied with this answer, I’ve done a little digging and come up with the following solution. (more…)

November 6, 2007

WP Super Cache – The Ultimate WordPress Caching Plugin

Filed under: Web — Tags: , , , , , , , — Dennis @ 3:45 pm

I’ve upgraded my old WP-Cache plugin to this one that I found on Digg.com today.

From the Digg.com Post:

Tired of clicking a link off the Digg front page only to find a crashed or mortally lagged site on the other side? Finally, Donncha (one of the main WordPress developers) has solved the problem once and for all with a plugin that blows WP-Cache away.

I had a minor issue but was able to find the answer on the WordPress plugins wp-super-cache faq page. If you are upgrading from the old plugin, you need to correctly set up you cache files in the wp-content directory. I had old files based on the original WP-Cache and needed to remove those and add the new ones.

# from within the wp-content directory
>rm wp-cache-config.php
>cp plugins/wp-super-cache/wp-cache-config-sample.php wp-cache-config.php
>ln -s plugins/wp-super-cache/wp-cache-phase1.php advanced-cache.php

After that, I was able to enable and use the plugin successfully.

In addition to enabling the plugin, I thought I’d try out the super cache functionality. To do this, you have to add a few more rewrite rules to your .htaccess file. I didn’t notice this in the documentation, but you have to add these before your other rewrite rules.

# new .htaccess file after enabling super cache
RewriteEngine On
# if these rules come after, you'll not get the super cache functionality
RewriteCond %{HTTP_COOKIE} !^.*comment_author_.*$
RewriteCond %{HTTP_COOKIE} !^.*wordpressuser.*$
RewriteCond %{HTTP_COOKIE} !^.*wp-postpass_.*$
RewriteCond %{HTTP:Accept-Encoding} gzip
RewriteCond %{DOCUMENT_ROOT}/wp-content/cache/supercache/%{HTTP_HOST}/$1index.html.gz -f
RewriteRule ^(.*) /wp-content/cache/supercache/%{HTTP_HOST}/$1index.html.gz [L]

# my original rules
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]

Edit: I posted an update that deals with getting the super cache compression to work.

read more | digg story

October 26, 2007

Fixing Slow Resizing of Windows with Compiz and Emerald

Filed under: Software — Tags: , , , , , , — Dennis @ 10:16 am

One of the 1st things I noticed after upgrading to AIGLX with the new ATI drivers was that window resizing was incredibly slow. A quick search on Google yielded a LOT of results for the same problem. The first thing I noticed however, was that they were OLD forum threads. They did mention however, that when resizing a window, the window would be repainted to video memory each step of the way, and that the application would still repaint the window when you were done.

I decided to go look at the settings for the resize plugin with the Settings Manager instead. I found there are different modes for rendering the resize. My plugin was set to the “Normal” mode. I’m not sure if the normal mode has anything to do with the repeatedly re-render problem people had in the past, but I decided to try out some of the other modes. To my pleasant surprise, every other mode of resizing the window is quick and efficient. You can even choose the mode that visually suites you the best.

  • Rectangle
    Renders a rectangle that represents the new size of the window while resizing. The window is resized after you stop dragging. While resizing, the window is still visible in the background at the original size.
  • Outline
    Same as the rectangle mode but there is an outline instead of a filled rectangle.
  • Stretch
    This one is my personal favorite. The window is stretched to the size of the dragging rectangle and doesn’t actually repaint until you are finished dragging.

October 13, 2007

Customize your laptop speed for temperature and performance

Filed under: Hardware — Tags: , , , , , , — Dennis @ 3:11 pm

I while ago, I found a great article on Slashdot that shows how Windows XP manages variable speed CPUs. Well, at least it applies to Intel Speedstep technology. If you have an Intel processor (like the Core 2 Duo T7200 in my laptop), you can take full advantage of the different CPU frequency algorithms to get the desired performance from your machine.

(more…)

Powered by WordPress

css.php
%d bloggers like this: