Archive for the ‘Web development’ Category


Change browser bookmarks toolbar to icons only

May 7, 2020

If you’re lucky, you learn something new every day, and today I learned that you can change your browser’s bookmarks toolbar to display just the icons, thus saving space on that toolbar for all the icons that have slipped off the edge because you have too many! Now, you may not want to change them all, but just changing those whose icons you’re really familiar with will free up extra space.

Full instructions for each browser are here:

In essence, you right click on the icon, select Edit or Properties or similar, then delete the name and save. That’s it.

If you still need the name because the icon they use is generic [I’m looking at you, Macquarie Dictionary!], then you can always use an abbreviated name—e.g. I use ‘MD’ for Macquarie Dictionary.



All about hex

August 12, 2017

My friend Dave Gash has written a GREAT article on understanding hex colors – long, but worth it!:

[Link last checked August 2017]


What year is it?

February 3, 2016

I spotted this notice on a website I visited today (Feb 2016). I guess it takes some organizations a long time to adapt to change… (BTW, Microsoft announced end-of-life support for IE 10 in January 2016 [])



Firefox: Can’t open PDF in Acrobat

September 16, 2014

Firefox allows you to set options for how you’d like to deal with a linked file (Tools > Options > Applications). I thought I had them all set properly to open a PDF with Adobe Acrobat:


But PDF links clicked in Firefox would still try to save and NOT open in Acrobat as I wanted!

So after many months of being frustrated by this behavior and setting and resetting those options (for some reason, they reset themselves every so often — I’m not sure if it’s related to the regular Firefox updates or something else), I went looking for an answer. After viewing a lot of websites, I found another setting on that screen that is the critical one — you have to scroll down and there’s Portable Document Format!:



Once I set this to use Acrobat, everything worked fine.

What I want to know is how is ‘Adobe Acrobat Document’ in this list different to ‘Portable Document Format’ and why is PDF under P and not under A as all the other Adobe options are?



Super easy zebra-striped tables using CSS selectors

October 16, 2013

I read about this trick in an article in the October 2013 issue of Australian Personal Computer (‘Powerful styling with CSS selectors’ by John Allsopp, p98-100) and thought I’d give it a try.

Wow! Super simple! Much better and cleaner than using JavaScript or coding each table row with an odd/even class.

The result

Here’s the result (ignore the ugly colors — they were just for testing the code):

zebra_tables01 The CSS

Here’s the code in my test CSS file that created the differently colored rows for odd and even rows (yes, I comment my code, especially where I can’t figure out what a color is by the hex value):


How simple and elegant is that! Basically just two lines of CSS and you’re done. Of course, substitute your own colors.

One caveat: If you have a TH row at the top of the table, it gets ‘counted’ as Row 1 (an odd row), so the color striping is ‘out’ by one.


And here’s the bare bones HTML code I used for my test file:


Thanks for the article, John!

(John’s article has more on how this all works, and how to assign different column colors using math in the CSS, but for this post I just wanted to share the simplicity of the doing ‘zebra’ striped tables with CSS.)


Mixed error messages

October 11, 2013

Why is it that here we are in 2013 and STILL website error messages are confusing and often contradictory?

I needed to create an account with one of the Australian federal government agencies (yes, ASIC, I’m talking about you!). Easy enough — just my name, email address, phone number, and a password. Not so…

I entered an 8-character password (with numbers and letters), then got this (click the image to see it all [aside: spot the spelling error]):


Hmmm… I tried again, this time adding two numbers to the end of my existing (so now it was a 10-character password with six lower case letters followed by 4 numbers). As far as I could understand that error message, my password met the requirements.

So I clicked Submit again, and this time I got this:


The problem with this second error message was that there was NO ‘entry above’ — it was totally meaningless.

I tried a couple more combinations, still using 10 characters, but converting some lower case letters to upper case ones. Still the site wouldn’t accept my password and I kept getting this second message. I must have tried about five different combinations and was ready to give up… But I’m nothing if not persistent when it comes to technology and especially bad user experience on websites ;-) (It’s all fodder for blog posts like this!)

My final foray before giving up and walking away in frustration was to hover over the question mark next to the password field. I got this tip:


Note that the wording is different to that displayed in the first error message. This time it says that my password MUST contain AT LEAST three lower and upper case letters and three numbers, though it wasn’t clear about whether special characters were required. The first message said OR implying any combination, whereas this one says AND.

I tried more variations on my 10-characters, but still couldn’t get in. Then I had a brainwave — maybe I should try only nine characters and make sure that I had three lower case letters, followed by three upper case letters, followed by three numbers. And guess what? That worked!

So it looks like this password check was quite specific, but the error message and tooltips didn’t tell the whole story. ‘Minimum nine characters’ actually meant ONLY nine characters, and ‘contain at least three’ meant three in ORDER.

No wonder people walk away when online registration forms like this are so hard to use!

(One final thing… the requirement to NOT use two or more consecutive letters from your username [which must be your email address on this form], first, or last name seems particularly onerous. And the requirement in the first error message to not use one of your previous EIGHT passwords seems particularly onerous too. Not that that was relevant to me — I had enough trouble entering my first password ;-) )


Firefox Sync Manage Account not visible

September 11, 2013

Ages ago I set up Firefox to sync bookmarks etc. between my main PC and my laptop. It all worked fine. But now I wanted to set up my PC to sync with Firefox on my Android tablet too. I went around in infinite loops trying to get it to work! The PC kept asking me for my recovery key, but every time I followed the Mozilla instructions on how to find it, I came up against a brick wall — there was no ‘Manage Account’ option on my Sync panel under Firefox > Options > Options, and I couldn’t find anything similar on my Android tablet either.

I was ready to give up, but I’m a persistent sod. One of the Google searches I did mentioned something about making sure you are using the same version of Firefox on all your devices. It was time to fire up the laptop, which I haven’t used for a few months. I updated from Firefox v19 to v23 on the laptop, and just for fun, I decided to see if I could see the ‘Manage Account’ button on the laptop’s Firefox installation. And there it was!!!! (I don’t think its appearance had ANYTHING to do with updating Firefox.)

I *think* that I must have set up the sync the first time on that laptop, and therefore the recovery key was accessible from the laptop and not the PC. I saved it to a location on my server, and now will attempt the sync operation with my tablet…

I got a little further with the sync this time — after entering the recovery key on the PC, it said setup was complete, and the Sync panel in the Firefox Options window now shows the ‘Manage Account’ button on my PC too.

However, my tablet is still reporting ‘Waiting for other device…’ I’ll give it another 30 minutes or so as I have an extensive list of bookmarks, etc. About 5 minutes later: The message on the tablet has now changed to ‘Setup complete’ and it tells me that my data is being downloaded in the background.

So it looks like it worked. It was just a matter of going to the correct device to get that recovery key — in this case, my laptop. The process ended being very quick, but I had a lot of frustration trying to figure out what was going on and was going to give up.



Mental model disconnection

May 10, 2013

I was looking up a website for a local bathroom renovation company. This image was on all their web pages:


A cooktop and range hood just don’t fit my mental model of a bathroom, so I checked their entire website to see if they did kitchen renovations as well, and found NOTHING to indicate that they do. Their business name clearly states that they do bathroom renovations.

Which leads me to wonder WHY they have an image of a range hood and cooktop on their bathroom renovation site. Did their web designer just grab any image from the internet and plonk it there? Or do they do kitchen renos too, but they’re keeping that service hidden for now? Or did no-one who signed off on the website notice that the image doesn’t match their business name and service offerings?

The problem with this mental model mismatch is that I now don’t trust that this company would take the care required to do a bathroom reno for me (not that I want one now, but that’s not the point). Any trust I may have engendered from looking at their website text and testimonials has been reduced by this cognitive dissonance.

Bottom line: Trust is jeopardized when the images and text (and business name in this case) on your website don’t match. If your prospective customer sees that you can’t get that right, then they won’t trust you to get their job done right either.

Or maybe that’s just me…


Strange error message

January 3, 2013

The other day a retailer gave me a web address ( to check for a product. I entered it into Firefox–without the ‘www’–and got this strange (almost rude) error message:


Nothing on the page was clickable and there was no indication that I needed to type the ‘www’. So, because I’m a determined little bunny, I then added the ‘www’ bit ( and this time I got the correct site.

These days, browsers like Firefox etc. normally resolve the ‘www’ bit and add it automatically, but not in this instance. Back in the day, it used to be that an address without the ‘www’ and one with the ‘www’ had to be linked (by the domain host?) so that they would resolve correctly, no matter what the user entered. Obviously that didn’t happen in this case, but the web developer did take the time to write this error message — I think that time would have been better spent making sure that the non-www URL resolved correctly.

[Links last checked January 2013]


Office 2010: Paste Options button not displaying

April 12, 2012

I have a new computer and I’ve installed Office 2010 on it. I was setting up a template for a client over the Easter weekend when I noticed that the hovering Paste Options button in Word 2010 never displayed and all I could get on the Paste icon on the ribbon was ‘paste as unformatted text’. That’s not usually a big deal as I often want to ‘paste as text’, but not always.

I compared my Word 2010 settings on my new Windows 7 PC with my Word 2010 settings on my Vista laptop (which did have the Paste Options hover button); the settings were EXACTLY the same, so something else was at play here.

Off to my friend Google, and after a few fruitless hits, I found the solution… and it’s not what you’d expect! In fact, it’s so far removed from what you’d expect that I’m surprised the person who found the answer even twigged that a small setting in Program A might be affecting a small setting in Program B (Word 2010 in my case, but all the Office 2010 products too).

And what’s the solution? A Skype add-on to all browsers that makes a phone number clickable to make a Skype call! Who knew??

So here’s what I did to get my Paste Options button back:

  1. Closed Word 2010.
  2. Opened Skype, went to Tools > Advanced > Advanced Settings and cleared the check box for Use Skype to call callto: links on the web. (I’m not 100% sure that this did anything, but I figured I should turn it off anyway.)
  3. Opened Firefox and went to the Add-ons Manager and disabled the Skype Click to Call add-in. Restarted Firefox when asked to do so.
  4. Opened Internet Explorer, clicked the settings icon (cog in top right of screen in IE9), selected Manage add-ons, selected Skype Click to Call and then clicked Disable. I didn’t have to restart IE9.
  5. Opened Word 2010 and tried pasting some text from another source. It worked! I had my Paste Options button back!

Please note: You have to disable this add-on in ALL browsers on your computer, including IE, even if you don’t use IE. I initially only disabled it on Firefox but I still couldn’t get the Paste Options button to display. I had to disable it on IE9 as well. Then it worked.

I found the solution to this issue here:

I sincerely thank Martin who somehow figured out that a Skype browser add-on was affecting a setting in Office 2010. That was a moment of pure serendipitous genius.