We Keep Coding

in Angular How to Dynamically Load javascript file depending of user language

I am using Angular for German, English, Spanish, French and Italian users
How to load the local file dynamically depend of User ' Language settings ? as an example :
For German users should Angular load:
https://code.angularjs.org/1.4.3/i18n/angular-locale_de-de.js
For Italian Users should Angular load
https://code.angularjs.org/1.4.3/i18n/angular-locale_it-it.js
I am thinking to use $local.id to define the user language then based on that I load the local file , but I don't know how or if there is any other solution to load the JS file dynamically also is appreciated .
regards

If you have a way to find the language before you load the angular version, you can use a map to find the correct url and just append a new script tag to the end of the body. Adding a script tag will automatically fetch this script and run it.
var language = 'someLanguage',
url = {
'someLanguage' : 'languageURL',
'otherLanguage' : 'otherlanguageURL'
}[language],
script = document.createElement('script');
script.setAttribute('src', url);
document.body.appendChild(script);
Maybe Angular has an angular-specific solution for internationalization, but alas I can't help you with that.

You just need to load the file using $http. In order to check the users locale you can look into angular-translate call preferredLanguage. It finds out from the user browser. Worth to take a look.

you can the angular.translate module for it..
https://angular-translate.github.io/

Grails: <script> vs. <g:javascript>

Can anyone please explain the difference between these two tags and how Grails sees one vs. the other? I have a table with click and hover effects which don't seem to happen when I import jquery using:
<g:javascript library="jquery" />
but do when I do this:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
and I want to use the previous tag because other Grails tags such and remote forms rely on it for their built in ajax capabilities.

The first is the custom Grails tag and tries to load the Javascript library by that name. If you're using the Resources plugin, then the call delegates to that for loading of the library. Take a look at JavascriptTagLib.groovy to see what the custom tag does.
The latter is just the regular HTML script element, and attempts to fetch a script at the location provided.
The issue you're running into may slightly depend on the version of Grails you are running too. Looks like 'jQuery' is not a valid library in Grails 1.3.x:
library (optional) - The name of the library to include. Either "prototype", "scriptaculous", "yahoo" or "dojo"
You may want to make sure that your path is correct and you either have the Grails jQuery plugin installed, or you have the library in your web-app/js directory. Grails 2.x comes with jQuery by default, but older versions did not.

Set language variable using html/js

I am currently creating on online version of a magazine. The magazine is made up of a series of html5 pages. On each page, the user is provided the choice to choose language,"En/Fr".
I would like to know how i can set the language to the chosen one for the whole magazine. For example, suppose I am on page1 and 1 choose lang 'Fr', the other pages too should be loading in Fr. And now, on page20 I choose lang 'En', all the pages should load in 'En'.
Is that possible using html/js??
Could you provide me with a solution.
Thanks

This solution can't be achieved using pure javascript and html, as the variables will be lost when the page is reloaded.
You may like to investigate a solution using cookies.
For your example.
To set language:
$.cookie("language", "fr");
To read language from cookie:
$.cookie("language")
To delete language:
$.cookie("language", null);

There are a few options: using a cookie, using sessionStorage or localStorage, and including language identifier in URLs (path part or query part). There is insufficient information (no info about server-side technology used etc.) to suggest a particular approach. In any case, if you want the pages to be found via search engines, each language version should have a URL of its own.

Get access to Stackoverflow's auto-suggest tagging system?

Is there anyway to get access to stackoverflow's awesome tagging system? I would like to borrow Stack's awesome auto-suggest and tag mini-explanation boxes for my own site. Obviously, I can use the jQuery UI auto-suggest for tags but I would really like to also include the cool little tag descriptions as well. If not, can someone tell me where all these explanation/descriptions came from so that I can implement a similar system?

tageditornew.js
Line 308:
$.get("/filter/tags", {q: a,newstyle: !0}, "json").done(function(c) {
C["t_" + a] = c;
StackExchange.helpers.removeSpinner();
b(c)
})
This might help you out!
It turns out that,
the API url is this:
https://stackoverflow.com/filter/tags?q=STRING&newstyle=BOOLEAN
q - Query text.
newstyle - Require new style or not. Result in new style will be returned in JSON with additional information such as synonyms and excerpt.
DEMO: http://jsfiddle.net/DerekL/bXXb7/ (with Cross Domain Requests jQuery plguin)
For example:
https://stackoverflow.com/filter/tags?q=htm
would give you:
"html|99829\nhtml5|16359\nxhtml|4143\nhtml-parsing|1461\nhtml-lists|1328\nhtml5-video|949"
where 99829 is the amount of questions. It took me 15 minutes looking at the source code to find out this api. -_-"
Putting in javascript in new style gives you this: here
[{"Name":"javascript","Synonyms":"classic-javascript|javascript-execution","Count":223223,"Excerpt":"JavaScript is a dynamic language commonly used for scripting in web browsers. It is NOT the same as Java. Use this tag for questions regarding ECMAScript and its dialects/implementations (excluding ActionScript and JScript). If a framework or library, such as jQuery, is used, include that tag as well. Questions that don't include a framework/library tag, such as jQuery, implies that the question requires a pure JavaScript answer."},{"Name":"javascript-events","Synonyms":"javascript-event","Count":5707,"Excerpt":"Creating and handling JavaScript events inline in HTML or through a script."},{"Name":"facebook-javascript-sdk","Synonyms":"","Count":992,"Excerpt":"Facebook's JavaScript SDK provides a rich set of client-side functionality for accessing Facebook's server-side API calls. These include all of the features of the REST API, Graph API, and Dialogs."},{"Name":"javascript-library","Synonyms":"","Count":675,"Excerpt":"A JavaScript library is a library of pre-written JavaScript which allows for easier development of JavaScript-based applications, especially for AJAX and other web-centric technologies."},{"Name":"javascript-framework","Synonyms":"","Count":563,"Excerpt":"A JavaScript framework is a library of pre-written JavaScript which allows for easier development of JavaScript-based applications, especially for AJAX and other web-centric technologies."},{"Name":"unobtrusive-javascript","Synonyms":"","Count":340,"Excerpt":"Unobtrusive JavaScript is a general approach to the use of JavaScript in web pages."}]
What you can get from there:
All tags start with javascript
Synonyms
Tag counts
Nice tag descriptions

If you're looking for high-level logic, in a nutshell it's just a custom auto-complete that's blazing-fast.
Whenever you type a tag (i.e. a new word or one separated by a space from previous tags), an AJAX request would be made to the server with a JSON object which is then interpreted by the client-side script and presented in the usable layout.
Comparing the autocomplete JSON objects for letter "h" and word "html" should give you enough insight into how this particular implementation works (if prompted, these can be opened with any text editor).
On a somewhat unrelated note: the autocomplete responses have to be fast. Depending on the complexity of the data autocomplete is run against, you may find how IMDb magic search works intriguing.
Update:
Seeing your comment about accessing the content of the tag library, this may in fact be more of a meta question. I struggle to think of a scenario where using an API if any or just the tag library from an external resource would be beneficial to SO - however content here is provided under Creative Commons so you may be able to use it with proper attribution. This does not constitute legal advice :)

What are best practices for preventing stale CSS and JavaScript

I'm researching this for a project and I'm wondering what other people are doing to prevent stale CSS and JavaScript files from being served with each new release. I don't want to append a timestamp or something similar which may prevent caching on every request.
I'm working with the Spring 2.5 MVC framework and I'm already using the google api's to serve prototype and scriptaculous. I'm also considering using Amazon S3 and the new Cloudfront offering to minimize network latency.

I add a parameter to the request with the revision number, something like:
<script type="text/javascript" src="/path/to/script.js?ver=456"></script>
The 'ver' parameter is updated automatically with each build (read from file, which the build updates). This makes sure the scripts are cached only for the current revision.

Like #eran-galperin, I use a parameter in the reference to the JS file, but I include a server-generated reference to the file's "last modified" date. #stein-g-strindhaug suggests this approach. It would look something like this:
<script type="text/javascript" src="/path/to/script.js?1347486578"></script>
The server ignores the parameter for the static file and the client may cache the script until the date code changes. If (and only if) you modify the JS file on the server, the date code will change automatically.
For instance, in PHP, my script to create this code looks like this:
function cachePreventCode($filename) {
if (!file_exists($filename))
return "";
$mtime = filemtime($filename);
return $mtime;
}
So then when your PHP file includes a reference to a CSS file, it might look like this:
<link rel="stylesheet" type="text/css" href="main.css?<?= cachePreventCode("main.css") ?>" />
... which will create ...
<link rel="stylesheet" type="text/css" href="main.css?1347489244" />

With regards to cached files, I have yet to run into any issues of bugs related to stale cached files by using the querystring method.
However, with regards to performance, and echoing Todd B's mention of revving by filename, please check out Steve Souders' work for more on the topic:
"Squid, a popular proxy, doesn’t cache resources with a querystring. This hurts performance when multiple users behind a proxy cache request the same file - rather than using the cached version everybody would have to send a request to the origin server."
"Proxy administrators can change the configuration to support caching resources with a querystring, when the caching headers indicate that is appropriate. But the default configuration is what web developers should expect to encounter most frequently."
http://www.stevesouders.com/blog/2008/08/23/revving-filenames-dont-use-querystring/

Use a conditional get request with an If-Modified-Since header

This is actually a very hard issue, and something that you can spend a while engineering the correct solution for.
I would recommend publishing your files using a timestamp and/or version built into the url, so instead of:
/media/js/my.js you end up with:
/media/js/v12/my.js or something similar.
You can automate the versioning/timestamping with any tool.
This has the added benefit of NOT breaking the site as you roll out new versions, and lets you do real side-by-side testing (unlike a rewrite rule that just strips the version and sends back the newest file).
One thing to watch out for with JS or CSS is when you include dependent urls inside of them (background images, etc) you need to make sure the JS/CSS timestamp/version changes if a resource inside does (as well as rewrite them, but that is possible with a very simple regex and a resource manifest).
No matter what you do make sure not to toss a ?vblah on the end, as you are basically throwing caching out the window when you do that (which is unfortunate, as it is by far the easiest way to handle this)

If you get the "modified time" of the file as a timestamp it will be cached until the file is modified. Just use a helper function (or whatever it is called in other frameworks) to add script/css/image tags that get the timestamp from the file. On a unix like system (wich most survers are) you could simply touch the files to force the modified time to change if necessary.
Ruby on Rails uses this strategy in production mode (by default I beleave), and uses a normal timestamp in development mode (to be really sure something isn't cached).

If you use MAVEN, you can use this, ADD on you pom.xml:
<properties>
<maven.build.timestamp.format>yyyyMMddHHmm</maven.build.timestamp.format>
<timestamp>${maven.build.timestamp}</timestamp>
</properties>
With this you can acess ${timestamp} in your view.
Like this sample:
<script type="text/javascript" src="/js/myScript.js?t=${timestamp}"></script>

Based on Todd Berman's answer of incorporating a revision number into the URL (but not as a query string), a perhaps slightly more convenient approach would be to have the server transform the versioned URL into a canonical form. This could be done with symlinks, e.g.:
/media/js/v12/my.js => /media/js/my.js
or you could set up server-side URL rewrites to always transform paths of the form /media/js/v*/my.js to, say, /media/js/my.js.