Magento - Cannot find which source files load .js in my <head> section - javascript

My console gives me three 404 errors which are due to missing .js files loaded in my head section. I practically don't need them. But I want to stop getting 404s. It's really messing up my analytics and my SEO probably.
Files are listed below:
<script type="text/javascript" src="http://myserver/skin/frontend/base/default/js/submenu/jquery-1.10.2.js"></script>
<script type="text/javascript" src="http://myserver/skin/frontend/base/default/js/submenu/jquery.noConflict.js"></script>
<script type="text/javascript" src="http://myserver/skin/frontend/base/default/js/submenu/jquery.accordion.min.js"></script>
So I noticed that some developer renamed the "submenu" folder to "-submenu", in order to avoid jquery conflicts. So I've tried to look for the files that load these .js's but I really don't have any clue where they are. I've spent hours searching for all local.xml, config.xml, page.xml, head.phtml, header.phtml files but still can't find anything.
Any clues to how can I easily trace what is loaded in my head section? Is there a "debugger" for this? Sorry, noob-in-coding designer

In the root directory of your magento you could do in a terminal
find . -iname "*jquery-1.10*"
find . -iname "*noConflict*"
This would find the files, but to remove them from being called:
You could also do a
grep -rnw . -e noConflict
and so on
To search within files, to find which layout xml or phtml file is adding them

Related

How to include Javascript files in a hugo project

I am currently starting to work with hugo SSG. My goal is to have a reliable, yet uncomplicated application to centralize some components in otherwise vanilla html,css,js website projects. I want to utilize hugo to maintain head, header and footer for me.
Now I migrated all of the html and css of my current project to hugo, which worked fine. It's average Landing Pages with header/footer and a couple of sections. However I seem to be unable to include my Javascript files.
I have started with two first scripts to try out the setup, one navBar.js and one headerShadow.js (simple UI tricks).
I have included those two files in {projectName}/themes/{themeName}/layouts/partials into the footer.html with the following tags:
<script defer language="javascript" type="text/javascript" src="{{ "/js/navBar.js" | urlize | relURL }}"></script>
<script defer language="javascript" type="text/javascript" src="{{ "/js/headerShadow.js" | urlize | relURL }}"></script>
First question: Is that even the best practice? I found this on another post on stackoverflow, which I'm unable to reproduce.
Second question: My visual studio code already flags exactly the part /js/navBar.js" in both tags as faulty. What am I doing wrong here?
I tried:
connecting as "usual" <script src="js/headerShadow.js"></script>
I would be very thankful for advice from someone more experienced with hugo!
Thanks alot in advance :)
I would suggest using hugo pipes and assets as a best practices.
In the docs under:
ASSET MANAGEMENT
JavaScript Building
https://gohugo.io/hugo-pipes/js/
It gives the exact syntax and what to do so I won't bother copy pasting it here. This includes Tree Shaking, minify, etc. etc. Things which are "best practices".
I would suggest of the options (like importing from your node_modules or etc.) that you just keep your JS in the assets folder for simplicity and use that option in the above docs.
Specifically: https://gohugo.io/hugo-pipes/js/#import-js-code-from-assets
This would be, in my opinion, for a simple site, best practice.
If you don't want to use Hugo Pipes (it's a bit advanced for what you need), here's a simple way to approach it that worked fine in my project.
<script src="{{ .Site.BaseURL }}js/navBar.js"></script>
In development (hugo server command), .Site.BaseURL will be overridden to http://localhost:1313/. In production (hugo command) it will be the value of baseURL in config.toml, such as https://www.example.com/.
Files in the static directory are built to your site root, so the file would be located at http://localhost:1313/js/navBar.js. That's why I believe the relative path isn't working.
If that doesn't work, there's likely some other issue in your project that needs addressing, or try clearing your browser cache.

Example files in d3-graphviz download won't run (necessary files seem to be missing)

I'm very new to Javascript, Graphviz, and D3, and I'm having issues setting up D3-graphviz. I downloaded the latest release on Github, but none of the html files in the "example" folder will run when I open them in my browser.
When I looked at the script src lines at the beginning of the files (see below), they referenced "node_modules" and "build" files that I didn't have. I tried creating the node_modules folder and adding d3.js and graphviz.js, but I don't seem to have a d3-graphviz.js file to put in a build folder.
I also tried creating html files with script src lines similar to the ones in the online demos, but this didn't work either.
The original script src lines (when I tried to run the example files unedited):
<script src="../node_modules/d3/dist/d3.js"></script>
<script src="../node_modules/viz.js/viz.js" type="text/javascript"></script>
<script src="../build/d3-graphviz.js"></script>
and the alternate ones I also tried:
<script src="//d3js.org/d3.v4.min.js"></script>
<script src="https://unpkg.com/viz.js#1.8.0/viz.js" type="application/javascript"></script>
<script src="https://unpkg.com/d3-graphviz#2.6.1/build/d3-graphviz.min.js"></script>
Both times, when I go to open the html file in Google Chrome or Safari, it just opens a blank page. However, when I follow the demos in the readme (e.g. here), they work just fine. I can also successfully generate static graphs using just graphviz and Terminal.
I'm wondering if I am missing a step in the setup process, or missing a dependency (other than graphviz and d3) that I should download? I can't find any other questions about struggling with just showing an animation at all, so I would appreciate any advice :)

How to include CDN-hosted libraries with ng-boilerplate?

I want to add the CDN-hosted Firebase Javascript file to my application based on ng-boilerplate.
I tried just adding it to vendor_files in build.config.js, but it isn't included in the output index.html - maybe because it can't find the file locally?
The application works if I add it to the index.html template directly, but that's unclean and breaks the tests.
Is there a way to add external files to ng-boilerplate or modify the Gruntfile to add them?
According to the docs,
the vendor_files.js property holds files to be automatically
concatenated and minified with our project source files.
so that won't work. According to Kato's link, it's still under consideration for v0.4.
Have you looked into angularfire?
As for having the files hosted from firebase cdn, add the following right after (or before) the google plus script:
<script src="//cdn.firebase.com/v0/firebase.js"></script>
<script src="//cdn.firebase.com/libs/angularfire/0.5.0/angularfire.min.js"></script>

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

Compress Javascript Files

I have a little situation here and in-spite of searching a lot - am not getting to a solution.
I am loading Javascript Files in the footer of my page as below
<script type='text/javascript' src='/scripts/jScrollPane.js?ver=1.0'></script>
<script type='text/javascript' src='/scripts/common.js?ver=1.0'></script>
<script type='text/javascript' src='/scripts/preload.js?ver=1.0'></script>
<script type='text/javascript' src='/scripts/scroller.js?ver=1.0'></script>
<script type='text/javascript' src='/scripts/easing.js?ver=1.0'></script>
<script type='text/javascript' src='/scripts/jquery.backgroundPosition.js?ver=1.0'></script>
All I want to do is instead of including the above files - just include one compressed file which is made by compressing all the above files.
<script type='text/javascript' src='/scripts/one.js'></script>
I have tried a lot of options and each time there is an error in the file generated.
Is there a solution where I upload all files - get one compressed file and it works without an error?
Is is possible that these files themselves are missing ending ;'s - the reason why there are errors?
What can I do to come to an alternative here.
Cheers!
I would start of by running my code through JSLint http://www.jslint.com/ for instance, so that you can identify and solve any JS-errors.
I suggest something like Minify: http://code.google.com/p/minify/
Minify is a PHP5 app that helps you follow several of Yahoo!'s Rules
for High Performance Web Sites.
It combines multiple CSS or Javascript files, removes unnecessary
whitespace and comments, and serves them with gzip encoding and
optimal client-side cache headers.
Is there a solution where I upload all files - get one compressed file and it works without an error?
Yes, assuming that your files are setup correctly.
Is is possible that these files themselves are missing ending ;'s - the reason why there are errors?
Exactly, the files you minify must support the removing of line breaks. Missing semicolons are the biggest problem.
Paste each file into the Closure Compiler Service. Keep the optimization level at "Simple".
Correct any error you might get. Watch out for missing semicolons at the end of the file, as these do not trigger an error.
Concatenate the results in one file.
Done.

Categories

Resources