Joe Song » Development

Overriding Drupal Login Form Messages via Localization

josephsong — Fri, 19 Mar 2010 16:22:32 +0000

Sx

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:

Make sure the Locale module is enabled and that you have permissions to use it (both to Administer Languages and for the Translate Interface)
Go to Site Configuration -> Languages -> Add Language
Open the Custom Language form
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
Click the Add custom language
Go to Site Configuration -> Languages and choose en-MySite as the default language, click Save Configuration

To make the faux translations:

Go to Site Building -> Translate Interface -> Search
Search for a particular string by something it contains, say, “username”.
Find your string in the search results and click edit. Enter your translation and submit it.
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.

HTML and CSS Development Guidelines

josephsong — Thu, 18 Feb 2010 17:23:29 +0000

*NOTE – Feb 18, 2010: this is a work in progress. Very likely, there are points not yet included.

Philosophical Approach

The approach can be summed up in two points:

Write enough markup and style definitions to make it clear to other developers what is happening.
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.

should always be written as , but but or 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 declaration.
Tables are used only for tabular data, not for layout.
Stylesheets are included in the of the page.
Stylesheets are included using 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 .

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 and the declared for other elements as percentages.
```
body { font-size: 13px; }
h1 { font-size: 125%; }
```

BedlamTheatre.org

josephsong — Tue, 02 Feb 2010 05:01:17 +0000

The Site: The new site (version 2) for the boldest live theater in town.
http://bedlamtheatre.org

The Client: Bedlam creates some of the most interesting and original theater in Minneapolis. They run their own production and, in addition, rent their space to other groups. This means they have a large number of events to keep track of and promote, and they needed a site that could accommodate them all.

My Role: Having designed, built and maintained their version 1 site, I was keenly aware of the workflow issues and front-end pros and cons that they were experiencing. I worked with them to find the new look and feel of the site and to expand the functionality. In the end, the new site was built on WordPress, with collaborative design and unique plugins.

The Technology: One of the initial hurdles of this site was importing the existing years of data into WordPress, including media and event dates. I created a unique plugin for them called TheatreEvents and wrote a custom import script that inserted the new posts and attachments and populated the data. The plugin features direct hooking into the admin interface so that event data entry is in the same form as post entry. On the front-end, the plugin allows for sorting by the event dates and custom week and month views. The plugin will be released publicly soon.

The Highlights: Weekly calendar in the sidebar of most pages with Ajax navigation. Monthly calendar of events.

WestlawNext.com

josephsong — Sun, 31 Jan 2010 23:00:25 +0000

The Site: Thomson Reuters, the leading provider of legal and business research products, needed a site to promote the launch of their newest product, WestlawNext.
http://westlawnext.com

The Client: Thomson Reuters’ clients are savvy and busy. They knew that if the site was going to reach them, it had to be fast, solid and engaging.

My Role: Developer in small, focused group to create the prototype and an on-site advisor during integration with their existing systems.

The Technology: The client needed to integrate the site into their CMS but they had asked us to create and test a prototype site before handing it over. We built the original with very limited PHP since we knew TR would be using .NET in the end but PHP allowed our team to quickly build the prototype. The site uses a custom Flash video player and also has a limited but useful mobile version. This mobile version was very important to the client as the majority of their customers regularly use BlackBerrys and other mobile devices. During integration a few technical hurdles appeared from use of their legacy systems but because I was on-site at the time, launch was not affected.

The Highlights: Multiple video players used in conjunction with jQuery UI tabs. Animated main navigation.

Avoiding flickering in jQuery when animating elements which contain Flash

josephsong — Mon, 18 Jan 2010 21:28:55 +0000

So, we had this issue when were were using slideToggle (and it would apply to slideDown) where the Flash movie contained inside the element we were animating would flicker once the animation is complete.

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.

External Links in New Window. Passive and with MooTools.

josephsong — Wed, 04 Nov 2009 15:50:55 +0000

Sx

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

Style.Target.com

josephsong — Sat, 29 Aug 2009 01:25:18 +0000

The Site: Flexible and stylish boutique for promotion of Target’s most stylish clothing and accessories.
http://style.target.com

The Client: Already well known for their design-on-a-dime offerings, Target needed a site to regularly update with new product announcements, features about their relationships with top designers and frugal fashion tips.

My Role: Implementation of ongoing content and evolving design of blog. Each post has a slightly new feel that keeps the whole blog fresh.

The Technology: The site is built on WordPress but uses custom short codes and fields. In this way, the project is able to keep WordPress’ ease of use while using unique design features.

The Highlights: Designer’s directory from which users can quickly access any designer’s Target collection. Integration of Target’s universal header and footer navigation, including seasonal updates, into the WordPress theme.

LegalCurrent.com

josephsong — Fri, 15 May 2009 02:09:20 +0000

The Site: Information about, commentary on and current events in the practice of law. A custom WordPress theme for Thomson Reuters.
http://legalcurrent.com

The Client: Thomson Reuters is the world’s leading source of intelligent information for businesses and professionals. They needed a blog to maintain contact and conversation with legal professionals.

My Role: Development lead for custom WordPress theme.

The Technology: The data is driven through a WordPress installation but the theme is setup to enable a number of special features. The site uses native category functionality to populate special areas of the site while keeping those specific categories out of the blog flow, e.g. Featured media and Headnote of the Day

The Highlights: Custom design, unique widgets and features.

Mootools 1.2 Horizontal Accordion – the secret revealed

josephsong — Wed, 15 Apr 2009 18:44:42 +0000

Sometimes the API docs are wrong.

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:


	 Step 1
		step 1 content
	
	 Step 2
		step 2 content
	
	 Step 3
		step 3 content

JS:



new Accordion(

$$(’.get-started-step .trigger’),

$$(’.get-started-content’),

{

height: false,

width: true,

fixedWidth: 200

});

CSS:



#get-started-steps { width: 100%; }

#get-started-steps li { float: left; }

.get-started-content { width: 200px; height: 200px; }

.left { float: left; }

JavaScript Namespacing

josephsong — Fri, 20 Feb 2009 19:34:24 +0000

I figure if you are reading even this far you care / know about namespacing in JavaScript so I’m not going to go into WHY.

However, the HOW is here. But, okay, yeah, maybe some specific WHY.

We had been using a generic namespacing function that required plugging in the base name three times. Not really that much work, but kind of a pain if you want to redistribute it. So, it is now reworked to be changed only in one place. It requires three variables in the default global namespace but that ain’t bad, right?

var APPLICATION_NAMESPACE = "MYPROJECT";
var _global = this;
var _global[APPLICATION_NAMESPACE] = {};

_global[APPLICATION_NAMESPACE].namespace = function() {
    var a=arguments, o=null, i, j, d;
    for (i=0; iSo, _global here refers to window most of the time (but sometimes not so we need a reference to it).  MYPROJECT can be whatever you want it to be.
When we use the namespacing stuff we refer to the specific namespace directly using JS dot-deliminated object syntax. This function goes soft on existing objects; it will not destroy a previously created object with the same name.
The function will ignore the name of the namespace if it is the first part in there. I’m not saying that well, but these calls are functionally identical and both namespace MYPROJECT.SomeOtherPart.
MYPROJECT.namespace("SomeOtherPart");
MYPROJECT.namespace("MYPROJECT.SomeOtherPart");