Develop Reference

Angular Translate - Multi Language - Static Files - Race Condition?

I'm currently using angular translate with the static files loader. I'm implementing at least 3 languages currently, however, I've noticed that typically when it's attempting to load the language file sometimes it takes longer to load the language file than it does for the view itself - which results in a partially translated UI. Most of the items on the screen will stay untranslated, but certain ones will be.
I've tried the following, with no changes:
setting forceAsyncRefresh(true) when configuring the $translateProvider.
set a $rootScope watch in the login controller (first view user will see), and on translateLoadedSuccess, call $translate.refresh().
Upgraded to the latest angular translate
99.9% of all translations are currently being done in the view, e.g.: {{ ::'My Translation Key' | translate }}
What am I missing in trying to resolve this issue? Should I be trying to manually load these language files and set them at an early load time? If so, how do I setup the use of them in the config?
I'm using Angular 1.5.0 and Angular Translate 2.11.1.
TIA!

So this actually was a race condition where the time it was taking to load up the language file initially, was sometimes (not always) longer than it would take angular-translate to static file load the language file.
As far as I could tell, there were two (2) options available - either manually load and setup the language file, or move the language file into separate smaller files themselves. However, I wanted to always be guaranteed moving forward that this wasn't going to be an issue, so I opted to manually load and setup the language file. This actually was fairly simple and required the following:
1) The language file(s) would be loaded at the top of the items in the index.html file.
2) The language file(s) would be assigned a variable in themselves - ie var enUS = { 'LOGIN': 'Login', 'USER': 'User' }
3) The language would be manually setup in the app.config:
app.config(['$translateProvider', function($translateProvider){
$translateProvider.translations('en_US', enUS); // this is the variable we assigned to the language json in step 2
$translateProvider.preferredLanguage('en_US');
$translateProvider.useSanitizeValueStrategy('sanitize');
}]);
That completely fixed all problems across all clients.

How to implement error tracking in a polymer?

Is there a way of error tracking in Polymer?
Problem is that apparently vulcanize and polybuild processes couldn't provide any source-maps (Please correct me if I'm wrong). That means that even if I will catch an exception in vulcanized java script code using global window.onerror function I will be not able to map it back and find an actual location of an error in a source files.
any solutions/workarounds would be highly appreciated.

Here is my idea of what could be done. Please provide your ideas and solutions aswell. This solution is not tested.
according to https://github.com/PolymerLabs/polybuild polybuild tool is the same as:
vulcanize --inline-css --inline-scripts --strip-comments index.html | polyclean | crisper --html index.build.html --js index.build.js
the order is:
1) vulcanize produces one html formatted file.
2) polyclean uses uglifyjs internaly and perform some cleaning
3) crisper is used to separate already uglyfied and minified js from html
as far as I know uglifyjs doesn't work with html files as input so polyclean manually cuts parts of js code', put it through uglifyjs and paste it back (I hope I understood correctly how polyclean works). That's why creating of source maps is useless in this context.
my idea is to change the order of polyclean and crisper and modify polyclean to allow using external options for uglifyjs2:
new order:
1) vulcanize produces one html formatted file.
2) crisper is used to separate formatted js from html.
3) polyclean uses uglifyjs internaly and perform some cleaning (in this case we need to use on both js and html files)
So first you will have html file and formatted js file and only then you can use uglifyjs2(call from polyclean or standalone?) with --source-map and --source-map-include-sources options.
Now you can keep tracking your errors using produced source-map which already contains formatted copy of js file produced in step #2.

How do I get Eclipse to command complete Java Script string related functions

I'm doing string manipulation in Java Script. My Eclipse (Luna) is handling command completion for many things, but string functions it is not.
var sillyString = "hello";
sillyString. <- command complete here: ctrl-space triggers a dropdown with nothing in it.
I have to use Google to figure out things like this: http://www.sitepoint.com/15-javascript-string-functions/
Command complete works for other Java Script items in my code base.

To configure JavaScript Content Assist options:
Go to the JavaScript Content Assist preferences page, accessed from Window | Preferences | Web | JavaScript | Editor | Content Assist.
Configure the following options, according to your preferences:
Insertion
Completion Inserts/Completion Overwrites - Select whether choosing an item from the Content Assist list will cause new code to be entered or existing code to be overwritten.
Insert single proposals automatically -If enabled, the content assist suggestion will be inserted automatically when only one content assist option exists
Insert common prefixes automatically - If enabled, Content Assist will automatically insert the common prefix of all possible completions similar to Unix shell expansion. This can be used repeatedly, even while the Content Assist window is being displayed.
Click Apply to apply your settings.
taken from this link eclipse Javascript intelisense

tracking a javascript found in pagesource

ive tried everything i cud to figure this out, but i cannot track a piece of javascript in a webpage
so, just to give you some context even though my problem is not related to just this scenario. it depends on a much bigger spectrum.
Anyway, im developing on sugarCRM and im trying to edit the default onclick behavior of a slot in calendar module (you dont need to understand this to help me, so please keep reading). when i click on a slot, a modal dialog window opens that lets me log a meeting or a call.
So i tracked down the javascript behind this. ive used firebug and chrome, and they both give a list of all the JS files that are being used on a given webpage
for example i search for "SUGAR.collection" and firebug tells me its located in a file named "sugar_field_grp.js?v=FVh1Z-v5nA6bYov7-aFFqQ" i can see this piece of code resides in sugar_field_grp.js,
but the code im trying to change resides in "index.php?module=Calendar&action=index&parentTab=Activities", firebug actually tells me this is the file that has the javascript i want to change.
I can also right click view page source and i can see that piece of code inside the script tag. so considering this piece of code doesnt reside in a JS file, i cannot change it, its generated at runtime (i think) but there must be some source, there must be a file thats telling sugarCRM to generate this code
tl;dr how to track down a piece of javascript code that resides on pagesource and theres no JS file specified by firebug or chrome save for index.php (this file doesnt have that javascript either)
i know its been a long post
thanks for reading

Learn how to search for strings in files on disk on your machine.
On Linux, MacOS and most unixen the go-to tool for this is grep. This applies to any programming language you work with. For your case simply cd into the directory of your source code and do:
grep -r SUGAR.collection .
If you're using git as your source control tool then git grep is much faster.
On Windows there are various GUI tools you can use to search for text in files. Just google: grep for windows.
If you're using an IDE then just your IDE's find-in-files functionality.

To track down specific code using Chrome / Webkit go through the following two steps:
Client:
1. Search all static text sources
Open the Dev Panel using CTRL + SHIFT + I
Hit CTRL + SHIFT + F for a global search dialog to pop up
Right next to it you can set pretty printing of the JS code to on: button { }
Enter your search term or terms using regular expressions
Optional: Decide if you need a case insensitive search which has a greater searchspace and takes longer
Example:
2. Search the dynamic user-DOM contents
Go to the Tab 'Elements' hit CTRL + F.
Enter your search term (This will also search iframes, svg's etc... within the parent DOM)
3. Recommended:
Cross-reference the results of step 1. and step 2.
If a given string is present in both the DOM and the static sources, then you can assume that the content is not programmatically created on the client-side.
Server:
Many projects perform a media bundling step prior to content-delivery. They pack web-resources into the main file (e.g. index.php) to save HTTP roundtrips.
Use sourcemaps / and or search the entire codebase for a salient static string or a salient keyword near the static string to locate the original source files.
Searching files:
Locally, I generally use the rapid index, and heuristic search of JetBrain's IDE's (IDEA, PHPStorm,...) and Sublime. The grep-command tool can definitely not compete here in terms of performance. On Windows I additionally use Totalcommander and its archive/regex finding abilities.
When quickly looking up code on the server you may use something like:
grep -r -C10 --color=always 'keyword1|keyword2' htdocs/ | less -R
which will also provide you with line-context. two caveats: you may want to filter out binaries first and symlinks outside the scope will be ignored.

Javascript intellisense by absolute path doesn't work in VS 2012

I'm trying to setup intellisense for jQuery. I have jquery files in another project which is not included into current solution. In my mygrid.js file I define:
///<reference path="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.js" />
I see that VS makes request for http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2-vsdoc.js
but intellisense doesn't work. I tried:
///<reference path="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2-vsdoc.js" />
No result as well. I get it working if I copy jquery-1.8.2-vsdoc.js near mygrid.js, include it into project and add
///<reference path="/jquery-1.8.2-vsdoc.js" />
But I don't like such an approach. It forces me to copy junk stuff into every project.

As far as I can tell it's not possible to reference remote javascript files. In fact, all absolute paths in reference directives are ignored according to http://msdn.microsoft.com/en-us/library/vstudio/bb385682.aspx
If you use the libraries regularly you could save them in a central location on your local machine so that you only have to download them once, then add them to the global javascript intellisense scope as outlined in the 'Smarter JavaScript references' section of http://www.hanselman.com/blog/FeaturesNOONENOTICEDInVisualStudio11ExpressBetaForWeb.aspx.
To summarize, go to Tools | Options | Text Editor | Languages | JavaScript | References, or you just hit Ctrl-Q to bring up the search feature, then type 'references' and click on the 'Text Editor -> JavaScript -> IntelliSense -> References' option. Click the '...' button and browse to the file you want to add, select it and then add it.