Shining a light on some small Backpage features you didn't know existed!

Alternate document content types

By default Backpage returns documents in a xHTML or HTML5 template depending on the preference / requirements of the designer. But it can just as easily return that content in a number of other formats:

• JSON
  Append ?json to a page url to return a JSON object
• Plain text
  Append ?txt to get the page content (minus design template) without any of those pesky markup tags!
• XML
  append ?xml to get an XML version of your selected document
• Microsoft Word
  We balked about adding this one, but should you need to send a word document of a document simply append ?word
• Microsoft Excel
  Append ?xls for a Microsoft Excel version of the current document. Very useful for table rich documents.

Uptime monitoring, the module

Typically third party uptime monitors visit a preset URL, and depending on the HTTP response code they realise the monitored website is a-ok or in distress and act accordingly. Depending on the nature of the page content this may be an expensive operation involving unnecessary database access and additional server load. The uptime module (located at /modules/uptime/) allows third party monitors to check application and database health in a quick, lightweight manner. YAY!

OPML

Good old Outline Processor Markup Language! Should you ever need to expose your feeds (ATOM, RSS, sitemap, shop products, property etc) to content aggregators in a quick and easy manner, simply point them to towards /modules/opml/.

Map legacy URLs

Upgraded from a flat site or other CMS and want to retain the Google Juice earned by the previous URLs? Don't want to create shortcuts for all of them? Take a deeper look at /modules/404/... we think you'll find all you '302 goodness you need :)

Microsummary

Sadly this will be missing the cut. This handy little feature (sitting in /modules/microsummary/) was rendered obsolete as of Firefox6.0. While we won't be throwing it out in the immediate future, there is a timer on it's inclusion with a default Backpage install. 

Some new toys to play with on the e.commerce front

• Product recommendations engine
  Much sought after, this new addition makes cross selling as easy as ticking a box (or four)!
  
• Enhanced product categorisation
  Product categories have (finally) gotten some love, with nesting, ajax support and a healthy dash of SEO goodness all added to the mix
  
• 'Featured Product' & 'Out of stock'
  Options that you'll never think you'll need, until you need them
• Unified search
  Shop now takes full advantage of Backpages unified search

The shipping rates system, payment gateways, microformats, latest/popular views and a wealth of other features have been subject to plenty of tweaks and polish!

Finding the items you want on the website you're visiting should be straightforward, but sometimes the information architect / UX lead may need a helping hand. We're often told that it's the "simple things" that make the difference. That kiss on the cheek in the morning, the barman who knows your order before you open your lips or the CMS that grows in little ways to help your end users out (! ... you can slag us for that prose later!).

More than just Search

Backpage 3.01 introduces a quick, unified, search system. This addition deepens the existing 'A-Z' and 'Sitemap' modules, while augmenting the default 'Search' module with a fast predictive search ability. The Backpage UI also benefits from this addition, with authors being able to search for posts in real time. This lets you find information faster, make decisions quicker and edit with much less effort, all the while enabling your users to instantly search your site for the information they need.

Unified search is a free update to existing BP3.0 users. It does not come in pink...

This is a blog post our marketing and community engagement departments strongly warned us against publishing. At least we imagine they would, had they existed...

Hiding behind labels

Computer hardware and software projects typically have a code-name hung off them to ensure drunken bar room boasts don't become valuable slivers of knowledge in the vast game that is corporate espionage.

The Amiga prototype was known as 'Lorraine', 'Chicago' shipped as Windows 95, and during its development, Backpage3.0 became known as 'Oak Ridge'.

What's in a name?

Most code-names are random, but that was not the case with Backpage3.0. What is the significance of Oak Ridge in this particular case? It wasn't the scene of a first kiss, court to an epic sports victory or the rolling windy field beneath a beautiful act of losing a carnal innocence...

No, Oak Ridge is a laboratory. A place of research and development. This institute was born as one of the thrusts of the massive 1943 Manhattan Project. America poured massive resources into the development of nuclear weapons to counter a perceived attempt by Nazi Germany to do the same. To this end the Oak Ridge complex was tasked with the development of separation techniques that would yield weapons grade fissionable material.

Errm...! I don't get it?

The Manhattan Project was a secret. To the lay observer, Oak Ridge was nothing more than a large factory. A factory that demanded massive numbers of men, machines and an endless feed of bulky raw material ... but it didn't seem to produce anything. For years endless resources went in... but nothing ever came out!

This pattern rang a familiar bell. We couldn't help but get the joke and the moniker kinda stuck...! :)

We've adopted shorter development sprints now. Honest!

How do I love thee, let me count the ways**

1. My soul can reach, when feeling out of sight
   HTML5 has given us gearless local storage, a client side database and the ability to build apps that work without an always on 'net connection
   
2. I love thee freely, as men strive for Right;
   For the first time EVER, browser developers will have a spec that covers not just a desired behavior when everything goes right, but instruction on what to do when things go wrong - consistent, cross browser error handling is finally somewhere in sight***  \o/
   
3. In my old griefs, and with my childhood's faith.
   HTML5 builds on the original promise of HTML, redefining its comfort zone against which we've fought for over a decade, while widening and deepening to embrace modern use cases
   
4. I love thee with a love I seemed to lose
   HTML5 has relit our love for client side work - long may it last!
   

*Poets we ain't! This poorly rendered blog post was brought to you by the people who should know better!
**Backpage CMS went HTML5 native in July 2009 & has no intention of ever leaving!
*** We feel this is, bar none, the most important addition to HTML5!
Credit: Elizabeth Barrett Browning

I heard the most fantastic derisive comment today: the acronym WYSIWYG is commonly used for "What You See Is What You Get" when it usually applies to "What You Get Is What You deserve*"! :)

* with a generous dose of artistic license

A measure of spit and polish has been applied to the Web Manager and Blogging tools. The most obvious change is the addition of a date view and a cosmetic change to a number of icons, but the changes run deeper:

• Quick search can now search dates
• Quick search results are keyboard navigatable
• Quick search UI polish
• All views now show a document page type icon
• A/Z and date views can now be sorted acesending and decesending
• Document properties now allows for template independent addition of header and footer items (useful for page specfic styles or script)
• The tool now weighs in at 70% of its predecessor and makes three quarters fewer XMLHTTP requests

Ecommerce package all wrapped as a module, Shop (read a blog post discussing the rationale behind the name) is a fully featured online store with a choice of third party payment gateways.

Feature list

• Easy to add new products (with information broken into 'headline', feature bullets and a long description field, all styled by the designer even if a client chooses to 'paste-from-word' during population)
• Up to ten images per product with a 'zoom-in' option
• Images can be uploaded by client - the system automatically detects, resizes and makes browser readable most image formats (bmp etc)
• Full shopping cart functionality
• Optional payment gateways, users can choose to start small with Paypal and then switch to a more featured payment gateway
• Automatic search engine optimised urls, titles & headers for products
• Shop 'home-page' can features an arbitrary number of products
• Automatically reads and presents real-time currency exchange rates for those wishing to purchase in Pounds Sterling or Euro
• Product search engine
• Product RSS feed
• Integrates with googlesitemap
• Client defined shipping rates
• Easy to use reports backend
• B2B login and optional discount
• Supports xHTML and HTML5.

Developer reference

sdfasdf

Download

Please contact us.

A little notice on some of the upgrades we're currently sweating over that will soon find themselves coming down the line.

• Support BpTags for shop, one for store categories, the other returns the contents of a users shopping cart
• Google sitemap now shows products at a higher priority
  
• Upgrades to the front and backend user management
• Section headings added to AZ module
  
• Improved HTML5 support for the FSE

The editor

Those of you sporting HTML5 websites may have run into occasional glitches when using the full screen editor (especially with block level elements).This is a known issue and we're working on a fix.

In the meantime we're chalking it all down to one of the joys of being on the leading edge (while ignoring the phrase 'Pioneers get the arrows, settlers get the land'...!).

They say necessity is the mother of all invention. I'm going to add an addendum to that. Hatred works too!

Backpage grew out of a frustration with repetitive tasks and a deep, vocal dislike for a mandatory three column layout. Most modern websites need templating, a data access ability and the facility to be extended in ways and means that are often impossible to divine. When development work on version one of Backpage began, few sites used a CMS (and most balked at the acronym) and those that did shared a very common layout. 

Templating typically took one of these three routes:

• Three columns, like it or lump it
  
• A XSLT (or similar) templating language
• Wrap-around server side includes that didn't apply a predefined page structure
  

On paper the XML/XSLT route is a marriage made in heaven. But this is real life. The XSLT route is nothing but troublesome, its promised benefits of flexibility and strictness are quickly lost under a mire of error prone and unintuitive programming with an undesired server-side overhead. I'm unreliably told most designers aren't programmers.

The SSL wrap-around include approach works well, but it isn't a natural environment for a designer and when done wrong (I'm looking at you WordPress) it just makes matters much much worse. Backpage would use this method for a time, but we couldn't help but feel, like the other approaches, it really sucked! ... So we continued to caste around for a superior alternative.

Temp-late

We took very deep peeks into the various templating engines out there, and while most had immense merit, we felt they were all a little too complicated for their own good- certainly nothing you'd open up to the less tech savy. Finally we came to the conclusion that everything was awful and we'd have to built our own!

The requirements:

• Ability to use ANY tool to create a template
• Support for xHTML
• Support multiple designs simultaneously
  
• Not enforce any design methodology on a designer
• Embrace best standards
  
• Reduced maintenance overhead
• Be simple! ... ish!
  

The result met all the requirements and birthed another Backpage feature: BpTags. The templating engine makes no assumptions or demands, allowing a designer to create a layout in the environment they are most comfortable with, yet can support the craziest of designs (I've yet to see a layout that can't be achieved!). Coupled with BpTags, complex, data driven designs became a piece of cake! And we like cake!

A full rundown on Backpage templating is available in our 'skins' support area.

I've written many words in the past on the subject of comments and moderation. In truth I find myself flip-flopping - loving the idea of growing an unfettered community that accurately portrays 2% of a websites visiting audience but reeling with the knowledge there's an inevitable need for the iron fist of censorship required to grow a useful and balanced article feedback mechanism.

Of course then I remember I'm just the guy who builds the tools and I get on with the task at hand!

Upgrades

The comments engine has received an subtle upgrade. The internals now take full advantage of the Backpage 3.0 API, so opinions and flames are poured to screen faster while using fewer server-side resources. The engine has also been opened up to support more than just blog posts, and can now handle product reviews for 'shop' and dozens of other applications.

The upgrade can be found on the comments module page.

Are you ready to hear the least imaginative name for an e.commerce platform ever? Shop! Yep, we called our main e.commerce module 'shop'! Not 'superZen', 'HyperBucksStoreCart' or 'profitMaker'. Just simple, boring 'shop'. We contend that all our imagination went into building it, so much so the ultimate christening became an afterthought.

So what does shop bring to the table?

• Easy categorisation
• Automatic image overlays
• Easy templating
• Ability to support a number of different payment gateways
  
• Real-time multi currency support
• RSS feed
  
• Search engine friendly uris
• Tagging and mapping of products
• B2B support
  
• Search
• All the usual shopping cart goodness
  

And we've stuck to our pillars of 'ease-of-use', 'search engine coziness' and 'speed'!

Shop is undergoing its trail by fire on a trio of backpage installations. Once lessons learned have been applied it will become available to everyone!

From time to time the question of software design philosophy comes up, and I find myself half cringing and half smiling. Over the years I've found myself falling between the cracks of the well established principles. I wanted all the best parts of KISS, UCD, TIMTOWTDI etc, but none of the baggage.

So rather than languish in some undefined principal-less netherworld, I did what any student of Aristotles theory of knowledge would; labelled my own.

The mosquito

The de Havilland DH.98 Mosquito was a World War 11 era light bomber which joined the RAF Bomber Command in 1941. In service 'the mossie' was noted for its speed and diversity (it would serve as night-fighter, transport and everything in between) and it was the platform of choice for a number of the crazier operations against Germany during the period.

But it's the early development stage of the Mosquito that interests me most.

Mosquito development

The DH.98 concept genesis was an Air Ministry specification titled P.13, issued on 8 September 1936. P.13 called for a twin-engined "medium bomber" suitable for "worldwide use" with the ability to carry a modest bomb load. The RAF hierarchy expected a heavily armed bomber made of metal and designed around the idea of fighting its way to and from a target (an idea that quickly cost lives, even for the mighty US 8th airforce and their armadas of gun bristled B-24s and B-17s). You can imagine their disgust when the plans for a small wooden airplane was presented to them...

de Havillands prior experience convinced him that a small streamlined wooden twin engined aircraft could be made fast enough to evade any potential fighter opposition, removing the need for a heavy defensive armament and associated crew.

The Air Ministry was not impressed. de Havillands bomber didn't conform to their concept of heavily-armed bomber formations and were very dubious of claims that speed would be a viable defense. They also questioned the use of wood, a design approach that flew in the face of established best practice - surely the evolution of the mighty Spitfire had proven sleek metal designs were the way forward.

But wooden construction would have the advantage of using a readily available non-strategic material that could be easily acquired while taking advantage of the existing skills of the large number of furniture makers in Britain. Consequently, production would be faster and easier with a delivery rate far in advance of any competing designs.

In production the Mosquito would live up to every promise de Havilland had made. Its wooden construction resulted in a light and easy to construct aircraft than was faster than the current models of the Spitfire, itself a very fast aircraft. When the Mosquito entered service in 1941, 'The wooden wonder' had a top speed of 382 mph, while the vaunted Spitfire could only reach 369 mph.

On 30 December 1940 the Air Ministry placed an order for 150 Mosquitoes, from then on the only complaint the RAF had about the Mosquito was that there were never enough of them! Cameras, cannon, radar and torpedoes were all hung off the aircraft as it found itself engaging fighters, tanks and submarines - roles never envisaged by the original RAF specifications, but roles the 'Mossie' was successfully employed. A total of 7,781 would roll off the lines until production ceased in 1950.

The mosquito principal?

So, that little history lesson leaves us with the following points and principals:

• Don't let trends supplant common sense
  
• High speed at any cost
  
• Small size
• Simple to maintain and extend
• Easy to pilot (*ahem*... use!)
  
• The innate ability to be extended in ways that override all the above features!
  

Backpage has been created with all these principles in mind, and like the venerable Mosquito, has found it has a propensity for appearing in the strangest of places doing the strangest of things!

Those of you wanting to know a little more about the wooden wonder could do worse than checking out the Wikipedia article on de Havillands 'Mossie'.

We're massaging existing backpage features as feedback and gripes are shared with us. The latest two tools to go under the knife are the tagging and mapping systems.

Mapping

Geotagging, you cruel mistress! Yet you languish unused on so many installations. Those who use it, love it but had a few suggestions to make it better. So with our listening hat on we've changed the user interface, contracting the 'mega-buttons' to give a more tag like look. To follow up with the change of 'look', we also added a tagging 'feel' - now multiple geographical areas can be associated with a web document or blog post.

Admins can also delete Geographical references by double clicking on the geotag they want to destory. Editing remains unchanged.

Tagging

A lot of people (read: everyone) HATED that we'd ignored the usual tagging convention of a comma delimited list of tags, going with a space delimited list instead. Well, we've come to our senses and rewritten tagging so it behaves as a user might expect. We also took the opportunity to tweak the UI, giving tags a 'button-like' appearance.

Finally we changed how tags are edited / removed, staying with the double-click approach seen in mapping, once you double click a tag a panel will appear offering the options to delete or edit a tag in-place. Fun!

Metadata typically doesn't ignite passion in most of us, but the following addition to the METATAGS bpTag made me giggle!

The ICBM meta tag

The "ICBM" name comes from an old Internet joke where a latitude-longitude coordinate pair is an "ICBM address*", that is, the destination of a nuclear tipped InterContinental Ballistic Missile. Good times! 

A little more geotagging goodness for BP!

* Don't worry, real ICBM coordinates would also include elevation data so this is only of limited use to terrorists! Probably.

You've created a fantastic leading edge design in your authoring package of choice (Dreamweaver, Frontpage, notepad etc), taken time to test across the various browsers and ensured it validates. Your markup is just itching to be seen by the world. But how? The following video and step by step guide show you how:

Those steps again?

Prepare your template:
Make sure your paths your templates assets (the images, css, javascript and other files your template requires) reference the web server root. While it's not mandatory to use the /media/ folder and its subfolders, it does make an awful lot of sense as your website grows.

Add the placeholders:
Every template shares an area designated for page content, navigation etc. Placeholders dropped in these areas will allow Backpage to discover and add the appropriate content. These placeholders are called BpTags and resemble harmless HTML comments. The following simple example would add a page title:

Upload your assets:
Transfer the images, css etc required by your design template to the required paths on your server using FTP (or using the web upload provided by Backpage if you have chosen to use the /media/ folders).

Add your template to Backpage:
This step is almost as easy as copy and paste. Almost. First you will need to login to Backpage using an Administrator level of privilege. Once access has been granted, click the 'Settings' menu in the top left of the interface, then click 'DesignTemplates'. A screen will appear listing all templates presently in the system, with a button to their left labelled 'New Template' - give that a click!

Give your new template a memorable title (I don't recommend 'blue design 1') and maybe even a description (if you work with other designers or are a little forgetful).

That leave the last step... pasting your template markup into the field labelled 'Template' and clicking the 'Save' button. Your new template is now ready for use across your website!

Download a simple reference template.

...because it's been a while

So, what were we up to? Only retooling the 'little CMS that could' into a leaner, meaner beast. We've taken a long hard look at the content management tools arena, jotted down what we liked, crossed out things we hated and imagined things we've never seen but would love to play with. It all fit a pair of beer mats* and looked a little like this:

• HTML5 + xHTML support (we like those trailing slashes!)
• Full screen document editing
• Document versioning
• Sexy but simple UI
• Author transparent search engine optimisation
• A smaller, shared API
• Simpler/smaller database design
• The ability to draft pages (previous versions published 'on-save')
• Much improved external RSS handling
  
• Simple templating that doesn't rely on a programming language to implement
  

We continued to like the flexibility of reading everything from a database on request, but decided to up the ante with more agressive caching. Reexamining the BpTag idea we found it compared well with competing approaches and wasn't broken, so no need to fix it. We also retained the document hierarchy, augmented rather than replaced with a tagging system.

This resulted in a complete rewrite of the administration area and subtle refinements on the user end which has resulted in ... this little puppy!

* Yes, we actually bullet pointed our beer mats!

Purpose: provides a breadcrumb navigation to root document.

Purpose: provides a canonical meta tag.

Enhance your Backpage installation with the following cms extensions:

What are BpTags?

BpTags are drag and drop widgets that authors and designers can add to their document. These widgets can achieve any number of things, from showing your latest tweets to automatically building your navigation! Designers can get a deeper understanding by viewing our templating tutorials.

Purpose: automatically builds a Yahoo text sitemap. Details on submitting this form of sitemap can be found on the Yahoo! 'Submitting your sitemap file to search engines'.

Download: Yahoo sitemap is part of a default install.

Purpose: simple server / database life check. UT provides a simple, lightweight method to monitor if a web server, backpage installation and database are functioning.

Download: UT is part of a default installation.

Purpose: provides a tag cloud as a supplementary navigation aid for your website.

Download: tags is part of a default installation.

Purpose: provides a hierarchical sitemap of your website.

Download: sitemap is part of a default installation.

Purpose: provides an RSS syndication feed for your website

Purpose: provides an RDF syndication feed for your website.

Purpose: provides an OPML feed for your website.

Purpose: Provides google with an xml sitemap of your website.