Connrs {Blog}

Firesheep and the avoidance of the real problem

noreply@blogger.com (Connrs) — Wed, 27 Oct 2010 09:19:00 +0000

Obviously Firesheep has been big news this last week or so. Somebody is sitting in a pub right now waiting for you to access Facebook, Twitter or your webmail account so that they can get in and play with all the shinies. Scary stuff; and yet most news outlets haven't really discussed the issue in detail, they haven't discussed where the issue will commonly take place (public places like pubs, cafes, restaurants, libraries with open wifi), and they don't really discuss how SSL on a few major scapegoats will actually solve a worldwide security issue.

Public. Open. Wifi.

I mean, come on! This is the biggest problem; just because someone has an extension that no longer works doesn't mean that somebody else doesn't just have some custom build of Wireshark running that does far more than steal cookies for your favourite social sites. We're talking about the potential for identity theft by people getting far more than a feed of your recent photos and activities. Some sites may encrypt your password on submit but other forums won't. And what are the chances that somebody on an open hotspot doesn't have the same password for a couple of other sites?

Also, people may now be smugly sitting on an open hotspot not going on Twitter and Facebook. But their favourite news site has a like button on it. Is that a problem? Has anyone asked or addressed this in a news article too?

The Solution?

The geek solution is to have a VPN or a SSH socks proxy and to always use it as an interface between open sites; the firefox buff solution is to get one of the many extensions that forces SSL for sites that allow it (and it isn't all of them;) the scapegoat solution is to tell big social networking sites to go SSL so that it's no longer a problem (they should be using SSL anyway the lazy slackers.

None of these ideas really close up the ultimate truth that not everyone gets security. Not everyone will be able to buy a VPN for that rare occasion that they're on an open hotspot; the fact that VPNs are a bloody pain to set up just compounds the problem. Very few know what SSH is.

The real solution needs to have all of these plus: Closed public wifi. There are a couple of ways with various issues for security but will offer a modicum of privacy for people without the ability to take security measures by themselves. For starters, cafes and libraries could simply stick the network key on the notice board for visitors. Change it daily and keep it inside for patrons only. Alternatively, for situations where the business has a rented device, have 2 hotspots. The first hotspot is open and, when you connect, it takes your browser to a login page with instructions and today's network key. Then you disconnect, sign in to the closed wifi, and use the key you just pasted to your clipboard.

Is that it?

Not really. Computer security is about an ongoing awareness of the fact that everyone wants your bank details and identity. But reporting on an issue and calling social networking sites to use SSL is just scapegoating and avoiding a real world problem with security. Get it sorted pubs, clubs and cafes.

Minify Plugin - Cake Bakery article

noreply@blogger.com (Connrs) — Fri, 15 Oct 2010 22:05:00 +0000

I just posted an article on the Bakery called Minify and gzip plugin for your Javascript. It’s regarding one of my latest Github projects called minify and is up there waiting to be dropped into any of your Cake applications.

Making MediaQuery.js

noreply@blogger.com (Connrs) — Tue, 05 Oct 2010 21:30:00 +0000

Blog post is a work in progress while I actually do the research. Posting it here now anyway because I’m at the stage that I want to get it up on Github and so it allows me to link to some form of Readme here that will give you a clue to what’s going on…

A small jQuery plugin–called Media Queries–caught my attention around 2 months ago that I decided would be really useful for creating adaptive layouts for various desktop (and mobile) resolutions. I liked the plugin a lot but I didn’t always want to stick jQuery in every site I created that I’d want to support some sort of adaptive layout.

7 late nights later, I rolled up my sleeves and started hacking away. The script was a mishmash of DOM functions and jQuery DOM functions so I spent some time learning the script and rewriting it. At this stage, I’d like to thank Paul Irish for reminding me that there was nothing wrong in seeing how others did it, in his video on 10 Things I Learned from the jQuery Source, as I had a look at some other sources to pull together some ideas that would make the conversion a little smoother. It really shocked me that I didn’t actually have to do any debugging when I finally ran it in a page the first time. Of course I ran it in Safari 5 and it didn’t actually need to run most of the code. I digress

IE6

Debugging had to start—for me—in IE6. I had this big vision that my name would be blasted into the stars and that I would become the new big name on Twitter, Digg and all my favourite bloggers out there. And then that bubble burst. Parrrrrrrrppppppphhhhhhhsplplpplplpllplplplpip.

To elaborate, allow me to show you a brief snippet of output:

BODY{ PADDING-LEFT: 0px; PADDING-TOP: 0px; PADDING-RIGHT: 0px; PADDING-BOTTOM: 0px }
@media Unknown{P{ DISPLAY: none }}

Parrrrrrrrppppppphhhhhhhsplplpplplpllplplplpip

It’s pretty clear that IE6 has absolutely no clue what to do with your sexy CSS. Please note that this issue only really presents itself when you use inline @media declarations. If you keep all your CSS in separate files, as I do currently, then you’re probably fine; it’s a world of pain otherwise as IE6 has issues with @media.

Respite

At least I can get it to function in older versions of Firefox and Safari… Right? No. Gecko 1.9.1 represents the birth of inline @media support in Firefox. However, there are issues with older versions of Firefox. I couldn’t actually get a copy of Firefox 1.0 running on the virtual machine I had so I decided to jump ahead to 1.5 (I hope you don’t mind.)

Either way it wouldn’t have mattered. Firefox 1.5 (Gecko 1.8.1ish) and below don’t really have much love for complex media attributes on the link element. So, 2 days in to my little research project, and I already don’t really want to continue rewriting this little script. I’ve been coding while I research so I’ve already got some functions in place to do some sexy work on inline @media queries. It’s just a shame that the various browsers remove it all from the DOM or mingle it into uselessness.

More sexy blogness to come once I’ve done some more on that day job thing…

Progressive Enhancement with CSS Media Queries

noreply@blogger.com (Connrs) — Tue, 20 Jul 2010 13:59:00 +0000

There have been a number of articles recently talking about how to use media queries of late by Hicks, Colly and others; it has even had some air time on Dan Benjamin's 5by5 network. I remember playing with the idea of it during a stint of research on Apple's website so, when I spotted what Jon Hicks managed to get out of it, I had to give it a try.

NB. This is hopefully going to be an article that gets a number of redrafts over the next few weeks until it's perfect. I'm using my freelance site as the testing ground for it so dig in to my site to see. I would like some help from device owners who can test some of these layouts on their iPads/Androids/etc. Tweet me if you want to offer any help.

First Attempt

As part of trying to be a tidier coder I wanted to look at splitting this all out in to multiple CSS files so as to keep it easier to update and manage. My first draft process went like this:

Create screen.css
Add the CSS for the high resolution version of the site
Create 1024.css
Add loads of hacks to (to 1024.css) give netbook users an easier time
Create 640.css
Add loads of hacks (to 640.css) to give iPad users an easier time
Create 320.css
Add loads of hacks (to 320.css) to give iPod users an easier time

At the end of it I had 4 gigantic CSS files with various declarations of varying complexity, !important at the end of a lot of lines, many resets for paddings and I was really unhappy with it. Ultimately, to give visitors a helping hand with their smaller devices (or legacy browsers) you'd need to add large portions of CSS just to hack it down to render well. I decided a progressive enhancement made more sense than graceful degradation.

Second Draft

Before taking it any further we need to make sure we have <meta name="viewport" content="width=device-width"> in the <head> or else live testing is going to produce strange results on an iPhone/iPod Touch.

Next you need to decide upon a range of display widths for your layout. It will very much depend entirely upon the particular design, as to whether you need to offer more than 2 or 3 varieties. I wanted to use 4 columns at a higher resolution and allow it to reduce sensibly for netbooks, iPads, and mobiles respectively.

At this stage I've only been able to research Apple devices so anyone able to offer me some help with perfecting this with Android and other mobile browsers (@ppk wink wink) will really be of great help.

To get this to work correctly, you need to have the base stylesheet with the bare minimum needed for a plain layout and then have additional stylesheets to enhance the layout as display width increases:

Layout & CSS

<body id="home"><div id="main">
<header id="header"><h1>Foo</h1></header>
 
<nav id="menu">
<ul><li><a href="#">Lorem</a><li><a href="#">Lorem</a><li><a href="#">Lorem</a><li><a href="#">Lorem</a></ul>
</nav>
 
<section id="showcase">
<article><h2>Lorem</h2><p>Lorem ipsum</article>
<article><h2>Lorem</h2><p>Lorem ipsum</article>
<article><h2>Lorem</h2><p>Lorem ipsum</article>
</section>

<div id="content">
<div class="c_primary"></div>
<div class="c_ancillary"></div>
</div> 

<div id="sidebar">
<div class="s_primary"></div>
<div class="s_ancillary"></div>
</div> 

</div></body>
</html>

<link rel="stylesheet" type="text/css" href="http://web1984.com/css/jun2010/default.css" media="all">

This is your default stylesheet. A simple one column layout with some standard colours. Centre aligned header and navigation but other than that it's pretty plain. I've used media="all" but it's unnecessary.

<link rel="stylesheet" type="text/css" href="http://web1984.com/css/jun2010/640.css" media="screen and (min-width: 480px),(min-width:320px) and (orientation:landscape)">

I regret naming this 640.css as that is the upper bound before the next stylesheet activates but I'll continue like this for now and fix it soon.

This one activates at 480 pixels in width. I chose 480 pixels as it's the width of the iPhone in landscape mode. There are two media query statements here because the iPhone device width doesn't alter when the orientation is altered but it does recognise orientation.

#sidebar {
display: table-cell;
width: 240px !important;
}

#content {
display: table-cell;
border-collapse: collapse;
border-spacing: 0px;
}

This turns the 2 divs (with display:block) into a 2 column layout with the right hand sidebar only taking up 240px

<link rel="stylesheet" type="text/css" href="http://web1984.com/css/jun2010/1024.css" media="screen and (min-width: 641px) ">

Now we cater for netbook/iPad owners. At this stage we aren't catering to the smaller mobile devices so we can get away with one media statement. This will apply further enhancements to the CSS until the display width exceeds 1024 pixels.

#menu ul {
text-align: left;
}

header#header h1 {
text-align: left;
}

#showcase {
display: table;
border-collapse: separate;
border-spacing: 24px;
padding: 0;
}

#showcase > article {
display: table-cell;
width: 33%;
position: relative;
text-align: left;
}

#showcase > article h2 {
display: block;
}

#showcase p {
display: block;
}

#showcase > article h2 a {
padding: 0;
}

This time we've kept the main content layout at 2 columns but created a 3 column layout for the web app showcase at the top of the site. As the layout is wide enough I've unhidden the paragraphs that were hidden (display:none) at the lower resolutions. T'would be contestable as a waste of bandwidth but I find it makes sense to reduce the page clutter. Visitors on smaller devices could have clicked/pushed their way through to the pages that they link to.

<link rel="stylesheet" type="text/css" href="http://web1984.com/css/jun2010/1440.css" media="screen and (min-width: 1025px)">

This is the last stage. Big screen layout. I add all the declarations to create a 4 column layout

#main {
position: relative;
}

#menu ul {
position: absolute;
font-size: 200%;
right: 12px;
top: 0;
}

#menu a {
padding: 2em 12px 0.5em;
}

#menu a:hover {
padding-top: 1.75em;
border-top: 0.25em solid #1f8199;
}

#sidebar {
width: 480px !important;
}

#sidebar div.s_primary, #sidebar div.s_ancillary {
display: table-cell;
width: 50%;
padding: 0 12px 0 0;
margin: 0;
}

#content div.c_primary, #content div.c_ancillary {
display: table-cell;
width: 50%;
padding: 0 12px 0 0;
margin: 0;
}

Here I've made the 4 divs (c_primary, c_ancillary, s_primary, s_ancillary) into table cells and thereby created the final 4 column layout. The fact that this will only truly work within the more advanced-CSS3 capable browsers means that I don't need to worry about hacks. In fact IE6-IE8 are still only displaying the default.css; you can remedy the IE6-IE8 situation quite easily with some conditional comments at the final stages of your project.

Delicious Safari Extension

noreply@blogger.com (Connrs) — Fri, 09 Jul 2010 09:24:00 +0000

I guess I should actually provide a download link for you guys arriving here looking for it. It's a fork of Jeveaux's project so just remember to download this and then use the update feature to update it. I'll ensure that it directs you to the right update.

Download the Delicious Safari Extension

A Month Without Caffeine

noreply@blogger.com (Connrs) — Wed, 07 Jul 2010 22:57:00 +0000

Introduction: The Problem

For a few months I’ve been getting headaches at weekends; they’ll usually manifest in the morning but occasionally continue throughout the day. I thought I was just getting old but after a while I realised that it was because I’d started taking a drug at work that I didn’t take at home over the weekend. I was getting caffeine withdrawal at weekends because I didn’t have the habitual routine at home that I had 'in the office.'

The Challenge

After deciding that I’d had enough, I went cold turkey. And let me tell you that it was hardcore. At first, I did some in-depth research (Google) on the subject of detoxing and found it all pretty scary. Terms like mind fog, drowsiness, brain blur, severe headaches, severe fatigue and the rest gave me pause for thought: Should I bother with this or should I just maintain this addiction for the rest of my life?

No way; I wanted out. I hate the idea of a dependency on something to make me who I am. I don’t mind the idea of having a perk like that but the dependency is a turnoff.

A couple of hours later I let my wife know and then strapped myself down (not really) and just stopped with tea, coffee, chocolate, cola, Sprite, 7up, Lucozade and quite a lot more. It’s absolutely insane how much stuff they stick caffeine into; I actually struggled to find a non-alcoholic non-caffeine drink that I actually felt comfortable drinking when I went to the pub a few days later.

Day 1—Oh this isn’t too bad

The next morning I woke up preparing for a horrendous headache and was thoroughly overjoyed when I felt fine. 3 weeks of migraines my shoe! I must confess to being a little tired and grumpy in the morning but I kept my nerves in check and got through it.

Day 2—Oh my brain

I woke up with the worst headache ever and that wasn’t the worst of it. The headache paled into insignificance alongside what I’ll forever think of as the brain fog. The brain fog is a range of symptoms like an inability to focus on a conversation; an overwhelming magnetic attraction applied to your eyes from the ground when attempting to make eye contact; memory loss and short term memory trimmed down to minutes; and a general feeling that your ears no longer understand your native language.

This was my lowest day; I nearly went to the kitchen to make the strongest brew ever. I resisted, went to buy some ibuprofen and got through the day

Day 3—Road to recovery

Day 3 was surprising. I still had a headache but the fog already began to dissipate. Partially thanks to some pain relief, I was able to actually do some work. Result.

Day 4 to 28—Light at the end of the tunnel

Throughout the next 24 days I talked a lot about how I was going to enjoy a nice brew at the end of it all. As the days progressed I lost the desire to have that trophy cuppa. In fact, at day 28 (last Saturday) I didn’t bother. I wish that I could say more about caffeine cold turkey but the mind fog was the easiest thing I ever beat.

After all that trouble

I don’t think I’ll be bothering with tea at all. I had a cup of tea yesterday and it didn’t blow my mind and I didn’t descend into craving caffeine either. I like the idea of it being a weekly treat be it a bar of chocolate or a cappuccino at a café.

Give it a try at some point. I think that the detox itself is quite revealing and, while I don’t think it’s something that everyone need endure, if you’re one of the small number of people who just did it for the routine then I you’ll benefit; try replacing it with something healthy like a fresh fruit juice.

Next week in This Week in Detox…

Alcohol? Been there done that you weaklings. Fatty food? Internet? Hah. Cordials? Who knows ;)

Safari 5.0 extension API and window.close()

noreply@blogger.com (Connrs) — Tue, 06 Jul 2010 21:38:00 +0000

I wanted to make a quick note about how safari.application.openBrowserWindow().activeTab and window.close() result in a lack of interaction.

Backstory

In a nutshell, window.close() isn’t allowed to close a window for a document that wasn’t created via Javascript. The idea is that a script shouldn’t be able to willy nilly start ruining your browsing experience by closing a browser window that you’ve, until right now, built up a web page history; a window.close() at that point would remove your browser window and leave you with no back button to get to where you’ve been. There are other ramifications, I guess, but for me that’s the most obvious one.

Fast Forward to Safari 5.0

So I forked the delicious safari extension, from Jeveaux’s original repo, and made a few changes to enhance it. One of my updates was to include an option to allow Delicious to open in a new window as well as a new tab. A week later I decided to look into why the window wasn’t closing on the Delicious page after you’ve saved it.

Inspecting the source of Delicious’ post-save page you’ll see that it has a simple window.close() in the head. So why does it not work? It’s a window opened with javascript right?

My suspicion is that, because it hasn’t been opened with window.open(), it is classed as a standard window. My next task for the Delicious Safari Extension is to switch it over to window.open() and then I’m going to file a report/bug/feature request to see if Safari can weigh in on it and perhaps make some small changes for us.

Update: I've got a bug report filed 8165625: Safari 5 extension API and window.close() so here's hoping that it gets some attention

Update 2: I finally found the reference to where it mentions that you can't use window.open() within the API docs. Just for people who are asking me to use window.open() as an interim solution.

Know what working in a casual office and sunny days creates?

noreply@blogger.com (Connrs) — Wed, 30 Jun 2010 12:52:00 +0000

Liquid Lunch!
Beer,
Golden beer out in the sun and eyes squinting at life going by.
Old sun-baked wooden benches with parasols and big dirty glass ashtrays,
The cold breeze and scantily clad women, the smell of too much perfume and of life passing by.
Oh yes.

Sometimes the simplest times are the best.

TTDSPUXNAJKQ Hello Technorati

Check out out the new Digg

noreply@blogger.com (Connrs) — Sun, 27 Jun 2010 22:26:00 +0000

Watching TWiT (This Week in Tech) and checking out the live preview of Digg. Doing some cool stuff and the next paragraph is for some sexy new Digg stuff... Get over to TWiT Live to see more stuff!

6b312a837a444a45904221ac28e5663a

Cake PHP Admin Routing

noreply@blogger.com (Connrs) — Wed, 19 May 2010 14:51:00 +0000

First things first: KISS.

As a developer who (in the early stages of CakePHP’s development) constantly reinvented the wheel with features already available through the framework itself, I am now so cautious of doing so it’s almost an abhorrence rather than a discipline. However, I feel that this particular obvious solution to a problem is worth sharing:

The Problem

I've got an admin prefix set up in my Cake application and I have a custom layout that I want to use instead of the default layout. I don't really want to specify it in all the admin functions within each controller, is there a way to do it within app_controller.php?

Yes:

function beforeRender() {
 if(!empty($this->params['prefix']) && $this->params['prefix']=='admin') {
  $this->layoutPath = 'admin';
 }
}

It's really simple. $this->action is the current action—lower case underscore (eg. the_current_action)— as a string. For a single word prefixed route (admin, manage, moderate, etc.) it is easily searched. You could opt for $this->layout = 'admin_layout' if you like, but I find that using $this->layoutPath affords a bit of freedom in future should i want to have multiple admin layouts and then I can have a specific controller function line that doesn't need to worry about the beforeRender function overriding anything.

Really bored of Facebook

noreply@blogger.com (Connrs) — Mon, 17 May 2010 21:24:00 +0000

I don't really have any profound discourse for you here; I have this underwhelming apathy for it now. You know what? Bring back Geocities, bring back some creativity. The most annoying thing is that people have access to a plethora of real web services and nobody is looking at them. That’s why I spend all my time trying to push real world (hah) links to Facebook instead of relying on the incredibly sinister like button.

Wits End

I’m at my wits end. I enjoy tweeting, I enjoy posting the few photos I have to Flickr, I enjoy blogging and I enjoy sharing my musical tastes on Last.fm; none of my friends ever go there. None of you move past that news feed that you probably barely even bother with. I skim it regularly so that I know what you’re up to and what interesting things you’re doing.

It’s possibly the ultimate irony that I’m doing this to be more sociable and you aren’t even reading this.

More Sociable

That’s right, I wanted to be more sociable with people I couldn’t spend more time with; my wife and daughter take up the majority of my non-work life these days and I love it. Before my ventures into refreshing my friendships with close friends, the Internet (USENET, mailing lists, forums and websites) was for an entirely distinct set of friends—nerds. They wanted to consume information like me: Through a straw. None of them are close friends but they’ve got tastes in accordance with mine and I had some good times during the late hours.

Goin’ Solo

But now I’m sick of Facebook and yearning to go back to those days of online communities and trawling newsgroups at 11pm. That was 10 years ago; I probably won’t be able to find those people again but it may be time to go solo and sack off Facebook. At the very least, until my friends get with the programme and start using the web in a way that suits me; instead of me hoping to impart my daily learnings upon you.

Back to Safari

noreply@blogger.com (Connrs) — Fri, 14 May 2010 09:26:00 +0000

Yup, I've officially switched back to Safari. Chrome was a great ride but it left me missing some core features of OS X that I didn't want to do without. Since moving to Chrome, I've accepted life without some of the more hacky SIMBL plugins that I had and so my return to Safari means that I can wave bye bye bye bye bye suckers to:

Saft
Glims

And I'm saying hello to a number of SIMBL plugins that are free:

And Greasekit that is forever my best friend forever. I've got some plans to work on a special Greasekit plugin too.

Also, I'm no longer blocking ads. No more bastardising the web. If I don't want to see it I'll just do what I learnt to do years ago before ad blockers existed: Let my eyes glaze over and carry on…

This is so meta but…

noreply@blogger.com (Connrs) — Fri, 07 May 2010 14:47:00 +0000

I just wanted to link to the article I wrote on overlinking on social networking feeds to the extent that you don't enjoy……

BOOM!

SYSTEM ERROR

RETURN WITHOUT GOSUB

Please reboot life and try again

A fresh start

noreply@blogger.com (Connrs) — Wed, 05 May 2010 20:00:00 +0000

I decided to start from fresh. No more handrolling content management systems and tacking on my blog. No more reliance on hosting bills and root for something that was a fickle pastime. But now I'm back and ready to rock with a blog hosted on Blogger

It seems almost full circle in a way as Blogger was one of my earliest (although Livejournal was the absolute first) blog services and I never thought I'd return officially. I was agonising over Wordpress.com as it is a really great system and the packages available are so completely full of goodies. The problem is that I know that I can be fickle, I know that I also like control over what I publish too.

It comes down to the mortality of my blog. I look at Google and know that here's a company that's going to last; and, on the back of this super massive search engine, Blogger is going to last too. I want my ramblings to live on and the Blogger service affords me that. Wordpress would allow it too, but I really decided the only real thing that I wanted was the immortality of a blog. Nothing else was important. Once I'd agonised enough, and narrowed it down to one thing, I realised that the free Blogger was the obvious choice.

So I integrated Disqus for the comments system, prepped up some widgets for the sidebar that I'll add soon, whipped up some semi retro CSS and renamed my blog as an amalgamation of all the blog names before it.

I'm currently working on an entry over on my business' blog to really talk about how social networking has moulded and changed me. It's probably the reason I'm coming back to this blog after such a long time.

Anyway. Here's to a new decade of blogging. My blogging career has so far managed to span 3 decades and 2 millennia and this time it's here to stay

So my sister is ill

noreply@blogger.com (Connrs) — Wed, 16 Apr 2008 19:51:00 +0000

Yeah, she's ill. She just had keyhole on her leg and she's experiencing extreme time-offage.

Seriously though, she's not doing too good; my auntie has the dog, and me and my other uncle - my auntie's brother - are cooking for her.

I made her my special chilli con carne. It's my tasty personal recipe that I have received praise for. I'm not going to reveal the ingredients for that dish but I will reveal the ingredients of the vindaloo that my uncle made for her tea the other night.

Hot dog sausages
1 tin of beans
1 tin of tomato soup
A portion of frozen peppers
Tinned potatoes

Apparently it was still quite nice. I've just promised to share my recipe to my sis too.
I may regret that promise… What the hell.

Joe Clark Micropatronage

noreply@blogger.com (Connrs) — Fri, 08 Jun 2007 14:57:00 +0000

What the hell is all this about? It has something to do with accessibility, Joe Clark, and funding a project. Joe wants to embark on a voyage of discovery (The Open and Closed Project) and hopefully wants to finish with some really applicable standards covering “captioning, audio description, subtitling, and dubbing” (from the Joe Clark Micropatronage page).

As it’s most definitely a worthy cause, you really must donate

The Samurai

noreply@blogger.com (Connrs) — Fri, 08 Jun 2007 13:41:00 +0000

Many years ago, when I was a right-wing-validationist standing alongside the puritan/conservative XHTML police, I may have made silly remarks that disagreed with this man but I consider myself to be a pensive and considerate man now and I believe this dude thinks the way I’d like to think.

He displays an unadulterated pure perception of common sense when it comes to accessibility (an -ism that I hold strongly to every day of my life) and bears an impenetrable shield against the fools who can’t tell when they have gone either too far or not far enough.

Joe Clark’s WCAG Samurai is an effort, somewhat similar in intent to the WHATWG Web Hypertext Application Technology Working Group, that hopes to bring some sanity to the WCAG 1.0. It also discusses elements of the modern Web, something that the WAI failed to bring into their WCAG 2.0 correctly; it looks at podcasting, videos, and brings into the fold the idea that many web technologies have already begun introducing their own accessible features (Flash) and it really makes the WCAG 2.0 specs look amateurish. Shocking.

I’ve taken a good slow read through the Errata for WCAG 1.0 on WCAG Samurai and I’ve decided it’s pure brilliance.

Galactic Wonderment

noreply@blogger.com (Connrs) — Thu, 17 May 2007 10:27:00 +0000

I’m fascinated by astronomy, the Cosmos, cosmogony, and popular Quantum Theory. As a child I spent hours a night with my binoculars and my telescope watching the night sky. My much under-enjoyed love of photography stemmed from taking photos of the night sky.

In a very old post from yesteryear, I mentioned our Galaxy is a part of a Galactic Cluster heading towards the Virgo galactic cluster. The idea of clusters of clusters of clusters fascinates me supremely. From the electron orbiting a Hydrogen atom, to planets and comets orbiting our Sun and other suns, to stars orbiting each other in Galaxies, I live in wonder and awe of the greatness of the Universe. That there could be so many stars and galaxies is enough to make you fall to your knees in amazement. To imagine that there are clusters of such size is beyond my imagination.

US Department of Laughs

noreply@blogger.com (Connrs) — Tue, 01 May 2007 19:04:00 +0000

This is an article from http://leech.dk that doesn’t exist anymore. I needed to revive it:

The US government has a new website, http://www.ready.gov/. It’s another attempt at scare mongering in the style of the old “duck and cover” advice after WWII.

The fun thing is that these pictures are so ambiguous they could mean anything! Here are a few interpretations.

If you have set yourself on fire, do not run

If you spot terrorism, blow your anti-terrorism whistle. If you are Vin Diesel, yell really loud.

If you spot a terrorist arrow, pin it against the wall with your shoulder

If you are sprayed with an unknown substance, stand and think about it instead of seeing a doctor.

Use your flashlight to lift the walls right off of you!

The proper way to eliminate smallpox is to wash with soap, water and at least one(1) armless hand.

Michael Jackson is a terrorist. If you spot this smooth criminal with dead, dead eyes, run the fuck away.

Hurricanes, animal corpses and the biohazard symbol have a lot in common. Think about it.

Be on the lookout for terrorists with pinkeye and leprosy. Also, they tend to rub their hands together manically.

If a door is closed, karate chop it open.

If your building collapses, give yourself a blowjob while waiting to be rescued.

Try to absorb as much of the radiation as possible with your groin region. After 5 minutes and 12 seconds, however, you may become sterile

After exposure to radiation it is important to consider that you may have mutated to gigantic dimensions: watch your head.

If you’ve become a radiation mutant with a deformed hand, remember to close the window. No one wants to see that shit.

— If you hear the Backstreet Boys, Michael Bolton or Yanni on the radio, cower in the corner or run like hell.

If your lungs and stomach start talking, stand with your arms akimbo until they stop.

If you are trapped under falling debris, conserve oxygen by not farting.

If you lose a contact lens during a chemical attack, do not stop to look for it.

Do not drive a stations wagon if a power pole is protruding from the hood.

A one-inch thick piece of plywood should be sufficient protection against radiation.

Always remember to carry food with you during a terrorist attack. At least you’ll be able to enjoy a nice coke and apple before you die.

Holiday to Majorca

noreply@blogger.com (Connrs) — Mon, 30 Apr 2007 20:34:00 +0000

Had a bit of a trip to Majorca. Only 4 days. It was pretty nice. There was plenty to keep you occupied.

Trips to Palma
Boat rides around the island
Bars
Shops
Bistros
Bars…

There was a language barrier though; not the Spanish–English barrier you may have expected at first. It was a German resort. It meant that I needed to have two sets of greetings, farewells, and question responses in my head at all times. Waitresses generally expected me and the missus to be German because we didn’t look Spanish. It was quite amusing actually. I could understand but not respond. People kept asking me if I spoke German. But I didn’t know how to say, “no, but I can speak English and the odd bit of Spanish or French.”

We missed the bus for the trips into Palma. We never timed it right and I didn’t want to hang about waiting for a bus all morning/afteroon. The boat ride was cool. Got a chance to just sit for an hour and watch the world go by. A favoured pastime of mine really.

The flight there and back was pretty awesome. Flew over the Pyrénées and saw some pretty awesome ice–capped mountains.

How old is too old?

noreply@blogger.com (Connrs) — Fri, 20 Apr 2007 16:02:00 +0000

The BBC and Channel 4 have both launched, or are launching, TV on-demand services. As we all know, the BBC have decided to embrace an operating system agnostic policy and have decided to not alienate their OS X visitors (I’m not sure how well Linux users will be treated so we’ll have to wait and see).

Channel 4 have decided to get it launched (4od) without embracing this agnostic/open approach. It seems likely, to me, that they will include mac users later on in its lifetime. Something tickled my fancy though. It seemed strange to me and I thought I would let you see.

On the 4od error page, there is a message saying that you need Internet Explorer 5.5 or newer. How old is Internet Explorer 5.5! According to the wikipedia:

Version 5, launched on March 18, 1999, and subsequently included with Windows 98 Second Edition and bundled with Office 2000, was another significant release that supported bi-directional text, ruby characters, XML, XSL and the ability to save web pages in MHTML format. (Windows 2000 included Internet Explorer 5.01 instead.) Version 5.5 followed in July 2000, improving its print preview capabilities, CSS and HTML standards support, and developer APIs; this version was bundled with Windows Me.

Internet Explorer on Wikipedia

July 2000 is the date it was released. In my opinion, 5.5 was a terrible browser and is now 7 years old. Its successor is now 6 years old and has now been superseded. How old is too old? Did they accidentally build in support for IE5.5 or did somebody sit there in a board meeting and say, ‘we need to support people with a browser that is outdated and very possibly unsecure.’

I think it’s too old. I know there of those of you out there saying, ‘but we need to support people who can’t afford these things.’ And I say Linux, Linux, Linux, Firefox, Firefox, Firefox. I have concerns about people who don’t upgrade their computer. Are you the same people who wait until the washing machine is on its last legs before replacing it? Do you still have a black and white TV? Will your TV support DVB when the UK switchover takes place?

I think that content providers should me more concerned about supporting modern browsers rather than 7 year old messes. What are they thinking? On another note, how many of you still support Netscape 4?

Awaiting my Life Poster

noreply@blogger.com (Connrs) — Wed, 06 Apr 2005 16:07:00 +0000

Having previously written about making my own life poster, a technique covered in an article on Mike Matas' blog, I have been since unsuccessful in getting a print.

From the beginning, I submitted a support ticket to Apple requesting that they give UK customers poster size prints. I heard nothing back so I moved on to Kodak and their UK ofoto service. Ofoto also reported that they didn't offer poster sized prints to UK customers and made no other offers to appease me. I quickly moved on to Snapfish who seemed to be unable to handle the 30meg jpeg which I needed to upload. Various browsers were used (I even tried it from a friends XP machine to no avail) before I finally gave up. I was looking around the other day when I discovered PhotoBox. I didn't think that it would be possible but i signed up for a try. The upload page was a java applet with some very dodgy programming. It didn't work for me. I was about to give up until I noticed that they permitted alternative methods to send photos. MMS, FTP, and email. Clicking the link for ftp brought up a nice finder window for me to send my poster to. 10 minutes later and I have a full quality image on their server. And the rest is purely lovely.

Oh and £20.49 ain't bad. And I know what to get for birthday presents now.

The man who…

noreply@blogger.com (Connrs) — Tue, 05 Apr 2005 15:56:00 +0000

Shut down 538 domains for nearly half an hour today

May I express my deep regret for shutting down so many websites today on a well-known web host provider today.

I'm sorry because I didn't stop to look at what i was doing with all the goodies they trustingly let me wreak havoc with.
I'm sorry because I shut down over 500 websites. I don't have any idea of the damage I may have caused their business - or pleasure.
I'm sorry because of the inconvenience I created to the hard-working guys (and gals?) who put in a lot of effort to keep it going.

I really am sorry and ashamed. If you are one of those unlucky people who I cocked-things-up for then feel free to shout. I will gladly take your abuse.

Life Poster

noreply@blogger.com (Connrs) — Wed, 02 Feb 2005 19:27:00 +0000

Those of us who have already seen Mike Matas' post about how to make a life poster, we will have spent several hours picking and choosing photographs from our iPhoto 5 libraries and then used various tools to create a gigantic poster which we can let Apple print for us.

For those of us who live in the UK, we will not have been able to order poster prints. I even started a thread on the Apple Discussions forum because I needed closure on the subject.

Shortly after posting, a helpful Vince Hodgson said, I have no connection with these folks, nor have I ever used them, but I notice [Snapfish] do 20"x30".

The Snapfish service allows you to upload a JPEG image and order prints for it. First attempt failed. Whether or not it is because the file transfer was disrupted or because they have a maximum size limit I do not know. I'm hoping it will be successful. He also advised that I try going to a printing shop instead. I wanted to respond with two statements but I held my tongue. I chose to leave them here:

I don't want to have to move to order the prints, and
have you seen the prices at printing shops?

The whole point of letting Apple do it is because it's so bloody cheap. The local printing shop charges £50 for things like this.

My next project is making a CV (which is the British way of saying resumé) using the iPhoto 5 book themes. A little bit of manipulation and you can have stylish, glossy, black, shiny portfolios for job applications. I might even blog the process… Nah.

Data collection and forms

noreply@blogger.com (Connrs) — Fri, 14 Jan 2005 01:49:00 +0000

Through some simply tail biting behaviour on the WSG mailing list, I have prompted myself to write about forms and tables. There are many who say that the table element shouldn't be used within a form. I tend to agree but I wish to talk about situations where it is potentially useful. I also wish to mention usability of forms as well as accessibility.

Word definitions

Data: The plural of Datum, although it often occurs as a singular noun, implies information (lat. something given). It is used in the scientific world to refer to experimental, or investigated, information.
Tabular: Plane-like, flat. Like a table. In context it means a table data layout.

There are numerous online web-sites which will offer similar descriptions. I tend to refer to either my Longman, and Oxford, English Dictionary and the Longman Guide to English Usage which is a most adequate companion to the former.

Tabular Data

A very interesting axiom which people quote is that, in HTML, the table is for tabular data. It is a suitable definition; but also a definition prone to misinterpretation.

If I could take you away, for a moment, from the world of web-sites, hypertext, binary, and your favourite IDE and show you it from a paper perspective. In the real world, at university (oh the irony is abroad tonight), scientists have a spectrum in which they operate. At the one end is the data collation process, in the centre is the analysis, and ultimately the presentation of the information.

Depending on your field, you will collect information in different ways. Psychologists no doubt employ written questions with informed responses in the space below the question. Statisticians have long sheets with tallies dashing across their pages. Other scientists will often have charts with room for dots, letters, numbers. Some other scientists have sheets and sheets of scribble and junk.

There is only one definite, when it comes to using tables. That is the results. Much numeric information can be better expressed as a table. Accompanied by a graph, chart, or histogram, the results can be reviewed by others for constructive criticism. Other results can be then discussed. Most of the time, however, they can be computed and organised with relationships expressed in columns and rows.

The haziness arrives when we look at data retrieval. Many people believe that data input should be considered to be tabular by nature automatically. This is simply not true. I hate hearing, but it's semantic. What you need to do, before ploughing ahead, is look at how data collation methods are employed.

Data Collation

There are different methods used in data collation. I want to touch lightly upon them.

Questionnaires are used often in situations where information may not be entirely numeric. If you are collecting addresses, names, opinions. Anything where extra information can be helpful. Some data quite possibly could be numeric but it still should be collected in a standard question and answer form with potential for taking further information. This information is collected on several subjects at separate times in a frequent manner over a short period. I call the example of the gauntlet I run at least once a week when I am attacked by the clipboard army wanting to get my name and address on a database to send me credit cards and catalogue accounts. These people will often address many people a day (with varying levels of success) and collect the information on individual pages for each person. The information will often be of a discrete, or non-continuous, form.

Charts are often used in repetitive processes in which the subject, or group of subjects, is often the same each time. Classroom and work registers are an example of such a data collection chart. Other situations include a chart to record temperature readings from a number of freezers in a restaurant kitchen. The subject remains the same on each row with information taken each day and added to the following column. Why is it collected this way? For practical reasons. It serves a purpose that the data collection medium is also the results. For this reason, the information is collected in a tabular format. The information is often collected in a low frequency over a relatively long period. The data will mostly be continuous even if it has rounding errors.

Looking at this, there are justifications for using a table to represent inputs. But can we honestly tell which? I often see people wanting to use tables because they want to use some dynamic forms which confuse the hell out of me. I cite the example of someone wanting to use a select element as the label for an input when indicating a method of contact. This just will not do.

Back to the web

Getting back to the World Wide Web, I want to look at data collection situations and how to justify it. Usability, accessibility and validity. The pillars of our web standards world. Different people take different routes believing them all to be worthy. I want to try to offer you all three.

Let's look at a number of different data collection activities:

User registration,
forum posting,
group travel insurance booking,
those daft quizzes,
an online weight watcher form.

User registration

User registration is a simple question and answer situation. Discrete data such as names, addresses, telephone numbers, email addresses are very simple and a basic form will suffice:


<form method="post" action="/registration">
 <fieldset>
  <legend>Your personal details</legend>
  <label for="salutation" title="Your preferred title"></label> <select> … </select>
  <label for="forename" title="Your first name">Forename</label> <input type="text"…>
 </fieldset>
 <fieldset>
  <legend>Contact details</legend>
  <label for="email" title="Your email address"…>
 </fieldset>
</form>

Looking at this example form you will see that it makes use of several elements. The fieldset element is used to group several related inputs together. Various parts of the name form a set and a contact details set could include email, snail mail and telephone numbers. Now I personally use the p element to address different inputs within a form. Feel free to use your favourite block element, or inline element whilst it is within the fieldset element, such as the div element. I know of one man who prefers the unordered list for forms. The legend element provides information about the relationship between the different information within a fieldset. The label element is absolutely critical for providing information about the input. Without it, how would anyone know what information they are to provide. I have mentioned these because they are important for accessibility. To validate against certain HTML document type definitions (and I am thinking about strict implementations only) you should aim to keep your inputs contained within block elements as they are an inline element. The fieldset element is the obvious choice but you may wish to utilise other elements where is relevant (as mentioned, I use the p element on occasion).

Forums

Forum posting is possibly simpler. Many forums have already stored your registered username and you merely need to type in your post into the textarea element. Possibly providing a title to your post. I won't bother giving an example. If you've read this far, you can do this already.

Group insurance

Group travel insurance booking is the subject which spurred me on with regards to writing this piece. Imagine a situation where you wish to book travel insurance for a pub trip abroad. The insurance company wants the details of each person and there are 25 people. The question which was asked on the mailing list was, can I use a form to create the form? Initially, the questioner could probably make it a valid HTML document and doubly accessible. Even though the information is actually discrete, each table row could represent a person and each cell would be a different piece of information. The cell would need to contain both the input and the label elements. The reason this was suggested was because it would be simpler than having a fieldset with inputs for each person which would take up some serious scroll space on a page.


<form method="post" action="/groupinsure">
<table summary="…">
<caption>Group insurance registration</caption>
<thead>
<tr><th>Full name</th><th>DOB</th><th>Address</th></tr>
</thead>
<tfoot><tr><th colspan="3"></th></tr></tfoot>
<tbody>
 <tr>
  <td><label for="name1" title="Name for traveller 1">Name</label> <input type="text" …></td>
  <td><label for="dob1" title="DOB for traveller 1">DOB</label> <input type="text" …></td>
  <td><label for="addr1" title="Name for traveller 1">Address</label> <input type="text" …></td>
 </tr>
 <tr>
  <td><label for="name1" title="Name for traveller 2">Name</label> <input type="text" …></td>
  <td><label for="dob1" title="DOB for traveller 2">DOB</label> <input type="text" …></td>
  <td><label for="addr1" title="Name for traveller 2">Address</label> <input type="text" …></td>
 </tr>
</tbody>
</table>
</form>

If I spent some time on it I could make a fully accessible (to the specification) form. With respect to accessibility, its poppy-tosh. Imagine if you saw that repeated for each person. The example above only asks for a small amount of information and could include a multitude of additional cells. I would be clicking the famous Nielsen back-button right away. Imagine, for example, that you have separated the registration information into individual fieldsets much like the user registration example above. Then you construct a self-posting form which presents a new, and blank, user registration form each time. You could use PHP sessions or even keep the form data as hidden fields within the form until the number of registered users tallies with the number specified initially. If you have trouble visualising this idea then let me know and I'll elaborate upon it.

Online quizzes

I know that both you and I hate them. That doesn't mean I don't know you haven't filled about ten of them in. Possibly more. It depends how much you like memes. Most of them consist of approximately 20 to 30 questions with varying levels of commitment to something.


<form>
<fieldset>
<legend>Do you like owls?</legend>
<ol>
<li><label for="owls-love" title="Yes i love owls">Very much</label> <input type="radio" name="owls" id="owls-love"></li>
<li><label for="owls-yes" title="Yes i like owls">Yes</label> <input type="radio" name="owls" id="owls-yes"></li>
<li><label for="owls-ok" title="Owls are ok">No, but I don't feel aggressive towards them</label> <input type="radio" name="owls" id="owls-ok"></li>
</ol>
</fieldset>

This is a reasonable method of applying markup to something like this. I can't really comment on radio inputs because I tend to avoid them. I would only use them for multiple choice answers which could have a small discrete range of approximately 6. The select element would be a good choice for anything larger as it doesn't visually aggrieve the page. I can't comment on how a screen-reader would vocalise the output but would welcome any input regarding the differences between how a radio input group and select options are spoken.

Online weight-watcher form

I know of online weight watching schemes and believe that weight and diet and several variables are recorded on a regular basis. There could possibly lie a small inkling of a chance that a grid layout would be applicable. It's incredibly tenuous, I know, but I'm trying to logically look at tabular data collation and how it can apply to HTML. If it were to be marked up in this way, there would need to be label elements used to indicate the cell inputs. I would advise looking at Roger Johansson's article on the table element called Bring on the tables for information on scope and helping to show further relationships. I'm not going to elaborate on this example because I think you can follow me. If you don't understand, I shall further update this text to describe it.

Conclusions

Data collation is a discipline which can help us create more usable forms. Look at the information which you need to collect. Do you need it? What range of information do you need. Is the data continuous, discrete, or continuous data grouped into discrete ranges? How often will it be collected? How many subjects are there? Will multiple pages make it easier to process? Are you imagining a specific style? Would some simple CSS do the same job? Is the input likely to be several strings, or alphanumeric characters.