Jon Plummer » Implementation http://jonplummer.com Interface and interaction designer Mon, 14 Sep 2009 12:17:38 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 Updated Today “Lite” v0.2: slight tweaks should be more compatible http://jonplummer.com/archives/109 http://jonplummer.com/archives/109#comments Tue, 01 May 2007 04:41:22 +0000 Jon Plummer http://jonplummer.com/archives/109 Chris K was kind enough to review the tweaks I had made to his original Updated Today plugin . He endorsed the removal of pngfix.js but complained that my use of bloginfo() caused the new plugin to fail on his WordPress install. He also revealed his intent to make certain features of the plugin available to an admin page, requiring that portions of the output be salted away in variables for future manipulation. I was also dissatisfied with the amount of repetition in my otherwise very short plugin.

Here is the new code: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

/* config variables (later to be made available to an admin menu) */
 
$UTL['element']    = 'div';
$UTL['elementId']  = 'updated';
$UTL['imageUrl']   = get_bloginfo('url') . '/wp-content/plugins/updatedtodaylite/updatedbanner.png';
$UTL['style']      = 'position: absolute; display: block; top: 0px; left: 0px; height: 120px; width: 120px; z-index: 99;';
 
/* set up the action */
 
function showUpdateBanner() {
    global $UTL;
	$today = date("Y-m-d");
    $query = "SELECT post_date, id FROM wp_posts WHERE wp_posts.post_date LIKE '" . $today . "%'"; //will need to sort by date/time to enable the element to be a link to the most recet content
    $results = mysql_query($query);
    if (mysql_num_rows($results) > 0) {
	    $msieRegex = '/msie\s(5\.[5-9]|[6]\.[0-9]*).*(win)/i';
		if( isset($_SERVER['HTTP_USER_AGENT']) && preg_match($msieRegex,$_SERVER['HTTP_USER_AGENT']) && !preg_match('/opera/i',$_SERVER['HTTP_USER_AGENT']) ) {
			$UTL['style'] .= " filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src=\"$UTL[imageUrl]\")";
		}
		else {
			$UTL['style'] .= " background-image: url($UTL[imageUrl])";
		}
		echo "<$UTL[element] id=\"$UTL[elementId]\" style=\"$UTL[style]\"></$UTL[element]>";
	}
}
 
/* make it happen */
 
add_action('wp_footer', 'showUpdateBanner');

This has the following improvements over my previous attempt:

  • You can choose what sort of element to wrap the image in.
  • Uses get_bloginfo() rather than bloginfo() to prevent parsing errors
  • Exposes inline styles, element type, element ID, and image URL as variables
  • These config variables are wrapped up in an array to prevent stepping on toes
  • USER_AGENT condition adds only the appropriate style to the inline styles
  • Tolerant of an empty style variable, allowing folks to handle placement in a separate stylesheet if they like
  • We only output any HTML once in the script

Still not much to it. Download the new plugin: Updated Today “Lite” v0.2

In the future, it would be nice to:

  • Make this a clickable link to the most recent article, ideally on a page containing all recent content.
  • Make it appear if the site has been updated in the past 23 hours or so, since I like to post at night, causing the banner to be visible for a only few hours at most.
]]> http://jonplummer.com/archives/109/feed 0 Updated Today “Lite” – A lesser and lighter version of the “Updated Today” WordPress plugin http://jonplummer.com/archives/101 http://jonplummer.com/archives/101#comments Tue, 24 Apr 2007 13:39:39 +0000 Jon Plummer http://jonplummer.com/archives/101 Courtesy of Weblog Tools Collection comes Chris K ’s Updated Today plugin , which displays a banner at the top left of your WordPress blog if a post exists in the loop with today’s date as its post date. It is a simple and effective idea, and coded without much fuss; it uses the wp_head and wp_footer hooks to add styles to the page, write a SCRIPT tag, and conditionally write an IMG wrapped in a DIV . And it seems to work great.

Upon further inspection I noticed that the plugin relies on pngfix.js to make IE 5.5 and IE 6 show alpha transparency on the PNG used for the banner. This is necessary because of the nice drop shadow that on the “updated today” banner; that shadow has to work well overlaid on any content that happens to be present, so alpha blending is essential. pngfix.js iterates over all of the IMG elements in the document; whenever it finds a PNG it replaces that PNG with a SPAN and uses the Microsoft-proprietary DXImageTransform.Microsoft.AlphaImageLoader to display the PNG within that SPAN.

There’s nothing wrong with this technique, selectively used. But I didn’t want pngfix.js tromping all over my site rewriting my DOM just because I used PNGs. I like PNGs, and I don’t want them messed with willy-nilly. (Never mind that pngfix.js also does not pass jslint .) I wanted a quick fix that would not require this script.

I also wasn’t sure I wanted an additional stylesheet added to the page containing one selector and rules to style the added DIV . I could rip these styles out and place them in my own stylesheet, but in the interest of a quick fix, I decided to leave them in the plugin.

Here is the original PHP code for the plugin. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

/* ### Configuration Variables ### */
 
$conf_manual_placement = false;
$conf_manual_style = false;
$conf_use_pngfix = true;
 
/* ### End Configuration Variables ### */
 
$banneradded = null;
 
add_action('wp_head', 'ck_wp_head');
if (!$conf_manual_placement) {
    add_action('wp_footer', 'ck_wp_footer');
}
 
function ck_wp_head ()
{
    global $conf_manual_style, $conf_use_pngfix;
    if (!$conf_manual_style) {
        echo '<style type="text/css" media="screen"> #updated { position: absolute; display: block; top: 0px; left: 0px; height: 120px; width: 120px; z-index: 99; } </style>';
    }
    if ($conf_use_pngfix) {
        echo '<!--[if lt IE 7]><script defer type="text/javascript" src="wp-content/plugins/updatedtoday/pngfix.js"><!--[endif]-->';
    }
}
 
function updated_banner()
{
    $today = date("Y-m-d");
    $query = "SELECT post_date, id FROM wp_posts WHERE wp_posts.post_date LIKE '".$today."%'";
    $results = mysql_query($query);
    $num_results = mysql_num_rows($results);
    if ($num_results > 0) {
        $results_assoc = mysql_fetch_assoc($results);
        $postid = $results_assoc['id'];
	echo '<p id="updated"><img src="<?php bloginfo('url'); ?>/wp-content/plugins/updatedtoday/updated.png" border="0" /></p>';
    }
}
 
function ck_wp_footer ()
{
    updated_banner();
}

Not much to it, really, but more than I’d like. Near as I can tell, $banneradded is not used. That bit about $results_assoc = mysql_fetch_assoc($results); $postid = $results_assoc['id']; seems to be the beginnings of making the banner a link to the most recent post. To make sure that would work we’ll need to change the SELECT to ensure the results are sorted by date, so we’ll trim that for now, and leave it on the to-do list for a later version.

If we put the styles inline on the DIV and make the image a background of that DIV , we solve the transparency problem in IE for indexed PNGs without need of pngfix.js and eliminate our need to hook the wp_head event. But we’d like a nice dropshadow even in IE. The quickest way is to choose one of two similar DIV s, one containing the proprietary AlphaImageLoader CSS filter, based on PHP’s HTTP_USER_AGENT . This leaves the much shorter: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

add_action('wp_footer', 'showUpdatedBanner');
 
function showUpdatedBanner() {
    $today = date("Y-m-d");
    $query = "SELECT post_date, id FROM wp_posts WHERE wp_posts.post_date LIKE '".$today."%'";
    $results = mysql_query($query);
    $num_results = mysql_num_rows($results);
    if ($num_results > 0) :
        $msie='/msies(5.[5-9]|[6].[0-9]*).*(win)/i';
        if( isset($_SERVER['HTTP_USER_AGENT']) && preg_match($msie,$_SERVER['HTTP_USER_AGENT']) && !preg_match('/opera/i',$_SERVER['HTTP_USER_AGENT']) ) :
            echo("<div id=\"updated\" style=\"position: absolute; display: block; top: 0px; left: 0px; height: 120px; width: 120px; z-index: 99; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='" . bloginfo('url') . "/wp-content/plugins/updatedtodaylite/updatedbanner.png');\"></div>");
        else :
            echo("<div id=\"updated\" style=\"position: absolute; display: block; top: 0px; left: 0px; height: 120px; width: 120px; z-index: 99; background-image: url( " . bloginfo('url') . "/wp-content/plugins/updatedtodaylite/updatedbanner.png );\"></div>");
        endif;
    endif;
}

This is much simpler, does the same work, and can easily be altered to be more semantically appropriate (a topic for later). Download the new plugin: Updated Today “Lite” .

]]> http://jonplummer.com/archives/101/feed 3 I’m picky about pullquotes http://jonplummer.com/archives/67 http://jonplummer.com/archives/67#comments Sun, 08 Apr 2007 21:10:02 +0000 Jon Plummer http://jonplummer.com/archives/67 No, really.

In a magazine, a pullquote can pull a browsing reader into an article by highlighting a provocative comment or deft turn of phrase, or help steel a reader’s resolve to press on, teasing them with a little deferred gratification. That magazine-ey feel can be helpful on sites with long, multi-page articles that are otherwise relatively unbroken by pictures, blockquotes, or other places for the eye to rest.

There are many examples of pullquotes on the web. But each fails to satisfy in some way.

Many authors add the content of the pullquote to the document , unnecessarily repeating content or interrupting the HTML stream with a non-sequitur. This could have a jarring effect on a reader browsing without benefit of CSS, or using a screen reader (unless the CSS rule speak: none were used by the author and supported by the reader).

Many go a step further, identifying content that would make a nice pullquote, wrapping it in a span and using JavaScript to replicate it in the DOM. Roger Johansson’s technique is the definitive example of this method. This is great because we do not have excess content for what is essentially a presentational effect. It does put the pullquote right next to its source text, though, which is unfortunate.

Also, the above method requires your pullquote to be a direct quote of the source text. Pullquote text often does not exactly match its source. Dependent clauses are trimmed, prepositions adjusted, other editing is done to allow the pullquote to stand alone. This requirement led me to toy with the notion of using JavaScript to collect one or more spans selected from the text into a single pullquote, but I stopped when I realized that that would only allow me to drop words from the source text, not change them if necessary.

So far we’ve identified the following requirements:

  1. No repeated or extra content
  2. Control over pullquote placement in source text
  3. Pullquote text not necessarily a direct copy of source text

If we relax the first requirement slightly, this can be done. We might add an empty span to our HTML where we want the pullquote to appear, and place the content for the pullquote in its title attribute. We then use some JavaScript to find this empty span and put its title text inside. A little CSS makes it pretty. I’ve made an example page with very simple code so the effect is obvious.

]]> http://jonplummer.com/archives/67/feed 3 A JavaScript date formatter http://jonplummer.com/archives/84 http://jonplummer.com/archives/84#comments Fri, 06 Apr 2007 22:22:30 +0000 Jon Plummer http://jonplummer.com/archives/84 Some time ago I was asked to build a multi-day date-picking interface that was to accept dates selected from a calendar and display them in a list without making a round-trip to the server. Since this was for a web application with an international audience, I needed to handle different date formats (localization) and languages (translation). Translation was no big deal; we had long ago established the convention of receiving from the server a JSON object with the necessary terms and phrases, populated by resource bundles. But the date formatting was another matter. And since the back-end was in Java, it would be nice to use the same date-formatting strings that the back-end guys were using, to make adding new locales easier. My formatDate() was the result: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186

/**
 * formatDate()
 * - follows Java SimpleDateFormat pattern conventions but does not support time zones
 * - depends on dateLanguage object
 *
 * @param   dDate        a javascript date object
 * @param   patternStr   a Java-style date format string
 * @return  string representation of the date
 */
function formatDate(dDate, patternStr) {
 
    /* interior functions */
 
    //countTokenLength() counts the number of repetitions of the individual date format token appearing next in the string
    function countTokenLength(str) {
        var re = /^([a-zA-Z])(1){0,100}/g;
        var matchStr = str.match(re);
        if (!matchStr) {
            return 1;
        }
        return matchStr[0].length;
    }
 
    //padResult() adds copies of padStr to num until it is as wide as necessary
    //in retrospect, this could be made much shorter and more efficient
    function padResult(num, width, padStr) { //dependent function
        var returnStr = "";
        if (width &gt; 1) {
            var padLength = width - num.toString().length;
            if (padLength) {
                for (i=0; i&lt;padLength; i++) {
                    returnStr += padStr;
                }
            }
        }
        returnStr += num.toString();
        return returnStr;
    }
 
    //here is where the action begins
    var resultStr = "";
    var subPatternLength = 0;
    while (patternStr.length &gt; 0) {
        subPatternLength = countTokenLength(patternStr);
        var token = patternStr.substr(0,1);
        switch (token) {
        case "G":
            resultStr += (dDate.getFullYear() &gt;=0) ? dateLanguage.eraNames[1] : dateLanguage.eraNames[0];
            break;
        case "y":
            var x = dDate.getFullYear().toString();
            if (dDate.getFullYear() &gt; 999) {
                if (subPatternLength &gt; 2) {
                    resultStr += x;
                }
                else {
                    resultStr += x.substring(x.length - 2, x.length);
                }
            }
            else {
                resultStr += x + " " + ((dDate.getFullYear() &gt;=0) ? dateLanguage.eraNames[1] : dateLanguage.eraNames[0]);
            }
            break;
        case "M":
            if (subPatternLength &gt; 2) {
                resultStr += (subPatternLength == 3) ? dateLanguage.monthNamesShort[dDate.getMonth()] : dateLanguage.monthNames[dDate.getMonth()];
            }
            else {
                resultStr += padResult(dDate.getMonth(), subPatternLength, '0');
            }
            break;
        case "w":
            var resultLength = (subPatternLength &gt;= 2) ? 2 : 1;
            resultStr += "[week in year]";
            break;
        case "W":
            var resultLength = (subPatternLength &gt;= 2) ? 2 : 1;
            resultStr += "[week in month]";
            break;
        case "D":
            var resultLength = (subPatternLength &gt;= 2) ? 2 : 1;
            resultStr += "[day in year]";
            break;
        case "d":
            var resultLength = (subPatternLength &gt;= 2) ? 2 : 1;
            resultStr += padResult(dDate.getDate(), resultLength, '0');
            break;
        case "F":
            var resultLength = (subPatternLength &gt;= 2) ? 2 : 1;
            resultStr += "[day of week in month]";
            break;
        case "E":
            switch (subPatternLength) {
            case 1:
                resultStr += dateLanguage.weekDayNamesAbbrev[dDate.getDay()];
                break;
            case 2:
                resultStr += dateLanguage.weekDayNamesTiny[dDate.getDay()];
                break;
            case 3:
                resultStr += dateLanguage.weekDayNamesShort[dDate.getDay()];
                break;
            default:
                resultStr += dateLanguage.weekDayNames[dDate.getDay()];
                break;
            }
            break;
        case "a":
            resultStr += (dDate.getHours() &lt; 12) ? dateLanguage.amPmNames[0] : dateLanguage.amPmNames[1];
            break;
        case "H":
            var resultLength = (subPatternLength &gt;= 2) ? 2 : 1;
            resultStr += padResult(dDate.getHours(), resultLength, '0');
            break;
        case "k":
            var resultLength = (subPatternLength &gt;= 2) ? 2 : 1;
            if (dDate.getHours() == 0) resultStr += "24";
            else resultStr +=padResult(dDate.getHours(), resultLength, '0');
            break;
        case "K":
            var resultLength = (subPatternLength &gt;= 2) ? 2 : 1;
            var adjust = (dDate.getHours() &gt;= 12) ? -12 : 0;
            resultStr += padResult((dDate.getHours() + adjust), resultLength, '0');
            break;
        case "h":
            var resultLength = (subPatternLength &gt;= 2) ? 2 : 1;
            var adjust = (dDate.getHours() &gt;= 12) ? -12 : 0;
            if ((dDate.getHours() + adjust) == 0) {
                resultStr += "12";
            }
            else {
                resultStr += padResult((dDate.getHours() + adjust), resultLength, '0');
            }
            break;
        case "m":
            var resultLength = (subPatternLength &gt;= 2) ? 2 : 1;
            resultStr += padResult(dDate.getMinutes(), resultLength, '0');
            break;
        case "s":
            var resultLength = (subPatternLength &gt;= 2) ? 2 : 1;
            resultStr += padResult(dDate.getSeconds(), resultLength, '0');
            break;
        case "S":
            resultStr += dDate.getTime();
            break;
        case "z":
            resultStr += "[general time zone]";
            break;
        case "Z":
            resultStr += "[rfc 822 time zone]";
            break;
        case "'":
            if (patternStr.substr(1,1) == "'") {
                resultStr += "'";
                subPatternLength = 2;
            }
            else {
                var txt = patternStr.match(/^'([^']|'')*'/g)[0];
                subPatternLength = txt.length;
                var strippedTxt = txt.substring(1, txt.length-1).replace(/''/g, "'");
                resultStr += strippedTxt;
            }
            break;
        default:
            var alphaRe = new RegExp("[A-Za-z]", "g")
            if (!token.match(alphaRe)) {
                resultStr += token;
                subPatternLength = 1;
            }
            break;
        }
        patternStr = patternStr.substring(subPatternLength, patternStr.length);
    }
    return resultStr;
}
 
var dateLanguage = {
    monthNames : ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
    monthNamesShort : ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
    weekDayNames : ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
    weekDayNamesShort : ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
    weekDayNamesTiny : ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
    weekDayNamesAbbrev : ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
    eraNames : ['BC', 'AD'],
    amPmNames : ['AM', 'PM']
};

The core of this routine is a simple regular expression that counts the number of subsequent occurrences of the first token in the string. Once we have the token and its length, we add the correctly formatted date string to the result, trim the used token, and go on to the next one.

There are a few items not yet implemented. The Java date tokens w (week in year), W (week in month), D (day in year), and F (day of week in month) weren’t necessary for the project, nor were the two time zone tokens, z and Z, because we were recording and redisplaying unadjusted dates and times reported by the user, making time zone immaterial.

]]> http://jonplummer.com/archives/84/feed 0 Field Specifications for E-Commerce http://jonplummer.com/archives/74 http://jonplummer.com/archives/74#comments Tue, 27 Mar 2007 21:31:10 +0000 Jon Plummer http://jonplummer.com/archives/74 This might come in handy later: ECML v1.1: Field Specifications for E-Commerce

]]> http://jonplummer.com/archives/74/feed 0 Google: Web Authoring Statistics http://jonplummer.com/archives/64 http://jonplummer.com/archives/64#comments Sun, 29 Jan 2006 18:14:00 +0000 Jon Plummer http://jonplummer.com/post/google-web-authoring-statistics/ Google has an interesting collection of pages up treating statistics surrounding the construction of web pages . An interesting read, if you’re into that sort of thing.

]]> http://jonplummer.com/archives/64/feed 0 Actual user testing of pages read by a screen reader? http://jonplummer.com/archives/63 http://jonplummer.com/archives/63#comments Sat, 28 Jan 2006 19:23:01 +0000 Jon Plummer http://jonplummer.com/post/actual-user-testing-of-pages-read-by-a-screen-reader/ Actual user testing of pages read by a screen reader? To determine if source order and skip links really matter? Brilliant !

]]> http://jonplummer.com/archives/63/feed 0 Making overloading the class attribute easier http://jonplummer.com/archives/41 http://jonplummer.com/archives/41#comments Mon, 02 Aug 2004 04:51:00 +0000 Jon Plummer http://jonplummer.com/post/making-overloading-the-class-attribute-easier/ It is becoming fashionable to use JavaScript to add behavior to a page without writing it into the (x)HTML. This is a good thing, in my view. But to do so easily we must either add custom attributes to the markup, or overload the class attribute. I’ve written some functions that make this second approach nearly painless.

]]> It is becoming fashionable to use JavaScript to add behavior to a page without writing it into the (x)HTML. This is a good thing, in my view; it further distinguishes content from interface behavior, makes the code tighter, smaller, more human-readable, and makes it more resilient to the well-meaning machinations of the back-end guys.

Recently, noting the many different forms of (front-end) validation that would be necessary in a web application, I considered getting into using custom attributes to carry relevant metadata. I was considering something like this:

<input type="text" required="true" validation="float" value="" />

which would have all of the aforementioned advantages, and allow all manner of interesting behaviors to be attached at runtime with minimal difficulty. But since no flavor of XHTML or HTML allows the use of custom attributes without inclusion of a custom DTD , which is a big hassle, and since I had recently made validation a portion of some automated test cases, I had to abandon that route. I’ll pursue it elsewhere, naturally. But if you want your pages to validate, or if you care that your web-building friends will clown you mercilessly if your pages do not, this fact can spell trouble.

The obvious alternative is to overload the class attribute. This is already becoming common for styling reasons, since the modern browsers and recent flavors of Interner Explorer all support putting multiple class names in the class attribute, delimited by spaces. Since we can easily get the contents of the class attribute via JavaScript, why not stuff class full of metadata? It is safe and it validates.

Two reasons. One, I like to label my metadata. When you are no longer working at your current job, or on your current project, or when this phase of this project is over, someone else is going to have to look at the code, come to an understanding of it. You should be making it easy for them, or for yourself (because you’ll forget what you meant by class="topmatter required multi" ). Two, It has also become common to change or destroy classes as part of CSS-enabled JavaScript interface behaviors. When the class name is no longer a single value, this becomes more complicated.

They are trivial, really, but I’ve whipped up some simple functions to help manage this situation. Unfortunately Ineternet Explorer doesn’t let you add methods to the Node prototype, or these would be even simpler, even tighter, even more useful. But here they are (mostly self-documenting): 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

function addClass(element, classStr) {
  if (!element.className) {
    element.className = classStr;
  }
  else {
    element.className = element.className + " " + classStr;
  }
  return this;
}
 
function removeClass(element, classStr) {
  if (!!element.className) {
    var re = new RegExp(classStr);
    element.className = element.className.replace(re, "");
  }
  return this;
}
 
function containsClass(element, classStr) {
  var re = new RegExp(classStr);
  if (!!element.className &amp;&amp; element.className.match(re)) {
    return true;
  }
  return false;
}

Granted, these aren’t exactly as squeaky-clean as they could be. removeClass() does nothing about any extraneous spaces that might be left in the class name, which shouldn’t matter unless you use these functions to change the add and remove classes on a single element many many times in a page. And addClass() doesn’t check to see whether or not the new class is already present, it just tacks it on to the end. I’ll extend these later, but I wanted to make sure they were very tight, very efficient.

]]> http://jonplummer.com/archives/41/feed 0 Per-site user stylesheets, a friendlier way http://jonplummer.com/archives/39 http://jonplummer.com/archives/39#comments Thu, 15 Jul 2004 12:12:00 +0000 Jon Plummer http://jonplummer.com/post/per-site-user-stylesheets-a-friendlier-way/ I’m intrigued by the possibilities of user stylesheets , currently supported reasonably well by the Mozilla browsers (although I have to bounce Firefox 0.8x to see changes; I haven’t investigated the capabilities of other browsers). The basic idea is that in addition to the site author’s stylesheet, you should be able to apply a stylesheet of your own choosing/making to whatever site you like, thereby changing fonts, colors, layout, what have you to suit your as-yet-nascent nefarious aims.

Eric Meyer had a post or two related to this a while ago, regarding ” css signatures ” for sites. He advocated putting an id on the body tag, wherein the site is identified. For example, I might put an id on this site’s body tags of misterjon-com . I was immediately taken aback by this suggestion, both in 1) the simplicity and appropriateness of the central idea and 2) the potential misguidedness of the implementation. Yes, a CSS-accessible way to identify the site is a splendid idea. No, the body tag might not be the right place for it, since I think of the body as the document and most sites are composed of several documents; to give each docment the same ID would be, well, odd, like naming all of your sons George . And I (and many others) have recently been known to use an id on the body to identify where the heck I am in a site (which document, perhaps), for purposes of highlighting a portion of the navigation, etc. Perhaps an id on the html tag would work?

This is sort of a warmish topic lately, a handful of the big bloggers have been on about it briefly.

Meanwhile, what about all of those sites that aren’t putting CSS signatures somewhere useful? Ryan Tomayko proposes a solution. In his article, ” Per Site User Stylesheets ,” Ryan outlines a way to insert signatures for sites that don’t have them. At its core, his code munges the host portion of window.location and sets an id on the body tag to match, allowing you to refer to body#slashdot-org or what have you in your user stylesheet. Read his article for the details when you finally get fed up with the default font on Slashdot, for example.

Trouble is, Mr. Tomayko’s technique mercilessly breaks sites that already use an id on the body, since whatever was there is replaced by the results of his script.

But there is an alternative. Set a class on body. The modern browsers all support multiple classes, space-delimited. The critical portion of Mr. Tomayko’s code is as follows: 

1
2
3
4

<![CDATA[
    var sig = window.location.host.replace(/./g, '-');
    this.setAttribute('id', sig);
]]>

Changing that to 

1
2
3
4
5

<![CDATA[
    var sig = window.location.host.replace(/./g, '-');
    classStr = !!this.className ? this.className + " " + sig : sig;
    this.className = classStr;
]]>

sets a class on body without destroying existing work, allowing you to neatly grab the body tag in your user stylesheet with body.slashdot-org . Problem solved.

I haven’t yet tried an id on html. Anyone?

]]> http://jonplummer.com/archives/39/feed 0 Quick and dirty PMS/RGB chart http://jonplummer.com/archives/33 http://jonplummer.com/archives/33#comments Fri, 18 Jun 2004 08:29:00 +0000 Jon Plummer http://jonplummer.com/post/quick-and-dirty-pmsrgb-chart/ A number of individuals have posted on their sites handy Pantone Matching System (PMS) to RGB color conversion charts. These can be pretty hefty downloads, but I’ve made a small one…

]]> A number of individuals have posted on their sites handy Pantone Matching System (PMS) to RGB color conversion charts. A freshly-minted example of such a chart has made the blog circuit recently (but I’ve lost the link already). Since there are so many PMS colors, even the standards-based online PMS charts can be hefty downloads.

Poking around the net, I found one such chart that seemed official, it being Pantone branded and all (sorry, lost it just as fast). It was a pretty simple matter to use a regular expression to strip the color names and their RGB approximations out of the HTML and slap ‘em into a JSON object, then write a little script to crawl that object and write some simple XHTML to display a panel of swatches.

You can grab it at http://jonplummer.com/misc/pms.html . I suspect I’ll be making this prettier (and searchable, etc.) later, but at the moment it is reasonably useful, and a svelte 24KB (as opposed to the 240KB or so of many other examples). I’d love to hear your ideas about how to make this set of swatches more useful.

]]> http://jonplummer.com/archives/33/feed 4