In Android, there’s an advanced settings application called “Testing” which can be launched by entering *#*#4636#*#* into the phone application’s dialer. I then attempted to bookmark a tel: URI of the number but found out that the browser application does not allow tel: URIs as bookmarks, claiming they are invalid. I have made a simple Android webapp that redirects all subsequent visits after the first visit to this application, and gave it a fancy launcher icon from the Tango Icon Library. The QR Code on the left also points to the webapp.
Android Advanced Settings Webapp
Localization in JavaScript
Today, I created an advanced localization JavaScript library named l10n.js. The library enables localization through the native JavaScript method intended for it, gracefully degrading if the library is not present. As it gracefully degrades, you can make Ajax applications, JavaScript libraries, etc. that can be localized but not require l10n.js to function. There is already a placeholder method for all API calls as specified in the ECMAScript specification and is present in all JavaScript engines, so when l10n.js isn’t present, your application works fine.
Demo
You can try out the online demo to see l10n.js in action. Currently, only the languages mentioned in the readme are supported, but more will eventually be added.
Usage
API
API documentation can be found in the readme. All API calls gracefully degrade, so calling them even without l10n.js loaded causes no problems.
Localizing strings
Calling toLocaleString() on every localizable string can create a lot of extra typing and bloat for sending your JavaScript down the wire. I recommend using the following helper function to localize strings. The reason I don’t define this in l10n.js is to not introduce any new globals, which keeps l10n.js a one of the JavaScript libraries least-prone to conflicts with other libraries.
var l = function (string) { return string.toLocaleString(); };
With this helper function, you can start writing l("Your localizable string") instead of "Your localizable string".toLocaleString(). I chosel instead of _ (an underscore), because it’s easier to spot so you can quickly skim your code to see which strings are localizable.
Variable replacement
If you don’t mind requiring l10n.js for your JavaScript application or library to function, I suggest using short variable strings instead of default strings. It saves bandwidth by decreasing the size of localization files, and it enables you to write nice, short code as such in the following.
document.title = l("%title.search")- Example results:
"Seach - Acme, Inc."
- Example results:
confirm(l("%confirm.deleteAccount"))- Example results:
"Are you sure you want to delete your account?"
- Example results:
link.href = "http://www.google" + l("%locale.tld")- Example results:
"http://www.google.co.uk"
- Example results:
Often, string concatenation is used instead of replacement in JavaScript. With l10n.js, to make localization easier, you may have to use replacements instead. You might want to use a JavaScript library that implements something similar to C++’s sprintf(). A nice JavaScript implementation I’d recommend is php.js’s sprintf().
When localizations are downloaded
If you are using single localization URLs (<link rel="localization" hreflang="..." href="..." type="application/x-l10n+json"/>), they will only be downloaded when needed. If you are using multiple localizations in one (<link rel="localizations" href="..." type="application/x-l10n+json"/>), then the file will be downloaded right away, but externally linked localizations in the localization file will not be. If you provide an interface for your users to change locales, any non-loaded localization files will be loaded when necessary.
Including localizations with link elements
Multiple localizations can be included with one localization JSON file, with all of the top properties being language codes. Instead of putting all of the localized strings directly in the file, you may want to assign a specifc localization JSON URL to each locale, as to save bandwidth by only downloading locales the user needs.
The following is an example localization file for <link rel="localizations" href="path/to/localizations.json" type="application/x-l10n+json"/>.
{ "en-US": { "What is your favourite colour?": "What is your favorite color?" }, "fr": "path/to/french-localization.json" }
Using localization files is the same as calling String.toLocaleString() witht the JSON localizations object as the first parameter.
You can also include single localizations by specifying the standard HTML5 hreflang link element attribute and using a rel of localization instead of localizations with an ‘s’, as shown in the following.
<link rel="localization" hreflang="en-US" href="american-english.json" type="application/x-l10n+json"/>The JSON file for the localization might look like the following.
{ "What is your favourite colour?": "What is your favorite color?" }
Posted in JavaScript, JavaScript Libraries
Tagged i18n, internationalization, l10n, localization
View Comments
tinylog
tinylog is a minimalistic logging platform JavaScript library I created which is primarily intended for online IDEs and implementing console.log() for browsers without native consoles. There is also a lite version intended for embedding in other JavaScript libraries. One such library that embeds tinylog lite is Processing.js, which uses it to implement Processing’s println().
There are also online demos of using tinylog that you can try out. The tinylog saved log viewer demo only works in browsers that support the W3C File API which is only Firefox as of now.
Posted in JavaScript, JavaScript Libraries
Comments Off
Pausing JavaScript with async.js
async.js is a library that aims to make it so you don’t have to mess with callbacks when making applications in JavaScript 1.7 or higher by using the yield statement to pause function execution.
Examples
Please note that user interaction with the page is not blocked during the course of any of these examples.
A node.next(eventType) method
The node.next(eventType) method would pause a function until the specified event is fired on the node that next was called on and would return the captured event object.
var listenForNextEventDispatch = function ([node, eventType], callback) { var listener = function (event) { node.removeEventListener(eventType, listener, false); callback(event); }; node.addEventListener(eventType, listener, false); }; Node.prototype.next = function (eventType) { return [listenForNextEventDispatch, [this, eventType]]; };
You could now then the following in an asynced function to handle the next click event on the document.
var clickEvent = yield document.next("click"); // handle click event here
Asking the user for their impressions of async.js
The following code does not use any obtrusive and annoying functions like prompt or alert yet still can utilize execution-blocking features.
yield to.request("feedback", "POST", ( yield to.prompt("What are your impressions of async.js?") )); yield to.inform("Thanks for your feedback!"); // do more stuff here
As opposed to the following, which is functionally equivalent to the previous code but doesn’t use async.js’s blocking features.
async.prompt( ["What are your impressions of async.js?"], function (response) { async.request( ["feedback", "POST", response], function () { async.inform( ["Thanks for your feedback!"], function () { // do more stuff here } ); } ); } );
That’s a lot of callbacks, all of which are implied when you use async.js.
Creating an async.js module for thatFunctionThatUsesCallbacks
async.yourMethodName = function ([aParameterThatFunctionUses], callback) { thatFunctionThatUsesCallbacks(aParameterThatFunctionUses, callback); };
You could then use yield to.yourMethodName(aParameterThatFunctionUses) and immediately start writing code that depends onthatFunctionThatUsesCallbacks function after the statement.
Posted in Hacks, JavaScript, JavaScript Libraries
View Comments
Fonts in Processing.js
I recently implemented fully-featured cross-(HTML5-supporting)-browser loadFont() and text() functions in Processing.js. This implementation does not suffer from the limitation of the old implementation that only supported SVG fonts and writing text from already-installed fonts only worked recent Mozilla-based browsers. I also revamped the entire library, fixing a few hundred errors, changing and optimizing many Processing method implementations, and getting rid of all of the implied global variable leaks. Included is an image gallery of the same Processing program being run using Processing and Processing.js. The one showing only the outputted image was saved directly from a canvas element. You can also try out fonts in Processing.js at this demo page. The demo page does not use the same font as in the screenshot but it is similar. If your browser does not support @font-face CSS rules but does support the canvas text API, your system default monospace font will be used instead.
