We want something besides the default messaging for user forms in Drupal. They are still in English, but just custom to our application. Also, we don’t need to override all of them, just a few. And, we are using Drupal 6.

Dx

Drupal is set up to automatically translate form messaging. Using this mechanism, we can cleanly alter the messages to appear just as we would like them to appear. We create a custom language and set it as the default. We only make the few translations that we need and Drupal falls back on the default English for stuff we don’t translate.

To setup the custom language:

1. Make sure the Locale module is enabled and that you have permissions to use it (both to Administer Languages and for the Translate Interface)
2. Go to Site Configuration -> Languages -> Add Language
3. Open the Custom Language form
4. Fill in the form with something like:
   Language code: en-MySite
   Language name in English: MySite
   Native language name: MySite
   Path prefix: mysite (this is only a placeholder and won’t be needed later)
   Language domain: [blank]
   Direction: Left to right
5. Click the Add custom language
6. Go to Site Configuration -> Languages and choose en-MySite as the default language, click Save Configuration

To make the faux translations:

1. Go to Site Building -> Translate Interface -> Search
2. Search for a particular string by something it contains, say, “username”.
3. Find your string in the search results and click edit. Enter your translation and submit it.
4. Repeat for other strings as necessary.

Tx

So, we end up with a clean faux translation of the default strings into your application-specific copy.

So, I changed which icons it shows and used the better, alternative ones. They are already there in the icon bar in c:\wamp\images_on.bmp and c:\wamp\images_off.bmp. We just have to change the mapping.

In c:\wamp\wampmanager.tpl change lines 10 – 12 from

TrayIconAllRunning=16
TrayIconSomeRunning=17
TrayIconNoneRunning=18

to

TrayIconAllRunning=9
TrayIconSomeRunning=10
TrayIconNoneRunning=11

The downsides: there is no difference between the icons for offline and online modes, the new icons seem meant to be used elsewhere (but I never see them, or at least not nearly as much as I see the tray icons).

I’m working on a project that loads (and hides) content meant for lightbox in the markup of the main page. We are doing this in order to have quick reactions to the users’ clicks and optimize the content for SEO. With the existing mechanism, Lightbox2 will reload the page content if the trigger points to an in-page anchor.  For instance,

<a href="#anchors-aweigh">Load existing content</a>

will cause Lightbox2 to reload the current page even thought the content is already available in-page. This kills the quick reaction time and adds ticks on the tracking calls and increases server load.

Taking a note from Erik Hedin on how to focus Lightbox on an anchor after (re)loading the page, I rewrote the the modalContainer’s load instructions to check against the current url and see if the target content is already existing on the page. So, the line

$("#modalContainer").load(src);

in lightbox.js becomes

/* HERE'S THE RUB */

/*
	if already in the page, load in the content
	test by comparing src and window.location without hashes (anchors)
	and then finding the src's hash in the DOM

	if either are false, fall back and load the old way
*/
var srcHash = src.replace(/.*(#.*)/, '$1');
if ((window.location.toString().replace(/#.*/, '') == src.replace(/#.*/, '') ||
			// src.replace(/#.*/, '') will be blank for some IE versions if the href is just a hash
			src.replace(/#.*/, '') == '') &&
			srcHash && $(srcHash)) {

	// clone the referenced node and alter the clone's ID, then insert it into lightbox
	$("#modalContainer").html($(srcHash).clone().attr('id', srcHash.replace('#', '') + '-clone'));

} else {

	$("#modalContainer").load(src);

}

/* THE RUB STOPS HERE */

But but but but but but, we’re not done.

In Erik’s post he advises changing the lightbox.js script in the Drupal module. I don’t like changing other people’s code; I’d rather overwrite it for my application. Instead of digging inside the module, I have included another script that overwrites the offending Lightbox.showData method. This way, if the modules is updated by its devs, I don’t have to go digging again. Plus, our Drupal project is instanced over several machines and a dev and a staging and a production site, so changing the module is hard to maintain.

So, in the end, my application-specific script looks like,

Lightbox.showData = function(){
    $('#loading').hide();

    if (Lightbox.isLightframe || Lightbox.isVideo || Lightbox.isModal) {
        Lightbox.updateDetails();
        if (Lightbox.isLightframe) {
            $('#frameContainer').show();
            if ($.browser.safari) {
                $('#lightboxFrame').css({
                    'zIndex': '10500'
                }).show();
            } else {
                $('#lightboxFrame').css({
                    'zIndex': '10500'
                }).fadeIn(Lightbox.fadeInSpeed);
            }
        } else {
            if (Lightbox.isVideo) {
                $("#modalContainer").html(Lightbox.modalHTML);
                $("#modalContainer").click(function(){
                    return false;
                });
            } else {
                var src = unescape(Lightbox.imageArray[Lightbox.activeImage][0]);
                if (Lightbox.imageArray[Lightbox.activeImage][4]) {
                    $(src).appendTo("#modalContainer");
                } else {

					/* HERE'S THE RUB */

					/*
						if already in the page, load in the content
						test by comparing src and window.location without hashes (anchors)
						and then finding the src's hash in the DOM

						if either are false, fall back and load the old way
					*/
					var srcHash = src.replace(/.*(#.*)/, '$1');
					if ((window.location.toString().replace(/#.*/, '') == src.replace(/#.*/, '') ||
								// src.replace(/#.*/, '') will be blank for some IE versions if the href is just a hash
								src.replace(/#.*/, '') == '') &&
							srcHash && $(srcHash)) {

						// clone the referenced node and alter the clone's ID, then insert it into lightbox
						$("#modalContainer").html($(srcHash).clone().attr('id', srcHash.replace('#', '') + '-clone'));

					} else {

						$("#modalContainer").load(src);

					}

					/* THE RUB STOPS HERE */
                }
                $('#modalContainer').unbind('click');
            }
            $('#modalContainer').css({
                'zIndex': '10500'
            }).show();
        }
    }    // Handle display of image content.
    else {
        $('#imageContainer').show();
        if ($.browser.safari) {
            $('#lightboxImage').css({
                'zIndex': '10500'
            }).show();
        } else {
            $('#lightboxImage').css({
                'zIndex': '10500'
            }).fadeIn(Lightbox.fadeInSpeed);
        }
        Lightbox.updateDetails();
        this.preloadNeighborImages();
    }
    Lightbox.inprogress = false;

    // Slideshow specific stuff.
    if (Lightbox.isSlideshow) {
        if (!Lightbox.loopSlides && Lightbox.activeImage == (Lightbox.total - 1)) {
            if (Lightbox.autoExit) {
                Lightbox.slideIdArray[Lightbox.slideIdCount++] = setTimeout(function(){
                    Lightbox.end('slideshow');
                }, Lightbox.slideInterval);
            }
        } else {
            if (!Lightbox.isPaused && Lightbox.total > 1) {
                Lightbox.slideIdArray[Lightbox.slideIdCount++] = setTimeout(function(){
                    Lightbox.changeData(Lightbox.activeImage + 1);
                }, Lightbox.slideInterval);
            }
        }
        if (Lightbox.showPlayPause && Lightbox.total > 1 && !Lightbox.isPaused) {
            $('#lightshowPause').show();
            $('#lightshowPlay').hide();
        } else
            if (Lightbox.showPlayPause && Lightbox.total > 1) {
                $('#lightshowPause').hide();
                $('#lightshowPlay').show();
            }
    }

    // Adjust the page overlay size.
    var arrayPageSize = Lightbox.getPageSize();
    var arrayPageScroll = Lightbox.getPageScroll();
    var pageHeight = arrayPageSize[1];
    if (Lightbox.isZoomedIn && arrayPageSize[1] > arrayPageSize[3]) {
        var lightboxTop = (Lightbox.topPosition == '' ? (arrayPageSize[3] / 10) : Lightbox.topPosition) * 1;
        pageHeight = pageHeight + arrayPageScroll[1] + lightboxTop;
    }
    $('#overlay').css({
        'height': pageHeight + 'px',
        'width': arrayPageSize[0] + 'px'
    });

    // Gecko browsers (e.g. Firefox, SeaMonkey, etc) don't handle pdfs as
    // expected.
    if ($.browser.mozilla) {
        if (Lightbox.imageArray[Lightbox.activeImage][0].indexOf(".pdf") != -1) {
            setTimeout(function(){
                document.getElementById("lightboxFrame").src = Lightbox.imageArray[Lightbox.activeImage][0];
            }, 1000);
        }
    }
};

Philosophical Approach

The approach can be summed up in two points:

1. Write enough markup and style definitions to make it clear to other developers what is happening.
2. Write as little markup and style definitions as possible.

Let’s talk about what these mean.

Write enough markup and style definitions to make it clear to other developers what is happening.

We follow the principles of semantic web development which involves using markup to describe the data or content of a web page. In practice, this means things like using ol and ul tags to make lists of items instead of text delineated with br tags, and giving page elements class names that describe their function (eg “article-wrapper”) instead of class names that describe their appearance (eg “blue-background”).

Write as little markup and as few style definitions as possible.

Small file size and shallow markup heirarchy make the site faster to load and easier to maintain. To that end, we write as little markup and as few style as possible to make the page appear and function as necessary. In practice, this means things like using padding and margin to create space between elements instead of using br or empty p tags, and writing reusable CSS classes that add common traits (eg background-color) and can be used in conjunction with other reusable CSS classes that provide other common traits (eg font-size).

Rules

We have a few easy-to-follow rules for HTML and CSS development that have evolved from years of experience.

Rules for writing HTML

• Block-level elements are  never be self-closing, even when empty.
  <div /> should always be written as <div></div>, but but <img /> or <span /> is proper.
• Markup always validates unless there is a very good reason (eg for cross-browser support or CMS limitations).
  There are many validators but W3C’s is preferred: http://validator.w3.org/
• Documents are written for HTML 5.
  Documents should use the the <!DOCTYPE html> declaration.
• Tables are used only for tabular data, not for layout.
• Stylesheets are included in the <head> of the page.
• Stylesheets are included using <link /> tags, not @import statements.
  It is permissable, however, to use @import statements within an external stylesheet.
• Markup should be indented using tabs, not spaces, so that the indentation matches the markup heirarchy.
• CSS and JavaScript are included in external files, not written inline in the page.
• External JavaScript files are included at the bottom of the page just before the </body>.

Rules for writing CSS

• CSS is written a compact format characterized by the selector and all definitions on one line.
  Use http://www.codebeautifier.com/ to switch between formats; the format described here is called ‘High’ compression.
  Improper:
  

  .my-class {
  	width: 300px;
  	height: 300px;
  }

  Proper:

  .my-class { width: 300px; height: 300px; }

• Selectors use hyphens to delineate words, not camel case or underscores.
  Improper: .myClass or #my_element. Proper: .better-class
• Hacks to make pages work correctly in Internet Explorer are included in a separate IE-specific stylesheet and included on the page using conditional comments.
• During development, sites use a global stylesheet for universal definitions and separate sheets for independent areas or features of the site.
• Use of style attributes in markup is avoided.
• When possible (that is, when specific instances are known), .png transparency should be fixed for specific elements using the IE-6 specific stylesheet instead of using an .htc file as a behavior.
  Improper:

  a { behavior: url(iepngfix.htc); }

  Proper:
  

  a#button { background: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,      sizingMethod=crop, src='../images/button.png'); }

• The default font size is declared in pixels for the <body> and the declared for other elements as percentages.

  body { font-size: 13px; }
  h1 { font-size: 125%; }

As we all know, IE doesn’t support the indexOf method for the Array prototype. The simple solution is add indexOf support in IE. Here’s the code:

// add indexOf to arrays in IE
if (!Array.prototype.indexOf){
	Array.prototype.indexOf = function(elt /*, from*/)  {
		var len = this.length;
		var from = Number(arguments[1]) || 0;
		from = (from < 0)
			? Math.ceil(from)
			: Math.floor(from);
		if (from < 0)
			from += len;
		for (; from < len; from++)
		{
			if (from in this &&
					this[from] === elt)
				return from;
		}
		return -1;
	};
}

What’s happening: While animating, jQuery needs to add a few style definitions if they are not already declared. Among these is the ‘overflow’ property. jQuery sets this to ‘hidden’ in order to show the animation and then removes this declaration upon completion of the animation. When the declaration is removed, Flash gets the signal to re-render the movie (because, possibly, the layout of the page has changed).

How to fix it: declare ‘overflow:hidden’ in the CSS for the element. Voilá, the flickering is gone.

All external links from the site should open in a new window. Do not want to write this on a link-by-link basis. Should be light and unobtrusive. Using MooTools.

Dx

We can easily know what domain the script lives on. Other domains are easily distinguished. Links come and go and are loaded in, sometimes, by other links. We will use one of my favorite patterns, which I am calling the Passive Click Pattern (got a better or more widely-used name?) to listen to all clicks anywhere on the document.body. In this case, if the click is on a link and the link is external, then we will set the target of the link to ‘_blank’.  Paramount to using the PCP (OMG, I did not realize that was the acronym) is the pattern of not stopping clicks in other patterns but just using preventDefault. That way, the click can flow through the DOM and be heard by multiple listeners.

This solution requires only the most core of MooTools and is built against version 1.2.3.

Tx

window.addEvent('domready', function(){
	var currentDomain = window.location.host;
	$(document.body).addEvent('click', function(evt) {
		$trgt = $(evt.target);
		if ($trgt.get('tag') !== 'a') {
			$trgt = $trgt.getParent();
		}
		// if the target is a link AND the link is absolute AND the link goes to a different domain,
		// then set the target to _blank to open in new page
		if ($trgt &&
				$trgt.get('tag') === 'a' &&
				$trgt.get('href').test('http') &&
				!$trgt.get('href').test(currentDomain)) {
			$trgt.set('target', '_blank');
		}
	});
});

EDIT:

A more fitting name for this pattern is “Passive EVENT Pattern” since it can be applied to more than just clicks. Form submissions, for instance, or key entry.

Plus, then you can say your application is PEPpy. #amirightfolks

Since I couldn’t find out how to do it, I’ll post the secret here. To make the horizontal accordion work in Mootools 1.2 you have to specify a fixed width. The API docs say it is a Boolean, but it ain’t. It is what the plugin uses to determine the size of open panels.

Markup:

<ul id="get-started-steps">
	<li class="get-started-step"> <a class="trigger left" href="#">Step 1</a>
		<div class="get-started-content left">step 1 content</div>
	</li>
	<li class="get-started-step"> <a class="trigger left" href="#">Step 2</a>
		<div class="get-started-content left">step 2 content</div>
	</li>
	<li class="get-started-step"> <a class="trigger left" href="#">Step 3</a>
		<div class="get-started-content left">step 3 content</div>
	</li>
</ul>

JS:

<br />
new Accordion(<br />
$$(’.get-started-step .trigger’),<br />
$$(’.get-started-content’),<br />
{<br />
height: false,<br />
width: true,<br />
fixedWidth: 200<br />
});<br />

CSS:

<br />
#get-started-steps { width: 100%; }<br />
#get-started-steps li { float: left; }<br />
.get-started-content { width: 200px; height: 200px; }<br />
.left { float: left; }<br />

Also, that Amanda Hankerson (http://www.amandahankerson.com)is a wonderful photographer. (She took the photos for the EEE site and has a great photo blog.)

SO, THIS IS A QUICK IMPRESSION.

What I liked:

• lots of flexibility in names and paths
• seemed like reliably tested code
• default directory structure leaves public in top level of project
• LOVED, absolutely LOVED that the project manager replied to my twitter instantly

What I disliked:

• does not ship with a full default directory structure (Rend fixes this, but still). Give me a suggestion and I can change it if the default doesn’t work for me
• minimal LDAP support (auth only). More is coming I know (its in the incubator), and I have a very specific need for it. I’m not going to hold it against ZF. But a guy’s gotta search when he wants to find people at work.
• documentation. A long list of anchors in a longer page? Really? Plus, where, exactly, are the 500 examples in 6 languages?
• there is a lot of typing. Maybe I was following the wrong tutorial but I have to tell the model that the $_POST['title'] should go into the title column when I insert the row? I feel like it could match those for me.
• mixed Camel_And_Deliminated variable names. This is a nitpicky thing, but typing an underscore followed by a capital letter is hard for my hands for some reason.
• error messaging. If I had used the framework before I would probably find the error messaging tight and focused. But, since I had not, it took a bit to figure out what was causing my errors. Probably a shortcoming in my brain architecture, but the errors didn’t seem obvious.
• Google support. This is out of Zend’s control I know, but I was searching and searching for zend tutorial, zend framework tutorial, zend connect to database, etc. and only found a couple of tutorials that were up-to-date and well written. One was Zend’s quickstart (which only has sqlite) and the other was here (which is the one I followed for db stuff).

So, there it is.