Category Archives: Web pages

Allow more JavaScript, maintain privacy

I’ve long regarded JavaScript in the browser to be one of the biggest security holes in web-browsing, and at the same time the Internet works less and less well without it. In 2008 Joel Spolsky made the observation that for some people the Internet is just broken:

Spolsky:   Does anybody really turn off JavaScript nowadays, and like successfully surf the Internets?

Atwood:   Yeah, I was going through my blog…

Spolsky:   It seems like half of all sites would be broken.

Which is not wrong.  Things have changed in the last five years, and now the Internet is even more broken if you’re not willing to do whatever random things the site you’re looking at tells you to, and whatever other random sites that site links off to tell you to, plus whatever their JavaScript in turn tells you to. This bugs me because it marginalizes the vulnerable (the visually impaired, specifically), and is also a gaping security hole.  And the performance drain!

Normally I rock with JavaScript disabling tools and part of my tin-foil-hat approach to the Internet, but I’m now seeing that the Internet is increasingly dependent on fat clients. I’ve seen blogging sites that come up empty, because they can’t lay out their content without client-side scripting and refuse to fall back gracefully.

So, I need finer granularity of control.  Part one is RequestPolicy for FireFox, similar to which (but not as fine-grained) is Cross-Domain Request Filter for Chrome.

The extensive tracking performed by Google, Facebook, Twitter et al gives me the willys. These particular organisations can be blocked by ShareMeNot, but the galling thing is that the ShareMeNot download page demands JavaScript to display a screenshot and a clickable graphical button – which could easily been implemented as an image with a href. What the hell is wrong with kids these days?

Anyway, here’s the base configuration for my browsers these days:

FireFox Chrome Reason
HTTPSEverywhere HTTPSEverywhere Avoid inadvertent privacy leakage
Self Destructing Cookies “Third party cookies and site data” is blocked via the browser’s Settings, manual approval of individual third party cookies. Avoid tracking; StackOverflow (for example) completely breaks without cookies
RequestPolicy Cross-Domain Request Filter for Chrome Browser security and performance, avoid tracking
NoScript NotScripts Browser security and performance, avoid tracking
AdBlock Edge Adblock Plus Ad blocking
DoNotTrackMe DoNotTrackMe Avoid tracking – use social media when you want, not all the time
Firegloves (no longer available), could replace with Blender or Blend In I’ve have had layout issues when using Firegloves and couldn’t turn it off site-by-site

Convert an Access table to a Wiki table

Copy/paste entire table or query into Notepad++

Replace newlines: \n
with: \n|-\n|.

Then replace tabs: \t
with: \n|.

(In the above two replaces, period = space)

You should end up with a structure like this:

|-
| data line 1, value 1
| data line 1, value 2
|-
| data line 2, value 1
| data line 2, value 2

Then you need to add the table header to the top – in this case I’ve gone for sortable columns:

{| class=”wikitable sortable”
|-
! scope=”col” | Value 1
! scope=”col” | Value 2

…and the footer for the bottom:

|}

That should be about it.

More info on Wiki tables

Remote server frustration

I can understand the principle of locking down web browsers on server machines, but there should at least be a straightforward way of overriding it.

The other week we were connected to a remote server trying to debug some ASPX code. That’s remote as in: on another continent, and not using the fastest connection. (It was designed to be fast for a remote population of users, not us.)

A good way to debug the code without switching on debug errors for everybody is to RDP onto the box and browse it from there.

This didn’t work because, despite Windows 2008 IE ESC (Internet Explorer Enhanced Security Configuration) not being enabled, it was blocking cookies, and every option I could find to try and turn it back on was either disabled, or did nothing.

‘Cos you know, browsing localhost (which has your own code on it ferchrissake) is a terrible security risk. Sigh.

In a rush to resolve it, we eventually resorted to downloading and installing Firefox on the machine. (I love Chrome, but its automatic updates and things scare me slightly; probably not good for a server. Some day I’ll dig around and figure out if it can be turned off. Come to think of it I should make sure FF doesn’t do the same thing.)

Firefox brought its own problems. Straight after installation, it decided to load up some hideously slow (on this less than ideal link) page with video. No, actually, two pages — using two tabs — and despite it proclaiming how fast and responsive it is, wouldn’t respond. Blargh. Thanks a bundle, Mozilla.

It must have taken a minute or more to come back — a long frustrating time when you’re in a hurry.

This solution did, however, work — we could finally see the debug messages, thank goodness.

Is there an official way of getting IE to behave itself?

Census night is coming

The census delivery chick turned up and offered us the option of paper or electronic form.

Two programmers looked at each other, thought about how they value their time and the response was a no-brainer:

“We’re programmers,” I explained, “we’ll take the paper form.”

“There’s a phone number you can call if you have any trouble filling out the electronic form” reassures the collector.

Cathy thinks: “Sure, that line won’t have any trouble when twenty million Australians simultaneously log into the web site to fill in the forms via a broken SSL link, using IE specific controls (that only work under some versions Windows assuming they’re correctly patched and have the right libraries loaded), demanding full round-trips to the underspec’d Windows servers to populate unnecessarily complex custom controls, some of which will no doubt demand Flash or COM. Come to think of it, it probably won’t even be web based, and we’ve only got two Windows boxes, one of which is tucked under a table (Yay! Census night on the floor swearing at the ABS’s programmers!) and the other has a screen resolution that went out with buggy whips (I’ve had programs barf and refuse to run because the resolution was unacceptable).”

We chose paper. For another view of the world, I’m looking forward hearing to how census night worked for Daniel…

Is Django MVC doing it wrong?

I’ve just starting fooling around with Django (a Python web framework), and was looking to produce a form. Bear in mind that Django doesn’t really do MVC, but follows the philosophy – separation of logic, representation and appearance:

class BookForm(forms.Form):
    title = forms.CharField()

def BookView(request):
    form = BookForm()
    return render_to_response('book.html', {'form': form})

With boot.html containing (amongst other things):

<form action="" method="get">
{{ form.as_table }}
<input type="submit" value="Search" />
</form>

Which is great! MVC, separation of data, presentation and business logic. Now, how do you get a CSS class onto that title field? CSS, being the way of separating out the presentation part of a HTML page from the data that’s embedded in it? As above, but chuck it in as such:

class BookForm(forms.Form):
    title = forms.CharField(
        widget=forms.TextInput(attrs={'class':'title-field'}))

Seeing this crunched the gearbox in my mind. All that messy designer stuff, where they make things look nice, that’s worming it’s way into my business logic? Perhaps it’s not so wrong, as the business logic does indeed know that this is a title-field. But it doesn’t quite sit right with me. I’m not convinced it’s wrong, but if you were, you could instead do this in your CSS and HTML:

<style>
.title-field input {background:#ccC68f;}
</style>
<form action="" method="get">
<table>
<tr><td class="title-field"> {{ form.title }} </td></tr>
</table>
<input type="submit" value="Search" />
</form>

Which pretty much forces you to individually place fields — you get to specify the order of fields plus their individual CSS classes.

I’m not sure what the answer is here. Anyone care to enlighten this noob? Bear in mind that there’s a thing to magically tie a model to a form meaning you don’t even need to specify the fields in both the form and model, which you can’t use if you start tossing styles into each field.

Pressing a button does not demand JavaScript

The state of software produced by web developers is highly variable.  The things the good programmers can do is little short of astonishing, as it always has been with limited environments.  But the bad programmers…

Fifteen years ago I did a Microsoft certification thingy, and now they want me to do a satisfaction survey on it – for no compensation.  I think not.  But I notice an unsubscribe link at the bottom of the email, so I follow it: http://www.mailingsvcs.com/optout.aspx?type=email&optout=1&service=1&networkid=9001&id=josh@example.com&pid=p53457652, see the Submit button, click on it… and nothing happens.  And then I realise – it needs JavaScript to press.  A button, one of those things right at the heart of HTML 2.0.  What is this, amateur hour?  Turns out, yes it is because if you follow the hacked URL above — which if filled with bogus data — and click on the Submit data, the back end proceeds happily without validating any of the data, and asks you another question before confirming that it’s done:

We’re sorry you no longer want to receive e-mails from us. Please allow one week for us to process this request, during which time you may still receive e-mails from us. We apologize for any inconvenience.
To help us improve our service, please tell us the primary reason why you no longer wish to receive our messages:

There appears to be some kind of problem with their computers.  Last time I checked, the time it takes a computer to remove a record from a database is in the vicinity of “I’m already finished”, not one week.

I’m of the opinion that people who construct software ought to be required to put their name on it in a visible way, so they can go on my list of people to smack in the face when I meet them.  It’s for the best.

Chrome doesn’t sandbox the CPU; Goggle docs waits really hard

Chrome doesn’t attempt to sandbox CPU consumption. I just closed an inactive Google docs spreadsheet, and saw CPU fall from pegged-at-100% to bubbling along at 10%.

Does it really need each available CPU cycle to wait for the other end to do something? Apparently so, in the way it’s coded.

Google: not as clever as the press release makes out.

HTML5test.com

Less crazy than the Acid Tests is www.html5test.com

Here’s what I get from a few random browsers I have lying around the place:

Firefox 3.5.9 scores 100 out of 160.

Chrome 4.1 scores 118 out of 160.

IE6? 11 out of 160.

IE8? Surprisingly, only 19 out of 160.

The browser on my Nokia N95 phone doesn’t load the page properly; it just says “Working…” and 0 out of 4 (eg it stalls on the first round of tests).

Interestingly, I also tried IE6 with the Google Chrome Frame in it; it scored 137 out of 160, better than Chrome itself. Weird.

Obviously all the browser authors have a way to go to support this if it’s going to be the bold new standard on the web.

(Found via Andrew)

Tables: MS Word vs CSS

Here’s why I like CSS.

Here’s a table created in Microsoft Word and pasted into a CMS:


<table border="1" cellspacing="0" cellpadding="0" class="MsoNormalTable" style="border-collapse: collapse; border: medium none"><tbody><tr><td width="64" valign="top" style="border-right: #f0f0f0; padding-right: 5.4pt; border-top: windowtext 2.25pt solid; padding-left: 5.4pt; background: #4bacc6 0% 50%; padding-bottom: 0cm; border-left: #f0f0f0; width: 47.65pt; padding-top: 0cm; border-bottom: windowtext 2.25pt solid; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial"><strong><span style="color: white; font-family: &#39;Calibri&#39;,&#39;sans-serif&#39;"><font size="2">&nbsp;</font></span></strong></td><td width="170" valign="top" style="border-right: #f0f0f0; padding-right: 5.4pt; border-top: windowtext 2.25pt solid; padding-left: 5.4pt; background: #4bacc6 0% 50%; padding-bottom: 0cm; border-left: #f0f0f0; width: 127.85pt; padding-top: 0cm; border-bottom: windowtext 2.25pt solid; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial"><strong><span style="color: white; font-family: &#39;Calibri&#39;,&#39;sans-serif&#39;"><font size="2">Description</font></span></strong><strong><span style="color: white; font-family: &#39;Calibri&#39;,&#39;sans-serif&#39;"><font size="2">&nbsp;</font></span></strong></td><td width="335" valign="top" style="border-right: #f0f0f0; padding-right: 5.4pt; border-top: windowtext 2.25pt solid; padding-left: 5.4pt; background: #4bacc6 0% 50%; padding-bottom: 0cm; border-left: #f0f0f0; width: 250.95pt; padding-top: 0cm; border-bottom: windowtext 2.25pt solid; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial"><strong><span style="color: white; font-family: &#39;Calibri&#39;,&#39;sans-serif&#39;"><font size="2">&nbsp;</font></span></strong></td></tr><tr style="height: 36.85pt; page-break-inside: avoid"><td rowspan="7" width="64" valign="top" style="padding-right: 5.4pt; padding-left: 5.4pt; background: #4bacc6 0% 50%; padding-bottom: 0cm; width: 47.65pt; padding-top: 0cm; height: 36.85pt; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; border: #f0f0f0"><strong><span style="color: white; font-family: &#39;Calibri&#39;,&#39;sans-serif&#39;"><font size="2">Benefits</font></span></strong></td><td width="170" valign="top" style="padding-right: 5.4pt; padding-left: 5.4pt; background: #d8d8d8 0% 50%; padding-bottom: 0cm; width: 127.85pt; padding-top: 0cm; height: 36.85pt; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; border: #f0f0f0"><span style="font-family: &#39;Calibri&#39;,&#39;sans-serif&#39;"><font size="2">Low Total Cost of Ownership (TCO)</font></span></td><td width="335" valign="top" style="padding-right: 5.4pt; padding-left: 5.4pt; background: #d8d8d8 0% 50%; padding-bottom: 0cm; width: 250.95pt; padding-top: 0cm; height: 36.85pt; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; border: #f0f0f0"><p style="margin: 0cm 0cm 4pt" class="MsoBodyText"><span style="font-size: 8pt; font-family: &#39;Calibri&#39;,&#39;sans-serif&#39;">No up-front hardware or software costs</span></p><p style="margin: 0cm 0cm 4pt" class="MsoBodyText"><span style="font-size: 8pt; font-family: &#39;Calibri&#39;,&#39;sans-serif&#39;">Significantly less work effort to set-up a B2B integration solution since it involves&nbsp;mostly configuration tasks rather than programming</span></p><p style="margin: 0cm 0cm 4pt" class="MsoBodyText"><span style="font-size: 8pt; font-family: &#39;Calibri&#39;,&#39;sans-serif&#39;">Free use of online development interface&nbsp;for developers&nbsp;</span></p><p style="margin: 0cm 0cm 4pt" class="MsoBodyText"><span style="font-size: 8pt; font-family: &#39;Calibri&#39;,&#39;sans-serif&#39;">Data processing rates for usage&nbsp;are world&rsquo;s best</span></p></td></tr><tr><td width="170" valign="top" style="padding-right: 5.4pt; padding-left: 5.4pt; padding-bottom: 0cm; width: 127.85pt; padding-top: 0cm; background-color: transparent; border: #f0f0f0"><span style="font-family: &#39;Calibri&#39;,&#39;sans-serif&#39;"><font size="2">Best Return on Investment (ROI)</font></span></td><td width="335" valign="top" style="padding-right: 5.4pt; padding-left: 5.4pt; padding-bottom: 0cm; width: 250.95pt; padding-top: 0cm; background-color: transparent; border: #f0f0f0"><p style="margin: 0cm 0cm 4pt" class="MsoBodyText"><span style="font-size: 8pt; font-family: &#39;Calibri&#39;,&#39;sans-serif&#39;">ROI achieved sooner due to low up-front and on-going costs </span></p><p style="margin: 0cm 0cm 4pt" class="MsoBodyText"><span style="font-size: 8pt; font-family: &#39;Calibri&#39;,&#39;sans-serif&#39;">Optimizes work effort since tasks removed or simplified</span></p><p style="margin: 0cm 0cm 4pt" class="MsoBodyText"><span style="font-size: 8pt; font-family: &#39;Calibri&#39;,&#39;sans-serif&#39;">Higher ROI due to removal of costs</span></p></td></tr><tr><td width="170" valign="top" style="padding-right: 5.4pt; padding-left: 5.4pt; background: #d8d8d8 0% 50%; padding-bottom: 0cm; width: 127.85pt; padding-top: 0cm; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; border: #f0f0f0"><span style="font-family: &#39;Calibri&#39;,&#39;sans-serif&#39;"><font size="2">Speed of Delivery</font></span></td><td width="335" valign="top" style="padding-right: 5.4pt; padding-left: 5.4pt; background: #d8d8d8 0% 50%; padding-bottom: 0cm; width: 250.95pt; padding-top: 0cm; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; border: #f0f0f0"><p style="margin: 0cm 0cm 4pt" class="MsoBodyText"><span style="font-size: 8pt; font-family: &#39;Calibri&#39;,&#39;sans-serif&#39;">Solutions delivered in days and weeks rather than months and years</span></p><p style="margin: 0cm 0cm 4pt" class="MsoBodyText"><span style="font-size: 8pt; font-family: &#39;Calibri&#39;,&#39;sans-serif&#39;">No requirement to establish and maintain hardware and software</span></p><p style="margin: 0cm 0cm 4pt" class="MsoBodyText"><span style="font-size: 8pt; font-family: &#39;Calibri&#39;,&#39;sans-serif&#39;">Support for standards reduces need for specialists and training</span></p></td></tr><tr><td width="170" valign="top" style="padding-right: 5.4pt; padding-left: 5.4pt; padding-bottom: 0cm; width: 127.85pt; padding-top: 0cm; background-color: transparent; border: #f0f0f0"><span style="font-family: &#39;Calibri&#39;,&#39;sans-serif&#39;"><font size="2">Control and Flexibility</font></span></td><td width="335" valign="top" style="padding-right: 5.4pt; padding-left: 5.4pt; padding-bottom: 0cm; width: 250.95pt; padding-top: 0cm; background-color: transparent; border: #f0f0f0"><p style="margin: 0cm 0cm 4pt" class="MsoBodyText"><span style="font-size: 8pt; font-family: &#39;Calibri&#39;,&#39;sans-serif&#39;">Developers have full control over tenancies, design data and administration</span></p><p style="margin: 0cm 0cm 4pt" class="MsoBodyText"><span style="font-size: 8pt; font-family: &#39;Calibri&#39;,&#39;sans-serif&#39;">Development can be done anywhere at anytime</span></p></td></tr><tr><td width="170" valign="top" style="padding-right: 5.4pt; padding-left: 5.4pt; background: #d8d8d8 0% 50%; padding-bottom: 0cm; width: 127.85pt; padding-top: 0cm; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; border: #f0f0f0"><span style="font-family: &#39;Calibri&#39;,&#39;sans-serif&#39;"><font size="2">Guaranteed Service </font></span></td><td width="335" valign="top" style="padding-right: 5.4pt; padding-left: 5.4pt; background: #d8d8d8 0% 50%; padding-bottom: 0cm; width: 250.95pt; padding-top: 0cm; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; border: #f0f0f0"><p style="margin: 0cm 0cm 4pt" class="MsoBodyText"><span style="font-size: 8pt; font-family: &#39;Calibri&#39;,&#39;sans-serif&#39;">Secure and reliable infrastructure </span></p><p style="margin: 0cm 0cm 4pt" class="MsoBodyText"><span style="font-size: 8pt; font-family: &#39;Calibri&#39;,&#39;sans-serif&#39;">Guaranteed service level</span></p><span style="font-size: 8pt; font-family: &#39;Calibri&#39;,&#39;sans-serif&#39;">Data-back-up and disaster recovery provided </span></td></tr><tr><td width="170" valign="top" style="padding-right: 5.4pt; padding-left: 5.4pt; padding-bottom: 0cm; width: 127.85pt; padding-top: 0cm; background-color: transparent; border: #f0f0f0"><span style="font-family: &#39;Calibri&#39;,&#39;sans-serif&#39;"><font size="2">Market Leading Service</font></span></td><td width="335" valign="top" style="padding-right: 5.4pt; padding-left: 5.4pt; padding-bottom: 0cm; width: 250.95pt; padding-top: 0cm; background-color: transparent; border: #f0f0f0"><p style="margin: 0cm 0cm 4pt" class="MsoBodyText"><span style="font-size: 8pt; font-family: &#39;Calibri&#39;,&#39;sans-serif&#39;">Most advanced functionality</span></p><p style="margin: 0cm 0cm 4pt" class="MsoBodyText"><span style="font-size: 8pt; font-family: &#39;Calibri&#39;,&#39;sans-serif&#39;">First remotely configurable Integration, BPM and BI service</span></p><p style="margin: 0cm 0cm 4pt" class="MsoBodyText"><span style="font-size: 8pt; font-family: &#39;Calibri&#39;,&#39;sans-serif&#39;">Wide support for industry standards and customizations</span></p></td></tr><tr><td width="170" valign="top" style="padding-right: 5.4pt; padding-left: 5.4pt; background: #d8d8d8 0% 50%; padding-bottom: 0cm; width: 127.85pt; padding-top: 0cm; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; border: #f0f0f0"><span style="font-family: &#39;Calibri&#39;,&#39;sans-serif&#39;"><font size="2">Future Proof</font></span></td><td width="335" valign="top" style="padding-right: 5.4pt; padding-left: 5.4pt; background: #d8d8d8 0% 50%; padding-bottom: 0cm; width: 250.95pt; padding-top: 0cm; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; border: #f0f0f0"><p style="margin: 0cm 0cm 4pt" class="MsoBodyText"><span style="font-size: 8pt; font-family: &#39;Calibri&#39;,&#39;sans-serif&#39;">Quarterly releases ensure up-to-date functionality </span></p><p style="margin: 0cm 0cm 4pt" class="MsoBodyText"><span style="font-size: 8pt; font-family: &#39;Calibri&#39;,&#39;sans-serif&#39;">Upgrades are our responsibility</span></p></td></tr><tr><td width="64" valign="top" style="border-right: #f0f0f0; padding-right: 5.4pt; border-top: #f0f0f0; padding-left: 5.4pt; background: #4bacc6 0% 50%; padding-bottom: 0cm; border-left: #f0f0f0; width: 47.65pt; padding-top: 0cm; border-bottom: windowtext 2.25pt solid; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial"><strong><span style="color: white; font-family: &#39;Calibri&#39;,&#39;sans-serif&#39;"><font size="2">&nbsp;</font></span></strong></td><td width="170" valign="top" style="border-right: #f0f0f0; padding-right: 5.4pt; border-top: #f0f0f0; padding-left: 5.4pt; padding-bottom: 0cm; border-left: #f0f0f0; width: 127.85pt; padding-top: 0cm; border-bottom: windowtext 2.25pt solid; background-color: transparent"><span style="font-family: &#39;Calibri&#39;,&#39;sans-serif&#39;"><font size="2">Expert Assistance</font></span></td><td width="335" valign="top" style="border-right: #f0f0f0; padding-right: 5.4pt; border-top: #f0f0f0; padding-left: 5.4pt; padding-bottom: 0cm; border-left: #f0f0f0; width: 250.95pt; padding-top: 0cm; border-bottom: windowtext 2.25pt solid; background-color: transparent"><p style="margin: 0cm 0cm 4pt" class="MsoBodyText"><span style="font-size: 8pt; font-family: &#39;Calibri&#39;,&#39;sans-serif&#39;">Expertise and knowledge available for support, development, consulting and training</span></p></td></tr></tbody></table>

With a little CSS coding (held in an external file), it has become this:


<table class="featuretable">
  <tbody>
    <tr>
      <td class="ftop"></td>
      <td class="ftop">Description</td>
      <td class="ftop"></td>
    </tr>
    <tr>
      <td class="fside">Benefits</td>
      <td class="fd0">Low Total Cost of Ownership (TCO)</td>
      <td class="fd0">No up-front hardware or software
costs<br>
Significantly less work effort to set-up a B2B integration solution
since it involves mostly configuration tasks rather than programming<br>
Free use of online development interface for developers <br>
Data processing rates for usage are world’s best</td>
    </tr>
    <tr>
      <td class="fside"></td>
      <td class="fd1">Best Return on Investment (ROI)</td>
      <td class="fd1">ROI achieved sooner due to low
up-front and on-going costs<br>
Optimizes work effort since tasks removed or simplified<br>
Higher ROI due to removal of costs</td>
    </tr>
    <tr>
      <td class="fside"></td>
      <td class="fd0">Speed of Delivery</td>
      <td class="fd0">Solutions delivered in days and
weeks rather than months and years<br>
No requirement to establish and maintain hardware and software<br>
Support for standards reduces need for specialists and training</td>
    </tr>
    <tr>
      <td class="fside"></td>
      <td class="fd1">Control and Flexibility</td>
      <td class="fd1">Developers have full control over
tenancies, design data and administration<br>
Development can be done anywhere at anytime</td>
    </tr>
    <tr>
      <td class="fside"></td>
      <td class="fd0">Guaranteed Service</td>
      <td class="fd0">Secure and reliable infrastructure<br>
Guaranteed service level<br>
Data-back-up and disaster recovery provided</td>
    </tr>
    <tr>
      <td class="fside"></td>
      <td class="fd1">Market Leading Service</td>
      <td class="fd1">Most advanced functionality<br>
First remotely configurable Integration, BPM and BI service<br>
Wide support for industry standards and customizations</td>
    </tr>
    <tr>
      <td class="fside"></td>
      <td class="fd0">Future Proof</td>
      <td class="fd0">Quarterly releases ensure up-to-date
functionality<br>
Upgrades are our responsibility</td>
    </tr>
    <tr>
      <td class="fside"></td>
      <td class="fd0">Expert Assistance</td>
      <td class="fd0">Expertise and knowledge available
for support, development, consulting and training</td>
    </tr>
  </tbody>
</table>

Old version: 12250 bytes.

New version: 2490 bytes + 605 bytes of CSS. And much more maintainable, and it’ll be easier to change the table styles later.

OK, the new looks slightly different to the old (this was on purpose to enlarge the fonts a bit), but jeez.

MySchool: so wrong

Background: The Australian federal government has finally pushed out a web site publishing performance metrics for all schools throughout Australia. There has been much brouhaha regarding this. For some reason, the go-live wasn’t a quiet one, but a very loud, flick-on-the-switch big-bang go live.

Naturally, the website asploded.

Any website that’s going to be hit by 1% of the Australian population the moment it goes live is going to blow up unless there are some cluey, experienced people behind it. Clever, inexperienced people, or experienced idiots with a large budget might stand a chance if things got progressively worse over time, but turn it on and hammer it on day one? MySchool.edu.au does not have cluey, experienced people behind it. There are various signs.

For a start, what is it with the TLD? .edu.au seems fine, but what’s wrong with a redirect from .gov.au given they were the folks running around promoting it? It’s not like myschool is an education institution.

Then you get there. Guess what? It won’t work without JavaScript. At all. Because typing in a string and hitting enter demands the availability of JavaScript. Using <form> is so 2000s. Get with the new decade! It’s so vital to the site that users must not be allowed in if they don’t have JavaScript. Screw the blind! They’ve only got one school to go to anyway.

And the site is slow, amazing slow. But I guess if you’ve got to download all that JavaScript to enter that string, of course it’s going to be slow. Switching to a different set of data? Couldn’t download that and just do a hide/show, no you’ve got to do some kinda AJAX-y postback crap for a massive round-trip delay; if you were dealing with rapidly changing data, that might almost make sense; every year this website will get data updates, so no: this makes no sense. I clicked on it, and a long time later, something happened to the web page. In the meantime, I went off to get a drink. Alternatively, you could just show a table for each year, and skip the damn JavaScript altogether. Why there’s even a backend is beyond me, this whole thing could be served perfectly well – and mind-numbingly quickly – from static pages.

And for the purpose it’s intended for: parents picking a school for their kids. Can you compare schools? No. Open them up in different browser tabs, if you have a tabbed browser (remember: the blind can go take a flying leap). Good thing the site is chocked full of JavaScript. And the JavaScript is used for handy things like map-based locating of schools, and – oh, hang on, no it’s not. There’s no Google-maps mash-up. Good thing the site is chocked full of JavaScript.

Clearly, the entire site has been an exercise in some programmer somewhere bolstering their resume rather than giving the client something appropriate. Either that, or a manager was in charge of the feature spec, and demanded all the latest buzzwords that they had heard but didn’t understand. I’m betting it took more than a year to build. Feel free to speculate.

I’m also willing to bet the price on this site was more than the $50,000 it should have cost (one person, three months). I’m imagining about two or three orders of magnitude more. I’m figuring the servers required for this aren’t running in some guy’s bedroom, even though that would be about all that’s required for such a simple dataset that’s presented in such a straightforward way.

Must try harder.