We Keep Coding

Can't load styles with longer link with Laravel (blade.php)

I am building a web page and i have a problem about the page. In the 'routes', I created a custom link:
Route::get('/customization/footer', 'Controller#footer');
So, the page will be loaded using https://myweb.com/customization/footer. But, using that link, the page didn't load the style (css and js). And then, when I changed the link on 'routes' becoming:
Route::get('/footer', 'Controller#footer');
the page loaded perfectly (no problem found).
The reason I used a longer link is to make it tidier. Does anyone know about how to solve this problem? I need help 🙏
P.S.: The problem is not in how the style files (like css and js files) are called. The problem is in the link I used as I stated in my question

You havent shown how to include styles on your page.
The best way to connect styles is via a helper asset()
<link href = "{{asset('css/app.css')}}" rel = "stylesheet">
(for path /public/css/app.css)

Just adding js script to typo3

I have the following problem.
I have a typo3 page without any template I made by myself, but it gets in some way the style and the behavior of the other pages (I mean navigation, footer and so on). Now I have written some HTML inside the page by creating an HTML element.
In this HTML element, I included some js-code, which uses jQuery. The problem is, that the page loads the jquery at the footer and my scripts are loading before (in the HTML element). So my script does not recognize jQuery. How can I add my scripts at the whole end of the page? I know, that it has something to do with templates, but when I create a new template for the page, the whole content disappears.
Would be nice to get any help.
Cheers,
Andrej

It is usually good practice to read all your JS from a single file placed in the footer of the page. Add this to the setup section of your page template:
page.includeJSFooter.scripts = fileadmin/js/scripts.js
Then remove the JS from the HTML template and put into this file. This file could hold all your custom JS and possibly even all the libraries you use on the page (if you are not loading them from a CDN).
Bonus: the JS doesn't have to be re-loaded on every page view but can be read from cache.
For reference: https://docs.typo3.org/typo3cms/TyposcriptReference/Setup/Page/Index.html#includejsfooter-array

I hope by template you mean a template record where you store your TypoScript? Otherwise this answer is not what you are looking for. :)
You can just add an extension template on your page that only adds to the rest of the TypoScript but does not override anything. To do so, go to the template module, choose "info/modify" in the dropdown at the top and use this button
Explanation: an extension template has the checkboxes for clearing the constants and the setup not checked and will not mess with the rest of your site's TypoScript:

How to dynamically remove all unwanted CSS and JS from page

I have an amateur sports website to maintain and I am not an expert in web development. The pages I can put on the website can only be in the form of predefined templates, something similar to wordpress.
The main website loads it's own CSS files and JS files which we do not want as it interferes with our customisations. These files change as and when the main administrators/developers deploy new ones to the main/parent website.
I want to dynamically block loading of all CSS files and JS files that are not ours and instead use our own custom CSS and JS files.
Currently I am doing something like this below, but as you can see I will have to update the file names whenever they change to something else and I would not know when they change unless I notice the difference on the webpages.
<script type="text/javascript">
$('link[rel=stylesheet][href="/assets/application-b51e2731e0d53e4d422.css"]').remove();
$('link[rel=stylesheet][href="/assets/print-a622ffc90d1232b126e42c.css"]').remove();
jQuery('head script[src*="application-7fd426f9bca208.js"]').remove();
</script>
Is there a better way to block all unwanted css / js files dynamically without me having to hardcode it like I have done above?

Instead of worrying about tracking file names, why not just target anything that's not yours?
$('link').not('.myLink').remove();
And just make sure you drop that class on your link:
<link rel="stylesheet" href="path.css" class="myLink" />

Use CSS/Javascript received through AJAX

I'm experimenting with the jQuery UI tab control, and have three tabs that each load a different page through AJAX. The pages that are loaded are complete html-pages, with their own Javascript and CSS.
Scripts that are inline in the html body are ok, so are CSS in the style-attribute on tags, but Javascript and CSS in the head of the loaded pages are not used at all.
How can I make use of the Javascript and CSS in the head of the loaded pages? Or do I have to include all CSS and Javascript in the page containing the tab control?

The AJAX load is going to filter out anything that's not in the body element. You can put the CSS/Javascript tags in the body and they will be added to your page, but I would avoid that if at all possible. If you're not careful, you'll end up including things multiple times.
I suggest putting the common stuff like jQuery itself, plugins, etc. on the page containing the tabs and only put tab-specific scripts on the bits that are loaded via AJAX. You'll need to be careful to manage ids -- they have to be globally unique, not unique within the tab. Sticking with classes may be a better way to handle this or preface your ids with the tab name. For CSS I would try to make it so the CSS applies to the entire page, including tabs, and load it with the page.
YMMV.

You could add this line in your head:
<link rel="stylesheet" id="yourid" type="text/css" />
and this after your ajax call:
document.getElementById('yourid').href='css/'+yourvariable+'.css';}
And you can do the same for scripts (change rel and type).

Remove all CSS rules

Is there a way to wipe out all CSS rules once style sheets have already been loaded?
I have to use a proprietary JavaScript library (ESRI's ArcGIS Server API) which is built on top of Dojo. I make extensive use of Dojo's widgets and would like to use Dojo's claro theme but unfortunately the ESRI library mungs up the CSS by loading in off-site CSS files (and probably CSS rules hard-coded in the JS). This ends up mangling the Claro theme.
So many Dojo widget CSS classes get rewritten and new rules get created that just wiping out all CSS and reloading the standard Dojo stylesheets seems easier/safer.
Something like the following would be nice:
* {none}
but I figure I'll have to end up using either Dojo or jQuery to accomplish this.

check out this bookmarklet called RefreshCSS by Paul Irish:
javascript:(function(){var h,a,f;a=document.getElementsByTagName('link');for(h=0;h<a.length;h++){f=a[h];if(f.rel.toLowerCase().match(/stylesheet/)&&f.href){var g=f.href.replace(/(&|%5C?)forceReload=\d+/,'');f.href=g+(g.match(/\?/)?'&':'?')+'forceReload='+(new Date().valueOf())}}})()
It refreshes the CSS stylesheets on a page, without refreshing the page itself.
I think you could do some alterations to it and get it to do what you want?
Another approach using jQuery that might work is to run this once the page has loaded:
$('head link, head style').remove();

Nope. Sadly, such a thing does not exist.
The answers to these related questions give pretty much the rundown on what is possible in terms of workarounds.
Is there a way to “sandbox” an html block away from its page's CSS without using iframes?
Reset CSS for a certain area of the page?
prevent meyer reset css to mess with dynamic content
How to reset css in middle of html document ?

There is always document.head.innerHTML = ""; But it really cleans house so you have to store away any scripts,metatags, titles or whatever you want to save and add them again.