I am trying to modify some basic plugins (the basic link dialog for instance), but it doesn't notice ANY of the changes I make to these files, even if I empty them. I've cleared my browser cache.
I notice ckeditor.js contains code similar to these files but as one big mess. Does it even read the plugin files, for plugins such as Link and Youtube? How can I modify these basic plugins?
Turns out ckeditor.js must be decompressed and modified.
The plugin files for built-in "plugins" are not actually used.
Related
Im using the Keenthemes Metronic admin template and having real trouble with 1 file. Its a javascript file and for some reason no matter what i try i cannot get it to cache. Its a static file with a size of 3.5mb so loading this each time is killing the scripts.
I have tried adding bits to me htaccess and to the header but this changes nothing.
Has anyone else come across this?
Thanks
As I could see from the comment section, you have already tried minimising the file, but it is still very large. You can control the cache of your own browser, but cannot control the cache of the browsers your users are using. Therefore you will not be able to enforce caching the file. You will therefore need to thoroughly read the file and divide it into separate files. You will end up having a core file, which will be useful everywhere and which will be needed to be downloaded and you will have some other files, which are specific to some features, like a file for register/login, another for handling separate features, like choosing colors and so on.
You will need to load your core JS file everywhere, but your specific features will be needed at specific places. You will not need login features, for instance, if the user has already logged in, so you will be able to include the JS files for separate features where they are needed and nowhere else.
Also, You might want to lazy load your JS files, so you will initially load the core file and when it has been successfully loaded, separately load the other files. Those features will be unable initially when the page is loaded, so the page will need to somehow handle or prevent attempts from users of using a feature before its script was loaded.
It would not hurt to minify all these separate files either. Possibly RequireJS can help you to handle requirements, but you can implement your own feature to handle requirements as well.
right now in my footer I have 2 .js files ( jquery.min.js - myjs.js ).
So, by considering that myjs.js is a very small file 5kb can I copy this code into the jquery.min.js file to reduce 1 request?
What is better bewtween: Leave 2 files, inline myjs.js or merge this 2 files?
Thank you
As said, you can add your code to the jQuery file, however I would not recommend doing so.
Having two separate files allows you to more easily expand, debug, and modify your own code. It would also help others looking at your site (as well as you future self) understand what's going on; alljs.js is opaque compared to appjs.js and jQuery.js. Additionally, updating jQuery in future, should you want to, is much easier if jQuery isn't mixed in with your own code. And having two separate files allows the browser to cache them independently.
If you would like to only have one JS file, including your small Javascript inline is a better option. However, I would much sooner recommend other optimizations, like setting up a build process to minimize your JS and deploy it to a dedicated production server.
Yes, provided that you host the file you can modify it however you want to - after all it's basically a text file with a file .js extension. Simply open it with a text editor (or your IDE), and add your JavaScript to the bottom. Don't delete their licensing or comments though out of respect for property rights.
Better to serve 1 file for performance purposes. The establishment of the TCP link (the pipe) to fetch the second file is not insignificant. Another option is to put that other javascript in the HTML file, in a <script> tag just before the close of your <body> tag.
I am trying to work PHP project using PhpStorm.
I am having an issue that one JavaScript file does not show up properly under Project folder.
According to Windows folder structure, this js file (bootstrap.min.js) exists on same folder (without any hierarchy structure).
But, inside PhpStorm, it shows up under other js file.
Is there any reason it behaves like this?
Is it anything to do with Bootstrap?
This is a new-ish thing with PHPStorm (and the rest of the family).
In general, something.min.js is the code minified version of something.js, and you generally don't care to ever open the minified version in your editor.
So, PHPStorm shows it under the one that has the unminified, human-readable version of the code.
It's not actually changing the file system at all, it's just trying to help clean up the Project window a bit.
But, inside PhpStorm, it shows up under other js file.
It's called "nesting" and it's purely visual thing -- no changes at actual file system level.
It's convenient when you have source and processed/generated files (e.g. TypeScript source and generated .js and .map files; Sass source and generated .css and .map files etc). This way you see only source (in which you are interested the most for editing purposes) and generated files are hidden (so more files can fit the screen).
Is it anything to do with Bootstrap?
No.
You can create another file (e.g. test.js and test.min.js) and it will be nested in a similar fashion.
Is there any reason it behaves like this?
It's a relatively new feature (v2016.3 or so).
To be precise it's an old feature (PhpStorm v6 or so) .. but before it worked based on File Watcher settings (and file must have been processed by File Watcher in order to be nested) .. while now (since 2016.3 I believe) it's completely separate functionality and matching happens by simple patterns.
As of 2017.2 IIRC you can edit those patterns as you wish (in earlier versions they were hardcoded) -- just choose File Nesting... in Project View panel content menu (e.g. under "cog" icon).
Why using jquery.min.map if:
jquery = 242 ko
jquery.min + jquery.min.map = 83 + 125 = 208 ko (the map is even greater than the library)
And if we remove the comments, we will get a small jquery that could be easier to read (and to debug).
So, why using the map if it will only add more than 100 ko and an extra request?
What is the best practice?
Source maps are loaded only when the developer tools are active. Browsers won't load them for application's users.
Edit: It should be mentioned that there are 2 types of source maps. One which is an external file and there is a link to it in the actual file and another one which is embedded in the main file. Browsers actually have to load the entire file (i.e. including the embedded source map) for the second type.
Check https://www.html5rocks.com/en/tutorials/developertools/sourcemaps/ for more information.
That's called a source map. This answer goes into detail about what they are, how they work, and why you would want to use it.
EDIT
Extracted answer from the above SO link for posterity. Answered by #aaronfrost
The .map files are for js and css files that have been minified. They are called SourceMaps. When you minify a file, like the angular.js file, it takes thousands of lines of pretty code and turns it into only a few lines of ugly code. Hopefully, when you are shipping your code to production, you are using the minified code instead of the full, unminified version. When your app is in production, and has an error, the sourcemap will help take your ugly file, and will allow you to see the original version of the code. If you didn't have the sourcemap, then any error would seem cryptic at best.
Same for CSS files. Once you take a SASS or LESS file and compile it to CSS, it looks nothing like it's original form. If you enable sourcemaps, then you can see the original state of the file, instead of the modified state.
What is it for?
To de-reference uglified code
How can a developer use it?
You use it for debugging a production app. In development mode you can use the full version of Angular. In production, you would use the minified version.
Should I care about creating a js.map file?
If you care about being able to debug production code easier, then yes, you should do it.
How does it get created?
It is created at build time. There are build tools that can build your .map file for you as it does other files. https://github.com/gruntjs/grunt-contrib-uglify/issues/71
I took a snapshot of the jquery.js file and jquery-ui files that I use and dumped them into a giant .js file with all of the other .js files that I use for my site.
When I do just this with no minfication/packing, the files stop working and I get "recursion too deep" errors on the file when I try to load it on my site instead of the usual .js files. All of the errors came from jquery and jquery-ui. Using a simple numbering scheme I made sure that the jquery.js/jquery-ui files were the first listed in the file and in the correct order (the same as includes as individual files.)
Two questions:
1) Doesn't the include tags for JavaScript have the same effect as dumping all of the files into one giant file? Is there extra isolation/insulation that JavaScript files get from being in their own script tags or in different files?
2) My goal is to make my site faster by having one huge .js file with all JavaScript I ever use in my site (which is heavy in JQuery) and minify that file. Why is this misguided? What is a better way to do it?
NOTE: Google's CDN version of the JQuery files don't work for me, all of the JQuery plugins/themes I use don't work with Google's versions (anyway who says that they can successfully use Google's CDN is lying.)
UPDATE: Thanks for the good advice in the answers, all of it helped me learn more about deploying JavaScript files on a production server. I am actually always using the latest SVN branch of the JQuery UI plugins and there were errors in the UI plugins that prevented them from being merged together with my files. I got the latest Theme Rolled plugins that are already minified in one file and that worked around the problem.
Probably your JavaScript files have some syntax errors. Browser can correct them when loading files one by one, but fail when "bad" files combined. You can try to compile your file using Rhino compiler (http://www.mozilla.org/rhino/)
java -cp build/js.jar org.mozilla.javascript.tools.jsc.Main giant.js
Also you can use JSLint validator (http://www.jslint.com/), thought likelly it will not be able to handle jQuery. But you still can combine all your files and validate them.
I'd recommend using a script manager such as this one to only register the files and plugins you need, and load them on the fly.
This keeps your requests to a minimum, and you don't have to load some huge 300k JS file one very page.
Another problem could be the load order changed. Most JavaScript files should be load order independent, but if you load jquery at the end after you have your:
$(document).ready(function() {});
you'll run into problems.