Javascript: Translating a page or app

Today when working a HTML5 app I realized that it would be sweet to translate it into other languages. It suited perfect for translation as it was a small app with little text and so I googled the subject and came into contact with a jQuery library called i18n which I found on github. It looked sweet and I tested it out using its small but concise guid (found here).

In short I created a structure that looked like this:


www/
- bundle/
--- resources_en.properties
--- resources_se.properties
- js/
--- jquery.i18n.properties.js
--- app.js
- index.htm

The translations were added into a file called XXX_LANG.properties which followed ISO-639 and ISO-3166 language and country code standard (such as resource_en.properties).
The process of fetching the translation was quite simple (as explained in their example):

resources_en.properties

#General stuff
general_save = Save
general_cancel = Cancel

#Home stuff
home_header = Welcome to my site!

resources_se.properties

#General stuff
general_save = Spara
general_cancel = Avbryt

#Home stuff
home_header = Välkommen till min sida!

Index.html

<body>
	<h1 id="home_header"></h1>
	...
	<button id="save_stuff" class="general_save"></button>
	<button id="cancel_stuff" class="general_cancel"></button>
</body>

app.js

//This will loop through all ID´s and classes it
//can find in its arrays and exchange their content with
//the translated content
var translationLoop = function ()
{
	//Translate all id´s
	var ids = ["home_header"];

	for (var i = 0; i < ids.length; i++)
	{
		var id = ids[i];
		jQuery.i18n.prop('generalHeader');
		$("#" + id)
			.text(window[id]);
	}

	//Translate all classes
	var classes = ["general_save", "general_cancel"];

	for (var i = 0; i < classes.length; i++)
	{
		var c = classes[i];
		jQuery.i18n.prop('generalHeader');
		$("." + c)
			.text(window);
	}
};

var generalTranslation = function (language)
{
	jQuery.i18n.properties({
		name: 'resources',
		path: 'bundle/',
		mode: 'both',
		language: language,
		callback: function () {
			//Once the translation file is found and loaded,
			//run the translation for our content
			translationLoop();
		}
	});
};

$(document)
	.ready(function ()
	{
		generalTranslation("se");
	});

JQuery: Handle left-click, right-click and double-click at the same time

I just had to handle a left-click, right-click and a dbl-click at the same time which turned out to be a bit tricky at first using just the mousedown function, but the solution was simple:

$("#Foo")
	.click(function() //Left click
	{
		//Do something
	})
	.mousedown(function(e) //Right click
	{
		if(e.which == 3) //1: left, 2: middle, 3: right
		{
			//Do something
		}
	})
	.dblclick(function() //Double click
	{
		//Do something
	});

Windows 8: Using jQuery in your Windows Store app

Right, so I thought it would be great to write a HTML5 app in windows 8 since it’s supported and everything. The one thing I refuse to skip though is jQuery. So, I added jQuery 1.9.1 to my app, referenced it in my html-file and ran the app. The following popup showed up:

JavaScript runtime error: Unable to add dynamic content. A script attempted to inject dynamic content or elements previously modified dynamically that might be unsafe. For example, using the innerHTML property to add script or malformed HTML will generate this exception. Use the toStaticHTML method to filter dynamic content or explicitly create elements and attributes with a method such as createElement.
The error I received

I searched the web and I found that the only solution that seems safe at the time of writing is to use a “fixed” version for Windows 8, supplied by a company called AppendTo. The files can be downloaded here:
https://github.com/appendto/jquery-win8

Currently the latest jQuery release is 1.9.1 and the AppendTo conversion is 1.8.2 but it’s close enough and it works for me.

According to a couple of videos floating around and some articles on the subject the jQuery 2.0 release will have full support for Windows 8 so that should be great. But until then the AppendTo solution seems to be the best one out there.

Using jQuery in Jira

If you want to make some customizations for your JIRA install using javascript then there are some good news; jQuery is bundled into the package. The only small downside is that you’ll have to bind the $ alias yourself:

(function($){
   $(document).ready(function(){
      //your code here
   });  
})(AJS.$);

The AJS, Atlassian JavaScript, is a library that you can use when making gadgets in JIRA, but you can also use if if you’re just adding features in your banner. The documentation can be found here.

Flooder 2: A jQuery puzzle game

Today I finally finished a working beta of the sequel to the old Flooder game and released it in my new Demo section:
http://maffelu.net/demo/jquery/flooder2/

The demo section itself doesn’t exist so don’t bother going there yet :), but I’m gonna put something up there to store all my demo attempts!

The game is fairly simple and looks like this:

I've worked a bit more on the graphics this time....
I've worked a bit more on the graphics this time....

Whereas the old game was just a demo I made to see if a game could actually be made in jQuery and be fun, this attempt is a bit more serious to see if a game could be really fun, and still look good and run smoothly. Well, try the game and leave a comment on it. There may be a third version developed using HTML5 and CSS3 as well, We’ll see…

Using hosted jquery

En kort genomgång om hur och varför man ska använda googles jquery hosting istället för att ha filerna på den egna servern.

If you are using jquery or jqueryui then make sure that you don’t keep the library itself on your own server. Google, and other companies, are hosting the files you need to use jquery and jqueryui (google also hosts its own jquery-json library).

This has several advantages:

  • You don’t need to host the files yourself
  • You don’t need to care about users who can only download using a certain amount of connections to your server
  • Caching
  • The distance to your user (wherever your server is located, there is always a google server closer to your user)

This means that instead of writing like this:

<script type="text/javascript" src="/javascript/jquery-1.4.4.js"></script>

You write it like this:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

Now you never have to care where you keep your jquery libs. You’ll also know that you’ll be cutting down loading time on your page as most users hopefully have the libraries cached on their computers. So all you have to do is change the version number whenever you feel like upgrading you libraries.

JQuery:
http://code.google.com/intl/sv-SE/apis/libraries/devguide.html#jquery

JQuery – Google JSON Library:
http://code.google.com/p/jquery-json/

JQueryUI:
http://ajax.googleapis.com/ajax/libs/jqueryui/[UI-VERSION]/themes/[THEME-NAME]/jquery-ui.css

The JQueryUI must be used with a defined theme (in the URL there is a [THEME-NAME] section which must be replaced with a propert theme name and UI-VERSION must be changed to version). Here’s a couple of the themes available (all can be found on this google blog). In general any theme name from the jqueryui.com theme gallery can be used: