Response title
This is preview!
- Screen name: bryan.jquery13
- About Me: I work on open-source educational software
- Blog:
- Website:
bryan.jquery13's Profile
13 Posts
8 Responses
0
Followers
Activity Trend
Last 30 days
Loading Chart...
Show:
- Expanded view
- List view
- I love the jQuery UI icons but they are just too small for my particular needs. I develop educational lessons for kids and they need big icons.I have hacked up my own solution but it hard to maintain. I took the jquery ui sprites and increased each by a factor of 3. I then went multiplied all the css dimension information by the same factor. I also have to tweak my own css to position the bigger icons properly.Is there an easier way to do this?
- 12-Feb-2010 09:44 PM
- Forum: Developing jQuery UI
I feel that the current way that jQuery UI plugins handle internationalization is rather messy and not maintainable in the longer term.The current mechanism, afaict, is to fork your plugin code with a version for each locale you want to support, as datepicker does.I recommend instead that locale information be separated from plugins and loaded separately. Since code size is important to web devs, you would only load those locales that your application needs on-demand.I have written a simple jQuery plugin for managing this locale informationThis plugin organizes localization information as followsjquery.locale_name.json // formatting values specific to a locale such as currency, dates, numbersjquery.plugin_name.locale_name.json //strings used in the plugin w/ their translations for locale locale_namemyapp.locale_name.json //strings in my general application and their translation for locale locale_nameDividing up information this way may sound complex but it is quite lightweight and maintainable.Here is an example of storing that locale information for the Nepali localeFile: jquery.ne.json$.i18n.ne = { date : 'dd/mm/yy', monetary: 'nn,nnnn.nn', currency: 'rs', numeralBase : 2406, numeralPrefix:"u0" /* * additional values that could be added * * monetary format * non-monetary numeric format * date format * time format * yes, no for yes, no questions */ };This locale information would be accessed from a plugin using accessor and conversion methods.I have written more in this announcement to the general jQuery forumand in the README for my pluginAlmost no ideas in this plugin are original and most originate in the GNU C Library's localization API.- 12-Feb-2010 03:32 AM
- Forum: Using jQuery
jquery-i18n is a simple plugin I have created that helps you internationalize your web application. You can also use it to extend other jQuery plugins to support internationalization.I have already used it for applying internationalization to jQuery UI plugins. I think it has a lot of relevance to plugins like Datepicker. jQuery-i18n copies a lot of the GNU C Library's internationalization API but differs in significant waysI would very much appreciate comments on this plugin. I have to support several different languages in my applications and I have not been satisfied with the solutions I have found.=== Namespace ===jQuery-i18n adds the "i18n" namespace to jQuery. "_" is also added as a shortcut.$.i18n, $._$.i18n, $._ are also method calls to translate an individual string=== How jQuery-i18n maintains locale information: ===Non-application specific information is maintained in a separate json file named jquery.locale_name.json . This should include date, currency, number, and other formatting information.Examples:jquery.ne.json # Nepali localejquery.es.json # Spanishjquery.pt_BR.json # Brazilian PortugueseExample locale file:-- File: jquery.ne.json, where "ne" stands for Nepali locale --$.i18n.ne = {date : 'dd/mm/yy',monetary: 'nn,nnnn.nn',currency: 'rs',numeralBase : 2406,numeralPrefix:"u0"/** additional values that could be added** monetary format* non-monetary numeric format* date format* time format* yes, no for yes, no questions*/};Notice that the above example only includes formatting information and not strings. I amassuming that the strings you need to translate will vary from app to app while the formatting will not.You should put the strings for your application in a separate file and extend thenamespace $.i18.locale_name.stringsFile: example.ne.jsonjQuery.i18n.ne.strings = {"Hello": "Namaste", "Welcome":"Namaste"};=== Methods ===Currently there are only a few methods$.i18n.setLocale(locale); // set your current locale$.i18n(string), $._(string) // get a translation from the myapp_name.locale_name.json file. If a translation isn't available, the original string is returned unchanged.$.i18n._n(number), $._n(number) //convert number to numeric character set for localefor example: 90 is written as ९० in Hindi and Nepali=== Using jQuery-i18n in your web app ===Step 1: Mark the strings and numbers you want translated with $._("") and $._n()Step 2: Put translations for each string in your_app.locale_name.jsonStep 3: Include a ton of files<script type='text/javascript' src='./jquery-1.3.2.min.js'></script><script type='text/javascript' src='./jquery.i18n.js'></script><script type='text/javascript' src='./jquery.ne.json'></script><script type='text/javascript' src='example.ne.json'></script>Step 4: Try it out!=== Using it in a plugin ===Translations for jQuery plugins shouldn't be lumped together in one global namespace for each end-user's applications. Firstly, because the strings in the plugin may have a different translation context. Secondly, there is a likelihood the plugin will be translated by someone other than the end-user.jQuery-i18n can easily be extended for each plugin.This is handles by putting the translation for each locale under:plugin_name.i18n.locale_nameFor example, my jQuery UI plugin kFooter has the namespace $.ui.kFooter.jQuery-i18n would add the Nepali locale to $.ui.kFooter as $.ui.kFooter.i18n.neHere is the json file that does that--- File: ui.kFooter.ne.js ----$.ui.kFooter.i18n.ne.strings = {"Score":"अङ्क", "Total": "जम्मा", "Play Again": "फेरी खेलौ", "Pause": "खेल रोकौ","Start": "सुरु गरौ" }}Then add the $._() and $._n() functions to your plugin but call them with context ofyour plugin-- File: ui.kFooter.js --_ : function(val, loc){return $.i18n.call($.ui.kFooter, val, loc);},_n : function(val, loc){return $._n(val, loc); // converting #'s usually doesn't need your plugin's context},Make sure to extend your plugin namespace$.ui.kFooter.i18n = {};Then add the gettext function-- File: ui.kFooter.js --this._('Score');This is a very rough draft. Comments and constructive criticism most welcome!bryan full-stop berry _>at<_ gmail full-stop comAll code is under MIT license- 27-Jan-2010 11:25 PM
- Forum: Developing jQuery UI
I have to support several locales for the jQuery UI plugins I am creating and am trying to think of a consistent way to support localization of numeral characters and any strings that may be embedded in the plugin. I think the mechanism I have in mind may be useful to the larger jQuery UI set of plugins.To clarify, this proposal is mean to support localization of numeral characters and strings embedded in a plugin, not dates or currency formats ($ 1.000,00 vs. 1,000.00) but it could conceivable support those as well. If you aren't already aware, a number of languages like Arabic and Hindi use different numeral characters for 1-9. For example, ४ is 4 in Hindi.I propose the following methods for localizing strings and numbersNew Functions$._({String}, [locale])find translation of string for current locale. In case you have multiple locales loaded, you can pass a different locale from the default one. Say the default the locale is English but you need to interject Nepali. An example of this would be an English Lesson for Nepali children.$._c({context}, {String}, [locale])find translation of string for current locale in a given context. In case you have multiple locales loaded, you can pass a different locale from the default one. Say the default the locale is English but you need to interject Nepali. An example of this would be an English Lesson for Nepali children.$._n({Number}, [locale])convert the number to specified locale.While '_' is used to prefix private variables and methods in js, it is the standard shorthand for the GNU gettext() method in a number of languages and frameworks.Loading LocalesI think locales should be loaded individually for each plugin rather than a big page wide plugin. Also, the locale information should be embedded in the main plugin code. It bulks up the code and different versions of the code for each locale á la datepicker, makes the code harder to maintain.All the locale info should be in a .json file in the ui.plugin_name.l10n.locale_name.json filefor an example datepicker pluginui.datepicker.jsui.datepicker.cssui.datepicker.l10n.ne.json //'ne' for nepal, my country of residence ;)datepicker.js would then load the json file as $.ui.datepicker.l10n.neI recommend using the l10n namespace because otherwise we would conflict with any two-letter property name..json localization json files for a site could be consolidated into a single .json file for deployment.The Problem of ContextsIn English, we often use the same word to mean different things in different contexts. A good example is "right" which can mean a direction and affirmation. Spanish, Nepali, and many other languages do not use the same word for the direction and affirmation.GNU gettext, the standard bearer for open-source localization, lets you specify contexts for this kind of situation._c(context, string, [locale]) could be usedFor example, _c('map', 'right') for the context of a map and _('test', 'right') to fetch the translation in the context of a test on the same page.I am not exactly sure how to handle contexts, but it is important to considerSummaryI hope to have a basic prototype of this up and running by the end of the week.I haven't explored how to use this mechanism to handle currency and date formats, I think it could easily do so. A harder problem is handling the localization of css, something I haven't put hard thought into.Ideas have been liberally borrowed/stolen from- 22-Jan-2010 05:41 AM
- Forum: Using jQuery
This post is not directly related to jQuery but is pertinent to js+html5 development. I am trying to move my team of developers entirely away from flash development to js+html5 but there is one piece of flash functionality that I have no idea how to emulate.
In Flash you can create MovieClip object that lives entirely in its own namespace and only requires me to embed one swf file. The MovieClip object does not necessarily contain a movie. It could contain an interactive animation, audio player, or small interactive widget.
Is there anyway I could do something like this w/ js + html? that is embed an arbitrary piece of functionality anywhere in my html, everything in 1 file, and not have to worry about namespace conflicts?
I finally figured out how to document a jQuery UI plugin with jsdoc-toolkit
Here is my code:
http://git.sugarlabs.org/projects/karma/repos/mainline/blobs/master/js/ui.scoreboard.js
EDIT: fixed URL
and here is the generated documentation
http://karma.sugarlabs.org/docs/index.html
of additional interest, I use a Jake task, Rake in JavaScript to generate the docs
Here is my Jakefile
http://git.sugarlabs.org/projects/karma/repos/mainline/blobs/master/Jakefile
I would like to scale up the jQuery UI sprites using the gimp. I am creating software for young children and the stock icons are too small for them.
I was just planning on increasing the dimensions of the sprite image using gimp. Is there anything else I have to change? Do I have to alter the css rules that reference individual images?
tks
- 18-Jan-2010 05:40 AM
- Forum: Using jQuery UI
Doe jQuery UI have an internationalization strategy?
As far as I can tell there isn't a comprehensive i18n strategy for jQuery UI. The datepicker widget supports i18n, but having a separate i18n implementation for each widget seems to be a bit wasteful and redundant
The first step would be to emulate basic GNU gettext, where you could set the locale globally for your jQuery UI widgets
$.ui.locale = "ne"; for Nepal
and have a global jquery.ui.strings.json file where plugins could query for matching strings.
In my case, I have a scoreboard widget which shows the user's current score in the game and text on buttons "Restart", "Play", "Pause"
rather than just hard coding the text into my widget, I could put a wrapper function around text
$("<div>" + $.gettext("Play") + "</div>") // or $._("Play") for short-hand method
The gettext method would check against the jquery.ui.json for a translated version of that string. If none exists, or the jquery.ui.strings.json doesn't exist, the string is returned unaltered.
Thoughts?
For those not familiar with Gnu gettext, it is the i18n mechanism for gnome, kde, rails, django, and most popular open-source frameworks
http://www.gnu.org/software/gettext/
This is not technically related to jQuery but web development in general
Anybody know how to convert western numbers to other languages? Hindi and Arabic use the same numbering system but they draw the characters for each numeral differently than we do in US and Western Europe.
for instance, १ is a 1 in Devnagari (Hindi)
EDIT: figured out my own question
This does it where 2406 is the base decimal # for devanagari
eval('"\\u0' + (2406 + num).toString(16) +'"')
I was assigned a username but I can't figure out how to change it to my irc handle. pls advise.
I have gone into my account at accounts.zoho.com and couldn't find a place to change it there
- 17-Jan-2010 02:41 AM
- Forum: Developing jQuery UI
I will be spending a lot of time developing custom set of widgets for managing simple games, like scoreboard, timer, feedback, etc. The code will be MIT-licensed.
Should I post my questions related to these widgets to this forum or to the Using jQuery UI forum?
- 20-Dec-2009 09:54 PM
- Forum: Developing jQuery Core
<div>I am proud to release karma.js version 0.2 today. karma.js is a library for manipulating HTML 5 and SVG. It was developed specifically for educational applications but can be used for general development. I use karma.js together with jQuery and I believe the libraries complement each other. For this reason I am notifying the jquery-dev mailing list.</div>
<div>
</div><div>You can get v0.2 of karma.js here:</div><div><a href="http://git.sugarlabs.org/projects/karma/repos/mainline/blobs/master/js/karma.js">http://git.sugarlabs.org/projects/karma/repos/mainline/blobs/master/js/karma.js</a></div>
<div>
</div><div>You can test out the demos here <a href="http://karma.sugarlabs.org" target="_blank">http://karma.sugarlabs.org</a>. You need Firefox 3.5 or Google Chrome/Chromium to run the demo. We now have a well-documented API and a four part tutorial. </div>
<div>
</div><div>The Karma Project aims to create high-quality open-source educational software using openweb technologies for the Sugar desktop educational environment. karma.js is a javascript library for manipulating HTML 5 and SVG in any context.</div>
<div>
</div><div>New Features:</div><div>* Stable API <a href="http://karma.sugarlabs.org/docs/index.html" target="_blank">http://karma.sugarlabs.org/docs/index.html</a></div><div>* Now much more reliable</div><div>* Pre-loading of SVG images</div>
<div>* 10+ example lessons</div><div>
</div><div>Features that didn't make it into Release 0.2:</div><div>* Internationalization mechanism for inline text</div><div>* New browsing layout (Chakra)</div><div>
</div>
<div>I am particularly proud of the Karma version of "Conozco a Uruguay". You can try it out online right away. <a href="http://karma.sugarlabs.org/examples/Conozco-Uruguay/index.html" target="_blank">http://karma.sugarlabs.org/examples/Conozco-Uruguay/index.html</a></div>
<div>
</div><div>If you are interested in Karma, the first step is to join our Google Group and to look through our four-part tutorial series. <a href="http://groups.google.com/group/karmajs" target="_blank">http://groups.google.com/group/karmajs</a></div>
<div>
</div><div>Tutorial series</div><div>* Introduction to karma.js, <a href="http://karmaeducation.org/2009/12/14/an-introduction-to-karma-js/" target="_blank">http://karmaeducation.org/2009/12/14/an-introduction-to-karma-js/</a></div>
<div>* Comparing HTML 5 Canvas and SVG <a href="http://karmaeducation.org/2009/12/17/karma-tutorial-part-ii-comparing-html-5-canvas-and-svg/" target="_blank">http://karmaeducation.org/2009/12/17/karma-tutorial-part-ii-comparing-html-5-canvas-and-svg/</a></div>
<div>* Digging into Inkscape <a href="http://karmaeducation.org/2009/12/17/tutorial-iii-building-a-geography-lesson/" target="_blank">http://karmaeducation.org/2009/12/17/tutorial-iii-building-a-geography-lesson/</a></div>
<div>* JavaScript and SVG <a href="http://karmaeducation.org/2009/12/17/tutorial-iii-the-adventure-continues-javascript-and-svg/" target="_blank">http://karmaeducation.org/2009/12/17/tutorial-iii-the-adventure-continues-javascript-and-svg/</a></div>
<div>
</div><font color="#888888"><font color="#888888"><div>Bryan Berry</div><div>
</div></font></font>--
- 15-Sep-2009 03:51 AM
- Forum: Using jQuery
We are proud to release Karma version 0.1 today. Please download the
code and try it out for yourself. You can also test out the demo here.
You need Firefox 3.5 to run the demo.
The core of Karma is a jQuery plugin for manipulating html5 audio, image, canvas elements.
Source Code:
http://karma.sugarlabs.org/karma-0.1.tar.gz
Features:
* Chaining of operations
* Wrappers for drawing functions
* API documentation
* simple mechanism for pre-loading images and audio
Known Bugs:
* You cannot access the Adding_Up lesson from google chrome or
chromium. It does work if you have the lesson stored on your
local machine. This is because chromium does not yet support
loading media over HTTP.
* Knavbar with adding up.
* The links on ‘kstart’ page to Teacher’s Note and Lesson Note
don’t go anywhere
* The css on stages 2 and 3 of Chakra are all screwed up
Features that didn’t make it into Release 0.1:
* Internationalization mechanism
* SVG manipulation
* Addition of knavbar to adding_up_to_10
* A refactored version of the Quadrilaterals lesson
Contributors:
* Bryan Berry
* Felipe Lopez Toledo
* Christoph Derndorfer
* Om Prakash Yadav
* Rabi Karmacharya
* Roshan Karki
* Saurav Dev Bhatta
* Devendra Khadka
* Pavel Mocan
Please test out Chakra and our first lesson “Adding up.” We would most
appreciate it if you report any bugs you find to our bugtracker on
launchpad
--
Bryan W. Berry
Technology Director
OLE Nepal, http://www.olenepal.org
© 2012 jQuery Foundation
Sponsored by
and others.