Inspire Labs

BetterXML

John Wright — Wed, 05 Oct 2011 14:03:49 +0000

Everyone hates the way that PHP’s SimpleXML object handles variables. We find ourselves constantly checking if the string we’ve been given back contains numeric or boolean values. Well… here’s a quick fix.

&lt;?php
 
/**
 * A decorator for SimpleXML to add 2 important things:
 * 1) The "hasChildren() method".
 * 2) The "asVar()" method which uses type checking to discover integers and boolean values.
 *
 * @author John Wright
 */
class BetterXML implements ArrayAccess, Iterator
{
  /**
   * The SimpleXML object
   *
   * @var SimpleXMLElement
   */
  protected $simple_xml;
 
  /**
   * Integer value used for iteration.
   *
   * @var integer
   */
  private $pos=0;
 
  /**
   * When methods don't exist in this class, check the decorated
   * SimpleXMLElement object.
   *
   * @param string $method
   * @param mixed[] $args
   * @return mixed
   */
  public function __call($method, array $args=array())
  {
    if (method_exists($this-&gt;simple_xml, $method))
    {
      return call_user_func_array(array($this-&gt;simple_xml, $method), $args);
    }
 
    throw new BadMethodCallException("Method BetterXML::$method() does not exist.");
  }
 
  /**
   * Constructor
   *
   * @param string|SimpleXMLElement $content This can be a string containing XML content, a string representing a path to an XML file or a SimpleXML object
   * @return BetterXML
   */
  public function __construct($content)
  {
    if ($content instanceof SimpleXMLElement)
    {
      $this-&gt;simple_xml = $content;
    }
    elseif (file_exists($content))
    {
      $this-&gt;simple_xml = simplexml_load_file($content);
    }
    else
    {
      $this-&gt;simple_xml = simplexml_load_string($content);
    }
  }
 
  /**
   * Decorate all SimpleXML objects with the BetterXML class.
   *
   * @param string $var_name
   * @return BetterXML
   */
  public function __get($var_name)
  {
    $var = $this-&gt;simple_xml-&gt;$var_name;
    return $var ? new BetterXML($var) : $var;
  }
 
  /**
   * Setting will actually set to the decorated SimpleXML object.
   *
   * @var string $name
   * @var mixed $value
   * @return void
   */
  public function __set($name, $value)
  {
    $this-&gt;simple_xml-&gt;$name = $value;
  }
 
  /**
   * Decoration method for SimpleXML::_toString().
   *
   * @return string
   */
  public function __toString()
  {
    return (string)$this-&gt;simple_xml;
  }
 
  /**
   * Returns a variable other than BetterXML.
   *
   * If this has children, the method will just return itself.
   * If the content is numeric, the method will return an integer or float.
   * If the content is either "true" or "false" the method will return a boolean.
   * If all else fails, this will return the content as a string.
   *
   * @return mixed
   */
  public function asVar()
  {
    if ($this-&gt;hasChildren())
    {
      return $this;
    }
 
    $var = trim((string)$this-&gt;simple_xml);
 
    if (is_numeric($var))
    {
      return strpos('.', $var) !== false ? (float)$var : (int)$var;
    }
    elseif (preg_match('/^true$/i', $var))
    {
      return true;
    }
    elseif (preg_match('/^false$/i', $var))
    {
      return false;
    }
 
    return $var;
  }
 
  /**
   * Returns the decorated SimpleXML object.
   *
   * @return SimpleXMLElement
   */
  public function getRaw()
  {
    return $this-&gt;simple_xml;
  }
 
  /**
   * Returns a boolean depicting whether this element has
   * children.
   *
   * @return boolean
   */
  public function hasChildren()
  {
    return $this-&gt;simple_xml-&gt;children() &gt; 0 ? true : false;
  }
 
  /**#@+
   * @see Iterator
   */
  public function current()
  {
    return $this-&gt;offsetGet($this-&gt;pos);
  }
 
  /**#@-*/
  public function key()
  {
    return $this-&gt;pos;
  }
 
  /**#@-*/
  public function next()
  {
    ++$this-&gt;pos;
    return $this-&gt;offsetGet($this-&gt;pos);
  }
 
  /**#@-*/
  public function rewind()
  {
    $this-&gt;pos = 0;
    return $this-&gt;offsetGet($this-&gt;pos);
  }
 
  /**#@-*/
  public function valid()
  {
    return $this-&gt;offsetExists($this-&gt;pos);
  }
 
  /**#@+
   * @see ArrayAccess
   */
  public function offsetExists($offset)
  {
    return isset($this-&gt;simple_xml[$offset]);
  }
 
  /**#@-*/
  public function offsetGet($offset)
  {
    $var = $this-&gt;simple_xml[$offset];
    return $var ? new BetterXML($var) : $var;
  }
 
  /**#@-*/
  public function offsetSet($offset, $value)
  {
    $this-&gt;simple_xml[$offset] = $value;
  }
 
  /**#@-*/
  public function offsetUnset($offset)
  {
    unset($this-&gt;simple_xml[$offset]);
  }
}

The Journey of the Inspire Labs Logo: Chapter Four

Steve Lambert — Fri, 04 Jun 2010 16:14:01 +0000

So here we are at the end of our (admittedly long) journey…

Before we get to the finished thing, we’ll have a look at the last few things I did to get there. This will involve playing with shapes, colours and a couple of fonts.

Actually, while we’re on the subject of fonts — I actually went ahead and chose a combination of Museo and Museo Sans, so that’s that topic addressed already.

Right, so the text has moved to the right of the logo. Since the logo will be appearing predominantly on the web, the logo doesn’t have to shrink too much before the text becomes unreadable—this format will keep the sizes of the text and the logo a bit closer and it will also fit better in the top-right of a typical web layout.

I’ve also gone for a blue for now.

“Let’s liven thing up” I thought to myself. So I tried adding some shapes around the swash. Lots didn’t work, but a nice rounded squares was most promising.

Not exciting enough though. “I’ll skew the crap out of it!” I thought, and so I did.

Looks a bit more interesting, but still not quite the powerhouse of excitement and wonder I was hoping for. Then I decided to take it to a whole new level…

“Now we’re getting somewhere”! This maybe moving away slightly from the idea that logos should have a strong contrast—so they can work on any background colour, but who cares. Besides, it’s totally acceptable these days. I tried some more with the skewed shape too.

I fell in love with this, and decided to try it in some other colours…

Here’s my thoughts, anyway: the red looks a little too Adobe, the green is a little too BP (especially bad at the moment!), but in the end, I settled for the good old blue I’d been using all along.

So there you have it. It’s now 17:13 on a sunny Friday, so rather than waffle on I’m just gonna say “BYE BYE”!

Herzlich Wilkommen Pete!

Brighty — Fri, 04 Jun 2010 12:22:28 +0000

Who are ya? I’m Pete Chamberlin (Spelt like Cham, and Berlin)

Where are you from? Norfolk

…and your chosen specialist subject is? Just general knowledge really. I like being a jack of all trades!

Currently on Spotify, I am mostly listening to… Nashville Skyline by Bob Dylan.

How do you take your tea/coffee? Tea. Milk no sugar. I’m sweet enough.

What books/blogs are you currently reading? Mythical Man Month by Fredrick P. Brooks. Poems of W.H Auden, selected by John Fuller and some other, proper geeky books!

The last place I went on holiday was… a Greek island. Small Cyclades. Beautiful, hot and secluded.

When at the pub, I’ll be having… a Bitter. Preferably Adnams.

My favourite animal is… Well, In real life, I prefer dogs to cats. But on the internet, I prefer cats. The internet is made of cats.

My least favourite sport is… Curling. I can’t stand it. WTF do you watch it for? Or play it for that matter? It’s a ridiculous sport!

If we could employ a famous face in the team, who would you choose? I think Jack Nicholson would be a laugh.

Mac or PC? Linux

Beatles or Rolling Stones? Stones. Music with BALLS!

Marmite or Peanut Butter? Marmite

Night Owl or Early Riser? Early Riser

White Hart or Refinery? White Hart. I’ve not been to the Refinery yet. They keep a good pint at the Dickens.

What are your thoughts of the team so far? Many and varied. Mostly positive!

And finally… if your friends had to describe you in three words, what would they be?
That’s an impossible question that one! Maybe: very, very difficult.

Marine website set for smoother sailing

Brighty — Fri, 04 Jun 2010 09:56:02 +0000

Over the last few weeks, we have been focussing on some major SEO improvements for one of our brands which sells boats…

The Problem

The website was performing moderately for boat manufacturer based searches within Google search results (such as “fairline boats for sale”) but there was still much room for improvement.

Along with manfacturer based searches, we also wanted to improve our ranking for the most generic term of “boats for sale” for which we were appearing around page 10 of results.

So what did we do?

We focussed on three main areas:

Document outline – Over time, as the website grew, the document outline got a little left behind. We ensured that all pages throughout the website were semantically correct; whether you were looking at the homepage, a list of boats or an actual boat itself. Obviously the benefit from this being that spiders can crawl our nicely strucutred pages much easier.

Friendly URL’s – All page url’s were made up of the standard symfony stucture based on search criteria. This would work well for when a user performed a real search on the website, but for popular pages we want to encourage regular crawling of, it didn’t work well at all. For example, previously the page for displaying all Beneteau boats for sale would have been http://www.MYWEBSITE.com/Boats/preSearch/ locationCountryId/0/manufacturer/Beneteau/clearAll/1 and has now been updated to a concise http://www.MYWEBSITE.com/Search-by-manufacturer/Beneteau

The updates on the URL structures affected:

Popular Brands
Country (great for our long tail indexing)
Boat types

Obviously, we had to put some 301 rules in, so we can catch old pages successfully

Stop the SPAM!

YBW is lucky to have a thriving forum community. So whilst the discussions grow and grow, so does the amount of instances of links in the YBW portal navigation (shown below).

Whilst these links are valuable for a user; for a spider it could be considered as keyword spamming. So we simply made these links nofollow if they were found within the Forum.

The Results

As mentioned above, our generic search of “boats for sale” saw us somewhere around 100+ on Google.

We continued to monitor daily to see what affect our changes were having. Generally, our new URLs were indexed within 2 days. In terms of the generic search results placement, we saw a steady progress upwards to pages 4-5 of SERPs within the first two weeks.

Today, we are appearing at the top of the second page (14th postition) which is a fantastic climb within only three weeks of putting the changes public. Obviously, we still have room for improvement by getting to the first page; but we have some further ideas in the pipeline!

The Journey of the Inspire Labs Logo: Chapter Three

Steve Lambert — Wed, 12 May 2010 10:05:21 +0000

We’re getting there. Finally.

Whilst I still need to move some anchor points around and tweak some curves, the swash logo is nearing completion. So much so that I’ve gone ahead and started testing it with various fonts. As I (think I) said before, my font library is a bit limited, so I’ve had to make do with what I have plus the odd GPL typeface.

I’ve also decided to stick with sans serif typefaces to contrast with the swashy-serif logo. Most of the fonts that have made it to the final choices have ended up being fiarly modern and geometric.

We’ll start with my least favourite, below. The idea of using monospace font Anonymous Sans in a camel case format came from all that coding the rest of the team do.

The problem is, obviously, that the font is mainly intended for use at small sizes in a text editor. As such it doesn’t look that sexy at larger sizes. Also, the idea is kinda cheesy to begin with anyway!

Next up is Quadranta.

Quite modern and geometric, but don’t feel it fits absolutely right myself. I love the lowercase ‘e’ though!

Time for something classic, Helvetica Neue Light.

Well you generally can’t go wrong with a bit of Helvetica, though I might need to play with the kerning a bit.

Let’s switch it up a bit with a touch of slab-serif — Museo 300.

I think this works really well. It’s modern, quirky & sexy — just like our team!

Myriad Pro next, which is one of my current favourite sans typefaces.

Myriad Pro Regular, above, looks solid and modern against the logo. It’s condensed font, below, is sturdy too but looks just a little too corporate for my liking. I mean that’s fine and everything, but it doesn’t really fit our team that well.

Finally, Lovely geometric typeface Geo Sans Light.

Pretty good. Nice and modern looking; and a nice compliment to the logo, but I think the weight is a little too light to stand up to the heavy logo.

Well there’s a lot to think about there, but my clear favourites are:

Museo — although I’m going to have another look at the 500 weight.
Myriad Pro Regular.
Hopefully a slightly thicker alternative to Geo Sans, if I can find one. That happens to be free!

Next time, I’ll be showing off the winning font, and going over what I’ve done with colours. Exciting.

:: EDIT ::

By the way, you are encouraged to share your thoughts in the comments below…

Thanks

The Journey of the Inspire Labs Logo: Chapter Two

Steve Lambert — Thu, 25 Mar 2010 11:50:25 +0000

In my last post, we looked at some initial sketches. Sketching is an important first step in any design as it allows for rapid creation and evolution of ideas. It also allows the rejection of any bad ideas before any time is invested producing mock-ups in Illustrator, Photoshop et al.

I’ve since taken the most promising of the initial ideas and produced some quick mock-ups in Illustrator. It’s worth mentioning that I’m yet to have a proper look at colours and fonts — that’s for the next stage and for now I’ve just used a nice blue. Anyway, the eye-candy ….

The “thought bubbles” and the “labs” balance this logo out quite nicely. I’ll probably put a little more work into this one as I think it could look really good with some refinement and a decent typeface.

Myriad Pro Condensed & Semibold (top). Quadranta Bold & Myriad Pro Semibold (bottom).

The “spot” logo hasn’t come out as well as I thought it might. It reminds me of cheese, and there are spacing issues. As the logo gets smaller (and it will on the web) it begins to get rather cluttered. With some work towards spacing it all out this could be improved, but I don’t think it’ll ever look brilliant. Besides, that letter “l” looks like a lower-case “i”. Rubbish!

However, Museo Sans is looking pretty sexy!

Museo Sans 500, ladies & gentlemen.

I developed the idea of using the initials a little further, removing the spot and joining the letters up in a nice “swishy” ligature style.

I was quite enamoured with this one and took it straight into Illustrator …!

I've used Helvetica Neue Roman for the text.

There’s some messy vector work right there, but it’s only a mock-up. Nevertheless, I think it’s starting to look like a believable logo. It has some nice symmetry, it’s balanced, a little tall maybe but this is definitely going to the next stage. With the right colours, a smart font and some wizardry with the pen tool; we might have ourselves a logo ….

Out with the Old, In with the New

Adam Pancutt — Mon, 22 Mar 2010 17:38:55 +0000

So Ladley decided to leave us. Boo! He’s a bit of a greedy guy that one; someone with a finger in almost every pie. From starting out as the Team Leader of the Southbank division he eventually ended up in the greatness that is Inspire. After nearly three years at IPC he heads for pastures new, and good luck to him!

On the flip-side, today we introduce to you Mr Peter Chamberlin! Chambers, or Cham for short and C for shorter (and to avoid confusion with the Jankers) is our latest recruit. A photo will be available for you to admire soon but for now, an applause will do…

The Journey of the Inspire Labs Logo: Chapter One

Steve Lambert — Tue, 16 Mar 2010 13:49:49 +0000

Adam has been banging on at me to get a logo designed for this blog. So, as proof that this is actually happening, I’m going to record the journey here starting with the initial sketches.

First I thought I’d have a play with the two tittles (the dot above the letter ‘i’) in the word ‘inspire’.

: Tittle play for the Inspire Labs logo

This moved on to a team motif thing, using heads in place of the joining circles. As you can see, I quickly decided that it resembled some sort of crappy crown.

Eventually I decided to leave this direction well alone as I wasn’t happy with how it was looking. The results were a mixture of cheesy and just plain ol’ crummy!

I did however quite like the thought bubble as an idea, so that moved on to the next iteration. I began by plopping it over the letter ‘i’.

I think the top version is the neatest, as the bubbles are contained within the space between the x-height and the cap-height of the text. In the bottom version the thought bubbles look a little tacked on. Granted this is just a sketch, but I don’t really foresee any nice results coming from this solution. So I moved on to playing with the positioning a bit more.

Here I’ve tried moving it above the letter ‘n’ so that the largest bubble sits above the initial ‘I’, serving as a kind of pseudo tittle.

This led me on to the following treatment which would involve a spot logo containing just the ‘I’ and ‘L’ placed next to the text in some way. This solution would look great as a favicon and could potentially work well as a logo.

The next steps will be to consider a colour palette; look at some fonts (there’s no budget for this so I’ll have to rely on what I have!); and to try some of these ideas out in Illustrator. Stay tuned…

YUI3: My First Experience

Adam Pancutt — Tue, 16 Feb 2010 09:29:55 +0000

With the Yahoo! User Interface (YUI) javascript library now the library of choice at IPC I thought it was about time to start playing with it.

Background to Javascript Frameworks

My first experience of a javascript library was to build a debug console for my framework. Version one of the console was built in jQuery (v1.2, I think). I liked it. I liked how you no longer needed to repeat the same cross-browser checks every time you built something new; how effects were easy to acheive without having to create your own; chaining. Most importantly, though, I liked how the library made the development experience a little more unified.

First Taste of YUI

A few months later I decided to migrate the jQuery console to YUI2. I quickly found that the documentation was not brilliant for new-comers (and still isn’t). My migration, although worked, was not how YUI2 intended a widget to be built. Overall, it took me a lot longer to learn YUI2 than jQuery and I put this mostly down to the documentation (jQuery API docs are brilliant) though also because jQuery tutorials are abundant as are community plugins which you can rip apart to assist your learning.

Upgrading to YUI3

Last week I decided to have a go at upgrading the console to YUI3. Once again, the documentation was pretty poor for new-comers but at least this time at least I had a foundation to work with. This time I wanted to do things right. I wanted to extend the YUI Widget class and do things how YUI wanted me to do things. Just a week later, it’s done.

Benefits of YUI3

I couldn’t give you a fair comparison between jQuery and YUI, or advise you on which is the best for your project, as I’ve not kept up with the progress of jQuery. However, I’m happy YUI is the IPC standard as it’s something I’ve had a lot of fun learning and playing with.

Key components of YUI3 that I’ve come to love are:

Loader
Widget
Attribute
Event
Node, specifically their consideration for WAI-ARIA support and Node Queries/CSS3 Selectors

Next, to get the most out of YUI3, I need to look into:

Profiler
Test
…and the other many utilities available

Summary

In summary, once you’ve grasped YUI and put together your first widget you’ll feel like you’ve acheived something a lot more pure, legible and stable than you do with jQuery. Or at least I do.

More to Come

Over the next few days I hope to put together some tutorials to assist people with their first YUI widget. It’s been a struggle for me to find the help I needed so, hopefully, I can help a few of you out there.

Pixelinx Framework

Adam Pancutt — Thu, 19 Nov 2009 11:23:50 +0000

The Pixelinx Framework is something I’ve been having a play around with over the past year. It’s still in relatively early stages but it’s something I’m taking more seriously, and have recently open-sourced.

Take a look.