Joe Song » programming

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%; }
```

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.

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.

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");

Setting up Trac on Dreamhost

josephsong — Wed, 31 Dec 2008 04:15:31 +0000

The following is what worked for me to get Trac up and running at Dreamhost.

So, I just transferred my hosting from Bluehost to Dreamhost (very happily, by the way) and was in the process of moving my SVN repos from Assembla (only because DH offers them free and unlimited, otherwise very happy with Assembla) when I figured I needed a bug tracking setup for client work.

Last night I tried a few and landed on Bug Genie. Solid interface, a little slow on the ajax (which might not be the fault of Bug Genie) but overall very good. The ajax was helpful and, in fact, I miss it in Trac, and it probably has more features that Trac.

And, I came back to Trac just because it is more common, right? But, having done my due diligence, I’m going with it.

Mostly, what I needed was Petar Marić’s dreamy-trac script. FOR REAL. I tried creamy-trac and the AutoTracOnDreamHost and they both seemed useful but lead to other problems.

So, the second thing is to add the line

password_store = HtPasswdStore

to the trac.ini file which should be at /home//trac_projects//conf/, and change the hash_method:

hash_method = HtPasswdHashMethod

Then turn off the trac.web.auth.loginmodule and turn on the acct_mgr.web_ui.accountmodule in the [components] section of the trac.ini, like so

[components]
acct_mgr.* = enabled
acct_mgr.http.httpauthstore = enabled
acct_mgr.web_ui.accountmodule = enabled
trac.web.auth.loginmodule = disabled
webadmin.* = enabled

And then, IF you want email notifications enabled smtp in the [notification] section, like so:

smtp_enabled = true

While in notifications I also set the smtp_from and smtp_replyto to a real address just for fun.

Also, I chose to use the AccountManager plugin instead of htaccess autorization so I stayed away from editing the .htaccess, but that’s my opinion.

And, that’s all I know.

Hearst Broadcasting Weather

josephsong — Tue, 05 Feb 2008 02:22:54 +0000

The Site: Weather information destination in use across Hearst Broadcasting stations.
http://www.kmbc.com/weather/ (and many others)

The Client: Hearst Broadcasting is a part of the powerful and historic Hearst Corporation. They needed a friendly and useful interface for the weather section of the stations’ sites.

My Role: Part of the small, dedicated development group.

The Technology: The site is built for progressive enhancement and semantics but at the top level the interface is JavaScript driven with AJAX-loaded content and smooth animations. The JavaScript uses the Yahoo User Interface library and build system to provide a consistent experience across browsers and platforms.

The Highlights: Home page tiles are arrangeable by user and saved in a cookie to persist across visits. The tiles and their associated content are built abstractly to allow content owners tight control over presentation and interaction.