The script, which uses jQuery and is currently only usable for one field at a time, takes the select element (via its id) and loops through its option elements. For each option, its backend (the value=”" part) and visible (between the option tags) values are read into an array, and the select element is replaced with a hidden field and a text field. Entering text into the text field triggers the suggestion script, which matches the entry against the list of options (using both backend and visible options), and builds a list of the matches, with most likely matches at the top. Once the suggestions list is built, the script displays the top options in a google-suggest-style box directly beneath the text input. The number of suggestions shown is customizable, with values between one and unlimited (value of 0). Once suggestions are shown, they can be navigated using the up and down arrow keys, and selected using the enter key. Unfortunately, I haven’t been able to capture the enter key for this action, to prevent the form from submitting. As such, using “enter” to select the highlighted option will submit the form. Suggestions can also be selected using the mouse, complete with hover effects.

If the field is blurred (that is, the cursor leaves the field, such as with the tab key), then the script tries to choose the most likely option. If the field is blank on blur, nothing is set. If a suggestion was selected with the arrow keys or mouse before the blur, then that option is set as the value. Otherwise, the top suggestion in the list is selected (in the case of tabbing through the form: tab in, type two-letter state abbreviation, tab out).

When an option is selected, the input field’s value is set to the option’s visible value, and the previously mentioned hidden field is set to the option’s backend value. This method is used to retain the aspects of dropdowns: present the user with human-readable data, but use computer-readable data in back. That, and it makes it so you can use the same server-side processing script (and/or client-side validation script) for both JS and non-JS users, since the hidden field inherits the select’s “name” field (the text input doesn’t have a “name” field).

Like I mentioned before, this script is not limited to State dropdowns. Any dropdown list will work, but I would suggest you only use it in cases where the field’s values are already known to the users (”Select package” is not a good place for this!). Just provide the script with an ID, and off it goes.

Oh, and each line of suggestion is customizable via a simple template parsing bit .

Anyway, check the example out: replacing a State dropdown and replacing a Country dropdown. All the code (other than the jQuery include) is on that page; the javascript at the top is pretty well documented. Feedback and suggestions are most welcome.

Don’t have Photoshop? Check out the GIMP! I’m hoping that the PSD file is GIMP-compatible. You could try to convert it one way (using an online service) or another (directly in the GIMP),but there’s always the issue of unsupported layer effects getting messed up.

And, no, this is not an AFD trick. At least, I hope it isn’t…

After the upgrade to WordPress, I haven’t updated the theme to include this feature. I may just stick to code highlighting for now.

I’ve employed a bit of progressive JS here on the blog to make it easier for readers to copy the blocks of code that I post. Go ahead, try it: click within the code block, and the entire thing is selected. Makes for pretty easy copying, rather than having to carefully select just the text inside the box…

// I'm code!!  Copy me!!
$ hello world
// w00t...

The way it works

Here’s how it works: I’ve defined a function which goes over every single <code> element on the page. For each code element, a textarea element is created and inserted into the DOM tree directly before the corresponding code element. Once a textarea is added to the DOM, it is hidden via CSS. The textarea is given, as child nodes, recursive clones of code’s DOM child nodes. Then, the onclick event of the code element and the onblur event of the textarea are set to different functions. The code’s onclick function hides the code element, un-hides the textarea element gives the textarea the focus, and selects the textarea’s contents. The textarea’s onblur function hides the textarea and un-hides the corresponding code element.

It’s possible to have the script do this for all code elements on the page, but I’ve implemented it to only target those code elements to which I’ve given a class name of “copyable”.

The CSS

The hiding-un-hiding tricks aren’t possible without CSS. Well, they’re possible, but such an implementation would make the JS much messier. Here I’ve used CSS to similarly style both code elements and elements with a class name of “codeenhance” (which is used to identify the inserted textareas).

.codeenhance, code {
    width: 430px;
    color: #000;
    display: block;
    background: #eee;
    padding: 0 10px;
    padding-bottom: 1em;
    margin: 0;
    border-width: 3px 1px !important;
    border: #99f solid;
    overflow: auto;
    line-height: 1.4em;
    font-family: monospace;
    font-size: 1.1em;
}
.codeenhance, .copyable {
    height: 250px;
}
code {
    white-space: pre;
}
.codeenhance {
    padding: 0;
}
.codeenhance-off {
    display: none;
}

The first declaration is the main styling for the code elements. The height specification for .codeenhance and .copyable fix the height of copyable code blocks, so your 159 lines of copyable JS don’t take up too much space. I’ve left the height out of the main declaration, to allow the other code blocks to expand/retract to their contents’ size. The white-space declaration for code elements maintains the whitespace as you typed it. The padding declaration for .codeenhance fixes an interesting jumping issue with the textareas. And the display declaration for .codeenhance-off is what hides the appropriate items.

The Javascript

Here’s the JS. The explanations are in the code comments

// Enable click-select on code elements
function enhanceCode() {
    // Get all code tags
    var codes = document.getElementsByTagName("code");
    // loop over code tags
    for (i=0; i<codes.length; i++) {
        // working only on tags of class "copyable"
        if (codes[i].className.match('copyable')) {
            // for each tag, create a new textarea
            var text = document.createElement("textarea");
            // copy the code's children over
            for (j=0; j<codes[i].childNodes.length; j++) {
                // special code for Blogger, to take care of extra br elements
                if (codes[i].childNodes[j].nodeName == "BR")
                    text.appendChild(document.createTextNode('\r\n'));
                else
                    text.appendChild(codes[i].childNodes[j].cloneNode(true));
            }
            // set the initial classname
            //    (use .className rather than .setAttribute('clas', 'blah')
            //    because IE6 doesn't like the latter
            text.className = "codeenhance codeenhance-off";
            // setup the onblur event
            text.onblur = decodex;
            // insert the textarea before the code
            codes[i].parentNode.insertBefore(text, codes[i]);
            // setup the onclick event
            codes[i].onclick = codex;
        }
    }
}

// this = code element; this.previousSibling = textarea element
function codex() {
    // show the textarea
    this.previousSibling.className =
        this.previousSibling.className.replace(/ ?codeenhance\-off/, "");
    // hide the code
    this.className = this.className+" codeenhance-off";
    // focus and select the textarea
    this.previousSibling.focus();
    this.previousSibling.select();
}

// this = textarea; this.nextSibling = code
function decodex() {
    // show the code
    this.nextSibling.className =
        this.nextSibling.className.replace(/ ?codeenhance\-off/, "");
    // hide the textarea
    this.className = this.className+" codeenhance-off";
}

window.onload = function() {
    // run the enhancement /after/ the window has loaded
    enhanceCode();
}

“What makes a well-designed website?” That’s quite a question.

As a dabbler in web design, I would say a well-designed website is “good-looking”. It should look somewhat elegant. The “Web 2.0 style” — glossy buttons, spacious openness, minimalistic simplicity, and copious use of gradients — comes to mind. I can’t think of any sites that strictly adhere to all these points, but DynamicDrive is a good-looking site.

As an HCI-minded individual, a well-designed website is made by more than its layout. A well-designed website makes it obvious what the site’s purpose is, what can be done on the site, how to go about doing it, etc. Again, simplicity is king, and clutter is sin. Content is easy to skim and understand. The layout does not make it difficult to navigate. If a feature breaks, the site will either gently tell the user so, and make it easy for the user to report the breakage; or the site will function in such a way that the user doesn’t notice the difference, and the developer will be alerted. I think Digg is a fairly usable, well-designed site.

As a web developer at heart, a well-designed website is all in the code. Separation of structure, content, presentation, and functionality is something to be strived for. It should be built as follows:

1. First build a mock page (with the final site’s design in mind) which contains either mock or real content, and only structure-oriented HTML markup. Presentational markup is sin This page is not design-oriented; its only purpose is to structure the page’s content in a semantically meaningful way. Any tags that do not directly relate to the structure and/or content of the page should be struck down with a flaming sword of death. Organize things in such a ay that they flow logically along the page.
2. Develop the CSS in an externally linked file. Introduce any design-specific images through the CSS, if possible (and it should be possible). Strive for cross-browser compatibility within the CSS, making the site look as similar as possible from one browser to the next. If any additional markup is required for the design of the site, the CSS should be developed to make the site look good without it; if still necessary, the necessary markup can be added through the next step. Use what you have to get what you want.
3. Develop the functionality (using JavaScript) in another externally linked file. Nonintrusive javascript should be used, progressively enhancing the site after it has loaded. Nonintrusive javascript should also be used to add any necessary additional markup to be used by the CSS. Again, use what you have to get what you want.
4. If possible, convert the finished page layout into a template, and use a server-side language to fill it with dynamic content.
5. Finally, when all is said and done, pull up the page in a browser, and make sure everything works. Turn off javascript, refresh, and make sure everything works. Turn off css, refresh, and make sure everything works. Then browse the web for a while….and see if it works

According to these steps, a well-designed website will work across browsers, degrade gracefully in older browsers, respect the wishes of those with Javascript turned off.
There are lots of websites that use this methodology (using only semantically-meaningful html, etc). One well-designed website in this case is Dynamix Labs. It doesn’t seem that they use any javascript, and if you turn off CSS, the site is still very readable.

As a user, I want information, and I want simplicity in doing what I want to do. A lot of the time, I want information that I can talk about in my blog. I use google as my main go-to source for finding things. If I find a site that gives me good information on a regular basis, I want to be able to subscribe to its RSS feed, or something similar. If I find a site that I come back to on a regular basis (whether I be forced to, or do so of my own free will), I want to be able to customize my experience on that site. I want to be able to change the colors, the landing page content; anything and (usually) everything, I want to customize it to better serve my way of doing things.
One service that I use on a daily basis is Google Reader (you’ll have to sign in to your google account), a web-based RSS aggregator. It features “folders” that you can use to organize your feeds, drag-and-drop re-ordering of feeds, and very easy-to-use methods of subscribing and unsubscribing from feeds.
Another service that I use regularly is Netvouz, a social bookmarking site. I chose Netvouz over other bookmarking sites because of its folder organization feature. You can organize your bookmarks according to category (and sub-category) and make certain bookmarks private. It’s also easy to delete or edit my existing bookmarks, and really easy to add new bookmarks using the Netvouz firefox extension.

I must say, though, that my most frequently used and favorite thing is FireFox. It is customizable in (almost) every way possible; its functionality is infinitely extendable through extensions, which anyone familiar with XML and Javascript can write. It has excellent support for standards; the upcoming FireFox 3 is said to have passed the Acid2 test, which is huge for web developers.

As you can see, from my point(s) of view, a well designed website can and should be many things to many different people.

So, what do you think? What makes a website “well-designed”? What are some examples of well-designed websites?

Note: References to certain things “being sin” should not be taken literally. Putting presentational markup on your page will not send you to hell. Nor will avoiding clutter send you to heaven. These are just my personal pet peeves

In my last article “Most Popular Posts list for blogger,” I presented my version of Chris Riley’s Analytics API workaround. I also promised to go through the JavaScript for those who were interested

The JS

Without further ado, the code:

<div id="popularposts"><noscript>Please enable javascript to view the most popular posts list.>/noscript></div>
<script type="text/javascript">
<!--
function topcontentCallback(obj) {
    try {
        var url,title,output;
        output='<ul>';
        for (i=0; i < obj.count; i++) {
            url = obj.value.items[i].url;
            try {
                title = obj.value.items[i].name[0].content;
                title = title.replace('<title>', '');
                title = title.replace('</title>', '');
                title = title.replace('Tech Knack: ', '');
            }
            // if we didn't get the title (bad Pipe!), give a pseudo-
            //   title from the URL
            catch (e) {
                title = url.substring(
                             url.lastIndexOf("/")+1,
                             url.lastIndexOf(".html")
                         ).replace(/\-/g, " ");
            }
            //remove the <title> tags the pipe leaves in.
            output+= '<li><a href="'+url+
                     '" title="'+title+'">'+title+'</a></li>';
        }
        output += '</ul>';
        document.getElementById("popularposts").innerHTML = output;
    }
    catch (e) {
        var error = "Error fetching data: "+e;
        if (e.toString().indexOf('i')!=-1) error += "<br />i: "+i;
        document.getElementById("popularposts").innerHTML=error;
    }
}
//-->
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?_id=bi6F5qPK3BGfvuxf1vC6Jw&_render=json&_callback=topcontentCallback" type="text/javascript"> </script>

The Div

<div id="popularposts"><noscript>Please enable javascript to view the most popular posts list.</noscript></div>

The div with id “popularposts” is the div whose content will be replaced with our list. It initially contains some noscript text for those without JS.

The Function

function topcontentCallback(obj) {

The topcontentCallback function is the function used to handle the JSON output by the Yahoo! Pipe. “obj” is the JSON string passed in by the Pipe.

    try {
        ......
    }
    catch (e) {
        var error = "Error fetching data: "+e;
        if (e.toString().indexOf('i')!=-1) error += "<br />i: "+i;
        document.getElementById("popularposts").innerHTML=error;
    }

We enclose the main processing code in a try block. Firefox2 and IE6 (and presumably 7 and 8 ) support try blocks in JS. This way, if there is a problem processing the data (a referrenced node is missing, etc) the user gets a nice little error message rather than a JS error thrown by the browser. In te case of an error, the previously mentioned div’s content is set to “Error: <error message>”. Not useful to visitors, per se, but good for debugging your script. The “if (e.toString().indexOf(’i')!=-1)” part simply appends i’s value (from within the try block) to the error message. Again, good for debugging.

        var url,title,output;
        output='<ul>';

Declare some variables, initialize the output variable (we use an unordered list for display).

        for (i=0; i < obj.count; i++) {
            url = obj.value.items[i].url;

We loop over the items given by the Pipe. First we pull the url of the popular page.

            try {
                title = obj.value.items[i].name[0].content;
                title = title.replace('<title>', '');
                title = title.replace('</title>', '');
                title = title.replace('Tech Knack: ', '');
            }
            // if we didn't get the title (bad Pipe!), give a pseudo-
            //   title from the URL
            // if we didn't get the title (bad Pipe!), give a pseudo-
            //   title from the URL
            catch (e) {
                title = url.substring(
                             url.lastIndexOf("/")+1,
                             url.lastIndexOf(".html")
                         ).replace(/\-/g, " ");
            }
            //remove the <title> tags the pipe leaves in.

Here we try to pull the page’s title, as pulled by the Pipe. I’ve noticed that, occasionally, the Pipe will have trouble getting the page’s title, and so leaves the title blank, which doesn’t play well with our script. Within the try block, I get the content of the title; I then try to replace (remove) the title tags and the site’s title. If there is no title text from the Pipe, this will throw an error. In the catch block, we use the page’s url to “guess” the title, removing the “.html” at the end using url.substring(), and replacing the intermittent dashes which replace punctuation and spaces with .replace(). These two commands are strung together to be url.substring().replace(). The result: if the article titled “CSS trick – two background images” doesn’t have a title attribute in our JSON, the title is given as “css trick two background images”. For this reason, you should enable “post pages” in your template’s preferences.

            output+= '<li><a href="'+url+
             '" title="'+title+'">'+title+'</a></li>';

Here we append to our ul an li containing a link to the popular page.

        }
        output += '</ul>';
        document.getElementById("popularposts").innerHTML = output;

After the for loop, we add the final </ul> and replace the div’s contents.

All this is just a function; without calling it, it is no good.

<script src="http://pipes.yahoo.com/pipes/pipe.run?_id=bi6F5qPK3BGfvuxf1vC6Jw&_render=json&_callback=topcontentCallback" type="text/javascript"> </script>

This imports the JSON created by the Pipe, telling it to render in JSON format (&_render=json) and to call our function to handle the JSON (&_callback=topcontentCallback). If you copy and paste the src to a browser window, you’ll see that the content is simply a function call with the JSON as the parameter:

topcontentCallback({"count":7,"value":{"title":"TechKnack".......}});

Not satisfied with AffiliateBrand’s widget, I kept searching. To no avail; that was simply the only pre-packaged blogger widget out there. Then the thought occurred to me to use my Google Analytics data to roll my own pseudo-widget. Genius, no? Well, it would be, if Analytics had an API

Fortunately, there are geniuses out there who have done genius things. In this case, Chris Riley of Blogoscoped has mashed up a combination of Google and Yahoo! offerings in such a way that we poor Blogger users can have a Popular Posts widget!

The basics

The basics are these:
1) Have analytics setup on your blog
2) Setup a Google Group
3) Setup a GMail account
2) Setup email notifications from Analytics’ top pages to a GMail account
3) Setup GMail forwarding to your Google Group
5) Setup a Yahoo! pipe to fetch and process your top content report
6) Setup a pseudo-widget script on your blog to display the pipe’s results

The pipe

While Chris provides his Yahoo! Pipe for others to clone, I had issues getting it to work with fetching the page’s title contents. Here’s the pipe that I’m using. Of course, a different pipe means different code for parsing the results.

The javascript

Here’s the javascript that I use to display my pseudo-widget:

<div id="popularposts"><noscript>Please enable javascript to view the most popular posts list.>/noscript></div>
<script type="text/javascript">
<!--
function topcontentCallback(obj) {
    try {
        var url,title,output;
        output='<ul>';
        for (i=0; i < obj.count; i++) {
            url = obj.value.items[i].url;
            try {
                title = obj.value.items[i].name[0].content;
                title = title.replace('<title>', '');
                title = title.replace('</title>', '');
                title = title.replace('Tech Knack: ', '');
            }
            // if we didn't get the title (bad Pipe!), give a pseudo-
            //   title from the URL
            catch (e) {
                title = url.substring(
                             url.lastIndexOf("/")+1,
                             url.lastIndexOf(".html")
                         ).replace(/\-/g, " ");
            }
            //remove the <title> tags the pipe leaves in.
            output+= '<li><a href="'+url+
                     '" title="'+title+'">'+title+'</a></li>';
        }
        output += '</ul>';
        document.getElementById("popularposts").innerHTML = output;
    }
    catch (e) {
        var error = "Error fetching data: "+e;
        if (e.toString().indexOf('i')!=-1) error += "<br />i: "+i;
        document.getElementById("popularposts").innerHTML=error;
    }
}
//-->
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?_id=bi6F5qPK3BGfvuxf1vC6Jw&_render=json&_callback=topcontentCallback" type="text/javascript"> </script>

Yes, my JS is admittedly a bit more robust than Chris’s. This is mostly because of various issues I either ran into or thought of while trying to implement the widget. For those who are interested, I’ll post an explanation of the code in another post.

For this to work, you must enable “post pages” in your template’s preferences. There might be a way to get this to work without post pages, but I wouldn’t recommend it

If you are going to copy and paste this code (probably after cloning my pipe), be sure to change things appropriately:

Change the pipe ID in the last script element to the ID of your new pipe

In the “title fixup” section:

[/js]
            try {
                title = obj.value.items[i].name[0].content;
                title = title.replace('<title>', '');
                title = title.replace('</title>', '');
                title = title.replace('Tech Knack: ', '');
            }
[js]

The last “title.replace” line removes the site-wide title that is used on every page. Change it according to your Blogger setup (if you leave it as-is, though, it shouldn’t hurt anything).

Additional links:
No Google Analytics API? No Problem!
Yahoo! Pipes

I believe it is time for a fresh look
The testing grounds: techknack2.blogspot.com

One of the things I’ve heard recently is that white text on dark backgrounds is not all that usable. Cool, but not usable. As I’ve gone back and read a couple of my posts, I’ve realized that it’s true, especially for long blocks of text; the text just seems to fade into the background after a rather short amount of time.

Another issue I’ve had is clutter; the more I look at my blog, the more clutter I see. Whitespace is good; simpler is better. Keep it simple, stupid.

In my search for templates for the new Blogger, I’ve found but one that I really like: Azul by karan at Skins4Bogger. Unfortunately, the XML download is for a completely different theme…

As per usual, I appreciate any and all feedback. What do you expect to see in a blog’s layout? Where do you expect to see these things? Should the comment count be before the post, or after? Etc

Now, while CSS3 is purported to support up to 8 background images — no doubt to make rounded corners and other fancy borders easier for coders — the problem is that, to the best of my knowledge, IE and FF don’t yet support this feature. Besides that, IE6 and lower never will. And I’m not even sure this feature will be usable for what I want, anyway.

So, I had to have (ok, really, really wanted) the left-hand background, and, IMO, the page looked too bland without some texture on the general background. As I already had the structure of the page decided upon (and, as such, couldn’t modify it for presentational purposes), I started looking at what I had to work with. There was obviously the body tag, but there was nothing much else to work with…besides the html tag itself.

I already had the vertical background applied to the body tag, so I started by removing the background color from body (so the html background could show through). I then applied the same background color and the new background image to the html tag:

html {
    background: #000 url("tiled.png");
}

body {
    background: url("vertical.gif") repeat-y;
    background-position: 75px top;
}

And, whaddaya know, it worked! Unfortunately, it seems that declaring the html element’s style in my CSS changes the basic behavior of the body element, making it more like a containing div. The result: there’s a margin around the content, and the vertical background only goes to the end of the content. Yuck.

So, the first thing to do is fix the ugly margin. Easy enough: set body’s margin to 0 , as well as body’s padding for good measure. Next, fix body’s background. Currently, the background stops at the end of the content area. Not a problem if the content causes the window to scroll, but not pretty if there’s not enough content. I figure this should be easy enough to fix, just set body’s height to 100%. This works well enough…in IE6. Strangely, FireFox 2 doesn’t take so kindly to it. Changing the body’s height to “auto” works alright, for both browsers, for overflowing content, but not for short content. A height of “auto” and a min-height of 100% works excellently in FireFox 2…but, again, IE6 doesn’t know how to treat min-height. Good grief.

So, I enter the realm of CSS hacks. Using a min-height hack combined with advanced CSS selectors that aren’t understood by IE6 and less, I combine the methods that worked for each browser into a series of rules that are “browser-filtered” – one browser uses one method, while another browser uses the next.

html {
    background: #000 url("tiled.png");
    /* Height is 100%, so the body can be 100% */
    height: 100%;
}

body {
    background: url("vertical.gif") repeat-y;
    background-position: 75px top;
    margin: 0;
    padding: 0;
    /* Height is 100%, so the tiled BG will tile all the way down
       the page, not just as far down as the page's content
       (when the content's height is less than the window's height) */
    height: 100%;
}
/*
Hackety-hack-hack...
FF2, with the above code, will only display the repeat-y image for as
    high as the window's viewport is; higher content (upon
    scrolling) will not have the bg.
This "hack" makes the tiled background work properly in FF2.
This type of "advanced selector" is not understood by IE6...dunno
 'bout IE7.
*/
html>body {
    min-height: 100%;
    height: auto;
}

The common html code works fine on both browsers. It’s only the body’s height issue that needs resolved. The IE6 code is given in the body code; both browsers will see this and understand it. However, when they get to the html>body statement, IE6 says “wha??” and drops the rule, whereas FF2 says “ok…” and applies the appropriate styles to the body tag, overriding the earlier-mentioned height.

View the live example or browse the files

This post is rather consistently my most-read post on this blog. If you found the information in this article useful, you may want to check out some of these related articles here on TechKnack:

• Pretty Up Your Forms with CSS
• Alternative Link Underlining
• Sticky Page Footers

OpenOffice.org Portable is a great little office suite, ideal for working with documents on the go. Unfortunately, while the download is only around 70MB, the full install is 181MB, which may be more than you want to give up — or even more than you have available, after installing your other portable apps. Fortunately, the full install comes with some fairly large nonessential files that can be gotten rid of

This guide assumes you’ve installed OOoP to the directory “\OOP”.

Dictionary files
These files are used for spellchecking. Languages that come in the default installation (to the best of my knowledge), are: three variations of German (de_*), two variations of English (en_*), Hungarian (hu_*), Italian (it_*), Dutch (nl_*), Swahili (sw_*), and Thai (th_*). (language codes , two-letter codes are under the ISO639-1 list).
While all these languages are nice, I know that, unless I get a German penpal or something, I won’t be needing anything other than English, and it’s reasonably safe to delete the other dictionary files to save space.
The dictionary files can be found in the \OOP\App\openoffice\share\dict\ooo directory. Files you want to delete are in the following formats (the asterisk [*] is a wildcard, in most of the following cases indicating one of the two-letter language codes):

• *_*.aff
• *_*.dic
• hyph_*_*.dic
• README_*_*.txt
• th_*_*.dat
• th_*_*.idx

For my intallation (keeping only the US English dictionary), I kept only the files DictOOo.sxw, dictionary.lst, en_US.aff, en_US.dic, FontOOo.sxw, hyph_en_US.dic, and WordNet_license.txt. This cleared up about 52MB. You may also want to keep the files th_en_US_v2.dat and th_en_US_v2.idx, which seem to be either word definition or thesaurus files, but they will add an extra 20MB to your setup.

Templates
I know that some people out there use templates when creating new documents, but I’m not one of those people. I just create a new document, maybe set up its margins and stuff, and start typing. If you don’t use templates, either, you can delete the entire \OOP\App\openoffice\share\template directory, to save almost 8MB.

Gallery
I really don’t know what this directory would be used for in the OOoP program, but a quick look at the files inside indicates that it’s not important for daily document-editing rituals. Delete \OOP\App\openoffice\share\gallery to save almost 5MB

READMEs
If you have no use for the README files, delete \OOP\App\openoffice\share\readme to save a whopping 76KB

Help Files
You may actually want to keep the help files, located in \OOP\App\openoffice\help , in case you ever need a quick how-to or what-is on something in the program. If not, delete the directory to save 22MB

Java “class” files
OOoP comes with the option to add java support, but I haven’t yet seen the need to have this support. If you don’t care for Java support, either, delete \OOP\App\openoffice\program\classes to save 8.5MB

Extraneous Icon Sets
OOoP comes with a few nice icon sets that you can customize your toolbars with, but the cost is 18MB in icon set files. Open Writer, Calc, or another OOoP program, look through the icon sets (Tools->Options…, then OpenOffice.org->view in the left pane, in Writer). Once you’ve found an icon set you like, go to \OOP\App\openoffice\share\config and delete the three images_*.zip files that you DON’T want. I chose to keep the Crystal icon set, images_crystal.zip. This saves around 13MB

And that’s it! You should now have slimmed your OpenOffice.org Portable installation from 181MB to 70-75MB. Congratulations