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).
Related
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.
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.
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'm stuck... I'm trying to reference a javascript file that has been embedded inside a third party assembly, but it doesn't seem to work:
What I've done:
I have a folder RefAssemblies where this library DLL with embedded javascript file is located
I added a project reference and pointed to this library assembly
I added a line in my javascript file where I want the reference to work ie.
/// <reference name="ScriptName.js" assembly="AssemblyName" />
I tried naming my assembly with name only, and also with full assembly name including name, version, culture and public key token. No difference.
Added my library assembly to my project's web.config inside system.web\assemblies (AFAIK that's the part where you have to add your assembly and make it well-known in your application) so I should be able to access it without referencing assembly at all just resource name. No difference.
And yes I was pressing the Ctrl+Shift+J after any change I've done so Visual studio refreshed Javascript intellisense cache. I even unloaded and reloaded my web project after I changed web project's web.config. Just so that Visual Studio would read the file and reload everything anew.
But still unlucky... And I'm not getting any Javascript Intellisense errors in the General output window either...
I must be missing something...
Additional note:
It may be helpful to know that I'm running ReSharper 6.1.1000.82 within Visual Studio 10.0.40219.1
Other things I've done afterwards
Uninstalled ReSharper from my machine
Reset Visual Studio by running it from command prompt using
devenv /ResetSettings
No luck either.
Do you have any other suggestions I might do?
I'm also having odd problems with embedded resources. I have managed to get it working though by using the fully qualified resource name. You can find that out by using ilspy to open the assembly and then select the Resources folder, then the full name of all the resources will be displayed.
As i said i have gotten this to work in one solution, but in others it doesnt work and i have no idea why.. the non working solution has a diffrent structure where the diffrent assemblies are in diffrent folders, but i have nto been able to isolate that as the cause..
-edit-
After much trial and error it seems like the key thing to making embedded javascript references work is to set the output folder for the project containing the reference to bin and not bin\debug.
from what i can gather, there are no other settings or assembly references that affect the embedded resources, only the output folder of the project that has the reference. i'm guessing that the javascript language service is unable to find the assemblies with embedded resources unless they are in the private path or the gac, but i have yet do understand exactly where this binpath is set.
i've tried setting it on the project itself and on what i think is the actual language service exe, but to no avail.
i made a connect issue here:
https://connect.microsoft.com/VisualStudio/feedback/details/770185/js-references-to-embedded-files-require-the-referencing-project-to-have-outputpath-bin
Background: Got a C# project which involves a block of javascript that gets programmatically injected in the web pages displayed by a webbrowser control. However, it is desirable to minify this block of javascript and have it embedded/written-into in a property of the resources-file. I know the minification of javascript is possible. I was just wondering if it's also possible to write the resulting string into a specific property of the resources files using pre-build events.
P.S.: Of course the resulting string can be written into a file which is in turn bound to a resource-property. However I would prefer to avoid something as such, fearing the performance penalty it would impose in runtime (the javascript block gets loaded quite often). If I'm mistaken about this feel free to correct me.
For anyone struggling with similar issues out there, this is the step-by-step approach I have opted for (having run out of alternative solutions) in the context of Visual Studio 2010. The method below handles the minification of javascript files in a uniform way while respect the version control system you might use (by avoiding to generate phantom changes in files hosted by it). Here are the steps:
Install Java and Google's Closure (for javascript minification).
Open the Resources of your project, go to file-resources and create a dummy file-property a-la foo.txt. This should create and include in your project the directory named Resources. You may delete the foo.txt file after this.
Right click the Resources directory and create a javascript file ending in Uniminified.js (for example MyInjectableJavascript.Unminified.js). Edit the properties of this file and make sure that the build action is set to "None". By the way, DO NOT reference this file in the resources.
Now go back to the Resource's file-properties and add a new file-property with the same base-name of the file created above only this time ending in min.js (for example MyInjectableJavascript.min.js).
Go to the .min.js file that was created under the resources directory and turn it into an Embedded Resource.
Now go the properties of your project -> build events and insert the following code:
Pre-Build events (in one line):
call "$(ProjectDir)JavascriptMinificationWithGoogleClosure.bat" "$(ProjectDir)Resources\MyInjectableJavascript.Unminified.js" "$(ProjectDir)Resources\MyInjectableJavascript.min.js"
Post-Build events (two lines):
del "$(ProjectDir)Resources\MyInjectableJavascript.min.js"
call echo. 2> "$(ProjectDir)Resources\MyInjectableJavascript.min.js"
What this does is that it minifies the javascript code before your project is built and after it is build it resets the minified file to a single newline.
Note: The reason we don't delete the minified file all together, is that visual studio will generate an error and will behave very weirdly if the minified file that is referenced by the resources is not found (in my case visual studio deleted Resources.Designer.cs completely out of the blue ... 5 times). By truncating the min.js file it to a single newline you can keep it around and even add it to your version control system without bothering with it ever again.
Under the directory of your project place a file named JavascriptMinificationWithGoogleClosure.bat with the following contents:
"%JAVA_HOME%jre6\bin\java" -jar "%CLOSURE_JS_HOME%compiler.jar" --js %1 --js_output_file %2
Finally, create two environment variables (Right click Computer -> Properties -> Enviroment Variables) named JAVA_HOME and CLOSURE_JS_HOME which point respectively to the directories you have installed the executables of Java and Closure. For example:
JAVA_HOME -> C:\Program Files\Java\
CLOSURE_JS_HOME -> C:\Program Files\Closure\
Note: Make sure to include the trailing slash at the end of each of the two paths.
You can now access the minified javascript that will be generated during the build from C# code, using:
Resources.MyInjectableJavascript_min
Hope this helps. Good luck.
Cheers,
Dominick