I am using React and when I update my live application there is usually problems with the new CSS not being loaded.
Right now it just say:
import './app.css'
For a html website I would just add a parameter. Can I add this in a React application as well? Something like:
import './app.css?v=1.2'
Or is this not recommended for a React application?
I think this is not the problem with the way your application is compiled I think this has to do with how your browser caches CSS. When you load a website your browser caches files and if it reloads and sees the same name as in the cache it will not download a new version but use the old one. I do not know why this is showing up because hot reloading should refresh this but if you reload using CTRL + Shift + R (or CMD + Shift + R) it should not happen. For the specifics search on why cache is not getting cleared.
Related
Problem:
I use CEFSharp to serve local content in a C# application.
In some cases I've got several iframes that should load different local URLs based on user actions.
I load content in those iframes using the Iframe.LoadUrl method. The URL is using the file schema.
In runtime, the application does not load the new url for the iframe until I open the devtools. When I do that, the iframe's contents are loaded perfectly and quickly.
This only happens once per iframe: After opening devtools, I can execute the same code and the iframe's contents are updated accordingly. I'm guessing the iframe's state is wrong somehow, but so far I haven't found any differences before/after opening devtools.
Context:
This application was running OK in CEFSharp 85.3. The library's version was upgraded to 101.0.
The code I'm working on is a plugin, and the initialization is managed by the main app, so I have little flexibility there. I could request changes if reasonable though.
Has anyone seen something like this before?
I've found a workaround for now, it seems to be working fine:
instead of doing:
frame.loadURL(url)
I'm using:
frame.Parent.ExecuteJavaScriptAsync("document.getElementById('" + frame.Name + "').src = '" + url + "'", "file:///");
I'm not really happy with my solution, but it seems to be working for now in my case.
What tool/editor do you recommend to (live) test your local CSS changes against an externally hosted site?
A site lives on a domain.test (no server access), and I need to write extensive CSS overrides to reskin the entire site. All changes will be in a single CSS file with no preprocessor.
The ideal setup is using the comfort of my regular code editor (Visual Studio Code) and having the site open in a browser and have the CSS auto-refresh as I save my CSS changes in a local directory.
It's a big site, so I'm open to setting up a complex setup rather than relying on testing edits using browser inspect mode or mounting CSS files using Firefox.
:: I can inject JS script/library to the site if it helps with my setup.
Bonus: If I can do that for Vanilla JS too.
I would do it as follows with ModHeader and ScriptAutoRunner (chrome extensions).
With ModHeader replace the site's CSS and JS to local files using the "Redirect URL" function. (If necessary use ScriptAutoRunner to inject JS).
In one of these JS files create a rule to download every 2 seconds via ajax (any other way) your local files and check if there is equality with the last request or not. If the file has changed then reload the page (to update).
I know there are some tools that show CSS changes in real time without you having to reload, but I don't use them and the way I mentioned you can also make them run when the JS is updated.
I want to remote debug a remote webpage and inject my own stylesheet into it locally using WebStorm, so that any changes I make to the CSS are immediately reflected on the page. Is there any way of achieving this?
You can achieve this with Chrome's Developers Tools. Using Ctrl + Shift + I.
There you can edit css-rules and any changes will be reflected on the page immediately.
I'm starting a large scale app and need advise on setting up the folder structure and all. So I'm not sure if on Meteor startup if it loads all of the components to one file or not ( if all the components are in the client/ folder )
If it does not load all the components and send it to the client initially the this question has been answered. if Meteor do send all the components to the browser then need a way to fix it.
At the moment I have like 70 components and do not wanna send all of this to the user on the initial page load.
It seems as though incremental/on-demand loading for components is in the 'todo'/'future feature' stage.
From - Trello: Meteor Roadmap
Right now, on initial pageload, you download all of the JavaScript,
templates, and css in the app.
This task is to make it so that you download just the parts that you
need. You might download additional parts in the background, or
on-demand as you navigate through the app. (To be clear, this would
apply to the JavaScript, CSS, and templates, not to database contents,
which would continue to be handled by the subscription system.)
It should be possible to secure some of the additional parts so that
only certain users can download them. For example, only admin users
could download the JavaScript and templates for the admin console.
Related: when the app is updated, only download the changed parts, not
the whole app.
I started out with a basic site.master. After I laid out several pages, I have found that I need to make changes to the site.master. The changes show up while I am working in Visual Studio, but when I run the application, they don't take effect. What do I need to do to have them show up?
When you make changes to CSS or javascript (or any other static content, for that matter), you need to clear out the browser cache to ensure the latest version is loaded from your server.
You can force a reload from the server by using Ctrl + F5 on most browsers.