In my Vaadin application a custom widget which extends AbstractJavaScriptComponent has several files as follows. These files are available in browser:
Comp1Html.js.exe
Comp1Html_bak.js
Comp1Htmlold
Are these bak and old files required? Also, how to remove these unwanted files?
You need to preserve all files that are directly referenced through e.g. a #JavaScript annotation or indirectly referenced by e.g. being included from another script file. The exact details on that is highly depending on the specifics of this particular component.
The easiest way to find out which files are actually needed might be to temporary put a copy of all the files somewhere else and then try removing each file and checking if everything still seems to work.
Related
i have a static site using eleventy, tailwindcss, and nunjucks. this is my first time and overall really like it, but i still find the layout a bit confusing.
i would like to create a page of reusuable components, each component with two parts. example display of component,and then below it a div containing the components code to copy and paste.
in my /src/utils/ directory i added a simple toggle function to add and remove the class 'block' (tailwindcss)
i dont understand how to access that function in my /src/site/components.njk files code to add the functionality to my page.
numerous and lengthy google and duck duck go queries have not returned much info, so any and all help is appreciated
Since you want to have that functionality client-side, you need to make sure that your JavaScript is included in your site output. Since your /src/ directory only exists in your repository, it won't be available to the browser after your site has been built. The easiest way to make it accessible to the browser is to copy the JavaScript file to your output directory, then include it as a script in your HTML output. Make sure the URL matches the output location. For example, if your source file is /src/utils/component-toggle.js, your output directory is /dist/ and you copy the file to /dist/utils/component-toggle.js, the script tag should look like this:
<script src="/utils/component-toggle.js" defer></script>
See Passthrough file copy to learn how to copy static files during your build step.
Make sure your JavaScript file works in a Browser context as well. For example, you can't use CommonJS (module.exports and require() syntax), since it's a NodeJS concept and doesn't exist in Browsers. If you use ES Module syntax (export default {} syntax), make sure it's supported in all browser your site supports.
I've recently written a longer answer regarding this topic which explains why you have to do it this way as well as the difference between build-time and run-time JavaScript for static site generators, you can read it here if you want to know more.
I have multiple javascript files that are bundled and minified in one file "bundle-min.js" and is linked in one of my html page. Now I want to introduce versioning in those js files. Means when I change any of my js file, I want my bundle file version to be updated. I have found gulp-version-append but I am not sure whether it will help me or not. Also I don't want to update the reference link of bundle-min.js in my html file again and again. I want my html page to get the latest version it self somehow. Is this possible and what's the best approach? Any help?
There are plenty of modules available for this. it depends on your module loader.
Webpack
https://www.npmjs.com/package/webpack-version-file-plugin
https://www.npmjs.com/package/versioning-webpack-plugin
or you can use define plugin for this
https://webpack.js.org/plugins/define-plugin/
Refer
How can I inject a build number with webpack?
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.
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).
I know it is possible to edit php and css file in the editor in dashboard [Appearance -> Editor].. But i was wondering why it is not possible to edit all the folders [including js files] in the editor..
I searched for this and found a plugin to make all files editable inside wordpress dashboard.. https://wordpress.org/plugins/solid-code-theme-editor/
But still is there anyway to do it by adding any javascript or shortcode or whatever??
Unfortunately there isn't a way to extend the types of files that Appearance -> Editor lets you edit (for example, adding files in subfolders, or JS files). I've tried to find a way to do this before, but - despite almost everything else being hook'able in WordPress - there is no way to hook into the file editor to change the way it works.
This could be for security reasons (having the ability to edit files like this can be a problem in the first place anyway), but in the end, the only way to add the ability to edit every file is to use an outside-of-WordPress editor, which is what the plugin you referred to does.
I usually disable the Editor entirely (by adding define('DISALLOW_FILE_EDIT',true); to wp-config.php), and use another method of editing the theme instead (usually FTP, or occasionally the file manager accessible through the web host's control panel). This way you'll have access to everything you need.