What I learnt today

Quick UI tip re radio buttons

2011-12-10T08:16:00.004+13:00

If you have optional information collected via a set of radio buttons you may consider having none selected by default. But if the record is going to be editable at a later date you're going to need an N/A or similar option, even if you just leave the "value" attribute blank because once the user starts clicking (or tabs) into the options one of them must always be checked.

Co-working space setting up in Christchurch?

2011-11-14T20:13:00.000+13:00

BizDojo runs co-working spaces in Wellington and Auckland. I have a couple of tabs open to articles which mention they are looking at setting up shop in Chch.
Creativity flows in right space
Coworking 2.0 gains traction down under

This is relevant because I have no idea what the status of Epicentre and Effusion are post-quake, but both sites were the Red Zone and at least one has been demolished.

Managing multiple monitors in Windows 7

2011-10-17T09:34:00.004+13:00

Only recently did I attach a second monitor* to my Windows 7 box, and set about trying to configure it with multiple wallpapers. Unfortunately this doesn't seem to be supported natively :( Luckily an acquaintance pointed me at Display Fusion (disclaimer: affiliate link).

Being an earning and responsible developer I opted to pay for the application after the 30 day trial license expired, although I don't actually use any functions that aren't available in the free version (multiple wallpapers, hotkeys to move windows between monitors). Still one day I might want to customise those hotkeys, or one of the may other functions yet unexplored.

*I admit, mostly so I can watch fullscreen video while still keeping an eye on what is happening online. But it has improved my productivity and reducing the amount of alt-tabbing I do has to be better for my wrists.

fckeditor file browser not sending proper xml response

2011-07-22T13:01:00.003+12:00

A site I help maintain suddenly stopped letting the client link to files using fckeditor, alerting that "The server didn't send back a proper XML response" when the file browser was opened.

This is one of the rare occasions Internet Explorer returns a more helpful error message than Firefox - it included the information that the XML request error (actually the http response code) was OK (200).

After initially checking such thing as server settings and response-type/encoding headers I set to perusing the actual returned xml in Firebug and spotted a suspicious looking square where there should have been a regular character. Turns out the client had uploaded a file containing a character which must not exist in utf-8 - specifically an em-dash ( &mdashl )). The xml lists filenames as attributes of "file" nodes, so the browser was getting to this character, failing to recognise it, and declaring the XML response invalid.

Changing the filename resolved the problem. I didn't encounter this possibility described elsewhere while I was googling, so here it is.

Even up a horizontal menu with javascript

2011-06-25T09:53:00.004+12:00

Often I receive a design which calls for some arbitrary number of menu items to be spread across a horizontal navigation menu not evenly, but each with the same amount of padding between the text and the divider on each side.
Simple text representation:
| text | longer text | mid-text | t |

Padding is easy, it goes on the link. Nominally you then just adjust it as necessary once you know what the final text items are. (I usually assign any extra space to li:first-child a );

Unfortunately different browsers will
- display the same font slightly wider
- calculate/render elements with slightly different widths

Which means your perfectly calculated style will either fall short or push the last menu item over the edge.

My solution is to initially set the padding fairly small, and then expand it on page load with a little javascript. This is progressive - the site is still perfectly usable if you don't have javascript turned on, it may just look a little lopsided.

Basic navigation structure

<div id="navigation"> <ul id="menu"> <li>< href="">text</li> <li>< href="">longer text</li> <li>< href="">med-text</li> <li>< href="">t</li> </ul> </div>

Basic styling

#navigation { width: 980px; } #navigation * { margin: 0; padding: 0} #navigation li {float: left; list-style-type: none;} #navigation a { padding: 0 10px; } /* if you do end up with a spare px through rendering this next rule makes sure the RHS of your menu sits pretty. .ie-last is added to older versions of IE using feature detection*/ #navigation li:last-child, #navigation li.ie-last { float: right; }

The javscript (jQuery)

$(document).ready(function(){ //distribute menu items to fit page width cont_width = $('#navigation').innerWidth(); //container width var nav_width = 0; //space taken up by items as rendered menu_items = $('#menu > li'); $(menu_items).each(function(){ nav_width += $(this).outerWidth(); }); space = cont_width - nav_width; if(space>0){ //relies on default padding being set up correctly in the stylesheet link_padding = parseInt($(menu_items).first().children('a').first('a').css('paddingRight')); num_items = menu_items.length widen_each = space/num_items; //float while(widen_each>=1){ //expand all items each_side = widen_each/2; each_side = Math.floor(each_side); if(each_side>=1){ // ie widen_each >= 2, add to both sides equally link_padding += each_side; widen_each -= each_side*2; space -= each_side*2*num_items; $(menu_items).children('a').css({'paddingLeft':link_padding,'paddingRight':link_padding}); } else { // ie 1 <= widen_each < 2, add 1 to the right widen_each -= 1; space -= num_items; $(menu_items).children('a').css({'paddingRight':link_padding+1}); } } if(widen_each>0){ // some amount of space cannot be evenly distributed as whole px //expand last item to take up any remaining space last_item = $(menu_items).last(); while(space>1){ //in the browsers that are causing trouble we need to leave a px free. each_side = space/2; each_side = Math.floor(each_side); if(each_side>=1){ link_padding += each_side; space -= each_side*2; $(last_item).children('a').css({'paddingLeft':link_padding,'paddingRight':link_padding}); } else { space -= 1; $(last_item).children('a').css({'paddingRight':link_padding+1}); } } } } );

~~~
A pure CSS approach is to use display:table-cell (see this article at SitePoint).

Who is building the new Ultra Fast Broadband network for Christchurch?

2011-05-24T12:09:00.002+12:00

Not Telecom (well Chorus). The get much of much of the country, but they don't get Christchurch!

Enable Networks get Christchurch and Rangiora and outlying settlements. Enable are owned by the Christchurch City Council (ie publicly owned) and they've been building a dark fibre network in Christchurch for a while now.

Herald story covering all areas
More and More - media releases on Voxy about Christchurch + Enable.

~~~
I'll be watching the Telecom/Chorus split with some interest - assuming the shareholder vote is just a formality will Chorus (to become C2) be a listed company, adding a fraction of desperately needed depth to our stock market?

Stop WordPress index.php redirecting

2011-05-04T15:36:00.005+12:00

Wordpress is very determined that if you try to access http://[domain]/index.php without specifying more information in the query string that you should be redirected to the domain root ie http://[domain name]/.

This is problematic if you happen to have a static placeholder (eg index.html) or similar there to keep visitors at bay while developing the site, or if you are copying your old static site to Wordpress but want to leave the old files running until you're done. You simply can't preview your new homepage.

After poking at some of the other results you've probably seen if you came here from search, all of which either didn't work with the latest version or while freeing up the index page started redirecting the internal pages instead, I came up with this bit of code which I just stuck at the top of "functions.php" in the theme directory.

/** * turn off the goddam canonical redirect for development */ if(!is_page()&&!is_single()) { remove_filter('template_redirect','redirect_canonical'); }

It worked in this instance, but so much seems tied into the url redirection in Wordpress that I wouldn't trust it not to have broken something, somewhere. So it needs to be removed once the site is live.

"The modern No 8 wire is data"

2011-04-25T10:47:00.004+12:00

The NZ Herald has a piece on some ways the internet and other information technologies are allowing farmers to accelerate and fine tune their response to the market.
Connecting the clever farm

From an armchair in South Canterbury, he can follow a wool auction in Melbourne via satellite and track the prices other growers are getting for their lots.
...
"If we think the market is where we want it, I send an email through to the selling company and off we go."
This level of connectivity and the ability of farmers to access real-time information is becoming the lifeblood of agriculture in the 21st century.
...
"The modern No 8 wire is data and how it can be converted into meaningful information, how it can be twisted and bent and used," Walker said.

Donald Aubrey who is the main speaker in the article is Vice President of Federated Farmers, and a quick google on his name will turn up some of the other things he has to say on the matter.

Checkout design: Really excellent article

2011-04-16T10:47:00.001+12:00

http://www.smashingmagazine.com/2011/04/06/fundamental-guidelines-of-e-commerce-checkout-design/

Two posts (if trivial) in one day. Gosh.

Backgrounder on the men behind Pacific Fibre

2011-04-16T10:23:00.005+12:00

http://idealog.co.nz/magazine/32/cable-guys

Put these six gentlemen in a room and tell them to invent a company, and you’d expect some pretty fantastic ideas. They’ve spent their careers with internet startups, biotech research, brand-building, marketing and advertising, mobile development, and the like, and they’re used to success.

But this time they’re doing something that’s both more prosaic and much grander. They’ve co-founded a company that they expect to revolutionise New Zealand business and society with a product that, even to its customers, will be invisible—literally.

Their startup, Pacific Fibre, plans to lay submarine fibre-optic cables linking New Zealand, Australia and the US—where about 85 percent of the internet data New Zealanders consume originates from.

IE 9 detection with jQuery

2011-03-19T08:53:00.007+13:00

For quite a while I've been using jQuery and feature detection to add styling elements to Internet Explorer 8 and earlier on load, especially for rounded corners. The particular feature I settled on for this was htmlserialize


$(document).ready(function()
{
//IE rounded corners
if(!$.support.htmlserialize) // IE feature detection
{
struct = '<span class="ie-tl"></span><span class="ie-tr"></span><span class="ie-br"></span><span class="ie-bl"></span>';
$('div.corners').append(struct);

//compensate for irregular first-child/last-child support
$('li:first-child').addClass('ie-first');$('li:last-child').addClass('ie-last');
} //end IE detection
}); //end ready

Internet Explorer 9 handles CSS3 making this generally unnecessary for visitors using the browser. More importantly IE9 has it's own new set of rendering differences compared to earlier versions which need to be accounted for as long as IE8 (and IE7) are still out there.
The feature I've found works to target IE9 is opacity, most generally I use it to exclude the browser, as in


if(!$.support.htmlSerialize && !$.support.opacity) 
{
// IE6/7/8 code
}

Site rebuild

2010-11-28T17:28:00.004+13:00

I just complete the rebuild of my main site that I've been working on intermittently. This was brought on by the fact that I built it while I was hunting for work, and was never comfortable with what I was trying to do with it.

So now it's pretty minimalist. And pretty ugly in IE, because I've made quite a lot of use of CSS3 for rounding corners and styling list items. But it has

progressive enhancement instead of inline javascript or the target attribute on links
a Skip Navigation link and access keys, which I don't usually get to include in client work :(
conditional comments to let IE users know what is going on, with one especially for IE6 users

There are some other enhancements I plan to add to it - a few more images, a few more details and relevant links about my interests, basically making it really my website instead of a poor excuse for an advertisement.

Rural broadband

2010-09-21T14:11:00.003+12:00

Saturday in the Herald Farmers connect with Kiwi ingenuity talks about how farmers are going about getting broadband to their properties, and how it's improving their production.

For Ken Marshall, it was because he wanted to give his partner the best birthday present. Warren McNabb needed it to run his vineyard and home office. Liz Udy wanted to become a midwife. And Richard Wilson's high-tech milking shed wouldn't work without it.

They're all talking about requiring fast broadband. Yet all these farmers were in places - Hastwell, Mangamaire, the Awatere Valley and Hinds - that made the prospect as remote as their location.

Extraordinary, then, that they all now enjoy fibre-optic cable to their doors and unimaginable broadband speeds - 100 megabits per second (Mbps) - that townies can only dream of. The national average is around 3Mbps.

Businesses making it with broadband

2010-09-13T12:09:00.003+12:00

The NZ Herald has a series on how high speed internet can enable new ways of running a business, and bring international developments to New Zealand

What's the point of faster broadband? Here's what (Introduction)

Eye on the sky: Awarua Station

In the depths of Southland, a small facility is helping unmanned European Space Agency missions take supplies to the International Space Station. Part of the facility's essential infrastructure is a wireless broadband connection.

Found in translation: Tras@ction

Mackie's business, Trans@ction, which he'd started in 1990 in Surrey, outside London, depended on internet access. From the outset, the business used contract translators in New Zealand, who would take advantage of the time difference for overnight delivery of work to British and European customers.
The company is small, but in translating millions of words a year over a couple of decades has put millions of dollars into the New Zealand economy, Mackie says.

In the long run: Marathon Photos

Until an optical fibre connection became available, Kay says the company relied on a "frustratingly slow" ADSL connection of the type most residential broadband subscribers have.
That meant photos taken on a Sunday weren't available online until Wednesday. With fibre, the 230,000 images from Sydney's City2Surf event on August 8 were online the following morning.

Online wine: La Vinotheque

How about using it to keep tabs on a business on a smallish island in the Pacific Ocean? The real question might be, if you run a string of wine shops in Noumea, as does Dominique Annonier, why would you ever want to leave your New Caledonian paradise?

Business without walls: Voco

"Every time we've lurched to another level and reconsidered whether we need premises, it has seemed too much like spending money on a place for people to go and do nothing," Foley says. "Our folk are most productive when they're with clients."
Voco specialises in helping customers merge their computing and telecommunications, and has drawn on its own expertise to build a network of consultants who work from home offices.
...
"We spend money on stuff that coalesces the team rather than on the hard trappings of traditional corporate business."

Repopulating a form after client-side validation using javascript and JSON

2010-08-29T10:56:00.007+12:00

More properly, how to repopulate a form after client-side validation has failed, in particular when you are not directly writing the form code.

In this case the form is created through a WYSIWYG interface (by a 3rd party). The available tools are cookies (for passing the data back from the validation script) and javascript (which can be entered in the 'Source' view of the WYSIWYG editor and is permitted by the CMS).

For a few fields it is easy enough to give each field it's own cookie or use a simple join/spilt scheme, but for longer forms (more than about 10 fields) this gets unwieldy very fast, and you start to run into the cookie limit.

Enter JSON, to tidily package all your field-data pairs in a way that javascript can natively interpret.

Step 1.
Construct the JSON string as part of your validation script (this in php)

// my whitelist is ('var_in_script'=>'form-field-name') so I can't just json_encode it. $json = '{'; foreach($whitelist as $f => $v) { $n = str_replace('-','_',$v); //valid js variable names , form names are constructed with hyphens $x = html_entity_decode($$f,ENT_QUOTES); // undo input cleaning $x = str_replace('"',"'",$x); // or escape as '\"' $json .= '"'.$n.'":"'.$x.'",'; } $json = rtrim($json,',').'}'; setcookie('membershipformJson',$json,time()+30);

Step 2.
Put this function (and ancillary cookie handling functions) in the global javascript if possible, or at the top of the WYSIWYG source otherwise.

function refillFormAdv(x) { // x is the id of the form fields = document.forms[x].elements; // is the cookie set? j = readCookie(x+'formJson'); if(!j) { return; } v = eval("("+URLDecode(j)+")"); // extract values for(i in fields) { f = fields[i]; id = f.id; if(id) { id = id.replace(/-/g,'_'); // convert to valid var name } else { continue; } //look for the var in the JSON data z=eval('v.' + id); if(z) { t = f.type; switch(t) { case "text": case 'textarea': f.value = z; break; case 'checkbox': f.checked = true; break; case 'select-one': for(o in f.options) { if(f.options[o].value == z) { f.options[o].selected=true; } } break; // add other element types later if needed // radio buttons are going to be more difficult // will need to alter the script to look for name instead of id default: break; }// end switch }// end if }// end while //clean up eraseCookie(x+'formJson'); } function URLDecode(v) { v = unescape(v); while(v.indexOf('+')>-1){ v = v.replace("+"," "); } return v; }

Step 3. Make sure your form has an id (in the code above the id is 'membership') and that all fields have an id matching their name. (This highlights the one as yet unaddressed problem with the script - a set of radio buttons can not all have the same ID. I would address this by extending the function to check the "name" attribute if a matching "id" is not found, then comparing the "value" of each matching element against z. )

Step 4. Include the function call immediately after the form. If possible set it to fire after the page has loaded (at this point I was really wishing the system supported jQuery or any javascript framework).

<script type="text/javascript"> refillFormAdv('membership'); </script>

overflow:hidden breaks printing

2010-07-14T14:03:00.002+12:00

As we know elements which contain only floated elements often have no dimensions of their own (or dimensions of 0 if you prefer) and this can wreak havoc with the flow of your page.

On quick way around this is to apply overflow:hidden to the container, for whatever reason this will cause it to wrap cosily around it's children. I use this a lot when dealing with thumbnail galleries (a bunch of fixed-with elements floated left so they will align into nice columns no matter the width of the container), or anywhere else that a content area may wind up wit a floated element at the end (eg code inserted from a CMS).

Unfortunately I discovered yesterday (or more pointedly a client did) that overflow:hidden also applies to the printed page (at least in Firefox, I haven't tested extensively). The print routine will do it's utmost to fit all of the content in the element on one page, even starting a new page for the purpose, but will not insert another page break until it is finished. For long sections of content this means being cut off.

So it's back to empty elements with clear:both in the template or extensive use of clearfix for now.

Don Norman talks about innovation and the design-product gap

2010-07-12T15:55:00.002+12:00

Don Norman at IIT Design Research Conference 2010 from IIT Institute of Design on Vimeo.

(via his blog)

Targeting colors in Firefox

2010-06-12T21:30:00.007+12:00

Recent versions of Firefox come with automatic "colour correction" for images. This has caused me a number of issues, one in particular is what happens with a background gradient. Here is the break between the end of the gradient image and the background color in a recent site I worked on.

The background color here is #2788de, or if you want to see a smooth background in Firefox, #4b7ed8.

[Aside - I use the Colorzilla add on to grab the correct color for Firefox from the page itself.]

The first time this happened I resorted to creating an excessively long background image, which is not a very elegant solution. Targeting Firefox just isn't generally as simple as targeting IE, but I have found a way to resolve this problem using the proprietary support for gradients: -moz-linear-gradient

background: #2788de; /* every other browser I've tested */ background: -moz-linear-gradient(top, #4b7ed8, #4b7ed8); /* Recent Firefox */

Hope this helps someone for now. What worries me is what happens to these sites when Firefox changes again (I try not to think about all the sites already out there).

Maybe I'm an Entrepreneur?

2010-04-24T11:29:00.006+12:00

At IdeaLog an interview with Eric Ries addresses what he sees as the New Zealand culture of humility, and how this may be both a weakness and a strength when it comes to getting a startup off the ground.

I’ve become a bit suspicious of the reports I get from Kiwis, because I’ve learned there’s a pathological humility in the culture. So plenty of people say they’ve always wanted to be an entrepreneur and when I ask what they do now, they say “I run my own business.” Is that not an entrepreneur? And they say “Well it doesn’t really count—it’s not a very good business.”

I’m told New Zealand doesn’t have much of an entrepreneurship culture, and then everyone I meet is running their own business, or wants to. People tell me they’re doing three different projects, but they’re not a ‘real’ entrepreneur.

...

I was joking before about the kind of massive Kiwi humility complex, which I find baffling. But humility is a very valuable entrepreneurial trait, and so if you actually harness humility for good, what it means is that when you're confronted with difficult facts that contradict your vision, you'll have the kind of strength of self to see the reality for what it is, which could be very valuable.

Anyway, if I ever become the 'involved in a startup' type of entrepreneur, this article is something I want to remember.

A template change

2010-04-15T10:53:00.000+12:00

I've just made a couple of changes to the blog template, firstly widening it to accommodate the wider widths we're seeing for video these days and secondly replacing the rounded border images with border-radius CSS.

Of course Internet Explorer users won't be able to see the rounded corners, so I've also used conditional comments to put a little notice and links to other browsers at the top of the sidebar (inside an html widget). As a bonus I've included another conditional comment targeted squarely at IE6 users asking them to upgrade, even if only to a later version of IE.

How we got the Internet

2010-04-15T09:48:00.002+12:00

Yoinked from Top 10 YouTube Videos About The Web @ ReadWriteWeb

Web 2.0 ... The Machine is Us/ing Us (or, the evolution of text in the electronic age)

Nifty History of the Internet

Barcamp Christchurch 2010 (#bcchch)

2010-04-11T12:16:00.003+12:00

So I spent most of yesterday at the Christchurch BarCamp unconference (twitter #tag #bcchch)

It Rocked.

I don't think an offical head count was ever done, but there would have been between 30 and 40 people from the IT scene in Christchurch there, with a focus on internet technologies ranging from random webmonkeys like myself to high-powered programmers living in NZ but teleworking for companies in Australia or the States. There were even a couple of people down from Wellington.

Some of the topics covered were
- introducing open source projects with local connections like CrowdFusion (publishing) and GroupServer (mailing list management),
- an introduction to Forensic Computing,
- background on the ACTA and publicACTA meetings which were happening in Wellington yesterday.
- The Case of the Midnight Note a 'transmedia' game which the Wellington tech community ran across Twitter/Facebook/blogs/the real world as a fundraiser to send people to Webstock, and how the team behind it is partnered with DigitalNZ to see what sort of Augmented Reality games you can create by merging the world of today with the archived history of yesterday.
- ethics + sustainable development practice for programmers
- some of the really shiny stuff you can do with html5/css3
- Idea management
- A round up of various informal groups that meet up regularly in Christchurch to discuss internet technologies & issues
- and more

Paypal returning "You have requested an outdated version of PayPal" page

2010-03-16T10:25:00.003+13:00

So I was taking a rare and precious four-day weekend, when someone realised all their PayPal integrations were not working. Arriving at the Paypal site a customer would be greeted with the message "You have requested an outdated version of PayPal" (followed by a suggestion that it might due to using a bookmark).

A support request later it turns out that the error is due to the form being submitted with enctype="multipart/form-data" . A known issue that they're working on, but with no predicted date of resolution. However removing the enctype from the form does solve it.

It seems this happens often enough that I'm surprised this information was not available in the forums or the knowledge base.

Sorry, we don't need you any more

2010-02-23T15:24:00.001+13:00

This is the sort of thing that I normally put in my personal blog, but I just threw a tweet that might get followed back here so I'll x-post.

Stuff has the story of an Austrian working in the Marlborough vineyards. She has been in NZ 5 years on a work permit, in that time she has gained NZ horticultural qualifications, taken up a permanent position and had a baby daughter (for whom she is sole caregiver).

She obviously wants to work here, and in an industry which has suffered labour shortages over the last 5 years, making her the best kind of employee our economy could have.

Immigration has now refused to extend her work permit, meaning she will have to return to Austria and potentially leave her 16 month daughter behind here.

Immigration cites the fact that "New Zealanders are now available to do the work" as the recession drives more people who would rather be working elsewhere to apply for the available jobs. These people apparently "can be easily trained". A training investment which I see is going to evaporate as soon as those people get the opportunity to take themselves back to what they really want to do.

In fact if as Ms Dallarosa says:
"I do understand where Immigration is coming from, but the thing is a lot of people still get brought in from overseas to work in the vineyards who have no qualification to work in the vineyards, but I do."
... it's even worse.

To their credit and obviously recognising what a valuable employee they had, her employer Constellation New Zealand kept her position open as long as they could but eventually have had to replace her 'with a New Zealander'. Highlighting the fact that solving the issue is not as simple as someone else offering her a job.

"With a New Zealander". 5 years contributing to the economy and every wish to keep doing so, NZ qualifications in an industry frequently short of staff, a NZ-born daughter that she wants to raise here - how is this woman not a New Zealander in any way that matters?

Moreover, that's 5 years of investment NZ has in her skills that Immigration is perfectly happy to just throw away. No wonder our economy isn't going anywhere with that sort of attitude.

It begs the question, how many more valuable, skilled people are being given the boot just when we need them most, that we're never going to hear about because they don't have a convenient human-interest hook like a young daughter?

Or, if I'm being especially cynical, because they're not white?

Do you know what a login page looks like?

2010-02-13T14:16:00.004+13:00

After making my previous post I was pointed at another about the recent RWW/Facebook login mixup.

To summarise: a post on Read Write Web about Facebook became the #1 google result for "Facebook Login". This resulted in a lot of people using similar behaviour to that mentioned previously clicking through in an attempt to log in to their facebook accounts. Because commenting at RWW supports OpenID, there was a facebook logo you could click on to autheticate with your facebook details... (OpenID of course connects you to the authenticating site briefly to enter these).

Despite RWW adding a big bold disclaimer at the top of the post people kept doing this.

These weren't stupid people, they were just looking to login like they had done every time previously and faced with a different visual assumed it was some sort of redesign and scanned for something recognisable that would help with that task. Like a button with the facebook logo next to a form field.

The post linked above talks at length about about the implications of this.

If you are an interface designer, a brand manager or a security expert, your reaction to this incident should be one of deep humility. Your interface, your brand and your security scheme is much more fragile than you'd ever dared to fear. All of your work has come to naught.

These people represent the vast majority of internet users. It's a rare breed who actually 'Use the Internet' in terms of urls and pages links. Most people 'Log into Facebook' or 'Watch Youtube' or 'Order a Pizza'.

We can't feasibly make all these people 'more like us' (developers), nor should we try. We build websites that they can use, and they shape a future where 'the internet' means about the same as 'the pavement' and requires about as much thought when it's used.

Do you know what a (web) browser is?

2010-02-13T10:05:00.003+13:00

Believe it or not, most internet users don't. As this video (ignoring the fact that it is a stealth ad for Google Chrome) goes out to demonstrate.

You might be laughing about now, but as web designers and developers we need to be aware of the amount of knowledge we assume everyone has about the internet, and just how wrong those assumptions can be. The old "The internet is Google/Yahoo/AOL" meme is true - and people really do think that the 'Address Bar' is the search box on the homepage of their favourite search engine and the quickest way to any website is to enter the url there then click on the first result.

There are good arguments why people shouldn't need to know or care that the program they use to access the internet is called a 'Browser', or even that it's a 'program'. We need to remember we're building websites for the people who will be using them, not necessarily people like us.

How to explain this to the client who is commissioning the site (who sees it from another perspective again) is a topic I see often in my newsfeeds.

A 'back' button with php

2010-01-13T15:38:00.007+13:00

Problem:

Site design includes a 'Return' button which effectively lifts the visitor 1 level in the site structure.
As crosslinks are developed between different sections of the site the behaviour of the return button fails.
If hardcoded it lifts you one level in the current section rather than taking you back where you came from, or
if instituted dynamically (using HTTP_REFERER) if you try and use it to go back more than one step you get stuck in a loop between two pages.

A functional, session based solution

This solution consists of two functions. One to keep track of the last few pages, and one to generate the link.

The first is called is called once the page is committed to output (last thing before starting your <html> or <!doctype ... preferably. We don't want it included in pages which only perform a processing function then redirect.

function sethistory() { // make sure the container array exists // the paranoid will also check here that sessions are even being used if(!isset($_SESSION['history'])) { $_SESSION['history'] = array(); } // make an easier to use reference to the container $h =& $_SESSION['history']; // get the referring page and this page // we need to construct matching strings // put the referring page straight in the array $h[] = $from = $_SERVER['HTTP_REFERER']; $here = 'http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']; // find out how many elements we have $count = count($h); //don't waste memory - trim off old entries while($count>20) { array_shift($h); $count--; } // don't want to get stuck in a reference loop // this can be falsely triggered by pages that link to each other // but hopefully rarely and the button will still behave rationally // also catches use of the browser 'Back' button/key // remove last two items to rewind history state while($count > 1 && $h[$count-2] == $here) { array_pop($h); array_pop($h); $count -= 2; } // don't want to get stuck on one page either // for pages that process themselves or are returned to after process script // remove last item to rewind history state while($count > 0 && $h[$count-1] == $here) { array_pop($h); $count--; } // all done return; }

The second function is called to generate the button itself. It has one recommended and one optional argument.

$defaulturl is the url to use if there is no history present (in the sample problem this is the logical higher tier page for the section)
$override when true forces the function to use $defaulturl. This may be required when dealing with paged result sets, for example.

function returnlink($defaulturl='index.php', $override=false) { // initialise variables $c = 0; $url = ''; // check that the history container exists // if so check it has something in it and set $url if(isset($_SESSION['history'])) { $c = count($_SESSION['history']); $url = ($c > 0) ? $_SESSION['history'][$c-1] : ''; } // check for use $defaulturl conditions // $c may still be > 0 if the page was accessed directly // but $url will be blank if($override || $c == 0 || $url == '') { return '<a href="'.$defaulturl.'" class="return">Return</a<'; } else { return '<a href="'.$url.'" class="return">Return</a>'; } }

Chaining css classes on one element

2009-10-04T14:25:00.003+13:00

You can chain-reference classnames within the same class attribute by omitting the space between them (yes, even in IE6!). For example

<li class="current-page-item"><a class="first"> (.current-page-item .first)

is equivalent to

<li class="current-page-item first"><a> (.current-page-item.first) a

This can

save significantly on the amount of unique identifiers and classes needed in a page
is useful when you have multiple elements to style within eg your first or last item on a list
lets you specify common code in one style and minor changes in another

Example of the latter: a project I am currently working in has icons next to most headings h1, h2 etc. These are in a span classed as .icon .[function] . The styles break down to something like

<h1><span class="icon part">Sample heading</h1> <h2><span class="icon cog">Sample sub heading</h1> h1 { //basic h1 styles } h2 { //basic h2 styles } .icon { // span positioning and other common traits } .icon.parts { //background image (icon) for parts headings } .icon.cogs { //background image (icon) for cogs headings }

Tip recycled up from the comments on Styling first and last list items in Wordpress

Firefox fails to return false from onsubmit

2009-09-29T12:55:00.005+13:00

This is a problem I run into occasionally when doing form validation with javascript. It's usually the result of a non-existent field

typo
a name change which hasn't been carried through
a field which has been removed from the form

being called in the validation script - at which point it may terminate without returning either true or false, and FF will proceed to submit the form.

[Clarification: this is not a solution to the problem, which is treated by identifying which of the above has happened and fixing it. This just a simple example of validating with javascript]

For a simple form I use a script like this:

The function call (note that you actually have to return true or false from the onsubmit): <form [form attributes] onsubmit="return validateForm(this)"> <div id="message"></div> [form fields] </form> The function (usually included in a .js file somewhere): function validateForm(id) { message = ''; // example validation checks f = id.username; if(f.value=='') { message += 'Please enter a username <br /> f.className = f.classname + '_invalid'; } f = id.password.value; g = id.password_confirm.value; if(f.length < 8) { message += 'Please enter a longer password (at least 8 characters) <br />' f.className = f.classname + '_invalid'; } else if(f != g) { message += 'Passwords do not match <br />' f.className = f.classname + '_invalid'; g.className = g.classname + '_invalid'; } ... //if message has content output it and return false, otherwise proceed to return true if(message.length >0) { document.getElementById('message').innerHTML = message; return false; } return true; }

Of course if someone is browsing without javascript enabled this won't be triggered, so always validate the data you receive at the server as well.
Another of my pet irritations; people who name/id a field 'name' and the submit button 'submit'. It is very logical, but it often results in javascript screwiness

Useful usability pointers

2009-09-25T10:36:00.002+12:00

In my RSS this morning - a very useful summary from Smashing Magazine of 10 Useful Usability Findings and Guidelines

Regex to strip html entities

2009-09-16T10:14:00.006+12:00

This is a bit of a quick and dirty way to pull all html codes such as & and " out of a text string. There aren't a lot of use cases for it, I just needed to clean up some code for output that had been htmlentities()ed then stored. In this particular case losing the punctuation didn't matter.

$clean = preg_replace("/&.{0,}?;/",'',$source);

The ? after the repeater is required to make it 'lazy', otherwise the pattern will remove everything between the first '&' and the last ';' in the string instead of individual codes.

It could be improved by changing the repeater to match the {min,max} lengths of the html code set, which I wasn't bothered to look up.

The traditional economic model breaks for content on the internet

2009-09-10T10:24:00.005+12:00

The Brain Traffic Blog has a post by Melissa Rach on how the infinite replication of content allowed by the internet has broken the traditional economic model.

In brief, content makes the the World Wide Web and is of critical importance to any successful website but it also lacks the features which traditionally give products value, so how do you price it's creation?

Melissa promises to address that conundrum in the next instalment.

Embedding an RSS feed with javascript / AJAX

2009-08-25T09:23:00.004+12:00

A client wanted to pull somebody else's public news feed into their page ('like this other site'). I was able to determine that the other site used javascript for this, but the page used so much of it that trying to find the particular script was futile.

After a variety of fruitless searches for terms like 'javascript embed RSS' I started to use alternate terms for embed (import, fetch, poll) and got somewhere.

This tutorial at xml.com was a good start and provided the basic code for manipulating the xml supplied by the RSS feed. What it failed to point out was that for security reasons you can't generally make an XMLHttpRequest to another domain. (I found that it would return a 200 OK response, but no actual content).

More googling provided the way to use a php file as an intermediary, including local caching.

A little tinkering with the xml.com script to output the desired html and take the source of the feed from a variable declared in the page body (editable in the client's CMS), and done.

Bad colour correction in Firefox 3.5

2009-07-21T14:58:00.003+12:00

I upgraded to Firefox 3.5 this week and discovered that it's colour management does nasty things to my photo galleries making the photos appear artificially, harshly brightened.

I googled up this support ticket and a link from there to this developer article on ICC color correction in Firefox

I'm not quite hardware savvy enough to understand the underlying issues around local monitor colour profiles, but I can follow the instructions for turning colour correction off in Firefox.

For the non-technical: use this colour management add on

For the technical:

pull up about:config
locate the gfx.color_management.mode setting
set it to '0' to disable colour management

The issue isn't completely Firefox/local however, the original files uploaded to my photohost (SmugMug, but even Flickr had the same issue) are still fine when viewed. It's the automatically generated smaller versions which must either have or lack some information which triggers the correction.

Alternate word colours with css and javascript

2009-06-21T12:18:00.005+12:00

I had a request from a client with a Wordpress blog who was manually alternating word colours in their headings - was there a way they could do the same thing with the headings for the sidebar widgets?

My first thought was that something similar to the way I added first and last markers to WordPress list items might work, but reaching the template code block and finding

/* Widgetized sidebar, if you have the plugin installed. */ if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() )....

... I decided there might be a better way than tracking through functions.

The solution was a modification of the addBehaviour() javascript I use to add onclick events to links after the page loads.

Instead of targeting links we target the <h2 class="widgettitle"> tags
adding a classed span around every second word
the color of which is controlled from the style sheet.

//... function addColor() { var h2s = document.getElementsByTagName("h2"); for (var i = 0; i < h2s.length; i++) { if (h2s[i].getAttribute("class") == "widgettitle") { // get the content content = h2s[i].innerHTML; //make an array of words words = content.split(' '); j = 0; newcontent = ""; for(var w in words) { if(j==0) // every first word { newcontent = newcontent + words[w] + ' '; j=1; } else // wrap a span around every second word { newcontent = newcontent + '<span class="h2_alt_color">' + words[w] + '</span>'; j=0; } } // replace content h2s[i].innerHTML = newcontent; } } } // function added to onload event as usual (addLoadListener() not included here) addLoadListener(addColor);

This might not work as well if there was anything except plain text inside the <h2> tags, so may only serve as the basis for as a more general solution.

Use of a braille strip to navigate the web

2009-06-12T21:04:00.003+12:00

Video at DingoAccess, by Rodger Hudson of Web Usability.

Hat tip 456 Berera Street, and here's a youtube video demonstrating the use of a screen reader that I posted earlier in the year, via the same vector.

Council bringing fibre to Christchurch

2009-06-02T08:23:00.005+12:00

via my twitter search monitor...
http://www.nbr.co.nz/...

Much ado about broadband in the Garden City
Council-owned broadband company, Enable Networks, will spend another $36 million and will seek $500 million of government funding to deliver its fibre optic network to every city household.

And the Enable Networks website.

Working from home in website development my internet connection is like lifeblood to me. Fortunately my part of town in is the TelstraClear fibre network, and I've been connected with them pretty much as long as it's been in the ground.

Fibre-to-the-wall is the very big reason I don't bother looking for an alternative to TelstraClear in my area, but they don't actually provide the services I would like. I'd be really keen to see what alternatives pop up on the Enable network, especially in the realm of VOIP and streaming media.

Juicy Gmail Labs gadgets and their uses

2009-05-23T12:28:00.014+12:00

This morning I spent some time re-jigging the Labs settings in my Gmail account. The list to choose from keeps getting longer. To enable any of these go to your Gmail settings and look for the Labs tab

These are what I settled on as most important and practical:

Inbox Preview, Multiple Inboxes, Title Tweaks

The first of these provides a valuable glimpse at what is awaiting while the full Gmail interface is loading. If there is nothing new or urgent I can move on immediately.

The second is the best way of handling multiple email addresses from one gmail account. I set up filters to automatically archive ("Skip the inbox") messages from or to other accounts, and then a new inbox pane to group and display each account.

I'm still waiting for a way to append a descriptor to the subject line itself, to aid filtering in POP/IMAP mail retrieval.

The third just makes it easier for me to spot when new mail comes in on a taskbar full of tabs.

Forgotten Attachment Detector, Send and Archive, Undo Send

The first and last of these are "Oh ****, I didn't mean to send that yet!" detectors. They're not infallible, but they can save the time it takes to write an embarrassed followup email. The second is a timesaver for clearing the inbox.

Google Docs gadget, Google Calendar gadget

For quick access to these two services. I also have these on my iGoogle page (with of course the Gmail inbox gadget), but it saves switching tabs.

Navbar drag and drop, Right-side labels, Right-side chat

After adding Calendar and docs the left sidebar is getting a bit full, and you may well have to scroll down to get to where you want to go. These gadgets remedy that. It's worth noting that right-side labels and chat don't always respect the ordering set by drag and drop, and the ordering itself has to be done in the left sidebar so the gadgets have to be disabled temporarily if you want to do this.

I also use Custom Label Colors to help manage the labels pane, and Superstars in the mailboxes.

Offline

Although I practically live online, sometimes I only have my laptop and no wireless access. As long as I remember to sync before I go out this can let me write an email and have it ready to be sent.

~~~
The Mark as read button has been disabled in favour of keyboard shortcuts (General settings). I don't have a need for Canned Responses at the moment but I've heard good things about it, and I continue to use Signature tweaks to prevent my signature disappearing below the stream of previous messages. Search autocomplete has just been enabled for evaluation.

Fibre from the Farm

2009-05-14T09:49:00.007+12:00

There was an article titled "The New Divide" in the April 18th "Your Weekend" insert (not available online*) of the Christchurch Press. It took a look at one way broadband is getting out to New Zealand's largest industry and therefore the one where there is huge potential for productivity improvement - the farmers.

*I found an earlier article from the Manawatu Standard which touches on some of the points.

On Monday Close Up also covered the story and their version can now be viewed at TVNZ OnDemand - Farmers making their own way online. Chris Barton has also picked up the theme in his NZHerald column today.

In summary - rather than waiting for Telecom to get around to laying fibre optic cable to their 'low return' rural area farmers have:

dug in pipes across their properties to a cable laid by the local regional council in partnership with Inspire.net, a local ISP who supply the last bit of the installation for free
and are reaping the economic benefits.

As an IT worker with a rural background and family* ways of bringing the benefits of the Internet to the farm are of great interest. Some quotes from the Press article to illustrate the benefits:

... had to get online to pay her farm hands and GST. There were the milksolid reports to check, the tanker pick-up schedules to sort, the herd records to update. It's all electronic these days; all part of making New Zealand farming efficient.

... the internet has become a utility, as essential to daily life as your roads, your water, your electricity supply. His wife needed the web for her studies to be a midwife. The farm needed it for the bed and breakfast they ran as a sideline.

...The internet should be making life easier for those outside the city. There are now great services like Fatso, the DVD rental site, which will post your movies out to you. Not so great, however, if it takes forever to scroll through the selections - "To turn a page to look at what was available, you basically walked out of the room each time, it was that slow,"

*The same background is a big part of why building clean, low footprint, fast loading sites is so important to me.

I don't believe New Zealand as a country should be accepting this sort of connectivity gap. The Press article points out that a token (my word) 30th of the governments $1.5 billion broadband partnership fund has been set aside to address 'rural' areas. With those same rural areas providing the basis for 60% of our export earnings, even small improvements to their productivity nationwide could make a big difference to all of us. (Even just maybe in the grocery prices.)

It would be interesting to know where else around New Zealand these 'Fibre from the Farm' initiatives are taking place.

The Art of Nonconformity (blog), and Achieving Your Childhood Dreams (video)

2009-04-21T13:35:00.004+12:00

A few days ago I followed a link from one of the increasing number of RSS feeds that I follow to Chris Guillebeau's blog The Art of Nonconformity, specifically to his new free e-publication 279 Days to Overnight Success.

Reading it was enough to solidify some thoughts in my head, mostly about online communication and it's part in defining whatever it is I really want to do.

I was more taken with Chris's earlier piece, A Brief Guide to World Domination. I think everyone should download and read this, but even if you don't there is a video linked to in the Guide which deserves further mention, the last lecture given by one Professor Randy Pausch at Carnegie Mellon University after having being diagnosed with cancer and given a short time to live.

I don't watch as many major online presentations as I would like because they chew through my data cap. This one is 1hr 16minutes, but I took the plunge anyway and it was worth every minute. This video is the record of one really good communicator and educator distilling the his life into one last show for his friends, family and students. The virtual reality work showcased is a bonus :D

Here's the link. http://www.youtube.com/watch?v=ji5_MqicxSo . If you have the bandwidth, you have the time (maybe not immediately, but surely in the next few days).

In the related videos panel there is a lecture also done by Randy on time management. It's of similar length so I'm going to let the cap recover before I watch it, but I will watch it.

Thanks Chris. And thanks Randy.

Styling first and last list items (and Wordpress)

2009-04-19T15:00:00.009+12:00

Sometimes a design calls for the first and last items in a list to be styled differently for the others, for example a line or column of overlapping tabs.

For most modern browsers this is trivial and can be done using the list-class:first-child and list-class:last-child psuedoclasses. It's just that Internet Explorer doesn't support these very well.

If you are hardcoding the list or writing the generation routine it is also simple to generate 'first-item' and 'last-item' classes in the appropriate place.

<ul id="list-id"> <li class="ie-list-first list-type-item">Stuff</li> <li class="list-type-item">Stuff</li> <li class="list-type-item">Stuff</li> <li class="ie-list-last-last list-type-item">Stuff</li> </ul>

When templating for an existing CMS it may not be desirable to dig deeply enough to customise the code. For example WordPress's wp_list_pages() function (with appropriate parameters) returns something like this:

<li class="page_item page-item-4 current_page_item">Page link</li> <li class="page_item page-item-9">Page link</li> <li class="page_item page-item-13">Page link</li> <li class="page_item page-item-15">Page link</li> <li class="page_item page-item-34">Page link></li> <li class="page_item page-item-25">Page link</li>

I spent some time following the function trail before deciding it was better to add the classes after the string was generated. Fortunately if you set 'echo=0' wp_list_pages() will return the string to a variable. After that it's just a matter of string substitution - first and last incidence of class=" . (This might get a bit trickier if you're using nested lists, but I try and keep depth=1 if possible).

It turned out the easiest way to do this was with a preg_replace - but it still requires a little trickery because you can't tell preg_replace to start from the end of a string. Instead you have to reverse everything, do the replacement, and then reverse everything again.

//get li string $pages = wp_list_pages('title_li=&depth=1&echo=0' ); //add styling identifiers for first item $pages = preg_replace('/class="/','class="ie-list-first ', $pages, 1); //note space on end of replacement string //add styling identifiers for last item $reversedString = strrev($pages); $reversedSearch = '/'.strrev('class="').'/'; $endClass = strrev('class="ie-list-last '); //note space on end $pages = strrev(preg_replace($reversedSearch,$endClass, $reversedString, 1)); //output echo $pages;

I make sure the ie-list class is first because it makes it easier to call in your IE-specific stylesheet without worrying that another CMS generated class will get precedence.

Inserting the latest post into some other page in WordPress

2009-04-14T08:25:00.003+12:00

Over the weekend I started exploring WordPress to see if it would suit for a client.
Elements of the design were the main blog entries on a different 'page' to the homepage but the most recent post displayed below the blurb on the homepage.

WordPress supports the first option from the administration panel, but the second took a little work in the template. To get the desired effect I pulled together the advice from this bytesforall forum thread (thank you Google) to get the post, and the WordPress documentation on overriding the single page behaviour of the the_content() template tag.

The end result looked a bit like this - after the if(have_posts()) has completed:

<?php if ( is_front_page() ) : $my_query = new WP_Query('showposts=1'); while ($my_query->have_posts()) : $my_query->the_post(); ?> <div <?php post_class() ?> id="post-<?php the_ID(); ?>"> <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2> <small><?php the_time('F jS, Y') ?> </small> <div class="entry"> <?php // normally the  command is ignored on single pages - this forces it global $more; $more=0; the_content('Read the rest of this entry »'); ?> </div> <p class="postmetadata"><?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?> <?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?></p> </div> <?php endwhile; endif; ?>

This weekends experiment with WordPress has a few more posts lined up as well. I found it easy to install and template but rather slow to load.

My rule of thirds for 1024 site width

2009-03-31T09:08:00.006+13:00

The Rule of Thirds is an approximation used for applying the "Golden Ratio" to design, as explained in this excerpt from The Principles of Beautiful Web Design

Cameron Moll recommended using 960px as the width of your content for divisibility reasons. I go slightly higher to 972px giving the following whole numbers.

Split 972px -> 648px and 324px
Split 324px -> 216px and 108px
Split 108px -> 72px and 36px
Split 36px -> 24px and 12px
Split 12px -> 8px and 4px

In 2009 the question of "What can we safely design for" has become more complicated with the rise of both the smaller mobile browser and ever larger/higher resolution monitors. Larger monitors however have led to more windowed browsing and mobile browsers are best targeted with their own style sheets.

IETester - when you need another version of Internet Explorer

2009-03-26T13:44:00.003+13:00

Today I found out the hard way ("the site looks terrible in my browser!") that when I reinstalled Windows XP a little while ago it reverted to IE6.

Scrambling around to get a copy of Internet Explorer 7 working IETester was a lifesaver. IETester is a free tool which lets you run multiple versions of Internet Explorer in the same tabbed window.

I'd checked out this application previously and considered it worth leaving on my hard drive. Now with IE8 out there as well I expect I will be using it a lot more. After all, about 20% of people still seem to use IE6 as of the date of this post so that's three substantially different versions of Internet Explorer to test - having one on the laptop and one on the PC doesn't cut it any more.

Using responseXML - remember Content type text/xml

2009-03-18T12:18:00.004+13:00

Content sent in response to an ajax request may be "unstructured" (plain text) or structured (XML). To the eye there may be no difference (example: <ul><li>Item1</li><li>item2</li></ul> could legitimately be either) but browsers rely on the Content-type header to be sure, defaulting to text/html.

If you don't specify xml the object returned by the responseXML property of the response may be null. (Opera seems to cope, of the browsers I tested during debugging). To do this in a php script send header('Content-type: text/xml') before the actual content of the response.

Display blogger widgets only on particular page types

2009-03-06T10:25:00.006+13:00

It's helpful to be able to customise your widgets to particular page types, especially with limited sidebar space. For example there is really no need for my reading list/blogroll to be displayed against every individual article, or anywhere except the main page.

The blogger documentation describes a method using the pageType attribute for widgets, which I found out the hard way doesn't actually work. A quick search of the blogger help group revealed this is a well known and often encountered problem. Bad Blogger!

So I've used a method from The Blogger Guide using a conditional statement to only display that element on the 'index' page.

As I wanted to exclude the title as well as the content I learnt the following about placing the conditional (<b: if >) statement:

You can't wrap an entire widget in a conditional
the earliest a conditional can appear in the widget code is after the <b:includable > tag.

Happily Blogger fails to save the template and displays a helpful description of what is in the wrong place if you get either of these wrong.

The addBehaviour function

2009-03-04T12:39:00.003+13:00

One of the functions in my ongoing series on GET should always be safe I've called addBehavior. It's representative of the basic principle of progressive enhancement - add advanced functionality after the page loads, if the browser supports it.

Obviously if the browser doesn't support JavaScript the function just won't be called. I'll step through the rest quickly.

function addBehaviour() { var anchors = document.getElementsByTagName("a");

'anchors' is returned as an array containing references to every <a> element in the page - this includes links but also empty anchors used as link targets.

If you're thinking of reusing it outside this function remember that it will not include elements dynamically added later.

for (var i = 0; i < anchors.length; i++) { if (anchors[i].getAttribute("rel") == "delete")

For each <a> element in the page (anchors array), see if the "rel" attribute is "delete" (our flag for a link that needs the delete behaviour added). Another commonly used attribute is "class", which doubly serves to mark the element for styling.

It needn't be the case that only one flag is contained in the attribute, in which case the comparison needs to be a little more complicated and use the search() method.

{ attachEventListener(anchors[i], "click", confirmDelete, true); }

Use SitePoint's handy attachEventListener() function to add the equivalent of onclick="confirmDelete()" to each anchor. confirmDelete() is my function for checking with the user that they actually want to delete the item and if so populating and triggering the POST form.

I would typically add the code for attaching any other behaviour required of an <a> element at this stage of the function so as to reuse the anchors array efficiently. This may be better done in other parts of the code depending on the circumstance.

} }

Limit labels gadget on Blogger

2009-02-22T16:18:00.010+13:00

The labels widget (or gadget) for the Blogger sidebar has certain limitations. By default it shows all your labels, and there is no quick way of limiting this in the settings. Unless your blogging topic is very well defined it doesn't take very long before there is a long string of labels down the side of the page, many with relatively few posts. Wouldn't it be better if you could only display your most-used labels on your main page?

One easy alternative is to use the Links List gadget to manually enter links to the specific pages for your most common labels. This is the ideal solution if you want to highlight specific tags in your sidebar, but not so much if you still want them sorted and updated over time as you have to review and do this yourself.

Fortunately it is possible to hack the Labels widget, or any of the other gadgets in your template layout. Here is an article from the blogger knowledge base talking about the basics.

So, to limit your labels widget to only show the subset with more than some number of posts attached:
1. Go to the Edit tab of your blogger control panel and from there to Edit HTML
2. Check the box next to "Expand Widget Templates"
3. Scroll down down down until you find the code for the labels widget. It should look a bit like:

<b:widget id='Label1' locked='false' title='Labels' type='Label'> //(some bits we're not interested in right now) <ul> <b:loop values='data:labels' var='label'> <b:if cond='data:blog.url == data:label.url'> <span expr:dir='data:blog.languageDirection'> <data:label.name/> </span> <b:else/> <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'> <data:label.name/> </a> </b:if> <span dir='ltr'>(<data:label.count/>)</span> </ul> //(more bits we're not interested in right now)

All we actually have to do is add another if statement into the loop, like so:

<ul> <b:loop values='data:labels' var='label'> <b:if cond='data:label.count > 20'> <li> //(unchanged) </li> </b:if> </b:loop> </ul>

I've used 20 as an arbitrary number which can be changed to suit the label counts on your blog.

If you've recently started blogging, you may still feel that the displayed counts are discouragingly low (for yourself or for your visitors). While you're here you can suppress them until you have a more respectable total by deleting or (more safely, unless you're really sure you'll remember how to put it back) html-commenting out that line of code as I've done here:

It would be nice to still have a list of all your tags somewhere for visitors to look at. Unfortunately you can't put a gadget directly into a post and Blogger doesn't seem to have a page that does this by default, so I'm still investigating that.

Pass a prefilled array from an html form to a php script

2009-02-22T15:18:00.004+13:00

Situation: A client has a handful of products that they would like visitors to be able to order - not enough to be worth installing a shopping cart. They already use a CMS to manage their website.

Problem: A custom process script is required to process the order and possibly payment options, but we don't want to have to update the script every time the products page is updated.

Solution: Pass all the required information for each product to the processing script through a form using arrays. The client may only have to be taught how to assign names and ids to form fields in their CMS, and adhere to the naming conventions used in the script.

You can tell a php script that a POST element is part of an array of values by naming the element with square brackets i.e. "name[]". I often use this with check boxes or other situations where visitor can make several selections from a list, rather than having to give each element a unique name.

Vitally to this solution, you can make this an associative array by including the array keys in the element name i.e. "name[key]".

The form fields we will use are:

<input name="productName[basic]" id="productName[basic]" type="hidden" value="Basic Product" /> <input name="productPrice[basic]" id="productPrice[basic]" type="hidden" value="100" /> <select name="productQuantity[basic]" id="productQuantity[basic]"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <input name="productName[luxury]" id="productName[luxury]" type="hidden" value="Luxury product" /> <input name="productPrice[luxury]" id="productPrice[luxury]" type="hidden" value="1000" /> <select name="productQuantity[luxury]" id="productQuantity[luxury]"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select>

Note: The ids are not necessary but it's good practice to include them. Often in this scenario they are used with a javascript function to update the page with the total amount to be paid.

The php which receives and process this looks a bit like:

$productName = $_POST["productName"]; $productPrice = $_POST["productPrice"]; $productQuantity = $_POST["productQuantity"]; $subTotals = array(); $total = 0; $productString = ""; foreach($productName as $id => $prodTitle) { if(!isset($productPrice[$id]) || !isset($productQuantity[$id]) ) { //error handling here continue; } $total += $subTotals[$id] = $productPrice[$id]*$productQuantity[$id]; if($productQuantity[$id]>0) { $productString .= "\$ {$subTotals[$id]} : $prodTitle @ \${$productPrice[$id]} x {$productQuantity[$id]}\n"; } } if($productString == "") { //no products selected //error handling here } else { $productString .= "---\n\$ $total : Total"; echo nl2br($productString); //test // process order }

You can see it all in action on this sample page.

I also find this a useful middle ground between whitelisting the fields received by the script and leaving it completely open. The difference between:

foreach($_POST as $field =$gt; $value) { //so we can use values later in the script $$field = clean($value); //define a variable for each element in $_POST, very insecure } //later in script $string = "field1: $field1, field 2: $field2...";

and a series of defined blocks of the form

$customer = $_POST['customer']; foreach($customer as $field => $value) { $value = clean($value) //just in case $customerString = "$field: $value,"; }

is a not insignificantly lower risk of having a global setting messed with by a hostile script in the first instance, and variables pregrouped for processing in the second. In the opening scenario this is used to let the site owner determine and change what customer information is gathered as part of the order.

Blender: an equilateral triangle

2009-02-11T10:33:00.006+13:00

One of the first things that frustrated me about Blender was the inability to quickly add a regular polygon other than a square. For the faces of my 20-sided die (or icosahedron) equilateral triangles were needed. Here's the quick way of making an equilateral triangle that I eventually used. (I am assuming basic familiarity with creating, rotating and selecting parts of mesh objects.)

Add the basic cube to your scene.
Tab into edit mode then select any vertex and delete it. Rotate the cube so you can clearly see the three vertices which were adjacent.
Select these three vertices and press the F key to make a face between them. Voila, equilateral triangle!
Select and delete the remaining unwanted vertices. You can now grab, rotate and scale your triangle to wherever it needs to be.

Lock Blender's view to an object

2009-02-11T10:11:00.007+13:00

Blender is an open-source 3D design and rendering application which I recently started experimenting with. Graphic work isn't my strong point at the best of time and Blender does not necessarily use windows-standard conventions (which is fine) so there have been several hours of frustration and cursing involved along the steep learning curve.

On the way to producing something I was happy with for my first project I learnt many things the hard way some of which will make an appearance in this blog as future posts. On of the best things I discovered (late in the piece) was how to lock the view to a particular object which has the effect of seeming to rotate the object rather than the viewpoint. This can make achieving many perspectives much easier.

To do this pull up the View Properties window and then enter the name of the object to focus on in the field below the View Locking: heading. (The name of an object appears in the lower left of the 3D window when the object is selected).

Below is the not-quite-perfect-but-close-enough result of my first project, a logo for the Gameathon project.

Progessively sending to POST - GET should always be safe part I

2009-02-05T12:43:00.006+13:00

It's taken me almost a month to get to the follow up to my original post on GET should always be safe. This is because when I started delving into the best ways of dynamically adding events to html links I discovered how little I really knew about it.

Eventually this article on writing quality javascript from SitePoint taught me much of what was needed. I've copy-pasted several of their functions and won't be covering them directly. Everything I've used is in the source of this html file, with references.

To recap: we want a way of producing a lot of 'Delete' links on a page which will submit by POST rather than GET. We do not want to clutter our page with a separate form for every link, and the links still need to work if JavaScript is unavailable.

The basics that we need are:
1. A link that will work by itself. We can use GET for this, as long as the resulting page is a request for confirmation and not a delete process.

<a href="http://www.mysite.com/delete.php?id=123" rel="delete" > Delete </a>

Note the rel attribute, which is what we use to target links of this type for adding behaviours.

2. A POST form which will send one record id directly off to the deletion script.

<form action="delete.php" method="post" enctype="multipart/form-data" name="delForm" id="delForm"> <input type="hidden" name="delId" id="delId" value=""> </form>

The form consists of only one hidden field, so generally will not be visible on the page at all. The value is by default empty, to avoid any unfortunate accidents. Both the form and the field have ids that we can use to reference them later.
The alert will note that it goes to the same page as the link. This is because I intend to have that page react based on what sort of request it receives.
3. Some Javascript to extract the record id from the link, populate the form field and submit the form.

function confirmDelete(event){ //what are we doing? if (typeof event == "undefined") { event = window.event; } //what are we doing it to var target = getEventTarget(event); // SitePoint function while(target.nodeName.toLowerCase() != "a") { target = target.parentNode; } /* if your script passes multiple variables in the query string this may need to be more complicated.*/ // extract the record id var del_id = target.getAttribute("href"); var cut = del_id.lastIndexOf("=")+1; del_id = del_id.substr(cut); if(confirm('Delete record '+del_id+'?')) { // fill out and submit form stopDefaultAction(event); // SitePoint function document.getElementById('delId').value = del_id; document.getElementById('delForm').submit(); return false; } else { // abort stopDefaultAction(event); // SitePoint function return false; } }

I'll break this script down further in a later post. Getting this bit to work was what really tripped me up - I needed to learn about the method contained in stopDefaultAction().

4. Some JavaScript to add confirmDelete() to the link's onclick event.
To do this I used SitePoint's addLoadListener() function to call a function I've called addBehaviour() for convenience

function addBehaviour() { var anchors = document.getElementsByTagName("a"); for (var i = 0; i < anchors.length; i++) { if (anchors[i].getAttribute("rel") == "delete") { attachEventListener(anchors[i], "click", confirmDelete, true); } /* add actions for other 'rel's in consecutive if statements. For instances with multiple identifiers in a given rel use search() or some other partial match technique in the if statement */ } }

I'll quickly go over this function in a later post as well.

Use of screen readers demonstrated on Youtube

2009-01-27T15:18:00.007+13:00

Today's post starts with this video on the Importance of HTML Headings for Accessibility which I saw today via 456 Berea Street.

If you browse the "Related items" of this video you'll see and more importantly hear quite a number of examples of screen reader use, demonstrating sites done both well and poorly.

Many people when they design a website don't think about how it will look in anything other than a standard desktop web browser. With the proliferation of small screen browsing devices (mobile phones, Blackberries, the iPhone) over the past couple of years differing visual options are starting to be give more weight, but non-visual browsers and those who use them are still neglected.

It's a fortunate thing that search engines are non-visual browsers, because structuring a page such that a search engine can easily understand it by clearly marking up headings, using relevant link text and suitable descriptive alt text for images will also go a long way towards making the site easier to use for those who have to rely on listening to it (or feeling it for those who use Braille interfaces).

I've been building pages with this in mind for some time, but as a fully sighted user I still have trouble ... visualising isn't really the right word ... how a page is going to turn out. That is one of the things that makes videos like this such a valuable resource.

Firefox settings to allow invalid certificates

2009-01-26T16:22:00.003+13:00

Firefox 3.1 has become very tough on 'secure' sites using invalid or self-referencing security certificates. Joe User just isn't going to be allowed in. There are nice posts about the issues from a developer here and here

This is a bit tough on developers, because domain management systems like PLESK which we deal with a lot typically put their administration panel behind a self-authorising certificate. Fortunately there is a way, or Firefox would be losing some popularity with the development community. Still, you need to know what you are doing. It took me some googling and some experimentation.

Please don't try this unless you are comfortable with all the implications of messing around 'under the hood' of Firefox, and also know when it is and isn't safe (or how to find out) to accept a risky security certificate.

Googling eventually led me to this article from the mozillazine knowledge base about the setting browser.xul.error_pages.expert_bad_cert, which I set to 'true'. (type about:config in your Firefox address bar, then type xul into the filter to find it. Select 'toggle' from the context (right-click) menu to change it). By itself this did nothing, until I also set the nearby browser.xul.error_pages.enabled to 'true'. Further experimentation proved that the latter was the important one.

Once this is done instead of just displaying an alert when it finds an invalid security certificate Firefox will display a page from which you can

examine the certificate and
proceed to list it as an exception if you know it to be safe.

Handy Chrome hint

2009-01-24T11:42:00.003+13:00

From an interview in the NZ Herald with a Google Chrome developer.

Personally I find Incognito is particularly useful for multiple Gmail profiles. I have a business and personal Gmail account, and can be signed into both simultaneously by logging into one in an Incognito window because the cookie stores are independent.
(Ben Goodger)

Given that I typically have multiple browsers open at any given time for this reason (for more than just gmail), with the corresponding hit on system resources and performance, Chrome may have just become a lot more useful.

Limited slightly by the fact that the cookies for automatic login ("remember me") to web apps in your incognito window won't be saved between sessions.

GET should always be safe, and developments

2009-01-12T17:16:00.003+13:00

I was watching the video of a presentation about REST at the December nzphpug meetup, where the point was made repeatedly that the GET aspect of the http protocol should always be 'safe' - ie not alter the resource or record it is looking at.

Now as a PHP programmer I often break that rule, as a GET string is a quick and easy way of passing instructions and variables to a processing script.
Example GET string - everything after the '?'
http://www.mysite.com/do-something.php?id=123&action=delete

The dangers of this approach are pretty evident

the ease with which someone can try and submit an invalid variable to break the processing script,
what happens if a spider crawls a page with a whole list of these ... say bye bye to all the records if it's a delete link

It's the second I want to take a closer look at, and put some time into developing a safe(er) alternative than doing ones darndest to make sure a spider never gets near.

The immediate solution is to take the user to a confirmation page which will then submit the action using POST rather than GET, especially for irreversible actions. This is an extra page load and I usually prefer to implement confirmation functionality with an onclick event on the link itself.

Example link with confirmation javascript

 <a href="http://www.mysite.com/do-something.php?id=123&action=delete" onclick="if(confirm('Are you sure you want to do that?')){return true;}else{return falsel}" > Delete </a>

Of course this confirmation will still not be triggered by spiders or people without JavaScript, another reason to look for an alternative.

The REST style solution involves rewriting requests at the server. I actually want a script-based solution.

My proposed solution includes:

keeping the link for those without javascript,
using javascript to enhance the link with confirmation functionality and to fill/submit a POSTing form with the required variables
have the processing script react based on what is received - if GET then display a confirmation form which will POST back to itself, if POST then go ahead with the script

In my next post on the subject I'll look at creating and progressivly enhancing the link.

Todoist.com - simple yet powerful

2008-12-02T21:01:00.003+13:00

I live by to do lists, and have been evaluating several online services for managing my daily projects. Of the many out there todoist is currently my favourite. Winning features for me are:

easily creating items and sub-tasks
using entries without checkboxes as project containers or notes on an item
excellent due-date management
fully featured google widget for my iGoogle page

Their intuitive implementation of labels/contexts/tags will prove advantageous in the future as well.

It's well worth reading through the documentation/watching a couple of screencasts to pick up a few tricks - like quick indenting with Ctrl+arrows, or creating a new line within an item with Ctrl+n.

css nesting inflation

2008-11-30T18:17:00.001+13:00

Creating web pages can lead to something of a conflict between the desire for absolute control of the elements of design, and the need for websites to

display cleanly in a variety of browsers with different default settings
be modified by the user settings which disable images/scripting or change fonts.

Font sizing in particular typifies this conflict. Sure you can absolutely size your font, but some browsers (IE, I'm looking at you) then won't correctly scale up the font if the user zooms in, making life difficult for vision impaired users.

The article How to Size Text in CSS at A List Apart addresses this nicely. Unfortunately I last read it quite some time ago and when I went to apply it recently misremembered vital pieces - notably I set a base font size in body and styled all the elements in ems from there. Relatively long winded but fine as long as your code is semantically clean (even seemed to scale properly in IE, which requires further examination).

Problems arise when nested tables or lists and similar elements (<table><h*>, <table><p>, ...) are introduced, as elements styled in em inherit the base size rom their parent, not the body. So a 1.2em paragraph font in a 1.2em table displays at 1.44em (or starting from a base of 10px, a paragraph should display at 12px as will unformatted text in a table, but a paragraph in a table will become 14px).

You can counter this with additional style rules to counter the likely combinations of nested elements, but that gets time consuming and you'll always miss one...

Next time I'll reread the article first. It's also good to be reminded that most common browsers absent other instruction will display text at 16px, rather than the 12px that seems to be the most common size actually used, at least in the websites I regularly work with.

A bit of progressive javascript

2008-11-24T12:49:00.005+13:00

webknight.co.nz has just been (mostly) rebuilt and while still working on what exactly to do with the front page I've put up a slideshow of some cartoons that were hanging around on my hard drive. They came via email years ago, so I'm not sure who to attribute them to.

The slideshow uses a script from from DZone snippets, chosen because I was already using the scriptaculous libraries elsewhere on the site, and extended slightly for progressive enhancement.

The original:


<!-- Include scriptaculous libraries in head as usual -->
<div id="slide_wrapper">
<div id="slideshow1" class="slide"><div>frame 1</div></div>
<div id="slideshow2" class="slide" style="display: none"><div>frame 2</div></div>
<div id="slideshow3" class="slide" style="display: none"><div>frame 3</div></div>
<div id="slideshow4" class="slide" style="display: none"><div>frame 4</div></div>
 </div>

<script type="text/javascript">
function start_slideshow(start_frame, end_frame, delay) {
    setTimeout(switch_slides(start_frame,start_frame,end_frame, delay), delay);
}
                              
function switch_slides(frame, start_frame, end_frame, delay) {
    return (function() {
        Effect.Fade('slideshow' + frame);
        if (frame == end_frame) { frame = start_frame; } else { frame = frame + 1; }
        setTimeout("Effect.Appear('slideshow" + frame + "');", 850);
        setTimeout(switch_slides(frame, start_frame, end_frame, delay), delay + 850);
    })
}
start_slideshow(1, 4, 2000);
</script>

All that was required was to:

take out the "display:none" styles so that initially all the images would appear on the page.
add a little bit more javascript to hide them again before starting the slideshow.


</script>
var toHide = new Array('slideshow2','slideshow3','slideshow4','slideshow5');
for(i=0;i<toHide.length;i++)
{
document.getElementById(toHide[i]).style.display = 'none';
document.getElementById(toHide[i]).style.position = 'absolute';
}
</script>

Ordering your cross-references

2008-11-11T10:32:00.004+13:00

If you have
table_1 | item_id, etc etc
table_2 | type_id, display_text, etc etc
and a one-to-many cross-reference table
table_x | item_id, type_id

Something like


select t2.* from table_x as tx left join table_2 as t2 on t2.type_id = tx.type_id where  tx.item_id = 'item_id'

will output the records in the order they were entered in table_x, which may not be the same for each item_id. If you want to produce say a consistently ordered set of options from table_2 for a select menu relating to your item from table_1 don't forget your 'order by' clause, even if you need an additional column to perform ranking in table_2.

From a user interface perspective the importance of consistently ordering your lists should be immediately obvious.

Getting the hang of javascript: void(0)

2008-10-31T14:44:00.002+13:00

I know you can put javascript in the href attribute or even directly into the address bar to manipluate page elements, but I've never managed to get it working consistently, always falling back to a "#" and and onclick event.

Thanks to tizag.com's tutorial I finally understand the need to return a null value, and using void(0) to do so. I'm still having issues, but there are fewer of them.

And I'm wondering which is better for accessibility (in javascript enabled browsers) - onclick or href?. Correctly one should probably put the javascript in the onclick, returning false so the link is not followed, and if feasible and appropriate a link which will reload the page with the effect reproduced in the href for those with javascript disabled.

ctype_digit does not automatically parse as string

2008-10-30T21:35:00.004+13:00

I use ctype_digit to check if an id number passed from a session, cookie or form is indeed an id number which could be generated by a sql auto-increment.

(is_numeric() allows all sorts, is_int() allows signs)

PHP is usually pretty good at inferring whether a variable should be treated as a string or as an integer from context. But I recently encountered a wrinkle.

[valid mysql insert query]

$id = mysql_insert_id(); //get the id of the record we just inserted
if(ctype_digit($id))
{ 
  echo "TRUE";
}
else
{
 echo "FALSE";
}

Will output:
FALSE
This must be because mysql_insert_id returns a number and a non-string type (I haven't checked which) because casting $id as a string solves the problem. I usually do this in the function, to be sure.

function is_numeric_id($id)
{
 
 if(cdata_digit( (string)$id )
 {
  return $id;  
 }
 else
 {
  return false;
 }
 // note that '0', also an invalid id, will pass this test but can be treated as false when evaluating the result of the function 
}

2008-10-27T16:33:00.004+13:00

In a post on progressive enhancement with CSS at A List Apart Aaron Gustafson mentions using generated content to add the colon often found between a form field and it's label (in both semantic and markup contexts).

When coding this, you may be tempted to put those colons (:) inside the label element. Why? Do they add anything to the labels? No. While they do serve a purpose, to provide additional visual cues to a user, they are superfluous to the label and should be left out.
...
Generated content is a perfectly appropriate way to add them back into the document:

label:after { content: ":"; }

Approaching the form in this way gives us the flexibility to remove those decorations from our entire site by simply editing the CSS, rather than having to touch each and every form.

I realised a few days later while thinking about this article and the implications of generated content for content/presentation separation, that a common pitfall in working with text is assuming that punctuation is content - where in many cases (like this, and the use of quote marks would be another) it is actually presentation.

Certainly it's an assumption I'd never recognised let alone questioned before.

~~~

Aside - I tend to wrap my labels around the fields if at all possible to implicitly link them as well as explicitly using the "for" attribute, but the method could equally well be applied to a <span>.

Javascript status updater

2008-09-26T18:11:00.005+12:00

This is just a little function for updating the innerHTML of a <div> to provide feedback on a script. I find it more convenient than relying on (and constantly clicking on) alerts.

By the by, don't hit 'Enter' to get rid of an alert message while a form field with an onkeyup (or similar) event has the focus. It'll register and fire the event.


<script language="javascript" type="text/javascript">
function updateStatusBox(elemID,newHTML,append)
{
// append is true/false
d = document.getElementById(elemID);
if(append){
d.innerHTML = d.innerHTML + newHTML + '<br />';
} else {
d.innerHTML = newHTML;
}
return;
}
</script>

An example use is updateStatusBox('output',stringToCheck,true);

I've recently been using it to look at output and status codes returned from external AJAX calls.

Form layout with CSS

2008-09-13T14:59:00.007+12:00

I also call this "faux-tables" - basically it's a way of replicating a column layout using horizontal elements without resorting to a table. I developed it for dealing with simple forms which needed text right-aligned and inputs left-aligned to a central position, while still containing the inputs within their respective labels;

CSS:

label{ display: block; clear: left; max-width:98%; /* for IE display glitch */ } span.label_text { display:block; float:left; clear:left; width: 25%; text-align:right } span.input { display: block; float:left; } .clear { display:block; height: 1px; clear: both; }

HTML:

<form> <label for="text_field"> <span class="label_text">Text Field:</span> <span class="input"><input name="text_field" id="text_field" type="text"></span> </label> <label for="text_area"> <span class="label_text">Text Area:</span> <span class="input"><textarea name="text_area" id="text_area" cols="20" rows="4"></textarea></span> </label> <label for="checkL"> <span class="label_text">Check text left:</span> <span class="input"><input name="checkL" id="checkL" type="checkbox" value="L"></span> </label> <label for="checkR"> <span class="label_text"> </span> <span class="input"><input name="checkR" id="checkR" type="checkbox" value="R"> Check text right</span> </label> <label for="radioL"> <span class="label_text">Radio text left:</span> <span class="input"></span> </label> <label for="radioR"> <span class="label_text"></span> <span class="input"><input name="radio" id="radioR" type="radio" value="R"> Radio text right</span> </label> </form>

A correction to the previous post

2008-08-26T19:33:00.002+12:00

And only a month to get around to doing so.

In between originally developing a solution for this problem and redeveloping it for posting I upgraded to Firefox 3. I should have listened to the little voice which said "that's not how you did it last time"...

The previous code doesn't work in FF2. This code works in both.

<body> <div id="wrapper"> <ul> <li><a href="">Item 1</a></li> <li><a href="">2nd Item</a></li> <li><a href="">Item three</a></li> </ul> </div> </body>

The css:

body { text-align:center; /*start centering for IE */ } #wrapper { display: table; } ul { display:table-row; position:relative; /*catch floated <li>s */ margin:0px auto; padding:0px; border: 1px solid #ff00ff; /*positioning outline */ list-style-type: none; /* get rid of the bullet */ } li { display: table-cell; width:150px; /* fixed width cell */ padding:2px; margin: 2px; border: 1px solid #0000FF; } * html li { display: inline; } /* IE 6 */ *+html li { display: inline; } /* IE 7 */ /* make links take up entire cell - style for button effects */ li a:link, li a:visited { display:inline-block; width: 150px; }

Centered horizontal list navigation - in IE!

2008-06-28T09:57:00.005+12:00

I like to use lists for my navigation - it's tidy and for vertical navigation menus requires a minimum of styling.

For horizontal navigation menus it's a bit trickier.

the simplest method is to set display: inline on the <li>s - this gives a horizontal flow where the "cells" size themselves to the menu entry.
if you need fixed-width cells you can try display:inline-block (IE doesn't like this) or display:block; float:left (better) in conjunction with your fixed width.
Oh, the menu needs to be centered and expand on both sides with each additional item? Ummm...

The bugbear as usual is Internet Explorer. IE (7 or earlier, who knows about 8?) will determinedly expand all containers as wide as possible and then shunt your floating <li>s to the left (or right, if that's where you were going). Other browsers will shrink them to fit the content and center the result to obey a margin: 0px auto style rule.
After several tries I have come up with a solution that works for me.
The html:

<body> <ul> <li><a href="">Item 1</a></li> <li><a href="">2nd Item</a></li> <li><a href="">Item three</a></li> </ul> </body>

The css:

body { text-align:center; /*start centering for IE */ } ul { position:relative; /*catch floated <li>s */ margin:0px auto; padding:0px; border: 1px solid #ff00ff; /*positioning outline */ list-style-type: none; /* get rid of the bullet */ } li { display: inline-block; width:150px; /* fixed width cell */ padding:2px; margin: 2px; border: 1px solid #0000FF; } * html li { display: inline; } /* IE 6 */ *+html li { display: inline; } /* IE 7 */ /* make links take up entire cell - style for button effects */ li a:link, li a:visited { display:inline-block; width: 150px; }

Sure IE doesn't apply width to that inline <li> - but it accepts the width on the following <a>.

$_SESSION didn't save my array

2008-06-24T12:49:00.003+12:00

Problem: I'm using an array in $_SESSION to store the order of items in a randomly generated list, but the array is not being retained between page refreshes.

Solution: an obscure bit of php documentation notes that the keys in $_SESSION must follow the naming rules of regular variables, ie. start with a letter or underscore. I was using a numeric identifier.

Manual page (Session examples)
A couple of related bug reports

What took me so long to recognise and track the issue down for myself is that the array remained set and functioning for the remainder of the page rather than failing outright. It just wasn't there next time, lost in the ether.

Incidentally the reason for storing the list is so that if a visitor returns to the page (in the same session) to look for something it will still display as/where they remembered it, and so that if the list spans multiple pages items don't get missed/repeated. This is a usability issue on several levels, but that's not the focus of this post :)

Redirection to www. by .htaccess - generalised solution

2008-05-20T21:53:00.002+12:00

Most people who know how the rudiments of htaccess are familiar with the specific solution to this problem for one domain. Today I was looking for a domain-independent solution so as to be able to reuse one htaccess file over several sites without customising it for each domain.

There are several reasons why you might want to redirect all visitors to http://yourdomain to http://www.yourdomain or vice versa. The two biggies are:

avoid being penalised by the search engines for duplicate content
conversion by no-www.org *

Google failed to supply anything which wasn't a site-specific solution, so I stretched my limited knowledge of htaccess and eventually developed a rule that worked.

# mod_rewrite in use
Options +FollowSymlinks
RewriteEngine On

RewriteCond %{HTTP_HOST} !^www\..*$ [NC]
RewriteRule ^(.*)$ http://www.%{HTTP_HOST}/$1 [R=301,L]

Translation - if http_host doesn't begin with www., put it there. Reversing this to remove www. might not be such a simple matter, but fortunately that is a problem for another day.

*I fall in favour of using www., as elucidated by Harvey Kane at ragepank

Giveaway of the Day

2008-05-19T18:49:00.005+12:00

GAotD (for short) is a site offering the next step in the shareware/trialware cycle. Each day you may download and install a fully functional version of a program for evaluation/non-commercial use. These installations don't expire but must be activated within the 24 hour period, using GAoTD's installer.

Most of the applications are easily affordable should you wish to purchase them for commercial use or after that eventual system reinstall/new computer, usually in the range US$20-$50. There is an active testing and commenting community so it is possible to form a good opinion on how useful any given offering will be before trying it yourself.

I will periodically review (pimp) programs I find particlarly useful, and I've also included their widget in my sidebar (pending a more detailed page I'm working on).

http://www.giveawayoftheday.com/

Don't rely on php to recognise number_format()ed strings as thier original number

2008-04-30T15:26:00.003+12:00

Seems like a good idea, store a frequently output number in it's formatted form and rely on php's string conversion to recognise it if you need to use it for simple calculations - adding it to another number for example.

This works fine, until you reach the 1k mark and discover that php recognises the string 1,000 as ... you realised it, and I should have before having to do a bunch of recoding ... 1.

php ignores leading zero when comparing strings which evaluate to numbers

2008-04-25T09:51:00.006+12:00

It's probably just a trap for newcomers, but because php evaluates strings as numbers in a numeric context if you have two strings which both evaluate to the same number you can get issues like this:

$code1 = "001";
$code2 = "0001";

if($code1 == $code2){ return true; }else{ return false; } // returns true
if("$code1" == "$code2"){ return true; }else{ return false; } // returns true
if(strval($code1) == strval($code2)){ return true; }else{ return false; } // returns true
if($code1 != $code2){ return false; }else{ return true; }// returns true

This can cause issues if you are, say, wanting to change database entries or filenames based on whether an alphanumeric id code has been changed.

The simplest solution is to use a more absolute comparison operator, a more complicated one (if you're still paranoid) is to also check the string lengths.

if($code1 === $code2){ return true; }else{ return false; } // returns false
if($code1 !== $code2){ return false; }else{ return true; } // returns false
if($code1 != $code2 || ($code1 == $code2 && strlen($code1) != strlen($code2) ) ){return false;}else{return true;} //returns false

Possibly related, buried in the comments on the php.net string page is an account of a similar problem detecting very small differences between very large integers with the == and != operators.

Staying put with backspace - disable accidental 'go backs' from your form pages

2008-04-18T21:31:00.003+12:00

Recently I was asked to find a way of stopping users "going back" a page accidentally by hitting the Backspace key while filling in a form, but not of course preventing it's use in text elements.

I did a bit of research and fiddling on my own with unsatisfactory results before a google search turned up a working script at http://mspeight.blogspot.com/ which throws up a javascript confirmation dialog.

By working, I mean in Internet Explorer and Firefox. Unfortunately Opera doesn't seem to pick up on it.

This script also prevents the user accidently submitting the form by hitting "Enter" when the focus is anywhere except on the "Submit" button. This extra actually frustrated our users and is easy enough to strip out by dropping the references to keycode 13.

Thanks Murray :)

First Post

2007-06-16T17:59:00.000+12:00

This blog may develop into something else, but right now it is just for me to maintain notes on interesting stuff.