Stuff by Adrian

The first part to hit the bin on dismantling the Megane…

A BMC pod filter installed with electrical tape:

I am making the following ‘LEGACY’ image available in an ‘EPS’ format for Subaru Legacy owners who’d like to make vynal stickers for their car. This uses the official Legacy font and the graphic looks something like this:

The EPS can be cut by a vynal sticker cutter in any colour. What it looked like on my vehicle:

Click here to download the file: legacy_carsticker.eps.

In an experiment to display text/paragraphs in a newspaper-style multi-column layout lead me to Randy Simons’ Automatic Column text source-code. This neat piece of JavaScript code re-arranges paragraphs to fit liquidly-sized columns of text into the available space, maintaining equal heights for each column. It’s really neat in a liquid layout because dependent on the size of a users browser viewable area or screen resolution it will show either fewer or more columns based on your desired ‘em’ size for your columns.

Yes, a completely CSS solution is ideal – and hopefully this is only a year or so from being reality with the latest browsers – but in the meanwhile this solution degrades when the user doesn’t have JavaScript and is fast.

Any interesting read is the A List Apart article CSS Swag: Multi-Column Lists.

My use-case uncovered some minor problems with the script; it didn’t deal with images embed within the paragraphs of text, short blocks of text where columns just didn’t work, I needed a way to toggle the columns on and off (as some users didn’t like them) and while making this addition to the site it seemed like a good time to implement an Increase/Decrease font-size feature.

So the script modifications and samples presented below implement these changes.

Of note; the web-site that these modifications were developed for no longer uses this script. Why? Multiple columns introduce a few problems, so have a think about your use-case.

• The content management system input was not reliable and invalid XHTML caused poorly rendered columns
• Very long news articles meant that the user would scroll down to read the first column and have to scroll up to read the top of the next, down again and so on. Not a big problem with the “..read on” links added – but extra clicks and scrolling in the end.
• Users were used to the single column layout

How to use

Please see “multicolumn-sample.html” in the sample or download links below for a complete implementation. There is also a sample in the multicolumn-development.js file including an advanced tweak I will mention below.

These are the steps for a minimum implementation:

1. Copy multicolumn.js to your web-site source directory
2. Within the HEAD tag of our HTML files which you would like to add liquid multi-column paragraphs to add the following code:
   
<script type="text/javascript" src="multicolumn.js"></script>
<script type="text/javascript" src="multicolumn-helper.js"></script>
<style type="text/css"><!--
  @import url(multicolumn.css);
--></style>

3. Enclose your PARAGRAPH tags within the HTML document that you wish to appear as liquid multi-column paragraphs with a DIV tag with the CLASSNAME “multicolumn”, we also need a second DIV – so don’t miss that:
   
<div class="multicolumn"><div>
  <p>
    Paragraph content.
  </p>
  <p>
    Paragraph content.
  </p>
</div></div>


4. Load your page in your web-browser and test.

If you would like to customise the default minimum column widths there is a quick comment in multicolumn-development.js but I will repeat it here. You will need to tweak the CSS in multicolumn.css. Specifically the following rule where 22em can be adjusted up or down.


.multicolumn-Columnized div {
  ...
  width: 22em;
  ...
}


You will see in the sample below how to use the new multicolumnHelper class, but for reference it is as simple as including the following HTML code snippet in your page – customise the display as you see fit whether that be graphical buttons or making the list ‘inline’. These font size helpers will work whether the columns are turned on or off.


<ul>
  <li><a href="#" id="multicolumn-ColumnsButton" onclick="return multicolumnHelper.toggleColumns(this)">Hide Columns</a></li>
  <li><a href="#" onclick="return multicolumnHelper.fontIncrease(this)">Font Larger ++</a></li>
  <li><a href="#" onclick="return multicolumnHelper.fontDecrease(this)">Font Smaller --</a></li>
</ul>


Sample

• Click here to view the MultiColumn sample.

Download

• Click here to download multicolumn.zip.

Hopefully these changes are of use. And credit again to Randy Simons for the bulk of the code.

The standard alpha-numeric regular expression validation [a-zA-Z0-9]+ is not suitable for multi-lingual Unicode string validation.

In a multi-lingual software environment, you’ve set up your Unicode database table columns and set your interface to accept the UTF-8 character set – but you want to validate your user’s input. That is to say you still want ‘alpha-numeric’ validation but need to accept Latin accented characters and or even Chinese, Taiwanese etc character sets – you don’t want special characters like !”£$%^& etc. But of course you could modify the combinations below to suit your needs.

Here is a regex expression code snippet with comments that will help you validate the input.


/**
* A localised string valid characters.
*
* Numbers
*    [\u0030-\u0039]+
* English alpha characters
*    [\u0041-\u005a\u0061-\u007a]+
* Underscore and hyphen
*    [\u002d\u005f]+
* Quote, apostrophe, punctuation
*    [\\u0022\u0027\u00b4]+
* Whitespace
*    [\\s]+
* Latin-1 Supplement - With excess removed, only leaving characters
*    Suitable for; German, Italian, Portuguese, Spanish.
*    [\u00c0-\u00ff]+
* Latin-1 Supplement - Extra characters
*    Suitable for Dutch as per http://en.wikipedia.org/wiki/ISO/IEC_8859-1
*    [\u0131-\u0132]+
* Latin-1 Supplement - Extra characters
*    Suitable for French as per http://en.wikipedia.org/wiki/ISO/IEC_8859-1
*    [\u0152\u0178]+
* Chinese Characters
*    [\u4e00-\ud7a3]+
*/
private static final String VALID_CHARS = "[\u0030-\u0039\u0041-\u005a\u0061-\u007a\u002d\u005f\\s\\u0022\u0027\u00b4\u00c0-\u00ff\u0131-\u0132\u0152\u0178\u4e00-\ud7a3]+";


In Java you might use this something like:


private Boolean isValidChars(String inputValue) {
  return (inputValue != null && !inputValue.matches(VALID_CHARS) ? false : true);
}


In JavaScript the same can be used like:


function isValidChars(inputValue) {
  var VALID_CHARS = /[\u0030-\u0039\u0041-\u005a\u0061-\u007a\u002d\u005f\u0022\u0027\u00b4\s\u00c0-\u00ff\u0131-\u0132\u0152\u0178\u4e00-\ud7a3]/gm;
  return inputValue.match(VALID_CHARS);
}


I’m sick of date pickers, date pickers where I have to click Next, Next, Next or Previous, Previous, Previous or some little arrow to find the month I want to pick. Even worse the date pickers that still rely on three HTML select box drop-down to choose the Day, Month & Year. And then, particularly on travel web-sites you typically want to select a from and to date range – don’t always give me two date pickers!

So, obviously I’ve been using a number of date pickers on different web-sites recently and I wouldn’t have this rant if I didn’t think there was a much better way to do it. There is and I’ve started a personal project “Calender Planner” which I hope to provide the ultimate JS/HTML date picker. What in my mind does the ultimate date picker have to do/provide?

• Looks Good – Its got to look like a calendar, in its most simple but neat incarnation.
• Performant – Its got to be smooth and load quickly. It can not impact on the project it is sitting within. JavaScript/CSS must have a small footprint and be quick to download.
• Usable – Easy to understand and use for a novice user, providing a similar look and interaction handles to those of existing date pickers – but easy for advanced users to utilise the full feature-set.
• Cross-browser support – Firefox, Internet Explorer, Opera, Safari, etc.
• Flexible – the same requirements for different projects? – your joking! An array of functional and styling options need to be simple to configure.
• Extensible – Projects need to be able to attach their own event handlers, animations and basically be able to interact with the date picker – not just show it and wait for the user to finish with it, maybe choose an invalid date range or none at all.
• Quick to implement – It should be a simple matter of copying a directory of JS/CSS files, adding a refernce to these where you want to use them and adding the lightest possible snippet to your HTML DOM and leave the rest up to the date picker – a 5 minute implementation.

But those “requirements” alone don’t make for an ultimate date picker. Calender Planner more specifically will include the following set of wish-list features.

• Infinite scrolling – most date pickers will display one month at a time, Calendar Planner will still be able to do this but is ideally set up to show more than one month on screen and make it easy for a user to find the date they want – just by scrolling up or down; and scrolling, and scrolling and scrolling – if need be. There would be nothing stopping you giving the user a calendar starting 100BC and ending in December 3030. The user would be able to scroll seamlessly between those start and end dates – no clicking next month, next month x-hundred times. All the while they scroll they’ll know where they are up to and can accurately stop on the month they want. Next/Previous buttons will still be optional to ensure usability is maintained where a user is used to using those buttons.
• Flexible date range selection – X date to Y date, M week to P week (ala row selection), week-day to week-day (i.e column selection Tuesday to Thursday), block selection (i.e. a square/rectanglar range of dates), multi-select (ala hold your Ctrl-key down), mouse selection (duh), and keyboard selection (arrow key navigation and Shift-key range selection)
• Liquid Sizing – a date picker that can display in any size; as a small combo/drop-down space or in full-screen! And without any intervention from the software/web-site it sits within. Provide your users the ability to stretch/resize the date picker container HTML DIV to any size or increase/decrease font size and Calendar Planner will maintain its visual consistency.
• Multi-column – It’s useful to show more than a month, its also damned useful in cases to not just show these months vertically stacked. Specify if you want your date picker to show 3 x 3, 2 x 6 – any reasonable number of month rows and columns. Calendar Planner will automatically flow the visible range into your pre-specified columns OR by default Calendar Planner will choose the number of columns it know fits into the liquid size of your date picker space and do it all for you. If your date picker area is of a liquid size (i.e. full-screen or user-resizable) as you decrease the area size you’ll have less columns and vice-versa.
• Internationalisation - Calendar Planner will know if a user expects the week to start on Sunday or Monday, and will show all messages in their local language. Or the implementer can choose if their Calendar Planner should only ever show in, for example Italian.
• Multiple date pickers – providing not only a quick implementation, but also the ability to have more than one Calendar Planner per web-site page – without having to initialise the Calendar Planner code more than once – Calendar Planner will use the established technique of retreiving HTML DOM elements by className and knowing these were you want date pickers to appear. Suppose your date picker area is not part of the immediate HTML DOM, but maybe loaded into the HTML DOM by an Asyncronous AJAX call – Calendar Planner will find each instance and be ready and waiting for your users interaction.

Should it work without JavaScript and or CSS? At this point I’m sure I will annoy some people and say, no & yes. No it doesn’t need to work without JavaScript and yes it should work without CSS. So Calendar Planner is designed so that it will work on devices/web-browsers with CSS switched off. It’s not going to look like a pretty calendar, but the days and ranges selected will be laid out in such a way that they are usable. And wait, the JavaScript – well, this is a Web2.0 world and you really didn’t expect Calendar Planner to work without Javascript? But the fall-back will be documented, have your three; day, month & year select drop-downs coded into your page. If there’s no JavaScript these will act as your date picker.

The name “Calendar Planner” hopefully gives hint that there is more to the project than just a date picker, and largely the phrase Planner is applicable because with a date picker as flexible as this it should lead very well to being able to more easily plan date based activities – hence I see this project being very useful for web-sites such as those providing travel and flight bookings (largely the type of web-site I have recently been using and have been frustrated by their date picker functionality).

Watch this blog.

Web development related bookmarks. Also see my list of JavaScript specific bookmarks.

• No bookmarks avaliable.

Rally related bookmarks. Including British rallying, WRC and Western Australian rallying links.

• No bookmarks avaliable.

These are travel related bookmarks that I have found useful when booking hotels, hiring cars or for places I have stayed and might stay again.

• No bookmarks avaliable.

JavaScript related bookmarks that I have found useful. Also see my general Web-Development bookmarks list.

• No bookmarks avaliable.

My collection of miscellaneous Gen 2 Subaru Legacy Photos – Part 3 of 3.

These photos are from my private collection that I have saved from the Internet. If your photos are within this gallery and you want them removed please contact me or post a comment for each photo with a link to your site! I do not profit from publishing these photos, hopefully Legacy fans do though – should be a few hours worth of drewling.

Return to photos index.