supersonic feet

I just bought an iPhone and so, naturally, being a web developer I’ve started looking at what can be done with iPhone apps. Having a look at one of Apple’s demos (iPhoneButtons) reminded me that of course you only have to develop for Safari on the iPhone and therefore can use some of the nifty CSS3 features that are already available in Safari.

Developing iPhone interfaces might be an interesting way to get to grips with a few CSS3 features where in a normal web project you wouldn’t want to use them yet.

Following a recent trend for ‘live re-designs’, I’ve rashly (it’s 1.15am) decided to start re-designing this website in its live state.

What that means for tonight is that I’ve replaced the stylesheet with a super-basic one, including the reset.css and typography.css files from the Blueprint CSS framework for a quick-start on the whole vertical rhythm thing. I couldn’t quite bare to quite leave it at that though, so I’ve quickly made sure the flickr ‘badge’ at least displays back up at the top of the page where it was along with the main links. Totally untested in anything but Firefox 2 for now though.

The idea (or at least part of it) is that by having your live website showing all the progress (or lack thereof) while re-designing encourages you to get a move on and get something done.

We’ll see

At Gottabet we’re looking for a ‘web application designer’ to join the team. The job entails a range of web dev, from helping design various sections/features of the website to implementing them in HTML and CSS.

There’s a full job spec on the website, so if you’re a developer who’s big on web standards looking for an exciting, fast-paced job working on a big social website, check out the job spec and get in touch with Wim and Bertrand (email addresses on the linked page).

At Gottabet, we’ve started to migrate the website to a cleaner, wider layout that I’ve been working on for the past few months. We started by launching a new homepage and a couple of weeks ago we trialled a new signup page (via A/B test) and then rolled that out for everyone. Yesterday we launched our new Bet Detail Page. This week I’m working on getting a number of the ‘basic’ pages ported over and after a great start hit one of the most frustrating IE6 bugs for some time.

On Gottabet we often absolutely position a ‘Bet on it!’ button over a bet image in listing pages - so it sits on a corner of the image. Most of the time this works absolutely fine - you have a div containing the bet image and the ‘bet on it’ link. The div is styled with position:relative and the ‘bet on it’ link is position:absolute, with the necessary top, left, right or bottom spacings for wherever it needs to sit compared to the image.

For the one page I was working on today though, it all went wrong. Very, irritatingly, wrong.

The problem: relatively-positioned elements on the page would move from their correct (effectively inline) position in IE6 and shift down a hundred pixels or so and right a bit. To confound matters further, I found that it depended on whether I refreshed the page while looking at the top or the bottom of the page in the browser. When scrolled to the top, the relative elements moved down on refresh. If scrolling to the bottom of the page and hitting refresh, on reload they’d be too high.

After searching for known issues with IE6 and position:relative, I found a couple of common problems that didn’t seem to apply to me: the peek-a-boo bug and hasLayout.

The hasLayout issue seemed close, but the div with position:relative was already triggering hasLayout thanks to having a specified width and float:left. The symptoms also didn’t quite match up (mine seemed much weirder). In the end, I resorted to what I should have done much earlier and set up a test page with an extremely stripped-down verson of the page content - only the bare minimum of the grid layout with no header/footer and only the CSS relevant to the part of the page that was breaking.

It worked fine. This was a good sign, because it at least meant there was definitely something causing the problem, so I started adding code (and the relevant styling) back in until it broke. Turns out a containing div had position:relative on its own, with nothing to trigger hasLayout in Internet Explorer. It didn’t affect the case where it was being used, but by the time it filtered down to the next relatively-positioned block things were going crazy.

After 3 hours (most of them going round in circles before I started the stripped-down HTML version - there’s a lesson), all it took was adding a width to that containing div to trigger hasLayout in IE and all was well once more.

So be warned: the hasLayout bug gets nastier when you have nested blocks using position:relative!

The top-secret project I’ve been working on since moving down to London at the end of October had a still-quite-secret launch late last week and now we’re ready to tell a few more people.

Without further ado, I present Gottabet.com!

Gottabet.com is a social networking site where people exchange challenges and bets on any event they can think of, from “I bet it’ll be a white Christmas this year” to “Nobody can catch a pigeon” (thanks to my brother, Christian for posting those two).
I say a ’still-quite-secret’ launch last week, but only in as much as it was limited to a small number of people. The launch itself was far from secret, held in a pub where we got drunk people to take part in silly bets and dares. The result was a set of photos that I’ve added to flickr under a new Gottabet-specific account. There are some pretty funny pictures (especially the two people racing to fit the most Maltesers in their mouth), so check ‘em out.
On a more techy note of possible interest, the site has been developed entirely in Ruby on Rails by a team of 5 developers (including me, though I’ve worked much more on the HTML/CSS side of things). The site was built in around 6 months, which is even more impressive when you find out that for the first few months there was only one developer (Peter) working on it. The other three (Rich, Ken and Phil) joined within a few weeks of each other around September time and I joined at the very end of October.

The team is completed by (and indeed started with) two Belgians: the founders Wim Vernaeve and Bertrand Bodson. They came up with the idea around a year ago and have gone from simple idea to launched website in that time. There’s a team photo on the ‘about Gottabet.com‘ page. Mini-profiles of each of us will be added soon too.

To get you started, have a look at my latest bet: I bet at least one of the presents I’ve ordered won’t arrive in time. It’s just for peanuts, no money needed

The most useful developer tool for Firefox has just hit it’s first version 1.0 beta and has added some great new features.

Firebug gives you all kinds of javascript and CSS debugging tools that help you track down where errors are coming from. For example, you can inspect a single HTML element and see the CSS that’s being applied to it, as well as where that CSS is coming from (filename and line number). With 1.0 beta it even shows you any CSS that would have been applied, but is getting overridden by other style definitions.

If you develop websites, you need this plugin.

Vitamin does link to some good stuff. Latest in the list is an article on Digital Web Magazine by Aaron Gustafson about the poor, neglected button form element. I have to admit I am one who’d seen the dodgy uses years ago and ended up ignoring it well before I got into standards and CSS, so the article is a mini-revelation in terms of form styling.

Basically, if you can think of an instance (and I can think of many) when you wish submit buttons weren’t so bloody hard to style (or differentiate from other inputs without adding classes), read the article.

Philipp Lenssen just posted a nice short piece on how Google’s homepage would stack up in filesize when written in XHTML Strict compared to its current invalid HTML, Google Strict vs. Google Deprecated.

I have to second what he says - any argument for keeping deprecated code based on filesize is quite silly. Valid XHTML (almost?) always reduces file size and both download and render times. Philipp’s XHTML version comes in smaller than the current live Google version at 2.86k compared to 3.08k. Not a big difference, but multiple it a few million (billion?) times for all the traffic Google gets and it mounts up.

Where I think you’d see a much bigger difference is on the actual search result pages. With much more data (all in tables, which beef up code size quite a lot), the difference should be much more marked. Aside from that, I imagine that the results pages are seen much more often than the homepage. With more and more browsers having search bars alongside their address bars, people will increasingly not use the actual front page of search engines as they go from a small input box in the browser itself to the results page.
The results page would be harder to code in XHTML with CSS and still degrade properly in very old browsers (something Google has to think about more than most), but I’m sure it could be accomplished. Things are mad at work as we move a couple of hundred websites to a new server, but if I get the time and inspiration before someone else does, I might have a go at it as it’s very interesting.

As part of my work at Net Effects, since Christmas last year I’ve been working on a new online shopping system wherever other client work allows. For a good few years, Net Effects have run an online shopping site called UK Shopability but when I joined the company last year they had already started getting a bit fed up with the old system.

The old Shopability suppliers stopped doing online mail order recently, having been bought out, so the decision was made to start a new site to re-launch the whole thing, working with the main distributor of disability products. And thus was born Disability Warehouse, an online shop for disability-related products.

We opened the site up to orders a couple of days ago and already a few have been coming through despite not advertising the site yet, so it’s looking good.

The site uses AJAX in places (mainly for adding an item to your cart and admin functions), though this is a site aimed at users with disabilities so it degrades properly if JavaScript is turned off and just submits a form the old-fashioned way. Some bits of the site are still being fine-tuned (e.g. product images that are missing), but the site is ready to go which is why it’s now open to sales without much fanfare - we’ll get a low volume of real sales to start to make sure everything really does work (it does so far!) before we ramp up to inviting all the many customers over from the old Shopability site.

I would have posted this on Friday, but I’ve been having severe trouble with my site going down so here it is now…

Via CSS Beauty, I found .net magazine’s 20 pro tips article online. It’s an article listing 20 tips for writing better HTML/CSS, apparently handed down by professionals. It then goes on to list some helpful tips as well as some unhelpful or plain contradictory ones.

The main one that got me was tip 14: use semantic markup which followed on to the contradictory tip 17 on wrapping textaround images. Tip 14 is sensible - use semantic markup when writing your HTML (though it lacks any info for the uninitiated as to what semantic markup actually is, or links to places to find out).

Tip 17 then provides, as .net describes it (quite accurately), “a quick and dirty way of wrapping text around images”. They suggest using the align=”left” (or “right”, etc.) attribute in the image tag. What happened to semantic markup and doing any kind of presentation in the CSS? Would it have been that hard to provide a CSS class to do the alignment and explaining why that’s a better way of doing things? After all, these are ‘pro tips’, not ‘HTML techniques from the pre-standards era’.

Tip 9 uses the inline style attribute as well. Why? In other tips they provide CSS definitions so they’re obviously assuming their readers can figure out how to use separate stylesheets. Rather than have style=”..”, provide the CSS:

form {
margin:0;
padding:0;
}

It’s no wonder people end up writing poor code when the major magazine in the UK on web development is providing pro tips that are anything but. I actually had to check that CSS Beauty hadn’t accidentally linked to an article from a few years ago, but no - it really was added just this month.