Recently, we at Outside Line launched a new website for Golden Wonder’s new noodle brand, The Nations Best. In a departure from the normal day-to-day, I built the bespoke server-side functionality to power the nifty Flash front-end. In doing so, I put together a few PHP libraries, one to access the Flickr API and one to access the Host IP geolocation service API.

Both classes, being built at the same time, have a similar structure and similar functionality. They both feature a cache mechanism to limit your requests and enhance performance, and the both are pretty open ended in what they allow you to do. The Flickr class allows access to any method that doesn't require authentication, and returns the results as a PHP array, (in the same format as the original Flickr response).

The Host IP class is slightly more limited, but is easy to extend if more information is required. The results are obtained form a parsed XML response, and contain information outside of the latitude, longitude, city and country. Because of the way in which SimpleXML handles the name spaces, there is also bit of hacking in place to parse the XML.

You can download the Flickr and Host IP class, and they are both offered freely but with no support or guarantee.

My recent adventure in writing a jQuery plugin led to me considering what other notionally unattainable client-side information could be gathered using a bit of Javascript and CSS manipulation. A bit of playing, (and a lot of understanding Safari’s rather greedy method of storing styles) has resulted in my second jQuery plugin in as many months.

With the same disclaimers about elegance and infallibility, this plugin allows you to test a user’s browser history against specific URL, returning a true/false value if they have visited the site in question.

Much like my previous effort, this plugin works by creating an HTML element, in this case an <a> tag, and some associated CSS properties to alter the element in a measurable way. In this case, by adding some very specific styles to the :visited property of the link that can be measured in a fairly precise manner if the link has been visited in the past.

This isn’t a bulletproof solution, however. You can only blindly test against the browser history, so need to make educated guesses and allow for changes in a URL, (such as trailing slashes or additional query string parameters). I’ve found that testing for one or two minor variations gives the best result – I might even add some minor intelligence to the function to account for this.

As before, the plug-in is of beta quality but seems to work in Safari 3, Firefox 3+, and IE 6+. I’ve created another example page, where you can also download version 1.0 of the plug-in in uncompressed and compressed form.

Author’s Note – This is a reproduction of a boxout written for the ‘Exploding The Myths Of Web Design’ feature in .Net magazine, issue 189.

Have you ever been handed a design for a website and wondered what font the designer has used for the body copy? Because I can honestly say I never have, and this certainly isn’t down to web designers having a love for Georgia and Arial. Instead, it’s down to a common misconception that the only fonts that can be rendered in a browser are the old ‘favourites’. The thing is, a modern web browser is perfectly capable of rendering any font that a user has installed, and because of the popularity of particular software packages, the list of relatively commonplace fonts includes some beauties.

On 24 Ways, Richard Rutter showed that if you take into account fonts installed by Windows and Mac OS X along with those from Microsoft Office and Adobe’s Creative Suite, the resulting list includes some rather lovely serif and san-serif fonts that a designer can use to bolster their designs. With some carefully selected fall-backs, there’s no reason why a good developer can’t provide users with Caslon or Jenson in place of Georgia, or Helvetica Neue in place of Arial. By using the CSS font-weight property, you can even use differing weights to further enhance your work.

Most websites are launched to a specific audience or demographic, and if they aren’t then your marketing team is missing a trick. If you have a good idea who will be looking at your site, it’s then easy to treat them to some nicer typography. For example, Panic achieves this on the company’s website for FTP client Coda by using Helvetica Neue Light, after surmising that the majority of visitors will be Mac OS X users, who have the font installed on their system by default. Even if you don’t have such a targeted audience, you can still play the percentage game, and in doing so, you can at least treat a portion of your visitors to a more refined, unique look. Call it typographic progressive enhancement!

I’m a massive fan of pushing the typographic capabilities of our current crop of web browsers and the supported HTML and CSS standards. I’m not talking about embedded fonts or Flash/Javascript-based font generation but using simple CSS rules to bring nice fonts to the user, if available on their system. Richard Rutter, Guillermo Esteves and myself have all published tutorials on how to include non-generic font families in your CSS declarations—the very same methods that allow me to use Adobe Caslon Pro on this website.

These methods are excellent for progressively enhancing the typography of a website, but are, (rightly so), based on providing a carefully selected set of fall-back fonts should the favoured family be unavailable. At present, there is no elegant way to determine whether your chosen font is being used and, if not, which of the numerous families in your font stack are instead.

Although I am loathe to call this solution elegant or fail-safe, I’ve tried to solve this problem by building a jQuery plug-in that should shed some light on which families your site is rendering in, and allow you to alter a site’s behaviour, content or appearance accordingly. I’ve created a demonstration page that uses the plug-in to show which of the fonts you currently have installed and enabled out of a list that is fairly arbitrary, (the fonts currently active on computers around the Outside Line office).

The plug-in works by generating a paragraph of text, outside of the viewport, in a monospaced font. The paragraph is measured and re-rendered in the test font, (if available). If the paragraph dimensions change, then the rendered font must have too, and so the family must be installed/enabled.

Usage of the plugin is fairly simple, returning a boolean true or false value when you pass in a CSS-style font-family declaration. You can also pass in, optionally, a font-family declaration that you know is different in dimensions and available to test against, should the defaults not work so well.

The plug-in is of beta quality, and has only been tested to the extent of the fonts available to me. It works in Safari 3, Firefox 3+, and IE 6+. A lot will depend on the font names/post-script names/family names of the fonts you are testing for, as they tend to differ between vendors. In terms of example usage, aside from the demonstration pages, I’ve updated the about section of this site to deliver a more relevant message describing the design of the site. You can download version 0.1 of the plug-in in uncompressed and compressed form.

Outside Line are looking for a LAMP developer to join our team in Exmouth Market, London. We need someone who is obsessed with producing efficient code, fast queries and well-structured applications. We use the Codeigniter and Zend frameworks, but appreciate you might have experience with another MVC set-up. Bonus points will be awarded, (in order of importance) for any experience in internationalisation and/or localisation, server administration and putting the milk in before the teabag/water. We ideally want someone with agency experience looking to step up to a bigger league and make their mark.

You’ll be working with extremely talented designers and developers, and me, at a top UK agency on projects for clients such as Queen, Paul McCartney, Oasis, Cravendale, the BRITs and Diesel. You’ll be joining a tight knit studio that love producing exciting content for the web, (with a bit of table football and Gears of War on the side).

Salary will be dependent on experience and is negotiable. No remote workers, people who can’t work in the UK or agencies. If you are interested, email your CV/portfolio to bens@outsideline.co.uk.

Outside Line are looking for a front-end developer to join our team in Exmouth Market, London. We need someone who is obsessed with producing clean, accessible and semantic mark-up and loves nothing more than pushing browsers to their limits with CSS and Javascript, (particularly jQuery and/or Prototype). Bonus points will be awarded, (in order of importance) for knowledge of PHP, MySQL, Codeigniter and MVC and putting the milk in before the teabag/water. We ideally want someone with agency experience looking to step up to a bigger league and make their mark.

You’ll be working with extremely talented designers and developers, and me, at a top UK agency on projects for clients such as Queen, Paul McCartney, Oasis, Cravendale, the BRITs and Diesel. You’ll be joining a tight knit studio that love producing exciting content for the web, (with a bit of table football and Guitar Hero on the side).

Salary will be dependent on experience and is negotiable. No remote workers, people who can’t work in the UK or agencies. If you are interested, email your CV/portfolio to bens@outsideline.co.uk.

Apache’s mod_rewrite functionality allows you to redirect and rewrite your web site URLs, providing a developer with an easy way of creating human readable, well structured and, most importantly, navigable page addresses. It’s used by almost all Apache-based software from Wordpress to Codeigniter. Enabling it within Apple’s latest iteration of Mac OS X is, unfortunately, a bit of a fiddle.

Updating the Apache configuration to allow the use of this functionality is achieved by modifying two files, one for the global web-server directory and one for your local web-server directory, (the much easier-to-access ~/Sites folder). The first file to be modified is the global configuration file, and it needs to be modified around line 205.

The second file, allowing you to use mod_rewrite within your own ~/Sites folder, is the one that seems to break Apache on a more regular basis. The values below, located at the top of the file, yielded the best results, enabling the functionality without causing server errors.

After making and saving these changes, you’ll need to restart Apache, (easily done via the ‘Sharing’ system preference pane, just un-check then re-check the ‘Web Sharing’ checkbox). If everything went well, Apache should start up again and you should have full mod_rewrite functionality.

I was the second Ben to be employed at Outside Line. Its confusing—I've never worked with a Ben before. The other Ben gets more phonecalls too, so I'm constantly getting interrupted by shouts and calls across the office intended for someone far more important. This has led to the coining of a nickname thats slightly less irritating than a tropical disease. I'm often referred to as Ben 2.0.

For those in the know, this couldn't be a less apt nickname for me. I hate buzzwords. I hate acronyms intended to talk about technologies in a marketing-friendly manner. As a senior developer, dealing with clients and their techical requests is only impeded by the presence of terms such as AJAX, Web 2.0 and Rails. Roger Johanssen, a respected web standards advocate in certain circles, wants to provide these clients with another stick with which to beat us. He brings you POSH.

The problem with using acronyms as a method of simpifying technological terms is that they provide an easy means for the client to advocate a particular development course or technology, with little or no education of the consequences. While I respect the people I work for immensely, and believe they provide excellent direction, comments, ideas or suggestions, it should be very clear that with regard to building a website for an advertising/record executive or movie mogul, the developers are the experts. I can guarantee that they have built more websites, read more material and spent more time honing their knowledge of how 'hasLayout' actually works. This is the reason they are paid what they are paid, and why they are in the meetings with the clients in the first place.

So it gets very difficult, and often uncomfortable, when you are presented with a client who happens to know a few of these acronyms, and decides he wants to use AJAX onhis website. He hasn't got the faintest idea of what that means or how it will work. But all of a sudden, the knowledge that I have on how best to address a specific problem has been overruled by the guy who has the money, and thus the final say. In the same way that armchair football fans think they know all they need to from the tabloid sports sections, he thinks he knows all there is to know from four letters and a brief explanatory blurb, and is using that to dicate how a project should proceed.

Don't get me wrong, I firmly believe in using semantic HTML—its the way websites should be built. Always. I just don't see what value it brings to the table in terms of educating a client in how an industry works and what a technology does. If they are having trouble understanding a concept, acronym-izing it will not make any difference, aside from allowing them to repeat it at every subsequent meeting with the next poor developer.

Having just posted a few links about products that I regulary use, like or enjoy, I thought it may be pertinent to mention that from time to time I may add a referral code if it gains me some small benefit. I wanted to put this right out there in the open so nobody could accuse me of trying to cash in on this site or of being underhanded, but also because it is the sort of thing I would appreciate knowing when I visited a website.

Although I haven't sifted through the archives of the site in great detail, any referral links I post from around the time this article is published onwards will be followed by a dagger, (†), to ensure you are aware that they exist. The only exceptions to this rule are the reviews, (which nearly always contain Amazon Associate links to the UK store).

In case you are wondering, I chose the dagger because, (a) it still leaves me room to refer to footnotes using asterisks/numbers and (b) I am a type nerd.

I don't often think to post tips on using HTML/CSS anymore, partly because they are more than likely already out there and partly because it is such a stale and dull way of generating content on a website, (second only to posting 'best of' lists). Sometimes though, the odd discovery warrants an entry, if only for personal reference.

Using pseudo selectors to generate content after elements, I noticed that Safari, (2.0.4) would more often than not fail to generate content if a 'last-child' rule was applied tp the element as well.

The CSS above would quite often result in all of the list items losing their 'pipe'. However, if the code is changed to target the first child and apply the content before the element, the problem disappears.

I have no idea why this happens, and no idea if this will be solved for the next release of Safari, (or even in the nightly builds), but it seems to solve an irritating little problem that pops up from time to time, (on the archives page of this very site, for example).