Foxy fonts of the future

Any web developer who’s ever tried to introduce an old-school graphic designer to the ins and outs of web design will know how easy it is to make their brain melt and trickle out of their ears. One of the killers for a typical designer is the lack of control over fonts. Well, things are getting a lot better. Most browsers now support downloadable fonts in one form or another, and it looks like the next-but-one release of Firefox will get some very tasty new font rendering features in the form of support for ligatures, stylistic alternatives, tabulated numbers and more.

Fonts on a Firefox development build

Fonts on a Firefox development build

If you’ve got an interest in fonts on the web you really do owe it to yourself to take a look at this page to get an idea of where things are heading. Although this is experimental work in Firefox, there’s a good chance that similar features will make their way into Safari, Chrome and Opera, before (hopefully) getting ratified into a proper standard.

It will be a long time yet before designers can assume support for these features in the majority of web browsers that are actually in use, but at least the future looks a little brighter for font fans and designers alike.

Where are the Firefox GPS add-ons?

Firefox 3.5 has been out for a few weeks now, and amongst all the exciting new features is an API for geolocation.

In theory this means that a website can ask the browser where you are, and you then get prompted as to whether or not to let the site know. Of course that raises the question of how the browser knows where you are in the first place.

Firefox uses “geolocation providers” – small bits of software that can provide geolocation information to Firefox, so that Firefox can provide it to the website. By default Firefox ships with a geolocation provider which makes an educated guess about your location based on the wifi hotspots in the area – assuming your computer has a wireless card. This works reasonably well for a wifi-enabled laptop, but it’s far from GPS-level accuracy, and doesn’t help if you’re on a machine with no wifi card at all (in which case it bases its location information on your IP address – which puts my desktop machine about 100 miles away from its real location!).

So what can you do if wifi-based location just isn’t suitable for you? In theory it’s possible to use different geolocation providers which source their data from different places. On “Fennec”, the mobile browser based on Firefox, there’s a provider for the built-in GPS of the Nokia web tablets. But there doesn’t seem to be an add-on to let the normal version of Firefox get that same information.

There is an extension that lets you put in a fixed latitude and longitude, which is fine for a desktop machine – but that hasn’t been updated to work with the release versions of Firefox 3.5. Most GPS units connect to a PC using fairly standard and well-known serial protocols running over a Bluetooth or USB connection – yet I can’t find any add-ons which will allow Firefox to access those data.

I hope that either I’ve just missed them in my searches – or that suitable geolocation providers are coming soon – because it would be a real shame to see the potential for geolocation in the browser get ignored for want of such a little bit of code.

There’s more about the geolocation feature at the Mozilla Hacks site, and based on the comments there, I’m not the only one wondering where the GPS integration is.

Apple, my Chumby thanks you

In the past few posts I’ve praised my little Chumby and the small but fascinating distractions it provides throughout the day, but although it’s a great device, it’s not perfect.

First there’s the price. It’s expensive. $199 to the yanks, which should mean about £120 over here with the current exchange rate. By the time delivery, VAT and “import charges” are added, I’d be surprised if I get any change out of £150. That’s a lot of dough to drop on a little device like this, when netbooks are a similar price, and I can pick up a 3.5″ digital photo frame for £13, and an 8″ wi-fi enabled one for £100. Yes, I know they don’t exactly do the same thing… but try explaining that to the people who can’t understand that the Chumby is more than a “fancy alarm clock”.

In fairness there’s not a lot that Chumby Industries can do about VAT or “import charges”. It’s just a shame that there’s no UK distributor so that I can purchase a Chumby at a known, fixed price in UK Pounds without the gamble of currency fluctuations and import duties which can easily turn a reasonable price into something far less palatable.

Anyway, price aside, I would personally like to see a few other changes to future Chumby hardware:

  • I’d lose the accelerometer. It’s a nice idea, but the fact that the Chumby has an umbilical power lead trailing out of its back means that picking it up and shaking it isn’t as easy as you might think. I’ve tried Chumball, but now I just use the accelerometer to occasionally start the Newton’s Cradle going, and to switch widgets.
  • I’d add a couple more buttons to the top or front of the device – preferably at the top left and right. These would be used to manually cycle through the widgets. Usually I’m happy for my Chumby to cycle randomly on its own, but sometimes I do want to return to the previous widget, or skip to the next one. Although I can hold the top button and tilt the device, it’s awkward compared with just pressing a button.
  • With the accelerometer gone and a different way to switch widgets, I’d also change the functionality of the top button. I’d use a quick press to pin or unpin the current widget, and a longer (2 second) press to bring up the settings screen. I only occasionally want to change the settings, whereas I want to pin the current widget far more frequently. For people whose preferences are the other way round, there could be a setting to swap these two cases.
  • I’d adjust the plastic frame to make the screen lean back a little more. It’s too vertical when sitting on a desk. Just a few degrees would do it.
  • Finally I’d add a wired ethernet socket as an option. The Chumby works well as a wifi device, but wifi isn’t always the best option. We don’t have wifi where I work, so I’ve had to buy a USB-to-ethernet adaptor (adding to the overall price of the Chumby) in order to use it.

Unfortunately Chumby Industries don’t sell an approved adaptor, leading to an online hunt for a compatible device. The most widely recommended devices aren’t readily available in the UK, so I decided that I would buy an Apple MacBook Air adaptor and follow some instructions I found online to put some system files on a USB thumb drive in order to get it working.

Luckily for me the most recent firmware upgrade (1.7.1) enables the Apple adaptor by default, so in the end I didn’t have to play with system files or USB drives. I just had to plug in the adaptor and boot the Chumby. So much for this note on Apple’s packaging (click for the full size): 😉

apple_ethernet_label

Chumby: An art gallery on my desktop

I love wandering round art galleries – but I don’t really like the way most of them are organised. Most galleries take the “museum” approach of labelling and categorising. All the Old Masters are over in that wing, separated into rooms by country and year. The modern pieces are over here, cubist that way, surrealist this way.

Categorising art like that is great if what you want is to go and look at the Dutch Old Masters without the distraction of those nasty modern pieces getting in the way. Or if you want to look at a pile of bricks and an unmade bed, without those staid old portraits and bowls of fruit trying to drag you off into the world of the mundane.

But I don’t really like my art categorised. I like it spontaneous. I like it unexpected. I like to be surprised. I like to stumble across a melting clock right next to a stalking tiger, or an epic sea battle alongside Oberon, Titania and the bloke with the nut. Give me different artists’ views of the same scene, or interpretations of the same event, even though they’re separated by time or culture. Give me soft blurred impressionism right alongside ultra-realism, and pointillism alongside cubism.

I suppose what I want from art is no different to what I want from music. An art gallery’s works can be cut and dissected in a myriad of ways, just how I see collections as freeing us from the historical constraints of the music album. I love the serendipitous pairings of tracks that can come from playing your music in random mode; I guess I want a big “shuffle” button at the entrance to a gallery.

This desire to be surprised by randomness is perhaps one of the reasons why I like my Chumby so much. In amongst the clocks and calendars I’ve added plenty of widgets which either display pictures from the internet, or which are small works of algorithmic art in their own right. When one of these widgets randomly appears on the screen, it can be an amusing, intriguing or fascinating distraction for a few seconds. Some of the images can be so random that they serve as a great reminder of the sheer amount of variety present in the human race.

I’ve pulled together a few of my favourite widgets into one virtual Chumby below. I don’t view them all in succession like this – on my real Chumby they’re interspersed with a large number of other channels – but it does give you an idea of the kind of random things that appear on my screen throughout the day:

The particular selection of widgets there pull data from these websites:

I have two particular favourites: The first is “Doodles – Diary of a Chumby” which actually makes some sense of the inane witterings of that part of the Twitter crowd who think we really want to hear their every internal thought tweeted. The second is the “COLOURlovers Pallettes” widget – it’s amazing how evocative and interesting just a collection of four or five colour bars can be.

Edit, 1 May 2012: Ironically of the two widgets that I called out for particular praise, the first is no longer available and the second doesn’t seem to work anymore.

Chumby

A couple of weeks ago I bought a Chumby – I bought it secondhand, but it had all the original packaging.

A Chumby is essentially a small internet-connected touchscreen and speakers. Yes, there’s more to it than that, but that’s what really matters. It displays little applications (“channels” in Chumby terms) and cycles through them. Some you can interact with via the touchscreen or by physically moving the Chumby. Others are just non-interactive and used to display information – weather, news headlines, or just the current time. Below is a “Virtual Chumby” which gives you an idea of what it looks like:

The electronics are housed in a soft plastic and leather exterior which is stuffed with padding to create a rounded, tactile, squishable device. It’s the antithesis of most modern electronic devices: the designers have gone out of their way not to create yet another hard, unfriendly lump of gadgetry, but instead to make an electronic device that is cute and cuddly – well, as cute and cuddly as anything with a flat, rectangular screen can be.

In use I’ve found the Chumby to be a real delight. I’ve got it on my desk at work, with an extensive collection of channels installed. It lets me keep track of recent headlines, view a variety of random images, and keep an eye on the time, all in the background without requiring a significant “context switch” (as would be needed if I wanted to track these things using a web browser on my PC).

A lot of people don’t “get it”. Comments range from “so it’s a fancy clock then” to “what’s the point?”. Unfortunately those people seem to be in the majority – which might explain the failure of the Audrey, a similar device launched a few years ago by 3Com. Chumby is likely to succeed where Audrey failed at least in part because the smaller size of Chumby Industries compared with 3Com means that they can get a way with less profit and a smaller market for the device.

If you’re the sort that does appreciate the niche that Chumby fills, however, I can thoroughly recommend it. I’m seriously considering whether I can justify buying a second one, and I know at least two other people who are also seriously considering buying one. If there was a UK distributor then the decision would be easy, but the vagaries of importing something into the UK make it a bit more of a financial gamble, which is enough to put people off.

Toning down drop shadows in Firefox 3.5

One of the new additions to Firefox 3.5 is support for the CSS3 “text-shadow” rule as a means to add drop shadows to text. Ideally this would be used to add subtle shadows and glowing halos – but like any presentation tool it’s open to abuse (think <blink> and Powerpoint).

After upgrading to Firefox 3.5 I immediately noticed that headings on planet.ubuntu.com were a lot less clear and a lot more distracting than they were before. Particularly egregious are those entries with a number of headings and sub-headings in rapid succession – such as this one (click for the full size version):

Too much drop shadow can be distracting

Too much drop shadow can be distracting

Personally I find that much drop shadow to be offputting and confusing – and it certainly distracts from the content. In this case a potentially useful and informative post is lost amongst a sea of gaussian blurs.

This is the bit of CSS that’s responsible:

h1, h2, h3, h4, h5, h6 {
  background-color:transparent;
  color:#6D4C07;
  font-family:Verdana,arial,helvetica,sans-serif;
  font-size:100%;
  font-weight:normal;
  margin:0;
  padding-top:0.4em;
  text-shadow:0.2em 0.2em 3px #999999;
}

There are, to my mind, a couple of problems with the text-shadow line. Firstly the offset (0.2em 0.2em) is a bit too big – 0.1em gives a “softer” look. Secondly the shadow is a bit too dark – #999999 (or just #999 for short), whereas I prefer something more subtle, such as #aaa (a bit more subtle) or #ccc (a lot more subtle).

In order to fix this you need to edit your userContent.css file – or more probably create it in the first place. There are also various extensions which let you apply your own rules to the CSS on a given site, but this is the approach I prefer to take, as it doesn’t involve adding a new extension just to fix a single site – but if you want to change the styling of several sites, an extension might be the way to go. For everyone else, back to the userContent.css file – you can find out how to create this file here.

Once you’ve created a userContent.css file, you need to put some CSS into it. In this case I want to limit the rule to only apply to sites in the planet.ubuntu.com domain, using a mozilla-specific CSS extension, @-moz-document. The rule itself is just a variation on the normal rule to reduce the spacing and the darkness of the shadow – plus the !important keyword to ensure that it will override the default stylesheet. In other words, for the copy and pasters reading this, I added the following chunk of CSS to the bottom of my userContent.css file:

@-moz-document domain(planet.ubuntu.com)
{
  h1, h2, h3, h4, h5, h6 {
    text-shadow:0.1em 0.1em 3px #ccc !important;
  }
}

The result of this hackery – after you’ve restarted Firefox – is a subtler collection of drop shadows:

That's better

That's better

If you don’t like drop shadows at all, you might prefer to switch them off entirely:

@-moz-document domain(planet.ubuntu.com)
{
  h1, h2, h3, h4, h5, h6 {
    text-shadow: none !important;
  }
}
Look Ma, no shadows!

Look Ma, no shadows!

Or perhaps you would like subtle drop shadows on the most important titles, but none at all on the deeper levels of subtitles:

@-moz-document domain(planet.ubuntu.com)
{
  h1, h2 {
    text-shadow:0.1em 0.1em 3px #ccc !important;
  }

  h3, h4, h5, h6 {
    text-shadow: none !important;
  }
}
The best of both worlds

The best of both worlds

Posted in Tech, Web. No Comments »

Firefox 3.5

Firefox 3.5 was officially released yesterday. If you’re already running Firefox 3 you should get prompted to upgrade in the next few days – but if you want to expedite matters you can choose “Check for Updates…” from the Help menu.

As there are quite a few Linux users who find this site, I’ll point you in the direction of this post about how to install Firefox 3.5 on Ubuntu. Alternatively you could just make do with Firefox 3 until the release of Ubuntu 9.10 in October. Users of other distros will have to search for instructions themselves, I’m afraid.

If you’re not running Firefox at all – or you’ve got a really old version – you can download the whole thing from firefox.com

So what’s new in Firefox 3.5? In short, loads! I think that this is one of the most exciting browser releases from any vendor in quite some time. For years the web has stagnated due to old standards, but recently browser vendors have started to add new features which will really drive the web forward, not just as a content delivery platform, but also as an application platform. With more and more services becoming web based, additional browser functionality translates into more powerful applications.

Apple, Opera and Mozilla have been pushing the web forward with new technologies for a while now, but there wasn’t much integration between the disparate features. You could use SVG for vector diagrams, or draw to a bitmap using the Canvas element. But each technology was separate – a stand-alone rectangle in an HTML page.

With Firefox 3.5 there is much more integration between these new technologies. The native video playback has been fairly widely publicised – but some of the best demos include pulling video frames into a canvas element for further processing, playing a video within SVG content to allow it to be stretched and scaled, or using SVG filters and masks to alter the display of your HTML content. SVG and canvas move from being self-contained mechanisms for drawing to the screen, and instead become another tool that HTML authors can wield in order to produce interesting results.

So with that fawning out of the way, here are some links to a few technical demos which show off some of the new features of Firefox 3.5:

One of the most impressive new additions is the Video element – which allows for native playback of video files within the browser. This means no Flash plugin is needed, and the content is more accessible to scripting. Unsurprisingly there have been a number of demos showing the kind of things you can do with video as a native object:

There’s some pretty cool stuff going on there – and these are just the technical demos. Now that 3.5 has been released, I’m sure we’ll start to see some very interesting uses for these new technologies.

One final thing – it’s not a new feature, as such, but an improvement to an old one that didn’t quite make it into Firefox 3. You may have noticed the appallingly named “Awesome Bar” in Firefox. Yes, to you and me it’s just an address bar that also searches your bookmarks and history – but to a marketing department that’s “awesome”. Anyway, in Firefox 3 it usually presented you with pretty good results in the drop-down list, but there was no way of controlling those results – to only show bookmarked pages, for example. Well, now there is.

Yet again Microsoft miss the point

I can easily write a web page using standard HTML and CSS and have it display correctly on every major web browser… except Internet Explorer. I can even throw in some advanced code in the form of SVG, canvas and some CSS3 – relatively cutting-edge stuff – and have it display correctly on every major browser… except Internet Explorer.

Most browser vendors, you see, are proud of how well they implement the standards published by the World Wide Web Consortium (the W3C, as they’re known). They’re proud of the fact that a web site written to these specs will work in their browser just as well as it will work in a competing browser. They understand that the days of “This page is best viewed with Netscape” are – or at least should be – long gone.

Microsoft, apparently, didn’t get the memo. They’re still proud of the fact that they can write web pages that only their browser can display. They’re still living in the world of “Best viewed with Netscape” only they’ve gone one further – “Only viewable with Internet Explorer”.

Microsoft Australia, you see, has created an online treasure hunt with a chance of winning $10,000 (that’s Australian dollars, so about £5,000) – but the page you need to track down is “a cleverly concealed webpage that only Internet Explorer 8 can view”. Furthermore, if you do visit the site using a non-IE browser, you’ll get an insulting comment about your choice of browser:

  • Visit with Firefox and it says: “you’ll never find it using old Firefox. (So get rid of it, or get lost.)”
  • Visit with Safari and you get told that your browser is “boring”
  • Visit with Chrome and it says: “you’ll never find it using that tarnished Chrome (So get rid of it, or get lost.)”
  • Opera gets off lightly – you just get told “you’ll never find it using that browser” – but that’s probably just a default if it doesn’t recognise your browser (which is itself an insult to Opera)

So well done Microsoft Australia. Not only are you actively encouraging browser-specific sites – something that everyone else has been trying to get away from for the past five years – but you also think that insulting your potential users is the best way to encourage adoption of your less-than-impressive browser.

Update, 19th June 1009: Okay, I know I can get a bit wordy sometimes. Mitchell Baker (Mozilla’s “Chief Lizard Wrangler”, or “Boss” to you and me) has a much more succinct and to-the-point post about this which is worth reading.

Another one to try

It seems that every man and his dog is bringing out a netbook OS of some description. Jolicloud another that looks interesting – it appears to be a Linux-based OS with a netbook optimised UI.

From their “First Look” screens, there appear to be a few interesting features that differentiate it from most netbook operating systems:

  • Integrated social networking. Yes, Moblin has this, but Jolicloud seems to take it to the next level – showing you what applications your Jolicloud-running friends have installed as implicit recommendations for apps you might want to try
  • There’s no real distinction between web-based apps and local apps – they all get installed in the same way, and all get a launcher icon. You can get a similar effect on a desktop PC using something like Prism, and Ubuntu even has a few web apps as prism bundles in their repositories already
  • It claims to run Linux and Windows applications. It’s not clear how it runs the latter – the screenshots show a WINE launcher, but I’m not convinced I’d want to sell a new netbook OS on the back of running Windows apps under WINE, as it’s far from being 100% compatible.

I applaud the addition of another option for consumers in the netbook world, but I do wonder if Jolicloud has enough interesting features to stand out from the crowd.

Posted in Linux, Tech, Web. No Comments »

Why is there no AND for regular expressions?

Here’s a Javascript regular expression which will match a string which contains at least one lower case letter:

/[a-z]/

And another which will match a string with at least one upper case character:

/[A-Z]/

I can even stick these together in at least two ways to create the equivalent of a logical OR – in other words a string will match if it contains at least one lower case letter OR at least one upper case letter:

/[a-zA-Z]/
/([a-z]|[A-Z])/

What seems to be missing is a simple way of concatenating two regular expressions (and, by extension, more than two) such that the target string has to match every sub-expression for the result to be a match. Other than calling regex.test() once for each sub-expression, I can’t see any simple way to AND several regular expressions together like this.

It’s a shame really, because I’d love to be able to do something like this, to make sure that the user has selected a password of between 8 and 16 characters, which must contain at least one numeral, and which may optionally contain some punctuation characters (using the & character to AND together the terms):

var bIsComplexPass = /(.{8,16})&([0-9])&([!"£$%^@~#]*)/.test("[email protected]");