Skip to Content

Latest Posts


Much will be written…

Much will be written about these riots long after the event. By the politicians, using the loss of livelihood as a trump card against their opponents. By the social media ‘gurus’, seeking to extol the tools of their trade while promoting their latest seminar. And by the press, repeatedly and salaciously describing the violence in the pursuit of readership gains.

The sight of local businesses boarding up their properties at 3pm in anticipation of looting sickens me. That I must walk through a roughly-cut opening in this armour plating to buy a pint of milk is hugely saddening.


Augmented (hyper)Reality

The latter half of the 20th century saw the built environment merged with media space, and architecture taking on new roles related to branding, image and consumerism. Augmented reality may recontextualise the functions of consumerism and architecture, and change in the way in which we operate within it.

This is brilliant – Keiichi Matsuda manages to entertain, amuse and challenge in this short video. A disturbing look into our future?


My scratch site. What’s yours?

My scratch site. What’s yours?

Every website has a similar structure upon which everything else grows. HTML for content markup, CSS for styling, JavaScript for interaction. My ‘scratch site’ is a set of files that forms the basis of every new website I create. It’s evolved organically over the years, updated for HTML5, and I thought I’d share it with you in the hope that I can improve it with the insights of other developers. Plus, it might be useful to you, too.

HTML

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta http-equiv="content-type" content="text/html; charset=utf-8" />
      <meta http-equiv="X-UA-Compatible" content="chrome=1; IE=edge" />
      <link href="favicon.ico" rel="shortcut icon" type="shortcut/ico" />
      <link rel="stylesheet" type="text/css" href="css/reset.css" media="screen" />
      <link rel="stylesheet" type="text/css" href="css/stylesheet.css" media="screen" />
      <script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
      <!--[if lt IE 9]><script type="text/javascript" src="js/html5shiv.js"></script><![endif]-->
      <script type="text/javascript" src="js/scripts.js"></script>
      <title></title>
   </head>
   <body>
   </body>
</html>

Points of note:

  • Line 1: HTML5 doctype declaration. Pushes browsers into standards compliant mode.
  • Line 2: Language attribute in the HTML tag. Think global.
  • Line 4: Setting your documents character set is important regardless of whether you think you’ll be using ‘special characters’ or not. Don’t make the browser guess.
  • Line 5: chrome=1 enables Google Chrome Frame for IE users if they have it installed. WebKit rendering is simply superior to that of IE, so I see this as a quick win. Additionally, IE=edge tells IE versions 8 upwards to render your page to its best capabilities, regardless of compatibility options or intranet settings etc.
  • Line 6: I haven’t actually included a favicon.ico in the downloadable ZIP, but I keep it in the HTML to remind me that it’s a good thing to do. If only to help users out when they’re trawling for your site in their bookmarks.
  • Line 9: Could very easily be replaced with a version of jQuery from a CDN – I deal a lot with intranets at work where locally-served copies are preferable, so modify this to suit your own needs.
  • Line 10: The very-excellent HTML5 Shiv allows the use of HTML5′s new semantic elements on lowly versions of IE that typically would refuse to style them otherwise. Referenced here in a conditional comment to stop it loading unnecessarily.

CSS

You’ll see I have an empty stylesheet.css file in the download. This is deliberate, as I start with a blank slate here thanks to Eric A. Meyer’s Reset CSS. Browsers have wildly different interpretations of how to render unstyled HTML markup, with varying defaults that can cause a headache down the line if you don’t reset them first. It’s small but targeted, zeroing out margins and padding where required, as well as setting sensible defaults for sizing from which you can modify to suit your needs.

JavaScript

I’m a big fan of jQuery so include it in most projects where I have more than a trivial amount of interaction to code in JavaScript. It takes the hassle out of browser compatibility for AJAX functionality and tasteful visual effects, as well as enabling many of the CSS3 selectors for browsers that lack native support.

Namespacing your JavaScript, through any one of the various methods available, is a good thing. Polluting the global namespace with your code is a bad thing. I structure basic JavaScript applications this way:

// Register global objects
var isRob = {};

// Page has loaded, initialise
$(function() {
   isRob.appName.init();
});

isRob.appName = function() {
   return {
      init: function() {
      },
   };
}();

You can see I dump all of my code under the isRob namespace, with functions declared within. Typically I’d also include a isRob.utilities object for functions that aren’t application specific and may be used by multiple modules. While I’m quite proficient at JavaScript, this is probably my weakest area of front end development – I can get the job done just fine, but I have a lot to learn when it comes to simulating inheritance and doing things in the best object-oriented way in which you can coax JavaScript to operate.

Get the code

So, to the download. Get it here, as a ZIP. Thoughts welcome.

Photo credit: aditza121 (Flickr)