Opera Web Browser

I work for the BBC and we work very hard to make sure anything that the public see is of the highest standard, and we’re always working to improve that methodology over time. Yes, like any live and evolving website, the occasional bug does slip through the net. We do our very best to prevent it, having a dedicated team of User Experience and Functionality testers, along side a team of people writing automated tests and software. But bugs can occasionally happen.

When we do find a bug, especially with a new feature, we identify and fix the problem as quickly as possible. This is where I come in. As a developer, part of my job is to do the finding and fixing.

So I was handed a bug to look at. The video was not appearing for some Opera users. I talked over the situation with our QA manager, and discussed just how long the fix should take, how we’re going to roll it out and what impact it will have on users until then.

That having been sorted, I started work on my side of the problem. When I finished, I found my fix only served to create another problem. And another appeared. And another, and another.

By chance, I switched off a setting called “Browser JavaScript”. Suddenly, everything starts working. I just sat there stunned. “What just happened?” I started asking myself. I switch Browser JS back on, and it breaks again. So I started running around the office looking for anyone with Opera to test out this problem.

I found that roughly 50% of users are seeing the same results as I was. The other 50% haven’t got a problem.

So I start reading up about browser JS and start having a look at the file directly. Lo and behold, there is a direct mention of BBC iPlayer. They’re rewriting a core browser JS function. “What the hell?”, you could rightly ask.

} else if(hostname.indexOf('bbc.co.uk')>-1 && pathname.indexOf('/iplayer')>-1){ // PATCH-426, Add to favourites fails on BBC iPlayer because of script loading/parsing timing issue
	document.getElementsByTagName=function(n){
		var elms=getElementsByTagName.call(this, n);
		if(elms.length==0 && n=='body')return [document.documentElement];
		return elms;
	}
	if(self==top)postError.call(opera, 'Opera has modified the JavaScript on '+hostname+' (Add to favourites fails on BBC iPlayer because of script loading/parsing timing issue). See browser.js for details');

They’re rewriting a core function, built into the browser, and it’s worth noting that this isn’t a problem with iPlayer that they’re fixing. It’s a problem with Opera that they’re working around for only iPlayer.

I did a little research and found this blog, my.opera.com/core/blog/show.dml/3130540 (Update: Can anyone tell me why this only loads in Opera?) from Opera, stating:

“Opera has more experience with site-specific patches than other browser vendors, since we’ve been patching the web since Opera 8.01. I believe our solution is also by far the most advanced one”.

Did I just read that right?  Opera are better at developing websites that anyone? That’s an unbelievable statement to make.

What about GreaseMonkey, you might ask. GreaseMonkey is a great little tool for letting users add functionality to websites that they think is missing. Opera are taking that idea and forcing it onto their users by default. It’s not even opt in.

Conclusion: I’ve met some of the Opera people before today. Bruce Lawson is a particularly fine chap. Which is why I’m confused why they would think that as a software development company, not only do they know web development better than web developers, but that they have a duty to edit those sites which fail in their browser.  The correct course of action, for me, would have been to contact us directly and report the issue.  I just hope they do this in future.

Update: We got an apology my.opera.com/sitepatching/blog/2011/09/12/why-we-broke-2 from Opera which was extremely nice of them.

Update: The apology managed to get to #10 on Hacker news

Epic Server Rebuild – The Prelude

This has almost stalled because of some MAJOR problems with the existing hardware. It’s all running again, but the server doesn’t have automated downloading right now, and the media center is currently running from my spare Acer Revo.

Terry Pratchett’s Going Postal

Now, much to my dissappointment, this was all in all a “Meh!” film. I was far more impressed with Hogfather than Going Postal. It felt like they were simply going through the motions. The film had the essence of the book, but left out so much story, that they have to fabricate sections just to tie what was left together.

Last Airbender Movie

Oh dear LORD what did they do to my beloved Airbender?! It was obvious that not one of the cast had watched even a single episode of the original show. This was just, plain and simply, painful! Sometimes I forget, what a powerful bender M. Night Shyamalan is.

Prince Of Persia Movie

Now, on the other hand, I liked this, simply because they managed to take the basic story of the prince of persia, and turn it into a good film. Most people will hate this because it doesn’t follow the story of the game, but I personally think that game stories don’t work in movies. I believe that this was a pretty good attempt. Not the best, but certainly not the worst.

Coming up

I’ve added a new section to the site, Presentations, which I will be filling with any presentations I do for work, or at conferences, if I ever get the chance. The first talk will be about “Internal Design”, and how disciplined coding principles will help yourself and others who work on the project.

So this is my first attempt at writing to some code with it. I hope it’s useful to someone. It’s just a simple JavaScript table sort.

The Introduction

Just a bit of useful script for client side sorting of tables. Simple click the headers of the columns, and it will arrange it in ascending order. A second click will arrange it in descending order.

As Seen On…

BBC News Common-Wealth Games Medals Table : In English, In Urdu, In Hindi, and on BBC Worldwide

UPDATE – 30th July 2010: After talking with a BBC colleague, it occurred to me that I could improve the code, so that it doesn’t rely on the class names for the ordering. The class names are now purely for decoration, not functionality.

UPDATE 2 – 30th July 2010: It was just pointed out by James (thanks man), that Glow/JS doesn’t handle number sorting brilliantly, so I’ve added a small patch to improve this. Thanks to James for his suggestion.

UPDATE 3 – 3rd August 2010: Some alterations to improve sorting of floats.

The Demo

The Source Code

JavaScript

gloader.load( [ 'glow', '1', 'glow.dom', 'glow.events' ], {
        async: true,
        onLoad: function( glow ) {
                var getPosition = function( heystack, needle )
                {
                        var position = 0;
                        heystack.each( function( i ){
                                if( needle.eq( this ) )
                                        position = i;
                        });
                        return position;
                }
                var sortDir = 0;
                var sortBy_store;
                glow.events.addListener( '#myTable thead tr th' , 'click', function ( event ) {

                        var sortBy      = getPosition( glow.dom.get('#myTable thead tr th'), glow.dom.get( this ) );

                        if( sortBy == sortBy_store )
                                sortDir = ( sortDir ? 0 : 1 );
                        else
                                sortDir = 0;

                        sortBy_store    = sortBy;

                        glow.dom.get( '#myTable tbody tr' ).remove().sort( function( rowA, rowB ) {
                                var sortArr = new Array( 1, -1 );
                                if( sortDir )
                                        sortArr = new Array( -1, 1 );

                                var rowA_obj = glow.dom.get( rowA ).get('td');
                                var sortA = glow.dom.get( rowA_obj[sortBy] ).text();

                                var rowB_obj = glow.dom.get( rowB ).get('td');
                                var sortB = glow.dom.get( rowB_obj[sortBy] ).text();

                                if( !isNaN( sortA ) )
                                        sortA = parseFloat( sortA )
                                if( !isNaN( sortB ) )
                                        sortB = parseFloat( sortB )

                                return sortA > sortB ? sortArr[0] : sortArr[1];

                        }).appendTo( '#myTable tbody' );

                });
        }
});

HTML

<table id='myTable'>
	<thead>
		<tr>
			<th class='col1'>Number</th>
			<th class='col2'>Male Names</th>
			<th class='col3'>Female Names</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td class='col1'>3</td>
			<td class='col2'>James</td>
			<td class='col3'>Helen</td>
		</tr>
		<tr>
			<td class='col1'>2</td>
			<td class='col2'>Thomas</td>
			<td class='col3'>Laura</td>
		</tr>
		<tr>
			<td class='col1'>4</td>
			<td class='col2'>Steven</td>
			<td class='col3'>Catherin</td>
		</tr>
		<tr>
			<td class='col1'>1</td>
			<td class='col2'>Simon</td>
			<td class='col3'>Samantha</td>
		</tr>
	</tbody>
</table>

It attaches an Ajax handler to all links on a page which conform to the selector you give it. For example, you can tell it to attach to all standard links (<A HREF=’/here/’>Hello</A>), or links with a specific class as i’ve done with the code below (<A HREF=’/here/’ CLASS=’ajax’>Hello</A>).

I hope someone finds this useful. As ever this was created after I kept saying that I could write something a hell of a lot better than anything else I was finding. This might be a bold statement, but I was having trouble finding anything that would do the job, and simply.

(Demo to come, I’m just posting the code up right now.)

/*
 * ContentHandler
 *
 * Content handler that attaches to links and loads content through AJAX
 *
 * @author Rob Taylor
 * @created 28/09/09
 * @modified 29/09/09
 * @version 1.3.5.10
 */

	var ContentHandler = new Class({
		Implements: [Options, Events, Log],

		options : {
			// Array of container elements to load via AJAX
			container		: $('content'),

			// Loading graphic and text to display while working
			loadingImage		: '/images/ajax-loader.gif',
			loadingMessage		: 'Loading Content...',

			// How much Opacity to set on 'Container' while loading new page.
			loadingTransparency	: 0,

			// Type of link to load via AJAX. Defaults to <a> tags
			linkIdentifier		: 'a',

			// TRUE to enable console logging. FALSE by default
			debugMode		: false
		},

		currentURL : '',
		isNavigating : false,

		/*
		 * initialize
		 *
		 * Default constructor. Sets configuration options, attaches load event links and triggers initial load
		 *
		 * @param mixed		options		Array of config options.  Supported elements:
		 *					container		-	Container element to load Ajax into
		 *					loadingImage		-	URL of image to display while working
		 *					loadingMessage		-	Message to display while working
		 *					loadingTransparency	-	Transparency level of 'container' when request is made.  Must be between 0 and 1. Defaults to 0
		 *					linkIdentifier		-	HTML tagname to attach onclick loader to. Defaults to <a>
		 *					debugMode		-	TRUE to enable console logging. FALSE by default
		 */
		initialize : function( options ) {

			// Set configuration options
			this.setOptions(options);

			this.debug('Starting :: ContentHandler');

			// Loop through link elements attaching loader
			$$(this.options.linkIdentifier).each( function( element ){
				this.attachHandler( element );
			}.bind(this));

			// Do initial content load if location is specified
			if( window.location.hash && window.location.hash.length > 1 )
			{
				// Get initial page
				var url = window.location.hash.substr( 1, window.location.hash.length );

				this.getContent( url, true );
			}

			// Attach check to re-load content if URL changes or previous attempt fails
			this.updateContent.periodical( 200, this );

		},

		/*
		 * createLoader
		 *
		 * Populates and displays
		 */
		createLoader : function(){
			this.debug('Creating :: Loader Image');

			// Container padding
			var padding		= 40;

			// Create image element
			var content		= $( this.options.container );
			var loaderImage		= new Element( 'img', {
				src	: this.options.loadingImage,
				alt	: 'Loading',
				title	: 'Loading'
			});

			// Create test element
			var loaderMessage	= new Element( 'div' ).set('text',this.options.loadingMessage);
			loader			= new Element( 'div' );

			// Style elements
			content.setStyle( 'position', 'relative' );
			loader.setStyles({
				margin		: 'auto',
				textAlign	: 'center',
				position	: 'absolute',
				opacity		: 0
			});

			// Autoresize container onload to fit image
			loaderImage.addEvent('load', function(){
				loader.setStyles({
					height		: ( loaderImage.getSize().y + padding ),
					width		: ( loaderImage.getSize().x + padding ),
					top		: 20 + content.getPosition().y,
					left		: ( ( ( content.getSize().x / 2 ) - ( loaderImage.getSize().x / 2 ) ) - padding ) + content.getPosition().x
				});
			});
			// Add image and message to container
			loader.adopt( loaderImage,loaderMessage );

			// Attach loader to content area and fade in
			$(document.body).adopt( loader );
			loader.fade('in');

		},

		destroyLoader : function(){
			if( loader )
				loader.destroy();
		},

		getContent : function( url, freshStart ){
			this.debug('Collecting :: Page Content');

			var content = $( this.options.container );

			if( this.isNavigating && request_content )
				request_content.cancel();

			request_content = new Request.HTML({
				url		: url,
				method		: 'get',
				link		: 'cancel',
				update		: content,
				onRequest	: function(){
					this.debug('Collecting :: Page Content -> Request Made');

					// Set active request flag (prevents periodical spawning simultaneous requests)
					this.isNavigating = true;

					// Store current content in case of rollback (e.g. if request fails)
					content.store( 'content', content.get('html') );

					if( freshStart ){
						// Flush content
						content.empty();
					}
					else{
						content.get('tween', {
							property: 'opacity',
							duration: 'normal'
						}).start( this.options.loadingTransparency );
					}

					// Display loaders
					this.createLoader();

				}.bind(this),
				onComplete	: function(){
					this.debug('Collecting :: Page Content -> Complete');

					// Reset active request flag
					this.isNavigating = false;

					this.destroyLoader();

					if( !freshStart ){
						content.get('tween', {
							property: 'opacity',
							duration: 'short'
						}).start(1);
					}

				}.bind(this),
				onSuccess	: function(){
					this.debug('Collecting :: Page Content -> Success');

					// Track new content URL
					this.currentURL = url;

					// Flush stored content
					content.store( 'content', '' );

					if( !freshStart ){
						window.location.hash = url;
					}

					content.getElements( this.options.linkIdentifier ).each( function( inner_element ){
						this.attachHandler( inner_element );
					}.bind(this));

					this.debug('Current URL: '+this.currentURL);

				}.bind(this),
				onFailure	: function(){
					this.debug('Collecting :: Page Content -> Fail');

					// Retrieve stored content
					content.retrieve( 'content' );

				}
			}).send();

			return false;

		},

		attachHandler : function( element ){
			if( $(element) ){
				if( this.checkLink( $(element).get('href') ) )
				{
					url = $(element).get('href');
					//this.debug('Adding Handler : "'+url+'"');
					$(element).addEvent('click', this.getContent.bind(this,url) );
				}
			}
			else{
				this.debug('No Valid Element.');
			}
		},

		updateContent : function(){

			var url = window.location.hash.substr( 1, window.location.hash.length );
			if( this.currentURL != url && !this.isNavigating && this.checkLink( url ) ){
				this.debug('Updating :: Page Content: "'+url+'"');
				this.getContent( url );
			}

		},

		checkLink : function( url ){

			if( url.test('^http:|^https:' ) ) // We're assuming here, that external links, do not want to be loaded inside the container.
				return false;

			return true;
		},

		debug : function( message ){

			if( !this.options.debugMode )
				return;

			this.log( '[Content Handler] ' + message );

		}

	});

	document.addEvent('domready', function(){
		content = new ContentHandler({
			linkIdentifier : 'a.ajax' // this will attach to any link with a class of 'ajax'.
			//linkIdentifier : 'a' // This will attach to any link.
		});
	});

Available Options

• container : Container element to load Ajax into
• loadingImage : URL of image to display while working
• loadingMessage : Message to display while working
• loadingTransparency : Transparency level of ‘container’ when request is made. Must be between 0 and 1. Defaults to 0
• linkIdentifier : HTML tagname to attach onclick loader to. Defaults to <a>
• debugMode : TRUE to enable console logging. FALSE by default

I hope you enjoy it, and check out the demo:

Demo – I plan on replacing this with an inline demo some time very soon (See below).
Launch AJAX Demo – Not working right now, trying to find the out what’s not connecting.

Here are the image files you will need:

I suggest you find something better, these were just temp images for me.

Close:
Resize: 
Loading: 

First the Javascript

I’m assuming you’ve got MooTools Code and More installed.

var MoodalWindow = new Class({

	Implements: [Options, Events],

	options : {
		container		: window,
		height			: 700,
		width			: 600,
		overlayColor		: '#000000',
		overlayTransparency	: 0.7,
		overlayClose		: true,
		move			: true,
		resize			: true,
		url			: '',
		title			: 'Modal Window'
	},

	/*
	Constructor: initialize
		Constructor

		Add event on formular and perform some stuff, you now, like settings, ...
	*/
	initialize : function( element, options ) {
		if( $(element) )
		{
			if( $(element).get('title') )
				this.options.title	= $(element).get('title');
			else if( $(element).get('text') )
				this.options.title	= $(element).get('text');

			if( $(element).get('href') )
				this.options.url	= $(element).get('href');

			this.setOptions(options);

			$(element).addEvent('click', this.createPopup.bind(this) );
			return false;
		}
	},

	createPopup : function(){
		this.killStraglers();

		this.createOverlay();
		this.createWindow();
		if( this.options.title ){
			this.createTitle();
			this.createCloser();
		}
		this.createContent();
		if( this.options.resize )
			this.createResizer();
		return false;
	},

	createOverlay : function(){
		var overlayColor		= this.options.overlayColor;
		var overlayTransparency		= this.options.overlayTransparency;
		modalOverlay = new Element( 'div', { 'id':'modalOverlay' } ).setStyles({
			backgroundColor	: this.options.overlayColor,
			position	: 'absolute',
			left		: 0,
			top		: 0,
			height		: window.getScrollSize().y,
			width		: window.getScrollSize().x,
			zIndex		: 99
		});

		if( this.options.overlayClose )
			modalOverlay.addEvent('click', this.closePopup.bind(this) );

		modalOverlay.fade('hide');

		$(document.body).grab( modalOverlay );
		modalOverlay.fade( this.options.overlayTransparency );

		window.addEvent('resize',function(){
			modalOverlay.setStyles({
				height	: window.getScrollSize().y,
				width	: window.getScrollSize().x
			});

		});

	},

	createWindow : function(){

		var modalWindowTop = ( ( this.options.container.getSize().y / 2 ) - ( this.options.height / 2 ) + window.pageYOffset );
		if( modalWindowTop < 0 )
			var modalWindowTop = 0;

		var modalWindowLeft = ( ( this.options.container.getSize().x / 2 ) - ( this.options.width / 2 ) + window.pageXOffset );
		if( modalWindowLeft < 0 )
			var modalWindowLeft = 0;

		modalWindow = new Element( 'div', { 'id':'modalWindow' } ).setStyles({
			position	: 'absolute',
			top		: modalWindowTop,
			left		: modalWindowLeft,
			height		: this.options.height,
			width		: this.options.width,
			zIndex		: 100
		});

		modalWindow.fade('hide');
		$(document.body).grab( modalWindow );
		modalWindow.fade( 'in' );

		if( !this.options.move )
		{
			var reposition = function(){

				var modalWindowTop = ( ( this.options.container.getSize().y / 2 ) - ( this.options.height / 2 ) + window.pageYOffset );
				if( modalWindowTop < 0 )
					var modalWindowTop = 0;
				if( modalWindowTop > this.options.container.getSize().y )
					var modalWindowTop = this.options.container.getSize().y;

				var modalWindowLeft = ( ( this.options.container.getSize().x / 2 ) - ( this.options.width / 2 ) + window.pageXOffset );
				if( modalWindowLeft < 0 )
					var modalWindowLeft = 0;
				if( modalWindowLeft > this.options.container.getSize().x )
					var modalWindowLeft = this.options.container.getSize().x;

				modalWindow.setStyles({
					top	: modalWindowTop
					//left	: modalWindowLeft
				});

			}

			window.addEvents({
				'resize' : reposition.bind(this),
				'scroll' : reposition.bind(this)
			});
		}

	},

	createTitle : function(){

		modalTitle = new Element( 'div', { 'id':'modalTitle' } ).setStyles({
			position	: 'absolute',
			top		: 0,
			left		: 0,
			width		: '100%'
		});
		modalTitle.set( 'text', this.options.title );
		modalWindow.grab( modalTitle );

		if( this.options.move )
		{
			modalWindow.makeDraggable({
				handle : modalTitle,
				limit: {
					x : [ 0, ( this.options.container.getScrollSize().x ) ],
					y : [ 0, ( this.options.container.getScrollSize().y ) ]
				}
			});
			modalTitle.setStyles({
				cursor	: 'move'
			});
		};

	},

	createContent : function(){

		modalContent = new Element( 'div', { 'id':'modalContent' } ).setStyles({
			position	: 'absolute',
			top		: ( this.options.title ? modalTitle.getStyle('height') : 0 ),
			overflow	: 'auto',
			left		: 0,
			height		: ( this.options.height - ( this.options.title ? modalTitle.getStyle('height').toInt() : 0 ) )+'px',
			width		: '100%'
		});
		modalContent.set( 'html', '<br /><br /><center><img alt="Loading.." src="images/ajax-loader.gif"/><br />Loading Content...</center>' );

		modalWindow.grab( modalContent );

		modalContent.load( this.options.url );

	},

	createCloser : function(){

		modalCloser = new Element( 'div', { 'id':'modalClose' } ).setStyles({
			cursor		: 'pointer',
			position	: 'absolute',
			top		: 0,
			right		: 0
		});
		modalTitle.grab( modalCloser );
		modalCloser.addEvent('click', this.closePopup.bind(this) );

	},

	createResizer : function(){

		modalResizer = new Element( 'div', { 'id':'modalResize' } ).setStyles({
			cursor		: 'pointer',
			position	: 'absolute',
			bottom		: 0,
			right		: 0
		});
		modalWindow.grab( modalResizer );

		modalWindow.makeResizable({
			handle : modalResizer,
			onDrag : function(){
				modalContent.setStyles({
					height : ( modalWindow.clientHeight - ( this.options.title ? modalTitle.getStyle('height').toInt() : 0 ) )+'px'
				});
			}.bind(this),
			limit: {
				x : [ 100, this.options.container.getSize().x ],
				y : [ 75, this.options.container.getSize().y ]
			}
		})
		modalResizer.setStyles({
			cursor	: 'se-resize'
		});

	},

	resizePopup : function( newHeight, shift ){

		modalContent.set('tween', {
			duration: 750
		}).tween('height', ( newHeight - ( this.options.title ? modalTitle.getStyle('height').toInt() : 0 ) ) );

		var moveHeight = function(){
			modalWindow.set('tween', {
				duration: 750
			}).tween('height', newHeight );
		}.delay(0);

		if( shift ) {
			var moveTop = function(){
				modalWindow.set('tween', {
					duration: 750
				}).tween('top', ( ( window.getSize().y / 2 ) - ( newHeight / 2 ) + window.pageYOffset ) );
			}.delay(750);
		}

		return false;
	},

	killStraglers : function(){

		if( $('modalOverlay') )
			$('modalOverlay').destroy();
		if( $('modalWindow') )
			$('modalWindow').destroy();

	},

	closePopup : function(){

		modalOverlay.fade('out');
		modalWindow.fade('out');
		var killEm = function(){
			if( $('modalOverlay') )
				$('modalOverlay').destroy();
			if( $('modalWindow') )
				$('modalWindow').destroy();
		}.delay(750);

		return false;

	}

});

Second, the CSS.

I’m using the CSS3 rounded borders here, but it will roll back to normal borders if the viewer is using IE.

#modalWindow{
	background-color		: #FFFFFF;
	border				: 10px solid #222;
	border-radius			: 10px;
	-moz-border-radius		: 10px;
	-webkit-border-radius		: 10px;
}

#modalTitle{
	font-size			: 14px;
	font-weight			: bold;
	color				: #FFF;
	height				: 30px;
	background-color		: #222;
}

#modalContent{
	background-color		: #FFFFFF;
}

#modalClose{
	background-image		: url(images/close.png);
	height				: 16px;
	width				: 16px;
	margin				: 5px;
}

#modalResize{
	background-image		: url(images/resize.png);
	height				: 17px;
	width				: 17px;
}

Lastly, the calling methods.

I’ve added both methods here, first attaching to a single element.

Moodal = new MoodalWindow( $( 'moobox-link' ) );

Second, attaching to any link with a class of “moobox”.

$$('a.moobox').each(function(element){
	Moodal = new MoodalWindow( element );
});

Available options:

• height : Pixel height of the Modal Window. (EG: 250)
• width : Pixel width of the Modal Window. (EG: 350)
• overlayColor : Hex colour of the overlay. (EG: ‘#AAAAAA’/'#AAA’)
• overlayTransparency : Transparency level of the overlay, from 0 to 1. (EG: 0.4)
• overlayClose : Boolean value, if you want the modal window to close when you click the overlay background. (EG: true/false)
• move : Boolean value, if you want the user to be able to move the Modal window around, using the Title Bar as a handle. (EG: true/false)
• resize : Boolean value, if you want the user to be able to resize the Modal Window, from the bottom right corner. If this is set to true, the window will not auto position itself when the window scrolls, or resizes. (EG: true/false)
• url : URL to be opened in the modal window. If this is not set, the class will use the HREF from the link. (EG: ‘users/rob/index.php’)
• title : Title bar text, if this is set to false, the title bar will not appear, disabling the close button, and the move/drag feature. If this is not set, the code will attempt to get a “TITLE” variable from the link, or failing that, the text from inside the link.

Options Example:

Moodal = new MoodalWindow( $('link-id'), {
	height			: 700,
	width			: 600,
	overlayColor		: '#000000',
	overlayTransparency	: 0.7,
	overlayClose		: true,
	move			: true,
	resize			: true,
	url			: '/test/hello-world.html',
	title			: 'Hello World!'
});