Quick tip: Grounding a site design in Google Chrome

As Google Chrome’s market share grows it has become necessary (in my pedant’s eyes) to acknowledge that some people will be viewing your site without a status bar and subsequently with no grounding or footer space. In order to combat the unsightly finish this gives to a site, I have decided to include a border-bottom: 3px solid #ccc; in the body style for the new Outside In Media site – http://outsideinmedia.co.uk A minor issue, but also easily fixed.. so check it out.. and maybe you might want to use it in...

Django, Nginx and Memcached

My sites are hosted on a VPS (with very sparse memory allocation), so i’m looking to minimise memory usage wherever possible. I also had the joy of watching my Django FCGIs for http://the-hive-mind.com get completely annihilated by metafilter.org a few weeks ago – i think it stood up to the first 200-300 requests.. then completely died. Anyway, I have just launched a website for a friend in Nepal, who runs a trekking business (he comes highly recommended if you ever want to go hiking in that region). Basically, I decided to try and load test the Django instances on the site, to see how much traffic it could handle… i downloaded and installed siege.. which (as the name suggests) lays siege to your web server. My out of the box Django FCGI being called by a Nginx instance was only capable of reliably handling up to about 10 concurrent connections before it started dropping requests.. not really acceptable (caching, at this point.. was completely turned off). So I set about sorting out caching. I read the Django documentation.. and quickly decided that the built in caching wasn’t quite to my liking. I already knew a little about memcached, and wanted to use it to cache my generated responses, so the fact that Django supported it was nice. However the idea of using a the Django cache middleware doesn’t really cut it. Nginx supports memcached.. so why would i want to fire the request off to my (inherently bulky and inneficient) python FCGI instance? just to use python’s undoubtedly slower memcached library to return the cached content? I wouldn’t. The solution I’ve come up with is somewhat simplistic, however it DOES...

Is code validation important in web design?

Something I’ve noticed recently which makes me wonder about people’s understanding of how web design works is the designer/developer obsession with validation. I’m definitely not the first to realise this (i’m pretty sure i read an article not so long ago at jeffcroft.com – where Jeff made the same point), but i’ve been surfing the web a bit this weekend, and noticed how rampant this issue really is. Validation of web sites is a good goal(a best practice), however it is not something that requires you to put a badge on your site.. or a link saying that you are CSS2.1 valid. Customers, clients etc don’t care… they care about whether or not your web site works (preferably in all browsers). Valid code is something all web designers ought to be producing, but you shouldn’t put a badge up on the site.. it’s like putting a badge that says “MY WEB SITE WORKS” – of course it does, the person reading your little badge is viewing the page. This site validated while I was building it, but i think now the CSS is technically invalid (i use the opacity: property a bit). But when a site i build is valid, I’m not screaming it from the rooftops, what if something I add breaks the validation later? Besides.. I take it as a given that a site I produce will validate (at least the XHTML – I sometimes use similar CSS hacks to save time.. shrug). It comes down to a question of pragmatics. In any real world project there comes a time where you have to sacrifice what you KNOW is...

Target=_blank kills usability

Adding a target=”_blank” attribute to an A tag has long been seen as a way to keep users on your site. This logic is fatally flawed (i was under the impression that this was commonly agreed upon, however i’ve had to argue the point with a few people recently).  Firstly, what does target=”_blank” do? this attribute makes a link open in a new window (or new tab in some more modern browsers) – the thinking used to be that the user was therefore STILL on your site as well. However this concept breaks the standard usability in the browser: the back button stops working – often times leaving the user confused. Furthermore, advanced users will automatically use CTRL/APPLE click to open links in new tabs anyway, so this functionality has no real purpose. Keeping a copy of your site open as well as the link that your user wants to see was often seen as leading to longer visit times on your site – however this statistic means nothing if there is a window in front of your site that is showing the user different content. Also, if a user clicks on an external link from your site and they don’t want to come back and keep reading your content, then you having sneakily left a copy of your site open behind the link they clicked is more likely to irritate them than help them – and the last thing you want to do is irritate your audience. So don’t target links to...

Create a simple Ajax RSS Widget with Jquery

So, suppose you want to embed the headlines from an RSS feed into your site. Assuming you’re not so fussed about SEO, but rather are looking for a useful piece of content for your users, you can use Jquery and Yahoo Pipes to easily embed the headlines (and summaries if you like) into your page. Step 1: Create a Yahoo Pipe for the RSS feed (or feeds) that you want to include. You need a Yahoo account to use pipes, so if you don’t have one, you’ll need to get one. Once you have it, just log into the pipes site here: http://pipes.yahoo.com You want to choose, Sources > Fetch Feed – this will add a Fetch Feed box into your pipe editor, now link this with the Pipe Output. That’s it (Pipes are extremely powerful, however this i all we need for this particular example). Here’s how the final pipe looks: Save the Pipe. Go “Back to My Pipes” and get the URL for the new pipe as JSON. Mine pipe URL is: http://pipes.yahoo.com/pipes/pipe.run?_id=b5c348713f1c84193acf3723d4d148a9&_render=json Now that you have the JSON url, we can use jquery to render these results into a useful widget on our page. Firstly, we need to make sure that Jquery is being included on our page. I do this using the google hosted solution, so basically it is loaded from google’s servers (and cached). So, in the head of your page (if jquery isn’t already there) we add this: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> Step 2: Set up our markup and CSS Now we create the necessary markup to hold our results. Where you want the widget to appear, we...