Develop Reference

Angular 5 internationalization workflow

my current process is as follows:
Current process
I add the i18n attributes to the template.
Then I execute ng xi18n. This creates the messages.xlf file.
As soon as the process is finished, you have to copy messages.xlf and change the file extension to *.fr.xlf. In the renamed file you now manually search for all <source> tags and add the <target> tags with the translation.
If there are many different languages, this process is very time-consuming.
Problem
The problems here are the missing versioning of the translations and especially the manual adding of the <target> tags to the corresponding <source> tags.
Desired workflow
It would be desirable to have a workflow where versioning is possible and above all, the desired translation files are created automatically.
Would webpack be the right approach to solve this problem?

I just abandoned built in translation and prefered ngx-translate module.
With it you can :
- auto-extract translation string from source code
- build one app that contains all locales
- change locale during run time

If you're in an IDE that supports regex searches, then you can use regexes for search and replace such as
search: (\s*)<source>([^<]*)</source>
replace: $1\n$2<target>$3</target>
This will add a target after every source.
And about updating the translations, you are supposed to have a versioning tool, that will highlight the changes in the file. All you have to do is keep it updated at every commit you do that involves this file.
I agree that this isn't practical, and so is the fact that you can't translate typescript code. But those are workarounds that you can use in the meantime to ease your life.

How to exclude JavaScript source files from sonarqube analysis?

Hello sonarqube experts,
I am running sonarqube 5.2 server and JavaScript plugin v.2.13. I would like to exclude some of the JavaScript code that is third party library (jQuery, for example) from my analysis. how can I do this?
I tried something like this:
sonar.module= myModule
myModule.sonar.sources=srcFolder
myModule.sonar.exclusions=**/notMyCode/*.js
I can see in the log the exclusion filter is being picked up:
Excluded sources: =**/notMyCode/*.js;
but then it appears to be ignored as all the files are analyzed anyway:
101 files indexed
0 files ignored because of inclusion/exclusion patterns
I tried all possible exclusion patterns and nothing seems to work, even when I put it this way:
sonar.exclusions=*.js
This should exclude all javascript files but the exclusion filter is being completely ignored.
just found out by trial and error that the exclusion patterns work if "global" qualifier is used.
for example the following works as expected:
sonar.global.exclusions=**/notMyCode/*.js;
while this one doesn't:
myModule.sonar.exclusions=**/notMyCode/*.js;
is this expected behavior?

This is invalid:
sonar.module= myModule
You probably meant to write this (plural "modules"):
sonar.modules = myModule
The use of sonar.modules is demonstrated in several examples in the documentation.
With this correction, the exclusions should work as expected,
both global and project-specific.
Also make sure that you're using the correct glob pattern,
as explained here.
Finally, in your last examples you used a terminating ; at the end of lines, for example myModule.sonar.exclusions=**/notMyCode/*.js, you should remove those.

In sonarqube go to project settings-->General settings-->Analysis scope-->source file exclusions.
example to exclude js files : **/*.js

How to specify wildcards in sonar-project.properties

I am trying to use SonarQube to scan the UI modules I have. The UI modules are lot in number. They have a common structure. Each module has its own JS files.
I need to specify the sonar.sources value to match all JS files in my project. Is it possible to do something like this?
sonar.sources=\*/*/script
sonar.language=js
I used these. But, I got an error saying something like "unable to resolve path". Can someone help?

Try to use wildcard :
* Match zero or more characters
** Match zero or more directories
? Match a single character
Like this:
sonar.sources=**/script
Update
As of 2019, the sonar.sources parameter doesn't support such glob patterns. The common practice is to set this value to a list of directories that contain source code. The scanner will find traverse the directory trees and run applicable analyzers (JavaScript analyzers will consume .js files, Python analyzers will consume .py files, and so on.)

Thanks all. I used sonar.sources=. in my properties file. This properties file is sitting next to my modules. So, now SonarQube takes into account all the folders next to this file, and scans for the specified file extensions. It works now.

sonar.sources does not currently support wildcard at all. This cannot be done.

How to disable the JavaScript Minifier in CodeKit?

What's the best way to disable JavaScript minification in CodeKit? All those *-ck.js files it creates are making a mess of our repository's submodules.
Note that adding a rule to .gitignore doesn't work because its rules aren't inherited by submodules.

In CodeKit Preferences select Languages / JavaScript to edit the default settings for JavaScript handling. (These can be overridden for each file in a project.)
Change the setting for the second processing step (labelled "Then:") from "Concatenate + minifiy" to "Concatenate imported files". For any script file already in the project check whether it already has individual settings which still differ from this new default.
In this case, "*-ck.js"-files should only be created in case a source file imports another for concatenation but not for ordinary script files.
Alternatively you might specify a different output path for the generated ck-Files in CodeKit Preferences / JavaScript / Output Paths in order not to let the generated files clutter the source directory.

I believe the menu has been updated, but the answer from immo still stands. Under Javascript Language settings you can click a dropdown for output style and change it from minified to non-minified.

One workaround is to set the output path to something like codekit-ignore in Preferences > JavaScript > Output Paths, relative to the project's root folder.
Then add /codekit-ignore to .gitignore.
Easy to cleanup and feels better than find . -iregex '.*-ck\.js' -delete.

In the preferences see 'Skipped Items' under 'General' and add *.js to the list.

There are several ways to stop javascript minification in Code Kit but the easiest and simplest way to do so is simple to navigate to the javascript file you wish not to minify in the file view, and configure your Javascript Options to the right hand side.
This method provides benefits such as JSHint & JSLint without the minification and can be configured on a site by site, file by file basis giving you greater control.
Let me know if you have any further issues, i'd be happy to help.

Tips on managing large amounts of code?

My project seems to be getting bigger and bigger and some of my classes are thousands of lines long. It's too hard to search through them every time I want to make changes.
I find JavaScript is not as easy to lay out cleanly as some other programming languages. So when the classes get to be a few thousand lines, I have troubles reading it.
I've tried splitting it into multiple files, but then you're breaking classes apart, which doesn't seem right. For example, if every method in a class uses a global variable, you would only be able to find the global variable in one of the files for that class.
Also, if I want to use the JavaScript code from 100 different .js files, I end up with something like this...
<script type="text/javascript" src="Scripts/classes/Node.js"></script>
<script type="text/javascript" src="Scripts/classes/Queue.js"></script>
<script type="text/javascript" src="Scripts/classes/DblyLinkedList.js"></script>
.... 97 more lines like this
Although, I figured there may be something where I can do...
<script type="text/javascript" src="Scripts/.../*.js"></script>
or something similar... is that right?
Anyone have any tips on managing code as it reaches its extremes?
Tips on cleaning up JavaScript code would also be helpful.

Breaking up JS into separate files has some major drawbacks, chiefly that you're forcing web browsers to make a separate request for each file.
Have you taken a look at leaving all of your files separated out, but making a single-file "bundle" for each project containing only the necessary files? This can be automated via a script.
This SitePoint article might help you get started: http://www.sitepoint.com/blogs/2007/04/10/faster-page-loads-bundle-your-css-and-javascript/

(a) keep your classes shorter [even
though that will mean yet more
files],
(b) keep them "full-text
indexed" for speed of search and
operation (not aware of any IDE
specifically supporting Javascript
this way, but strong editors like
Emacs, Vim, Eclipse, or TextMate sure
do),
(c) group them up hierarchically
so your pages can have just a few
<script> tags for "upper layer"
scripts each of which just pulls in
several of the "lower layer" ones.
Oh, and, of course, religiously keep everything under a good change control system (SVN, Mercurial, or the like), otherwise your life will be surely very very miserable:-(.

You might want to group related classes together into packages, where each package is a single file. Check out YSlow for best practices on performance.

Well, a good editor is always usefull, as it will give you shortcuts to all your functions defined in the files.
Second, make sure you're not looking at a wall of code. Indentation, spaces and newlines are a good help.
Be extremely strict in your indentation. 2 spaces is 2 spaces, always(or whatever amount you use)
if you put your { under a declaration, then always put it there, without exception)
Clear rules about how you want your text aligned will help a lot.
And I don't know about that last thing... I'm not sure browsers can work with that kind of wildcard.

<script type="text/javascript" src="Scripts/.../*.js"></script>
will not work, and besides, you end up with an interesting problem when splitting up dependent files, as you can't guarantee they will all be downloaded in the order you expected.
Unfortunately, your best bet is really a good IDE that can produce an outline for easy navigation. I use Eclipse with Spket and/or Aptana, but whatever makes it easier to manage is what you're looking for.
edit: one more quick note about splitting js into multiple files. Avoid it where possible. Each separate file means a separate http request. Reducing the number of requests required can make a massive difference in site performance.

AvatarKava's advice is sound. Work in separate files and concatenate them at build time. However, I would also recommend you take a look at your class structure. A class "thousands of lines long" doesn't sound too healthy. Are you sure you classes aren't taking on too much responsibility? Are there not tasks that can be shipped out to other single responsibility classes? This would help improve the clarity in your code far more than cunning ways of splitting files.

Same advice applies to most languages...
Avoid globals wherever possible. You can often get the desired behavior by wrapping a static variable, or using objects.
if (foo == undefined)
var foo
Use naming conventions where possible so you can track things down just by reading the variable or function names. Either that or get good with grep, or get an IDE with intellisense.
Split things into directories. Having 100 files in a directory called "classes" is not helpful. As an example, you may have a collections directory for queues, lists, trees, etc. If you've got a lot you may even have a tree subdir, or a list subdir, etc.
You can then also create a global include for that directory... simply a file called collections.js that includes all of the files in that directory. Of course you have to be careful about splitting things up well, since you don't want to be including files you'll never use.