Develop Reference

add snippets to language server

I want to add more keywords & snippets to autocomplete service.
e.g; If I type FooBar it will suggest
var FooBar = function (args) {
return `foo ${args.length}`;
};
how do I extend Language Server ?
If it matters, I'm using vim-lsp.
ref

You can write your own snippets using a snippets plugin. Vim-lsp recommends a few in :h vim-lsp. However, I do not believe there's any way to add snippets to a language server directly without modifying that server directly.
That being said, it may not be that hard to modify the server and add a few snippets. vim-language-server, for instance, seems to keep its snippets defined in a snippets.ts file here. Modifying this file might interfere with automatically updating the server, but it shouldn't cause any real problems unless you mess up the syntax. And then when you do want to update the server, just save your changes somewhere and undo them on this file and let it update, then add them back.

Duplicate an HTML file (and its content) with a different name in Javascript

I have an HTML file with some Javascript and css applied on.
I would like to duplicate that file, make like file1.html, file2.html, file3.html,...
All of that using Javascript, Jquery or something like that !
The idea is to create a different page (from that kind of template) that will be printed afterwards with different data in it (from a XML file).
I hope it is possible !
Feel free to ask more precision if you want !
Thank you all by advance
Note: I do not want to copy the content only but the entire file.
Edit: I Know I should use server-side language, I just don't have the option ):

There are a couple ways you could go about implementing something similar to what you are describing. Which implementation you should use would depend on exactly what your goals are.
First of all, I would recommend some sort of template system such as VueJS, AngularJS or React. However, given that you say you don't have the option of using a server side language, I suspect you won't have the option to implement one of these systems.
My next suggestion, would be to build your own 'templating system'. A simple implementation that may suit your needs could be something mirroring the following:
In your primary file (root file) which you want to route or copy the other files through to, you could use JS to include the correct HTML files. For example, you could have JS conditionally load a file depending on certain circumstances by putting something like the following after a conditional statement:
Note that while doing this could optimize your server's data usage (as it would only serve required files and not everything all the time), it would also probably increase loading times. Your site would need to wait for the additional HTTP request to come through and for whatever requested content to load & render on the client. While this sounds very slow it has the potential of not being that bad if you don't have too many discrete requests, and none of your code is unusually large or computationally expensive.
If using vanilla JS, the following snippet will illustrate the above:
In a script that comes loaded with your routing file:
function read(text) {
var xhr=new XMLHttpRequest;
xhr.open('GET',text);
xhr.onload=show;
xhr.send();
}
function show() {
var text = this.response;
document.body.innerHTML = text;//you can replace document.body with whatever element you want to wrap your imported HTML
}
read(path/to/file/on/server);
Note a couple of things about the above code. If you are testing on your computer (ie opening your html file on a browser, with a path like file://__) without a local server, you will get some sort of cross origin request error when trying to make an XML request. To bypass this error, either test your code on an actual server (not ideal constantly pushing code, I know) or, preferably, set up a local testing server. If this is something you would want to explore, its not that difficult to do, let me know and I'd be happy to walk you through the process.
Alternately, you could implement the above loading system with jQuery and the .load() function. http://api.jquery.com/load/
If none of the above solutions work for you, let me know more specifically what it is that you need, and I'll be happy to give a more useful/ relevant answer!

Validating JavaScript

I load lot of JavaScript From My DB for validation and for Costume Validation which can be Uploaded through My Customer so i want to validate whether the given Javscript is valid or Not While Rendering it on my page i am using MVC 3.0 razer view engine
Please help me finding a way fix it
Thanks
Ashies

Your task is simply not recommended. Render JavaScript code directly from the database is dangerous because you are leaving the doors wide open to XSS attacks.
However, yes, you can validate JSCode normally with JSLint.
There is a plugin for visual studio, and of course there might be a way to use the functionality packed in the JSLint DLL so you can check your JavaScript.
This two posts might put you in the "right" direction. (I still have to say that rendering user entered JS code is fundamentally wrong)
http://www.codeproject.com/Articles/21438/JSLint-VS-JavaScript-Verifier-for-Visual-Studio
http://blog.outsharked.com/2011/08/sharplinter-command-line-tool-for.html

I assume that you are working with Visual Studio 2010/2012.
As Adrian Salazar said:
Your task is simply not recommended. Render JavaScript code directly from the database is dangerous because you are leaving the doors wide open to XSS attacks.
That being said I would highly recommend rethinking your current design. If you're planning on doing so, you should have a look at Web Essentials which is a plugin available from NuGet. This has JSHint integrated which will check your Javascript after saving a file or on building your application within Visual Studio.
Also downloadable as installer:
http://visualstudiogallery.msdn.microsoft.com/6ed4c78f-a23e-49ad-b5fd-369af0c2107f
or for 2012:
http://visualstudiogallery.msdn.microsoft.com/07d54d12-7133-4e15-becb-6f451ea3bea6

Javascript syntax checking is tricky because there is so much scope for generating silent run-time errors based on how primitive are handled (for example).
There are verifiers like JSLint available and you can build your own techniques for verification.
I use the following structure for javasript files (using jquery) setting a class ("scriptVerified") on the body tag if the script completely runs - which can quickly tell you if the script looks syntactically OK. But event handlers can still go wrong when the event is fired.
#AdiranSalazar's security warning is worth listening to.
$(document).ready(function () {
pageScript.Init();
});
var pageScript =
{
Init: function()
{
pageScript.CleanUp();
pageScript.RegisterHandlers();
pageScript.Start();
pageScript.Final();
},
CleanUp: function()
{
//put page cleanup stuff in here
},
RegisterHandlers: function()
{
//register event handlers in here
},
Start: function()
{
//put page js code in here
},
Final: function () {
$("body").addClass("scriptVerified"); //add class to body to say this has run
}
};

Custom Lightweight JavaScript Libraries: EnderJS and MicroJS

I'm working on a custom lightweight JavaScript library that will need to run stably across the major browsers as well as across numerous independent sites without compromising or being compromised by existing libraries or namespaces. Perhaps most importantly, the library will need to be lightweight (~15k max).
UPDATE To clarify the need for such a small library: This is a third-party service that sites would pull into their page. We need to keep everything as light-weight, speedy, and self-contained as possible since we have no control over the existent libraries, speed, or page load. 15k is the target number just for the library that is accessed by the dynamic content of the service.
At this point my idea is to start with the most condensed jQuery-like base I can find, and then extend with custom modules.
Desired features:
Handle cross-browser inconsistencies like a champ (IE 6+, Chrome, FF 2+, Safari 3+).
Event handling (queuing/binding/broadcasting)
Efficient selector engine
Chaining
DOM manipulation w/ basic animations
Readily build-able and version-able from modules
I've come across EnderJS and MicroJS but I can't seem to find a lot of discussion on either. I'm more familiar and interested in Ender at this point since it seems to address all of the above features almost out of the box with "The Jeesh" weighing in at 7.5k. Tacking on a couple additional packages only pushes it to 10k in my case which would be perfect since I should only need a few k to flesh out any custom modules. It also would allow me to write and version distinct modules that can be incorporated and compressed into the main library at build-time, as well as define a unique namespace to hold it all together and hopefully protect it. Another compelling piece to the Ender library is its use of NodeJS which I would love to play around with more anyway. Having said all of that, however, I am still wide open to other ideas.
So my question is:
Does anyone have any experience with either EnderJS or MicroJS, or have another solution/approach to what I'm trying to accomplish? I realize this is not the place for "chatty, open-ended questions", and that's not my intent here. I'm just looking for suggestions on the best way to approach building a light-weight custom library without reinventing the wheel and to instead plug into the most up to date micro-libraries available.

I'm one of the co-creators of Ender and I'll +1 Fazal's words.
A note on the Jeesh, albeit a nice starter-pack to Ender, the true power lies in the ability to extend Ender with its growing set of modules. You can check them out here: https://github.com/ender-js/Ender/wiki/Ender-package-list
Somehow, one way or another Ender became the forefront of "micro library" development, but really what we're after is putting a cohesive interface onto loosely coupled modules (however large or small they are). jQuery took a great first step in abstracting its selector engine (Sizzle), but unfortunately the rest of it is interdependent (dom, events, animation, ajax, utils, promises), thus making it impossible to pick and pull what you want.
On another aside, one of the neat things about Ender is the ability to publish modules to NPM and being able to port them into your project by name allowing you to build only what you need, when you need it
It's worth checking out the learn videos at http://enderjs.com/learn which will give you a better idea of how packages are authored, built, and consumed. You'll find that setting up Ender into your environment is extremely simple and actually quite fun to work with.
Let us (#ded or #fat) know if you have any questions and we'll be more than willing to help sort things out

I've used Ender recently, and I've had no issues with it really. There are a couple of jQuery functions that aren't available from the off, but anyone who is fairly adept at JavaScript can circumvent this. Especially given the fact that Ender has a near identical structure and way of extending as jQuery.
I've used Ender on a live site recently and funnily enough I have used a couple of scripts from microjs.com alongside my own functions file, and all the JavaScript weighed in at around 15k. It's not hard to make your entire site code weigh around that or less.
As well as building a lightweight version of Ender, for example starting with the Jeesh, you might also want to consider async loading, an example is provided by Dustin Diaz:
<script src="ender.min.js"></script>
<script>
$.require('/js/core.min.js', 'core')
$.ready('core', function () {
$(document).ready(function () {
$('<p>hello world</p>').appendTo('body')
.bind('click', function (e) {
$.require('/js/ajax.min.js', function () {
$(e.target).css('position', 'relative')
.animate({
left: 500
})
})
})
})
})
</script>
By doing this you could essentially make the original ender build even lighter, and defer some of the loading, but generally speaking, if it's light in the first place you should be ok.
You might also want to take advantage of the Google closure compiler that Ender gives you access to in order to compile your site code alongside ender.
Finally, as you're probably well aware, you can do noConflict in Ender as well, just in case they already have another library present.
As you build and configure Ender you will probably want to take advantage of ender-wallet which will give you a sort of API view, allowing you to remove libraries you might not need at all.
hotlinked screenshot:

Given this:
To clarify the need for such a small library: This is a third-party service that sites would pull into their page. We need to keep everything as light-weight, speedy, and self-contained as possible since we have no control over the existant libraries, speed, or page load. 15k is the target number just for the library that is accessed by the dynamic content of the service.
I'd recommend using demand-loaded jQuery via one of the CDNs (Google's or Microsoft's; I think Google's is used more but you'd want to test). Your code can detect whether jQuery is already loaded and use it if so (~0k), and if not add a script element dynamically that pulls it from the CDN. If the user has visited any other site using jQuery from that CDN, then the script may well come from cache (~0k). If not, granted, then you have the ~31k rather than ~15k hit, but again, quite frequently you won't have any hit, or just the hit of a "not modified" response from the CDN.
You'd want to issue a noConflict call if you did load it, in case the site uses $ for something other than jQuery. That's readily done by watching for the load event on the script element (you have to use readystatechange on IE and watch for either loaded or complete status) and then doing it when that comes through.
In today's telecomms world, the difference between a 15k download and a 31k download is trivial compared with the cost of setting up the HTTP connection in the first place.
That demand-load really is a tiny bit of code, along these lines:
function loadJQuery(cb) {
var d, s, t;
if (typeof jQuery === "function"
&& parseFloat(jQuery.fn.jquery) >= 1.5) { /* Or whatever */
window.ourjQuery = jQuery;
if (cb) {
cb();
}
return;
}
d = document;
s = d.createElement('script');
t = d.body || d.getElementsByTagName('head')[0] || d.documentElement;
s.onload = loaded;
s.onreadystatechange = handleReadyStateChange;
s.src = "//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js";
t.appendChild(s);
function loaded() {
if (s) {
s = undefined;
window.ourjQuery = jQuery.noConflict(true);
if (cb) {
cb();
}
}
}
function handleReadyStateChange() {
if (s && (s.readyState === "loaded" || s.readyState === "complete")) {
loaded();
}
}
}
Note the URL on the script element. That's so it's friendly to both http and https pages (details). Note also that I'm checking for a minimum jQuery version and using the more rigorous form of noConflict if we load it. Either way, by the time the callback is called, the ourjQuery symbol refers to the loaded copy with the minimum version.
Update: Addressing your comment above:
That's a good idea but unfortunately not really an option for us. I agree jQuery from Google's CDN would most likely be cached - saving load - and that we could check and extend as needed, but it doesn't seem as scalable or stable as serving it ourselves. The site could decide to overwrite some jQuery module to suit their needs or worse. What we need is a light-weight self-contained library that we have complete control over and can extend and branch as needed. The goal is that this library will be cached and versioned from our CDN.
Yes, there's a small risk of a site having modified basic jQuery functionality. A very small risk. If you're restricting yourself to the core API (not plugins and such) I frankly don't think it's worth worrying about.
But if you're worried about that, then frankly I'd just use a slightly-modified jQuery hosted on your own CDN using a different symbol than jQuery (and not using $ at all). 31k vs. 15k in today's telecomms world is a non-issue; the primary cost will be in establishing the connection in the first place. If you wanted, you could probably pare that down a bit by removing parts you don't need, although sadly the jQuery internals are a bit of a morass and selectively removing functionality may not be trivial (depending on what functionality it is).

What is the best way to organize JS code in webapps where the main "meat" is still server side?

When building webapps with MVC web framworks like Django, Kohana, Rails and the like, I put together the application without JS-driven components initially, and then add them afterwards as "improvements" to the UI.
This approach leads to non-intrusive JS, but I don't have a good "standard" way of how to go about organizing the JS work. Most of the JS I write in apps like these are 10-30 line JQuery snippets that hook into some very specific part of the UI.
So far I often end up inlining these things together with the part of the UI they manage. This makes me feel dirty, I'd like to keep the JS code as organized as the python / php / ruby code, I'd like for it to be testable and I'd like for it to be reusable.
What is the best way to go about organizing JS code in a setup like this, where we're not building a full-blown JS client app, and the main meat is still server side?

I am also very interested in what other people have to say about this. The approach I've taken is to use object literal notation to store the bulk of the function, and store these in one file included on all pages (the library)
uiHelper = {
inputDefault:function(defaulttext){
// function to swap default text into input elements
},
loadSubSection:function(url){
// loads new page using ajax instead of refreshing page
},
makeSortable:function(){
// apply jQuery UI sortable properties to list and remove non javascript controls
}
}
Then I include a .js file on any page that needs to use the library that ties the elements on that page to the function in the library. I've tried to make each function as reuseable as possible and sometimes the event binding function on the page calls several of my library functions.
$(document).ready(function(){
$('#mybutton').live('click',uiHelper.loadSubSection);
//more complicated helper
$('#myotherbutton').live('click',function(){
uiHelper.doThisThing;
uiHelper.andThisThing;
});
});
edit: using jsDoc http://jsdoc.sourceforge.net/ notation for commenting for these functions can produce documentation for the 'library' and helps keep your code easy to read (functions split by comments).
The following question is along similar lines to your own - you should check it out...
Commonly accepted best practices around code organization in JavaScript

When dealing with JS code, you should first analyze whether it will be used right away when the page loads. If it's not used right away (meaning the user must do something to invoke it) you should package this into a JS file and include it later so the load time is perceived faster for the user. This means that anything that the user will sees should go first and JS related to the functionality should be imported near the end of the file.
Download this tool to analyze your website: http://getfirebug.com/
If the JS code is small enough, it should just be inline with the HTML.
Hope that helps a bit.

For quick little user interface things like that I put everything into a single javascript file that I include on every page. Then in the javascript file I check what exists on the page and run code accordingly. I might have this in UIMagic.js for example. I have jQuery, so excuse those jQuery-isms if they aren't familiar to you.
function setupMenuHover() {
if ($("li.menu").length) { // The page has a menu
$("li.menu").hover(function() { ... }, function() { ... });
}
}
$(setupMenuHover);
function setupFacebookWizbang() {
if (typeof FB != "undefined") { // The page has Facebook's Javascript API
...
}
}
$(setupFacebookWizbang);
I've found this to be a sane enough approach.

My preferred method is to store inline javascript in it's own file (so that I can edit it easily with syntax highlighting etc.), and then include it on the page by loading the contents directly:
'<script type="text/javascript">'+open('~/js/page-inline.js').read()+'</script>'
This may not perform well though, unless your templating library can cache this sort of thing.
With Django you might be able to just include the js file:
<script type="text/javascript">
{% include "js/page-inline.js" %}
</script>
Not sure if that caches the output.
If you are still worried about being 'dirty', then you could check out the following projects, which try to bridge the server/client side language mismatch:
http://pyjs.org/ (Python generating JavaScript)
http://code.google.com/webtoolkit/ (Java generating JavaScript)
http://nodejs.org/ (JavaScript all the way!)